Criando um currículo com Node.js, Express e templates EJS

Algo comum quando estamos aprendendo a desenvolver software é a vontade ou a necessidade de praticar. Sabemos que, se focarmos somente em procurar conteúdo, podemos acabar caindo na paralisia por análise. Então hoje vamos aprender a criar uma pequena aplicação com Node.js, Express e EJS para colocar uma página HTML com nosso currículo no ar.

Nos últimos artigos aprendemos a utilizar o Git, trabalhar com repositórios no GitHub, linha de comando, como funciona um programa de computador, o básico de programação, e como configurar nosso ambiente de trabalho com Node.js e Visual Studio Code. Já praticamos Node.js criando uma CLI, um jogo de Jokenpô na linha de comando. Se você não sabe nada disso ou não viu os artigos anteriores, confere a série aqui:

Do zero ao fullstack com Node.js, Express e React.js.

Para este tutorial, espero que você crie um repositório no GitHub e versione seu código com Git. Isso para treinar suas habilidades de versionamento de código e continuar criando seu portfólio.

O que é o Express

Sabemos que Node.js é um ambiente de execução da linguagem de programação JavaScript no lado do servidor e serve para criar vários tipos de softwares desde linha de comando, Web até IoT (Internet das Coisas). O Express é um framework, uma ferramenta de programação, que roda em cima do Node.js para criarmos aplicações web das mais variadas.

O Express facilita a nossa vida para não precisarmos nos preocupar com abstrações que outras pessoas já se preocuparam em resolver. Vamos utilizar esta ferramenta para criar uma página web, mas poderia ser utilizada também para servir APIs REST.

Criando a estrutura básica do projeto com Express

Vamos utilizar nosso conhecimento em terminal para criar a estrutura básica do nosso projeto com Express.

Execute os comandos abaixo:

mkdir curriculo-expresso
cd curriculo-expresso

Agora é a hora de você criar um repositório Git e começar a versionar o desenvolvimento.

Iniciando um projeto Node.js

Quando vamos criar um projeto Node.js precisamos criar um arquivo de configuração chamado package.json e adicionar as informações da nossa aplicação/pacote.

Execute o comando abaixo no seu terminal e vá respondendo as perguntas do nome do seu projeto, descrição, etc. O que você não souber ou não quiser responder, pode pressionar um enter.

npm init

Caso você não queira responder nada, basta rodar o seguinte comando:

npm init -y

Se você executar este comando, terminal irá retornar a seguinte mensagem:

Wrote to /workspace/curriculo-expresso/package.json:

{
  "name": "curriculo-expresso",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Com o caminho onde o arquivo foi gerado e as informações que ele preencheu. Caso você queira alterar algo, basta abrir no seu editor de textos e alterar (inclusive faremos isso mais para frente).

Com isso, nosso projeto Node.js está iniciado.

Instalar o Express

O Express é uma dependência do nosso projeto. Ele não foi instalado junto com o Node.js quando configuramos nosso ambiente de desenvolvimento. Por isso precisamos instalar e adicionar ele no nosso package.json.

Para isso, execute o seguinte comando que irá instalar (install) o Express e salvar o nome do pacote e a versão atual no package.json como uma dependência da aplicação (—save).

npm install --save express

Será iniciada a instalação do pacote e quando finalizar irá aparecer algo assim:

➜  curriculo-expresso git:(master) ✗ npm install --save express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN curriculo-expresso@1.0.0 No description
npm WARN curriculo-expresso@1.0.0 No repository field.

+ express@4.17.1
added 50 packages from 37 contributors and audited 126 packages in 3.876s
found 0 vulnerabilities

Agora temos a pasta node_modules com o Express, o nosso package.json alterado e um arquivo chamado package-lock.json, que garante integridade na instalação de versões de pacotes, no nosso projeto.

Rodando um comando ls, temos o seguinte retorno:

➜  curriculo-expresso git:(master) ✗ ls
node_modules      package-lock.json package.json

Se executarmos um git status no terminal, veremos que o Git nos informa que temos estes arquivos para adicionar ao versionamento.

➜  curriculo-expresso git:(master) ✗ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	node_modules/
	package-lock.json
	package.json

nothing added to commit but untracked files present (use "git add" to track)

Mas não queremos versionar a nossa pasta node_modules. Esta pasta carrega todos os pacotes que utilizamos na aplicação e tudo o que nossos pacotes precisam para funcionar. São muitos arquivos e não precisamos guardar estes arquivos, uma vez que podemos instalar tudo de novo via NPM rodando um npm install dentro do diretório com o package.json. Por isso o nosso package.json é tão importante.

Vamos remover a pasta do versionamento. Crie um arquivo chamado .gitignore (com ponto no começo mesmo) e adicione o nome dessa pasta nele.

echo "node_modules" >> .gitignore

Agora execute o git status novamente e verá que essa pasta não é mais acompanhada pelo Git.

➜  curriculo-expresso git:(master) ✗ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	.gitignore
	package-lock.json
	package.json

Subindo o servidor com Express

Com tudo configurado e instalado, podemos agora subir nosso primeiro servidor com Express. Vamos criar um arquivo chamado app.js e neste arquivo adicionamos o seguinte conteúdo:

const express = require('express');
const port = 3000;
const app = express();

app.get('/', (req, res, next) => {
  res.send({
    title: 'Meu primeiro servidor Express',
    version: '0.0.0',
  });
});

app.listen(port, (err) => {
  console.log(`Server is listening on ${port}`);
});

O que estamos fazendo aqui é:

const express = require('express');

Importamos o Express para a nossa aplicação poder utilizar

const port = 3000;

Criamos uma constante para a porta pela qual as pessoas poderão acessar nosso servidor.

const app = express();

Instanciamos uma aplicação Express. A partir de agora podemos utilizar os comandos que o Express nos fornece.

app.get('/', (req, res, next) => {
  res.send({
    title: 'Meu primeiro servidor Express',
    version: '0.0.0',
  });
});

Criamos a nossa primeira rota de acesso aos nossos recursos. Uma rota diz ao nosso servidor o que deve ser executado quando alguém acessar algum endereço (especificado por nós). Neste caso, quando a pessoa acessar localhost:3000 será executada a função que envia uma resposta ao cliente (navegador) com o um título e a versão da nossa aplicação.

app.listen(port, (err) => {
  console.log(`Server is listening on ${port}`);
});

Dizemos ao servidor para que fique “escutando” (listen) a porta (port, que é 3000) e damos um console.log no terminal para dizer que está tudo OK.

Para rodar esta aplicação, execute o comando:

node app

Teremos nosso retorno informando que o servidor está no ar.

➜  curriculo-expresso git:(master) ✗ node app
Server is listening on 3000

E podemos então acessar o endereço localhost:3000 no navegador e receber as informações da nossa aplicação.

Agora seria um excelente momento para você guardar no Git as alterações que você fez.

Servindo páginas HTML

O que devolvemos para o navegador nessa primeira instância foi um JSON (JavaScript Object Notation), mas nós queremos exibir informações na página. Queremos servir algo elegante. Para isso precisamos servir documentos HTML, que o navegador vai interpretar e finalmente mostrar as coisas de uma maneira interessante.

Vamos instalar um motor de renderização de templates (a nossa camada de visualização) em nosso projeto, o EJS.

Pare o servidor, se ele estiver ativo, com o comando CTRL+C e execute o comando para instalação do EJS:

npm install --save ejs

Agora vamos alterar o nosso app.js adicionando as seguintes linhas:

… outros requires

const path = require('path');

// Setup view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

Também modifique o res.send para res.render. Não vamos mais somente enviar dados para o navegador (send), mas renderizar um documento (render) e enviar este documento.

app.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Meu primeiro servidor Express',
    version: '0.0.0',
  });
});

Teremos um código assim, no final dessa atualização:

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');

// Setup view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Meu primeiro servidor Express',
    version: '0.0.0',
  });
});

app.listen(port, (err) => {
  console.log(`Server is listening on ${port}`);
});

Agora crie a pasta views, pois é nela que vamos adicionar todos os nossos templates. Dentro da pasta views, crie um arquivo chamado index.ejs. Repare que não é um arquivo .js, mas um .ejs, que é a extensão de arquivos de templates que o EJS irá renderizar e transformar em HTML durante o tempo de execução (runtime) do nosso servidor.

Um template engine e os templates, servem para criarmos esqueletos HTML (ou outros tipos de estruturas base) que irão receber algum tratamento, como inserção de dados, e depois será enviado para o usuário final.

Adicione o seguinte conteúdo dentro do index.ejs:

<!doctype html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <main>
      <h1><%= title %></h1>
      <p>Bem vindo(a) ao <strong><%= title %></strong></p>
    </main>
    <footer>
      <p>Versão <%= version %></p>
    </footer>
  </body>
</html>

Se você nunca mexeu com HTML, isso é uma estrutura de uma página que você acessa no navegador. Pressione o botão direito do mouse sobre esse texto, depois clique em inspecionar elemento. Você verá a estrutura HTML do meu blog. O seu navegador tem o incrível poder de ler isso, interpretar e saber que cada trecho é um tipo de dado semântico que deve aparecer de uma determinada maneira na interface.

As tags HTML são aquelas com abertura e fechamento via sinal de menor e maior que (<>) e sinal de menor e maior que com uma barra no meio (</>). Como a tag main, por exemplo (

Os dados que recebemos aqui foi o objeto JavaScript logo depois do nome do arquivo a ser renderizado:

res.render('index', {
  title: 'Meu primeiro servidor Express',
  version: '0.0.0',
});

Ou seja:

{
        title: "Meu primeiro servidor Express",
        version: "0.0.0"
 }

Você vai precisar desligar o servidor de novo e atualizar a página que está aparecendo no localhost:3000.

Não precisar ficar reiniciando o servidor

Vamos melhorar um pouco a nossa vida. Toda vez que alteramos alguma linha de código nos arquivos .js temos que reiniciar o servidor. Isso para que o Node receba as alterações. Vamos instalar um pacote que pode nos ajudar a não precisar mais reiniciar o servidor, este pacote é o Nodemon.

Instale o nodemon com o comando:

npm install --save-dev nodemon

Repare no —save-dev. Agora não estamos salvando este pacote como uma dependência do nosso projeto, mas como uma dependência de desenvolvimento. Isso significa que, se este pacote não estiver instalado e alguém rodar um node app.js a nossa aplicação irá funcionar normalmente. Não precisamos dela na hora de subir nossa aplicação para um servidor conectado a internet (quando colocar em produção).

Agora conseguimos rodar o comando node_modules/nodemon/bin/nodemon.js app e nosso servidor vai se atualizar automaticamente quando nosso código for alterado. Mas calma! Não precisa decorar esse caminho e rodar tudo isso toda vez. Adicione o seguinte conteúdo no seu package.json:

  "scripts": {
    "dev": "node_modules/nodemon/bin/nodemon.js app"
  },

A chave “scripts” nos possibilita criar comandos, scripts e rodar isso tudo através do NPM. Agora quando você rodar o comando npm run dev o nodemon será executado. Faça isso: desligue o servidor e rode somente o npm run dev.

Criando outras rotas

Com o nosso servidor rodando em paz, vamos agora criar outras rotas para a nossa aplicação. Temos um portfólio e queremos colocar o nosso currículo ali. Podemos deixar a página inicial como uma página inicial propriamente dita e criar uma outra que é o nosso currículo.

Vamos criar a rota logo abaixo da rota /. Adicione o seguinte código lá:

app.get('/curriculo', (req, res, next) => {
  res.render('curriculo');
});

E agora crie o arquivo curriculo.ejs na pasta views. Como você já aprendeu anteriormente, a rota ‘/curriculo’ estará agora disponível logo depois de localhost. Então poderemos acessar localhost:3000/curriculo e algo será exibido logo depois que criamos o template.

Vamos adicionar a seguinte linha no arquivo index.ejs logo depois do texto “Bem vindo(a)…”:

<a href="/curriculo">Meu currículo</a>

O arquivo final será:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <main>
      <h1><%= title %></h1>
      <p>Bem vindo(a) ao <strong><%= title %></strong></p>
      <a href="/curriculo">Meu currículo</a>
    </main>
    <footer>
        <p>Versão <%= version %></p>
    </footer>
  </body>
</html>

Agora vamos criar o arquivo curriculo.ejs dentro de views e adicionar o seguinte conteúdo nele:

<!doctype html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <main>
      <h1><%= title %></h1>
      <p>Bem vindo(a) ao <strong><%= title %></strong></p>
      <strong><%= name %></strong>
      <p><%= profession %></p>
      <p><%= description %></p>
      <ul>
        <% experience.map(experience => { %>
        <li>
          <div>
            <strong><%= experience.company %>:</strong>
            <strong><%= experience.office %></strong>
            <br />
            <span><%= experience.description %></span>
          </div>
        </li>
        <% }); %>
      </ul>
      <ul>
        <% education.map(education => { %>
        <li>
          <div>
            <strong><%= education.institution %></strong>
            <br />
            <span><%= education.description %></span>
          </div>
        </li>
        <% }); %>
      </ul>
      <ul>
        <% skills.map(skill => { %>
        <li><%= skill %></li>
        <% }); %>
      </ul>
    </main>
  </body>
</html>

Temos algo novo aqui! As tags HTML e as tags da template engine continuam existindo, porém apareceram alguns campos utilizando o comando .map do JavaScript. Precisamos utilizar o map para iterar sobre a lista de itens, lembra-se dos laços de repetição?

      <% experience.map(experience => { %>
          <li>
              <div>
                  <strong><%= experience.company %>:</strong>
                  <strong><%= experience.office %></strong>
                  <br>
                  <span><%= experience.description %></span>
              </div>
          </li>
      <% }); %>

O que acontece é que, para cada item dentro de experience, será executada uma função (aquela função anônima que vem logo na sequência) e então retorna um item HTML (o

app.get('/curriculo', (req, res, next) => {
  res.render('curriculo', {
    title: 'Meu currículo',
    name: 'William Oliveira',
    profession: 'Software Engineer',
    description:
      'Experiência em desenvolvimento de single page applications com JavaScript e frameworks JavaScript (já trabalhei com Angular e React), module bundlers, package managers, transpilers (como Babel), pre processadores CSS (Sass e Stylus), task managers, arquitetura CSS (como BEM e SMACSS), Git, SEO, acessibilidade e usabilidade.',
    experience: [
      {
        company: 'Loggi Tecnologia',
        office: 'Software Engineer',
        description:
          'Trabalho no squad de desenvolvimento do software de gestão de warehouses da Loggi, o ProXD. Nosso trabalho é automatizar os processos de recebimento, gestão, armazenamento, transferências e expedição de pacotes, cortes, rotas e monitoramento dos pacotes e sacas de entregas para ecommerces.',
      },
      {
        company: 'Casa do Código',
        office: 'Escritor',
        description: 'Autor do livro: O universo da programação: Um guia de carreira em desenvolvimento de software',
      },
    ],
    education: [
      {
        institution: 'Vida',
        description: 'Sobrevivência nas ruas',
      },
    ],
    skills: ['backend', 'frontend', 'infra', 'mobile'],
  });
});

const data = {
  title: 'Meu currículo',
  name: 'William Oliveira',
  profession: 'Software Engineer',
  description:
    'Experiência em desenvolvimento de single page applications com JavaScript e frameworks JavaScript (já trabalhei com Angular e React), module bundlers, package managers, transpilers (como Babel), pre processadores CSS (Sass e Stylus), task managers, arquitetura CSS (como BEM e SMACSS), Git, SEO, acessibilidade e usabilidade.',
  experience: [
    {
      company: 'Loggi Tecnologia',
      office: 'Software Engineer',
      description:
        'Trabalho no squad de desenvolvimento do software de gestão de warehouses da Loggi, o ProXD. Nosso trabalho é automatizar os processos de recebimento, gestão, armazenamento, transferências e expedição de pacotes, cortes, rotas e monitoramento dos pacotes e sacas de entregas para ecommerces.',
    },
    {
      company: 'Casa do Código',
      office: 'Escritor',
      description: 'Autor do livro: O universo da programação: Um guia de carreira em desenvolvimento de software',
    },
  ],
  education: [
    {
      institution: 'Vida',
      description: 'Sobrevivência nas ruas',
    },
  ],
  skills: ['backend', 'frontend', 'infra', 'mobile'],
};

module.exports = data;

const CurriculoModel = require('../models/curriculo-model');

exports.getData = () => {
  return CurriculoModel;
};

exports.getName = () => {
  return CurriculoModel.name;
};

exports.getTitle = () => {
  return CurriculoModel.title;
};

exports.getProfession = () => {
  return CurriculoModel.profession;
};

exports.getDescription = () => {
  return CurriculoModel.description;
};

exports.getExperience = () => {
  return CurriculoModel.experience;
};

exports.getEducation = () => {
  return CurriculoModel.education;
};

exports.getSkills = () => {
  return CurriculoModel.skills;
};

const CurriculoModel = require('../models/curriculo-model');

exports.getData = () => {
  return CurriculoModel;
};

const CurriculoController = require('./controllers/curriculo-controller');

app.get('/curriculo', (req, res, next) => {
  const curriculoData = CurriculoController.getData();
  res.render('curriculo', curriculoData);
});

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
  res.render('index', {
    title: 'Meu primeiro servidor Express',
    version: '0.0.0',
  });
});

module.exports = router;

const express = require('express');
const router = express.Router();
const CurriculoController = require('../controllers/curriculo-controller');

router.get('/curriculo', (req, res, next) => {
  const curriculoData = CurriculoController.getData();
  res.render('curriculo', curriculoData);
});

module.exports = router;

app.use(express.static(path.join(__dirname, 'public')));

body {
  font:
    18px 'Lucida Grande',
    Helvetica,
    Arial,
    sans-serif;
  line-height: 2;
}

main,
footer {
  max-width: 960px;
  margin: 0 auto;
}

<link rel="stylesheet" href="/styles/main.css" />

<!doctype html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/styles/main.css" />
  </head>

  ...restante do conteúdo
</html>

Cannot GET /curriculo/nem-tem-essa-rota

npm install --save http-errors

const createError = require('http-errors');

// 404
app.use((req, res, next) => {
  next(createError(404));
});

// error handler
app.use((err, req, res, next) => {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

// 404
app.use((req, res, next) => {
  next(createError(404));
});

app.use((err, req, res, next) => {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>