Capítulo 19: Projeto Final - API de Brawlers (Parte 1) 🌵⭐

Chegamos à reta final do curso! Nos capítulos 19 e 20, vamos juntar tudo o que aprendemos para criar uma API REST completa para gerenciar personagens (Brawlers) do jogo Brawl Stars!

Nesta primeira parte, vamos configurar o projeto e criar as rotas de leitura (GET).


📖 O que vamos construir?

Uma API que permite:

  • Listar todos os Brawlers (GET).
  • Buscar um Brawler pelo nome (GET).
  • Adicionar um novo Brawler (POST - na Parte 2).

📖 Exemplo Guiado: Listando Brawlers

Vamos criar a estrutura do projeto e a primeira rota.

  1. Crie o arquivo brawlers_api.js na pasta src/:
const express = require('express');
const app = express();
 
app.use(express.json());
 
// Nosso "Banco de Dados" simulado em memória
const brawlers = [
    { id: 1, nome: "Shelly", classe: "Destruidora" },
    { id: 2, nome: "Colt", classe: "Tiro Preciso" },
    { id: 3, nome: "El Primo", classe: "Tanque" }
];
 
// Rota para listar todos os Brawlers
app.get('/brawlers', (req, res) => {
    res.json(brawlers);
});
 
// Rota para buscar por nome
app.get('/brawlers/:nome', (req, res) => {
    const nomeBusca = req.params.nome.toLowerCase();
    const brawlerEncontrado = brawlers.find(b => b.nome.toLowerCase() === nomeBusca);
    
    if (brawlerEncontrado) {
        res.json(brawlerEncontrado);
    } else {
        res.status(404).send("Brawler nao encontrado!");
    }
});
 
app.listen(3000, () => {
    console.log("API do Brawl Stars rodando em http://localhost:3000");
});

🕹️ Como Executar e Testar no VS Code

  1. Abra o terminal integrado e execute: node brawlers_api.js
  2. Acesse no navegador: http://localhost:3000/brawlers
  3. Tente buscar um específico: http://localhost:3000/brawlers/colt

📊 Ilustração Visual: Estrutura da API

Veja as rotas que criamos:

graph LR
    A[Cliente] -->|GET /brawlers| B[Retorna lista completa]
    A -->|GET /brawlers/colt| C[Retorna dados do Colt]

🛠️ Prática Obrigatória 1: Nova Propriedade

Adicione uma nova propriedade raridade em cada objeto da lista de Brawlers (ex: “Comum”, “Raro”). Reinicie o servidor e teste no navegador para ver a nova propriedade aparecendo!


🔑 Gabarito de Código

Prática 1: Lista atualizada

const brawlers = [
    { id: 1, nome: "Shelly", classe: "Destruidora", raridade: "Comum" },
    { id: 2, nome: "Colt", classe: "Tiro Preciso", raridade: "Comum" },
    { id: 3, nome: "El Primo", classe: "Tanque", raridade: "Raro" }
];

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

(Siga o padrão estabelecido no Guia)


Capitulo Anterior | Proximo Capitulo