Primeros pasos con Ionic 3

Las tecnologías de desarrollo web han evolucionado increíblemente en los últimos años. Hemos pasado de manipulación de DOM con jQuery a aplicaciones con patrones MV* como Angular. Ahora es más fácil que nunca construir aplicaciones de calidad.

Si bien estos avances han sido increíbles, aún no se había podido superar la ventaja de las aplicaciones nativas utilizando tecnología web. También hubo fallos muy públicos – Facebook escribió su primera aplicación iOS en 2011 con HTML5, pero terminó siendo un total fracaso debido al rendimiento terrible.

Desde hace años, las aplicaciones híbridas han sido burladas y criticadas por los desarrolladores de aplicaciones nativas, por ser torpes y feas, tener un rendimiento bajo y no tener ventajas sobre las aplicaciones nativas. Si bien estos pueden haber sido razones válidas en 2011, ahora son prácticamente sin fundamento, gracias a una colección de nuevas tecnologías que han surgido en los últimos dos años. Con estas tecnologías, puede diseñar, crear y desplegar aplicaciones móviles robustas más rápido de lo que podía con tecnologías nativas. Esto es gracias en gran parte a las rápidas velocidades de renderizado del navegador móvil y al mejor rendimiento de JavaScript.

 

 

Este Gigipost está diseñado para enseñarle cómo usar estas nuevas tecnologías de manera efectiva para crear increíbles aplicaciones para móviles.

 

¿Que veremos en este post?

  • Instalación
  • Generar páginas
  • Inyección de módulos
  • Decorador @IonicPage

 

INSTALACIÓN

Uno de los primeros es tener Node, esto no quiere decir que trabajaremos con Node, posterior a la instalación usaremos el CLI de Ionic.

Con este comando instalamos el CLI.

 

EL CLI

Podemos empezar con alguna plantilla en específico o bien desde 0, en este pequeño curso vamos a empezar con la plantilla de Menú.

 

Ionic3 - Gigigo

 

Algunas funciones con el CLI:

  • Iniciar la aplicación en modo desarrollo
  • Subir la aplicación a Ionic Cloud
  • Generar un compilado para iOS / Android
  • Entre muchas cosas más.

 

GENERACIÓN DE PÁGINAS

Para poder iniciar nuestra aplicación en modo desarrollo es necesario ejecutar el siguiente comando:

 

Vamos a generar una nueva página con el CLI de Ionic:

 

 

INYECCIÓN DE MÓDULOS

Ya generada la página tendremos que inyectarla a nuestro módulo principal, que es app.module.ts, este lo podrás encontrar dentro de la carpeta de app.

La página que acabamos de generar podrás encontrarla en la carpeta de pages.

Nuestra importación e inyección quedaría algo así.

(Nota: debemos importar el modulo y no el componente)

 

 

Decorador @IonicPage

Algo nuevo en Ionic 3 es el uso del decorador @IonicPage, este nos ayuda en ya no tener que importar las páginas en las que deseamos navegar. Anteriormente debíamos importar las páginas que usaríamos en nuestro Router, en este caso el Menú.

Routing

 

Ahora con esta nueva versión solo con poner el nombre de la página como un string el routing nos va llevar a ella.

¿De donde sacamos este nombre?

Lo sacamos del nombre de la clase del componente que hemos creado.

 

En este post, iniciamos un nuevo proyecto, creamos una nueva página con el CLI, y pudimos navegar en esta nueva página.

Aquí podemos descargar el source de lo documentado.

https://github.com/alfonsoara/started-app

Otro ejemplo de todo lo que podemos hacer con Ionic 3 replicando la web de Gigigo

https://github.com/alfonsoara/started-ionic-3

Head of Frontend Development at Gigigo México