Anfix t&b phone gap

35
tech & beers

Transcript of Anfix t&b phone gap

Page 1: Anfix t&b   phone gap

tech & beers

Page 3: Anfix t&b   phone gap

¿Qué vamos a hacer aquí hoy?● Abrirnos una cerveza :-)

● El porqué● Lo básico: ¿Qué es PhoneGap?● Un poquito de teoría: Cómo funciona.● Tocar mola más :-)

○ Instalación○ Configuración mínima○ Desarrollo de un pequeño ejemplo.

● No me he enterado de nada: Preguntillas y eso... :-)

Page 4: Anfix t&b   phone gap
Page 5: Anfix t&b   phone gap
Page 6: Anfix t&b   phone gap
Page 7: Anfix t&b   phone gap
Page 8: Anfix t&b   phone gap
Page 9: Anfix t&b   phone gap
Page 10: Anfix t&b   phone gap
Page 11: Anfix t&b   phone gap

¿Qué es PhoneGap?

Page 12: Anfix t&b   phone gap
Page 13: Anfix t&b   phone gap
Page 14: Anfix t&b   phone gap
Page 15: Anfix t&b   phone gap
Page 16: Anfix t&b   phone gap
Page 17: Anfix t&b   phone gap

Pero?… Al final es una web…

PUES SÍ Y NO

Page 18: Anfix t&b   phone gap
Page 19: Anfix t&b   phone gap
Page 20: Anfix t&b   phone gap
Page 21: Anfix t&b   phone gap

Cosas a tener en cuenta

Page 22: Anfix t&b   phone gap

El tamaño importa

● Single page-app○ JS para mostrar/ocultar

capas

En BB cada recarga de página fuerza una codificación en Base64 del contenido a mostrar en tiempo de ejecución.

● Los JS siempre ofuscados y minimizados.

La memoria para JS de los navegadores móviles es muy limitada, en el caso de iOS 10Mb.

Page 23: Anfix t&b   phone gap

Buenas practicas

● Controlar el estado de la conexión

○ navigator.network.connection.type

○ Eventos online / offline

○ ¡APPLE lo revisa!

● Utiliza el almacenamiento del dispositivo

○ File API

○ Storage API (clave-valor)

○ SQL Lite

Page 25: Anfix t&b   phone gap
Page 26: Anfix t&b   phone gap

Un poco de práctica..

Page 27: Anfix t&b   phone gap

Instalación

Page 28: Anfix t&b   phone gap
Page 29: Anfix t&b   phone gap

● Descargar

○ https://developer.android.com/sdk

● Descomprimir en:

○ /Applications/Android/

● Configurar PATH y ANDROID_HOME

○ ~/.bash_profile

○ /etc/launchd.conf

● Arrancar el ADT

○ Configurar al menos un emulador

Page 30: Anfix t&b   phone gap

● Descargar○ http://nodejs.org/download/

● Siguiente -> Siguiente -> Siguiente -> Finalizar

Page 31: Anfix t&b   phone gap
Page 32: Anfix t&b   phone gap
Page 33: Anfix t&b   phone gap

DEMO

Page 34: Anfix t&b   phone gap
Page 35: Anfix t&b   phone gap