Este documento introduce PhoneGap/Apache Cordova, un framework que permite empaquetar aplicaciones web en aplicaciones nativas. Explica cómo configurar el entorno de desarrollo, obtener PhoneGap, crear proyectos, compilar para diferentes plataformas, usar plugins nativos, y depurar aplicaciones.

1. Rodrigo Corral – ALM Team Lead & Software Architect
rcorral@plainconcepts.com - @r_corral
Introducción a PhoneGap/Apache Cordova

2. – Una serie de recetas de ‘scadfolding’ para crear la estructura de
proyectos
– Una manera de empaquetar HTML, JavaScript y CSS en una aplicación
‘nativa’
– Un conjunto de plugins para acceder a características nativas de los
dispositivos
– Y un sistema para construir plugins de acceso a características nativas
¿Qué es PhoneGap?

3. Plaformas soportadas

4. – Node.js
– SDK
– Otras dependencias, p.e.: Ant y JDK en el caso de Android
– Variables de entorno
– ANDROID_HOME = C:Developmentadt-bundlesdk
– ANT_HOME Value: C:Developmentapache-ant-X.Y.Z
– JAVA_HOME = C:Program FilesJavajdkX.Y.Z_XY
– Variable PATH
– JAVA_HOME%bin;%ANT_HOME%bin;%ANDROID_HOME%platform-
tools;%ANDROID_HOME%tools;
¿Cómo monto el entorno?

5. ¿Cómo obtener PhoneGap?
npm view phonegap versions
npm –g install phonegap@3.3.0-0.19.6

6. – Permite realizar el ‘scadfolding’ inicial del proyecto
– Permite compilar
– Permite añadir plugins
Línea de comandos de PhoneGap

7. Línea de comandos de PhoneGap

8. Crear un proyecto

9. Compilar para una plaforma

10. – http://plugins.cordova.io/#/
Usar plugins

11. – Usa tu editor favorito
– Puedes usar toda la artillería habitual en proyectos Web
– HTML/CCS
– JQuery
– JQuery Mobile
– Angular
– Knockout
– Moment.js
– Shenza
– Etc..
Creando la aplicación

12. – “Todas las abstracciones fugan” –
Joel Spolsky
– Fugas habituales
– Menor rendimiento
– Fragmentación de plataformas
– Fragmentación de navegadores en una
misma plataforma
Pero…

13. onclick: function () {
var $list = $("#DeviceInfo");
$list.empty();
$list.append('<li>' + 'Loading...' + '</li>');
setInterval(function () {
$list.empty();
if (window.device) {
for (var prop in device) {
if (device.hasOwnProperty(prop)) {
$list.append('<li>' + prop + ':' + device[prop] + '</li>');
}
}
}
else {
$list.append('<li>' + 'No disponible' + '</li>');
}
}, 3000);
}
Un poquito de JavaScript

14. Añadamos un poquito de color…
ul#DeviceInfo li{
color: red;
}
Uno poquito de CSS

15. – Emulator manager:
– android avd
– Listar disponsitivos:
– adb devices
– Desplegar y ejecutar
– phonegap run <platform>
– Elegir dispositivo:
– phonegap run android --device=<device_id>
– phonegap run android --emulator
Desplegar

16. Desplegar

17. – El navegador es tu amigo
– 80% de la depuración se hace en el navegador
– 20% en el dispositivo
Depuración

18. – Herramientas de depuración remota en el navegador
– IOS
– Android, a partir de 4.4
– Documentación de depuración
– https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap
Depuración remota en dispositivo

19. 1) En public void onCreate(Bundle savedInstanceState)
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
2) chrome://inspect/#devices
Depuración remota en Android >= 4.4

20. Adobe PhoneGapBuild

21. Construir en PhoneGap Build desde la línea de comando

22. Aplicaciones de verdad

23. Aplicaciones de verdad

24. Gracias!
rcorral@plainconcepts.com
@r_corral
http://geeks.ms/blogs/rcorral