Usando o App Manager

O App Manager é composto por:

• O Apps panel, que gerencia apps locais (código-fonte da app localizada no seu computador) e apps hospedadas exeternamente, permite você criar pacotes e instalar no seu dispositivo ou no simulador e depois depure seu aplicativo utilizando o Toolboxes
• O Device panel, que exibe informações sobre o dispositivo conectado, como a versão do Firefox OS instalado, permissões necessárias para utilizar as APIs no dispositivo, e as apps instaldas no dispositivoƒ
• Toolboxes, que é conjunto de ferramentas para o desenvolvedor (web console, inspector, debugger, etc.) que pode ser conectado a uma app em execução utilizando o App panel com a finalizadade de depurar seu App

Quick setup

Está seção é designada para que você consiga executar o mais rápido possível seus apps; Se você precisa de mais algum detalhe, por favor acesse a seção Device and system configuration e comece a leitura.  Se você estiver com problemas tem a seção Troubleshooting para te ajudar.

1. Certifique-se se você esta com o Firefox Desktop 26+ instalado
2. Abra o App Manager (na barra de URL, tipo about:app-manager)
3. Se você não tem um dispositivo:
   1. Instale o Firefox OS Simulator
   2. Dentro do App Manager's no toolbar, click em Start Simulator, depois click no nome do simulador instalado.
4. Se você tem um dispositivo:
   1. Certifique-se que o seu dispositivo está rotando com o Firefox OS 1.2+
   2. Dentro de Settings do seu dispositivo, desabilite o Screen Lock (Settings > Phone Lock > Lock Screen) e habilite o Remote Debugging (Settings > Device information > More information > Developer)
   3. Instale o add-on ADB Helper no seu navegador Firefox Desktop
   4. Conecte seu dispositivo no seu computador pelo cabo USB
   5. Você deverá ver o nome de seu dispositivo na barra inferior dentro do App Manager's. Click no nome do seu dispositivo
5. Na barra inferior deve mostrar "Connected to: xxx"
6. Click em Apps panel e adicione uma app (app local ou hospedada)
7. O botão Refresh valida sua app e instala no Simulador ou Dispositivo
8. O botão Debug conecta o developer tools no app em execução

Configuração do sistema e do dispositivo

A primeira coisa que você vai precisa fazer quando usar o App Manager é certificar-se que o sistema do seu dispositivo esta configurado corretamente. Está seção vai mostrar todos os passos que devemos executar.

Requer Firefox OS 1.2+

Certifique-se que seu dispositivo esta com o Firefox OS 1.2/Boot2Gecko 1.2 ou maior instalado. Para chegar qual é a versão do Firefox OS que está rodando em seu dispositivo, entre em Settings > Device Information > Software.

Se você não está com essa versão do Firefox OS instalada, dependendo do seu dispositivo, você terá que instalar o nightly build do Firefox 1.2+, ou configurar de forma manual o build.

Builds disponíveis:

• Geeksphone Keon/Peak builds (para saber mais como usar, leia Atualizando e aprimorando o seu Firefox OS Developer Preview phone/Geeksphone)
• Mais a seguir

Para o build da sua própria distribuição do Firefox OS+, seguir as instruções localizada no Buildando e instalando o Firefox OS, inicie com starting with Pré-requisitos para build do Firefox OS.

Depurando remotamente

Para depurar remotamente, você precisar abilitar o remote debugging no Firefox OS. Basta ir em Settings > Device information > More information > Developer e deixar chegado a opção Remote Debugging.

ADB ou ADB helper

O processo para usar o Android Debug Bridge (ADB) para conectar o dispositivo a sua máquina. Temos duas opção para rodar o ADB:

• Executar o ADB no navegador Firefox (recomendada). Instalar o ADB Helper como add-on do Firefox, este é o processo mais fácil. Instalando o Add-on, não tem necessidade de instalar o ADB, e não tem a necessidade de digitar o comando  adb forward command: tudo é manipulado pelo add-on.

  Download do Add-on ADB Helper
• Utilizando o ADB manual. Você precisa ter instalado no seu computador o Andorid SDK (ver o Pegar o Android SDK), pois o adb  é uma parte do pacote do Android SDK. Você precisa abilitar e direcionar o adb para uma porta, sendo assim, abra o terminal e digite o seguinte comand:

  adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

  Você vai precisar executar este comando toda vez que o dispositivo for desligado ou reniciado.

Conectando seu dispositivo utilizando o App Manager

Quando finalizar todas as configurações, você está pronto para ligar seu dispositivo no computador e iniciar o App Manager:

1. Conecte o dispositivo em seu computador utilizando o USB.
2. Desabilite o bloqueio de tela , entrando em Settings > Phone Lock desabilite a opção Lock Screen. Está é uma ótima opção, pois quando a tela fica bloqueada, o dispositivo perde a conexão com o computador, ou seja, não o dispositivo não fica disponível para depurar.
3. Inicie o App Manager — Dentro Firefox Desktop no menu de opções, click em Tools > Web Developer > App Manager , ou digite about:app-manager na barra de URL.
4. Na parte inferior do App Manager, você vai visualizar o status de conexão (veja o screenshot abaixo). Você poderá conectar o dispositivo clicando no botão "Connect to localhost:6000".
5. Se o passo anterior funcionou com sucesso, no prompt deverá aparecer o seu dispositivo: "An incoming request to permit remote debugging connection was detected. Allow connection?". Aperte o botão OK (Você também pode ter que precionar o botão de bloqueio/desligar/ligar para que você possa ver o prompt.) A barra de status da conexão deverá atualizar e aparecer "Connected to B2G", com o botão Disconnect abilitado, para ser precionado quando você quiser cancelar a conexão.

Utilizando o Add-on Firefox OS Simulator

Se você não tem um dispositivo real para utilizar com o App Manager, você ainda pode usar o Add-on Firefox OS Simulator. Para iniciar, instale o simulador mais apropriado ao seu sistema operacional:

Instalar Simulador

Uma vez que você instalou o simulador, você só precisa ir até a barra de status da conexão dentro do App Manager e clicar no botão "Start simulator". Aparecerá três botôes:

• "Firefox OS 1.3", "Firefox OS 1.2" ... etc (ou algo similar): Só clicar em um simulador, por exemplo o FIrefox OS 1.2 que será aberto uma janela com o simulador clickado.
• "Add": o botão central navega nos links de instalação do simulador, dessa forma você pode adicionar mais simuladores (Firefox OS 1.3, Firefox OS 1.4, etc).
• "Cancel": este botão tem a função de cancelar a conexão.

Note: O simulador Firefox OS 1.5 foi removido e substituído pelo 2.0. Se você possui o Simulador Firefox OS 1.5 instalado, ele não será atualizado pelo 2.0 automaticamente, você deve desinstalar o 1.5 e instalar o 2.0. O Simulador Firefox OS 2.0 será atualizado automaticamente.

Executando compilações customizadas no App Manager

Você pode executar compilações customizadas do B2G Desktop e Gaia/Gecko no App Manager via simulador. Consulte Executando compilações do Firefox OS ou do Gaia no App Manager para saber como fazer isso.

Apps panel

Agora que tudo está funcionando, vamos rever as funcionalidades disponíveis do App Manager, vamos começar pelo Apps Panel. Com ele, você pode importar um aplicativo local ou externo para seu dispositivo ou simulador e depurar:

• Pra instalar um app local, click em  "Add Packaged App", depois localize onde fica seu app local.
• Para instalar um app externo, entre com a URL absoluta de onde esta hospedado o arquivo de manifest da app e precione o botão com sinhal de  mais(+).

Informações sobre o seu app deve apararever do lado direitro na janela, conforme você pode ver abaixo:

Click em "Update" para autlizar (instalar) a app no dispositivo. Click em "debug", com isso vai abrir o inspect nativo do navegador Firefox, com isso você pode depurar o seu código:

Se uma app não for instalada com sucesso, por exemplo, se a URL for incorreta, ou você selecionou um pasta local incorreta. Uma entrada de um novo app será criada, mais com um alerta de erro.

Você também pode apagar um app nesta mesma janela, passe o mouse sobre uma das App's listadas do lado esquerdo da janela, vai aparecer um botão com label "X", para apagar basta clickar neste botão. Porém o app só será apagado desta lista, ou seja, caso queira apagar no dispositivo ou simulador, você precisar deletar de forma manual entrando no app ou no simulador.

Painel Device

A aba Device exibe informações sobre o dispositivo conectado.  Na janela "Installed Apps", mostra uma lista de dos apps isntalados no dispositivo e que podem ser iniciados e depurados.

A janela "Permissions" lista os privilégios necessários para o uso das Web APIs no dispositivo:

Finalmente , você pode ter um screenshot da tela do seu dispositivo, clicando no botão "Screenshot". O screenshot aparece em uma nova aba do Firefox, onde você pode discartar ou informar o caminho onde quer salvar o screenshot.

Depurando Aplicativos Certificados

Atualmente apenas dispositivos que tem o Firefox OS 1.2+ são capazes de depurar os Apps que são Certificados. Se você tiver uma versão de desenvolvedor, você pode liberar para depurar os apps com certificação, basta alterar a pref devtools.debugger.forbid-certified-apps para false no seu perfil. Para fazer isto, siga os passos abaixp:

1. Em seu computador, digite o seguinte comando no Terminal/console enter the following command in Terminal/console, para entrar nos arquivos do sistema via shell:

   adb shell

   O seu prompt deve mudar para root@android.

2. Em seguida, para parara o B2G execute o comando abaixo:

   stop b2g

3. Navegue para o seguinte diretório:

   cd /data/b2g/mozilla/*.default/

4. Agora, atualize o arquivo prefs.js com a seguinte linha:

   echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js

5. Depois que você terminar de editar e salvar o arquivo, inicie o B2G com o seguinte comando:

   start b2g

6. Execute o comando exit; Para retornar ao seu prompt normal.

7. Em seguita, retorne para o App Manager e você verá os apps certificados disponíveis para depurar.

Soluções de problemas

Se o dispositivo não for reconhecido:

• Se ao clicar no botão correspondente ao seu telefone Firefox OS não acontecer nada, certifique-se de não haver nenhum telefone Android conectado ao seu computador ao mesmo tempo.
• Leia a seção Dispositivos e configurações do sistema, e certifique-se que todos os passos foram seguidos:
• O seu dispositivo está com o Firefox OS 1.2?
• Não vê todos os aplicativos? Você precisa habilitar Depurando aplicativos certificados?
• Você ativou a "Remote Debugging" na configurações do seu dispositivo?
• Se você não está utilizando o Add-on ADB Helper:
  • Você executou com sucesso o comando adb forward?
• Se você está utilizando o Add-on ADB Helper e o seu dispositivo não está sendo listado na barra inferior:
  • Se você estiver utilizando Linux, certifique-se de configurar corretamente o udev
  • Se você esta utilizando o Windows, certifique-se de instalar os drivers apropriados
• Você também pode habilitar o registro verbose para capturar diagnósticos:
  • Use about:config para configurar as preferências "[email protected].console.logLevel" para o valor em string "all"
  • Desabilite e reabilite o add-on ADB Helper no gerenciador de add-ons, ou reinicie o Firefox
  • Abra o App Manager novamente
  • No Console do navegador, você deve ver linhas adicionais de saída que mencionam "adbhelper"
  • Se você as vê mas não sabe exatamente o que significam, visite o canal #devtools no IRC ou registre um bug com a saída do log
• Você vê "???????" ao invés do nome do dispositivo no Linux? Você tem problemas de permissionamento. Certifique-se de configurar o udev corretamente.
• A tela do seu dispositivo está desbloqueada?
• Se o comando "adb devices" não mostra o dispositivo mesmo com o telefone conectado e desbloquado, você deve editar o arquivo adb_usb.ini.

Não é possível conectar o seu dispositivo no App Manager ou iniciar o seu simulador?  Fale conosco ou registre um bug.