jpbraz / projeto-sds3

🔗 PROJETO-SDS3

Descrição do Projeto

🚀 Projeto desenvolvido durante a Semana Spring React da DevSuperior.

   

🛠 Ferramentas necessárias/utilizadas:

• Curl
• Git
• Java JDK 11
• Maven
• STS
• Postman
• Postgresql e pgAdmin (ou DBeaver)
• Heroku CLI
• Node & NPM
• YARN (Caso queira usar ao invés do NPM)
• VS Code

Tecnologias utilizadas :

As seguintes ferramentas foram usadas na construção do projeto:

• React
• TypeScript
• PostgreSQL
• Spring Data JPA - JpaRepository

   

🏃 Andamento do Projeto

• Aula 1 - 03/05/2021 ✔️
• Aula 2 - 05/05/2021 ✔️
• Aula 3 - 07/05/2021 ✔️

Demonstração da Aplicação

jpbraz-dsvendas

Badges

   

⏲️ Etapas

Criação do Projeto (monorepo)

1) Frontend

• Criar o React App no diretório do projeto:

npx create-react-app frontend --template typescript

Lembrar de remover o arquivo .git

• Adicionar Bootstrap para utiliziar no projeto:

yarn add bootstrap

• Adicionar biblioteca de gráficos estáticos: Apex Charts

yarn add apexcharts react-apexcharts

2) Backend

Criado projeto Spring Boot no Spring Initializr com as seguintes dependências:

• Web
• JPA
• H2
• Postgres
• Security

Deploy da Aplicação com Netlify: 💨

Configurações para a Publicação no Netlify:

• Site -> New site from Git

• Basic build settings

  • Build Comand: yarn build
  • Publish Directory: build
  • Deploy site

  Deploy! (vai quebrar)

• Site settings

  • Build & Deploy: (colocar o nome da sua subpasta do projeto frontend)
  • Domain Management: (colocar o nome que você quiser)

• Deploys -> Trigger deploy

https://jpbraz-dsvendas.netlify.app/

3) Implementação do Backend

Padrão de camadas utilizado (repositories, DTO's, service e controller), com busca paginada e agrupada:

• Criado três arquivos de properties com perfis de: test, dev, prod
• Gerado script SQL no perfil dev para criação das tabelas do Banco de Dados (create.sql)

4) Implementação e Deploy no Heroku:

• Criado novo app no Heroku
• Provisionado banco Postgres, definindo variável APP_PROFILE=prod
• Criado servidor de acesso local via DBeaver (poderia ser feito via PgAdmin) utiliando dados de credenciais do Database.
• Deploy do backend no Heroku via terminal (no diretório do projeto):

heroku login
heroku git:remote -a <nome-do-app>
git subtree push --prefix backend heroku maingit subtree push --prefix backend heroku main

4) Integração do backend (Heroku) com o frontend (Netlify):

• Criação de Rotes e Links com o react-router-dom, para as pages Home e Dashboard.
• Criação de request com o axios: yarn add axios
• Definição do BASE_URL do BACKEND em "request.ts" e Heroku -> Build & Deploy -> Environment;
• Integração com Hooks (useState e useEffect) em BarChart, DonutChart e DataTable para rederenzição dos dados
• Criação do componente Pagination
• Adicionado rederização condicional com o useState isLoading

   

Colaboradores:

João Paulo Braz
DevSuperior
Nelio Alves