Curso FCV

CURSO_FCV.md

Curso node.js FCV

Instalando node local

O node.js pode ser baixado no site https://nodejs.org/en/download/ para a versão do sistema operacional que você utiliza.

Para conferir se a instalação deu certo, abra o terminal (prompt de comando no windows) e digite: node --version

O resultado deve ser a versão do node.js que você baixou e instalou.

Outra ferramente importante para o desenvolvimento é o NPM (Node Package Manager), essa ferramenta faz a gestão das dependências do projeto. O site oficial para buscar pacotes dessa ferramenta é https://www.npmjs.com/.

Criando um projeto

O NPM faz a o controle dos pacotes a serem instalados a partir do arquivo package.json, este arquivo possui um formato específico e pode ser iniciado pelo seguinte comando:

npm init

É só seguir as orientações que vão aparecer no terminal. Outra curiosidade é que maioria dos pacotes que estão no NPM utilizam o sistema de versionamento SEMVER.

Instalando e salvando os módulos

Neste mini curso vamos utilizar o framework KOA, a documentação deste componente pode ser obtida em: http://koajs.com/.

O comando do npm para instalar um pacote é npm install ou simplificado como npm i, para salvar o pacote no package.json utilize o parâmetro --save. Outra caracterísctica interessante é que podemos salvar pacotes somente para desenvolvimento, utilizando o parâmetro --save-dev.

Para instalar o KOA temos que executar o seguinte comando:

npm install --save koa

Configurando o start da aplicação

Primeiro passo que temos para iniciar é criar o arquivo index.js o qual será o entrypoint da aplicação.

Após criado o arquivo vamos importar o pacote que foi instalado anteriormente. No javascript você pode utilizar 3 tipos de variáveis: var, let e const.

Declarações de variáveis, independente de onde se encontram no seu código, são o primeiro item que o interpretador considera, onde reserva um espaço na memória para guardar o valor nela declarado.

Se você tiver curiosidade sobre cada tipo de declaração (var, let e const), pode verificar nos seguintes links:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

Seguindo com nosso propósito, vamos importar a biblioteca do KOA numa const e criar o app a partir desse import. Uma vez isso feito é criado o primeiro middleware, o qual irá modificar a requisição incluindo o Hello World.

Por último falar que a aplicação está escutando na porta 3000, ou qualquer outra porta que seja conveniente para seu desenvolvimento.

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);

Uma vez que o seu código está pronto e salvo, pode ser iniciado com o comando:

node index.js

Para acessar a aplicação utilize o endereço: http://localhost:3000/.

Middlewares

Middlewares são funções que tem acesso ao contexto da aplicação.

Eles podem ter as seguintes funções:

• Executar qualquer código
• Fazer alterações no contexto da aplicação (request e response)
• Finalizar o ciclo entre request e response
• Chamar o próximo middleware acoplado a aplicação

Exemplos comuns para se utilizar como middleware são Logs e Autenticação.

No exemplo a seguir vamos criar um log antes e depois da aplicação.

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
    console.log('Before', new Date());
    console.log('Request', ctx.request);
    next();
});

app.use(async (ctx, next) => {
  ctx.body = 'Hello World';
  next();
});

app.use(async (ctx) => {
    console.log('Response', ctx.response);
    console.log('After', new Date());
});

app.listen(3000);

Uma vez alterado o index.js você deve parar a execução anterior (Ctrol + C) e executar novamente para ele carregar a aplicação com as novas alterações.

Agora quando você acessar o endereço http://localhost:3000/ irá aparecer no terminal um log parecido com o este:

Before 2017-11-08T12:42:17.651Z
Request { method: 'GET',
  url: '/',
  header: 
   { host: 'localhost:3000',
     connection: 'keep-alive',
     'user-agent': 'Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.75 Safari/537.36',
     'upgrade-insecure-requests': '1',
     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7'
Response { status: 200,
  message: 'OK',
  header: 
   { 'content-type': 'text/plain; charset=utf-8',
     'content-length': '11' },
  body: 'Hello World' }
After 2017-11-08T12:42:17.661Z

Caso apareça o log duas vezes não se assuste, acessando qualquer link pelo navegador ele pode tentar abrir também o arquivo favicon.ico e realizar mais uma requisição, o que justifica duas requisições GET.

Criar rota

npm i --save koa-router

Carregando views

npm i --save koa-views handlebars

const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

const app = new Koa();
const router = new Router();

app.use(views(__dirname + '/src/views/', {
  map: { hbs: 'handlebars' }
}));

router.get('/', async ctx => {
  ctx.state = {
    title: 'Hello world',
    date: new Date()
  };

  return ctx.render('./index.hbs');
});

router.get('/teste', async ctx => {
  ctx.body = 'Teste';
})

app.use(router.routes());

app.listen(3000);
console.log('listen 3000')

src\views\index.hbs

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Curso FCV</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <h2>{{ date }}</h2>
  <p>http://dontpad.com/node-js-fcv</p>
</body>
</html>

Criando formulário e lendo

Executar no terminal: npm i --save koa-bodyparser

Arquivo: index.js

const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();

app.use(views(__dirname + '/src/views/', {
  map: { hbs: 'handlebars' }
}));

app.use(bodyParser());

router.get('/', async ctx => {
  ctx.state = {
    title: 'Hello world',
    date: new Date()
  };

  return ctx.render('./index.hbs');
});

router.get('/contato', async ctx => {
  return ctx.render('./contato.hbs');
});

router.post('/salvar-contato', async ctx => {
  ctx.state = ctx.request.body;
  ctx.state.data = new Date();

  return ctx.render('./visualizar.hbs');
});

router.get('/teste', async ctx => {
  ctx.body = 'Teste';
});

app.use(router.routes());

app.listen(3000);
console.log('listen 3000')

Arquivo: src\views\contato.hbs

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <form action="/salvar-contato" method="post">
    <input type="text" name="nome" placeholder="Nome">
    <input type="email" name="email" placeholder="Email">
    <textarea name="mensagem" placeholder="Digite aqui sua mensagem">
    </textarea>
    <input type="submit" value="Salvar">
  </form>
</body>
</html>

Arquivo: visualizar.hbs

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <h1>Contato Recebido</h1>
  <ul>
      <li>Nome: {{ nome }}</li>
      <li>Email: {{ email }}</li>
      <li>Mensagem: {{ mensagem }}</li>
      <li>Recebido em: {{ data }}</li>
  </ul>
</body>
</html>