Empezando con Ionic 2

En este tutorial vamos a dar los primeros pasos con Ionic 2, un framework que de la mano de Angular 2 y Apache Cordova nos permite crear aplicaciones híbridas multiplataforma respetando la guía de estilo de cada plataforma (Android, IOS y Windows).

Índice de contenidos

• 1. Entorno
• 2. Introducción
• 3. Compatibilidad con versiones y plataformas
• 4. Primeros pasos
• 5. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 15″ (2,3 Ghz Intel Core i7, 16 GB DDR3)
• Sistema Operativo: Mac OS X El Capitan
• Ionic 2.0.0-beta.24
• Cordova 5.4.1 (cordova-lib@6.1.1)

2. Introducción

Actualmente la mejora en los navegadores internos de los dispositivos está haciendo posible el auge de las aplicaciones híbridas multiplaforma, acercándolas cada día más a la experiencia y rendimiento de las aplicaciones nativas pero con la ventaja de ser implementadas una única vez.

Este tipo de tecnologías nos permiten crear aplicaciones móviles con tecnología web (CSS, HTML y JS) que pueden ser ejecutadas y distribuidas en el market de cada plataforma.

Lo que aporta Ionic es un SDK que facilita la construcción de pantallas (botones, listas, …) respetando la guía de estilo de cada plataforma, de forma transparente al desarrollador, es decir, que inicialmente no tenemos que añadir una sola línea de código para conseguirlo.

Esta tecnología no es nueva y siempre ha estado ligada con el framework AngularJS y Apache Cordova, aquí tenéis un tutorial en el que ya hablábamos de estas tecnologías.

Así que este trinomio se ha seguido manteniendo con la versión 2 de Angular, que como ya vimos en este otro tutorial mejora significativamente la productividad de los equipos a la hora de desarrollar cualquier tipo de aplicación.

La versión 1 de Ionic ofrecía su SDK como un conjunto de directivas de AngularJS, así que está versión 2 hace lo mismo pero con componentes, lo que mejora significativamente el rendimiento de su antecesor.

Toda la documentación oficial la podéis encontrar aquí.

Como ejemplo significativo de la potencia de esta tecnología, os aconsejo que pinchéis aquí, para comprobar como se visualizaría un Action Sheet en las distintas plataformas desarrollando un único código y ahora imaginad teniendo que hacer esto a mano. 😉

3. Compatibilidad con versiones y plataformas

Un punto crítico a la hora de adoptar este tipo de tecnologías es la compatibilidad con los distintos dispositivos en sus distintas versiones y plataformas; sobre todo si tiene o no compatibilidad con dispositivos antiguos, por aquello de no dejar «colgados» a un número significante de usuarios.

En este punto os puedo decir, después de muchas pruebas empíricas, que este tipo de tecnologías funcionan perfectamente (sin hacer ninguna configuración adicional) en versiones iguales o superiores a la 4.4 de Android, a la 8.0 de IOS y en Windows 10.

En caso de necesitar compatibilidad con versiones 4.2 y 4.3 de Android, se puede añadir el plugin de Crosswalk a través de Cordova, que añade un navegador «moderno» a nuestra aplicación para que pueda ejecutarse en estas versiones antiguas. La única pega es que el tamaño de la aplicación aumenta considerablemente, hemos probado con una aplicación de 4 Mb, y el APK ha pasado a 25 Mb y una vez instalada ocupa 35 Mb; así que puede ser una buena solución si el espacio no es un problema y avisamos fehacientemente al usuario que descargue la aplicación a través de una red Wifi. Pero ya os digo esto solo afectaría a dispositivos 4.2 y 4.3 de Android. Aquí tenéis más información sobre el proyecto crosswalk.

Para Windows el equipo de Ionic considera que no merece la pena mantener compatibilidad con versiones anteriores a Windows 10. Esto viene motivado por la poca cuota de mercado y a la mejora drástica, en rendimiento y compatibilidad, del navegador en su versión 10.

En conclusión esta tecnología es muy valida siempre que se impongan al cliente ciertas restricciones en las versiones de los dispositivos soportados. Android 4.4+, IOS 8+ y Windows 10+ (Phone y Desktop).

4. Primeros pasos

Para dar los primeros pasos con Ionic 2 tenemos que instalar la aplicación que se distribuye como un paquete npm:

$> npm install -g ionic@beta

Nota: a día de hoy, al igual que Angular 2, es una tecnología que está en beta, pero nuestra experiencia con ella ha sido muy positiva.

Otra herramienta necesaria para poder crear este tipo de aplicaciones es Apache Cordova, que también instalamos a través de npm:

$> npm install -g cordova

Ahora estamos en disposición de crear nuestro primer proyecto. Para ello hacemos uso del potente CLI que tiene la herramienta y ejecutamos el comando start pasándole el nombre del proyecto, el template que puede ser (tabs, sidemenu, blank o tutorial), en este caso vamos a seleccionar tutorial y una serie de modificadores (podéis verlos todos ejecutando ionic help):

$> ionic start poc-ionic tutorial --v2 --typescript

Esta sentencia nos va a crear el proyecto, con el template de tutorial, en la versión 2 y utilizando la sintaxis de TypeScript.

Y no nos tenemos que preocupar de nada más. Simplemente ejecutamos el comando:

$> ionic serve

Y directamente se mostrará la aplicación de ejemplo con el tutorial en el navegador que tengamos por defecto.

Como veis nos crea una aplicación con un menú lateral y un listado con sus detalles. Si queremos ver como quedaría en IOS y Android simplemente tenemos que ejecutar el mismo comando pero con el modificador –lab.

Aquí se puede apreciar los cambios de estilo de cada plataforma y todavía no hemos abierto el código fuente. ¡Espectacular! 🙂

Para probar la aplicación en cualquier dispositivo móvil que tengamos, el CLI de ionic también nos ofrece comandos muy útiles que hacen uso de los comandos típicos de Apache Cordova.

De tal forma que podamos añadir las plataformas que queramos soportar con el comando:

$> ionic platform add ios android windows

Nota: necesitas tener el entorno de desarrollo preparado para cada plataforma. En mi caso al tratarse de un Mac solo puedo añadir las plataformas de ios y android. La plataforma de windows la tengo que añadir dentro de una máquina virtual con Windows 10. Eso sí todos los pasos y comandos que estamos viendo son iguales en todas las plataformas.

Ahora para ejecutar la aplicación en el emulador de la plataforma que tengamos, simplemente:

$> ionic run android

Nota: En caso de no tener ningún dispositivo conectado, abrirá el emulador que tengamos configurado por defecto, recordad que si no usáis crosswalk este tiene que tener una versión igual o superior a la 4.4 (KitKat). Hay que ver lo que ha mejorado el emulador de Android en las últimas versiones, ya hace innecesario el uso de Genymotion 🙂

Si la aplicación la ejecutáis en Windows 10 tenéis que añadir antes las siguientes preferencias en el fichero config.xml del proyecto.

<preference name="windows-target-version" value="10.0"/>
<preference name="windows-phone-target-version" value="10.0"/>
<preference name="Windows.Universal-MinVersion" value="10.0.10069"/>
<preference name="Windows.Universal-MaxVersionTested" value="10.0.10166.0"/>

5. Conclusiones

Como habéis podido ver esta tecnología es realmente productiva a la hora crear aplicaciones híbridas multiplaforma, ofreciéndonos una herramienta donde con unos pocos comandos ya podemos empezar a trabajar.

Ahora ya no tienes excusas para no plasmar tus ideas en aplicaciones móviles multiplataforma y que todos podamos disfrutarlas independientemente del dispositivo que tengamos.

¡Manos a la obra!

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.