Embed Size (px)
Citation preview
Apps móviles híbridas con IonicIntroducción, instalación y uso
@obokaman
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
¿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
¿App nativa o híbrida?
Esa es la cuestión…
Vamos a por una app
híbrida, ¿no?¡¿O ponemos una mesa?!
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.
Ionic al rescate
¿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.
Componentes de IonicCSS
Componentes de IonicCSS
Componentes de IonicJavascript
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
Plantillas de inicio
Empezar en base a una plantilla
$ ionic start nombreApp blank{ {
Nombre del proyectoy de la carpeta
Nombre de la plantilla
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 [email protected] habiendo subido nuestra app, nos permite compartirla con otros, a través de la web o de la app Ionic View
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
Y en nuestro caso…
Vamos a echar un vistazo al código
