IONIC 3 - HOLA MUNDO
Para la correcta implementación de esta demo es necesario tener configurado nuestro marco de trabajo, si aún no lo configuras te recomiendo ver nuestro post anterior: https://cityredes.blogspot.pe/2017/11/iniciando-con-ionic-3-marco-de-trabajo.html
Si ya tenemos nuestro marco o entorno de desarrollo configurado correctamente, ya podemos continuar con el desarrollo de nuestro primer HOLA MUNDO en Ionic 3. Personalmente recomiendo el uso de Visual Studio Code como editor de código, pero puedes usar el que te sea de tu preferencia.
1. IONIC START
El primer paso es crear nuestro proyecto y para ello usamos el cmd o en caso de usar Visual Studio Code podemos usar el terminal integrado presionando Ctrl + Ñ. Accedemos por línea de comandos a la carpeta o lugar de nuestro computador donde deseamos alojar nuestra app y ejecutamos el siguiente comando:
ionic start AppBlog blank
-AppBlog es el nombre de nuestro proyecto, tu puedes colocar cualquier otro.
-Blank, template en blanco que nos da ionic, hay algunos más que podrías utilizar, para ello ver la documentación oficial: https://ionicframework.com/docs/cli/starters.html
2.IMPLEMENTACIÓN
Ionic nos descargará todas las carpetas necesarias para hacer uso del framework, la estructura es la siguiente:
- SRC es la carpeta en la que se encuentra toda la estructura de nuestra app, donde se encuentra el módulo principal y además donde se alojaran las páginas de nuestra app. Dentro de esta carpeta viene por defecto nuestra página Home.
Abrimos la carpeta de nuestro proyecto en nuestro editor de código y ¡ Manos a la Obra !
Para esta demo tendremos una página de login anterior a nuestro home, aunque sin validaciones de usuario y password por el momento y una página de registro. Para generar las páginas que usaremos como login y de registro ejecutamos el siguiente comando en nuestra terminal del proyecto :
ionic g page login
ionic g page register
Se agregarán dos carpetas que alojan a nuestras páginas (login y register) dentro de nuestra carpeta pages que se encuentra en SRC
Importamos estas páginas en nuestro archivo app.module.ts :
Y las agregamos en declarations y entryComponets, el archivo app.module.ts quedaría de la siguiente manera:
Dentro de cada carpeta alojada en la carpeta Pages se encontrará un archivo .HTML donde diseñamos la vista de nuestra página, un archivo .CSS para los estilos de las páginas, uno .TS donde implementaremos la lógica y un .module.ts que representa al módulo de la página (a partir de la versión 2, ionic es multimódulo).
En el html de nuestra página login colocamos lo siguiente:
"goHome()" y "goRegister()" son métodos que implementaremos en el archivo login.ts y que nos llevarán a la página Home y Register respectivamente.
Con esto ya tendriamos nuestra app lista, pero para que nuestra página Login sea la primera en aparecer cuando inicia nuestra app debemos ubicarnos en el archivo app.component.ts y cambiar HomePage por LoginPage, quedaría de la siguiente manera:
Finalmente para ver nuestra app en el navegador ejecutar el comando dentro de la terminal de nuestro proyecto:
ionic serve
ó
ionic lab
Si siguieron todas las instrucciones correctamente debe aparecer la pantalla Login de la app
Cuando den click en el botón LOG IN deben navegar hacia la pantalla HOME
En el siguiente Post haremos que nuestros botones de Log In y Register tengan más sentido, pues con ayuda de Firebase (Cloud Firestore) haremos que los usuarios puedan registrarse y loguearse para poder entrar al home de la app.
Repositorio de código en GitHub: https://github.com/JairoRuiz/AppBlog/tree/primerpost
Comentarios
Publicar un comentario