charla gdg madrid: cordova + angularjs + ionic
DESCRIPTION
Trasparencias utilizadas para la charla GDG Madrid: Cordova + AngularJS + IonicTRANSCRIPT
![Page 2: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/2.jpg)
www.autentia.com
¿Quién soy yo?
Consultor Sénior en Autentia, me puedes encontrar en www.adictosaltrabajo.com
+10 años en este mundillo, actualmente interesado en cacharrerar con movilidad.
Aprendiz permanente, maestro ocasional.
![Page 3: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/3.jpg)
www.autentia.com
SituaciónAndroid IOS Windows
PhoneFirefoxOS
% Mercado 86,1 % 8,7 % 4,6 % 0,2 %
Lenguajes Java Objective-C C# HTML, CSS, JS
Herramientas/Plataformas
Android Developer/Mac,
Linux y Windows
XCode / Mac Visual Studio / Windows
Editor Web / Mac, Linux y
Windows
Ejecutables .apk .app .xap .zip
Markets Google Play Apple Store Market Firefox Market
Coste Distribución
25 €/año 80 €/año 14 €/año 0 €
![Page 4: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/4.jpg)
www.autentia.com
ProblemasNecesitamos conocer todas las tecnologías: Java, Objective-C, C#, HTML5, CSS3, Javascript.
El tiempo y por tanto el coste de desarrollo de una aplicación se multiplica por el número de plataformas soportadas.
Lo ideal sería desarrollar una única aplicación.
![Page 5: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/5.jpg)
www.autentia.com
1º Solución: Aplicación WebCreamos una aplicación web que sea ejecutada con el navegador del dispositivo.Problemas:● No podemos hacer uso de las funcionalidades del
móvil como la cámara, los contactos, etc..● No podemos aprovechar los markets para la
distribución de la aplicación.● La ejecución va a depender del navegador que se
esté utilizando.
![Page 6: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/6.jpg)
www.autentia.com
2º Solución: Aplicación HíbridaSon aplicaciones web (HTML5, CSS3 y Javascript) que acceden a las funciones nativas de los dispositivos pero de una determinada plataforma.
Aprovechamos el market de esa plataforma.
Si queremos ejecutar nuestra aplicación en otra plataforma tenemos que hacer otro desarrollo híbrido específico para esa plataforma.
![Page 7: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/7.jpg)
www.autentia.com
3º Solución: PhoneGap / CordovaCreamos una aplicación híbrida con HTML5, CSS3 y Javascript y la podemos ejecutar directamente en todas las plataformas soportadas.
Podemos hacer uso de las funcionalidades del móvil gracias a un API Javascript que se adapta a cada plataforma.
Podemos publicar la aplicación en los markets de cada plataforma.
![Page 8: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/8.jpg)
www.autentia.com
API Reference (3.4)FileGeolocationGlobalizationInAppBrowserMediaNotificationSplashscreenStorage
AccelerometerCameraCaptureCompassConnectionContactsDeviceEvents
![Page 9: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/9.jpg)
www.autentia.com
Historia2008, la empresa Nitobi presenta PhoneGap en el iPhoneDevCamp.
2011, Adobe compra Nitobi y PhoneGap se convierte en la distribución del proyecto libre Apache Cordova.
2012, Adobe presenta PhoneGap Build, plataforma de pago que permite la construcción y distribución de estas aplicaciones en la nube.
![Page 10: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/10.jpg)
www.autentia.com
Empezando con CordovaPara instalar Cordova necesitamos tener instalado Node en nuestra máquina. http://nodejs.org
Después ejecutamos en un terminal:
sudo npm install -g cordova
![Page 11: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/11.jpg)
www.autentia.com
Crear primer proyectoAbrimos un terminal y ejecutamos:
cordova create HolaMundo com.autentia.holamundo “Hola Mundo”
1º Es el path de la carpeta del proyecto2º Es el id del widget (Opcional)3º Es el nombre del proyecto (Opcional)
![Page 12: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/12.jpg)
www.autentia.com
Estructura del proyectomerges: para personalizar código.
platforms: contiene cada uno de los proyectos por plataforma.
plugins: para extender funcionalidad por plataforma.
www: contiene los ficheros fuentes de la aplicación.
![Page 13: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/13.jpg)
www.autentia.com
PluginsEs la mejor forma de extender funcionalidad. Existen muchos plugins listos para ser utilizados (https://build.phonegap.com/plugins)
cordova plugins ls
cordova plugins add org.apache.cordova.camera
cordova plugins rm org.apache.cordova.camera
![Page 14: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/14.jpg)
www.autentia.com
PlatformsEs momento de añadir las plataformas que queramos soportar.
Importante: Nuestra máquina de desarrollo tiene que estar preparada para la plataforma en cuestión.
Ej: no puedo desarrollar para wp8 fuera de Windows 8.
cordova platforms add ios android wp8 firefoxos
![Page 15: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/15.jpg)
www.autentia.com
wwwAquí es donde vamos a desarrollar nuestra aplicación con HTML5, CSS3 y Javascript.
Podemos utilizar cualquier framework de front-end como AngularJS, Ember, Backbone, etc...
Nos crea una aplicación de ejemplo lista para desplegar.
![Page 16: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/16.jpg)
www.autentia.com
Construir la aplicaciónPara construir la aplicación para todas las plataformas dadas de alta:
cordova build
Para una específica:
cordova build [ios | android | wp8]
![Page 17: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/17.jpg)
www.autentia.com
Construir para FirefoxOSEl caso de FirefoxOS es algo especial dado que no tiene binarios basta con ejecutar:
cordova prepare
Para firefoxos exclusivamente:
cordova prepare firefoxos
![Page 18: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/18.jpg)
www.autentia.com
Probar la aplicaciónPodemos emular la aplicación en una plataforma específica:
cordova emulate [ios | android]
Podemos arrancar en un dispositivo físico:
cordova run [ios | android]
![Page 19: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/19.jpg)
www.autentia.com
Desmontando la magiaSe trata de una aplicación híbrida que conecta con las clases nativas a través de su API Javascript.
cordova.exec(successCallback, failCallback, “Clase”, “accion”, args)
En cada plataforma implementamos la acción como corresponda:public class Clase extends CordovaPlugin{
public boolean execute(String accion, JSONArray args, CallbackContext callbackContext){}
}
![Page 20: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/20.jpg)
www.autentia.com
Cosas a tener en cuentaNos crea proyectos independientes para cada una de las plataformas dadas de alta que se pueden abrir con las herramientas específicas.
En determinados procesos puede empeorar la experiencia de usuario con respecto a aplicaciones puramente nativas.
La distribución en los markets depende de las condiciones de cada plataforma: licencias, costes, iconos, ...
![Page 21: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/21.jpg)
www.autentia.com
Buenas prácticasDesarrollar inicialmente para una plataforma, podría ser FirefoxOS por su facilidad de debug y la rapidez del simulador, aunque Android gracias a Genymotion es una buena alternativa también.
Probar en el resto de plataformas y solucionar diferencias a través de “merges” y “plugins”.
![Page 22: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/22.jpg)
www.autentia.com
Buenas prácticasSiempre personalizar las interfaces a través de la carpeta “merges”.
Siempre extender la funcionalidad con la creación de plugins reutilizables para cada una de las plataformas.
Solo subir al control de versiones las carpetas “merges” y “www”. El resto del proyecto se genera desde la plataforma específica.
![Page 23: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/23.jpg)
www.autentia.com
¿Y Ahora qué?
![Page 24: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/24.jpg)
www.autentia.com
Yeoman + AngularJS
sudo npm install -g yo bower grunt
sudo npm install -g generator-angular
yo angular
![Page 25: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/25.jpg)
www.autentia.com
Yeoman + AngularJS
![Page 26: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/26.jpg)
www.autentia.com
Yeoman + AngularJS
grunt serve
![Page 27: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/27.jpg)
www.autentia.com
Integrar Cordova1. Eliminar la directiva ng-app del index.html
2. Añadir el cordova.js al index.html, asegurando que no se ve afectado por la minificación de scripts
3. En el fichero app.js crear el siguiente script
![Page 28: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/28.jpg)
www.autentia.com
Integrar Cordovavar CordovaInit = function() {
if (window.cordova) {document.addEventListener('deviceready', function() {
console.log('Arranco angular desde cordova');boot();
});} else {
console.log('Arranco angular desde web');boot();
}
function boot(){angular.bootstrap(document, [ 'gdgdemoApp' ]);
}};
angular.element(document).ready(function() {new CordovaInit();
});
![Page 29: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/29.jpg)
www.autentia.com
Integrar Cordova
cordova create cordova-apps “com.autentia” “GDGDemo” --link-to=app
cd cordova-apps && cordova platforms add android
cordova build android
cordova run android
![Page 30: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/30.jpg)
www.autentia.com
¿Y Ahora qué?
![Page 31: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/31.jpg)
www.autentia.com
Ionic
bower install ionic#1.0.0-beta.5b --save
Es un framework para dar apariencia “nativa” a nuestras aplicaciones híbridas.
Ofrece directivas predefinidas en AngularJS y un conjunto de estilos e iconos muy útiles.
![Page 32: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/32.jpg)
www.autentia.com
Ionic
![Page 33: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/33.jpg)
www.autentia.com
Demo Time
https://github.com/raguilera82/GDG-demo
![Page 34: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/34.jpg)
www.autentia.com
![Page 35: Charla GDG Madrid: Cordova + AngularJS + Ionic](https://reader034.vdocuments.site/reader034/viewer/2022050720/548129b6b37959b55d8b4635/html5/thumbnails/35.jpg)
www.autentia.com
“Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos”