Embed Size (px)
Citation preview
Desarrollo de aplicaciones móviles con Ionic y
Apache Cordova.
Ing. Alián Rigñack Quevedo
4to Encuentro de Desarrolladores Habana
AGENDA
DESARROLLO TRADICIONALTECNOLOGIAS HIBRIDASARQUITECTURAAPACHE CORDOVA IONICENTORNO DE DESARROLLO
DESARROLLO TRADICIONAL
El desarrollo para dispositivos móviles ha estado basado tradicionalmente en código nativo.
Cada plataforma provee SDKs, APIs, y herramientas de desarrollo propias.
Crear aplicaciones para iOS, Android, Windows Mobile, etc., requiere conocimiento especifico. Llegar a un mercado amplio requiere una cuota de esfuerzo y tiempo grande.
CROSS PLATFORM MOBILE FRAMEWORKS
Adobe Air
Intel App Framework
PropertyCross
Ionic
jQuery Mobile
Sencha Touch 2
Xamarin
DESARROLLO CON TECNOLOGIAS HIBRIDASAplicación web ejecutada en un componente nativo
(WebView)
Desarrollo fundamentalmente con HTML5, JavaScript y CSS.
Interacción con los dispositivos a través de plugins que gestionan código nativo.
Se insertan dentro de los llamados cross-platform mobile frameworks.
ARQUITECTURA DE UNA APLICACIÓN TIPICA
12:38
Operative Sistem: Android, iOS, Windows Mobile
Contacts
Network
SQLiteCros
s-m
obile
fra
mew
ork Apache Cordova
Plugins
UX/UI Framework: Ionic, OnsenUI, …
MVW Framework: AngularJs
Apache Cordova
APACHE CORDOVATecnologías web para desarrollo cross-
platform.
Aplicaciones ejecutadas en un WebView nativo
Acceso al dispositivo a través de plugins de código nativo.
ADOBE PHONEGAP
Apache Cordova surge de PhoneGap.
Phonegap Agrega servicios de compilación, debug y construcción en la nube.
Utilizan los mismos plugins pero ya comienzan a existir incompatibilidades.
Ionic
IONIC
• Desarrollado con AngularJs, por miembros del mismo equipo de AngularJs.
• Extensa librería de controles visuales, comportamientos, estilos, animaciones.
• Una gran comunidad, releases frecuentes.
IONIC
• CONTROLES• ION-LIST• ION-VIEW• ION-SIDE-MENU• ION-NAV-BAR• ION-TABS• ION-SLIDE-BOX
• PROVIDERS• $ionicModal• $ionicActionShee
t
Entorno de desarrollo
ENTORNO DE DESARROLLO
• IDE: JetBrains Webstorm• Emulador: Genymotion• Cross-platform framework: Apache Cordova• UX/UI Framework: Ionic• Debugger: Weinre
Genymotion
CORDOVA SIMULATOR
Apache ripple
weinre
OTROS DEBUGGERS
Chrome Remote Debugging jsHybuggerGapDebug JSConsoleApache Ripple
/ADOPCION/SOPORTE/HERRAMIENTAS
Herramientas que ofrecen soporte
• JetBrains WebStorm.• Oracle Mobile Application Framewok.• Visual Studio Tools for Apache Cordova.
Demo
Demo
• Uso de Ionic y AngularJs.• Uso de plugins de Apache Cordova.• Herramientas de consola.• Generación de APK para Android.• Ejecución en emulador
Tips desarrollo offline
• Como crear proyectos nuevos sin utilizar la consola.
• Agregar plugins al proyecto.
• Debuggers como Weinre o JSConsole.
• Configuración de Repositorio local de npm y bower.
Aplicaciones hibridas
• POPULARES• Sworkit
• CUBA• Andariego• KetoqueSuite
CONCLUSIONES
• Las tecnologías nativas e híbridas no son excluyentes.
• Desarrollo aun en estadios iniciales pero prometedor. Grandes empresas apostando por Apache Cordova.
• La combinación Cordova/Ionic es una excelente opción como framework multiplataforma.
Preguntas
