INTRODUÇÃO AO BACKEND

Programação para Dispositivos Móveis

Prof. Mr. Fabio Abrantes Diniz

fabio.abrantes.diniz@gmail.com
 NodeJs
• É um ambiente em tempo de execução open-
source e multiplataforma
▪ criar todo tipo de aplicativos e ferramentas do lado
servidor (backend)

• Benefícios
▪ Performance excelente
▪ Código em javascript
▪ Possui gerenciador de pacotes NPM
▪ É portátil
▪ Grande comunidade
Revisando NodeJs
Características do Node
Características do Node
 Dependências do Node
• Bibliotecas padrões presentes no
Nodejs
▪ https://nodejs.org/dist/latest-v14.x/docs/api/
 Instalando o NodeJS
• Linux
 Instalando NodeJS
• Windows
▪ Utilizando o gerenciador de pacotes Chocolatey
✓ No powerShell
✓ executa Get-ExecutionPolicy
– verifica se o presente no sistema está compatível
com o que o Chocolatey precisa
– Caso ele retorne Restricted
» Set-ExecutionPolicy RemoteSigned
» E escolha a opção [A] Sim para Todos
✓ executa Get-ExecutionPolicy
 Instalando NodeJS
• Windows
▪ Instalando o chocolatey
✓ Set-ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol =
[System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object
System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1’))

▪ Instalando o NodeJS com o chocolatey

✓ cinst nodejs-lts
✓ Depois
– node -v
– npm –v
▪ Instalando o Yarn
✓ cinst yarn
– yarn --version
 Atualizando o NodeJs
• Windows
▪ choco upgrade nodejs-lts
✓ node -v
✓ npm –v
▪ choco upgrade yarn
✓ yarn –version
• Linux
▪ sudo apt-get update && sudo apt-get upgrade
✓ node -v
✓ npm –v
▪ sudo apt-get update sudo apt-get --only-upgrade install yarn
✓ yarn --version
Gerenciador de pacotes -NPM
 Alguns comandos do NPM

• Comandos mais utilizados

▪ npm install npm@latest –g. Atualiza o npm na versão mais
estável
▪ npm init -y. Permite iniciar um pacote, criando o arquivo
package.json
▪ npm –v. Exibe a versão atual do npm
▪ npm install nome_do_módulo [-D]. instala um módulo no
projeto. D é opcional indica que é uma dependência de
desenvolvimento.
▪ npm list. Lista todos os módulos existentes no projeto.
▪ npm remove nome_do_módulo. desinstala um módulo do
projeto.

Fonte: https://docs.npmjs.com/cli/v6/commands/npm-run-script
Gerenciador de pacotes -Yarn

• Desenvolvido pelo facebook, google e

tilde
▪ Suprir a necessidade de oferecer mais
velocidade, estabilidade e segurança

• Instalação
▪ npm install -g yarn
✓ yarn --version
 Comandos doYarn
• Principais comandos:
▪ yarn -v. Checa a versão
▪ yarn init -y. Inicia um projeto criando o
package.json.
▪ yarn add nomePacote [-D]. Adiciona uma
dependência ao projeto. O D é opcional. indica que é
uma dependência de desenvolvimento
▪ yarn remove nomePacote. remove a depedência
do projeto
▪ yarn install ou yarn. instala todas as dependências
que estão na lista do package.json

fonte: https://yarnpkg.com/cli/init
API Rest
API Rest
Conceitos de API Rest
Conceitos de API Rest
Backend
Conceitos de API Rest
Conceitos de API Rest
Conceitos de API Rest
Backend javascripts frameworks
 Biblioteca Express
• É o framework mais popular e a biblioteca
subjacente para uma série de outros
frameworks do Node.
• Oferece:
• Gerenciar requisições HTTP
• Definir as configurações da aplicação web,
• Ex: a porta para conexão.
• Adicionar novos processos de requisição por meio
de "middleware
Revisando o Express
 Ferramentas auxiliares
• Insomnia ou Postman
▪ https://insomnia.rest/
▪ https://www.postman.com/
▪ https://hoppscotch.io/pt-br/

• Gerenciador de Banco de Dados

▪ Beekeeper studio ou prisma studio
✓https://www.beekeeperstudio.io/
Iniciando Projeto Backend
• Criar um projeto Backend
1. yarn init -y
✓ Cria o package.json
2. Instalar as dependências de typescript
✓ yarn add typescript –D
– Adicionou a dependência no package.json
– E adicionou pasta node_modules
3. Inicializar o Typescript
✓ yarn tsc --init
– Gera o arquivo tsconfig.json
 Iniciando Projeto Backend

• Criar um projeto Backend

4. Node ainda não entende o typescript por padrão
✓ Configurar para converter ao javascript.
– Instalar a dependência
» yarn add ts-node-dev –D

5. Conifgurar o package.json adicionando o script

▪ "dev": "ts-node-dev --transpile-only --ignore-watch
node_modules --exit-child --respawn src/server.ts",
– Agora pode executar yarn dev no terminal
 Criando os Endpoints

6. Criando as rotas e configurar o insomnia

✓ GET,POST,PUT, DELETE, PATCH
 Tipos de parâmetros
• Routes Params
▪ parâmetros que fazem parte da nossa rota.
✓ Vem na url e são obrigatórios os valores na URL
– https://localhost:3000/produtos/3123234324
✓ geralmente utilizados:
– fazer busca por id, alteração de uma informação
 Tipos de parâmetros
• Query Params
▪ geralmente utiliza para fazer filtragem e vem na url
✓ Não são obrigatórios a passagens dos seus valores
✓ Uso dos símbolos:
– ? (indicar que vai passar um query)
– & (para informar que vai passar um outro query)
 Tipos de parâmetros
• Body Params
▪ geralmente utilizado para cadastro e edição
✓ (métodos post e put)
▪ Os parâmetros vem no corpo da requisição
✓ Utilização do formato Json
 Banco de Dados
• Existe três formas de comunicar com
BD usando o Nodejs

▪ Usando o próprio driver do BD

▪ Utilizando as query Builders para javascript

▪ ORM (Object Relations Maping) para javascript

 Banco de Dados
• Usando o próprio driver do BD
▪ mistura código nativo do banco de dados
específico
✓ com Javascript

▪ Aborda um sql mais puro (nível mais baixo)

✓ Conhecimento em sql
✓ Select, trigger, insertion,...

▪ Problemas
✓ Os drivers de BD são diferentes
– Mongo != Postgres
 Banco de Dados
• Usando o próprio driver do BD
✓ Exemplo o Postgres
– https://node-postgres.com/
 Banco de Dados
• As query Builders para javascript
▪ Um nível de abstração acima
✓ Escreve as queries usando funções,
– A biblioteca se encarrega de gerar a query nativa.

▪ Trata possíveis diferenças de sintaxe

✓ entre diferentes bancos de dados.

▪ Exemplo o Knex
✓ https://knexjs.org/

▪ Uso de migrations
 Banco de Dados
• As query Builders para javascript
✓ Exemplo o Knex
– https://knexjs.org/
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ Nível mais alto de abstração
▪ Mapeamento objeto-relacional
✓ Feito por mapeador objeto-reacional
– uma biblioteca ou framework
▪ Exemplos
✓ Sequelize
– https://sequelize.org/master/
✓ typeORM
– https://typeorm.delightful.studio/
✓ Prisma
– https://www.prisma.io/
 Banco de Dados
• ORM (Object-Relational Mapping)

▪ Problema da incompatibilidade da impedância

de dados
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ Problema da incompatibilidade de impedância
de dados

✓ Representação dos dados e do modelo, já que as

estruturas são distintas;

✓ Mapeamento entre os tipos de dados da linguagem de

programação e do banco de dados;

✓ Modelo de integridade relacional do banco relacional

 Banco de Dados
• ORM (Object-Relational Mapping)
▪ mapeamento de linhas para objeto
✓ Vantagens:
– Diminui o tempo de desenvolvimento
– Adaptação de novos membros na equipe
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ Segue dois padrões:

–.

✓ Exemplo: hibernate (java) Exemplo: ActiveJPA

 Banco de Dados
• ORM (Object-Relational Mapping)
▪ No nodejs
✓ Padrão Active Record (Sequelize)
✓ https://sequelize.org/

–.
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ No nodejs
✓ Padrão Active Record (Prisma)
✓ https://www.prisma.io/

–.
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ No nodejs
✓ Padrão Data Mapper (TypeORM)
✓ https://typeorm.io/

–.
 Banco de Dados
• ORM (Object-Relational Mapping)
▪ No nodejs
✓ Padrão Active Record (TypeORM)
– https://typeorm.io/

–.
 Projeto Backend
• Banco de dados
▪ Como escolher a melhor forma?
✓ Aquele que atende melhor o projeto
– No meu caso como professor
» Achei mais fácil de entender e aprender

✓ mas vai depender da equipe, da aplicação, entre outros

decisões de projeto.
– não existe aquele que é mais certo.
» Existe aquele que melhor se aplica no seu
software
✓ Uma coisa é fato:
– é preciso ter o conhecimento de sql e bancos
 Prisma
• O que é?
▪ É uma ferramenta open source que aborda ORM
▪ Composto de três produtos fundamentais:
• Prisma Client: um construtor de queries gerado
automaticamente e type-safe para Node.js e TypeScript

• Prisma Migrate: sistema de migração. Usamos um

comando cli do prisma que pega os models e cria nossas
tabelas no BD

• Prisma Studio: Trata-se de uma interface do usuário

feita para visualizar e editar os dados na database;

Fonte: https://www.prisma.io/
 Prisma
• Como o Prisma Funciona?
▪ Todo projeto começa com um arquivo Prisma Schema
✓ Permite que os desenvolvedores definam seus modelos
da aplicação
✓ Ele também contém a conexão com um banco de dados
e define um gerador.
▪ Portanto, nesse esquema configuramos 3 coisas:
✓ Data source: Especifica sua conexão com o banco de
dados (por meio de uma variável de ambiente)
✓ Generator: Indica que você deseja gerar o Prisma
Client
✓ Data model: Define seus modelos de aplicação

Fonte: https://www.prisma.io/docs/concepts/overview/what-is-prisma
 Prisma
• Como o Prisma Funciona?
▪ Data Source (mongoDB)

DENTRO DO ARQUIVO .ENV

Fonte: https://www.prisma.io/docs/concepts/database-connectors/mongodb
 Prisma
• Como o Prisma Funciona?

Fonte: https://www.prisma.io/docs/concepts/overview/what-is-prisma
 Prisma
• Instalando a extensão no VSCode
▪ Prisma
▪ Prisma – Insider

▪ Depois verificar nas configurações do usuário do

Vs-Code se contém a informação abaixo:
 Prisma
• Configurando Prisma no projeto
▪ Instalando o Prisma
✓ yarn add prisma -D
▪ Inicializar o Prisma
✓ npx prisma init --datasource-provider sqlite
– Ou yarn prisma init --datasource-provider sqlite

Fonte: https://www.prisma.io/docs/getting-started
 Prisma
• Prisma CLI
▪ Puxe o esquema de um banco de dados
existente, atualizando o esquema Prisma)
✓ npx prisma db pull
▪ Envie o estado do esquema Prisma para o banco
de dados
✓ npx prisma db push
▪ Crie migrações do seu esquema Prisma, aplique-
as ao banco de dados, gere artefatos (por
exemplo, Prisma Client)
✓ npx prisma migrate dev

Fontes: https://www.prisma.io/docs/concepts/components/prisma-cli
https://www.prisma.io/docs/reference/api-reference/command-reference
 Prisma
• Outros Prisma CLI
▪ npx prisma migrate reset
✓ Este comando exclui e recria o banco de dados
▪ npx prisma migrate deploy
✓ O comando aplica todas as migrações pendentes e cria
o banco de dados se ele não existir.
▪ npx prisma migrate resolve
✓ O comando permite que você resolva problemas de
histórico de migração na produção marcando uma
migração com falha como já aplicada (suporta linha de
base) ou revertida.
Fontes: https://www.prisma.io/docs/concepts/components/prisma-cli
https://www.prisma.io/docs/reference/api-reference/command-reference
 Prisma
• Prisma CLI
▪ Configura um novo projeto Prisma
✓ npx prisma init --datasource-provider sqlite

▪ Mostra o Prisma Studio

✓ npx prisma studio

▪ Gera os artefatos (Ex: Prisma Client)

✓ npx prisma generate

Fontes: https://www.prisma.io/docs/concepts/components/prisma-cli
https://www.prisma.io/docs/reference/api-reference/command-reference
 Prisma
• Definindo Model

Fontes: https://www.prisma.io/docs/concepts/components/prisma-schema/data-model
Relacionamento one to one
Relacionamento one to
many
Relacionamento many to many
Relacionamento many to many
 Prisma
• Conhecendo o Prisma Studio
▪ Um Editor visual de dados do banco de dados
✓ Podemos manipular dados (inserções, remoções,
edições,..)

▪ npx prisma studio ou yarn prisma studio

Fonte: https://www.prisma.io/docs/data-platform/data-browser
 Prisma
• Conhecendo o Prisma Client
▪ Intuitivo Cliente de banco de dados para
typescript e nodejs
✓ De leituras simples a gravações aninhadas complexas,
o Prisma Client
– oferece suporte a uma ampla variedade de
operações no Banco de Dados

Fontes: https://www.prisma.io/client
 Prisma
• Conhecendo o Prisma Client
▪ Instalação
✓ npm install @prisma/client ou yarn add @prisma/client

Fontes: https://www.prisma.io/docs/concepts/components/prisma-client
Projeto Exemplo
 Projeto Exemplo
• Casos de usos
▪ Conta
✓ Autenticar cliente (cliente)
✓ Autenticar entregador (deliveryman) (alunos fazendo em
aula)
▪ Cliente
✓ Cadastrar cliente
✓ Buscar seus deliveries
▪ Deliveryman
✓ Cadastratar o entregador (alunos fazendo)
✓ Buscar todos os deliveries (alunos fazendo)
 Projeto Exemplo
• Casos de usos
▪ Deliveries
✓ Cadastrar delivery
✓ Buscar deliveries sem data de entrega
✓ Atualizar o delivery com o entregador
✓ Atualizar a data final quando entregar o delivery
• Alunos podem fazer:
▪ Remoção de cliente, deliveryman, delivery.
▪ Buscar delivery pela data.
 Projeto Exemplo

• Instalando as dependências e suas

tipagens (essa quando for necessário)
▪ Prisma -> yarn add prisma -D
▪ @Prisma/cliente -> yarn add @prisma/client
▪ Typescript -> yarn add typescript -D
▪ Bcrypt -> yarn add bcrypt
▪ JsonWebToken -> yarn add jsonwebtoken
▪ Express -> yarn add express
▪ ts-node-dev -> yarn add ts-node-dev -D
▪ Dotenv -> yarn add dotenv
▪ express-async-errors -> yarn add express-async-
errors
 Projeto Exemplo

• Configurando
▪ yarn tsc --init
✓ Gerando o tsconfig.json
https://www.prisma.io/docs/getting-started/quickstart?query=tsconfig.json&page=1

▪ Package.json
 Projeto Exemplo
• Iniciando as configurações do Prisma
▪ yarn prisma init --datasource-provider sqlite

• Fazendo os modelos para criar tabelas e

relacionamentos
▪ yarn prisma migrate dev
Models Projeto Exemplo
 Projeto Exemplo
• Configurando o server com o express
▪ src/server.ts
 Projeto Exemplo
• Atendendo os caso de usos
▪ Ver código no projeto github
 Projeto Exemplo
• Criando o arquivo de rotas para organização
▪ src/routes.ts
 Json Web Token - JWT

• é um sistema de transferência de dados

que pode ser enviado
▪ via GET, POST ou em um cabeçalho HTTP
(header) de maneira "segura”
✓ As informações são digitalmente assinadas por
criptografia
– Chave secreta HMAC (Hash-based Message
Authentication Code)
 Json Web Token - JWT
• Para que serve?
▪ Autenticação: O token é utilizado para
verificar a identidade de um usuário e suas
permissões.
▪ Troca de informação: Por ser um meio
seguro para duas aplicações conversarem
✓ graças a maneira que os tokens são assinados
digitalmente
 Json Web Token - JWT
• Verificação de um token
▪ Com um token construído e seguro,
✓É matematicamente impossível decodificar a
assinatura sem ter o segredo-chave
1. Somente com posse do segredo,
» qualquer aplicação pode decodificar a
assinatura e verificar se ela é válida
2. As assinaturas sejam idênticas,
» O cliente tem acesso as áreas restritas
da nossa aplicação
 Json Web Token - JWT

2
 Json Web Token - JWT
• É preciso informar:
▪ O token no header Authorization da
requisição
✓E, por convenção, após a palavra Bearer.
 Usando o Token

• Usando o Token
 Json Web Token - JWT
• Como é por dentro?

▪ Três componentes básicos:

✓HEADER, PAYLOAD e SIGNATURE.
– https://jwt.io/
– https://jwt.io/introduction
 Json Web Token - JWT
• HEADER
 Json Web Token - JWT
• PAYLOAD
▪ atributos não obrigatórios que são usados na validação
do token pelos protocolos de segurança das APIs.
 Json Web Token - JWT
• PAYLOAD
▪ atributos definidos especialmente para compartilhar
informações entre aplicações.
 Json Web Token - JWT
• SIGNATURE
 Json Web Token - JWT
• C
 Json Web Token - JWT
• Construção de um token (Primeiro)
▪ Usando a Biblioteca
✓yarn add jsonwebtoken

▪ Se o projeto Typescritp
✓yarn add @types/jsonwebtoken - D
 Criptografar o password
• Utilizar a biblioteca de criptografia para o
password

▪ yarn add bcryptjs

✓yarn add @types/bcryptjs –D
✓Importar a função hash do bcryptjs
– Depois criptografar o password
 Json Web Token - JWT
• Construção de um token (Primeiro)
▪ Criar um User Case de autenticação
✓Vai ser reponsável para gerar o token
– Caso as infromações passada durante a
autenticação sejam válidas
» No caso email e password
✓Usamos o método compare() do bcrypts
– Comparar a senha digitada pelo usuário
com a que está armazenada no BD
 Json Web Token - JWT
• Construção de um token (Primeiro)
▪ Criar um User Case de autenticação
✓Usamos o método sign() do jsonwebtoken
– sign(payload, secretOrPrivateKey, [options,
callback])
» Payload: objeto literal contend uma
informação do usuário
» Email. Não colocar dados sensíveis
» secretOrPrivateKey
» https://www.md5hashgenerator.com/
» Options: algoritmo, subject,
expiresIn,...
Fonte: https://github.com/auth0/node-jsonwebtoken
 Json Web Token - JWT
• Construção de um token (Primeiro)
▪ Criar um User Case de autenticação
✓Usamos o método sign() do jsonwebtoken

Fonte: https://github.com/auth0/node-jsonwebtoken
 Json Web Token - JWT
• Construção de um token (Primeiro)
▪ Criar um controlador para autenticação

▪ E adicionar a rota login

✓ Chamando o método de autenticação do controlador
 Projeto Backend
• Modificação nas Rotas e server
▪ Utilizando Middleware no server
✓ O que são?
– todo o tipo de função que está entre um pedido HTTP
e a resposta final
» que o servidor envia de volta para o cliente.
 Projeto Backend
• Modificação nas Rotas e server
▪ Utilizando Middleware no server
✓ Portanto são funções
– Recebe 4 parâmetros
» Error, Request, Response e next()
✓ Podem executar as seguintes tarefas
– Executar qualquer código.
» autenticação
– Fazer mudanças nos objetos de solicitação e
resposta.
– Encerrar o ciclo de solicitação-resposta.
» Ex: exceções
– Chamar o próximo middleware na pilha.
 Projeto Backend
• Modificação nas Rotas e server
▪ Utilizando Middleware no server
✓ Usamos middleware para usar o arquivo router e json()
– app.use(router)
» Adicionar as rotas

– app.use(express.json())
» Para o server aceitar dados vindo da requisição no
formatod json
 Tratando Exceções
• Duas formas
1. Usando o try-catch no controller
✓ trow new Error(“erro!”)
– Lançar uma exceção para o controller
– controller → Service (throw new Error())
 Tratando Exceções
• Duas formas
2. Usando um middleware no server para tratar
os erros
✓ server→routes→controller→ use case (throw new Erro)
✓ Instalar a biblioteca express-async-erros
– yarn add express-async-errors
✓ Depois importar no server
– Logo depois da importação do express

Fonte: https://www.npmjs.com/package/express-async-errors

Fonte: https://www.npmjs.com/package/express-async-errors
 Tratando Exceções
• Criando middleware para tratar exceções
 Tratando Exceções
• Customizando Errors
▪ Criando uma classe Errors
✓ A fim de parametrizar os tipos de erros
– E instanciar essa classe no middleware que trata os erros
– E nos Services que lançam os erros com o throw
 Criando middleware de
autenticação
• Passos
▪ Receber o token do aplicativo ou site web
✓ vamos configurar o insomnia para enviar o token
– Na aba Auth
» Seleciona Bearer token

▪ No Middleware, capturamos o token pela

requisição
✓ request.headers.authorization

▪ Validar se token está preenchido

✓ Se não tive mandar uma resposta de erro
 Criando middleware de
autenticação
• Passos
▪ Retirar o Bearer
✓ Formato:
– Bearer u5943u55u6ortmlkgmvkxciyd903489500898

▪ Verificar se o token é válido (dentro trycatch)

✓ Usar o método verify(token, secretKey) da lib
jsonwebtoken
– Retorna o payload
 Criando middleware de
autenticação
• Passos
▪ Adicionar informações a Requisição (Request)
✓ Ex: inserir o subject contendo o id do usuário do payload
– request.user_id = sub;
✓ Se tudo ocorrer bem o midleware permite o controller
sua função
– Usando o next()

▪ No typescript é necessário configurações

✓ Criar uma pasta na src chamado @types/express
– Contendo um arquivo chamado index.d.ts
✓ no arquivo tsconfig.json
– habilito "typeRoots": ["./src/@types"],
 Projeto Backend 2 –
Upload e maps
• Criando as entidades
▪ Associação de animais e Imagens
 Projeto Backend 2
• Trabalhando com Mapas
▪ Adiciona o campus latitude e longitude
✓ migration para criar a tabela
✓ e entidade para fazer o mapeamento
 Projeto Backend 2
• Upload de arquivos no disco
▪ Trabalhando com aplicações que usam Express
✓ Lidar com upload de arquivos, o Multer é ótima opção
▪ O Multer é um middleware que internamente
utiliza a lib busboy
✓ lidacom formulários multipart/form-data.

Fonte: https://www.npmjs.com/package/multer
Fontes https://github.com/mscdex/busboy
 Projeto Backend 2
• Upload de arquivos no disco

Fonte: https://www.npmjs.com/package/multer
Fontes https://github.com/mscdex/busboy

/
 Projeto Backend 2
• Upload de arquivos no disco
▪ Instalando a biblioteca Multer
✓ yarn add multer
– Yarn add @types/multer

✓ Configurações do local que vai salvar e nome do

arquivo
– Criar uma pasta config contendo o arquivo
upload.ts ou outro nome de sua preferência
– multer.diskStorage
» destination
» filename

Fonte: https://www.npmjs.com/package/multer
/
 Projeto Backend 2
• Upload de arquivos no disco
▪ Depois importamos a função multer
✓ Vai ser um middleware na rota post que faz o upload do
arquivo
– import multer from 'multer’;
▪ Importamos também o arquivo uploads.ts de
configuração
✓ E passar para a função multer
– const upload = multer(uploadConfig);
▪ Na rota post usamos o método array()
✓ Permitindo que o usuário faça upload de várias imagens
✓ app.post(‘/association', upload.array('images’), controller.handle);
– images é o nome do campus que vai receber as imagens
 Projeto Backend 2
• Salvando arquivos no BD
▪ Com a entidade Imagem.ts tendo o
relacionamento com Association.ts
▪ No controller CreateAssociation.ts
✓ Pegamos as imagens
– request.files as Express.Multer.File[]
✓ depois criar um objeto contendo somente o filename
do arquivo (só queremos salvar o caminho)
– Podemos usar o map() de array
✓ Por fim, salvamos no banco
 Projeto Backend 2
• Views dos dados
▪ Comos os dados vão está visíveis ou disponíveis
para o frontend.
✓ Neste projeto só estamos salvando o nome da imagem.
– No entanto, precisamos do formato do endereço
completo para passarmos a uma tag de visualização
» Img, Image,...
✓ Solução:
– Criamos uma pasta view dentro src
» EX: criamos images_view e association_view
» Formatarão os dados para nosso futuro frontend
✓ Configurar o Server para acessar a url de imagens
– app.use('/uploads', express.static(path.join(__dirname, '..',
'uploads')))
 Projeto Backend 2
• Validações dos campos
▪ Instalar a biblioteca de esquema de validação yup
✓ yarn add yup @types/yup -D
✓ Importar, depois definir o schema epor fim validar

Fonte: https://github.com/jquense/yup
 Projeto Backend 2
• Validações dos campos
▪ Foi criado uma pasta utils
✓ Contendo uma função que valida os campus
– Caso dê algum error lança para o middleware que
trata erros.
» Passando uma instanciação ValidationError do
Yup
» throw new ValidationError(error)
✓ Depois tratar os erros no middleware
 Projeto Backend 2
• Permitindo que outras aplicações
acessem o servidor
▪ Instalar a biblioteca cors
✓ yarn add cors
– yarn add @types/cors -D

▪ Depois importar o cors e usar a função no

middleware
✓ import cors from 'cors';
✓ app.use(cors());