Refactor de apps - CGastrell/phonegap GitHub Wiki

Para probar la utilidad del debugger vamos a utilizar plugins que ya vimos:

org.apache.cordova.device
org.apache.cordova.battery-status
org.apache.cordova.vibration

Y vamos a ver informacion de conectividad con el plugin:

org.apache.cordova.network-information

Referencia: http://docs.phonegap.com/en/edge/cordova_connection_connection.md.html

Crear proyecto

Creamos un proyecto nuevo prueba14 clonando templates\jqm, el cual ya tiene incluido jQuery y jQuery Mobile (los necesitaremos mas adelante):

phonegap create prueba14 --id com.coderhouse.prueba14 --name "00 Prueba 14" -src templates\jqm
cd prueba 14
phonegap plugin add org.apache.cordova.device
phonegap plugin add org.apache.cordova.vibration
phonegap plugin add org.apache.cordova.network-information

Como la idea es revisar informacion desde la consola, solo vamos a agregar un llamado a console.log() y luego usaremos la consola para inspeccionar y ejecutar comandos.

Debugger

Corremos el debugger:

weinre --boundHost -all-

Script

Incluimos el script en el archivo index.html:

<script src="http://DIRECCION_IP:8080/target/target-script-min.js#anonymous"></script>

Pruebas

Correr el proyecto

phonegap run android

Usar el navegador para ver la interfaz de weinre: http://localhost:8080/client/#anonymous

Inspeccion

Lo primero que podemos hacer con una consola de debugger es inspeccionar valores. Sabemos que el plugin device genera una variable global device, asi que en la consola podemos escribir:

device

y podremos inspeccionar esa variable.

Network Information

El plugin network-information deja definida la variable navigator.connection.type, y esta sera un valor de texto. Al mismo tiempo el plugin deja definidas variables con todos los estados posibles. Este es un listado de las variables y su valor:

Connection.CELL: "cellular"
Connection.CELL_2G: "2g"
Connection.CELL_3G: "3g"
Connection.CELL_4G: "4g"
Connection.ETHERNET: "ethernet"
Connection.NONE: "none"
Connection.UNKNOWN: "unknown"
Connection.WIFI: "wifi"

Estas variables son para comodidad en el codigo. Usando las 2 variables nos permite ejecutar esto en la consola:

if(navigator.connection.type == Connection.WIFI) console.log('Tengo WIFI!')

O simplemente verificar la conexion que tenemos:

navigator.connection.type;

Recordar: mientras estamos en la consola, si escribimos el nombre de una variable o ejecutamos una funcion que devuelve algo, el valor de la variable o el valor devuelto por la funcion se mostrara en la consola.

Ejecutar comandos

El plugin vibration define una funcion navigator.vibrate() la cual podemos ejecutar desde consola.

navigator.vibrate(500);
navigator.vibrate([200,500,200,500,200]);

Conclusion

Desde la consola podemos ahorrar mucho tiempo y al mismo tiempo investigar distintas funcionalidades. Podemos verificar el valor de variables y ejecutar funciones sin necesidad de tener que agregar botones a la interfaz o tener que valernos de alert() o HTML para poder visualizar valores.

Veremos mejor como aprovechar estas ventajas instalando el plugin Media