Usando el App Manager

This is an archived page. It's not actively maintained.

El App Manager es una nueva herramienta disponible en Firefox para escritorio, que provee una cantidad de 煤tiles herramientas para ayudarte a probar, desarrollar y depurar aplicaciones HTML5 en tel茅fonos Firefox OS y el Simulador de Firefox OS, directamente en tu navegador.

El App Manager se compone de:

  • El Apps panel, que maneja apps locales (aplicaciones cuyo c贸digo fuente est谩 en tu equipo) y apps聽 alojadas externamente, perimiti茅ndote empaquetarlas e instalarlas en tu dispositivo o simulador, y depurarlas usando Toolboxes.
  • El Device panel, que muestra informaci贸n sobre el dispositivo conectado, incluyendo la versi贸n de Firefox OS instalada, los permisos requeridos para usar las APIs en el dispositivo, y las apps instaladas.
  • Toolboxes, que son conjuntos de aplicaciones para el desarrollador (consola web, inspecto, depurador, etc.) que pueden ser conectadas a una aplicaci贸n en ejecuci贸n v铆a el Apps panel para realizar operaciones de depuraci贸n.

Instalaci贸n r谩pida:

Esta seccion esta dise帽ada para conseguir la puesta en funcionamiento lo antes posible; si necesitas mas detalles por favor siga adelante con la secci贸n Configuraci贸n del dispositivo y sistema y continue leyendo desde all铆. Vea tambi茅n la secci贸n Soluci贸n de problemas para obtener ayuda si tiene alg煤n problema.

  1. Aseg煤rate de tener Firefox para escritorio 26+ instalado
  2. Abre el App Manager (en la barra de direcciones, tipea about:app-manager)
  3. Si no tienes un dispositivo real:
    1. Install the Firefox OS Simulator
    2. En la barra inferior del App Manager, haz clic en Start Simulator, despu茅s haz clic en el nombre del simulador instalado, que debe aparecer ah铆.
  4. Si tienes un dispositivo real:
    1. Aseg煤rate que tu dispositivo est谩 corriendo Firefox OS 1.2+
    2. En Opciones de tu dispositivo, desactiva el Bloqueo de pantalla (Opciones > Bloqueo de pantalla) y activa Depuraci贸n remota (Opciones > Informaci贸n del dispositivo > M谩s informaci贸n > Desarrollador)
    3. Instala el ADB Helper como complemento en tu Firefox de escritorio
    4. Conecta tu dispositivo a tu m谩quina v铆a cable USB
    5. El nombre de tu dispositivo deber铆a aparecer en la barra inferior del App Manager. Haz clic en 茅l.
  5. En la barra inferior debe aparecer "Conectar con: xxx"
  6. Haz聽 clic en el panel de Apps y a帽ade una app (empaquetada y hospedada)
  7. El bot贸n Iniciar valida tu app y la instala en el simulador / dispositivo
  8. El bot贸n Depurar conecta las herramientas para desarrolladores con la app arrancada

Configuraci贸n del dispositivo y el sistema

Lo primero que tendr谩 que hacer cuando se utiliza el App Manager es asegurarse de que su sistema y el tel茅fono est谩n configurados correctamente. En esta secci贸n se ejecutar谩n todos los pasos necesarios.

Se requiere Firefox OS 1.2+

Aseg煤rese de que su dispositivo se est谩 ejecutando Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para comprobar qu茅 versi贸n de Firefox OS del dispositivo est谩 funcionando, vaya a Ajustes > Informaci贸n > Software.

Si usted no tiene una versi贸n lo suficientemente alta instalada, dependiendo del tel茅fono que tiene, necesitar谩 ya sea instalar una construcci贸n nocturna disponible de Firefox OS 1.2 superior, o configurar y construir por s铆 mismo desde la fuente.

Construcciones disponibles:

Para construir tu propia distribuci贸n de Firefox OS 1.2+, siga las instrucciones que se encuentran en Building and installing Firefox OS, iniciando con Firefox OS build prerequisites.

Depuraci贸n remota

A continuaci贸n, debe habilitar la depuraci贸n remota en Firefox OS. Para ello, vaya a Ajustes> Informaci贸n> M谩s informaci贸n> Desarrollador y active la casilla de depuraci贸n remota.

ADB o ADB helper

El proceso utiliza el puente de depuraci贸n Android (ADB) para manejar la conexi贸n y comunicaci贸n entre el dispositivo y la computadora. Hay dos opciones para ejecutar ADB:

  • Deje que Firefox controle ADB (recomendado). Instale el complemento ADB Helper, que hace que el proceso sea m谩s f谩cil. Con este complemento, no hay necesidad de instalar el ADB ni de escribir el comando adb de la otra opci贸n, todo es manejado por el complemento.

  • Use ADB manualmente. necesitas tenerlo instalado en tu computadora - descarga e instala adb (Get the Android SDK) como parte del paquete del SDK de Android. debes聽activar el reenv铆o de puerto introduciendo el siguiente comando en el terminal:
    adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
    Ten en cuenta que tendr谩s que hacer esto cada vez que el tel茅fono se reinicie o se desconecte y vuelva a conectarse.

Nota: no es necesario ejecutar este comando si tienes instalado el complemento ADB Helper.

Conectando tu disporitivo al App Manager

Con toda la configuraci贸n hecha, ahora es el momento de conectar el dispositivo a tu ordenador e iniciar el App Manager:

  1. Conecta el dispositivo a tu computadora via USB
  2. Desactiva el bloqueo de pantalla en tu dispositivo, vaya a Ajustes> Pantalla y desmarque la casilla聽Bloquear la pantalla. Esta es una buena idea, porque cuando la pantalla se bloquea, la conexi贸n del tel茅fono se pierde, lo que significa que ya no est谩 disponible para la depuraci贸n.
  3. Inicia el App Manager, en el Navegador Firefox de escritorio seleccione la opci贸n de men煤 Herramientas > Desarrollo web > App Manager, o escriba about:app-manager in la barra de direcciones.
  4. En la parte inferior del App Manager, ver谩s una barra de estado de conexi贸n (vea la imagen de abajo). Usted debe ser capaz de conectar el dispositivo, haga clic en el bot贸n "Connect to localhost: 6000".
  5. Si esto funciona correctamente, un mensaje deber谩 aparecer en el dispositivo: "An incoming request to permit remote debugging connection was detected. Allow connection?". Pulsa el bot贸n OK (Tambi茅n puede que tengas que pulsar el bot贸n de encendido del tel茅fono para que pueda ver el mensaje.) La barra de estado de la conexi贸n debe decir "Connected to B2G", con un bot贸n Desconectar disponible para presionar si quieres cancelar la conexi贸n.

Tenga en cuenta que los otros controles en la barra de estado de la conexi贸n permiten conectar un simulador para el Administrador de la aplicaci贸n, lo que vamos a cubrir en la siguiente secci贸n, a continuaci贸n, y cambiar el puerto que la conexi贸n pasa sucesivamente. Si cambia el puerto, tambi茅n ser谩 necesario que habilite el reenv铆o de puertos para este puerto, as铆, como se indica en la secci贸n ADB o ADB Helper.

Usar el complemento Firefox OS Simulator

Si no tienes un dispositivo real disponible para usar con el App Manager, puedes probarlo utilizando un el complemento Firefox OS Simulator. Para empezar, instala el simulador apropiado para su sistema operativo:

Install Simulator

Una vez que hayas instalado el simulador, tienes que ir a la barra de estado de la conexi贸n en la parte inferior del App Manager, y haga clic en el bot贸n "Start simulator". Aparecer谩n tres botones:

  • "Firefox OS 1.2" ... etc (o algo similar): el bot贸n de m谩s a la izquierda contiene el nombre de la versi贸n del simulador que ha instalado. Haga clic en 茅l para iniciar la conexi贸n al simulador.
  • "Add": el bot贸n central se desplaza al simulador instalar enlaces de este art铆culo, por lo que puede a帽adir m谩s Simuladores (Firefox OS 1.2, Firefox OS 1.3, ...).
  • "Cancel": este bot贸n cancela la conexi贸n.

Panel de aplicaciones

Ahora que todo funciona, vamos a revisar la funcionalidad disponible dentro de la App Manager, empezando por el Panel de aplicaciones. A partir de aqu铆, puede importar una aplicaci贸n existente para instalar en su dispositivo y depurarlo:

  • Para instalar una aplicaci贸n local, haga clic en el signo "+" junto a la etiqueta "Add Packaged App" y use el cuadro de di谩logo de selecci贸n de archivos para seleccionar el directorio donde est谩 contenida la aplicaci贸n.
  • Para instalar una aplicaci贸n alojada externamente, introduzca la URL absoluta del archivo manifest de la aplicaci贸n en el campo de texto dentro de la caja "Add Hosted App", luego presione el bot贸n m谩s.

La informaci贸n sobre su aplicaci贸n debe aparecer en la parte derecha de la ventana, como se ve a continuaci贸n:

Editor del Manifiesto

Desde Firefox 28 en adelante, el panel de aplicaciones incluye un editor para el manifiesto de la aplicaci贸n:

Depuraci贸n

Al hacer clic en "Update" actualizar谩 (o instalar谩) la aplicaci贸n en el dispositivo. Al hacer clic en "debug" se conectar谩 una caja de herramientas de la aplicaci贸n, lo que le permite depurar su c贸digo directamente:

Nota: podr谩s disfrutar jugando con la caja de herramientas - intenta alterar el DOM, CSS, etc y ver谩s los cambios reflejados en el dispositivo en tiempo real. Tales cambios se guardar谩n en el c贸digo de la aplicaci贸n instalada, las ver谩s la pr贸xima vez que abras la aplicaci贸n en el dispositivo.

Antes de Firefox 28, las herramientas se ponen en marcha en una ventana separada. Desde Firefox 28 en adelante, las herramientas se inician en una ficha independiente en la propia App Manager, junto con las aplicaciones y las fichas de dispositivos. La ficha tendr谩 el icono de la aplicaci贸n, as铆 que es f谩cil de encontrar:

Errores

Si una aplicaci贸n no se ha a帽adido con 茅xito - por ejemplo, si la URL es incorrecta, o se ha seleccionado una carpeta aplicaci贸n empaquetada - una entrada se agrega a la p谩gina de esta aplicaci贸n, pero esto va a incluir informaci贸n de errores.

Tambi茅n puedes eliminar una aplicaci贸n desde esta vista, el rat贸n encima del nombre/Descripci贸n de la App en la izquierda de la ventana, y pulsando el bot贸n "X" que aparece en cada caso. Sin embargo, esto no elimina la aplicaci贸n del dispositivo. Para ello es necesario eliminar manualmente la aplicaci贸n utilizando el propio dispositivo.

Panel del Dispositivo

La ficha de dispositivos muestra informaci贸n sobre el dispositivo conectado. Desde la ventana "Aplicaciones instaladas", las aplicaciones en el dispositivo se pueden iniciar y depurar.

Nota: las aplicaciones certificadas no est谩n listadas por defecto. Vea como depurar aplicaciones certificadas.

La ventana "Permissions" muestra los privilegios requeridos por las diferentes Web APIs en el dispositivo actual:

Finalmente, puedes tomar una captura de pantalla del dispositivo haciendo click en el bot贸n "Screenshot". la imagen aparecer谩 en una nueva pesta帽a en Firefox, y desde all铆 podr谩s guardarla o descartarla si es tu elecci贸n.

Depurar aplicaciones certificadas

Actualmente, s贸lo los dispositivos que ejecutan una versi贸n de desarrollo de Firefox OS 1.2 son capaces de depurar aplicaciones certificadas. Si tienes una versi贸n en desarrollo, puede habilitar la depuraci贸n de aplicaciones certificadas por el cambio de las prefe-certificada devtools.debugger.forbid-apps en false en tu perfil. Para ello, siga los pasos a continuaci贸n:

  1. En tu computadora, ingresa el siguiente comando en el terminal para entrar al sistema de archivos de tu dispositivo via consola:

    adb shell

    tu consola debe cambiar a root@android.

  2. A continuaci贸n, detener B2G corriendo el siguiente comando:

    stop b2g
  3. Navega al siguiente directorio:

    cd /data/b2g/mozilla/*.default/
  4. Aqu铆, actualiza el archivo pref.js con la siguiente linea:

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
  5. Despu茅s de que termines de editar y salvar el archivo, inicia B2G usando el siguiente comando:

    start b2g
  6. Sal del sistema de archivos del dispositivo cuando el comando exit; con esto regresar谩s a tu terminal normal.

  7. Ahora reconecta el App Manager y deber铆as poder ver las aplicaciones certificadas para su depuraci贸n.

Nota: Si deseas agregar esta preferencia a tu construcci贸n de Gaia puedes correr el comando聽make DEVICE_DEBUG=1 reset-gaia.

Soluci贸n de problemas

Si el dispositivo no es renonocido:

驴No puedes conectar tu dispositivo al App Manager o iniciar el simulador?聽 H谩ganos saber o abra un bug.