O desenvolvimento de aplicativos para Firefox OS é muito fácil. Você só precisa criar páginas em HTML, CSS e JavaScript, como se você estivesse desenvolvendo um site. Você pode usar até o Bloco de Notas para o desenvolvimento se quiser. Outro detalhe interessante é que o simulador é um complemento de navegador (Mozilla Firefox).
Primeiramente, seu computador deve atender a esses requisitos:
- Ter o navegador Mozilla Firefox instalado.
- Instalar o Firefox OS Simulator.
Instalando o simulador
Para instalar o Firefox OS Simulator, clique no botão “Abrir Menu”, no canto da tela > Desenvolvedores > App Manager.
Na página App Manager, clique em “Iniciar Simulador”. Ele dirá que não tem nenhum simulador instalado. Clique em “Instalar o Simulador”.
Você será redirecionado para a página de download do simulador. Clique em “Install Simulator”.
Aqui você pode escolher entre instalar a versão 1.3(estável), 1.4(beta) ou 2.0(instável). É recomendado instalar a versão 1.3.
Tendo clicado para instalar o simulador, aparecerá uma janela dizendo que o Firefox impediu o site de oferecer a instalação de extensões e temas no seu computador. Clique em “Permitir”. Espere a conclusão do download.
Desenvolvendo o aplicativo
Como foi dito no início desse tutorial, desenvolver para Firefox OS é como desenvolver páginas para um site. Você pode usar programas como o Dreamweaver, Netbeans, ou simplesmente o Bloco de Notas.
Vamos criar um aplicativo básico como exemplo de navegação entre páginas.
Crie uma pasta chamada “Meu aplicativo”, crie as seguintes páginas e copie o código para elas:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <title></title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <div id="topo">Meu aplicativo</div> <div id="conteudo"> <a href="pagina_01.html">Página 01</a><br> <a href="pagina_02.html">Página 02</a><br> <a href="pagina_03.html">Página 03</a> </div> </body> </html> |
estilos.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
body{ background-color: #F0FFFF; } #topo{ width: 100%; margin: auto; font-size: 28px; font-weight: bold; margin-bottom: 40px; } #conteudo{ width: 100%; margin: auto; } #conteudo a{ color: blue; text-decoration : none; } #voltar{ font-size: 15px; width: 95%; margin: auto; position: absolute; bottom: 0px; text-align: right; } |
pagina_01.html
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title></title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <div id="topo">Página 01<div> <div id="voltar"><a href="index.html">Voltar</a></div> </body> </html> |
pagina_02.html
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title></title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <div id="topo">Página 02<div> <div id="voltar"><a href="index.html">Voltar</a></div> </body> </html> |
pagina_03.html
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title></title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <div id="topo">Página 03<div> <div id="voltar"><a href="index.html">Voltar</a></div> </body> </html> |
As páginas estão prontas, agora falta o manifesto.
Manifesto do aplicativo
Você deve criar um documento de texto com as informações do seu aplicativo e salvá-lo na pasta dele com o nome de manifest.webapp. copie e salve o exemplo abaixo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "version": "0.1", "name": "Meu Aplicativo", "description": "Meu primeiro aplicativo para Firefox OS", "launch_path": "/index.html", "icons": { "16": "icon-16.png", "48": "icon-48.png", "60": "icon/icon-60.png", "128": "icon-128.png" }, "developer": { "name": "Digite seu nome", }, "default_locale": "pt-br" } |
Observação: Crie imagens do tamanho 16x16px, 48x48px e 128x128px para serem os ícones do aplicativo. Crie também uma imagem 60x60px e salve em uma pasta nova dentro da pasta do aplicativo. Esse será o ícone que aparecerá na tela inicial.
Testando o aplicativo
Agora que já está tudo pronto, você pode iniciar o simulador e testá-lo. Repita o procedimento feito na instalação, clique no botão “Abrir Menu”, no canto da tela > Desenvolvedores > App Manager.
Clique em “Adicionar aplicativo empacotado” e escolha o diretório do seu aplicativo. Clique em “Abrir”.
Agora clique em “Iniciar Simulador”, e depois em “Firefox OS 1.3”.
Com o simulador aberto, clique em “Depurar”. O aplicativo será instalado e executado.
Caso você queira criar seu próprio aplicativo e disponibilizá-lo para download, basta você comprimir a pasta dele no formato .zip, cadastrar-se no Firefox Marketplace e enviá-lo para revisão.
