COMO VERIFICAR EL CORRECTO FUNCIONAMIENTO DE UNA APLICACIÓN EN PHONEGAP PROF. RICARDO GONZÁLEZ

Transcripción

1 Escuela de ciencias Exactas e Ingeniería COMO VERIFICAR EL CORRECTO FUNCIONAMIENTO DE UNA APLICACIÓN EN PHONEGAP PROF. RICARDO GONZÁLEZ

2 VERIFICANDO EL FUNCIONAMIENTO DE UNA APLICACION Cargue la aplicación en el equipo Móvil y ejecútela. Eso se puede hacer usando: Phonegap o PhoneGap serve Usando el dispositivo móvil como interfaz Usando un navegador build.phonegap.com Usando el dispositivo móvil como interfaz Usando un navegador

3 VERIFICANDO EL FUNCIONAMIENTO DE UNA APLICACIÓN Usando phonegap serve Abra una pantalla de línea de comando de Node.js. Ubíquese en el directorio donde se creo la aplicación phonegap Invoque el comando phonegap serve Cargue en el dispositivo Móvil la aplicación Phonegap y Acceda a la aplicación usando la dirección IP y el puerto que la aplicación que el comando phonegap serve muestra por pantalla en el PC. Si todo va según lo esperado, la aplicación hace lo que debe hacer, no hay problema.

4 VERIFICANDO EL FUNCIONAMIENTO DE UNA APLICACIÓN Usando build.phonegap.com Cree la aplicación localmente en su computador Modifique el archivo index.htm para colocar la aplicación que desea emplear Genere un archivo.zip con todos los archivos de la carpeta del proyecto generado Cargue el archivo zip en la dirección build.phonegap.com Espere a que la aplicación se compile para la plataforma seleccionada Descargue la aplicación escaneando el código QR que muestra el build.phonegap.com una vez que la aplicación ha sido compilada y generada. Si todo va según lo esperado, la aplicación hace lo que debe hacer, no hay problema.

5 VERIFICANDO EL FUNCIONAMIENTO DE UNA APLICACIÓN Usando phonegap serve Emplee una ventana de un navegador y conéctese a la dirección IP y puerto que le indica el phonegap serve Aquí emulará algunas de las funciones del equipo móvil, pero esto puede tener algunos problemas con el acceso a los sensores.

6 En ocasiones, su aplicación Cordova tendrá algunas diferencias visuales entre lo que puede mostrar Chrome en su escritorio y su teléfono Android. Este tipo de detalles visuales son bastante difícil de solucionar, ya que tienes que volver a compilar la aplicación y copiarla en el teléfono cada vez que realice un cambio. Pero hay una solución a este problema: la impresionante herramienta de depuración Chrome Webview! También puede utilizar esta herramienta para depurar de forma remota el paso de código JavaScript a paso!

7 En ocasiones, su aplicación Cordova tendrá algunas diferencias visuales entre lo que puede mostrar Chrome en su escritorio y su teléfono Android.

8 Para poder ver adecuadamente en el navegador con la características de un equipo móvil 8

9 9

10 10

11 OPCIONES PARA LA DEPURACION DE CÓDIGO EN PHONEGAP 1. Codificar y probar en el navegador del equipo de escritorio. Esto funcionara sin problemas para operaciones que no requieran de acceder a los recursos nativos especificos del equipo móvil, en otras palabras que no requieran de los plugins de Phonegap

12 OPCIONES PARA LA DEPURACION DE CÓDIGO EN PHONEGAP 2. Correr los programas en el dispositivo móvil y hacer el proceso de depuración o debug en el equipo de escritorio.

13 Requerimientos mínimos Esta opción de depuración es bastante nueva. Por lo que su aplicación debe estar en: Cordova 3.3 o superior, El teléfono debe utilizar Android 4.4 o superior Como navegador debe tener Chrome 30+.

14 Depuración USB Para ser capaz de depurar su dispositivo Android con el ordenador, primero debe activar la opción de depuración USB en sus parámetros del dispositivo. Esta opción se encuentra en las Opciones de desarrollador, que está oculta por defecto. Para hacerla visible, se le tiene que tocar 7 veces en el número de compilación

15 Para hacerla visible, se le tiene que tocar 7 veces en el número de compilación. El detalle es que el número de compilación no está en el mismo lugar para todos los teléfonos. Depende del constructor. Aquí es un buen artículo para ayudar a localizar el número de compilación en el teléfono:

16 Si ya está, active la opción para verificar, para ello puede ir a: En un Nexus 5, ir a la opción de Settings > About phone. En un Samsung S4, ir a la opción de Settings > More.

17 Ahora que las opciones de desarrollador está disponible. Active la opción de depuración USB.

18 Inspect Chrome Android Ahora contamos con la capacidad de depurar de forma remota nuestra webview (vista web) Cordova con Chrome. Contando con lo mejor de los dos mundos, un dispositivo móvil para probar los detalles de implementación y API específicos y un ambiente web mas grande para hacer el debugging de la aplicación En Chrome, vaya a Settings > More Tools > Inspect Devices. para llegar a la pestaña inspeccionar. EDIT: Si esta opción ya no está disponible en el menú de Configuraciones. Intente navegar manualmente a chrome://inspect para llegar a la pestaña inspeccionar.

19

20

21

22 Se pueden usar diferentes métodos para que salgan mensaje o banderas en la pantalla del equipo móvil O en la consola de Debug de un navegador console.log (log(), warn() y error()). alert(mensaje) console.log("texto de prueba") Para que funcionen debn estar dentro de tags <script> </script> ejemplo: <script> alert( Mensaje en ventana emergente ) </script>

23 Se pueden usar break point en la consola de Chrome Se pueden definir banderas que salgan en la interfaz del dispositivo móvil o en la consola de Chrome.

24 PREGUNTAS 24

25 MATERIAL CONSULTADO Para preparar estas laminas se ha usado el siguiente material: Mitch. APACHE CORDOVA AND REMOTE DEBUGGING ON ANDROID