Um mostruário de algumas pessoas que ficam fritando seus PCs. Há uma página que mostra essas pessoas e outra com detalhes sobre o que elas andam fazendo com seus computadores.
Você deve criar duas páginas dinâmicas usando Node.js e Express.js.
Você deve criar um arquivo package.json
para caracterizar a pasta como um pacote Node.js.
Para tal, você pode pedir auxílio ao npm. Após clonar seu fork, abra o terminal na pasta e:
$ npm init
Nesse momento, o npm fará perguntas no termianl para alguns parâmetros descritivos do seu pacote. Ao digitar os valores e concluir a operação, um arquivo package.json
terá surgido na pasta.
Depois, você deve instalar algumas dependências:
- express (
npm install express --save
) - underscore (
npm install underscore --save
) - hbs (
npm install hbs --save
) - para handlebars, mas pode ser qualquer outro templating engine suportado pelo Express
Para executar, você pode digitar:
$ node server/app.js
E, como o "código de entrada" do programa está nesse arquivo app.js
, a aplicação será iniciada.
Contudo, repare que o arquivo server/app.js
ainda não está fazendo nada de útil.
Você deve agora abrir um servidor na porta 3000, configurado para servir estaticamente todos os arquivos da pasta client/
.
Repare que o projeto já tem uma estrutura de diretórios e alguns arquivos criados:
- Pasta
client/
com arquivos estáticos (css/
,.html
)- Os arquivos
.exemplo.html
são aqueles que devem se tornar dinâmicos
- Os arquivos
- Pasta
server/
com arquivos dinâmicos do servidor, views etc.- O ponto de entrada é
server/app.js
sever/data/
contém as informações que precisamos para tornar as páginas dinâmicas em arquivos no formato JSON
- O ponto de entrada é
Agora, modifique o arquivo server/app.js
para ativar um servidor estático
- o servidor deve servir os arquivos da pasta
client/
- Passos:
- Use o middleware (
app.use
)express.static(CAMINHO_PARA_PASTA)
, especificando a pasta onde estão os arquivos estáticos - "Abra" o servidor e deixe-o escutando (
app.listen
) na porta 3000 - Teste seu servidor executando:
$ node server/app
- Repare que a extensão
.js
é opcional para o Node.js
- Repare que a extensão
- Use o middleware (
Para verificar se o servidor estático está funcionando, acesse o endereço http://localhost:3000/index.exemplo.html e veja se a página carregou devidamente.
Neste exercício você deve criar a página views/index.hbs
de forma que os usuários mostrados nela sejam buscados a partir do arquivo data/jogadores.json
.
- Instalar o templating engine como uma dependência (se já não tiver feito isto)
- Configurar o templating engine
- Carregar o arquivo
data/jogadores.json
para um objeto Javascript- Repare que já existe um objeto vazio na variável chamada
db
no arquivoserver/app.js
- Você pode carregar o arquivo de forma síncrona ou assíncrona usando o módulo file system (fs)
- Lembre-se de que o módulo file system é da plataforma do Node.js, então não é necessário instalá-lo
- Note que ao carregar o arquivo via
fs.readFileSync(CAMINHO)
oufs.readFile(CAMINHO, CALLBACK)
, o que é retornado (na chamada síncrona) ou passado como 2º argumento (na chamada assíncrona) é uma string com o conteúdo do arquivo JSON - Sendo assim, é necessário desserializar essa string em um objeto Javascript usando
JSON.parse(STRING)
- Repare que já existe um objeto vazio na variável chamada
- Criar uma rota do tipo
GET
(app.get(...)
) para o caminho "/" (página inicial) que renderize (response.render(...)
) a view que está emserver/views/index.hbs
(ou outra extensão)- Repare que o argumento para a função
response.render(NOME, CONTEXTO_DE_DADOS)
é apenas o nome da view, sem a extensão nem a pasta
- Repare que o argumento para a função
Neste momento, você pode testar no navegador se a rota e a view estão sendo encontrada e renderizada acessando http://localhost:3000/.
- Agora você deve alterar a view
server/views/index.hbs
(ou outra extensão) para torná-la dinâmica- Use os comentários no arquivo
server/views/index.hbs
para saber como mapear os campos do "banco de dados" para a view - Se estiver usando Handlebars, você vai precisar de:
- Expressões
- Block
each
, para iterar no array players
- Use os comentários no arquivo
Findos esses últimos passos, a página inicial deve estar igual à página em http://geiser.herokuapp.com.
Siga os mesmos passos da página inicial, mas agora para a página de detalhes de um jogador:
- Rota:
/jogador/:numero_identificador/
, responde ao verboGET
apenas - View: renderizar
server/views/jogador.hbs
- Contexto de dados: vêm de 3 fontes diferentes
- De
jogadores.json
- De
jogosPorJogador.json
- Calculados das outras duas fontes
- De
Veja nas imagens a seguir de onde vêm os dados para cada elemento da interface:
Mais informações vide slides: 16.