Ionic Framework

Empezando con Ionic 4

¿Qué es Ionic?

Cuando desarrollamos una app para dispositivos móviles podemos hacerlo de 2 formas diferentes: una es desarrollando lo que se llama una aplicación nativa que consiste en utilizar los entornos de desarrollos que Android e iOS nos proporcionan. Este enfoque tiene una ventaja fundamental: la optimización. Si cumplimos los estándares que nos ofrecen ambas plataformas conseguiremos que la aplicación desarrollada esté lo más optimizada posible.

Sin embargo también contamos con una desventaja fundamental: tenemos que ser expertos en ambas plataformas si queremos contar con las dos versiones de la aplicación. La complejidad de los dos entornos hacen que el consumo de tiempo en formarse y convertirse en un programador competente en ambos sistemas sea altísimo.

¿No sería lo ideal poder desarrollar nuestra aplicación una sola vez? Para cubrir esta necesidad han surgido desde hace algunos años lo que se denominan frameworks híbridos o multiplataforma. Son unas herramientas que nos permiten desarrollar nuestra aplicación una sola vez y luego generarla para ambos sistemas. Dentro de este tipo de frameworks Ionic es uno de los más populares y que mayor comunidad ha conseguido con el tiempo.

¿Qué necesitamos?

Para desarrollar con Ionic vamos a necesitar una serie de herramientas. Lo primero y fundamental es un editor de código. Desde hace algún tiempo vengo usando Visual Studio Code. Una herramienta de Microsoft ligera y potente que se ha convertido en mi editor de cabecera por méritos propios.

Ionic es una herramienta en la que se hace un uso intensivo de comandos de consola y por ello necesitaremos una lo más completa posible. Lógicamente podemos usar las que Windows nos ofrece, el modo de comandos y powershell pero el propio editor Visual Studio ya nos ofrece una con lo que nos evitamos tener que cambiar de tarea continuamente. Además nos permite abrir varias instancias de la misma que, como veremos más adelante, será fundamental.

También necesitaremos los SDK de aquellas plataformas para las que vayamos a desarrollar. Yo me centro fundamentalmente en Android con lo que he tenido que instalar su SDK. La mejor forma de hacerlo es descargar e instalar Android Studio que ya incluye el SDK y algunas herramientas como el SDK Manager (para descargar versiones de Android específicas) y un emulador.

¿Qué tenemos que saber?

Ionic internamente utiliza Cordova, una librería de código abierto que nos permite hacer aplicaciones móviles basadas en HTML5, CSS3 y Javascript. Por lo tanto será necesario tener un conocimiento básico en esos tres lenguajes.

Entre el lenguaje propio de Ionic y Cordova existe una capa intermedia. Se trata de Angular, un framework de desarrollo web creado por Google y basado en Javascript que permite el desarrollo de aplicaciones web con una característica novedosa denominada el two-way data binding, que consistía en una comunicación bidireccional e instantánea entre el modelo y la vista. Simplificándolo mucho permite que si en nuestro modelo tenemos una propiedad y la mostramos en la vista mediante una directiva ng-model, todos los cambios que hagamos en nuestro controlador sobre esa propiedad se reflejarán inmediatamente en la vista y todos los cambios que hagamos en la vista (por ejemplo en una casilla de entrada de texto) se reflejarán en la propiedad del modelo.

De momento no tenemos que preocuparnos mucho por entender este concepto pero si queréis profundizar sobre Angular os recomiendo el siguiente artículo:

¿Qué es Angular y para qué sirve?

Angular está basado en un lenguaje denominado Typescript así que deberemos de tener conocimientos también en este lenguaje.

¡Empezamos!

Lo primero que necesitamos es descargar e instalar node.js. Node.js es un entorno de ejecución para JavaScript que nos va a permitir instalar el resto de librerías necesarias, entre ellas el propio Ionic.

Una vez instalado node.js (es una instalación normal de Windows), abrimos nuestra consola favorita y escribimos el siguiente comando:

npm install -g ionic@latest

Con esto estamos instalando el CLI (command-line interface) que es la herramienta de línea de comandos que como comenté anteriormente va a ser fundamental en nuestro desarrollo con Ionic.

Una vez instalado procedemos a crear nuestra primera aplicación con Ionic. Para ello, siguiendo en la consola, nos colocamos en la carpeta donde se generará nuestra aplicación (teniendo en cuenta que Ionic ya va a crear una carpeta para ella) y escribimos:

ionic start holaMundo blank --type=angular

Lo primero que hemos escrito es el comando ionic con el que empezarán todos nuestros comandos, luego la directiva start que le indica a Ionic que queremos generar una aplicación nueva, a continuación va el nombre de nuestra aplicación holaMundo,lo siguiente es el parámetro blank que indica el template que queremos utilizar (veremos que hay varios) y por último indicamos el lenguaje que vamos a utilizar para desarrollar, en este caso angular (Ionic ahora permite desarrollar tambien en React, otra biblioteca JavaScript similar a Angular).

Tras un proceso de descarga e instalación veremos que se ha creado una carpeta holaMundo que podemos abrir con Visual Studio Code.

En la parte izquierda vemos la estructura de carpetas que Ionic nos ha creado donde lo más importante es la carpeta src donde se va a guardar el código de toda nuestra aplicación.

Podemos abrir una consola desde Visual Studio Code (vemos que ya se abre en la carpeta de nuestra app):

Y escribir en ella:

ionic serve

Con esto le estamos diciendo a Ionic que queremos ejecutar nuestra aplicación en el navegador web. Ionic tiene 3 formas de lanzar una app:

  • En el navegador web. Es la que acabamos de utilizar ahora.
  • En el emulador. Para ello tendremos que tener nuestro entorno de desarrollo Android preparado y algún emulador creado en el mismo.
  • Directamente en el dispositivo. En el móvil Android que tengamos conectado al ordenador.

Por el momento nos bastará con probar nuestra aplicación en el navegador.

Una vez acabe el comando anterior se abrirá una ventana de nuestro navegador en la dirección http://localhost:8100/home y veremos lo siguiente:

Desde luego no tiene mucha pinta de aplicación móvil. Vamos a pulsar F12 con el navegador seleccionado y pulsamos en el botón marcado en la siguiente imagen.

Ahora veremos:

Lo que ya tiene más aspecto de app. También podemos seleccionar en qué dispositivo queremos comprobar el aspecto de nuestra aplicación.

Si ahora volvemos a nuestro código fuente, dentro de la carpeta src / app vemos otra carpeta llamada home que es donde se encuentra la pantalla inicial (y única de momento) de nuestra aplicación.

Abrimos el fichero home.page.html y modificamos la línea 4 (donde pone Blank) y escribimos Hola Mundo. Cambiamos también la línea 12 y hacemos el mismo cambio. Por último en la línea 17 modificamos el texto y ponemos el que queramos. El código quedará finalmente así:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Hola Mundo
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Hola Mundo</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Nuestra primera aplicación con Ionic</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

Y según guardemos podemos ver el resultado en el navegador web:

¡Ya está! Ya hemos creado nuestra primera aplicación multiplataforma con Ionic. En próximos artículos veremos como generar un apk para Android y entenderemos un poco más eso del two-way data binding.

Dejar una contestacion

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *