Introducción a phone gap

659 views
510 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a phone gap

  1. 1. Rodrigo Corral – ALM Team Lead & Software Architect rcorral@plainconcepts.com - @r_corral Introducción a PhoneGap/Apache Cordova
  2. 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. 3. Plaformas soportadas
  4. 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. 5. ¿Cómo obtener PhoneGap? npm view phonegap versions npm –g install phonegap@3.3.0-0.19.6
  6. 6. – Permite realizar el ‘scadfolding’ inicial del proyecto – Permite compilar – Permite añadir plugins Línea de comandos de PhoneGap
  7. 7. Línea de comandos de PhoneGap
  8. 8. Crear un proyecto
  9. 9. Compilar para una plaforma
  10. 10. – http://plugins.cordova.io/#/ Usar plugins
  11. 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. 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. 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. 14. Añadamos un poquito de color… ul#DeviceInfo li{ color: red; } Uno poquito de CSS
  15. 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. 16. Desplegar
  17. 17. – El navegador es tu amigo – 80% de la depuración se hace en el navegador – 20% en el dispositivo Depuración
  18. 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. 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. 20. Adobe PhoneGapBuild
  21. 21. Construir en PhoneGap Build desde la línea de comando
  22. 22. Aplicaciones de verdad
  23. 23. Aplicaciones de verdad
  24. 24. Gracias! rcorral@plainconcepts.com @r_corral http://geeks.ms/blogs/rcorral

×