Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción a Ionic

1,004 views

Published on

Introducción, instalación y uso básico de Ionic

Published in: Software
  • Login to see the comments

Introducción a Ionic

  1. 1. Apps móviles híbridas con Ionic Introducción, instalación y uso @obokaman
  2. 2. El peso del mobile en Uvinum Un 50,5% del tráfico proviene ya de móviles y tabletas (aunque el ~70% de los ingresos todavía llegan de escritorio) El share de tráfico de móviles se ha incrementado en ~10 puntos en 2015 VS 2014 (+16% en números absolutos mientras el tráfico de escritorio había bajado un 28%) Las tendencias en los hábitos de compra móviles son decididamente al alza: +110% de ingresos móviles en ES, +486% en UK. +220% en conversión en UK
  3. 3. ¿Porqué una app si ya teníamos versión móvil? Rapidez de acceso por parte de los clientes Ir a buscar a nuestros clientes allá donde están Acceso a funciones nativas: geolocalización mejorada, cámara, urlscheme… Posibilidad de enviar notificaciones push personalizadas
  4. 4. ¿App nativa o híbrida? Esa es la cuestión…
  5. 5. Vamos a por una app híbrida, ¿no? ¡¿O ponemos una mesa?!
  6. 6. Además… No tenemos conocimiento dentro del equipo de Java, Swift, Objective-C… La experiencia de externalización fue un desastre El ritmo de puesta en marcha de nuevas funcionalidades en la web es muy alto y no nos podemos permitir que la app “se quede atrás” Hemos hecho YA un gran trabajo de optimización para la experiencia móvil desde nuestra web. Aprovechémoslo.
  7. 7. Ionic al rescate
  8. 8. ¿Qué es Ionic? Es un framework front-end para aplicaciones móviles, con especial foco en el rendimiento Contiene un montón de componentes HTML, CSS y JS optimizados para móviles Usa AngularJS para dotar de funcionalidad a tu app móvil Usa Apache Cordova para “conectar” nuestra app basada en HTML5 con las APIs nativas de cada plataforma y construir, ejecutar y deployar las apps de forma nativa.
  9. 9. Componentes de Ionic
 CSS
  10. 10. Componentes de Ionic
 CSS
  11. 11. Componentes de Ionic
 Javascript
  12. 12. Más ejemplos… http://codepen.io/ionic/pens/public/
  13. 13. Instalación 1.Instalar NODE.JS (https://nodejs.org/en/download/) 2.Instalar Ionic y Cordova globamente en el sistema $ npm install -g ionic cordova iOS • Necesitaremos Xcode y trabajar desde un Mac • Para lanzar el simulador de iOS desde consola necesitaremos instalar un paquete adicional:
 
 $ sudo npm -g install ios-sim ANDROID • Necesitaremos el Android SDK • Algunos paquetes adicionales para optimizar el rendimiento del emulador: https://github.com/uvinum/mobileapp
  14. 14. Plantillas de inicio
  15. 15. Empezar en base a una plantilla $ ionic start nombreApp blank { { Nombre del proyecto y de la carpeta Nombre de la plantilla
  16. 16. Comandos útiles $ ionic serve 
 inicia servidor web local con live reload para poder testear la app $ ionic state reset
 ~composer install: instala plugins y añade plataformas definidas $ ionic resources [--icon|--splash]
 genera los assets necesarios en base a modelos en PNG/PSD/AI… $ ionic upload
 sube nuestra app a nuestra cuenta de ionic.io $ ionic share name@email.com
 habiendo subido nuestra app, nos permite compartirla con otros, a través de la web o de la app Ionic View
  17. 17. Comandos útiles $ ionic platform add (ios|android)
 añade los archivos/versiones de plugins necesarios para la plataforma $ ionic build (xxx)
 genera los ficheros necesarios para la app nativa en la plataforma $ ionic emulate (xxx) [--livereload]
 lanza la app en el emulador de la plataforma en cuestión. El parámetro opcional livereload fuerza que se recargue la app con cada cambio $ ionic run (xxx) [--livereload]
 en vez de ejecutar la app en el emulador, la cargará en el dispositivo real conectado al ordenador que le indiquemos
  18. 18. Y en nuestro caso… Vamos a echar un vistazo al código

×