Tutorial de IONIC: Introducción

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Indice Tutorial Ionic >>

Hola todos: Hace tiempo escribí en este blog una serie de tutoriales sobre ionic, estos tutoriales estaban basados en ionic 2/3 y se han quedado desactualizados con las últimas versiones de IONIC, aprovechando que acabo de sacar mi libro actualizado: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero. voy a iniciar una serie de tutoriales sobre IONIC. He decidido dejar los tutoriales antiguos avisando de que son para versiones antiguas de ionic, por si alguien necesita esa información para mantener alguna aplicación antigua, y porque me es más sencillo volver a escribir desde cero que adaptar los tutoriales que ya existen. Sin más preámbulos vamos a empezar con una pequeña introducción:

¿Que es ionic?

Ionic es un framework que nos permite crear de una manera rápida y sencilla aplicaciones móviles multiplataforma (Android, IOS, Windows, PWAs…) utilizando tecnologías web (HTML, JAVASCRIPT, CSS). Para poder utilizar elementos web en una aplicación móvil utiliza lo que se conoce como una Webview. A este tipo de aplicaciones se las conoce como aplicaciones híbridas. El resultado final es una app “nativa” que puedes subir a las tiendas de apps. Ionic nos ofrece un montón de componentes para crear la interfaz de usuario con estilo nativo listos para utilizar por lo que podemos crear aplicaciones con una estética profesional y con muy poco esfuerzo. La principal ventaja de utilizar Ionic es que es multiplataforma, es decir que con un mismo código podemos generar apps para Android, IOS y Web e incluso aplicaciones de escritorio utilizando Electron, por lo que el tiempo y coste de desarrollo y mantenimiento de una app se reduce sensiblemente. Otra ventaja es que si dispones de conocimientos previos en desarrollo web frontend ya tienes medio camino andado ya que la curva de aprendizaje será mucho menor. Además Ionic dispone de muchos componentes ya creados para que sin apenas esfuerzos puedas desarrollar una app de apariencia profesional sin necesidad de ser un gran diseñador.

Novedades a partir de la versión 4 de IONIC

Ionic 2/3 estaba basado en Apache Cordova y Angular. Apache cordova nos permite ejecutar nuestro código escrito con tecnología web (html, css, javascript) encapsulado en una webview y hace de puente entre esta y nos permite hacer uso de las funciones nativas del móvil (cámara, gps, etc) a través de plugins. Sin embargo a partir de la versión 4 de Ionic se incorpora Capacitor.

Capacitor

Al igual que lo hacía apache cordova, Capacitor hace de puente entre nuestra aplicación web y el dispositivo nativo. Capacitor además se integra mejor cuando ejecutamos nuestra aplicación en otros entornos que no sean dispositivos móviles como en navegadores de escritorio facilitando el desarrollo de progressive web apps (PWA). Hasta la versión 4 Ionic utilizaba Angular como framework de desarrollo para crear componentes web basados en angular. A partir de la versión 4 Ionic utiliza componentes web genéricos, para crear los Web Components, el equipo de Ionic creó una herramienta llamada Stencil. Los Web components son un conjunto de web APIs que te permiten crear etiquetas HTML personalizadas que son reutilizables.

Stencil

Stencil es una herramienta que crea componentes web, y el equipo Ionic ha creado un conjunto de componentes web con Stencil que forman parte de Ionic Core. Ionic Core contiene el conjunto de los componentes web que componen la biblioteca de la interfaz de usuario de Ionic (listas, botones, selectores, etc.). Nosotros no necesitamos utilizar Stencil ni entender cómo funciona para utilizar los componentes que el equipo de ionic a creado para nosotros.

Angular

Al utilizar componentes web genéricos y no componentes Angular podemos utilizar cualquier framework por lo que no es obligatorio el uso de Angular. Si te sientes más cómodo utilizando otro framework puedes hacerlo. Sin embargo en este tutorial vamos a utilizar Angular para desarrollar nuestras aplicaciones ya que Angular nos proporciona muchas cosas listas para usar que nos ayudan a construir aplicaciones bien estructuradas. Hay una biblioteca llamada @ionic/angular que es la biblioteca de ionic específica de Angular, es la que ya veníamos utilizando antes de la versión 4 de ionic, este paquete ofrece funcionalidades adicionales que solo se pueden utilizar con Angular, sin embargo utiliza los mismos componentes web que pueden ser utilizados con otro framework. Angular nos permite aprovechar las ventajas de este framework, además como Angular siempre ha sido el framework por defecto de Ionic hay mucho más soporte y muchas más apps desarrolladas con ionic utilizando Angular. Además hay muchas librerías y utilidades ya creadas en Angular para utilizar con Ionic. Angular utiliza TypeScript como lenguaje de programación, si no dominas estas tecnologías mencionadas no te preocupes, trataré de ir explicando las cosas básicas necesarias según las vayamos necesitando en los ejemplos que realizaremos. La versión 4 de Ionic también trae cambios en la navegación entre páginas utilizando ahora el router de Angular. También cambian en la versión 4 los ciclos de vida de las páginas, ya no utilizamos por ejemplo ionWillLoad o ionViewDidEnter, en su lugar utilizaremos ngOnInit. Si vienes de utilizar ionic en versiones anteriores te será útil conocer estas diferencias, si empiezas de cero no te preocupes, veremos todo lo que necesitas saber para desarrollar aplicaciones con Ionic en la versión actual. Vamos a ver como instalar Ionic y todas la herramientas necesarias para empezar a desarrollar tus aplicaciones con Ionic.

Instalar Node.js

Para instalar ionic debemos instalar primero Node.js para ello descargamos el paquete con la versión LTS de http://nodejs.org/ y lo instalamos. Si estás usando linux y quieres utilizar un gestor de paquete puedes consultar aquí los pasos a seguir para instalar Node.js usando un gestor de paquetes según la distribución que tengas instalada: https://nodejs.org/es/download/package-manager/

Instalar ionic

Una vez instalado nodejs abrimos un terminal (consola del sistema) e instalamos ionic con el siguiente comando:

npm install -g ionic

Una vez instalado ya podemos crear aplicaciones con ionic y ejecutarlas en el navegador, sin embargo para poder ejecutarlas en un dispositivo o emulador Android debemos instalar las herramientas de desarrollo de Android, así mismo para poder ejecutar la app para IOS necesitaremos instalar Xcode. Cabe mencionar que aunque Android Studio lo podemos instalar en cualquier plataforma, es decir podemos desarrollar para Android desde un pc con Windows, Linux o MAC, para poder compilar las Apps para IOS necesitamos un MAC con Xcode instalado. Para instalar Android Studio descargalo desde la página oficial y sigue las instruciónes dependiendo de tu sistema operatico: https://developer.android.com/studio/index.html. Para instalar Xcode en Mac solo tenemos que buscarlo en la App Store e instalarlo, es gratuito. Por último necesitaremos un editor de código que nos coloree typescript para facilitarnos el trabajo. En realidad podríamos editar el código con cualquier editor de texto plano, pero una buena opción para typescript es utilizar Visual Studio Code de Microsoft que es multiplataforma y podéis descargarlo desde el siguiente enlace: https://code.visualstudio.com/

Hola Mundo en Ionic

Vamos a crear nuestra primera aplicación con Ionic, el famoso “hola mundo” que siempre es el punto inicial en el aprendizaje de cualquier lenguaje de programación o framework. Para crear nuestro proyecto “hola mundo” iremos a la consola de comandos o terminal y escribimos el siguiente comando:

ionic start hola-mundo blank

Seleccionamos Angular como framework y tras un rato descargando los paquetes necesarios para crear nuestra aplicación ya estará listo nuestro proyecto. El comando start de ionic cli (command–line interface) se utiliza para crear (iniciar) un nuevo proyecto, el siguiente parámetro es el nombre del proyecto, en este caso hola-mundo, el siguiente parámetro es el tipo de plantilla que vamos a utilizar, en este caso blank que indica que utilizaremos una plantilla vacía. Existen tres tipos de plantillas:

blank : Crea una plantilla vacía.
sidemenu: Crea una plantilla con menú lateral.
tabs: Crea una plantilla con Tabs (Pestañas).

Para ver el resultado en el navegador debemos entrar dentro de la carpeta del proyecto ‘hola-mundo’ que se acabamos de crear con ionic start y escribimos el siguiente comando:

ionic serve -l

Podemos utilizar simplemente ionic serve, pero con el parámetro -l nos muestra como queda nuestra app en IOS, Android y Windows. Para poder ejecutar ionic serve con el parámetro -l tenemos que instalar @ionic/lab, por eso la primera vez que lo ejecutemos nos pedirá que instalemos el paquete @ionic/lab: Install @ionic/lab? (Y/n) Le decimos que sí pulsando la tecla ‘Y’. En la barra superior a la derecha desplegando la opción platforms podemos seleccionar en qué plataformas queremos ver cómo queda nuestra aplicación.

Vista de cómo quedaría nuestra primera App con plantilla Blank en el navegador. Si no utilizamos -l mostrará solo una plataforma a pantalla completa. Como podemos ver, sin nosotros hacer nada tenemos creada la estructura de una app que podremos modificar para añadir lo que necesitemos.

Si quieres aprender a programar Apps para móviles con ionic ahora ya puedes comprar mi libro en Amazon actualizado y con contenido extra:

Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero: Aprende a crear apps para Android, IOS y PWAs, de manera sencilla

Eso es todo por hoy, el el próximo post analizaremos la estructura de un proyecto de IONIC y veremos cómo empezar a modificar nuestro Hola Mundo.

🚀 ¿Prefieres que te desarrolle yo la app? Si tienes entre manos un proyecto de app móvil, te preparo un presupuesto para tu app, sin compromiso.