Desarrollo de Apps con la herramienta Phonegap

9,784 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,784
On SlideShare
0
From Embeds
0
Number of Embeds
1,792
Actions
Shares
0
Downloads
174
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Desarrollo de Apps con la herramienta Phonegap

  1. 1. 02/06/2012
  2. 2. Presentación @jorgepsant http://es.linkedin.com/in/jorgepintado j.pintado89@gmail.com
  3. 3. ¿Qué es?¿Páginas web? Si… que acceden a funciones del dispositivo. PhoneGap: PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.
  4. 4. ¿Cuánto cuesta? PhoneGap es una implementación de código abierto de estándares open-source y LIBRES. Aplicaciones móviles Aplicaciones gratuitas comerciales Open Source (freeware) (de pago) Combinación de estas licencias
  5. 5. Proyecto Nitobi Adobe Apache Apache Callback Apache Cordova
  6. 6. Actividad https://github.com/phonegapVersiones 1.7.0 para descarga (1.8.0rc2) 0.8.0: Apple aprueba las aplicaciones con PhoneGap
  7. 7. Grupos y encuentros Grupos 29 Interesado 900 Países 10 Miembros 4.128 Ciudades 24 http://groups.google.com/group/phonegap
  8. 8. Pero… y su modelo de negocio PhoneGap:build Soporte Formación
  9. 9. Soporte de PhoneGap:
  10. 10. ¿Cómo?Une código nativo con objetos JavaScript, que se visualizan en un navegador
  11. 11. Alternativas Appcelerator Titanium • Tecnologías web, open source y Cloud Computing • Plataformas: iOS, Android, Windows, Mac OSX, Linux. rhomobile appMobi Red Foundry … • Solución para desarrollar y mantener aplicaciones móviles. • Sin necesidad de programación. • Ciclo de desarrollo de pocos días (o día). Corona • Convierte Flash en aplicaciones móviles y juegos. • Pensado para desarrolladores flash.
  12. 12. Limitaciones MÁS importante que saber usar una herramienta es saber cuándo NO usarla ¿Consumes recursos gráficos? Usa OpenGL (juego,…)¿Utilizas funciones Utiliza una del sistema? web app. OJO: en iOS utiliza hardware para tareas del CSS  mayor rendimiento
  13. 13. Prototipado Buen enfoque Realizar una aproximación rápida Luego ajustar entre plataformas Recomendable • Usar porcentajes en el diseño inicialmente, y luego ajustar entre plataformas. • Combinar con <meta name=“viewport”> (indica el tamaño de la pantalla a mostrar)
  14. 14. Prototipado (II)Aplicar buenas prácticas de programación: • Evitar copy-paste • Fácil de leer: •Facil de extender •Facil de reutilizar • Modular and layer approach
  15. 15. ModeloPrototipado (III) PhoneGap•Modelo-Vista-Controlador JavaScript API + Almacenamiento offline Controlador App Vista JavaScript HTML+CSS
  16. 16. OfflinePor su naturaleza, los smartphone no están conectados de forma continua (cobertura, …) MUY IMPORTANTE para una aplicación es manejar esta situación, sobre todo en iOS Apple revisa
  17. 17. Almacenamiento persistente Dos aproximaciones: Sqlite Android, iOS, webOs, BB 6.0 NOTA: cada página puede darnos solo un objeto BBDD cada objeto iun máximo de 5MB! (2 en Android configurable) “Persistant storage” Almacenamiento clave/valorFicheros Permite la lectura/escritura
  18. 18. XUIFramework JavaScript (xuijs.com), pero diseñado para dispositivos móviles EL TAMAÑO IMPORTA (<10KB) Plataformas: • Android • iOS • Symbian • Palm • … ¡y BlackBerry!
  19. 19. Rendimiento Aplicación pequeña Utilizar una página HTML (single page) + JavaScript para show/hide ¡OJO! En BlackBerry cada nueva página fuerza a codificar en base 64 en tiempo de ejecución
  20. 20. Rendimiento Mayor tamaño Ofuscación/recortar JavaScript: Si es pequeño, no es necesario estar Los dispositivos móviles paginando in/out la tienen limitada la memoria del navegador memoria para JavaScript en el navegador Por ejemplo: en iOS hay reservado 25KB
  21. 21. Funcionalidades Accelerometer Device Camera Events Capture File Compass Geolocation Connection Media Contacts Notification Storage http://phonegap.com/about/features
  22. 22. Pasos para iOS1.- Sign up at http://developer.apple.com/iphone2.- Download the latest iPhone SDK and install it.3.- Run make in [phonegap source]/iphone4.- Open up Xcode and click: 4.1.- New project 4.2.- User templates 4.3.- PhoneGap-based Application5.- Start building your app in the www folder. Solo para Mac. VMWare es tu amigo... o enemigo
  23. 23. Pasos para Android1.- Download and install the Android SDK here: http://developer.android.com/sdk/installing.html2.- Run "android" in your terminal.3.- Update all from the weird GUI that launches.4.- Generate a new project (See README): ./droidgap <sdk> <name> <package> <www> <path>5.- Import into Eclipse (optional)
  24. 24. Pasos para Symbian1.- Download Aptana Studio from http://aptana.org2.- File > New > Project...3.- Nokia Web Runtime > Import widget4.- Point to a copy of the www from phonegap/symbian
  25. 25. ¿Algo en común?Repetición de pasos: 1.- SDK 2.- generar un proyecto 3.- compilarPhoneGap-dev, automatiza los procesos de: • Generación de proyectos • Compilar y ejecutar en emulador o dispositivos phonegap --generate path/to/MyFreshApp phonegap --build path/to/MyFreshApp phonegap --report path/to/MyFreshApp phonegap --install https://github.com/brianleroux/phonegap-dev
  26. 26. ¡Se acabó el miedo de compilar aplicaciones móviles para varias plataformas!Escribe una vezCompila en la nubeEjecuta en cualquier dispositivo Escribe tu app Obten la app usando Envía la app a lista para HTML, CSS y PhoneGap Build publicar JavaScript https://build.phonegap.com/
  27. 27. Ejemplosvibración beepnavigator.notification.vibrate(0); navigator.notification.beep(2);Cámaranavigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );Acelerómetronavigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
  28. 28. Plugins Código JavaScript o Java + JavaScript https://github.com/phonegap/phonegap-plugins
  29. 29. Fuente de PhoneGap ¡Vamos a verlo! https://github.com/phonegap/phonegap
  30. 30. Preguntas @jorgepsant 02/06/2012

×