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

Botón de modificar número de veces visto

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para terminar este capítulo, aunque no el apartado Home, añadiremos la programación necesaria para utilizar nuestro primer PUT, que utilizaremos para modificar el número de avistamientos relacionado con un ave en concreto.

Transcripción

En este mapa que tengo, por cierto estos botones se visualizan mal simplemente por culpa del navegador pero en el emulador se verían perfectamente, pues este botón me falta por añadir. Necesito que cuando haga clic sobre él se llame al servicio que sirve para añadir el número de veces que se ha visto ese pájaro. Así que voy a implementarlo. Dentro del HTML tendré que llamar a alguna función para que se ejecute ese código. Esa función va a ser por ejemplo la función 'addVez'. Para hacerlo más fácil voy a copiar el código que ya tengo para un clic. Ctrl + C me voy a ir al botón y en vez de 'openMap' voy a utilizar 'addVez'. Y en este caso le voy a pasar el identificador también y va a servir para, a través de ese identificador, recuperar el índice del pájaro que tengo que enviar al servicio correspondiente. Ahora aquí necesito obviamente crear esa función así que voy a irme un poco más abajo y efectivamente creo este 'addVez'. Necesito recuperar los datos del pájaro Esos datos del pájaro los puedo recuperar desde aquí. Utilizar el mismo método que tenía, tengo todos los pájaros y tengo un 'index' que estoy recibiendo como parámetro asi que por este lado ya tengo los datos. Por otro lado, necesito utilizar los servicios que ya he usado previamente así que puedo seleccionar esos servicios, puedo copiarlos y pegarlos. Ahora tengo que cambiar, eso sí, qué servicio es el que voy a utilizar porque no va a ser este 'getOne'. ¿Y qué servicio va a ser? Pues 'addVeces'. Voy a eliminar ese 'getOne'. Este servicio también, otra cosa que es interesante, no voy a pasar un identificador. En este caso voy a pasar un objeto con datos. Ese objeto con datos es el objeto de los datos del pájaro. Tengo que pasar un identificador y un número de veces. Y el número de veces tiene que ser el nuevo. Como yo sé que se ha aumentado una vez la cantidad de veces que se ha visto ese pájaro, pues lo que hago es añadir uno al número de veces que tengo guardado en estos datos. Y una vez hecho esto con los datos ya correctamente preparados pues solamente envío esos datos como un parámetro. Todo ese objeto se va a enviar y luego básicamente vamos a recibir una respuesta. Voy a eliminar ese elemento. Habré conseguido que se actualice al sustituir el número de veces directamente desde aquí se va a inyectar el número de veces también en este 'pájaro.veces' con lo cual por este lado no necesito refrescar la página. Y por otro lado, sí que es bueno avisar al usuario que se ha hecho un cambio. Y para hacer ese cambio podemos utilizar un componente típico de Ionic. Voy a, primero, comprobar que efectivamente la respuesta ha sido correcta y para ello voy a recuperar de los datos que estoy recibiendo, la propiedad 'response' y dentro de esa propiedad en caso de que sea 'ok' y solo en ese caso, pues como decía aquí voy a crear un componente muy habitual que es una alerta pero una alerta propia de Ionic. Así que voy a crear la variable 'alert' y voy a pedir que me cree un nuevo 'alertCtrl' que de hecho tiene el método 'create'. En realidad todo esto es muy fácil de hacer lo único que hay que ir a la documentación de Ionic, copiar el código, pegarlo y sustituirlo. De todas formas tiene un poquito de truco pero ahora explicaré de qué va. Este método 'create' pide que se pase un objeto. Este objeto que vamos a pasar va a tener varios parámetros; va a tener por un lado el parámetro 'title' que es el título que va a poner, 'Aviso'. Por otro lado el texto que va a aparecer, el subtítulo, que en este caso va a ser por ejemplo 'Avistamiento añadido' y luego por último también los botones que se van a añadir. Así que le voy a poner dentro del listado de botones un array en el que simplemente voy a pedir que añada el botón de aceptar, 'OK'. No necesito más. Este 'alertCtrl' tiene que venir de algún sitio. Tenemos que haber añadido a este controlador ese elemento en alguna parte y ese elemento lo voy a añadir como el resto de elementos externos, a lo que es este controlador. Así que voy a crear un 'public alertCtrl'. Por cierto que mejor lo voy a copiar y lo voy a pegar, no vaya a ser que lo haya escrito mal. Bien. Y ese 'alertCtrl' va a ser del tipo 'AlertController'. Pero claro, para poder utilizar este 'AllertController' también tendré que haber añadido ese 'AllertController' dentro, voy a copiarlo, de las importaciones. Así que voy a añadirlo. Ahora sí lo tengo listo. Importo. Lo inyecto y luego en 'addVez', en caso de que la respuesta sea correcta, abro esa alerta. Me queda todavía un último detalle para esa alerta. Voy a irme un poco más abajo y le voy a pedir a esa alerta que ejecute el método 'present'. Lo guardo, me aseguro de que la compilación funciona. Bien, parece que está terminando. Me voy al navegador. Voy a poner el mapa, que queda más bonito y cuando pulse en 'Acabo de verlo' aparece aquí este 4. Pero me está diciendo que en concreto esta URL no la está encontrando, me está devolviendo un error 404. Bien, pues no hay problema, vuelvo atrás, vuelvo donde tengo todos mis servicios y en ese caso en 'addVeces' y me voy a asegurar que efectivamente esto sea 'updateVez'. Y no, aquí es 'updateVeces'. Vale, pues no hay problema, lo cambio, sustituyo 'updateVez' por 'updateVeces'. Abro el navegador después de ver que no hay ningún error. Pulso en 'Acabo de verlo'. Y efectivamente recibo 'error ok', o sea, parece que ha funcionado y sale como número de veces 4. Si quiero estar seguro puedo recargar la página. Si ahora me sale como veces visto 4, es que efectivamente ha sido capaz de añadirlo correctamente. Y aquí vemos cómo efectivamente ya tenemos funcionando también el botón de 'Acabo de verlo'.

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.