Simulador Firefox OS

O Simulador Firefox OS ainda está no início da sua fase de desenvolvimento, portanto não está tão completo e confiável quanto gostariamos. Se você encontrar algum bug, por favor reporte-o no github. Se você tiver dúvidas, utilize a mailling list dev-developer-tools (em Inglês) ou o canal #devtools em irc.mozilla.org.

O complemento do Simulador Firefox OS é uma ferramenta que permite que sejam feitos testes e depurações de seus aplicativos Firefox OS no seu desktop. O ciclo de desenvolvimento-teste-depuração é muito mais ágil com a ajuda do simulador do que se comparado com um aparelho real, e claro, você não precisa de um aparelho real para utilizá-lo.

Essencialmente, o Simulador é composto por:

Simulador: isso inclui o cliente desktop do Firefox OS, o qual é uma versão das camadas superiores do Firefox OS que roda no seu desktop. O Simulador também inclui alguns recursos adicionais de emulação que não estão nas builds padrões do Firefox OS para desktop.
Dashboard: uma ferramenta acoplada ao navegador Firefox que permite a você iniciar e parar o Simulador, instalar, remover e depurar aplicativos rodando nele. A Dashboard também o ajudará a enviar aplicativos para o aparelho e buscará por problemas comuns que possam ser encontrados nos manifests de aplicativos. A imagem a seguir exibe uma sessão de depuração utilizando o Simulador.

A Dashboard está no cando superior direito, sendo executada dentro de uma aba no Firefox. Nós adicionamos um aplicativo, um pacote chamado "Where am I?". No canto superior esquerdo o aplicativo está sendo executado no Simulador. Nós também conectamos a ferramenta de depuração, a qual pode ser encontrado na parte inferior da imagem. Você pode perceber que a ferramenta de depuração está parada em um breakpoint configurado no aplicativo.

Este guia cobrirá os seguintes tópicos:

Como instalar o complemento Simulador do Firefox OS
Como adicionar, remover e atualiza aplicativos
Validação do arquivo manifesto
Como executar o Simulador
Como conectar as ferramentas de desenvolvedor tal como o depurador JS para aplicativos sendo executados no Simulador.
As limitações do Simulador se comparado a um aparelho celular rodando Firefox OS.

Para um passo-a-passo prático de como depurar um aplicativo web real, visite o passo-a-passo do Simulador.

Instalando o complemento Simulador do Firefox OS

O Simulador é empacotado e distribuido como um complemento para o Firefox. Para instalar o complemento:

Utilizando o Firefox, vá ate página do Simulador.
Clique em "Adicionar ao Firefox".
Uma vez que o complemento tenha sido baixado, você será solicitado para instalá-lo: clique em "Instalar agora".

Devido ao tamanho do complemento, o Firefox pode congelar por alguns segundos enquanto completa a instalação, e um diálogo com a mensagem "Aviso: Script não está respondendo" poderá aparecer. Se isso acontecer, clique em "Continuar" e aguarde o termino da instalação. Este problema está sendo acompanhado no bug 814505.

Uma vez que o complemento tenha sido instalado, o Firefox irá periodicamente buscar por novas versões e o manterá atualizado.

A Dashboard abrirá automaticamente quando você instalar o Simulador, e você poderá reabri-la a qualquer momento indo no menu "Firefox" (ou no menu "Ferramentas" no OS X e Linux), em seguida "Ferramentas do desenvolvedor" e finalmente em "Firefox OS Simulator":

A Dashboard é a ferramenta que você usará para adicionar aplicativos no Simulador. A seguir, como ela se parece:

Adicionando, atualizando e removendo aplicativos

Adicionando aplicativos

Para adicionar um aplicativo empacotado no Simulador, abra a Dashboard, clique em "Add Directory" e selecione o arquivo manifesto do seu aplicativo.

Para adicionar um aplicativo hospedado, insira a URL na caixa de texto onde diz "URL for page or manifest.webapp", então clique em "Add URL". Se URL aponta para um manifesto, então ele será utilizado. Se não, a Dashboard irá gerar um manifesto para a URL: isto é, você pode utilizar qualquer website como um aplicativo apenas inserindo sua URL.

Quando você adiciona um aplicativo, a Dashboard executará uma série de testes no seu arquivo manifesto, buscando por problemas comuns. Veja a seção de Validação do arquivo manifesto para maiores detalhes sobre os testes executados.

A não ser que a validação do manifesto revele algum problema no seu aplicativo, a Dashboard irá executar seu aplicativo no Simulador automaticamente.

Gerenciando os aplicativos

Uma vez que você tenha adicionado um aplicativo, ele irá aparecer na lista de aplicativos instalados:

Cada registro nos dá as seguintes informações do aplicativo:

Nome da aplicação, proveniente do manifesto
Tipo da aplicação, o qual sera um dos valores "Packaged"(empacotado), "Hosted"(hospedado", ou "Generated"(gerado).
Um link para o arquivo manifesto
O resultado da validação do manifesto

Também serão possíveis três ações distintas:

"Remove": remove o aplicativo do Simulador ou da Dashboard. Você pode desfazer essa ação contanto que a aba da Dashboard esteja aberta.
"Update": use esta ação para atualizar o aplicativo no Simulador após ter realizado alteraçõe no mesmo. Esta ação faz com que a Dashboard valide o manifesto novamente. Se você fizer mudanças no seu aplicativo, elas não serão refletidas automaticamente no aplicativo instalado: você precisará clicar em "Update" e então reiniciar o Simulador se ele estiver sendo executado.
"Run": executa o aplicativo no Simulador.

Se você conectou um aparelho Firefox OS ao seu computador, você verá um quarto botão com a ação de "Enviar para aparelho".

Validação do arquivo Manifesto

Quando você fornece um Manifesto, o Gerenciador irá executar alguns testes de validação nele. Ele relata problemas em três categorias diferentes :

Erros no Manifesto: problemas que impedirão a execução do seu aplicativo
Avisos no Manifesto: problemas que podem impedir seu aplicativo de funcionar corretamente
Avisos relativos ao simulador: recursos que o aplicativo faz uso mas que ainda não são suportados pelo Simulador

Ele exibe os problemas encontrados no aplicativo ao clicar no ítem correspondente da lista de aplicativos instalados. Clicando no resumo você poderá encontrar mais detalhes.

Erros no Manifesto

A Dashboard irá relatar as condições a seguir como erros, o que significa que você não será capaz de executar o aplicativo no Simulador sem corrigi-las. São eles:

O Manifesto não inclui o campo obrigatório "Name"
O Manifesto não é um JSON válido
O aplicativo é do típo hosted, mas o campo "type" no Manifesto está como "privileged" ou "certified", os quais só estão disponíveis para aplicativos empacotados (packaged).

A imagem a seguir exibe a tentativa de adicionar um Manifesto sem o campo "name":

Avisos no Manifesto

A Dashboard irá relatar as condições a seguir como avisos:

Ícones ausente
O Ícone é menor que 128 pixels: todos os aplicativos enviados para o Marketplace devem ter ao menos um ícone que é ao menos 128 pixels de tamanho
O campo type não possui um valor conhecido (Web, Privileged, Certified)
O Manifesto solicita uma permissão que não é reconhecida.
O Manifesto solicita uma permissão que é bloqueada.
O Manifesto solicita uma permissão para qual o acesso não pôde ser determinado

Avisos relativos ao simulador

Por fim, o Gerenciador irá emitir avisos para aplicativos que utilizem recursos do Firefox OS ainda não suportados completamente pelo Simulador. São eles:

O campo type é "certified", mas o Simulador ainda não suporta aplicativos certificados
O Manifesto solicita permissão para utilizar uma API que ainda não é suportada pelo Simulador

Como executar o Simulador

Existem duas formas para iniciar o Simulador:

Se você adicionar, atualizar, remover um aplicativo ou clicar no botão "Run" próximo a entrada da aplicação na lista de aplicativos instalados, a Dashboard irá automaticamente executar o aplicativo no Simulador
Se você clicar no botão rotulado como "Stopped" no canto esquerdo da Dashboard, o Simulador irá ser iniciado e você precisará navegar ate o seu aplicativo

De ambas formas, uma vez que o Simulador esteja sendo executado, o botão rotulado como "Stopped" se tornará verde e o rótulo mudará para "Running". Se você deseja parar a execução do Simulador, clique no botão novamente.

O Simulador aparecerá em uma nova janela, dimensionado para simular o tamanho de tela 320x480 pixels, com uma barra de ferramentas na parte inferior que contém alguns recursos extras.

Para simulador eventos de toque você pode clicar com o mouse e arrastar segurando o botão esquerdo. Ao clicar e arrastar da direita para a esquerda na Tela Inicial, você verá os aplicativos nativos, junto com quaisquer aplicativos que você tenha adicionado:

A barra de ferramentas do Simulador

Você verá três botões na barra de ferramentas localizada na parte inferior da janela do Simulador:

Da esquerda para a direita, são eles o Botão Home, o botão que simula a rotação da tela, e o botão de Geolocalização.

O botão Home leva você até a Tela Inicial
O botão que simula a rotação de tela muda a orientação entre modo retrato e modo paisagem. Essa ação disparará o evento deviceorientation
O botão de Geolocalização disparará um diálogo que pedirá acesso a sua localização geográfica, seja utilizando suas cordenadas atuais ou fornecendo coordenadas customizadas: está funcionalidade estará disponivel para seu aplicativo através da API Geolocalização

Habilitando o registro no Console

Se você marcar a caixa "Console" localizada abaixo do botão "Stopped/Running", então o Console de erros irá ser aberto quando você executar o Simulador. Seu aplicativo poderá registrar mensagens no Console fazendo uso do objeto global console.

Conectando as ferramentas de desenvolvedor

Você pode conectar ferramentas de desenvolvedor ao Simulado para ajudar na depuração do seu aplicativo. No momento, só é possivel anexar o Depurador JavaScript e o Web Console, mas estamos trabalhando para dar suporte a mais ferramentas.

Quando o Simulador está em execução outro botão aparecerá a baixo da caixa "Console". Ele está rotulado como "Connect...":

Clique nele, e então você verá uma página parecida com essa:

Clique em "Connect" e você verá outra página, como a abaixo:

Para usar o Depurador JavaScript, selecione a opção "chrome://prosthesis/content/shell.xul" nesta página. Uma vez executado, você precisará achar o script do seu aplicativo na lista de scripts, mas se você abrir seu aplicadivo e então conectar o depurador, o script principal do seu aplicativo estará selecionado por padrão:

Para utilizar o Web Console com seu aplicativo, selecione a opção "Main Process" na janela "Connect to remote device".

Até o presente momento, infelizmente, não existe uma forma de depurar o Web Console e o Depurador JS ao mesmo tempo - Porém, você pode executar duas instâncias das ferramentas de depuração, uma utilizando como alvo o "shell.xul" e a outra o "Main Process".

Enviando aplicativo ao aparelho

Se você possui um aparelho Firefox OS, você pode conectá-lo ao Simulador, e então enviar o aplicativo da Dashboard para o aparelho.

Conectando o aparelho

Para conectar o aparelho ao Simulador, é preciso que você tenha instalado o Android Debug Bridge (adb), mas o complemento do Simulador já inclui o adb para você. Você, entretanto, precisará configurar o aparelho Firefox OS e o seu sistema operacional desktop.

No seu aparelho Firefox OS: acesse o aplicativo Configurações, então Aparelho > Mais Informações > Desenvolvedor. No menu Desenvolvedor, marque a opçao "In the developer menu, check "Depuração Remota".
Configure seu sistema operacional para detectar o aparelho. As intruções para isso são específicas para cada SO e estão detalhadas no terceiro tópico em "Configurando um aparelho para Desenvolvimento" no site de desenvolvimento do Android. O vendor ID para ser utilizado com aparelhos Firefox OS Geeksphone é 05c6.

Enviando aplicativos ao aparelho

Uma vez que você tenha configurado o aparelho, o seu computador, e tenha conectado o aparelho ao computador utilizando a porta USB, uma mensagem "Device connected" aparecerá no canto esquerdo da Dashboard, e uma nova ação nomeada "Push" aparecerá para cada aplicativo na lista de aplicativos instalados:

Clicando em "Push", o aplicativo será instalado no seu aparelho Firefox OS.

Limitações do Simulador

Note que o Simulador do Firefox OS não é uma simulação perfeita.

Limitações de Hardware

A não ser pelo tamanho da tela, o Simulador não imita as condições reais de hardware de um aparelho Firefox OS tais como memória disponível e velocidade da CPU.

Audio/vídeo codecs

Os codecs a seguir dependem de decodificação acelerada por hardware então não são suportados ainda:

MP3
AAC
H.264 (MP4)
WebM

Isso não quer dizer que não seja possível utilizar o Simulador para testar o playback de vídeo em aplicativos e websites como Youtube que dependem desses codecs.

APIs Indisponíveis

Certas APIs que funcionam no aparelho não funcionarão no Simulador, geralmente porque o hardware necessário não está disponível no desktop. Nós implementamos simulações para algumas APIs tais como geolocalização mas iremos adicionar mais em futuros lançamentos. Entretanto, até o presente momento as APIs a seguir não são suportadas. Usá-las poderá causar erros e ou retornar resultados incorretos:

Buscando Ajuda

Se você encontrar algum bug, por favor reporte-o no github. Se você tiver dúvidas, utilize a mailling list dev-developer-tools (em Inglês) ou o canal #devtools em irc.mozilla.org.