MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Firefox OS o que é?

Firefox OS é um sistema operacional livre desenvolvido pela Mozilla e baseado no navegador da web Firefox. Além de ter a Mozilla como principal responsável, o Firefox OS conta com apoio de outras empresas como a Telefônica e uma vasta comunidade de voluntários em todo o mundo. Este sistema operacional tem como alvo dispositivos móveis, em especial, modelos modelos mais simples e de baixo custo, já que prioriza o baixo consumo de recursos, como processamento e memória RAM.

Arquitetura

O Boot to Gecko é um projeto open-source e livre. É possível obter todas as versões, incluindo anteriores, atual ou em desenvolvimento, a partir do repositório da Mozilla no GitHub. Além do acesso à implementação, a lista de funcionalidades previstas para implementação está aberta ao público.
A arquitetura Boot2Gecko é composta por três módulos: Gonk, Gecko e Gaia.

Gonk

É o "sistema operacional" de baixo nível. Essencialmente é o kernel Linux e a camada de abstração de hardware. O kernel é baseado no kernel da versão open source do Android, o Android Open Source Project (AOSP). O uso de parte do projeto AOSP permite ao Firefox OS usar ferramentas comuns às do desenvolvimento para Android, como o ADB e o fastboot. Outro benefício é o uso de drivers que dão suporte à ampla variedade de dispositivos Android disponíveis no mercado.
 

Gecko

Neste estão implementados os padrões HTML, CSS, JavaScript. Essa camada é uma versão do mesmo motor de layout utilizado no navedor Firefox. Ela permite que as interfaces e apps funcionem no próprio Firefox OS e em outros sistemas operacionais nos quais o navegador é utilizado.
 

Gaia

É a camada da interface gráfica do sistema operacional. Nela está implementados tudo que aparece quando o sistema operacional é carregado. Ou seja, tela de bloqueio, barra de notificações, discador, gerenciador de mensagens de texto, câmera e demais aplicações A interface é totalmente escrita em padrões aberto da Web: HTML, CSS e JavaScript.
 

Desenvolvimento de apps

O desenvolvimento de aplicativos no Firefox OS é simples e muito semelhante com as extensões do navegador Firefox. É necessário um arquivo "manifest" (no formato JSON), sendo este responsável por todas as informações que o aplicativo precisa para poder funcionar: (nome do app, versão, informações do desenvolvedor, APIs utilizados, permissões, etc.). As Apps são basicamente escritas em HTML, JavaScript e CSS, já que o sistema é baseado em tecnologia web.

Qualquer desenvolvedor pode submeter seus aplicativos no Marketplace (loja de aplicativos do Firefox OS), bem como distribuí-los em qualquer outros.

Tipos de apps /O Firefox OS possui três tipos de Apps

  • Host App:são “Aplicativos Hospedados”, os tipos mais simples e comum de aplicativo. Como eles podem ser hospedados em locais variados e não passam pelo processo de análise da Política de Segurança de Conteúdo da Mozilla, eles não podem conseguir acesso a recursos mais sensíveis do sistema operacional, disponível pelas Web APIs.
  • Packaged App: chamado também de "Aplicativos Empacotados”, possui inúmeras vantagens em relação aos Host Apps -- dentre as quais, ter o conteúdo inteiramente salvo no aparelho após a instalação e poder ter acesso a recursos mais sensíveis do sistema operacional. São empacotados num arquivo ZIP contendo todos os arquivos do aplicativo, Manifest, HTML, CSS, imagens, JavaScript, etc.
  • Hybrid App: chamado também de "Aplicativos Híbridos”, sendo basicamente um Host App, porém, também consegue funcionar como um Packaged App. Esse tipo pode ser considerado uma junção dos pontos positivos dos 2 tipos anteriores.

Informações Técnicas

Por ser baseado em padrões e formatos abertos, em especial, da Web, os principais elementos suportados pelo Firefox OS envolvem as mesmas características.

Gráficos:

Áudio e Vídeo:

Proteção de Código:

IDEs e SDKs:

Mãos a Obra

Bem mãos a obra criaremos nosso primeiro app  para o Firefox OS ele será do tipo Packaged App.

Primeiramente teremos que ter em mãos algumas ferramentas  que são:

  • 1°Notepad++ para edição de códigos.
  • 2°Criar uma conta no Firefox Markteplace: Firefox Marketplace
  • 3º O Navegador Firefox caso você já possui versões recentes do Firefox basta ir em ferramentas>Desenvolvimento Web>App Manager.
  • Baixe e instale o: Firefox OS Simulator

Que é ferramenta que iremos utlizar no App Manager para testar nosso app após o Firefox Os Simulator e o Notpad++ devidamente instalados e a sua conta criada podemos dar inicio a criação do app.

Criaremos uma pasta com o nome primeiro app e criaremos 3 subpastas com os seguintes nomes:

  • Imagens
  • CSS
  • js

Criando os  Códigos

Abriremos o NotePad ++  e criaremos um arquivo html  com um botão  com um onclik ,com link para chamar a função Java script(arquivo *js) e um link para chamar  a folha de estilo (arquivo *css).

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8"/>
<!--chamando arquivo css  na pasta-->
<link rel="stylesheet" type="text/css" href="css/cssfile.css">
<!--  fim da chamando -->
</head>
<body>
<button type="button"  id="bt1" onclick="Function()">Clik ME!</button>
<script src="js/app.js"></script>
</body>
</html>

E salvaremos na pasta  primeiro app com o nome  de run.html

Criaremos o arquivo css.


/*criando dimenssão do arquivo html para o celeular 320x480*/
html
{
width:300px;
height:480px;
}
/*criando estilo para o botão*/
#bt1
{
color:#333;
resize:none;
width:130px;
height:50px;
background:linear-gradient(#fff,#0099ff,#3366ff);
border-radius:6px;
border:solid 4px;
border-color:#ccc;
}

Agora salve esse arquivo css na subpasta css criada no inicio lembra ? Com nome cssfile.css.

Agora criaremos o evento onclik do botão em java script, que na verdade é um pequeno alert, após isso salve na sub-pasta Js com no nome app.js.

function Function() {
    alert("Este é meu 1° app!");
}

Criaremos agora o arquivo de arranque o  manifest.webapp que é o arquivo que transformará seu arquivo html em app .

O manifest.webapp

O código:

{
  "name": "primeiro app Firefox OS",
  "description": "meu primeiro app",
  "launch_path": "/run.html",
  "icons": {
    "60": "/img/icon-60.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "seu nome",
    "url": "seu web site"
  },
  "default_locale": "Pt-br"
}

App Manager

Feito isso salve o arquivo criado acima com o nome manifest.webapp na pasta primeiro app junto com o arquivo run.html depois abra o app manager, conforme figura abaixo, selecione a aba aplicativos com o icone de foguete>iniciar o simualdor depois que o Firefox Os Simulator abrir>Adicionar aplicativo empacotado(selecione a pasta primeiro app ele irá ler automaticamente o arquivo JSON que é o manifest.webapp.

Após startado  o Firefox OS simulator clicke em adicionar aplicativos empacotados  selecione a pasta onde criamos o app ele irá reconhecer automaticamente o arquivo JSON(manifest.webapp)  se aparece ma tela do Firefox Os Simulator conforme a imagem seu app está ok.

Rodando o APP

App Rodando

Este é um pequeno exemplo de como criar um app para o Firefox OS após isso e crie mais funções e depois  feche em ZIP hospede no Firefox Marketplace, lógico,  terá que passar por um teste para saber se o manifest  está ok.

Firefox Marketplace

Bem sou voluntário  espero poder ter ajudado o link para o app de exemplo.

App de exemplo

 

 

 

Etiquetas do documento e colaboradores

 Colaboradores desta página: leo89, LHenriqueM, vigia122, Jackes, rougeth, Joridos, chrisdavidmills
 Última atualização por: leo89,