Ionic Framework

1. IONIC
Un framework para
desarrollar aplicaciones
híbridas
Una presentación de Juan Antonio
Núñez

2. ¿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

3. 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

4. TECNOLOGÍAS USADAS

5. 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

6. ¿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, Sdk
de Android, Xcode en IOs)

7. DISPOSITIVOS DISPONIBLES
Amazon Fire OS
Android
BlackBerry 10
Browser
Firefox OS
iOS
Tizen
Windows Phone
Windows
OSX

8. 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

9. COMPONENTES DE IONIC
IONIC NOS OFRECE UNA AMPLIA DIVERSIDAD DE COMPONENTES
CON 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.

10. 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

11. CÓMO FUNCIONA EL
NAVCONTROLLER
Ionic 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).

12. FUNCIONES IONVIEW
ionViewDidLoad: Cuando una
página se carga
IonViewWillEnter: Cuando
estamos a punto de entrar en
una página y se convertirá en
la activa
ionViewDidEnter: Cuando una
página está cargada y es la
página activa
ionViewWillLeave: Cuando se
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

13. IONICONS
IONIC 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).

14. ION GRID
IONIC 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

15. 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)

16. 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

17. ESTRUCTURA

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

19. INDEX.HTML
Es 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.

20. APP.COMPONENT
Aquí 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>

21. 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.

22. EJEMPLOS DE SERVICIOS
En 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.

23. ¿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?

24. 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 generate
page )
Aquí observamos como
quedaría una vista en
IONIC

25. 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.

26. CONFIG.XML
El 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…

27. 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

29. 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