El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Ionic práctico: App con REST

GET: cargando todos los datos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Empezaremos con la más simple parte del REST, esto es, con el método GET, que utilizaremos para recuperar el listado de todos los registros que más tarde utilizaremos en las páginas home y lista en la aplicación.

Transcripción

El tener todos los servicios relacionados con el Rest en un solo archivo me va a simplificar mucho el código, voy a trabajar durante los próximos vídeos sobre ello. Así que voy a abrir el archivo "birds-service" y voy a empezar a añadir código sobre él. En este primer vídeo voy a comenzar creando un método que se ocupe del "get", de recuperar todos los datos, en principio es el más simple, aunque vamos a ver que un poco se trata de copiar y pegar porque van a ser todos básicamente lo mismo. Creo ese método "getAll", lo creo dentro de la clase en Ionic 2, no necesito crearlo de otra manera, y gracias al "TypeScript" es bastante fácil de hacer. Voy a trabajar sobre "Promises", yo en realidad lo que quiero es que los datos que esté recuperando en un momento determinado lleguen al componente en concreto cuando estén disponibles, no antes, y que allí "Angular 2" se ocupe de hacer todo lo que necesite con ellos. Eso significa que tengo que crear un Promise, que va a servir para hacer que esos datos asíncronos se sirvan cuando toque. Así que voy a crear un "new Promise", y ese Promise es lo que voy a devolver. Dentro de ese Promise tengo que especificar varias cosas. Por ejemplo, tengo que especificar qué va a ocurrir cuando se resuelva. Que básicamente va a tener un objeto en el que definiré: Primero, qué es lo que tiene que hacer, voy a utilizar el HTTP que es el proveedor de servicios que se ocupa de la conexión con internet, y a través de él voy a utilizar el método get, este método me sirve ahora para llamar a la URL de donde quiero sacar los datos. Y ahora voy aquí a tocar un tema que es bastante importante porque puede dar bastantes problemas. Yo estoy haciendo las pruebas sobre este localhost, que es el localhost :8100, sin embargo mi servidor lo tengo montado sobre el localhost :8888. Si yo pusiese el localhost aquí en esta ruta me encontraría con que voy a tener un conflicto, y dependiendo de la configuración del sistema es casi seguro que me va a dar algún tipo de error, así que en vez de ponerlo así, voy a añadir la ruta 127.0.0.1 que es la ruta que tiene por defecto el servidor MAMP que he instalado, sobre él llamo al puerto 8888, y ahora sí, aquí puedo llamar a pajaros que es el sitio Rest y a la ruta "all" que es el servicio que me va a devolver todos los datos. Bueno, pues ya he creado la llamada, como digo, utilizando ese 127.0.0.1. Ahora, ¿qué quiero hacer? bueno, tengo varias posibilidades, por ejemplo, a mi me interesa utilizar este operador "map" que me devuelve ya por defecto. Ese operador map me va a servir precisamente para eso para mapear el resultado. Así que voy a hacer que ese resultado, ese Rest quede mapeado como un objeto "json". Pues una vez que he mapeado ese resultado lo siguiente es devolver el resultado, o sea, enviárselo a los que estén suscritos a este resultado, y dentro de este "subscribe" voy a devolver los datos. Estos datos que podría devolverlos sin más también tengo la posibilidad de trabajar un poco con ellos, de formatearlos, entonces aquí podría hacer muchas cosas, aunque en realidad no lo voy a utilizar, no deja de ser bueno explicar como funciona. Yo aquí puedo poner una variable en la cual guarde los datos que estoy recibiendo, y luego esa variable, puedo hacer que esté definida en esta clase y por otro lado puedo hacer que cuando se haga la llamada al getAll se compare si existe, y en caso de exista que no pida todo el Promise, y que devuelva simplemente esos datos. Con eso habría conseguido evitar que se tenga que hacer una llamada cada vez que se entrega una página. En mi caso no me interesa, me interesa que se refresquen los datos porque puedo haber estado haciendo modificaciones en otras partes. Así que, para ello, voy a utilizar el método "resolve" y dentro de él voy a meter este "data". Y esto para el caso de que haya sido todo correcto pero también podría haber ocurrido algún error, así que voy a añadir también un "handler" para el error, voy a pedir por ejemplo que me diga cuál es ese error. Ya lo tengo configurado, básicamente consiste en hacer la llamada y devolver un Promise. Voy a guardarlo. En principio la compilación no me ha dado ningún problema, aunque de todas formas no estaré seguro de que funciona correctamente hasta que no lo integre, de todas formas es una cuestión de gustos. Primero voy a trabajar sobre la creación de todos los servicios y luego los iré utilizando en las páginas según los vaya necesitando.

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.