www.autentia.com
@raguilera82
github.com/raguilera82
raguilera@autentia.com
www.autentia.com
¿Quién soy yo?
Consultor Sénior en Autentia, me puedes encontrar en
www.adictosaltrabajo.com
+10 años en ...
www.autentia.com
Situación
Android IOS Windows
Phone
FirefoxOS
% Mercado 86,1 % 8,7 % 4,6 % 0,2 %
Lenguajes Java Objective...
www.autentia.com
Problemas
Necesitamos conocer todas las tecnologías: Java,
Objective-C, C#, HTML5, CSS3, Javascript.
El t...
www.autentia.com
1º Solución: Aplicación Web
Creamos una aplicación web que sea ejecutada con el
navegador del dispositivo...
www.autentia.com
2º Solución: Aplicación Híbrida
Son aplicaciones web (HTML5, CSS3 y Javascript) que
acceden a las funcion...
www.autentia.com
3º Solución: PhoneGap / Cordova
Creamos una aplicación híbrida con HTML5, CSS3 y
Javascript y la podemos ...
www.autentia.com
API Reference (3.4)
File
Geolocation
Globalization
InAppBrowser
Media
Notification
Splashscreen
Storage
A...
www.autentia.com
Historia
2008, la empresa Nitobi presenta PhoneGap en el
iPhoneDevCamp.
2011, Adobe compra Nitobi y Phone...
www.autentia.com
Empezando con Cordova
Para instalar Cordova necesitamos tener instalado Node
en nuestra máquina. http://n...
www.autentia.com
Crear primer proyecto
Abrimos un terminal y ejecutamos:
cordova create HolaMundo com.autentia.holamundo “...
www.autentia.com
Estructura del proyecto
merges: para personalizar código.
platforms: contiene cada uno de los proyectos p...
www.autentia.com
Plugins
Es la mejor forma de extender funcionalidad. Existen
muchos plugins listos para ser utilizados (h...
www.autentia.com
Platforms
Es momento de añadir las plataformas que queramos
soportar.
Importante: Nuestra máquina de desa...
www.autentia.com
www
Aquí es donde vamos a desarrollar nuestra aplicación
con HTML5, CSS3 y Javascript.
Podemos utilizar c...
www.autentia.com
Construir la aplicación
Para construir la aplicación para todas las plataformas
dadas de alta:
cordova bu...
www.autentia.com
Construir para FirefoxOS
El caso de FirefoxOS es algo especial dado que no tiene
binarios basta con ejecu...
www.autentia.com
Probar la aplicación
Podemos emular la aplicación en una plataforma
específica:
cordova emulate [ios | an...
www.autentia.com
Desmontando la magia
Se trata de una aplicación híbrida que conecta con las
clases nativas a través de su...
www.autentia.com
Cosas a tener en cuenta
Nos crea proyectos independientes para cada una de las
plataformas dadas de alta ...
www.autentia.com
Buenas prácticas
Desarrollar inicialmente para una plataforma, podría ser
FirefoxOS por su facilidad de d...
www.autentia.com
Buenas prácticas
Siempre personalizar las interfaces a través de la
carpeta “merges”.
Siempre extender la...
www.autentia.com
¿Y Ahora qué?
www.autentia.com
Yeoman + AngularJS
sudo npm install -g yo bower grunt
sudo npm install -g generator-angular
yo angular
www.autentia.com
Yeoman + AngularJS
www.autentia.com
Yeoman + AngularJS
grunt serve
www.autentia.com
Integrar Cordova
1. Eliminar la directiva ng-app del index.html
2. Añadir el cordova.js al index.html, as...
www.autentia.com
Integrar Cordova
var CordovaInit = function() {
if (window.cordova) {
document.addEventListener('devicere...
www.autentia.com
Integrar Cordova
cordova create cordova-apps “com.autentia” “GDGDemo” --link-
to=app
cd cordova-apps && c...
www.autentia.com
¿Y Ahora qué?
www.autentia.com
Ionic
bower install ionic#1.0.0-beta.5b --save
Es un framework para dar apariencia “nativa” a nuestras
ap...
www.autentia.com
Ionic
www.autentia.com
Demo Time
https://github.com/raguilera82/GDG-demo
www.autentia.com
www.autentia.com
“Somos pocos, somos buenos, estamos
motivados y nos gusta lo que hacemos”
Próxima SlideShare
Cargando en…5
×

Charla GDG Madrid: Cordova + AngularJS + Ionic

3.282 visualizaciones

Publicado el

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

Publicado en: Móvil
0 comentarios
5 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
3.282
En SlideShare
0
De insertados
0
Número de insertados
60
Acciones
Compartido
0
Descargas
117
Comentarios
0
Recomendaciones
5
Insertados 0
No insertados

No hay notas en la diapositiva.

Charla GDG Madrid: Cordova + AngularJS + Ionic

  1. 1. www.autentia.com @raguilera82 github.com/raguilera82 raguilera@autentia.com
  2. 2. 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.
  3. 3. www.autentia.com Situación 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 Distribución 25 €/año 80 €/año 14 €/año 0 €
  4. 4. www.autentia.com Problemas Necesitamos 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.
  5. 5. www.autentia.com 1º Solución: Aplicación Web Creamos 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.
  6. 6. www.autentia.com 2º Solución: Aplicación Híbrida 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 aplicación en otra plataforma tenemos que hacer otro desarrollo híbrido específico para esa plataforma.
  7. 7. www.autentia.com 3º Solución: PhoneGap / Cordova Creamos 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.
  8. 8. www.autentia.com API Reference (3.4) File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage Accelerometer Camera Capture Compass Connection Contacts Device Events
  9. 9. www.autentia.com Historia 2008, 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.
  10. 10. www.autentia.com Empezando con Cordova Para instalar Cordova necesitamos tener instalado Node en nuestra máquina. http://nodejs.org Después ejecutamos en un terminal: sudo npm install -g cordova
  11. 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)
  12. 12. www.autentia.com Estructura del proyecto merges: 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.
  13. 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
  14. 14. www.autentia.com Platforms Es 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
  15. 15. www.autentia.com www Aquí 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.
  16. 16. www.autentia.com Construir la aplicación Para construir la aplicación para todas las plataformas dadas de alta: cordova build Para una específica: cordova build [ios | android | wp8]
  17. 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
  18. 18. www.autentia.com Probar la aplicación Podemos emular la aplicación en una plataforma específica: cordova emulate [ios | android] Podemos arrancar en un dispositivo físico: cordova run [ios | android]
  19. 19. www.autentia.com Desmontando la magia Se 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){} }
  20. 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 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, ...
  21. 21. www.autentia.com Buenas prácticas Desarrollar 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”.
  22. 22. www.autentia.com Buenas prácticas Siempre 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.
  23. 23. www.autentia.com ¿Y Ahora qué?
  24. 24. www.autentia.com Yeoman + AngularJS sudo npm install -g yo bower grunt sudo npm install -g generator-angular yo angular
  25. 25. www.autentia.com Yeoman + AngularJS
  26. 26. www.autentia.com Yeoman + AngularJS grunt serve
  27. 27. www.autentia.com Integrar Cordova 1. 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
  28. 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(); });
  29. 29. 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
  30. 30. www.autentia.com ¿Y Ahora qué?
  31. 31. 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.
  32. 32. www.autentia.com Ionic
  33. 33. www.autentia.com Demo Time https://github.com/raguilera82/GDG-demo
  34. 34. www.autentia.com
  35. 35. www.autentia.com “Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos”

×