Este guia fornece um rápido tutorial para desenvolver e depurar aplicativos Gaia, incluindo rodar o Gaia dentro do Firefox e do gerenciador de aplicativos do Firefox OS. Este guia assume que você conhece a tecnologia HTML5, tem conhecimentos sobre padrões MVC e um grande interesse no Firefox OS. Ao final, você terá um entendimento básico sobre a estrutura de um aplicativo Gaia e como testar seu trabalho.
O que você precisa?
Há duas opções para criar um ambiente de desenvolvimento Gaia/B2G. Você pode construi o seu próprio, ou pode usar o ambiente de construção virtual FoxBox.
Criando seu próprio ambiente
- Primeiramente você precisa ter o Git instalado. Se você prefere trabalhar em um ambiente visual, você deve considerar instalar o cliente Github (Github para Mac / Github para Windows). O Git é essencial para atualizar o código, promover suas alterações, e ver no que os outros desenvolvedores estão trabalhando.
- Na sequenicia, você precisa clonar o repositório do Mozilla Gaia em seu computador:
https://github.com/mozilla-b2g/gaia. A melhor maneira é criar um fork e clonar este no seu computador local utilizandogit clone https://github.com/<Seu nome de usuário no Github>/gaia.git. Isso pode levar um tempo, pois o repositório é grande: Aproximadamente 700MB. - Depois de ter feito isto, você pode usar o terminal para chegar ao repositório (
cd gaia) e então rodar o comandoDEBUG=1 makepara construir (compilar) e configurar o Gaia corretamente em modo de depuração. Este download XULRunner - pacote em tempo de execução para instalar, atualizar e desinstalar - e usar para executar o procedimento de construção.
Nota: Leia mais detalhes das opções do Make para o Gaia se você quiser saber mais sobre. - Depois que você terminar de configurar seu espaço de trabalho, você precisa instalar Versão Nightly do Firefox.
- Nesta versão de testes, você poderá também escolher a Extensão do Simulador Firefox e a Extensão do Gerenciador de Aplicativos, dependendo do seu ambiente preferido (os dois serão abordados a seguir). a Extensão do Gerenciador de Aplicativos (App Manager) poderá vir pré-instalada na versão diária, mas você terá que instalar o Simulador do Firefox OS, caso não tenha um aparelho real para fazer os testes.
- Você precisara instalar o ADB helper para depurar em um aparelho remoto, AKA, seu smartphone.
- Você deve querer ter um smartphone com o Firefox OS. Ele irá mostrar informações interessantes relacionadas ao tempo de início dos aplicativos, frame rates, etc. Também, uma vez que você tem um OS atual rodando em um aparelho, você será capaz de testar facilmente todas as APIs suportadas pelo aparelho.
Configurando o ambiente virtual FoxBox
FoxBox é um ambiente do Firefox em uma máquina virtual (VM), composto por Vagrant e o Virtualbox. Isto tem muitas vantagens, mas a principal é que faz muitas configurações para você, deixando-o ir direto ao trabalho de desenvolvimento. Para instruções completas, leia o README do FoxBox no repositório do Github.
Agora que você tem o ambiente de trabalho básico configurado, vamos aos aplicativos!
Os aplicativos instalados por padrão no Firefox OS
Os aplicativos HTML5 instalados por padrão fornecidos no código fonte do Gaia são:
- Bluetooth
- Navegador
- Calendário
- Câmera
- Relógio
- Contatos
- Controle de Custos
- Discador
- FL
- FM
- Galeria
- Homescreen
- Teclado
- Music
- PDF.js
- Ringtones
- Busca
- Setringtone
- Configurações
- SMS
- Sistema
- Video
- Papel de Parede
- WAPPush
O primeiro aplicativo executado quando o aparelho inicia é o aplicativo Sistema (System). Este aplicativo é responsável por abrir e gerenciar a tela inicial (Homescreen). A partir da tela inicial (Homescreen) você pode executar outros aplicativos para realizar várias funções. Por exemplo, o Discador (Dialer) é executado pela Tela Inicial quando o usuário clica no ícone do telefone. Este discador pode executar o aplicativo Contatos quando o usuário queira ver a lista de contatos para discar.
Vamos explorar alguns aplicativos
Os aplicativos instalados por padrão estão em uma pasta dentro de gaia/apps/. Cada pasta de aplicativos Gaia contem os seguintes componentes:
- Arquivo
manifest.webapp:Para armazenar metadados sobre o aplicativo. - Diretório
style: Que armazena os arquivos CSS. - Diretório
js: Para armazenar os arquivos JavaScript. - Diretório
locales: Este armazena o texto (em linhas) traduzidos para diferentes linguas. - Um arquivo HTML: Geralmente (mas não se limitando a)
index.html.
Alguns aplicativos também podem ter:
- Diretório
elements: Para armazenar outras pontos de vista em arquivos HTML. - Diretório
test: Para executar testes relacionados ao aplicativo. - Diretório
resources:Contém otros recursos como vídeos, áudios, etc. - Diretório
build.
Importante: Também pode haver alguns arquivos adicionais como LazyLoaders e Motores de Modelagem Customizados e outros utilitários para a execução de um aplicativo no Firefox OS. Você pode notar padrões JavaScript em aplicativos divergentes ou arquivos .js. Lembre-se, estes Aplicativos, incluindo o Sistema Operacional, são open source, o que indica que foram codificados por muitas pessoas. Portanto, os aplicativos são muitas vezes criados de acordo com diferentes padrões de codificação e estilos.
Observação: Este é o layout geral dos aplicativos Gaia. Para que seu aplicativo funciona, é necessário apenas o arquivo manifest.webapp; os demais são opcionais.
Se você tem experiência em desenvolvimento web, você já tem o que precisa para fazer algumas modificações nestes aplicativos. Vamos melhorá-los?
Vamos executar alguns aplicativos
Depois de você ter feito as modificações nestes aplicativos, você pode querer ver as alterações em ação. Você pode executá-los dentro da versão Nightly do Firefox, transferindo diretamente para seu aparelho físico, ou executá-lo através do Gerenciador de Aplicativos do Firefox OS (em um simulador ou um aparelho não real).
Rodando a versão Nightly do Firefox
Para rodar o Gaia e ver os aplicativos no na versão de testes (Nightly), você precisa executar um comando com a seguinte estrutura:
/path/to/firefoxnightly -profile /path/to/B2G/gaia/profile-debug -no-remote
Por exemplo, no Mac OS X, nós executamos o seguinte comando:
/Applications/FirefoxNightly.app/Contents/MacOS/firefox -profile /Users/bob/git/gaia/profile-debug -no-remote
Observação: -no-remote é necessário para impedir a reutilização de uma instancia do Firefox já executando em vez de criar uma nova e rodar o perfil Gaia customizado. profile-debug significa que nós estamos rodando o perfil de depuração do Gaia que configuramos anteriormente com a opção DEBUG=1 no comando make, configurando o ambiente para depuração.
Leva um tempo para iniciar, mas eventualmente você irá terminar com uma instância Gaia, além de diversos controles rodando em uma nova janela do navegador.
Alternativamente, se você quiser rodar um único aplicativo no navegador, uma técnica muito mais rápida e simples seria abrir o arquivo HTML raiz no navegador via file://URL (i.e. abrindo o index.hml no navegador). Você pode então usar a ferramenta Modo responsivo de design (Responsive Design View) para ver como ficará a aparência em telas pequenas e com pouca resolução. É um método útil se você quer fazer algum desenvolvimento/depuração de IU e ter a maioria das vantagens da recarga instantânea. As ferramentas de desenvolvimento do Firefox podem ser útil neste aspecto, como por exemplo para testar otimização de CSS.
Observação: Esta abordagem não irá acessar o hardware do equipamento, então várias funcionalidades não irão funcionar, além de você não conseguir ver o aplicativo iniciando, ver seu ícone na tela inicial e etc. Executar em um aparelho físico é a melhor abordagem de todas, veja abaixo:
Rodando em um aparelho físico
Para enviar seu Gaia modificado para um aparelho físico com o Firefox OS:
- Tenha certeza que você tem o
adbinstalado, ou instale o ADB helper como descrito anteriormente. - Verifique se o seu aparelho está conectado ao seu computador sobre
adbexecutando o comandoadb devicesno terminal. - Execute o comando
make reset-gaiaa partir do seu diretório Gaia para enviar ao seu aparelho viaadb.
Isto pode levar um tempo, mas existe um meio mais rápido e fácil - Usando o Gerenciador de Aplicativos.
Executando através do Gerenciador de Aplicativos (App Manager)
Enquanto seu aparelho estiver executando o Firefox 1.2+, você pode rodar aplicativos modificados a partir do Gerenciador de Aplicativos, como descrito na próxima sessão.
Depurando com o Gerenciador de Aplicativos (App Manager)
Depois que você terminar de modificar os aplicativos (ou criar um próprio), você pode querer depurá-lo.
Para fazer isso, primeiramente precisa fazer o Gerenciador de Aplicativos e seu aparelho físico se comunicarem, ou usar o simulador do Firefox OS, se você não tem um aparelho físico. Isso tudo é explicado em Usando o App Manager.
Agora selecione o aplicativo que você quer depurar - use o aplicativo de controle Add Packaged dentro do Gerenciador de Aplicativos e selecione o diretório do seu aplicativo para depurar. Quando o aplicativo aparecer você terá que pressionar o botão "Início" para instalar no aparelho/simulador e então iniciá-lo. A partir de então, você pode pressionar "Atualizar" para enviar mais atualizacões ao aparelho/simulador, e deprurá-lo utilizando as ferramentas do desenvolvimento da Mozilla diretamente em um aparelho.
Por exemplo, abaixo você pode ver o aplicativo Contacs rodando no Gerenciador de Aplicativos.
Teste outros recursos de depuração, rodando por exemplo alguns comandos no console, ou modificando propriedades CSS.
Contribuindo com o projeto
Uma vez que você está satisfeito com as alterações que você fez no repositório do Gaia, você pode enviar pull requests para o repo no Github. Se você não sabe como fazer isso, leia Using Pull Requests na página de ajuda do Github.
Na prática, seu pull request não tem muita chance de ser aceito pelo time de desenvolvimento do Gaia sem uma prévia discussão e acordo. O primeiro passo seria discutir as ações que você quer fazer com o time de desenvolvimento. Eles podem ser encontrados na lista [email protected] mailing list, ou no canal #gaia do IRC em Mozilla IRC.
Outra ação possível é registrar bugs no sistema Mozilla Bugzilla, usando o formulário Firefox OS project (escolha Gaia — ou um subset apropriado — como componente). Mas antes de tudo, faça uma busca no Bugzilla para verificar se o problema já não foi reportado por alguém. Se não foi, considere os pontos a seguir:
- Se trata-se de um erro óbvio — um bug no real sentido da palavra — então você deve registrá-lo.
- Se o bug for na realidade um pedido de melhoria, então o melhor é discutir na lista de emails ou no IRC.
Nota: Se você não está certo no que trabalhar e apenas gostaria de encontrar bugs relevantes para contribuir, o aplicativo do Josh Matthews Bugs Ahoy é bastante útil.
Perguntas frequentes
As seguintes seções responde algumas das pergutnas mais comuns sobre como depurar aplicativos usando o Gaia no seu desktop.
Nota: Veja o artigo Modificando o Gaia para mais opções do make que podem ser úteis para a depuração do Gaia.
Posso emular dispositivos de alta resolução dentro do navegador Firefox Desktop?
Sim.- Primeiro, use o comando
GAIA_DEV_PIXELS_PER_PX=1.5 DEBUG=1 make
para certificar-se que as imagens aparecerão corretametne em dispositivos qHD e WVGA. - Depois, você pode trocar a densidade do navegador abrindo a página about:config no Firefox e configurar a opção
layout.css.devPixelsPerPxpara1.5. - Por último, você pode usar Visão de design responsivo para 320 x 533 px (que é o equivalente em pixels CSS para dispositivos 480 x 800)