02/06/2012

Presentación

http://es.linkedin.com/in/jorgepintado

@jorgepsant

j.pintado89@gmail.com

¿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:

¿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

Proyecto

Nitobi

Adobe

Apache

Apache Callback Apache Cordova

Actividad

https://github.com/phonegap

1.7.0 para descarga (1.8.0rc2)

0.8.0: Apple aprueba las aplicaciones con PhoneGap

Versiones

Grupos y encuentrosGrupos 29 Miembros 4.128

Interesado 900 Ciudades 24

Países 10

http://groups.google.com/group/phonegap

Pero… y su modelo de negocio

PhoneGap:build

FormaciónSoporte

Soporte de PhoneGap:

¿Cómo?

Une código nativo con objetos JavaScript, que se visualizan en un navegador

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

…

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

Prototipado

Realizar una aproximación rápidaLuego 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

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:

Prototipado (III)•Modelo-Vista-Controlador

App

Modelo

VistaControlador

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

Almacenamiento persistente

Dos aproximaciones:

FicherosPermite la lectura/escritura

Android, iOS, webOs, BB 6.0NOTA: 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”

XUI

Framework JavaScript (xuijs.com), pero diseñado para dispositivos móviles

EL TAMAÑO IMPORTA (<10KB)

Plataformas: • Android• iOS• Symbian• Palm• … ¡y BlackBerry!

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

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

Funcionalidades

Accelerometer Camera Capture Compass Connection Contacts

Device Events File Geolocation Media Notification Storage

http://phonegap.com/about/features

Pasos para iOS

1.- Sign up at http://developer.apple.com/iphone2.- Download the latest iPhone SDK and install it. 3.- Run 'make' in [phonegap source]/iphone 4.- Open up Xcode and click:

4.1.- New project4.2.- User templates4.3.- PhoneGap-based Application

5.- Start building your app in the www folder.

Solo para Mac. VMWare es tu amigo... o enemigo

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)

Pasos para Symbian

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

¿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

¡Se acabó el miedo de compilar aplicaciones móviles para varias plataformas!

Escribe una vezCompila en la nubeEjecuta en cualquier dispositivo

https://build.phonegap.com/

Escribe tu app usando HTML, CSS y

JavaScript

Envía la app a Phone

Gap Build

Obten la app lista para

publicar

Ejemplos

vibraciónnavigator.notification.vibrate(0);

beepnavigator.notification.beep(2);

Cámaranavigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

Acelerómetronavigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

Plugins

Código JavaScript o Java + JavaScript

https://github.com/phonegap/phonegap-plugins

Fuente de PhoneGap

https://github.com/phonegap/phonegap

¡Vamos a verlo!

02/06/2012

Preguntas

@jorgepsant