Skip to content

Latest commit

 

History

History
291 lines (222 loc) · 10.1 KB

README.md

File metadata and controls

291 lines (222 loc) · 10.1 KB

Projeto Next Level Week 8 - Return

React   |    Node JS   |    React Native   |    Licença

O Projeto da Next Level Week Desta semana é um widget de enviar feedback para os usuários enviarem suas opinioes e relatar problemas ao navegar em seu site! evento oferecido pela @Rocketseat

Neste projeto o usuário escolhe um tipo de feedback a ser enviado, depois disto é inserido uma descrição ao feedback e opcionalmente a foto junto com o feedback a ser enviado, após enviar o feedback será registrado no banco de dados e será enviado um Email ao proprietário da aplicação

Acesse a aplicação em funcionamento! Link: https://nlw8return.vercel.app/

Fotos da aplicação:

Web APP:

Server (Database | Email):

Mobile APP:

Tecnologias Utilizadas:

  • ReactJS
  • Typescript
  • NodeJS
  • Vite
  • Express
  • Prisma
  • TailwindCSS
  • Headless UI > acessibilidade
  • html2canvas
  • phosphor-react
  • nodemailer
  • React Native
  • ExpoGo

Observações/Notas:

  • Assim que o projeto foi dado fiquei chocado, é uma ideia incrível para um evento como esse e pretendo colocar no meu portfólio!
  • Ver sobre react strict mode
  • Reakit/areakit/radix/headlessUI > acessibilidade



Como Inicializar:

Iniciar Servidor

  • cd server
  • yarn dev > inicia o servidor
  • yarn prisma studio
  • SQLite:
    • mude o provider ./prisma/schema.prisma para o SQL (descomente a linha...)
    • npx prisma migrate dev > Refaça as migrações no banco de dados, pois elas salvam o tipo de banco de dados (sqlite, postgres, mongo, etc).
  • Deploy (Railway):
    • yarn build > Converte arquivos Typescript para Javascript
    • yarn start | npm run start > Inicia a partir dos arquivos Javascript
    • npx prisma migrate dev > faz as migrações no banco de dados
    • Faça deploy da pasta ./dist, normalmente o site irá fazer a build automaticamente, podendo ser possível realizar o deploy de toda a aplicação, não somente a pasta dist!
    • Start Command: npx prisma migrate deploy > faz as migrations no banco de dados

Iniciar Front-end

  • cd web
  • yarn dev

Iniciar Mobile

  • cd mobile
  • Mudar o baseURL no src/lib/api para seu ipv4
  • expo start
  • Acesse pelo aplicativo Expo Go

Aula REACT JS:

  • Tailwind: https://tailwindcss.com/docs/installation > html/js nativo
  • Tailwind tem ResetCSS
  • HeadlessUI parece ser muito bom...
  • Caso for utilizar muitos componentes parecidos repetidamente pode se criar um array/objeto e transformá-lo em html, assim no html em sí só terá a desestruturação deste.
  • Object.entries()
  • type example = typeof {X: {...}}
  • Screenshot > html2canvas
  • colocar o ! no final de um valor diz para confiar que ele nunca será nulo.
    • EX: document.querySelector('body')! ou seja, você diz que sempre vai existir o body.

Comandos Utilizados:

  • npm create vite@latest > template vite, selecione: react e typescript

  • cd web > Entra no diretório

  • npm install > instala as dependências

  • npm install -D tailwindcss postcss autoprefixer > instala o tailwind

    • npx tailwindcss init -p > cria as config, com o PostCSS -p
    • tailwind.config.js 
      module.exports = {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  • npm install phosphor-react > ícones utilizados.

  • npm install @headlessui/react > acessibilidade.

  • npm install -D @tailwindcss/forms > tailwind para formulários (coloca nos plugins)

  • npm install -D tailwind-scrollbar > muda a scrollbar (coloque nos plugins)

  • npm install html2canvas > biblioteca para o screenshot.

  • npm install axios > requisições http.

Aula NODE JS:

  • no ts-config precisa colocar o rootDir e o outDir, além de ser possível utilizar uma versão mais atualizada do javascript(2020) no target.
  • Rotas: 
    // GET = Buscar informações
// POST = Cadastrar informações
// PUT = Atualizar informações de uma entidade
// PATCH = Atualizar UMA informação única de uma entidade
  • crie um script no package: "dev": "ts-node-dev src/server.ts"
  • Em desenvolvimento: SQLite, em produção: Postgress, utilizando o prisma (ORM)
  • Envio de Emails: Gmail(+/-), Mailgun, sparkpost, mailchimp
    • mailtrap > testar emails (em desenvolvimento)
  • Cors 
    app.use(cors({
  origin: "http://localhost:3000"
}))
    ou não passe o objeto e será aberto para todos, qualquer um poderá utilizar da API



Requests Utilizadas:

// Create feedback
// Coloque no console em http://localhost:3333
 
fetch("http://localhost:3333/feedbacks", {
  method: "POST",
  body: JSON.stringify({    
    "type": "BUG",
    "comment": "Está tudo crazy!"
  }),
  headers: {
      'Content-type': 'application/json; charset=UTF-8'
  },
}).then((res) => res).then(console.log);
//}).then((res) => res.json()).then(console.log); se o retorno tiver um json

Comandos Utilizados:

  • cd server
  • npm init
  • npm i typescript @types/node ts-node-dev -D > live-reload com typesscript
  • npx tsc --init > cria as config do typescript
  • npx tsc > gera o arquivo em javascript /dist
  • yarn dev > roda a aplicação
  • npm i express > express - rotas
  • npm i @types/express -D > tipagem do express
  • Add Prisma
    • npm i prisma -D > instala o prisma
    • npm i @prisma/client > prisma em produção
    • npx prisma init > inicia o prisma
    • Acesse Prisma/Sqlite e modifique seu schema.prisma e coloque a url no .env criado
    • npx prisma migrate dev > migrar banco de dados em dev (dev/deploy)
    • npx prisma studio > visualizar os dados no seu banco
  • Envio de emails:
    • npm install nodemailer > biblioteca de emails
    • npm install @types/nodemailer > biblioteca de emails
  • Testes Automatizados (Jest)
    • npm install jest -D > instala o jest
    • npx jest --init > configura o jest (yes, yes, node, yes, v8, yes)
    • npm install ts-node -D > typescript no jest
    • npm install @types/jest -D > typescript no jest
    • SWC > npm i -D jest @swc/jest > Jest não entende arquivos tsc, então é necessário um compilador (ts-jest, babel), porém o swc é muito mais rápido, e poderia até mesmo rodar toda a aplicação utilizando ele. Siga os passos na Doc.
    • yarn test
    • /coverage/lcov-report/index.html > ver o quanto o teste está cobrindo do código
  • npm install cors > controle de segurança, definir quem pode consumir os dados
  • npm install @types/cors -D > typescript

Aula REACT NATIVE:

  • expo
  • NUNCA UTILIZE DAS FUNÇÕES DO REACT-NATIVE-GESTURE-HANDLER pois estas funções geram um erro invisível que atrapalha os emuladores, buga os códigos nas builds. simplesmente busque por outra opção ou veja se o módulo atualizou!

Comandos utilizados:

  • cd mobile

  • Expo:

    • expo init mobile > inicia um projeto expo (blank typescript)
    • expo install expo-font @expo-google-fonts/NOME_DA_FONTE > fonte no react (inter)
    • expo install expo-app-loading > carregamento assíncrono de fontes
    • expo install react-native-svg > utilizar svg nos projetos
    • expo start -c > Inicia o projeto. -c limpa o cache
    • expo install expo-file-system > lida com conversão de arquivo ex: (png > base64)

  • yarn add phosphor-react-native > icones do react native

  • yarn add react-native-iphone-x-helper > lida com margens de baixo em telas

  • expo install @gorhom/bottom-sheet@^4 > slides/arrastar telas

    • expo install react-native-reanimated react-native-gesture-handler > dependencia do BottomSheet
    • plugins: ['react-native-reanimated/plugin'] > adicionar no babel
    • importe o gesture handler no início do App.tsx

  • yarn add react-native-view-shot > biblioteca de screenshot

  • yarn add axios > requisições http

Desafios

  • #NextLevel

  • #NeverStopLearning

  • #NewSkills

  • #StepByStep

  • Por algum motivo durante as aulas 2 relógios aqui de casa pararam no mesmo horário, então decidi anotar essa atividade paranormal '-'

    • 11:40:46
    • 11:34:40

Licença:

Note que este projeto está sob a licença MIT. Veja o arquivo para mais detalhes: LICENSE