PhoneGap permite crear aplicaciones móviles multiplataforma utilizando tecnologías web estándar como HTML, CSS y JavaScript. Es de código abierto y gratuito. Permite acceder a funciones nativas del dispositivo como la cámara, geolocalización, acelerómetro, etc. a través de una API de JavaScript. Existen alternativas comerciales como Appcelerator o Corona aunque PhoneGap es la más popular y cuenta con una gran comunidad de desarrolladores.

1. 02/06/2012

2. Presentación
@jorgepsant
http://es.linkedin.com/in/jorgepintado
j.pintado89@gmail.com

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. ¿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. Proyecto
Nitobi
Adobe
Apache
Apache Callback Apache Cordova

6. Actividad
https://github.com/phonegap
Versiones
1.7.0 para descarga (1.8.0rc2)
0.8.0: Apple aprueba las aplicaciones con PhoneGap

7. Grupos y encuentros
Grupos 29 Interesado 900 Países 10
Miembros 4.128 Ciudades 24
http://groups.google.com/group/phonegap

8. Pero… y su modelo de negocio
PhoneGap:build
Soporte Formación

10. Soporte de PhoneGap:

11. ¿Cómo?
Une código nativo con objetos JavaScript, que se visualizan en un navegador

12. 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.

13. 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

14. 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)

15. 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

16. Modelo
Prototipado (III)
PhoneGap
•Modelo-Vista-Controlador JavaScript API
+
Almacenamiento
offline
Controlador App Vista
JavaScript HTML+CSS

17. Offline
Por 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

18. 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/valor
Ficheros
Permite la lectura/escritura

19. XUI
Framework JavaScript (xuijs.com), pero diseñado para dispositivos móviles
EL TAMAÑO IMPORTA (<10KB)
Plataformas:
• Android
• iOS
• Symbian
• Palm
• … ¡y BlackBerry!

20. 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

21. 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

22. Funcionalidades
Accelerometer Device
Camera Events
Capture File
Compass Geolocation
Connection Media
Contacts Notification
Storage
http://phonegap.com/about/features

23. Pasos para iOS
1.- Sign up at http://developer.apple.com/iphone
2.- Download the latest iPhone SDK and install it.
3.- Run 'make' in [phonegap source]/iphone
4.- Open up Xcode and click:
4.1.- New project
4.2.- User templates
4.3.- PhoneGap-based Application
5.- Start building your app in the www folder.
Solo para Mac. VMWare es tu amigo... o enemigo

24. Pasos para Android
1.- Download and install the Android SDK here:
http://developer.android.com/sdk/installing.html
2.- 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)

25. Pasos para Symbian
1.- Download Aptana Studio from http://aptana.org
2.- File > New > Project...
3.- Nokia Web Runtime > Import widget
4.- Point to a copy of the www from phonegap/symbian

26. ¿Algo en común?
Repetición de pasos:
1.- SDK
2.- generar un proyecto
3.- compilar
PhoneGap-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

27. ¡Se acabó el miedo de compilar aplicaciones móviles para varias plataformas!
Escribe una vez
Compila en la nube
Ejecuta 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/

28. Ejemplos
vibración beep
navigator.notification.vibrate(0); navigator.notification.beep(2);
Cámara
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
Acelerómetro
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

29. Plugins
Código JavaScript o Java + JavaScript
https://github.com/phonegap/phonegap-plugins

30. Fuente de PhoneGap
¡Vamos a verlo!
https://github.com/phonegap/phonegap

31. Preguntas
@jorgepsant
02/06/2012