Introdução (3 min)

Imagine uma padaria. Você tem a massa (os dados da sua aplicação) e quer criar diferentes tipos de pães (páginas HTML). Em vez de moldar cada pão individualmente, você usa formas (templates) que definem o formato final. Os Template Engines são essas “formas” no mundo do desenvolvimento web, permitindo gerar páginas HTML dinamicamente.

Essa técnica é essencial para APIs modernas, pois possibilita a criação de interfaces ricas e personalizadas com base nos dados disponíveis. Nesta aula, vamos implementar Template Engines usando EJS, Handlebars e Pug com Node.js e Express, focando em melhores práticas para ambientes de produção como o HostGator Plano M.

No ecossistema Node.js/Express, os Template Engines se integram perfeitamente ao middleware, permitindo renderizar views dinamicamente antes de enviá-las ao cliente.

Conceito Fundamental (7 min)

Um Template Engine é uma ferramenta que permite gerar documentos dinamicamente, preenchendo um template com dados. No contexto web, isso geralmente significa gerar HTML usando dados do servidor. A terminologia comum inclui termos como “renderizar”, “compilar” e “template”.

Em produção, Template Engines são usados para criar desde páginas de e-commerce que exibem produtos até dashboards administrativos que mostram métricas. Eles se integram com bancos de dados, APIs externas e outras tecnologias do backend para fornecer dados aos templates.

Vantagens: melhor separação de responsabilidades entre lógica e apresentação, código mais limpo e manutenível, maior produtividade.

Desvantagens: pequena curva de aprendizado inicial, possível impacto na performance se mal utilizado.

Implementação Prática (10 min)

// server.js
const express = require('express');
const app = express();
const path = require('path');

// Configurar o EJS como view engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// Rota principal
app.get('/', (req, res) => {
  const produtos = [
    { nome: 'Camiseta', preco: 25 },
    { nome: 'Calça', preco: 50 },
    { nome: 'Boné', preco: 15 },
  ];
  res.render('index', { produtos }); // Renderiza o template 'index.ejs' com os dados
});
// Iniciar o servidor
const PORT = process.env.PORT || 3000; // Porta dinâmica para HostGator
app.listen(PORT, () => {
  console.log(Servidor rodando na porta ${PORT});
});

Produtos



    
📚 Informações da Aula

    
Curso: API Completo - Node.js & Express

    
Tempo estimado: 25 minutos

    
Pré-requisitos: JavaScript básico



<% produtos.forEach(produto => { %>
<%= produto.nome %> - R$ <%= produto.preco %>
<% }); %>

Instalação das dependências

npm install express ejs

Executar a aplicação

node server.js

Este exemplo usa EJS. Para Handlebars (“npm install express handlebars`) e Pug (`npm install express pug`), a configuração é similar, apenas alterando o view engine e a sintaxe do template. Lembre-se de criar a pasta views.

Crie um novo template que exiba os detalhes de um único produto. Receba o ID do produto pela URL (ex: /produto/1) e exiba seus detalhes na página. Utilize o array produtos do exemplo anterior.

// Adicionar a rota /produto/:id
app.get('/produto/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const produto = produtos.find(p => p.id === id); // Assumindo que os produtos têm um ID
  if (!produto) {
    return res.status(404).send('Produto não encontrado'); // Error handling
  }
  res.render('produto', { produto });
});

<%= produto.nome %>
Preço: R$ <%= produto.preco %>

Teste acessando /produto/0` no seu navegador (assumindo que o primeiro produto tem ID 0). Para debugar erros, verifique o console do navegador e do servidor.

Próximos passos: explore recursos avançados dos Template Engines como layouts, partials e helpers. Considere também a integração com um banco de dados para dados dinâmicos.