Objetivos

Desenvolver um projeto de uma loja de carros utilizando tecnologias modernas e eficientes. Para construir esta aplicação, estão sendo utilizadas as ferramentas Express, TypeScript e Knex. Além disso, o banco de dados escolhido para ser utilizado nesta aplicação é o SQLite3, onde criaremos a tabela de carros e a tabela de marcas dos carros. As duas tabelas serão relacionadas por meio de Foreign key.

O objetivo desta aplicação é permitir que o usuário possa cadastrar, visualizar, editar e excluir os carros disponíveis na loja.

Tecnologias/softwares Utilizadas no projeto

• Node
• TypeScript
• Express
• KNEX
• SQLITE
• TablePlus
• Postman

Módulo 1 - Começando

Setup Inicial do Projeto

1. Crie a pasta “carStore”

2. Rode o comando:

   npm init --y
   

3. Rode o comando:

     npm i express
   

4. Rode o comando:

   npm i --save-dev @types/express
   

5. Rode o comando:

   npm i --save-dev nodemon
   

TypeScript

6. Rode o comando:

   npx tsc --init
   

7. Rode o comando:

   npm i --save-dev typescript
   

8. Rode o comando:

   npm i ts-node
   

9. No package.json faça as seguintes alterações:

   //Antes
   "main": "src/index.ts",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
   //Depois
   "main": "index.ts",
     "scripts": {
       "start": "nodemon src/index.ts"
   

Ao final dessas instalações seu projeto terá os seguintes arquivos:

1. A seguir crie a seguinte estrutura de diretórios e arquivos:

   1. Pasta “src” na raiz do projeto
   2. arquivo “index.ts” na pasta “src”
   3. Pastas “controllers”, “database” e “routes” na pasta “src”
   4. arquivo “carsController.ts” na pasta “controllers”
   5. arquivos “cars.ts” e “index.ts” na pasta “routes”

   Ao final seu projeto terá os seguintes arquivos:

Testando aplicação/express

Vamos utilizar o método GET do express para testar nossa aplicação e rodar na porta 3000

1. Acesse src/index.ts

2. Importe o express e suas interfaces de tipagem "Request" e "Response”

   import express, { Request, Response } from 'express'
   

3. Crie uma instância do objeto app do express.

   const app = express()
   

4. Crie o método HTTP GET

   app.get('/', (req: Request, res: Response) => {
     res.send('Olá, mundo!')
   })
   

5. Especifique em qual porta a aplicação rodará:

   const port = 3000
   app.listen(port, () => {
     console.log(`Servidor rodando na porta ${port}`)
   })
   

6. Rode “npm start”

   >> npm start
   > carstore@1.0.0 start
   > nodemon src/index.ts
   
   [nodemon] 2.0.22
   [nodemon] to restart at any time, enter `rs`
   [nodemon] watching path(s): *.*
   [nodemon] watching extensions: ts,json
   [nodemon] starting `ts-node src/index.ts`
   Servidor rodando na porta 3000
   

7. No navegador digite: http://localhost:3000/ e o resultado será:

   'Olá, mundo!'

   Isso mostra que na rota especificada a aplicação utilizando o framework express está executando com sucesso.

Knex

O Knex.js é um query builder para Node.js que permite interagir com bancos de dados SQL de uma forma mais simples e segura, evitando a escrita de código SQL "na mão" e garantindo a proteção contra ataques de injeção de SQL.

O Knex.js permite criar e gerenciar conexões com bancos de dados, definir esquemas de tabelas e executar operações CRUD (Create, Read, Update, Delete) através de métodos JavaScript encadeados em uma sintaxe que se assemelha à linguagem SQL. O Knex.js é compatível com vários bancos de dados SQL, incluindo PostgreSQL, MySQL, SQLite3, Oracle e SQL Server.

1. Instale o KNEX com o comando:

   npm i knex
   

2. Instale o SQLITE com o comando:

   npm i sqlite3
   

3. Crie o arquivo “knexfile.ts” na raiz do projeto.

4. No arquivo criado insira o seguinte código de configuração do KNEX:

   import type { Knex } from 'knex'
   
   const config: Knex.Config = {
     client: 'sqlite3',
     connection: {
       filename: './dev.sqlite3',
     },
     migrations: {
       directory: 'src/database',
     },
     useNullAsDefault: true,
   }
   
   export default config
   

Migrations

Agora vamos criar as migrations, as migrations são arquivos de migração no diretório configurado no knexfile.js (ou knexfile.ts), com o objetivo de criar novas tabelas no banco de dados.

• knexfile.ts No arquivo knexfile.ts especificamos o caminho de onde devem ser criado as migrations:

  migrations: {
      directory: "src/database",
    },
  

Migration cars

Para criar a migration cars, rode o comando:

npx  knex migrate:make create_table_cars -x ts

Na pasta database será criado uma migration cars, cole nela o seguinte código:

import { Knex } from 'knex'

export async function up(knex: Knex): Promise<void> {
  await knex.schema.createTable('cars', function (table) {
    table.increments()
    table.string('name').notNullable()
    table.integer('brand_id').notNullable
    table.foreign('brand_id').references('brands.id')
  })
}

export async function down(knex: Knex): Promise<void> {
  await knex.schema.dropTable('cars')
}

Migration brands

Para criar a migration brands, rode o comando:

npx  knex migrate:make create_table_brands -x ts

Na pasta database será criado uma migration brands, cole nela o seguinte código:

import { Knex } from 'knex'

export async function up(knex: Knex): Promise<void> {
  await knex.schema.createTable('brands', function (table) {
    table.increments()
    table.string('name').notNullable()
  })
}

export async function down(knex: Knex): Promise<void> {
  await knex.schema.dropTable('brands')
}

🚨IMPORTANTE:

É importante que as migrations sejam executadas na ordem correta para garantir a integridade do banco de dados. Quando uma migration faz referência a outra, ela deve ser executada após a migration à qual faz referência. Para garantir isso, basta renomear o arquivo da migration para ter um número maior que a outra.

• Como está:

• Correção:

✅ - Está correto, tabela brands que é referenciada pela tabela cars, sendo executada antes da tabela cars

Criando as tabelas no DB

Para criar as tabelas no banco de dados com base nas migrations criadas anteriormente, rode o comando:

npx knex migrate:latest

O arquivo “dev.sqlite3” será criado na raiz do projeto:

TablePlus

TablePlus é um software de gerenciamento de banco de dados que permite aos desenvolvedores e administradores de banco de dados trabalhar com diversos tipos de bancos de dados, como MySQL, PostgreSQL, SQLite, SQL Server e Oracle.

1. Clique em adicionar no tableplus

1. Escolha SQLIte
2. Dê um nome para seu banco de dados
3. Em “SQLite file” navegue pela pasta do seu projeto e selecione o arquivo “dev.sqlite3” que foi criado anteriormente.
4. Clique em “Save”
5. Clique no DB e verifique se as tabelas foram criadas com as colunas especificadas nas migrations.

Controller

Os arquivos controllers são um padrão de arquitetura de software utilizados em aplicações web, em que as requisições HTTP são tratadas por meio de um controlador (controller), que é responsável por receber as requisições HTTP, processá-las e enviar as respostas HTTP apropriadas.

Os arquivos controllers geralmente contêm funções que representam as diferentes operações que podem ser realizadas em um recurso, como listar, criar, atualizar ou deletar.

1. Acesse o arquivo src/controllers/carsControllers.ts

2. Insira o seguinte código:

   import { Request, Response } from "express";
   import knex from "knex";
   import config from "../../knexfile";
   
   const knexInstance = knex(config)
   
   type Car = {
       name: string,
       brand_id: number
   
   }
   
   const index = async (req: Request, res: Response): Promise<void> => {
     try {
       const cars: Cars[] = await knexInstance('cars')
         .select('cars.name', 'brands.name as brand')
         .join('brands', 'brands.id', '=', 'cars.brand_id');
       res.status(200).send(cars);
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   export default {index}
   

   Explicando o código

   • O código apresentado é um exemplo de um arquivo controller que exporta uma função index que trata uma requisição HTTP GET em uma rota específica. Antes da definição da função index, o arquivo importa os módulos Request e Response do pacote express, bem como o módulo knex e um objeto config que contém as configurações de conexão com o banco de dados, definidas no arquivo knexfile.js.
   • A seguir, o código define um tipo Cars, que representa a estrutura dos objetos que serão retornados pela função index. Esses objetos possuem duas propriedades: name (uma string que representa o nome do carro) e brand_id (um número que representa o ID da marca do carro).
   • A função index é definida como assíncrona (async) e recebe dois parâmetros: o objeto req (do tipo Request) e o objeto res (do tipo Response).
   • Dentro da função index, é realizada uma consulta ao banco de dados por meio do objeto knexInstance, que representa a conexão com o banco de dados configurada anteriormente. O método select é utilizado para selecionar os campos cars.name e brands.name da tabela cars, juntamente com o campo name da tabela brands, utilizando o método join para fazer o join entre as tabelas cars e brands, usando a coluna brand_id da tabela cars e a coluna id da tabela brands.
   • O resultado da consulta é armazenado na variável cars, que é um array de objetos do tipo Cars.
   • Se a consulta for bem-sucedida, a função index retorna uma resposta HTTP com status 200 e o array cars no corpo da resposta. Caso contrário, a função retorna a mensagem de erro no corpo da resposta.

Routes

Os arquivos de rotas definem as URLs (Uniform Resource Locators) que serão acessadas pela aplicação e os métodos HTTP que serão usados para cada uma dessas URLs. Eles mapeiam as solicitações recebidas para os métodos correspondentes dos controladores que processarão as solicitações e enviarão as respostas de volta.

1. Acesse o arquivo src/routes/cars.ts

2. Insira o seguinte código:

   import { Router } from 'express'
   import carsController from '../controllers/carsControllers'
   const router: Router = Router()
   
   router.get('/', carsController.index)
   
   export { router }
   

3. Acesse o arquivo src/routes/index.ts

4. Insira o seguinte código:

   import { router as carsRoutes } from './cars'
   import { Router } from 'express'
   
   const router: Router = Router()
   
   router.use('/cars', carsRoutes)
   
   export { router }
   

Index

1. Acesse o arquivo src/index.ts

2. Insira o seguinte código:

   import express, { Request, Response } from 'express'
   import { router } from './routes'
   const app = express()
   app.use(express.json())
   
   app.use('/api/v1', router)
   
   const port = 3000
   app.listen(port, () => {
     console.log(`Listening on ${port}`)
   })
   

Módulo 2 - Aprofundando

Até o momento construímos um back end em Node, utilizando o framework Express e como KNEX comunicamos com o banco de dados sqlite3. Criamos uma rota que trata o método GET para exibir todos os carros da nossa loja, agora vamos criar as seguintes funções:

• GET - Exibir somente um carro pelo seu ID
• POST - Inserir um carro
• PUT - Alterar os dados de um carro pelo seu ID
• DEL - Deletar um carro pelo seu ID
• GET - Exibir todas as marcas
• GET - Exibir somente uma marca pelo seu ID
• POST - Inserir uma marca
• PUT - Alterar os dados de uma marca pelo seu ID
• DEL - Deletar de uma marca pelo seu ID

Exibir somente um carro pelo seu ID

1. Acesse o arquivo src/controllers/carsController.ts

2. Insira a função:

   const show = async (req: Request, res: Response): Promise<void> => {
     try {
       const id: number = parseInt(req.params.id);
       const product: Car[] = await knexInstance('cars')
         .select('cars.name', 'brands.name as brand')
         .join('brands', 'brands.id', '=', 'cars.brand_id')
         .where({ 'cars.id': id });
       if (!product.length) throw new Error('Esse carro não existe');
       res.status(200).json(product[0]);
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   

3. Exporte a função criada no fim do arquivo

   export default { index, show, insert }
   

4. Acesse o arquivo src/routes/cars.ts e crie a rota get para exibir somente um carro pelo ID

   router.get('/:id', carsController.show)
   

Inserir um carro

1. Acesse o arquivo src/controllers/carsController.ts

2. Insira a função:

   const insert = async (req: Request, res: Response): Promise<void> => {
     try {
       const { name, brand } = req.body;
   
       const findBrand = await knexInstance('brands')
         .select('id')
         .where({ name: brand });
   
       const brandId: number = findBrand[0].id;
   
       const id: number[] = await knexInstance('cars').insert({
         name,
         brand_id: brandId,
       });
       res.status(201).send({
         id: id[0],
         name,
         brand,
       });
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   

3. Exporte a função criada no fim do arquivo

   export default { index, show, insert }
   

4. Acesse o arquivo src/routes/cars.ts e crie a rota post para adicionar um carro.

   router.post('/', carsController.insert)
   

Alterar os dados de um carro pelo seu ID

1. Acesse o arquivo src/controllers/carsController.ts

2. Insira a função:

   const update = async (req: Request, res: Response): Promise<void> => {
     try {
       const id: number = parseInt(req.params.id);
       const { name, brand }: { name: string; brand: string } = req.body;
   
       const findBrand = await knexInstance('brands')
         .select('id')
         .where({ name: brand });
   
       const brandId = findBrand[0].id;
       const updateCar = {
         name,
         brand_id: brandId,
       };
   
       const car = await knexInstance('cars')
         .update(updateCar)
         .where({ id });
   		if (!car) throw new Error("Esse carro não existe");
       res.status(201).send({
         id,
         name,
         brand
       });
   
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   

3. Exporte a função criada no fim do arquivo

   export default { index, show, insert, update }
   

4. Acesse o arquivo src/routes/cars.ts e crie a rota put para atualizar os dados de um carro.

   router.put('/:id', carsController.update)
   

Deletar um carro pelo seu ID

1. Acesse o arquivo src/controllers/carsController.ts

2. Insira a função:

   const remove = async (req: Request, res: Response):Promise<void> =>{
     try {
         const id: number= parseInt(req.params.id);
         const car: number = await knexInstance("cars").delete().where({ id });
         if (!car) throw new Error("Esse carro não existe");
   
         res.status(200).json({ msg: "Carro deletado" });
       } catch (error: any) {
         res.send(error.message ? { error: error.message } : error);
       }
   }
   

3. Exporte a função criada no fim do arquivo

   export default { index, show, insert, update, remove }
   

4. Acesse o arquivo src/routes/cars.ts e crie a rota put para deletar um carro.

   router.delete('/:id', carsController.remove)
   

Rotas das brands

Agora já criamos todo o backend para realizar as ações de um CRUD(Create, read, update e delete) dos carros, precisamos adicionar as mesmas operações para a tabela das marcas. O processo é similar:

1. Crie um arquivo “brandsController.ts” em src/controllers.

2. Acesse o arquivo src/controllers/brandsController.ts

3. Insira o seguinte código:

   import { Request, Response } from 'express';
   import knex from 'knex';
   import config from '../../knexfile';
   
   const knexInstance = knex(config);
   
   type Brand = {
     name: string;
     brand_id: number;
   };
   
   const index = async (req: Request, res: Response): Promise<void> => {
     try {
       const brands: Brand[] = await knexInstance('brands')
         .select('*')
       res.status(200).send(brands);
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   export default { index };
   

4. Acesse a pasta src/routes, crie o arquivo “brands.ts” e insira o código:

   import { Router } from 'express'
   import brandsController from '../controllers/brandsController'
   const router: Router = Router()
   
   router.get('/', brandsController.index)
   
   export { router }
   

5. Acesse a pasta src/routes, e modifique o arquivo “index.ts”:

   import { router as carsRoutes } from './cars'
   import { router as brandsRoutes } from './brands'
   import { Router } from 'express'
   
   const router: Router = Router()
   
   router.use('/cars', carsRoutes)
   router.use('/brands', brandsRoutes)
   
   export { router }
   

Adicione as funções restantes

Seguindo o mesmo pensamento das funções e rotas dos carros, faremos agora das marcas.

1. O arquivo “brandsController.ts” localizado em src/controllers, ficará assim:

   import { Request, Response } from 'express';
   import knex from 'knex';
   import config from '../../knexfile';
   
   const knexInstance = knex(config);
   
   type Brand = {
     name: string;
     brand_id: number;
   };
   
   const index = async (req: Request, res: Response): Promise<void> => {
     try {
       const brands: Brand[] = await knexInstance('brands').select('*');
       res.status(200).send(brands);
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   const show = async (req: Request, res: Response): Promise<void> => {
     try {
       const id: number = parseInt(req.params.id);
       const brand = await knexInstance('brands').select('*').where({ id });
       if (!brand.length) throw new Error('Essa marca não existe');
   
       res.status(200).json(brand);
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   const insert = async (req: Request, res: Response): Promise<void> => {
     try {
       const { name } = req.body;
   
       const id: number[] = await knexInstance('brands').insert({
         name,
       });
   
       res.status(201).json({ id: id[0], name });
     } catch (error: any) {
       res.send(error);
     }
   };
   const update = async (req: Request, res: Response): Promise<void> => {
     try {
       const id = req.params.id;
       const { name } = req.body;
       const updatedData = { name };
   
       const product = await knexInstance('brands')
         .update(updatedData)
         .where({ id });
       if (!product) throw new Error('Essa marca não existe');
   
       res.status(201).json({ id: id[0], name });
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   const remove = async (req: Request, res: Response): Promise<void> => {
     try {
       const id: number = parseInt(req.params.id);
       const product = await knexInstance('brands').delete().where({ id });
   
       if (!product) throw new Error('Essa marca não existe');
   
       res.status(200).json({ msg: 'Marca deletada' });
     } catch (error: any) {
       res.send(error.message ? { error: error.message } : error);
     }
   };
   
   export default { index, show, insert, update, remove };
   

2. O arquivo “brands.ts” localizado em src/routes, ficará assim:

   import { Router } from 'express'
   import brandsController from '../controllers/brandsController'
   const router: Router = Router()
   
   router.get('/', brandsController.index)
   router.get('/:id', brandsController.show)
   router.post('/', brandsController.insert)
   router.put('/:id', brandsController.update)
   router.delete('/:id', brandsController.remove)
   
   export { router }
   

3. O arquivo “index.ts” localizado em src/routes, ficará assim:

   import { router as carsRoutes } from './cars'
   import { router as brandsRoutes } from './brands'
   import { Router } from 'express'
   
   const router: Router = Router()
   
   router.use('/cars', carsRoutes)
   router.use('/brands', brandsRoutes)
   
   export { router }
   

Teste suas requisições com Postman

O Postman é uma ferramenta de colaboração de desenvolvimento de API que permite aos usuários criar, compartilhar, testar e documentar APIs. É uma plataforma completa para desenvolvedores de API que permite enviar solicitações HTTP para um servidor da web e analisar a resposta. O Postman permite criar solicitações HTTP complexas rapidamente, salvar coleções de solicitações e compartilhar essas coleções com outros desenvolvedores. Ele também oferece recursos de colaboração, como documentação de API e compartilhamento de código. O Postman é amplamente utilizado por equipes de desenvolvimento de software em todo o mundo para acelerar o processo de desenvolvimento de APIs e melhorar a eficiência da equipe.

As requisições que fizemos nos carros foram:

GET CAR (VER OS CARROS)

1. Selecione o tipo GET na requisição
2. Insira a URL: http://localhost:3000/api/v1/cars/

GET CAR BY ID (VER UM CARRO PELO ID)

1. Selecione o tipo GET na requisição
2. Insira a URL: http://localhost:3000/api/v1/cars/1

No final da URL é onde será inserido o ID do carro que deseja visualizar

POST CAR (INSERIR UM CARRO)

1. Selecione o tipo POST na requisição

2. http://localhost:3000/api/v1/cars

3. Essa requisição espera receber um objeto JSON com o nome do carro e a marca.

   Exemplo:

   {
       "name": "Palio 2012",
       "brand": "Fiat"
   }
   

PUT CAR (MODIFICAR UM CARRO)

1. Selecione o tipo PUT na requisição

2. http://localhost:3000/api/v1/cars/1

3. No final da URL é onde será inserido o ID do carro que deseja modificar

4. Essa requisição espera receber um objeto JSON com o nome do carro e a marca.

   Exemplo:

   {
       "name": "Hilux",
       "brand": "Toyota"
   }
   

DELETE CAR (DELETAR UM CARRO)

1. Selecione o tipo DELETE na requisição
2. http://localhost:3000/api/v1/cars/1
3. No final da URL é onde será inserido o ID do carro que deseja deletar

Links úteis:

1. Documentação KNEX
2. Documentação Node.js
3. Documentação TypeScript
4. Documentação Express
5. Postman
6. TablePlus