Desarrollo de aplicaciones móviles con Ionic y

Apache Cordova.

Ing. Alián Rigñack Quevedo

4to Encuentro de Desarrolladores Habana

arignack@gmail.com

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

Datos de contactoIng. Alián Rigñack Quevedo

• arignack@gmail.com • http://desarrollomovil.cubava.cu