š Projeto desenvolvido durante a Semana Spring React da DevSuperior.
- 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
As seguintes ferramentas foram usadas na construĆ§Ć£o do projeto:
- Aula 1 - 03/05/2021 āļø
- Aula 2 - 05/05/2021 āļø
- Aula 3 - 07/05/2021 āļø
- 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
Criado projeto Spring Boot no Spring Initializr com as seguintes dependĆŖncias:
- Web
- JPA
- H2
- Postgres
- Security
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
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)
- 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
- 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
JoĆ£o Paulo Braz |
---|
DevSuperior |
Nelio Alves |