cefet_web

Server-side parte 4

Criando o Geiser
- Parte 1 - configuração e servidor estático
- Parte 2 - página inicial
- Parte 3 - página de detalhes do jogador
O arquivo package.json
Renderizando com Handlebars
Programação funcional com Underscore

É um pequeno sistema que mostra informações sobre o perfil de jogadores do Steam, uma loja virtual de jogos de computador
Há duas páginas:
1. Página inicial, mostrando todos os jogadores
2. Página de detalhes, mostrando os jogos mais jogados de um jogador (e outras informações)
Baixe seu kit (fork de http://github.com/fegemo/cefet-web-geiser) e comece já a implementar sua tarefa de hoje

Um projeto em Node.js tipicamente possui um arquivo especial chamado package.json
- Ele contém meta-informação sobre o projeto (autor, versão, descrição), bem como informação sobre as dependências do projeto de outros pacotes
Na atividade de hoje, vamos usar:
1. o Express como nosso web framework
2. algum templating engine para renderizar html dinamicamente (e.g., Handlebars)
3. o Underscore.js, que fornece utilidades típicas de linguagens funcionais para o Javascript e vai facilitar nossa vida hoje

Além das propriedades que o npm preencheu, outra bem importante é a dependencies, que lista que pacotes nosso projeto depende
- Crie uma dependência do pacote express, última versão:
```
  "dependencies": {
      "express": "latest"
  }
}
```
Agora, instale as dependências (criar a pasta node_modules com as dependências dentro). Como você tem um package.json, basta:
```
$ npm install
```

A página inicial deve mostrar uma lista de todos os jogadores que temos no “banco de dados” (arquivo data/jogadores.json)
Vamos precisar de um templating engine para gerar html dinamicamente. Você pode usar qualquer um suportado pelo Express. Nesta apresentação estamos usando .hbs
1. Instalar o templating engine escolhido via npm
```
$ npm install hbs
```

Além de instalar, também precisamos configurar o express para usar o formato .hbs:
```
app.set('view engine', 'hbs');
```
Vamos também carregar o arquivo data/jogadores.json na memória usando o módulo fs (file system)
- Lembre-se que o módulo fs é da plataforma, então não precisamos instalá-lo pelo npm
- Dica: você vai precisar desserializar o conteúdo do arquivo ao associá-lo a uma variável para poder acessá-lo como um objeto

Configure a pasta onde o Express espera encontrar as views:
```
app.set('views', 'server/views');
```
Crie uma rota (app.get) para o caminho "/" que renderize (response.render) a view que está em server/views/index.hbs (nome: apenas index)
Teste no navegador. Você deve conseguir ter o mesmo resultado de quando visualiza http://localhost:PORTA/

Agora você deve alterar a view server/views/index.hbs para torná-la dinâmica
Use os comentários que estão no arquivo server/views/index.hbs para saber como mapear os campos do “banco de dados” para a interface
Do Handlebars, você vai precisar:
1. Expressões
2. Bloco each, para iterar no array players

Você vai precisar transformar alguns dados:
1. Converter tempo jogado de minuto para hora
2. Contabilizar a quantidade de jogos não jogados
3. Ordenar por ordem decrescente de horas jogadas
Para auxiliar, você pode usar uma biblioteca Javascript chamada underscore.js
- Ela é apenas uma utilitária que contém diversas funções para se trabalhar com arrays, objetos e funções de maneira simples
Para usar o underscore, instale-o via npm (lembre-se do --save)
Para usar, tipicamente fazemos o require para uma variável com o nome _:
```
var _ = require('underscore');
```

Métodos úteis para a página de detalhes do jogador:

Busca de elemento em um array (_.find):

var jogosDesteJogador = _.find(todos, function(el) {
  return el.steamid === request.params.id;
});

Busca de todos elementos que batem um critério (_.where):

var naoJogados = _.where(desteJogador,
  { playtime_forever: 0 });

Ordenação (_.sortBy):

var ordenadoDesc = _.sortBy([5,4,6,1], function(el) {
  return -el;
});

Ao passar o contexto de dados para a renderização da view, você deve fornecer todos os dados necessários

Caso eles estejam em objetos diferentes, você vai precisar criar um outro objeto para englobá-los. Por exemplo:

response.render('jogador', {
  profile: jogadores[id],
  gameInfo: jogosDesteJogador,
  favorito: jogosDesteJogador[0]
});