Na Trave Web

Projeto desenvolvido utilizando React, Tailwind CSS, PlanetScale - MySQL, Node para o back-end e deploy feito na Vercel

# Copa do Mundo 2022 - Catar - NaTrave: Faça sua aposta

As stacks utilizadas: Vite, React, NPM, TailwindCSS, KOA, Planetscale (MySQL em Nuvem), ORM Prisma, e muitas outras bibliotecas, hospedado na Vercel

Usando o framework React

https://pt-br.reactjs.org/

O React utiliza o JSX. Nele vamos utilizar uma biblioteca chamada React Router Dom, para manipularmos as navegações, URL Guide: https://reactrouter.com/en/main/start/tutorial

npm install react-router-dom localforage match-sorter sort-by

Date-fns - Manipulação de datas e horas com JS mais simplificada

Usado para trabalhar com datas utilizamos uma biblioteca chamada date-fns, URL GUIA: https://date-fns.org/

npm i date-fns

Com datas indicamos pela ISO 8601 que é o formato internacional de data, que começa com ano, mês e dia, e horas caso hajam

const initialDate = '2022-11-20T00:00:00Z'

Para bibliotecas com internacionalização se utiliza muito a tag I18N, para a formatação das datas em ptBR

import { ptBR } from 'date-fns/locale'

Vite.js - Biblioteca que agiliza a criação do Frontend

Utilizando uma biblioteca que agiliza na criação da aplicação que é o Vite.js: https://vitejs.dev/

npm create vite@latest

cd web

npm install

npm run dev

Para podermos importar svg no React usando o Vite: Guia na URL: https://www.npmjs.com/package/vite-plugin-svgr

npm i vite-plugin-svgr

Para corrigir os caminhos/paths no Vite:

Importar do próprio Node o path

import path from 'path'

resolve: {
alias: {
'~': path.resolve(__dirname, './src')
}

Tailwind CSS

O Tailwind CSS: https://tailwindcss.com/

Instalação utilizando o Vite: https://tailwindcss.com/docs/guides/vite

CLI

npm install -D tailwindcss postcss autoprefixer

Para rodar

npx tailwindcss init -p

Alteração no tailwind.config.cjs para definir quais são os arquivos que ele irá ler:

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

Importar dentro do css index/global:

@tailwind base;
@tailwind components;
@tailwind utilities;

Depois importar dentro do main

Koa.js - Trabalha com middlewares

Para facilitar o desenvolvimento com o Node/Backend utilizamos o KOA, e como é mais simples que o Express e menos "modulado" sem muitos scripts [você pode instalar], utilizamos ele, que inclusive foi feita pela mesma equipe do Express O koa: https://koajs.com/

npm i koa

O Koa trabalha com middlewares, várias funções que são encadeadas numa fila e vai executando uma por uma.

Uma coisa que também não pode faltar numa API é o roteamento

Então também adicionaremos uma biblioteca chamada Koa Router, porque o Koa não tem roteamento nativo URL GUIA: https://www.npmjs.com/package/koa-router https://github.com/koajs/router/blob/HEAD/API.md

npm install @koa/router

Koa body-parser

Também utilizamos o koa-bodyparser para manipularmos as informações que o usuário mandar URL GUIA: https://github.com/koajs/bodyparser

Instalação:

npm i koa-bodyparser

Depois utilizamos como um middleware, conseguindo acessar as informações que são enviadas pelo Frontend de forma mais fácil

Também instalamos a biblioteca cors para o Koa, URL GUIA: https://www.npmjs.com/package/@koa/cors

npm install @koa/cors

Para testarmos as rotas utilizamos o Insomnia, URL GUIA: https://insomnia.rest/download

PlanetScale - MySQL - Banco de dados na nuvem Relacional

Utilizamos um banco de dados na nuvem free, que se encontra no PlanetScale que por debaixo dos panos usa o MySQL: https://planetscale.com/

No PlanetScale se trabalha com Branches, então criamos uma e nela é que trabalharemos, toda alteração que tivermos no banco de dados será feito na develop para testes e depois conectaremos na main

Então dentro do PlanetScale promovemos a branch Main para produção/Production

Prisma - CRUD

E utilizamos um ORM para fazer a conexão, comunicação, pesquisa ou manipulação dos dados, o Prisma, URL GUIA: https://www.prisma.io/docs/getting-started/quickstart

Como o Prisma trabalha, URL GUIA: https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/introspection-node-mysql

Utilizamos um banco de dados relacional

Instalação:

npm i prisma --save-dev

Iniciar a documentação e CLI do Prisma

npx prisma

Para iniciar o Prisma e configura-lo:

npx prisma init

Schema das nossas tables dentro do Prisma

Schema Prisma de Users:

id (string - usaremos o cuid)
name (string)
email (string)
username (string)
password (string)

Schema Prisma de Hunches (Palpites):

id
userId (string)
gameId (string)
teamA (string)
teamB (string)

Schema Prisma de Games:

id
teamA (string)
teamB (string)
datetime
group
level

Prisma no PlanetScale

Utilizando o PlanetScale com o Prisma, URL GUIA: https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/connect-your-database-node-planetscale

Também instalamos o Prisma Client:

npm install @prisma/client

Toda vez que o model for modificado, precisa rodar o Prisma Generate:

npx prisma generate

Para o banco de dados ser enviado ao PlanetScale:

 npx prisma db push

E para enviarmos para a Main criamos um deploy request para ela no PlanetScale em Overview

Gerando a seed ou fazendo seeding

Geramos o cadastro dos jogos, e utilizamos uma função do próprio Prisma para adicionarmos esses cadastros apenas uma única vez, URL GUIA dos jogos: https://gist.github.com/brunobertolini/764403491652f9dde7b174eaf1119caf

URL GUIA da função do Prisma createMany(), URL GUIA: https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#createmany

Criamos um script no package.json para ser rodado uma única vez, com o método seed, para gerar um dado permanente na DB:

"prisma": {
  "seed": "node prisma/seed.js"
},

Criamos uma função para não rodarmos sem querer mais de uma vez essa seed e gerar dados desnecessários, URL GUIA: https://www.prisma.io/docs/concepts/components/prisma-schema/indexes

Dentro do Schema declaramos que isso será gerado apenas uma vez:

  @@unique([homeTeam, awayTeam, gameTime])

Então atualizamos a db com o Prisma com o comando:

npx prisma db push

Depois rodamos o comando para enviar a seed:

npx prisma db seed

Criar ou atualizar um dado no Prisma, GUIA URL: https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#upsert

DATE-FNS - Manipulação de data

E mais uma vez manipulamos a data com a biblioteca date-fns como no Frontend:

npm i date-fns

Depois da instalação importamos:

import { addDays, formatISO } from 'date-fns'

A manipulação das datas, gte = maior que ou igual que lt = menor que e formatamos a data em ISO

gte: currentDate,
 lt: formatISO(addDays(new Date(currentDate), 1))

BCRYPT.JS

Para encriptarmos as senhas e informações sensíveis, utilizaremos o BCRYPT.JS, URL GUIA: https://www.npmjs.com/package/bcryptjs

Instalando:

npm install bcryptjs

Importamos em users:

import bcryptjs from 'bcryptjs'

Utilizando o BCRYPT.JS como promise, e então apenas definimos em data que ele receberá o password, já criptografado:

const password = await bcrypt.hash(ctx.request.body.password, 10)

E para evitar que a senha seja exposta ou retornada, removeremos ela, desestruturando o retorno do try:

try {
    const { password, ...user } 
    ...}

Trabalhando com JWT

Instalando:

npm i jsonwebtoken

Para carregar o nosso env, existe uma biblioteca chamada dotenv-safe, URL GUIA: https://www.npmjs.com/package/dotenv-safe

Instalação:

npm i dotenv-safe

Para rodarmos o server e utilizarmos o process.env. precisamos usar:

node -r dotenv-safe/config server.js

Para não ter que ficar digitando isso todo o tempo, criamos um script no package.json:

"scripts": {
    "start": "node -r dotenv-safe/config server.js"
  },

Agora para rodar basta usar: npm run start

AXIOS - Para trabalhar com requisições http no Frontend

URL GUIA do Axios: https://axios-http.com/ptbr/docs/intro

Instalando:

npm i axios

Também adicionamos uma biblioteca para manipularmos os formulários, o Formik e o yup que é para validação, URL GUIA: https://formik.org/docs/overview

Instalação:

npm i formik yup

Validação com o formik yup, URL GUIA: https://formik.org/docs/guides/validation

VERCEL - DEPLOY

Depois importamos o rep do Git para a Vercel e definimos as váriaveis que foram declaradas no .env.example lá para fazermos as conexões com o banco de dados

E hospedamos na Vercel para tornar publico: https://vercel.com/

Para a Vercel entender que nossa aplicação Web é diferente precisamos definir algumas configurações que indicam que nossa aplicação não é toda separada por rotas, um arquivo vercel.json, URL GUIA: https://vercel.com/docs/concepts/functions/serverless-functions

Então declaramos dentro desse arquivo e definimos para qual rota será direcionado todas os processos:

{
  "rewrites": [
   {
    "source": "/(.*)",
    "destination": "/api"
   }
  ]
}

Jogamos o router.js, setup.js e o server.js que foi renomeado para index.js dentro da pasta api (antiga app), e no package.json mudamos o script para rodar o server:

 "scripts": {
    "start": "node -r dotenv-safe/config api/index.js"
  },

Top categories