Saltar al contenido

APRENDE cómo usar las Páginas en Ionic

¡Eyyyy hola que tal dev! Muy buenas. Bienvenido a la web, Aitor otra vez por aquí. Y hoy venimos a hablar un poquito más acerca del querido por muchos, odiado por otros muchos, Ionic.

Las páginas y pantallas de Ionic

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?

Pues bien, todos nos hemos hecho estas preguntas en su día. Sobre todo, cuando comenzamos con el Framework. Así que no te preocupes porque es totalmente normal y todos hemos pasado por ello.

Por si no lo sabes aún, mi nombre es Aitor y soy desarrollador desde hace más de 6 años centrado en aplicaciones móviles. Y hoy te voy a enseñar cómo puedes llevar una gestión mucho más cómoda de estas páginas con lo que verás/leeras aquí.

Así que, por esta razón, es importante que te lo leas/veas hasta el final, para que pilles e interiorices todas las posibilidades que hay.

Pero antes de continuar, y cómo se que tengo lectores que no les gusta mucho leer, aquí tenéis el artículo hecho video. Simplemente, si te gusta el video pues te suscribes al canal de YT (lo puedes hacer aquí) y todos salimos ganando 😊

 

 

¿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.

 

Info adicional

Solo me queda pedirte, que si te ha gustado el contenido que has visto/leído te pases por aquí. Se trata del “El Circulo” y es una comunidad Online que estoy montando alrededor del desarrollo de Software. En ella te enseñaré a hacerte un sueldo pasivo programando apps móviles. Entra ahora, dentro están todos los detalles.

Sin nada más que agregar, me despido ya. Quiero decirte que nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.