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

Estructura del proyecto. Añadiendo las páginas de la app

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Comenzamos el capítulo creando la estructura de páginas de la aplicación. Crearemos las cuatro páginas que componen los cuatro apartados que tiene esta: home, listado y formularios de añadir y modificar.

Transcripción

Sobre la estructura que ha creado Ionic, voy a empezar a trabajar, dentro de la carpeta Pájaros, dentro de la carpeta SRC tenemos una última carpeta que es la carpeta Pages. Aquí es donde se crean todas las páginas que va a tener la aplicación. Por otro lado, dentro de laj carpeta App, es donde estarán sobre todo, App.Module.ts y App.Componet.ts, que son los que se van a ocupar de cargar todo lo necesario para que esté disponible luego dentro de las páginas. Por último en la carpeta SIM, es donde tendré las variables de SCS, que son los que van a controlar los aspectos globales de la aplicación. Voy a necesitar trabajar con subline text, sobre todo en la carpeta, porque voy a hacer muchas cosas en ella. Así que voy a abrir una ventana de subline text sobre toda esa estructura de archivos. Aquí podemos ver efectivamente esas páginas que en realidad no las necesito porque lo que voy a hacer va a ser abrir el terminal y sustituirlas. Así que voy hasta la ventana del terminal y ahí voy a utilizar Ionic para automatizar las tareas. Por ejemplo, para crear páginas, lo que puedo hacer es Ionic GPage, que es la orden que sirve para crear páginas y luego, pues el nombre de la página, por ejemplo Home. El solo se ocupa de crear páginas de esa carpeta, y lo puedo ver fácil, si me voy de nuevo al subline text, pues vemos que efectivamente hay una carpeta Home dentro de la cual está el Template, están los estilos relacionados con esta página y por último está el controlador que se ocupa de la ejecución de las tareas de esa página. Eso mismo que he hecho con la página Home, que será la página de entrada, la página que mostrará el mapa, voy a repetirlo con una página lista que va a ser la que me muestre un listado con todos los pájaros que he visto, por un lado Add, que va a ser la página que tendrá el formulario para añadir nuevos pájaros, y por último el Update, que esta en concreto servirá para modificar los datos de los pájaros. Volviendo de nuevo atras, vemos todas estas páginas ya creadas. Ahora voy a abrir dentro de la carpeta App, los archivos Component y Module, en ellos se están cargando páginas, pues bueno, puedo copiar este código y reutilizarlo, y en vez de hacer que me carguen las páginas Page 1 Y Page 2, puedo hacer que me carguen las páginas Home... y en mayúsculas el nombre de la clase Home, por otro lado List, en mayúsculas también este List, por otro lado Add... y para terminar, Update. Como se puede ver, muchas de las tareas que hay que ir realizando, se repiten una y otra vez, ya lo iremos viendo a la hora de configurar todo el proyecto. Aquí tengo las declaraciones de cada una de esas páginas, también voy a necesitar entonces aquí añadir, todas las declaraciones necesarias, y voy a ir copiando una por una, las clases de todas esas páginas, es decir el Home, List... Add y Update. Y esto mismo lo voy a copiar de nuevo y lo voy a añadir dentro de los Entry Components. Por el lado del Módulo, está listo. Ahora, por el lado de los componentes pues de nuevo, necesito cargar todas estas páginas, pero ahora ya he creado el código necesario, puedo copiar y pegar. Por otro lado, también en la parte de abajo, aquí, esto es lo que va a controlar las páginas que van a aparecer en el menú lateral para hacer que aparezcan las páginas Home, List y Add, a Update se llegará a través de otro lado, simplemente necesito ir añadiendo los títulos, por otro lado... Lista, voy a copiar y pegar, y por último, decía que, Añadir, y luego en Componente, que lo que necesito es el nombre de la clase. En este apartado Title es el título que aparecerá en el menú, y en el apartado Component como digo, lo que tengo que hacer es añadir el nombre de la clase. Y por último necesito especificar cual es primera página que se va a cargar que va a ser este Page 1, así que voy a sustituirlo por Home, porque el Page 1, básicamente voy a eliminarlo. Ya he creado todas las modificaciones en Component y en Module, puedo entonces, con el botón derecho pedir que elimine las carpetas Page 1 y Page 2, y ahora me queda comprobar que esté todo correcto dentro del terminal probando hacer un Search para ver como queda esta página, ahora mismo está compilando, no hay ningún error, con lo cual debería salir todo perfecto estoy viendo que falta List, voy a asegurarme de que todos los nombres sean correctos, el problema es que aquí me equivoqué, puse un nombre equivocado, pero esto no es problema, porque puedo cambiarlo aquí, o puedo también... cambiarlo en los dos sitios donde aparece, esta lista... lista, lista, lista... por muy automático que sea, siempre cabe la posibilidad de cometer un pequeño error. Lista... Bien, pues lo guardaré de nuevo, vuelvo al terminal, me está diciendo que no puede resolverlo... y ahora sí, ahora ya lo ha ejecutado correctamente, y si lo pruebo, carga la página correctamente, sí que es cierto que falta el menú de la parte superior, ese menú en realidad, lo había eliminado, quiero decir, al crear las páginas nuevas no es un elemento que vaya a aparecer, pero puedo crearlo fácilmente. Vuelvo al subline text, y dentro, puedo añadirlo al Home y va a ser algo muy fácil. Necesito un botón, que va a ser de tipo Ion button por otro lado, le voy a asignar el menú Toggle, que es el que va a servir para que ese botón abra y cierre, y luego por último, voy a añadirle un ícono, así que voy a añadirle un Ion Icon, y a este Ion Icon, le voy a asignar el tipo Menú. Tras haber guardado, se recarga a través del IonicServ, y ahora sí tengo ese menú, tengo los elementos de menú que quería, necesitaré añadir, copiando y pegando, simplemente ese elemento de menú a estas tres páginas y con eso ya tengo esta parte configurada.

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.