/projeto-sds3

Primary LanguageJava

šŸ”— 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:

   

šŸƒ 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

Netlify Status Heroku

   

ā²ļø 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

   

:octocat: Colaboradores:


JoĆ£o Paulo Braz

DevSuperior

Nelio Alves