Tutorial App Previsão do Tempo

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Criando um app de previsão do tempo com templates

Esse tutorial te ensina como construir um aplicativo de exemplo chamado weatherme.

Nós criamos os templates Open Web App Bootstrap para ajudá-lo a começar a escrever um Open Web App. Esses templates são projetos HTML/CSS/JS que já estão configurados para que você possa começar a escrever o seu app rapidamente.

O nome do código para os templates Open Web App Bootstrap é Mortar. Existem vários templates disponíveis para diferentes tipos de apps, mas para o nosso propósito aqui vamos usar o template "app-stub". Esse é um template básico que inclui jQuery, require.js, volo, bibliotecas Mozilla Marketplace e outras coisas úteis.

O que você precisa

  • Node.js (necessário para o volo e outras ferramentas descritas abaixo)
  • Git
  • Conta no GitHub (uma conta gratuita é suficiente)
  • Mortar

Instalação

Para começar, faça o download do template. Ou então, execute esse comando (git é um sistema de gerenciamento de código licenciado sob a GPL):

$ git clone git@github.com:mozilla/mortar-app-stub.git weatherme

Você também precisará do volo, então caso ainda não o tenha instalado, execute (npm é um utilitário que acompanha o node.js):

$ npm install -g volo

Volo é uma ferramenta para executar tarefas para o seu projeto para que você possa testar, otimizar e implantar rapidamente o seu código com um único comando.

Nota:  Se você já possui o volo instalado e obter um erro ao tentar executar comandos volo, tente instalar a última versão do volo.

Desenvolvimento

Ok, agora nós já estamos prontos pra programar. Mas espere aí, onde estão os arquivos HTML/CSS/JS? Veja como é a estrutura do diretório:

README.textile
package.json
tools
volofile
www

O projeto em si fica dentro da pasta www. Os outros arquivos fornecem a capacidade para testar e implantar o seu código, mas falaremos disso depois.

Se você abrir a pasta www, vai ver muita coisa lá. A maioria dos arquivos veio do projeto HTML5 Boilerplate, mas foi profundamente customizada para escrever Open Web Apps.

HTML

Para adicionar código HTML, abra www/index.html. A primeira coisa que você deve fazer é definir um título e uma descrição nas marcações  title e meta, e então incluir o código HTML do seu aplicativo na marcação body. Não adicione nenhum CSS ou JavaScript agora, pois vamos tratar disso mais tarde.

Você pode ver o código que foi adicionado para o weatherme aqui. Nós estamos usando Twitter Bootstrap, então você verá um elemento de navegação e alguns botões.

Vamos dar uma olhada no HTML no navegador. Execute esse comando a partir da raiz do projeto:

$ volo serve

Isso cria um servidor simples na sua máquina local, e você pode visualizar o seu projeto acessando http://localhost:8008.

JavaScript

Agora, vamos adicionar uma biblioteca JavaScript. Uma boa opção é a underscore.js, e podemos obtê-la com um simples comando volo:

$ volo add underscore

O comando add encontra e obtém o projeto do GitHub (você também pode informar a URL). Ele agora está disponível como uma biblioteca que podemos importar com o require.js.

Em seguida, vamos escrever um pouco de JavaScript para alimentar o aplicativo. Eu estou usando a API metereológica do Yahoo para obter dados sobre a previsão do tempo. Abra o arquivo www/js/app.js e veja que já há JavaScript lá dentro. Esse código configura o require.js e já inclui jQuery e outras bibliotecas.

Você verá a seguinte declaração:

define(function(require) {

Isso está definindo um módulo require.js, e você precisa escrever o seu código dentro desta função. Você pode consultar o código JavaScript para o weatherme aqui.

Se quiser usar uma biblioteca JavaScript, você precisa importá-la antes. Nós adicionamos underscore.js ao nosso projeto acima, então para usá-la nós escreveríamos:

var _ = require('underscore');

Com o require.js, nunca carregue JavaScript em marcações <script>. Pode haver exceções, mas em geral tudo deve ser importado com require. Isso auxilia na modularidade, separa as preocupações e facilita a minimização e concatenação de tudo para implantação.

Como o weatherme usa o componente aba (tab) do Twitter Bootstrap, precisamos incluir o JavaScript dele. Adicione essa linha:

require('bootstrap/tab');

Você não se importa com o valor de retorno porque modifica o objeto jQuery. O restantate do código JavaScript para o weatherme pode ser visto no GitHub.

Nota: jQuery e Twitter Bootstrap foram incluídos manualmente para esse app específico.

CSS

Vamos agora para o CSS. Abra o www/css/app.css e veja que ele importa o default.css. Sinta-se à vontade para abrir o default.css e modificar os valores padrões. Como estamos usando o Twitter Bootstrap, descomente a seguinte linha:

@import "bootstrap.css";

Isso incluirá o CSS para componentes do Twitter Bootstrap. Não precisamos do CSS responsivo, então deixaremos isso comentado. Quando criamos o aplicativo para implantação, tudo isso será inserido em um único arquivo CSS.

Escreva o restante do CSS para o seu app nesse arquivo. Você pode ver o CSS do weatherme aqui.

Agora que escrevi o HTML, CSS e JavaScript, é hora de testá-lo! Execute novamente o comando serve:

volo serve

E teste o seu app acessando http://localhost:8008. Hora de consertar os bugs!

Implantação

Antes de implantarmos, precisamos customizar o manifest.webapp. Abra o arquivo no diretório www, mude o nome, descrição e demais propriedades. Se for hospedá-lo no github, certifique-se de que o launch_path está configurado para /<project-name>/ ao invés de somente /.

Quando estiver pronto para a implantação, gere seu aplicativo (a partir do diretório raiz):

volo build
Esse comando gera um diretório www-built com todo o JavaScript e CSS concatenado e minificado. Se quiser testar, execute o comando serve com o argumento base.
 
volo serve base=www-built

Se quiser um appcache para que o aplicativo seja executado em modo offline, o volo possui um comando que irá gerá-lo pra você. Basta executar:

volo appcache

E o cache será criado no diretório www-built (gerando o seu app caso isso ainda não tenha sido feito). E é só isso! Todos os seus arquivos serão cacheados e poderão ser usados offline.

Por último, o volo possui um comando para implantar no GitHub. Recomendamos hospedar seu app no GitHub por ser fácil e estável. Você não consegue fazer isso se precisar de compenentes do lado servidor, mas se for tudo no lado cliente você deve usar GitHub Pages. Apenas digite:

volo ghdeploy

E o volo criará um repositório para você, caso ainda exista, e irá movê-lo para a branch gh-pages, o que determina ao github que crie sua página em <username>.github.com/<project>. Seu app está no ar!

Quando fizer mudanças futuras, você precisa primeiramente gerar o seu app (volo build) e depois implantá-lo (volo ghdeploy). O comando ghdeploy não gera o seu app automaticamente.

Etiquetas do documento e colaboradores

Colaboradores desta página: jpreuss
Última atualização por: jpreuss,