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

1. Programando Windows
Phone con Phonegap
Mauro Parra-Miranda
mauropm@gmail.com
@mauropm

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

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

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

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

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

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

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

9. Phonegap

10. API común entre plataformas
navi or. era. Pi ure( onSuccess,onFai )
gat cam get ct l;
Diferentes implementaciones:
Blackberry iOS

11. Funcionalidades soportadas
● Acelerometro ● Archivos
● Camara/Captura ● GPS
● Compass ● Multimedia
● Connection ● Notificaciones
● Contactos ● Storage (key/value,
● Device sql)
● Eventos

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

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

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

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

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

17. Creando una app nueva

18. Click en “New project”-> Cordova
Starter

19. Veras algo como esto

20. Internals

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

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

23. Acelerometro
function watchAccel(){ ● Se exponen
if(timer == null){ funcionalidades
timer = propias del device a
navigator.accelerometer. través de llamadas de
watchAcceleration(onAcce Javascript
llUpdate,onAccelError, 'incrustradas' en el
{frequency:50}); código HTML5.
} ● La magía la hace
} código nativo.

24. GPS
function onDeviceReady()
{
● Puedes “cargar”
var funk = function(position){
código a la ventana
callback(position.coords.latitude, actual, reaccionando
position.coords.longitude);
};
a eventos del device
var fail = function(error){
correctamente
alert("error :: " + error); (incluso en caso de
} fallo).
intervalID =
navigator.geolocation.watchPosition(funk,fail
);
● El acceso al GPS es
window.addEventListener("unload",onWindowUnlo
a través de un
ad,false);
módulo nativo que
}
reporta a través de js

25. Jugando con Phonegap
● Phonegap puede usar ● Puedes combinar
bibliotecas varias de ProcessingJS con
JS, por lo que es Phonegap y terminar
relativamente sencillo con una app
integrarlo con cosas altamente interactiva,
como Sencha y otros. sin tanto dolor.
● ProcessingJS es un ● Processingjs.com
sistema de creación ● Ejemplo:
de arte multimedia https://gist.github.com/273
basado en HTML5 y 1560
JS.

26. Conclusiones
● Phonegap es un ● Te ayuda a generar
framework que nos apps relativamente
permite tener acceso sencillas, ilustrativas,
a varias plataformas informativas;
basandonos en el normalmente, no lo
mismo conocimiento usaras para la
común: HTML5, CSS, creación de apps que
Javascript. requieran alto
● Es rápido de rendimiento.
desarrollar para los ● Útil para la creación
expertos en web. de prototipos.

27. Preguntas – Gracias - Contacto
● Mauro Parra-Miranda
● @mauropm
● mauropm@gmail.com
● Gracias por escuchar,
y un millón de
gracias por
preguntar. :-)