PhoneGap !Qué bueno que viniste¡

794 views

Published on

Transparencias de la charla sobre PhoneGap que se impartió en la UPM Sur. El video de la charla lo puedes encontrar en aquí: https://www.youtube.com/watch?v=WpHaFhrPlfA&list=UUvZ6HKYcDtqtK1SfbIpB97g

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
794
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

PhoneGap !Qué bueno que viniste¡

  1. 1. www.autentia.com PhoneGap ¡Qué bueno que viniste! ¡Qué bueno que viniste! @raguilera82 github.com/raguilera82 raguilera@autentia.com
  2. 2. www.autentia.com ¿Quién soy yo? Consultor Sénior en Autentia. +10 años en este mundillo. Aprendiz permanente, maestro ocasional.
  3. 3. www.autentia.com ¿Dónde trabajo? Gestionamos conocimiento interno públicamente: ● Sin comerciales ● Adictosaltrabajo.com ● < 30 personas ● > 10 años ● > 1.300 tutoriales ● > 24 MM descargas
  4. 4. www.autentia.com ¿Cómo trabajamos?
  5. 5. www.autentia.com Situación Queremos desarrollar una aplicación móvil que se pueda ejecutar en la mayoría de dispositivos. Actualmente las plataformas significativas son: ● Android (86.2 %) -- Java ● IOS (6.7 %) -- Objective-C ● Windows Phone (5.6 %) -- C# ● FirefoxOS (se espera que crezca con el apoyo de Telefónica) -- HTML5, CSS3 y Javascript
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. www.autentia.com API Reference (3.4) File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage Accelerometer Camera Capture Compass Connection Contacts Device Events
  11. 11. 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.
  12. 12. www.autentia.com PhoneGap Build
  13. 13. www.autentia.com PhoneGap Build
  14. 14. www.autentia.com Empezando con PhoneGap Para instalar PhoneGap necesitamos tener instalado Node en nuestra máquina. http://nodejs.org Después ejecutamos en un terminal: sudo npm install -g phonegap sudo npm install -g cordova
  15. 15. 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)
  16. 16. 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.
  17. 17. 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
  18. 18. 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
  19. 19. 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.
  20. 20. 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]
  21. 21. www.autentia.com Construir para FirefoxOS El caso de FirefoxOS es algo especial dado que no tiene binarios basta con ejecutar: cordova prepare Para una específica: cordova prepare firefoxos
  22. 22. 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]
  23. 23. 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){} }
  24. 24. 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, ...
  25. 25. www.autentia.com Buenas prácticas Desarrollar inicialmente para FirefoxOS por su facilidad de debug y la rapidez del simulador. Probar en el resto de plataformas y solucionar diferencias a través de “merges” y “plugins”.
  26. 26. 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.
  27. 27. www.autentia.com
  28. 28. www.autentia.com “Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos”

×