Meu primeiro Aplicativo

Se você quiser seguir junto com este guia, baixe nosso modelo de início rápido. Encontre mais sobre o que há aqui, lendo nosso guia de modelo para aplicativos.

Estrutura do Aplicativo

Packaged vs. Hosted Apps

Existem dois tipos de aplicações web abertas: packaged e hosted. Aplicações Packaged são essencialmente arquivos zip que contém todos os  recursos da aplicação : HTML, CSS, JavaScript, imagens, arquivos de manifesto, etc. Aplicações Hosted são executados a partir de um servidor de um determinado domínio, assim como um website padrão. Ambos tipos de aplicação requerem um manifesto válido. Quando chega a hora de listar sua aplicação no Firefox Marketplace, você poderá fazer o upload da sua aplicação como um arquivo .zip ou fornecer a URL de onde sua aplicação esta hospedada.

Para os propósitos deste guia, você vai criar um aplicativo hospedado em seu endereço localhost. Uma vez que seu aplicativo estiver pronto para ser listado no Firefox Marketplace, você pode fazer a decisão de "empacotá-lo" como um aplicativo zip ou fornecer a URL em que o aplicativo esta hospedado.

Manisfesto App

Todo aplicativo Firefox requer um arquivo manifest.webapp na raiz da aplicação. O arquivo manifest.webapp fornece informações importantes sobre a aplicação, tal como a versão, nome, descrição, localização do ícone, sequência de caracteres, domínios de onde o aplicativo pode ser instalado, e muito mais. Apenas o nome e a descrição são obrigatórios. O manifesto simples incluído dentro do template do aplicativo é semelhante ao que se segue:

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Seu novo incrível Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Seu nome",
    "url": "https://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "Il vostro nuovo fantastico Open Web App",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

Um manifesto básico é tudo que você precisa para começar. Para mais detalhes sobre manifesto, leia Manifesto.

Design & Layout do Aplicativo

O design responsivo se tornou cada vez mais importante à medida que mais resoluções de tela se tornaram padrão em dispositivos diferentes. Mesmo se o alvo principal do seu aplicativo seja plataforma mobile tal como o Firefox OS, outros dispositivos provavelmente terão acesso a ele também. CSS media queries lhe permitem adaptar o layout para o dispositivo, como mostrado neste exemplo CSS:

/* Exemplos de diferentes CSS media queries */

/* Detector básico de largura para desktop*/
@media only screen and (min-width : 1224px) {
  /* estilos */
}

/* Largura do iPhone tradicional */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* estilos */
}

/* Configurações de dispositivo em diferentes orientações */
@media screen and (orientation:portrait) {
  /* estilos */
}
@media screen and (orientation:landscape) {
  /* estilos */
}

Existem vários frameworks  JavaScript e CSS disponíveis para auxiliar no design responsivo e no desenvolvimento do aplicativo (Bootstrap (em inglês), etc.) Escolha o(s) framework(s) que melhor se encaixa em seu aplicativo e estilo de desenvolvimento.

Web APIs

APIs JavaScript estão sendo criadas e aprimoradas tão rapidamente quanto as plataformas estão. O empenho do  WebAPI (em inglês) do Mozilla traz dezenas de recursos móveis padrão de APIs JavaScript. Uma lista de suporte aos dispositivos e status está disponivel na página WebAPI. A detecção de recursos JavaScript ainda é a melhor prática, como mostrado no exemplo a seguir:

// Se o dispositivo suportar a vibrate API...
if('vibrate' in navigator) {
    // ... vibrar por um segundo
    navigator.vibrate(1000);
}

No exemplo a seguir, o estilo de uma <div> é modificada com base nas mudanças no estado da bateria do dispositivo:

// Cria o listener no indicador da bateria
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicador'),
    indicatorPercentage = document.getElementById('indicador-porcentagem');

    // configura listeners para mudanças
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Atualiza imediatamente
    updateBattery();
  }

  function updateBattery() {
    // Atualiza a largura e texto o texto da porcentagem
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Bateria: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'carregando' : '';
  }
})();

No exemplo de código acima, uma vez que você confirmar que a API da bateria é suportada, você pode adicionar eventos ouvintes para chargingchange e a charginglevel para atualizar a  exibição do elemento. Tente adicionar a seguir no template de início rápido, e veja se você pode fazê-lo funcionar.

Verifique a página  WebAPI frequentemente para manter-se atualizado com o status do dispositivo API.

A API de instalação

Em nosso exemplo do template de início rápido, temos implementado um botão de instalação que você pode clicar ao visualizar o aplicativo como uma página da Web padrão, para instalar o site no Firefox OS como um aplicativo. A marcação do botão não tem nada de especial:

<button id="install-btn">Instalar app</button>

Esta funcionalidade do botão é implementada utilizando a API de instalação (ver install.js):

var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define a URL do manifesto
  // instala o app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // O App está instalado, faz alguma coisa
  };
  installLocFind.onerror = function() {
    // O app não foi instalado, a informação está em
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// pega a referencia para o botão e chama a função install() ao clicar se o app ainda não está instalado, se estiver, esconde o botão.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};

Vamos explicar brevemente o que está acontecendo:

1. Nós obtemos uma referência do botão de instalação "install-btn" e o armazenamos na variável button.
2. Nós usamos navigator.mozApps.checkInstalled para checar se o aplicativo definido pelo manifest em https://people.mozilla.com/~cmills/location-finder/manifest.webapp já está instalado no dispositivo. Este teste é armazenado na variável installCheck.
3. Quando o teste é realizado com sucesso, o evento de sucesso é disparado, portanto installCheck.onsuccess = function() { ... } é executado.
4. Testamos então a existência de installCheck.result usando uma condicional if . Se existir, significa que o app está instalado, então escondemos o botão. Um botão de instalação não é necessário se o app já estiver instalado.
5. Se o app não está instalado, adicionamos um evento de click ao botão, então a função install() é chamada quando o botão é clicado.
6. Quando o botão é clicado e a função install() é chamada, armazenamos a localização do arquivo de manifesto em uma variável chamada manifest_url, então instalamos o app usando navigator.mozApps.install(manifest_url), guardando uma referência para esta instalação na variável installLocFind . Você verá que esta instalação também dispara eventos de sucesso e erro, então poderá disparar eventos dependendo do sucesso ou falha da instalação.

Você pode querer verificar o estado de implementação da API na primeira visita aos apps instaláveis.

WebRT APIs (API de Permissão Básica)

Há um número de WebAPIs disponíveis, mas requerem permissões para uma função específica ser habilitada. Apps podem registrar requisitos de permissões no arquivo manifest.webapp como por exemplo:

// nova chave no manifesto: "permissions"
// Requisição de acesso a qualquer número de APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

Os três níveis de permissão são os seguintes:

• Normal — APIs que não precisam de nenhum tipo de permissão de acesso especial.
• Privileged — APIs disponíveis para desenvolvedores usarem em suas aplicações, contanto que eles configurem as permissões de acesso no arquivo de manifesto e distribuam a partir de uma fonte confiável.
• Certified — APIs que controlam funções críticas no dispositivo, como chamadas ou serviço de mensagens. Geralmente não estão disponíveis para desenvolvedores de empresas não certificadas pela Mozilla.

Para mais informações sobre níveis de permissões de apps, leia Tipos de aplicativos empacotados. Você pode encontrar informações sobre quais APIs requerem permissões, e quais permissões necessárias em Permissões de aplicativos.

Ferramentas & Testes

Testes são extremamente importantes ao desenvolver para dispositivos móveis, e existem muitas opções para testar apps instaláveis.

Simulador do Firefox OS e WebIDE

Instalando e usando o Firefox OS Simulator é a forma mais fácil de testar seu app. Depois de instalar o simulador, ele está disponível a partir do menu Ferramentas -> Desenvolvedor -> Firefox OS Simulator. O simulador executa como um console Javascript para depurar a aplicação (disponível até o Firefox 33).

A partir do Firefox 34, a nova ferramenta de desenvolvimento chamada WebIDE veio substituir o Firefox Simulator. Ela permite que você conecte no Firefox para computadores pessoais um dispositivo compatível via USB (ou um simulador do Firefox OS), carregando os aplicativos diretamente no dispositivo. Permite validar, e depurá-los como eles são executados no dispositivo.

A Mozilla vem inovando, e para chamar mais a atenção de seus desenvolvedores a fundação criou uma versão exclusiva de seu navegador chamada de Firefox Developer Edition. Ela já traz todos os recursos para os desenvolvedores se aventurarem. Prefira instalá-lo ao invés dos já citados nos dois parágrafos anteriores, assim você economiza tempo.

Gerenciador de Aplicativos

A ferramentas de teste App Manager está gradualmente sendo substituída pela WebIDE.

Testes Unitários

Testes unitários são extremamente valiosos quando se desenvolve para diferentes dispositivos e arquiteturas. O QUnit do JQuery é um popular utilitário de testes client-side, mas você pode usar a ferramenta de sua preferência.

Instalando o Firefox OS em um Dispositivo

Como o Firefox OS  é uma plataforma livre, o código fonte e ferramentas estão disponíveis para compilar e instalar o Firefox Os em seu próprio dispositivo. As instruções para a instalação, bem como a lista de dispositivos compatíveis estão disponíveis no MDN.

Consulte o guia de desenvolvimento para celulares com suporte ao Firefox OS.

Enviar e Distribuir o Aplicativo

Uma vez que o app está completo, você pode hospedá-lo como uma página própria ou app (leia Apps auto-publicados para mais informações), ou ele pode ser enviado (em inglês) para o Firefox Marketplace (em inglês). O manifesto do seu app será validado e você poderá escolher com quais dispositivos seu aplicatívo será compatível. (por exemplo: Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Uma vez validado, você pode colocar detalhes adicionais sobre o app (screenshots, descrição, preço, etc.) e oficialmente enviar o app para a lista informativa do Marketplace. Uma vez aprovado, seu app estará disponível para compra e instalação.

Mais Marketplace & Lista Informativa

1. Enviando um app para o Firefox OS Marketplace
2. Critérios de avaliação do Marketplace
3. Video Tutorial de Envio de App (em inglês)