IONICUn framework para desarrollar aplicaciones híbridas

Una presentación de Juan Antonio Núñez

¿QUÉ ES IONIC?IONIC ES UN FRAMEWORK PARA DESARROLLAR APLICACIONES HÍBRIDAS MULTIPLATAFORMA.

ES DE CÓDIGO ABIERTO BAJO LICENCIA MIT.

ESTA BASADO EN HTML5, CSS Y JS. ESTÁ CONSTRUIDO CON SASS Y OPTIMIZADO CON ANGULARJS.

SE INSPIRA EN LAS SDK DE DESARROLLOS MÓVILES NATIVOS, POR LO CUaL LA CONSTRUCCIÓN ES SIMILAR A LAS APLICACIONES DE IOS E ANDROID.

LA LÓGICA SE LLEVA A CABO MEDIANTE ANGULARJS Y LA COMUNICACIÓN CON EL DISPOSITIVO SE REALIZA MEDIANTE CORDOVA Y SUS MÚLTIPLES PLUGINS

VENTAJAS PRINCIPALES

DESARROLLO DE APPS UTILIZANDO TECNOLOGÍA WEB

NO NECESITAS APRENDER UN LENGUAJE NATIVO PARA MANEJAR IONIC

INTERFAZ GRÁFICA MUY LIMPIA Y CUIDADA

GRAN LIBRERÍA DE PLUGINS PROPIOS: NG-CORDOVA

UN GRAN RESPALDO DE LA COMUNIDAD CON UN FORO PROPIO

CÓDIGO REUTILIZABLE

RAPIDEZ DE DESARROLLO

TECNOLOGÍAS USADAS

REQUISITOS PARA EMPEZAR CON IONIC

1. INSTALAR NODE.JS

2. INSTALAR PAQUETES DE CORDOVA E IONIC

3. TENER INSTALADO EL SDK DE ANDROID O LAS XCODE PARA IOS

4. JAVA JDK (PARA COMPILAR APK ANDROID)

5. IOS-SIM (PARA EMULAR LAS APK DE IOS)

6. PARA COMPILAR EN IOS ES NECESARIO UN MAC

¿QUÉ ES CORDOVA?

Apache Cordova es un framework que cuenta con diversas API de dispositivos móviles, con la peculiaridad de poder desarrollar para multitud de dispositivos sin tener que usar el lenguaje nativo de cada plataforma (Java, Shift).

Dependiendo de la plataforma en la que desees desarrollar tendrás que configurar tu entorno y las herramientas básicas para compilar (uso de IDE’s, Sdkde Android, Xcode en IOs)

DISPOSITIVOS DISPONIBLES

Amazon Fire OS

Android

BlackBerry 10

Browser

Firefox OS

iOS

Tizen

Windows Phone

Windows

OSX

CÓMO INSTALAR IONIC

1. INSTALAMOS NODE

2. NPM INSTALL –G IONIC

3. IONIC START MYAPP BLANK/TABS/SIDEMENU

PARA COMPILAR

5. IONIC CORDOVA BUILD ANDROID/IOS

6. IONIC CORDOVA RUN ANDROID

COMPONENTES DE IONIC

IONIC NOS OFRECE UNA AMPLIA DIVERSIDAD DE COMPONENTESCON LOS QUE EMPEZAR A TRABAJAR, TODOS ELLOS DE FÁCIL IMPORTACIÓN Y CON MULTITUD DE MÉTODOS Y CALLBACKS DISPONIBLES EN LA DOCUMENTACIÓN.

IONIC NATIVE (CORDOVA PLUGINS)HAY MUCHOS PLUGINS DE CORDOVA Y ES FÁCIL PERDERSE, PARA ELLO IONIC NOS LO PONE FÁCIL Y DESPLIEGA EN SU WEB UNA SELECCIÓN DE LOS PLUGINS DE CORDOVA MÁS USADOS Y ADAPTADOS A ANGULAR (TYPINGS PARA IDE’s INCLUIDA).

PODREMOS ENCONTRAR PLUGINS PARA COMUNICARNOS CON ONESIGNAL, PARA ACCEDER A LA CÁMARA, AL FLASH, A LOS PERMISOS… INCLUSO A LA BASE DE DATOS INTERNA DEL PROGRAMA

MUCHOS DE ESTOS PLUGINS NO SON ACCESIBLES DESDE EL EMULADOR DE IONIC, SÓLO DESDE EL DISPOSITIVO

CÓMO FUNCIONA EL NAVCONTROLLERIonic navega entre páginas con un componente llamado NavController, este coge las páginas a modo de ‘stacks’ y las va superponiendo unas encima de otras, guardando en todo momento su posición.

‘Push’ se usa para apilar, ‘pop’ para eliminar y setRoot para establecer una pagina como la principal (y muchas cosas más).

FUNCIONES IONVIEW

ionViewDidLoad: Cuando unapágina se carga

IonViewWillEnter: Cuandoestamos a punto de entrar enuna página y se convertirá enla activa

ionViewDidEnter: Cuando unapágina está cargada y es lapágina activa

ionViewWillLeave: Cuando seestá a punto de abandonar

Son métodos que se ejecutan en los diferentes estados de un servicio, usados comúnmente cuando llamamos a un servicio o cuando vamos a abandonar o cargar una nueva página

ionViewDidLeave: Cuando una pagina se ha abandonado y ya no es la activa

ionViewWillUnload: Cuando una pagina va a ser destruida y hay elementos que serán borrados

ionViewCanEnter: Funciona antes de que una vista vaya iniciarse

ionViewCanLeave: Funciona antes de que una vista vaya a finalizar

IONICONSIONIC dispone de su propia librería de Iconos (similar a la de fontawesome) que está totalmente integrada con el framework(aunque también está disponible para usar de manera gratuita como una librería).

ION GRIDIONIC también incluye el popular sistema de celdas utilizada por la librería bootstrap, aunque contiene su propia notación en el HTML es muy similar a la que ya se usa y viene perfectamente documentada en su web

EMPEZANDO EN ANGULAR

ANGULAR ES UN FRAMEWORK DEL LADO DEL CLIENTE QUE ENGLOBA UN CONJUNTO DE LIBRERÍAS DE JAVASCRIPT Y QUE SIGUE UN PATRÓN BASADO EN EL MODELO VISTA CONTROLADOR.

ESTO DOTA AL PROGRAMA DE UNA GRAN RAPIDEZ Y SE CONSIGUE UN CÓDIGO LIMPIO, MANTENIBLE Y ESCALABLE

AUNQUE AL PRINCIPIO SUELE IMPONER SU WEB TAMBIÉN NOS BRINDA UNA EXTENSA DOCUMENTACIÓN EN LA QUE POCO A POCO APRENDEREMOS SUS CARACTERÍSTICAS Y PECULIARIDADES, UN EJEMPLO QUE SUELE HACER LA GENTE QUE EMPIEZA EN ANGULAR ES EL TOUR OF HEROES (ADAPTABLE TAMBIÉN A IONIC)

ESTRUCTURA DEL FRAMEWORK

ESTE FRAMEWORK ESTÁ INSPIRADO EN LOS PATRONES MVC, CON UNA ESTRUCTURA Y UN PATRÓN MUY MARCADOS PERO CON UNA AMPLIA CAPACIDAD DE PERSONALIZACIÓN Y DE ESTRUCTURACIÓN MEDIANTE PIPES, PROVIDERS Y SERVICES, APARTE DE ATAJOS QUE NOS OFRECE IONIC.

PODREMOS ENCONTRAR EJEMPLOS O TEMPLATES PARA VER CÓMO SE DESARROLLA O LAS BUENAS PRÁCTICAS QUE SE DEBERÍAN SEGUIR, MUCHOS DE ELLOS GENERADOS POR EL CLI ( COMMAND LINE INTERFACE ).

A CONTINUACIÓN VEREMOS UN EJEMPLO DE LA ESTRUCTURA QUE SIGUE EL CÓDIGO, BASTANTE SIMILAR AUNQUE CON VARIACIONES DE LA QUE USA ANGULAR

ESTRUCTURA

RESOURCESAquí se guardaran los recursos para generar el icono de la aplicación y el splashscreen en sus distintas resoluciones, es autogenerado mediante un comando

INDEX.HTMLEs la página principal en la que se carga en la aplicación y la que sirve de “base” para el resto.

Se establece en el config.xml y aunque también sirve para cargar distintas librerías no es recomendable tocar demasiado este archivo.

APP.COMPONENTAquí es donde la aplicación se ‘lanza’ y se establece la página principal en la que por defecto el programa se va a cargar. Esto se observa mejor en el app.html, donde se renderiza la vista que llamará al controlador principal ( en este caso HomePage.ts ).

En el constructor podemos establecer lo que queramos al iniciarse la aplicación. Esta aparece por defecto

<ion-nav [root]="rootPage"></ion-nav>

APP.MODULE

Esta parte se encarga de decirle a Angular lo que se va a usar en la aplicación: Establecer decoradores, importar librerías, establecer las páginas y plugins que van a usarse, los servicios…

Muchos de los errores que se cometen frecuentemente suelen venir de este servicio.

EJEMPLOS DE SERVICIOSEn Ionic es frecuente el uso de servicios para separar la lógica y algunos métodos que se usan dentro de un programa, a continuación mostraré dos ejemplos muy simples. En uno crearemos un array de elementos y en el otro crearemos un servicio que se encargará de mostrar mensajes de alerta nativos.

¿TIENE SENTIDO CREAR SERVICIOS TAN CORTOS?

Lo que se busca usando Angular es tener un programa muy orientado a objetos, muy modular y que sea eficiente, mantenible y escalable.

Estos servicios podrían crearse directamente en la página donde vamos a usarlos pero según la guía de las buenas prácticas de Angular no es conveniente tener un .ts que ocupe más de 150 líneas de código, por ejemplo imaginad que tenemos 5 páginas donde se usa una función de un alert que ocupa 20 líneas de código…

¿No sería mejor crear un servicio con este método y que cada página lo llamase cuando necesitase su uso?

PAGES

Es la forma en que se establecen las nuevas páginas, suelen disponer de 3 elementos principales:

HTML, CSS, TS

Se generan habitualmente con el CLI ( ionic generatepage )

Aquí observamos como quedaría una vista en IONIC

PAGES

Esta es la forma en la que tenemos el servicio que va vinculado al html.

Se establece el componente a renderizar, se declaran otros servicios, variables, se inicializa un constructor y abajo se establece la funcionalidad.

CONFIG.XMLEl archivo de configuración de la aplicación

En esta parte se declaran el nombre de la aplicación, el de la apk, se establecen algunos valores como el tiempo o el fade del splashscreen, se añaden claves de algunas API, etc…

PHONEGAP, XAMARIN, IONIC… ¿CUÁL ELEGIR?Esta es una pregunta siempre es planteada cuando queremos hacer una aplicación multiplataforma.

Realmente creo que no es fácil responder, cada cual tiene sus motivos por las que usa o se plantea usar una u otra (recurre a más componentes nativos que otros, tiene mayor soporte de la comunidad, tiene una curva de aprendizaje más suave).

Creo que lo que queda es ver la evolución de cada framework y ver cual es más potente, se adapta a nuestras necesidades o bien nos es más familiar.

Algo similar se podría decir de elegir nativo frente a híbrido

EL FUTURO DE IONIC

El equipo de IONIC busca constantemente la mejora, casi semanalmente tenemos una actualización del CLI y poco a poco se aleja un poco más de Angular y se aproxima más a incluir componentes nativos en su código, que lo dotan de mejor rendimiento.

De hecho es sabido que su próximo movimiento (en la versión 4) incluirán Stencil (creado por ellos mismos) permitiéndonos usar Angular, Vue, Ember y muchos más frameworks…

Aunque no nos engañemos, habrá cambios como ya los hubo anteriormente (además fueron gigantescos) de la versión de IONIC 1 a la 2 (en parte gracias a Angular y su salto gigantesco de la versión 2 a la 4). También está por entrar en escena Angular Elements…

ESTAREMOS ATENTOS