Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

IONIC, el framework para crear aplicaciones híbridas multiplataforma

430 visualizaciones

Publicado el

En esta charla, Juan nos va a enseñar los conceptos básicos para crear una aplicación móvil multiplataforma usando el framework "IONIC". Aprenderemos cómo instalar las herramientas básicas para su uso, haremos una breve aproximación a los distintos plugins que nos ofrece "Cordova" y aprenderemos un poco de la arquitectura interna de IONIC (basado en un patrón MVC, el cuál usa AngularJS, Typescript y CSS (bajo SASS).

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

IONIC, el framework para crear aplicaciones híbridas multiplataforma

  1. 1. IONIC Un framework para desarrollar aplicaciones híbridas Una presentación de Juan Antonio Núñez
  2. 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. 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. 4. TECNOLOGÍAS USADAS
  5. 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. 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. 7. DISPOSITIVOS DISPONIBLES Amazon Fire OS Android BlackBerry 10 Browser Firefox OS iOS Tizen Windows Phone Windows OSX
  8. 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. 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. 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. 11. 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).
  12. 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. 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. 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. 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. 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. 17. ESTRUCTURA
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  28. 28. 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

×