Eventos/ Firefox OS

Criando sua primeira App para o Firefox OS

Firefox_mobile_mozilla

Então você decidiu criar um App em HTMl5/CSS3 e Javascript para o FirefoxOS certo? Não sabe como fazer, veja abaixo como criar sua primeira App Hello World para o Firefox OS.

Primeiro Passo

Baixe o Firefox

download_firefox

Segundo Passo

Baixe o Simulador do Firefox OS. Para fazer isso vá ao menu:

firefoxos_complementos

Pesquise por Firefox OS e clique em instalar

firefoxos_downloading

Demora um pouco para quem tem uma conexão lenta, já que você está baixando o compilador para suas Apps, o engine Gecko e o próprio simulador.

Testando o simulador

Pronto, instalação feita, você agora só precisa testar seu simulador e ver se está tudo correto.

Vá até o menu Firefox – > Desenvolvedor Web – > Firefox OS Simulator
firefox_opensimulator

Se você tiver isso na sua tela, metade do caminho foi andado.

NOTA: Caso você esteja clicando e nada acontece, reinicie seu Firefox, se isso não resolver, reinicie seu sistema operacional.

firefoxos_start

Agora só clicar no slider onde tem “Stopped” e o simulador vai abrir.

firefoxos_running

Criando o Hello World

Agora é a parte boa, crie um arquivo de HTML 5 simples igual a esse abaixo, basta copiar e colar.

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<meta charset="utf-8">
<title>Ola Mundo</title>
<style type="text/css">
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	width:320px;
	height: 480px;
	overflow: hidden;
}
h2 {
	display: block;
	position: absolute;
	top:80%;
	left:45%;
	font-size: 1.2em;
	font-family: 'Verdana';
}
#firefoxos {
	display: block;
    position: absolute;
    margin:0 auto;
    width:148px;
    height:153px;
    top:47%;
    left:47%;
    animation: firefoxos-spin 0.9s infinite linear;
}
@keyframes firefoxos-spin {
    from { transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
    to { transform: rotate(360deg) scale(1) skew(0deg) translate(0px); }
}
</style>
</head>
 
<body>
	<div id="firefoxos"> <img src="firefoxos.png" alt=""> </div>
 
	<h2>Firefox OS Hello World</h2>
</body>
</html>

manifest.webapp

Assim como no iOS com o pslist, o Android com seu Android Manifest e o Adobe AIR com seu App description, o Firefox OS possui um arquivo que também define algumas caracteristicas de acesso, aparência, perfurmaria, o manifest.webapp.

Uma configuração básica para um Hello World, seria algo como mostra abaixo:

{
  "version": "1.0",
  "name": "Hello World",
  "launch_path": "index.html",
  "description": "Simples Hello World da App",
  "icons": {
    "16": "/icons/16.png",
    "32": "/icons/32.png",
    "48": "/icons/48.png",
    "64": "/icons/64.png",
    "128": "/icons/128.png"
  },
  "developer": {
    "name": "Igor Costa",
    "url": "http://www.igorcosta.com/palestras/cpbr6/foxhelloworld/"
  },
  "installs_allowed_from": ["*"],
  "default_locale": "en"
}

A URL é onde seu App vai ficar. Salve esse arquivo como manifest.webapp e chegou a hora de testar.

Para testar no simulador, se você estiver no localhost, basta clicar em Abrir Diretório e apontar para o arquivo manifest.webapp.

firefoxosmanifest

Ponto final

E ai está o resultado final.

firefoxloop

Você agora vai ver que o Simulador fechou para abrir novamente e refletir as mudanças que você fez, se você está modificando só o HTML, nem precisa adicionar novamente, basta clicar em update.

Fácil não, agora o resto é com vocês.

[Atualização 13/03/2013]
A fundação Mozilla acaba de anunciar o novo simulador 3.0 para diversas plataformas. Veja mais aqui.

http://www.igorcosta.com/novo-simulador-3-firefox-os

19 thoughts on “Criando sua primeira App para o Firefox OS

    • Oi Bruno

      Indicaria primeiro aprender sobre @key-frames, animations, transitions e ai depois começar a usar o Adobe Edge, já que o resultado dele que é html/css você ficaria perdido e não poderia adaptar o que resultou.

      Mais sem dúvida é a alternativa número um para quem vive de animações na internet.

  1. Igor, muito bom essa sua informação estou com um firefox os tentando aprender um pouco, se você souber onde posso conseguir informações do tipo push para e-mail ou mesmo contatos para conseguir buscar contatos do gmail eu gostaria, pois sou novo esse tipo de desenvolvimento.

    Uma coisa que notei é que você está colocando tudo em uma única página html, o firefox os não aceita a criação de pastas separadas para armazenar imagem, css etc por exemplo ? Como quero me aprofundar nesse desenvolvimento gostaria muito de mais dicas

    • Oi Rafael

      Desenvolver para firefox OS é igual a criar um site, aceita a mesma estrutura que um site escrito em puro html/css/js.

      A única diferença é que ele se comporta em uma tela pequena, esse exemplo que eu dei é mais para mostrar o passo-a-passo para quem está na estaca zero e quer começar corretamente.

      Você pode utilizar a estrutura de pastas tranquilamente.

      Sobre push notification eu aconselharia você usar a api do próprio firefoxOS para receber a notifação vinda de um serviço web.

      Prometo me dedicar a escrever um artigo sobre esse assunto.

  2. Hum… muito interessante! Já havia testado esse simulador e confesso estar muito ansioso pelo lançamento.

    Igor, sabe se a Mozilla planeja lançar alguma ferramenta de desenvolvimento ?

    • Oi Wemerson

      Acho que não, o foco dela é só melhorar o simulador ou lançar um GUI estilo bootstrap para ajudar. Já tem várias ferramentas interessantes para desenvolvimento html/css/js.

      Mais nada é impossível.

  3. Existe algum tutorial tipo ebook para os comandos de consutar agenda, mandar e receber emails e sms, salvar e abrir arquivos, escrever e ler em banco de dados?

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *