Phonegap

2. ¿Qué es?
PhoneGap is an open source solution for building cross-platform
mobile apps with standards-based Web technologies like HTML,
JavaScript, CSS.
¿Páginas web?
Si… que acceden a funciones del dispositivo.
PhoneGap:

3. ¿Cuánto cuesta?
PhoneGap es una implementación de código abierto de estándares
open-source y LIBRES.
Aplicaciones móviles
gratuitas
(freeware)
Aplicaciones
comerciales
(de pago)
Open Source
Combinación de estas licencias

4. Proyecto
Nitobi
Adobe
Apache
Apache Callback Apache Cordova

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

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

7. Pero… y su modelo de negocio
PhoneGap:build
FormaciónSoporte

9. Soporte de PhoneGap:

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

11. Alternativas
appMobi
• Tecnologías web, open source y Cloud Computing
• Plataformas: iOS, Android, Windows, Mac OSX, Linux.
Appcelerator Titanium
• Solución para desarrollar y mantener aplicaciones
móviles.
• Sin necesidad de programación.
• Ciclo de desarrollo de pocos días (o día).
Red Foundry
rhomobile
• Convierte Flash en aplicaciones móviles y juegos.
• Pensado para desarrolladores flash.
Corona
…

12. Limitaciones
MÁS importante que saber usar una herramienta es saber cuándo NO usarla
¿Consumes
recursos gráficos?
(juego,…)
Usa OpenGL
¿Utilizas funciones
del sistema?
Utiliza una
web app.
OJO: en iOS utiliza hardware para tareas del CSS  mayor rendimiento

13. Prototipado
Realizar una aproximación rápida
Luego ajustar entre plataformas
Buen enfoque
• 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)
Recomendable

14. Prototipado (II)
• Evitar copy-paste
• Fácil de leer:
•Facil de extender
•Facil de reutilizar
• Modular and layer approach
Aplicar buenas prácticas de programación:

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

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

17. Almacenamiento persistente
Dos aproximaciones:
Ficheros
Permite la lectura/escritura
Android, iOS, webOs, BB 6.0
NOTA: cada página puede darnos solo un objeto BBDD
Sqlite
cada objeto iun máximo de 5MB! (2 en Android configurable)
Almacenamiento clave/valor
“Persistant storage”

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

19. Rendimiento
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
Aplicación pequeña

20. Rendimiento
Mayor tamaño
Ofuscación/recortar
JavaScript:
Los dispositivos móviles
tienen limitada la
memoria para JavaScript
en el navegador
Si es pequeño, no es
necesario estar
paginando in/out la
memoria del navegador
Por ejemplo: en iOS hay reservado 25KB

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

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

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

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

25. ¿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

26. ¡Se acabó el miedo de compilar aplicaciones móviles para varias plataformas!
Escribe una vez
Compila en la nube
Ejecuta en cualquier dispositivo
https://build.phonegap.com/
Escribe tu app
usando HTML,
CSS y JavaScript
Envía la app a
PhoneGap
Build
Obten la app
lista para
publicar

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

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

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