Simulador Firefox OS

Simulador do Firefox OS

Já fiz um post sobre desenvolvimento de aplicativos para Firefox OS, porém ainda não tinha comentado sobre o simulador. Um dos motivos é que não é obrigatório a sua utilização, já que o “modo de design adaptável” ajustava o tamanho da tela e não tinha utilizado nenhuma API que exigisse o acesso do aparelho em si. Porém o simulador existe e da uma ideia melhor de como o aplicativo vai funcionar no celular.

Além do simulador servir para o desenvolvimento de Apps, ele também serve para conhecer uma plataforma antes de comprar um celular, nunca tive um Android, porém conheço um pouco sobre o mesmo devido a utilização do simulador, assim como o Firefox OS, com a diferença que este desejo ter um celular um dia. Conheci o Maemo pelo simulador e quando o meu celular chegou já sabia como utilizá-lo. Então vale a pena dar uma olhada.

A primeira coisa a se saber sobre o simulador é que ele funciona sobre o navegador Firefox. Até a versão 1.1 funcionava como uma extensão, da versão 1.2 ou superior é integrado nas novas versões do navegador. Porém vale a pena lembrar que quando mais antiga a versão testada, maior a probabilidade de funcionar no maior número de dispositivos e numa versão mais nova você pode excluir alguns dispositivos mais antigos.

A extensão da versão 1.1 funciona perfeitamente até a versão 26 do Firefox, porém é possível instalá-la em versões mais nova (consegui utilizar no 29.0.1). Como a instalação é um procedimento simples e já existe um artigo no MDN irei linká-lo aqui. Mas basicamente é instalar a extensão e abrir “Firefox OS Simulator” em “Desenvolvedor Web” como descrito no artigo.

Para as versões 1.2 ou superior necessitam no mínimo do Firefox 27. Também existe um artigo sobre a instalação no MDN. O simulador fica em “App Manager” também dentro de “Desenvolvedor Web”, ou digitando “about:app-manager” na barra de endereço. Para iniciar o simulador só clicar em “Iniciar Simulador” na barra inferior, serão exibidas as versões já instaladas e o botão “Adicionar” para fazer o download e instalar uma nova versão, ou acessando diretamente esse link e instalá-los como uma extensão. Depois só voltar no App Manager e iniciar a versão desejada.

A ideia do simulador do Firefox OS funcionar dentro do Firefox é muito boa, já que os dois funcionam com o gecko. Além de ser muito leve e rápido que a versão para Android. Lembro que a primeira vez que tentei abrir o do Android, foi num computador mais antigo e depois de meia hora processando travou, imagino que como ele executava o Firefox sem problemas, o simulador do Firefox OS funcionaria também.

Se instalou o simulador do Firefox OS e quer testá-lo ou utilizá-lo, tem o material de desenvolvimento de Apps no MDN e outro post deste blog que já comentei, para isso de uma olhada na categoria de Firefox OS do blog.

Anúncios

Aplicativo para Firefox OS

Firefox OS - Jogo da Velha

Como no FISL 15 tiveram várias palestras para quem era desenvolvedor web, com assuntos desde novos recursos do HTML5, API do JavaScript, design responsivo e mobile first, fiz um aplicativo para Firefox OS. Motivo é que desenvolver para Firefox OS é igual a desenvolver um aplicativo web para navegador com HTML, CSS e JavaScript, ou seja, dependendo das bibliotecas utilizadas é possível rodar o aplicativo também no seu navegador desktop, vídeo game e até TV.

O aplicativo que desenvolvi foi um jogo da velha (código no GitHub), tentei deixar as coisas o mais organizado possível e seguindo alguns padrões, porém se alguém tiver uma sugestão para melhorar o código avise ou faça um pull request.

Agradecimentos a Marcus Saad pela oficina de aplicativos para Firefox OS e Andre Alves Garzia pelo livro que disponibilizou gratuitamente (link para download), recomendo a todos que tiverem interesse no desenvolvimento de aplicativos para Firefox OS, além da documentação na Mozilla Developer Network.

Agora sobre o desenvolvimento do aplicativo. A principal diferença entre um site para um aplicativo do Firefox OS é o arquivos “manifest.webapp”, onde diz algumas informações extras como nome do aplicativo, descrição, desenvolvedor, ícone e página principal. Essa página principal é o caminho do arquivo que será executado pelo Firefox OS para iniciar o aplicativo, normalmente um “index.html”. Mais informações sobre o manifest na MDN.

Como não sou muito bom para bolar um design, utilizei o tema padrão, disponível no site “Building Firefox OS”. Basicamente é fazer o download dos arquivos do tema e adicionar o CSS ou JavaScript na página que for utilizar.

A estrutura do HTML não muda muito das páginas web padrão, apenas foram adicionadas alguns atributos para a utilização do tema. O CSS foi utilizado apenas para mostrar os elementos no lugar correto, porém vale lembrar que foi utilizado unidades relativas para manter um design responsivo e funcionar em vários tamanhos de telas.

O JavaScript talvez seja o mais complexo de todos, mas devido controlar toda a lógica do jogo e interagir com o HTML, não teve nenhuma diferença do que seria feito para um site normalmente. Porém lave lembrar que diferente dos computadores, no celular os recursos de memória e processador são menores e o código deve ser otimizado sempre que possível. Preferi deixar a lógica do jogo no model.js e as mudanças no HTML no app.js, seguindo a ideia do aplicativo apresentado no livro já citado. Obviamente ele poderia ter ficado muito mais simples se feito de outra forma, porém achei interessante este modelo e de fácil adaptação para outros aplicativos que trabalhem com alguma estrutura de dados.

Caso tenha alguma dúvida consulte o código do meu aplicativo ou do aplicativo desenvolvido no livro do Andre (código no GitHub), a documentação da MDN também é excelente, porém algumas páginas estão diferentes em português e inglês, então vale a pena consultar as duas versões que podem ter mais informações.