Ionic práctico: App con REST

Añadir los servicios para comunicar con el back-end

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
Creamos ahora el provider para los servicios que se ocupan de todas las tareas de comunicación con el back-end utilizando REST: haremos GET, POST, PUT y DELETE para recuperar, añadir, modificar y eliminar registros.

Transcripción

La estructura básica está montada, el siguiente paso será trabajar un poco más en la parte interna de mi aplicación. Voy a trabajar sobre los servicios, sobre los Providers que voy a utilizar para pasar los datos a cada una de estas vistas. Podría pasarlos a mano, pero siempre es más seguro y fácil utilizar Ionic. Así que me voy a salir del Ionic Serve, y voy a utilizar Ionic G Provider, que es el que sirve para crear proveedores de servicios y voy a crear un proveedor de servicios que se llame "BirdsService". Volviendo de nuevo a la carpeta de subline text, vemos que se ha creado una nueva carpeta Providers dentro de la cual se ha creado este BirdsService.ts. Esto mismo lo puedo repetir con un segundo proveedor de servicios que voy a utilizar para otra cosa. El primero lo voy a utilizar para cargar todos los datos del "Rest", o sea, va a ser el que me sirva realmente para el Rest. El segundo es el que voy a utilizar para guardar variables que sirvan como repositorio de variables globales. o sea, gracias a él voy a poder almacenar datos que que luego utilice en toda la aplicación, y además voy a utilizar ambos servicios para explicar la diferencia que hay entre tener un servicio que esté accesible siempre, y tener un servicio que se cargue cada vez que se entra dentro de una lista. Así podremos ver como uno de ellos almacena los datos siempre y el otro los va cargando cada vez que los necesita. Bueno, para este Variables globales, lo voy a llamar Vars-Globales, pulso Intro, esto generará de nuevo aquí este archivo, aquí vemos uno, aquí este otro, de momento, simplemente tienen el código imprescindible, y el siguiente paso, para mí va a ser crear las llamadas a estos servicios en los puntos concretos donde lo voy a necesitar. Para el caso de que yo quiera de que este proveedor esté en todas partes, como es el caso de estas variables globales, me voy a ir a AppModule, copiaré toda la línea del código que se ocupa de la importación y ahora, básicamente lo que haré es poner la ruta de este archivo, Vars-Globales. Y por otro lado, para utilizar su nombre de clase, me voy a ir hasta el archivo, lo voy a copiar y lo voy a pegar. No solo eso, de momento simplemente he hecho la importación para poder utilizarlo, pero lo que realmente, lo que tengo que hacer es convertirlo en un proveedor, y para ello tengo que irme al listado de Providers y volver aquí a pegar el nombre de esa clase. Gracias a eso, en principio, esas variables van a estar localizables, van a estar utilizables desde cualquiera de los archivos, lo que pasa es que para poder realmente utilizarlas, voy a necesitar hacer una cosa más. Voy a copiar esta línea de importación, voy a irme a la primera de las páginas que es este Home, y sobre esta página voy a añadir ese Vars-Globales, ahora también va a estar accesible desde este archivo sin necesidad de haberlo añadido de alguno de esos proveedores. De todas formas, para poder utilizarlo necesito también añadirlo dentro del controlador. Así que necesitaré, voy a copiar y pegar esta línea, añadir este Vars-Globales voy a poner con minúsculas, como la variable Vars-Globales que hace referencia a la clase Vars-Globales, lo tengo que meter dentro del constructor. Esta es la primera forma de trabajar, por cierto, que aquí tendré que hacer un cambio en la ruta porque es dos carpetas más atras, quiero decir, este archivo está en la ruta Home Page, y sin embargo, este solamente está en App, con lo cual necesito volver hacia atras un nivel, mientras que en este necesito dos, es por esto por lo que están estas dos partes. Como decía, igual que he utilizado esta importación en este apartado, también puedo hacer la importación y la utilización como un proveedor específico para cada una de las páginas cuando estas se carguen. Así que puedo cargar ahora dentro de esta página este BirdsService, y para poder utilizarlo, necesitaré también, de nuevo, añadirlo como un parámetro más. BirdsService, aquí lo puedo poner, por ejemplo, en vez de llamarlo con Birds, voy a llamarlo simplemente Servicios. Y como decía, para que además funcione de una manera interna, para que realmente lo pueda utilizar como un proveedor necesitaré, en este caso, añadirlo, dentro de... el Array Providers propio del Component. Así que si queremos utilizar algo en todas partes, y que sea solamente una instancia de ese algo, lo añado como un Provider dentro del Module, si queremos hacer... que un proveedor tenga una instancia propia dentro de una de las páginas, pues entonces lo que hago es crear un provider especifico para cada una de ellas. Por este lado lo tendría preparado, pero para que funcione correctamente en todas las páginas, necesitaré irme una por una... donde las vaya a utilizar, así que dentro de Add voy a añadir una, dentro de lista voy a añadir también, voy copiando y pegando y guardando, y por último, la página Update. Y por otro lado, necesito también, copiar esta parte de los Providers, cada uno de estos archivos y para terminar, también utilizaré tanto uno como otro en cada una de las páginas. En realidad lo estoy haciendo un poco a groso modo. Porque va a haber alguna página en la que no utilice alguno de los dos, no obstante, por simplificar he repetido la misma estructura en cada una de las páginas. Una vez que he terminado, es una buena costumbre asegurarme de que el trabajo que he hecho es correcto. Voy a hacer un Search y voy a asegurarme de que la depuración es correcta, que no me encuentra ningún error, y veremos que algún error ha aparecido, voy a volverme atras... vale, el problema es que al copiar y pegar, he olvidado añadir la ruta correcta. Vale, pues no hay problema, vuelvo de nuevo... Pido que me haga un Rename para poder copiar el nombre exacto, y ahora voy a ir controlador por controlador, sustituyendo uno por otro. Copio y pego... pego... pego de nuevo... y, pego por última vez. Guardo, y voy a ver que es lo que dice ahora... Bien, es lo malo de copiar y pegar, se ve que he añadido una coma de más, y es que, a veces, merece más la pena escribirlo elemento por elemento que andar copiando y pegando. Bueno, pues guardo, guardo... guardo... y guardo... y agora sí que debería estar la compilación perfecta. Estamos ejecutándola y efectivamente no me da ningún error a la hora de compilarlo, con lo cual ya tengo listos los servicios que voy a utilizar a lo largo del uso de la aplicación.

Ionic práctico: App con REST

Practica creando una aplicación con Ionic, gracias a la combinación de AngularJS, HTML5 y un back-end basado en PHP para servir datos a tu app así como modificar registros.

3:00 horas (38 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.