Ionic práctico: App con REST

Añadir el resto de elementos de la pantalla

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Con todos los servicios relacionados con la Home montados y con el sistema de creación de mapas creado, podremos ya añadir el resto de los elementos que mostrarán la información del registro en el slide.

Transcripción

Después de un par de vídeos un poco complejos, voy a pasarme a un vídeo que sea un poco más fácil. Voy a cerrar ese Provider. Y voy a abrir Home.html, y bueno, añadiré los elementos de esta página. ¿Qué elementos necesito? Bueno, pues por ejemplo, debajo de este rótulo, de este título, voy a añadirle un H3 con el nombre del pájaro para que salga un poco más gordo y quede más bonito. Cambio la propiedad Título, por la propiedad Pájaro, por este lado de este Ion Card voy a necesitar una etiqueta IonContent, así que la añadiré, Content... y Content. Y ahora dentro de este IonCard Content, necesito añadir varias cosas, lo primero, quiero añadir un botón, bueno, pues añadiré aquí un.. Button, ese botón es el que me va a servir para ver el mapa, cuando yo haga clic, se desplegará el mapa. Así que le pongo de texto "Ver Mapa". De momento, no voy a poner ningún código de ejecución, no le voy a poner un Click, pero sí que le voy a pedir que efectivamente sea un Ion Button y por otro lado le voy a pedir que ocupe el total, o sea, de lado a lado del Card sobre el que está montado. Este botón lo voy a copiar y lo voy a volver a utilizar debajo del mapa, voy a ocuparme de que aparezca un segundo botón pero ese segundo botón va a servir para añadir una segunda visualización más, así que voy a ponerle de texto "Acabo de Verlo", eso va a servir que para hacer clic efectivamente se añada una vez más. Y además, a este botón le voy a cambiar el color para que sea un poco más bonito. Le voy a poner de color, y le voy a poner rojo, "Danger". Estos colores son configurables desde variables.scs. Por otro lado viene bien saber cuantas veces lo he visto, así que voy a añadir aquí "Veces Visto:" y voy a necesitar recuperar el número de veces que se ha visto, bueno, viene dentro de los datos también, porque ahora estoy recuperando todos los datos gracias al segundo servicio que creé, así que aquí puedo poner "Veces". Y por último, entre ese botón y veces y el botón de debajo, voy a poner el mapa, y ese mapa lo voy a crear con "Div", ese Div que va a llevar asociada la clase Google Map, me va a servir para que sea más fácil localizar donde va a aparecer el mapa el mapa en realidad va a aparecer aquí montado, dentro de este segundo Div interno, así que dentro de este Div no pondré nada, pero, y esto es interesante, voy a tener que ser capaz de detectar que Div es el que tengo que abrir de que Slide en concreto, no quiero que me ponga el mapa siempre en el mismo, quiero que cada Slide tenga el suyo propio, así que este Slide tiene que tener un identificador único, yo podría poner aquí un Identificador Mapa, pero es que no me vale, necesito algo un poco más complejo, y para eso voy a utilizar Ionic 2, y voy a pedir que el atributo ID sea dinámico, así que voy a igualar ese atributo ID al texto Map, pero además tengo que añadir el Index del búcle que se está generando dentro de este NG4, y para ello voy a tener que pasar ese Index como una variable así que voy a añadir ahí "Let i = Index;" después e haber añadido esta i, puedo reutilizarla aquí debajo, entonces puedo pedir que el identificador sea Map, pero eso sí, lo voy a tener que poner entre comillas simples 'map' + i y así se va a generar este Div con identificadores únicos que van a ser Map 1, Map2, Map 3... etc. Por último, quiero que todos tengan el mismo aspecto, así que voy a añadir una nueva clase que va a ser la clase Mapa, voy a guardarlo, voy a irme al Home.css y aquí también necesitaré añadir el CSS de ese mapa, así que... añado la clase mapa, y dentro de esa clase mapa en realidad voy a hacer algo muy simple, voy a decirle que tenga 200 píxeles de alto, él ya se va a encargar de darle el ancho correspondiente. Bueno, pues puedo cerrar ya este Home.css que no lo voy a volver a necesitar. Tengo ya, toda esta estructura perfectamente montada, voy a guardarlo de nuevo, voy a asegurarme de que se compila todo perfectamente, parece que ahora mismo está parado el asunto, así que... voy a pedir que lo compile, y ahora sí está haciendo esa compilación, es correcta, no hay ningún error, y dentro del navegador vemos ya la diferencia de aspecto me sale el rótulo, me sale el nombre, me sale el botón de ver mapa, me sale el número de veces que se ha visto... Eso sí, mientras acaba de compilarlo por segunda vez, voy a añadirle una cosa más para mejorarlo, y es que me interesa que se vea más el pájaro, así que en vez de poner un H3, voy a poner un H1, lo guardo de nuevo, y bueno, el resultado cuando termine de compilarlo aquí se puede ver, me pone el rótulo un poco más pequeño, el nombre del pájaro un poco más grande, y además, en cada una de esas diapositivas me va poniendo la localización, el pájaro y además el número de veces que ha sido visto.

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.