Programando Windows Phone con Phonegap

27
Programando Windows Phone con Phonegap Mauro Parra-Miranda [email protected] @mauropm

description

La primera version de la conferencia que dare el 22 de Septiembre de 2012 en el http://mobilecamp.mx

Transcript of Programando Windows Phone con Phonegap

Page 1: Programando Windows Phone con Phonegap

Programando Windows Phone con Phonegap

Mauro [email protected]

@mauropm

Page 2: Programando Windows Phone con Phonegap

Agenda● Introducción● Windows Phone● Phonegap● Interacción Phonegap con Windows Phone● Ejemplos● Conclusiones

Page 3: Programando Windows Phone con Phonegap

Introducción● Lo de hoy es la programación de apps móviles● Al ser una nueva tecnología, carecemos de

recursos humanos expertos en el tema.● Pero hay mucha gente que hace web, gracias

al dotcom y post dotcom. ● Phonegap nace como un puente que acerca el

desarrollo de apps móviles a la gente de web.● Phonegap permite crear apps móviles en

diversas plataformas, incluyendo iOS, Android y Windows Phone.

Page 4: Programando Windows Phone con Phonegap

Windows Phone● Microsoft ha ido evolucionando desde diversas

versiones de Windows CE, Windows Mobile y ahora con Window Phone (Mango).

● Microsoft se asoció con Nokia, lo que generó un bella línea llamada Lumia, que cubre las gamas baja, media y alta de telefonía celular.

● Windows Phone tiene la ventaja de no querer imitar ni a iOS (como en su principio Android), sino generar una interfaz fresca, nueva, ligera y limpia.

Page 5: Programando Windows Phone con Phonegap

Windows Phone● Windows Phone sigue evolucionando, el

siguiente paso será Windows 8, en el cual se busca integrar un windows “unificado” entre la computadora personal, la tablet y el móvil.

● Es una evolución interesante porque con Microsoft Azure se podrá mantener el estado de las apps entre diversos devices, ya sea computadora, tablet y móvil.

● Las posiblidades son geniales: poder ver todo tal como esta pasando en todos tus devices, en todos lados

Page 6: Programando Windows Phone con Phonegap

Windows Phone● Existe un parteaguas interesante aqui, porque

existen dos versiones de Windows 8:● Windows 8 – Que contiene el soporte de

compatiblidad hacia atras que muchas compañias buscan (ese viejo wordstar seguirá funcionando).

● Windows 8 RT – Que elimina el soporte de compatiblidad, por lo que es más ligero y estable, y que estará corriendo en devices “ligeros” como tabletas y móviles.

Page 7: Programando Windows Phone con Phonegap

Windows Phone● Jugando a predecir el futuro:

● Todos deberían esta navidad estar programando para Windows Phone, ya sea en modalidad Mango (WP 7.5) o en modalidad Windows 8.

● Windows Phone tiene la ventaja de que es “accesible” economicamente a las masas – Los devices gratis de las compañias de celulares serán Windows Phone, por lo que tendrá un gran alcance.

● Windows Phone ganará el mercado de Android, que es el que mas crece hoy en día.

Page 8: Programando Windows Phone con Phonegap

Phonegap● Phonegap es un wrapper: Te permite crear una

interfaz con el usuario a través de HTML5/CSS, lo que te permite tener efectos agradables, con la programación que ya conoces.

● Una app de phonegap es un conjunto de tecnologías:● Core – Proporciona servicios de UI, a través de

HTML5/CSS● Conectores – Módulos que interactuan con el core,

para proporcionar acceso a las bondades del móvil, tales como GPS, camara, etc.

Page 9: Programando Windows Phone con Phonegap

Phonegap

Page 10: Programando Windows Phone con Phonegap

API común entre plataformasnavigator.cam era.getPicture( onSuccess, onFail );

Blackberry

Diferentes implementaciones:

iOS

Page 11: Programando Windows Phone con Phonegap

Funcionalidades soportadas● Acelerometro● Camara/Captura● Compass● Connection● Contactos● Device● Eventos

● Archivos● GPS● Multimedia● Notificaciones● Storage (key/value,

sql)

Page 12: Programando Windows Phone con Phonegap

Ventajas de Phonegap● La tecnología es abierta – Se desarrolla en la

Apache Foundation.● Existe soporte para varias plataformas – Tiene

soporte para iOS, Android, Windows Phone, Symbian y otros mounstros.

● Existen herramientas que ayudan a la creación de apps móviles, como actualmente podría ser el Adobe Dreamweaver que tiene un plugin para generar apps con phonegap.

Page 13: Programando Windows Phone con Phonegap

Desventajas de Phonegap● El código HTML5/CSS es incluido en la app

que se distribuye. Si tienes acceso al IPA, APK o similar, podrias desempacarlo y literalmente CLONAR la aplicación.

● Compatibilidad del API distinta entre plataformas.

● La aplicación no es exactamente nativa, por lo que tienes una sobrecarga de una Webview completa, que puede ocupar bastante espacio.

● Las apps “no se ven nativas” - esto depende.

Page 14: Programando Windows Phone con Phonegap

Phonegap Builder● Adobe compró a Nitobi hace tiempo, y la razón

de la compra fue una tecnología bellisima llamada “Phonegap Builder”.

● Phonegap builder es un servicio web de compilado de apps. Tu subes tu código fuente al sitio web, y el sitio web compilará tus apps para las plataformas que le indiques, con CERO setup de tu parte.

● Eso se traduce a que puedes generar apps de iOS desde tu máquina windows.

Page 15: Programando Windows Phone con Phonegap

Phonegap Builder● O que, cómo diseñador, no tienes que instalar y

configurar una máquina virtual windows para poder compilar para Blackberry.

● En realidad, es la panacea, te ahorra un mes o mas de configuración o mas para todas las herramientas de programación.

● Puedes hacer deployment directo para muchas de las plataformas desde la misma página del Phonegap builder: perfecto para el testing o incluso para publicar algunas apps en OS que soporten instalaciones OTA.

Page 16: Programando Windows Phone con Phonegap

Phonegap + Windows Phone● El proyecto Cordova implemento el core y los

conectores de Phonegap a la plataforma Windows Phone.

● Puedes ir directamente a google y buscar “cordova phonegap” para bajar el código.

● En tu máquina windows, bajas las herramientas de programación de Windows Phone: ● Visual Studio Express para Windows Phone● Cordova como un plugin● Emulador de Windows Phone

Page 17: Programando Windows Phone con Phonegap

Creando una app nueva

Page 18: Programando Windows Phone con Phonegap

Click en “New project”-> Cordova Starter

Page 19: Programando Windows Phone con Phonegap

Veras algo como esto

Page 20: Programando Windows Phone con Phonegap

Internals

Page 21: Programando Windows Phone con Phonegap

La magía de www● Todo tu código HTML/CSS estará en el

directorio www de la aplicación.● Nota que existe un archivo llamado “cordova-

1.7.0.js” que es el javascript que esta enlazando tu HTML con los “conectores” nativos de cada plataforma.

● Ten cuidado: no todos los conectores funcionan en todas las plataformas, ni todos los conectores podrían funcionar igual. Si quieres darle soporte a múltiples plataformas, tienes que probar en cada una.

Page 22: Programando Windows Phone con Phonegap

WP tutorial● Acelerometro● Notificaciones● Camara● Contactos ● GPS● Archivos● Multimedia

Page 23: Programando Windows Phone con Phonegap

Acelerometro

function watchAccel(){

if(timer == null){

timer = navigator.accelerometer.watchAcceleration(onAccellUpdate,onAccelError,{frequency:50});

}

}

● Se exponen funcionalidades propias del device a través de llamadas de Javascript 'incrustradas' en el código HTML5.

● La magía la hace código nativo.

Page 24: Programando Windows Phone con Phonegap

GPSfunction onDeviceReady()

{

var funk = function(position){

callback(position.coords.latitude, position.coords.longitude);

};

var fail = function(error){

alert("error :: " + error);

}

intervalID = navigator.geolocation.watchPosition(funk,fail);

window.addEventListener("unload",onWindowUnload,false);

}

● Puedes “cargar” código a la ventana actual, reaccionando a eventos del device correctamente (incluso en caso de fallo).

● El acceso al GPS es a través de un módulo nativo que reporta a través de js

Page 25: Programando Windows Phone con Phonegap

Jugando con Phonegap● Phonegap puede usar

bibliotecas varias de JS, por lo que es relativamente sencillo integrarlo con cosas como Sencha y otros.

● ProcessingJS es un sistema de creación de arte multimedia basado en HTML5 y JS.

● Puedes combinar ProcessingJS con Phonegap y terminar con una app altamente interactiva, sin tanto dolor.

● Processingjs.com● Ejemplo:

https://gist.github.com/2731560

Page 26: Programando Windows Phone con Phonegap

Conclusiones● Phonegap es un

framework que nos permite tener acceso a varias plataformas basandonos en el mismo conocimiento común: HTML5, CSS, Javascript.

● Es rápido de desarrollar para los expertos en web.

● Te ayuda a generar apps relativamente sencillas, ilustrativas, informativas; normalmente, no lo usaras para la creación de apps que requieran alto rendimiento.

● Útil para la creación de prototipos.

Page 27: Programando Windows Phone con Phonegap

Preguntas – Gracias - Contacto● Mauro Parra-Miranda● @mauropm● [email protected]● Gracias por escuchar,

y un millón de gracias por preguntar. :-)