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

Vagrant

Vagrantfile

Sempre gostei de deixar o meu sistema operacional o mais limpo possível, sem instalar muitos pacotes e depois removê-los, dou uma olhada nos arquivos de configuração antigos para limpar o home. Máquinas virtuais são perfeitas para testar programas, porém é muito chato ter que ficar gerenciando tudo na mão, normalmente já tinha uma VM instalada com o básico que servia de base, mas ainda assim leva um tempo até conseguir testar e depois, quando apaga para liberar espaço, não lembra de tudo que foi feito.

Um programa que estou utilizando no trabalho para fazer a configuração inicial do servidor é o Vagrant. A ideia é criar uma máquina virtual com a nossa instalação padrão e depois instalar os pacotes das soluções na primeira vez que ligar a VM de forma automática, funcionando muito bem.

Existem vários boxs (VM com o sistema operacional instalado) prontos na internet para o Vagrant, porém não sei como foram gerados e nem tudo que foi feito neles antes de eu poder usar, então resolvi fazer um box que eu conseguiria controlar melhor.

Os passos seguidos foram:

  • Instalar o sistema operacional
  • Configurar os usuários, por padrão o usuário utilizado é “vagrant” e sua senha também é, porém pode ser outro usuário e senha desde que configurados no Vagrantfile.
  • Configurar a interface de rede para DHCP, utilizando o NAT do VirtualBox.
  • Configurar o acesso ssh, interessante se for autenticação por chave, existe uma padrão, porém como é pública não deve ser utilizada se necessita de segurança.
  • Configurar o sudo para o usuário do vagrant sem senha e com “env_keep=SSH_AUTH_SOCK”.
  • Instalar os componentes adicionais do VirtualBox na VM.
  • Exportar o box com: vagrant package –output arquivo.box –base nome_da_vm
  • Adicionar o box no Vagrant: vagrant box add nome_da_vm arquivo.box

* Não coloquei os comandos que podem variar de acordo com a distribuição, porém os passos são esses, só testar para identificar se necessita de algum ajuste.

Depois disso só dar um “vagrant init nome_da_vm”, editar o Vagrantfile para instalar os pacotes adicionais, que podem ser via shell script mesmo, configurar os caminhos dos programas para /vagrant no servidor que é a pasta aonde está o Vagrantfile, executar um “vagrant up” e pronto. Caso tenha apagado a VM e ainda tiver o Vagrantfile só executar “vagrant up” novamente e ela será refeita, inclusive se a box estiver numa versão mais atualizada.

Vale muito a pena dar uma olhada nesse programa, suas vantagens para desenvolvimento são enormes, mas todos podem aproveitar deste que saiba como usar e não precisa guardar VMs de 10G, só um arquivo de 10 linhas de texto.

Compartilhar prints com Django

Webprint

Algum tempo, desenvolvi um site com Django para compartilhar prints, motivado pela falta de praticidade do envio e visualização dos mesmo por email ou jabber. Seu código está disponível no meu GitHub. Não irei abordar como desenvolver um aplicativo Django neste post, porém vou deixar o link do tutorial da documentação oficial que é muito bom e da para se ter uma ideia inicial do seu potencial e praticidade, infelizmente apenas em inglês (https://docs.djangoproject.com/en/1.6/intro/tutorial01/, esse link é da versão 1.6, a mais atual na data de publicação deste post, porém é só procurar por tutorial na página principal da documentação de qualquer versão).

O meu objetivo aqui é mostrar o motivo de inicialmente ter gostado do Django, passado um tempo longe e posteriormente reconhecer o seu potencial. A primeira vez que tive contato com o desenvolvimento no mesmo foi maravilhoso e ver como as coisas eram práticas. Acesso ao banco de dados, formulários, templates, tudo era bem interessante e organizado.

Apesar das coisas serem práticas e ter um conhecimento razoável de Python na época, passava muito tempo pesquisando a documentação e sentindo que estava escrevendo uma coisa diferente de Python, apesar de ser a mesma linguagem. A falta de uma IDE com recursos avançados pode ter tido seu peso nisso. Porém não entender como era o seu fluxo com o HTTP e funcionamento com os middlewares do WSGI (que eu não tinha a menor ideia do que era na época) deixavam as coisas obscuras. Para quem veio de programação web com PHP e sem a utilização de um framework, acabei não gostando muito.

Tempo depois conheci o Bottle, por ser extremamente minimalista tive a impressão de voltar a programar da forma que tinha com o PHP. Como ele é extremamente simples (apenas um arquivo .py) e funcionar corretamente no Python 3 virou meu padrão de pensamento e tive a impressão de realmente programar para a web em Python.

Porém nem tudo é simples, utilizando-o diariamente no trabalho notei que passava muito tempo escrevendo código para acessar o banco, que logo foi adotado um ORM, porém para formulários continuava extremamente lendo e tedioso o trabalho, para minha surpresa não encontrei nenhum framework para resolver este problema. Voltei a olhar para o Django quando tive um tempo e lá estava uma solução para esse problema.

Ainda não desenvolvi nada grande com Django, porém hoje acho ele realmente completo para a tarefa, talvez não seja o melhor, mas é o que eu conheço (Python também tem mais frameworks web que palavras reservadas mesmo) e cumpre seu papel. Novamente fiquei surpreso ao perceber que o tempo que eu passava fazendo as coisas no Django e a forma como ele recomenda fazer as coisas era o que estava buscando hoje. Sim, ele também tem pilhas inclusas, ORM, formulários, autenticação e controle de permissão, tudo o que eu queria e iria precisar, ele já possuía.

O que aprendi com tudo isso é que sempre vale a pena aprender como um framework funciona e organiza o código de sua aplicação. Mesmo que não vai ser utilizado, essa ideia pode ser reaproveitada e se funciona é válido, mesmo que você odeie o resto dele, e quem sabe num futuro vir a ser adotado. Rails está na minha lista de coisas a aprender, embora ainda não conheça Ruby.

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.