desarrollo de apps con la herramienta phonegap
Post on 24-Apr-2015
9.692 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related