Presentación de charla efectuada en el evento Encuentro Social de Desarrolladores organizado por el grupo Desarrolladores Habana. Trata sobre desarrollo para aplicaciones móviles empleando las tecnologías Ionic y Apache Cordova.

1. Desarrollo de aplicaciones móviles con
Ionic y
Apache Cordova.
Ing. Alián Rigñack Quevedo
4to Encuentro de Desarrolladores Habana
arignack@gmail.com

2. AGENDA
 DESARROLLO TRADICIONAL
 TECNOLOGIAS HIBRIDAS
 ARQUITECTURA
 APACHE CORDOVA
 IONIC
 ENTORNO DE DESARROLLO

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

4. CROSS PLATFORM MOBILE FRAMEWORKS
Adobe Air
Intel App Framework
PropertyCross
Ionic
jQuery Mobile
Sencha Touch 2
Xamarin

5. DESARROLLO CON TECNOLOGIAS
HIBRIDAS
 Aplicació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.

6. ARQUITECTURA DE UNA APLICACIÓN
TIPICA
Operative Sistem: Android, iOS,
Windows Mobile
Contacts
Network
SQLite
Cross-mobile
framework
Apache Cordova
Plugins
UX/UI Framework: Ionic,
OnsenUI, …
MVW Framework: AngularJs

7. Apache Cordova

8. APACHE CORDOVA
Tecnologías web para desarrollo cross-
platform.
Aplicaciones ejecutadas en un WebView
nativo
Acceso al dispositivo a través de plugins de
código nativo.

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

10. Ionic

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

12. IONIC
• CONTROLES
• ION-LIST
• ION-VIEW
• ION-SIDE-MENU
• ION-NAV-BAR
• ION-TABS
• ION-SLIDE-BOX
• PROVIDERS
• $ionicModal
• $ionicActionSheet

13. Entorno de desarrollo

14. ENTORNO DE DESARROLLO
• IDE: JetBrains Webstorm
• Emulador: Genymotion
• Cross-platform framework: Apache Cordova
• UX/UI Framework: Ionic
• Debugger: Weinre

15. Genymotion

16. CORDOVA SIMULATOR

17. Apache ripple

18. weinre

19. OTROS DEBUGGERS
Chrome Remote Debugging
 jsHybugger
 GapDebug
 JSConsole
 Apache Ripple

20. /ADOPCION
/SOPORTE
/HERRAMIENTAS

21. Herramientas que ofrecen soporte
• JetBrains WebStorm.
• Oracle Mobile Application Framewok.
• Visual Studio Tools for Apache Cordova.

22. Demo

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

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

25. Aplicaciones hibridas
• POPULARES
• Sworkit
• CUBA
• Andariego
• KetoqueSuite

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

27. Preguntas

28. Datos de contacto
Ing. Alián Rigñack Quevedo
• arignack@gmail.com
• http://desarrollomovil.cubava.cu