Si alguna vez te has preguntado ¿cómo se gestionan las páginas en Ionic? O ¿Cómo puedo crear una mediante el CLI? O mejor aún ¿de qué manera funciona cada uno de los archivos de una página? Sigue leyendo, quizás esto te interese.
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y hoy vas a aprender a llevar una gestión mucho más cómoda de estas páginas (o ventanas) de tu aplicación hecha en Ionic con lo que verás/leeras aquí.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Tutorial en video, por si no te gusta leer
¿Qué son las páginas, o ventanas, de nuestra app?
Bien, debido a que en Ionic todos los componentes visuales son eso mismo, componentes, las páginas en cuestión que vamos a ver también lo son. Son los componentes a los que hace referencia el Router de la aplicación y que se mostrarán cómo contenedor de la aplicación.
En caso de que seas desarrollador Android sería un Activity y si eres de iOS sería su homólogo en esta plataforma.
Ahora bien, hay que comentar que esto no es del todo así. No cambiaremos de activity al pushear una ruta nueva a la pila. Sencillamente, cambiaremos de página dentro del navegador web que utiliza Ionic para montar la aplicación.
¿Cómo crear una página desde el CLI?
Esta es la pregunta que más me hacen. Porque es fácil crear una página copiando y pegando una de las que ya hay hechas. Pero si hacemos esto, es necesario hacer un proceso antes de crearla que nos lo podemos saltar fácilmente si aprendemos a usar el CLI.
A parte, si lo hacemos de este modo, se crearán las rutas y demás cosas que tenemos que hacer de manera manual de manera totalmente automática.
Para tal fin, vamos a utilizar la siguiente línea de consola (tenemos que estar dentro del directorio de la app):
ionic generate
Una vez ejecutado te pedirá que selecciones una opción de unas cuantas que muestra:
- Page
- Component
- Service
- Module
- Class
- Directive
- Guard
- Pipe
- Interface
- Enum
Cada una de ellas tendrá su propio funcionamiento, que veremos más adelante en la web o en el canal de YT. Así que por eso te tienes que pasar por el canal de YT y suscribirte o suscribirte a El Circulo aquí para enterarte de todo.
Cómo es lógico, lo que tenemos que hacer es selecciona “page” y darle a submit.
Posteriormente te pedirá el nombre que le queremos dar a la página. Cómo consejo, no pongas “page” dentro del nombre por que lo agregará el sistema al final del nombre. No seas tan capullo cómo he sido yo en el ejemplo del video.
Y ahora solo nos toca esperar a que se genere. No tardará mucho en hacerlo. Y ya la tendremos lista para que todo funcione cómo es debido.
En module de nuestra página
Llegados a este punto, necesitamos aclara que el module de nuestra página es el archivo que será encargado de configurar e instanciar nuestro componente en el lugar que lo queramos usar.
Aquí se le podrá decir, en la zona de imports, que módulos externos vamos a utilizar en este componente y el componente al que hace referencia (declarations).
También podríamos definir un enrutado local a partir de la ruta que le hemos dado y algunas cosas más a parte. Si quieres profundizar un poco más, estoy preparando un video sobre esto, pero aun no lo tengo así que puedes informarte más a fondo en el siguiente enlace: https://angular.io/guide/ngmodules
El archivo routing.module.ts
Cómo el propio nombre indica, nos permite crear un enrutado local a partir de la ruta que le hayamos dado al componente desde la ruta del padre. Se que la explicación es un poco enrevesada, pero con un ejemplo lo vas a entender mejor.
Porgamos que tienes una sección de usuario. Dicha sección está enrutada desde el “app.module.ts” con la ruta “/user”.
Ahora bien, nosotros, en este archivo que se acaba de crear cuando hemos hecho la página, podemos agregar la ruta “info” y “security”. Pues al crearlas directamente aquí se accederían desde:
-
“/user/info”
-
“/user/security”
Ahora creo que lo entenderéis muchísimo mejor ¿verdad? Aún así, en el video está bastante bien explicado.
Page.html la vista de nuestra página
Básicamente, dentro de este archivo se encontrará el código HTML asociado al componente de la página que acabos de crear. No tiene más misterio.
Pero por si eres nuevo en esto, déjame decirte que Ionic tiene bastante cosas que agregar al HTML que no están directamente ligadas con el HTML que puedes encontrar al crear una web.
Es más, utiliza el HTML de Angular y estoy preparando un curso muy interesante sobre este Framework para ti. Así que te tienes que suscribir al canal de YT para no perdértelo. Lo puedes hacer desde aquí.
Page.scss, aquí van nuestros estilos
Continuamos avanzando con el tutorial hasta llegar a los estilos. Recordar que en Ionic tenemos un archivos de estilos global llamado “app.component.scss” que afectará a todos los componentes de la web y después tenemos los individuales.
Pues bien, este es el individual. Por si no lo sabías, scss es un formato de archivo de “SASS” que, a fin de cuentas, es un compilador de código CSS.
Este archivo, en sí mismo, nos permitirá escribir código CSS en cascada ahorrando así una buena cantidad de tiempo y de recursos cómo podemos ver en el siguiente ejemplo:
CSS Normal después de ser compilado:
div {
background: #ffffff;
}
div h2 {
color: #333333;
}
div h2 span {
font-size: 12px;
}
SCSS antes de la compilación:
div{
background: #ffffff;
h2{
color: #030303;
span{
font-size: 12;
}
}
}
Posteriormente, cuando hagamos el build de la app, esto se compilará y escupirá un archivo CSS completo con todo lo que hemos metido dentro ordenado de la manera más eficiente posible.
Page.component.ts, este es el alma de nuestra página
Cómo habrás podido intuir, este archivo es donde vamos a realizar toda la programación lógica de nuestra aplicación.
Cómo verás, cuenta con el decorador @Component. Dicho decorador hace referencia a 3 cosas:
- selector: Será la etiqueta que utilizaremos para llamar a este componente desde cualquier lugar del HTML.
- templateUrl: El nombre del archivo HTML que estará asociado a este componente. Si usamos el ejemplo que hemos hecho, será el archivo HTML que se ha generado cuando hemos usado el comando “generate”
- styleUrls: Un array con las rutas de los estilos que vamos a utilizar en el componente. Cómo te digo, el estilo “app.module.scss” está incluido implícitamente.
Pero antes de continuar con el tutorial, déjame decirte que estoy subiendo ya una serie donde te enseño a programar en TS. Aquí tienes el primer video del curso:
Y la lista a la que pertenece dicho curso es esta: https://www.youtube.com/playlist?list=PL1P9qJ6WL8Kseh6d8ipDAeK9RS-rZGDux
Es importante que, si vas a hacer el curso, te suscribas al canal para que así no te pierdas nada cuando vaya subiendo nuevo contenido.
Y a partir de aquí ya es hacer volar la imaginación. Ya hemos explicado cómo puedes crear una página para usarla en tu app y de manera implícita, hemos explicado lo que es un componente.
Si todo esto lo haces aparte, dentro de un directorio que tu hayas creado, si la necesidad de usar el “generate”. Podrás llamar a dicho componente desde donde quieras del HTML. Así tendrás un paso más en la modularidad de tu aplicación.
Algo más que quizás te interesa
Mira, hemos creado esta herramienta para que puedas evaluar, optimizar y mejorar los logos de tus aplicaciones. Y claro, al hacer esto, conseguir más descargas y, de manera indirecta, más ingresos con tus apps. No te espoileo que es, entra al enlace.
Y bueno, ya hemos terminado. Espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!