Tableless

Busca Menu

Desenvolvendo para Firefox OS

Seja o primeiro a comentar por

Introdução

Firefox OS é novo sistema operacional móvel desenvolvido pela Mozilla. Para nós desenvolvedores web ficou fácil criar aplicativos para aparelhos mobile, pois para desenvolver é utilizado apenas HTM5, CSS e JAVASCRIPT.

Para testar seus aplicativos não precisa ter um smartphone com Firefox OS, basta baixar a extensão (Firefox OS Simulator) do Firefox disponível em Windows, Linux e MAC OS X.

Colocando em pratica

Primeiro passo é instalar a extensão Firefox OS Simulator em seu Firefox.

Firefox OS Simulator – links para Download

Iniciando Firefox OS Simulator

Para abrir o Firefox OS Simulator procure a aba Ferramentas > Desenvolvedor web > Firefox OS Simulator. Uma aba será aberta com as informações do Firefox OS Simulator. Nesta aba você pode desligar e ligar o emulador e nela também são adicionados os aplicativos que serão instalados no emulador assim que iniciado. Para adicionar seus aplicativos, clique em Add diretory e localizar a pasta em que você desenvolveu seu aplicativo.

Criando uma aplicação para Firefox OS

Para iniciar, crie uma pasta do seu projeto e nela ficarão os arquivos da sua aplicação. No meu caso willemallan. Dentro do diretório crie um arquivo manifest.webapp este arquivo contém as configurações do projeto como: nome, autor, versão, icones e outros dados importantes do aplicativo. Veja abaixo o exemplo do arquivo manifest.webapp.

{
    "version": "0.1",
    "name": "Willem Allan",
    "description": "Willem Allan - Blog posts",
    "launch_path": "/index.html",
    "icons": {
        "16": "/imgs/icons/wi16.png",
        "48": "/imgs/icons/wi48.png",
        "128": "/imgs/icons/wi128.png"
    },
    "developer": {
        "name": "Willem Allan",
        "url": "http://willemallan.com.br"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "es": {
            "description": "Willem Allan - Blog posts",
            "developer": {
                "url": "http://willemallan.com.br"
            }
        },
        "it": {
            "description": "Willem Allan - Blog posts",
            "developer": {
                "url": "http://willemallan.com.br"
            }
        }
    },
    "default_locale": "en"
}

Analisando o código acima, perceba que possuem locais para definir a versão do aplicativo, nome e descrição. Logo após, repare que o launch_path aponta para /index.html, que é o primeiro arquivo a ser carregado quando o aplicativo for iniciado. Pode ser também definido os ícones em diversos tamanhos. Por último temos opções para os dados do desenvolvedor que também podem ser traduzidos em outros idiomas.

Mão na massa

Para iniciar crie um diretório da sua aplicação e em seguida crie um arquivo index.html e utilize o arquivo citado acima manifest.webapp alterando as configurações do seu projeto.

O resultado final é uma pasta com o nome do projeto e dentro os arquivos index.html e manifest.webapp.

Adicione um texto qualquer no arquivo index.html, pode ser o famoso hello world.

<html>
<head>
    <title>Primeira aplicação Firefox OS</title>
</head>
<body>
    <h1>hello world!!! Primeira aplicação Firefox OS</h1>
</body>
</html>

Para testar a aplicação é preciso ir na extensão do Firefox OS Simulator, Bashboard e adicionar a pasta do projeto “add directory”, depois inicie o emulador a aplicação será instalada e aparecerá nos aplicativos.

  • github – exemplo de aplicação do Firefox OS: link
  • github page – link

Saiba mais

  • Firefox OS Quick Start – link
  • Desenvolva para Firefox OS sem um smartphone – link
  • Aplicativos de exemplo – link
  • Disponibilizando um aplicativo no Mozilla Marketplace – link
Publicado no dia