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