Recentemente tive a oportunidade de participar de um hackaton organizado, dentre outras empresas, pela Firefox. Claro que o foco era a produção de aplicativos para o Firefox OS. Sendo assim, conheci este novo sistema operacional pessoalmente, além de ter a oportunidade de criar meus primeiros aplicativos para a plataforma. Então, resolvi dividir um pouco da minha recente experiência com o leitor.
Já posso
comprar um?
Para escrever este artigo, a primeira pesquisa que
fiz foi sobre a possível compra de um aparelho com Firefox OS.
Em um dos principais sites de compras online
encontrei somente um aparelho a venda. Trata-se de um ZTE Open usado sendo
vendido por R$ 350,00. Na descrição do dispositivo encontra-se o seguinte: Powered
by Firefox OS. 1.0 GHz Cortex-A5 built-in A-GPS Sensor. Support US 3G NETWORK. 2G NETWORK:GSM 850/900/1800/1900. 3G
NETWORK:UMTS 850/1900
Das operadoras brasileiras, o único site que
encontrei referência sobre aparelhos com Firefox OS foi na Vivo. Os dispositivos disponíveis atualmente são
dois (link aqui):
·
Lg
Fireweb (D300):
o 6X R$14,83 ou R$89,00 à vista no
plano pós. 10x de R$39,90 ou R$399,00 à vista no plano pré;
o Firefox OS 1.1;
o GPS;
o 1 chip;
o Bluetoot e Wifi;
o Memória interna de 2GB, Micro SD
até 32GB.
·
Alcatel One Touch Fire (0T4012)
o A partir de R$29,00 no plano pós.
10x de R$17,90 ou R$179,00 à vista no plano pré.
o
Firefox OS 1.1
o
Mesmas configurações do Lg;
Claramente percebse-que o alvo do Firefox OS é o
mercado emergente. Li em algumas reportagem que em alguns países de primeiro
mundo os aparelhos nem mesmo serão lançados, justamente por não ser o foco do
produto.
Fale-me
sobre ele...
O Firefox OS trabalha sobre um kernel Linux e tem toda
sua programação e seu ecossistema fortemente baseado em tecnologias web.
Basicamente o trio de ferro HTML5, JavaScript e CSS.
Um dos pontos chaves no desenvolvimento é a Web API, que refere-se a um termo
utilizado para descrever um conjunto de API´s compatíveis com o dispositivo,
permitindo que web apps acessem conteúdos relacionados ao próprio hardware do
aparelho. Como por exemplo: geolocalização, câmera, contatos, notificações,
alarmes, fotos, pickers, dentre outros.
Para iniciar o leitor precisará de três links:
·
- Doc Web
Apis: documento que mostra todas as Web APIs com códigos fonte de exemplo.
Link: http://bit.ly/doc-web-apis;
·
- Projeto
exemplo: link para o github com um projeto que utiliza todas as Web Apis, além
disso, já mostra de forma clara a estrutura de pastas e arquivos utilizada em
um projeto Firefox OS. Link: https://github.com/robnyman/Firefox-OS-Boilerplate-App;
·
- Simulador:
simulador da plataforma. Link: http://bit.ly/ffos-simulador
Iniciando
o desenvolvimento
A melhor forma de começar rapidamente o
desenvolvimento do Firefox OS é baixar o código do Boilerplate App, indicado no
conjunto de links a poucos parágrafos atrás. Ao descompactar a pasta baixada,
podemos visualizar a seguinte estrutura de diretórios:
É possível perceber de forma muita clara a proposta
de um típico projeto web. Os principais elementos aqui são: dois arquivos HTML
(index e fallback). Pastas específicas para textos internacionalizados (locales), arquivos Java Script (js), imagens (images), fontes (fonts),
folhas de estilos (css) e
principalmente, o arquivo de manifesto (manifest).
Antes de analisarmos os fontes, veja a interface da
aplicação:
No index.html
o leitor não terá grandes surpresas se já conhecer um pouco de HTML. Mas, o
ponto que gostaria de chamar a atenção é no final deste arquivo. Onde é
possível encontrar a seguinte linha:
<script
type="text/javascript"
src="js/webapp.js"></script>.
O script Java Script webapp.js mostra o curacao do Firefox OS. Já falamos da Web API e,
neste arquivo, podemos ver esta biblioteca na prática. Todos os botões da
interface gráfica do aplicativo chamam alguma função do webapp.js. Para fins didáticos, vamos pegar como exemplo a ligação
e o envio de sms:
var dial
= document.querySelector("#dial");
if (dial) {
dial.onclick = function ()
{
var call = new
MozActivity({
name:
"dial",
data: {
number: "+46777888999"
}
});
}
}
var sendSMS =
document.querySelector("#send-sms");
if (sendSMS) {
sendSMS.onclick = function
() {
var sms = new
MozActivity({
name:
"new", // Possible compose-sms in future versions
data: {
type:
"websms/sms",
number:
"+46777888999"
}
});
}
}
O uso da Web API se dá na função passada para a
ação de clique nos botões. A variável java script sempre recebe a instância de MozActivity. O que definirá qual ação
deve ser executada são os parâmetros definidos nesta classe. Por exemplo, no
envio de SMS temos em data: type e number. Já na ligação temos apenas o dial.
Imagino que o leitor já deva estar surpreendido com
a facilidade para criação de aplicativos no Firefox OS, assim como eu fiquei.
Outro arquivo de suma importância é o manifesto. Este
arquivo define as principais propriedades da aplicação, como:
·
Versão;
·
Nome;
·
Descrição;
·
Ícones;
·
Permissões;
·
Internacionalização;
·
Dados
sobre o desenvolvedor;
E o
simulador?
Depois de conhecer um pouco a codificação vamos
falar sobre o simulador.
Depois de instalar o simulador no Firefox ele
ficará disponível na opção Desenvolvedor
Web -> Firefox OS Simulator. Abaixo
um screenshot do dashboard:
Para adicionar um aplicativo basta clicar no botão Add Directory e indicar o caminho do
arquivo manifesto da aplicação. Caso a codificação esteja correta o Validation Result será OK. O próximo passo é rodar o simulador
clicando no botão ao lado esquerdo, abaixo do logo do Firefox OS Simulator.
Conclusão
Espero ter demonstrado de forma prática os
primeiros passos para iniciar o desenvolvimento para a plataforma Firefox OS. Qualquer
dúvida ou sugestão comente o post que respondo assim que possível.
Obrigado
Att - Ricardo
Comentários