Charla GDG Madrid: Cordova + AngularJS + Ionic

  • Published on
    05-Dec-2014

  • View
    1.046

  • Download
    1

Embed Size (px)

DESCRIPTION

Trasparencias utilizadas para la charla GDG Madrid: Cordova + AngularJS + Ionic

Transcript

<ul><li> 1. www.autentia.com @raguilera82 github.com/raguilera82 raguilera@autentia.com </li> <li> 2. www.autentia.com Quin soy yo? Consultor Snior en Autentia, me puedes encontrar en www.adictosaltrabajo.com +10 aos en este mundillo, actualmente interesado en cacharrerar con movilidad. Aprendiz permanente, maestro ocasional. </li> <li> 3. www.autentia.com Situacin Android IOS Windows Phone FirefoxOS % Mercado 86,1 % 8,7 % 4,6 % 0,2 % Lenguajes Java Objective-C C# HTML, CSS, JS Herramientas/Pl ataformas 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 Distribucin 25 /ao 80 /ao 14 /ao 0 </li> <li> 4. www.autentia.com Problemas Necesitamos conocer todas las tecnologas: Java, Objective-C, C#, HTML5, CSS3, Javascript. El tiempo y por tanto el coste de desarrollo de una aplicacin se multiplica por el nmero de plataformas soportadas. Lo ideal sera desarrollar una nica aplicacin. </li> <li> 5. www.autentia.com 1 Solucin: Aplicacin Web Creamos una aplicacin web que sea ejecutada con el navegador del dispositivo. Problemas: No podemos hacer uso de las funcionalidades del mvil como la cmara, los contactos, etc.. No podemos aprovechar los markets para la distribucin de la aplicacin. La ejecucin va a depender del navegador que se est utilizando. </li> <li> 6. www.autentia.com 2 Solucin: Aplicacin Hbrida Son 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 aplicacin en otra plataforma tenemos que hacer otro desarrollo hbrido especfico para esa plataforma. </li> <li> 7. www.autentia.com 3 Solucin: PhoneGap / Cordova Creamos una aplicacin hbrida con HTML5, CSS3 y Javascript y la podemos ejecutar directamente en todas las plataformas soportadas. Podemos hacer uso de las funcionalidades del mvil gracias a un API Javascript que se adapta a cada plataforma. Podemos publicar la aplicacin en los markets de cada plataforma. </li> <li> 8. www.autentia.com API Reference (3.4) File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage Accelerometer Camera Capture Compass Connection Contacts Device Events </li> <li> 9. www.autentia.com Historia 2008, la empresa Nitobi presenta PhoneGap en el iPhoneDevCamp. 2011, Adobe compra Nitobi y PhoneGap se convierte en la distribucin del proyecto libre Apache Cordova. 2012, Adobe presenta PhoneGap Build, plataforma de pago que permite la construccin y distribucin de estas aplicaciones en la nube. </li> <li> 10. www.autentia.com Empezando con Cordova Para instalar Cordova necesitamos tener instalado Node en nuestra mquina. http://nodejs.org Despus ejecutamos en un terminal: sudo npm install -g cordova </li> <li> 11. www.autentia.com Crear primer proyecto Abrimos un terminal y ejecutamos: cordova create HolaMundo com.autentia.holamundo Hola Mundo 1 Es el path de la carpeta del proyecto 2 Es el id del widget (Opcional) 3 Es el nombre del proyecto (Opcional) </li> <li> 12. www.autentia.com Estructura del proyecto merges: para personalizar cdigo. platforms: contiene cada uno de los proyectos por plataforma. plugins: para extender funcionalidad por plataforma. www: contiene los ficheros fuentes de la aplicacin. </li> <li> 13. www.autentia.com Plugins Es 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 </li> <li> 14. www.autentia.com Platforms Es momento de aadir las plataformas que queramos soportar. Importante: Nuestra mquina de desarrollo tiene que estar preparada para la plataforma en cuestin. Ej: no puedo desarrollar para wp8 fuera de Windows 8. cordova platforms add ios android wp8 firefoxos </li> <li> 15. www.autentia.com www Aqu es donde vamos a desarrollar nuestra aplicacin con HTML5, CSS3 y Javascript. Podemos utilizar cualquier framework de front-end como AngularJS, Ember, Backbone, etc... Nos crea una aplicacin de ejemplo lista para desplegar. </li> <li> 16. www.autentia.com Construir la aplicacin Para construir la aplicacin para todas las plataformas dadas de alta: cordova build Para una especfica: cordova build [ios | android | wp8] </li> <li> 17. www.autentia.com Construir para FirefoxOS El caso de FirefoxOS es algo especial dado que no tiene binarios basta con ejecutar: cordova prepare Para firefoxos exclusivamente: cordova prepare firefoxos </li> <li> 18. www.autentia.com Probar la aplicacin Podemos emular la aplicacin en una plataforma especfica: cordova emulate [ios | android] Podemos arrancar en un dispositivo fsico: cordova run [ios | android] </li> <li> 19. www.autentia.com Desmontando la magia Se trata de una aplicacin hbrida que conecta con las clases nativas a travs de su API Javascript. cordova.exec(successCallback, failCallback, Clase, accion, args) En cada plataforma implementamos la accin como corresponda: public class Clase extends CordovaPlugin{ public boolean execute(String accion, JSONArray args, CallbackContext callbackContext){} } </li> <li> 20. www.autentia.com Cosas a tener en cuenta Nos crea proyectos independientes para cada una de las plataformas dadas de alta que se pueden abrir con las herramientas especficas. En determinados procesos puede empeorar la experiencia de usuario con respecto a aplicaciones puramente nativas. La distribucin en los markets depende de las condiciones de cada plataforma: licencias, costes, iconos, ... </li> <li> 21. www.autentia.com Buenas prcticas Desarrollar inicialmente para una plataforma, podra ser FirefoxOS por su facilidad de debug y la rapidez del simulador, aunque Android gracias a Genymotion es una buena alternativa tambin. Probar en el resto de plataformas y solucionar diferencias a travs de merges y plugins. </li> <li> 22. www.autentia.com Buenas prcticas Siempre personalizar las interfaces a travs de la carpeta merges. Siempre extender la funcionalidad con la creacin 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 especfica. </li> <li> 23. www.autentia.com Y Ahora qu? </li> <li> 24. www.autentia.com Yeoman + AngularJS sudo npm install -g yo bower grunt sudo npm install -g generator-angular yo angular </li> <li> 25. www.autentia.com Yeoman + AngularJS </li> <li> 26. www.autentia.com Yeoman + AngularJS grunt serve </li> <li> 27. www.autentia.com Integrar Cordova 1. Eliminar la directiva ng-app del index.html 2. Aadir el cordova.js al index.html, asegurando que no se ve afectado por la minificacin de scripts 3. En el fichero app.js crear el siguiente script </li> <li> 28. www.autentia.com Integrar Cordova var 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(); }); </li> <li> 29. www.autentia.com Integrar Cordova cordova create cordova-apps com.autentia GDGDemo --link- to=app cd cordova-apps &amp;&amp; cordova platforms add android cordova build android cordova run android </li> <li> 30. www.autentia.com Y Ahora qu? </li> <li> 31. www.autentia.com Ionic bower install ionic#1.0.0-beta.5b --save Es un framework para dar apariencia nativa a nuestras aplicaciones hbridas. Ofrece directivas predefinidas en AngularJS y un conjunto de estilos e iconos muy tiles. </li> <li> 32. www.autentia.com Ionic </li> <li> 33. www.autentia.com Demo Time https://github.com/raguilera82/GDG-demo </li> <li> 34. www.autentia.com </li> <li> 35. www.autentia.com Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos </li> </ul>