Usando el App Manager

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.

Archivos adjuntos

Archivo Tamaño Fecha Adjunto por
apps error 2
71860 bytes 2013-10-02 06:22:49 chrisdavidmills
apps panel 2
74638 bytes 2013-10-02 06:23:02 chrisdavidmills
connection status 2
20663 bytes 2013-10-02 06:23:13 chrisdavidmills
debug view 2
111778 bytes 2013-10-02 06:23:28 chrisdavidmills
device tab 2
150533 bytes 2013-10-02 06:23:39 chrisdavidmills
permissions tab 2
139381 bytes 2013-10-02 06:23:50 chrisdavidmills
apps-panel-fx-28
119135 bytes 2013-12-13 14:48:33 wbamberg
toolbox-fx-28
241249 bytes 2013-12-13 14:48:47 wbamberg

Etiquetas y colaboradores del documento

Colaboradores de esta página: StripTM, iAlexSanz, willicab, ivangsosa, mautematico
Última actualización por: ivangsosa,
Ocultar la barra lateral