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.

Anúncios

Comente

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s