https://github.com/sancruz-dev/dsmovie
Aplicação FULLSTACK da Semana Spring React, escola DevSuperior
https://github.com/sancruz-dev/dsmovie
devsuperior reactjs spring
Last synced: 4 months ago
JSON representation
Aplicação FULLSTACK da Semana Spring React, escola DevSuperior
- Host: GitHub
- URL: https://github.com/sancruz-dev/dsmovie
- Owner: sancruz-dev
- Created: 2022-01-12T05:44:42.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-12T16:59:50.000Z (over 1 year ago)
- Last Synced: 2025-01-12T15:11:54.693Z (5 months ago)
- Topics: devsuperior, reactjs, spring
- Language: Java
- Homepage: https://sandsmovie.netlify.app
- Size: 881 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#  Semana Spring React
> *Um app completo com as tecnologias mais demandadas do mercado*
## Certificado
## Referência
- [DevSuperior - Escola de programação](https://devsuperior.com.br)
- [@devsuperior](https://github.com/devsuperior)
- [](https://instagram.com/devsuperior.ig) [](https://youtube.com/devsuperior)
______ OBSERVAÇÕES PESSOAIS ______
#### Espisódio 1
- **baseUrl**: É uma formatação no uso de importações dentro da arquitetura do projeto, dando a possibilidade de importar qualquer arquivo sem precisar sair da pasta usando `../` e, a linha de código seguinte configura a função, que deve ser inserida no arquivo tsconfig.json. `"baseUrl": "./src"`.
###### Rotas com React Router DOM
- **BrowserRouter**: inicia a configuração das rotas.
###### Componente MovieCard
- **Bootstrap Columns**: O bootstrap por padrão configura todo o campo da página com 12 colunas, portanto, se for definido que um elemento ocupe metade da página, será inserido à classe, o número 6 compondo a coluna, desta forma: `col-6`. Caso queira que o elemento ocupe essa quantidade de colunas a partir de 576px de largura da tela - por exemplo - então a escrita fica assim: `col-sm-6`.
#### Espisódio 2
###### Configuração de Segurança (Liberar acesso de sistemas em locais dinstintos)
- **Classe SecurityConfig**: o código da classe libera o acesso do backend (hospedado no servidor) para que ele possa ser acessado pelo frontend, que se econtra em outro lugar. Cria-se a partir do pacote dsmovie, um subpacote chamado config, e lá criado a classe e seus métodos.
###### Domínio, ORM, Seed
- **Classe de associação**: quando houver um duas tabelas com o relacionamento de _muitos para muitos_ deverá exisitir outra entre ambas, fazendo a associação. No caso da tabela de associação do nosso projeto, haverá um dado extra para fazer a ponte entre a tabela Movie e User.
- **Chave primária composta**: é a chave primária da classe de associação, que é composta pela chave primária da classe Movie e User, logo, é preciso criar uma classe auxiliar (ScorePK) para guardar essas **duas chaves**, tranformando-se numa composição.
- **Associar `Score` com `Movie`**: o código seguinte forma um filme e associa-o ao objeto Score: `public void setMovie(Movie movie){id.setMovie(movie);}`. (A linha foi escrita na classe Score).
- **Serializable**: interface do java que indica que o objeto especificado pode ser convertido para bytes (importante para trafegar na rede e ser salvado em arquivos), e a CHAVE COMPOSTA exige o serializable
###### Busca de Filmes
- **MovieRepository**: Responsável pelo CRUD e acesso ao BD.
- **@Autowired**: instacia a classe automaticamente.
###### Salvar Avaliação
- **PUT é idempotente**: chamá-lo uma ou várias vezes sucessivamente terá o mesmo efeito. Diferentemente de POST, que pode ter efeitos adicionais.
- **@RequestBody**: configura que o corpo receba a requisição do JSON e seja convertido no objeto indicado, que no caso, é o ScoreDTO.
- **saveAndFlush**: as alterações serão liberadas para o DB imediatamente neste comando. Porém, com o `save`, isso não é necessariamente verdade e pode permanecer na memória até que os comandos flush ou commit sejam emitidos.
- `HashSet<>()`: é uma classe que implementa a interface. Ou seja, o atributo `Set` associado ao Score (`Set`), o `Set` em si é essa interface, e não um classe. Por isso que na sua instância não é chamado por new Set(), pois essa classe é implementada na classe HashSet.
- `Set`: por que não usar `List`? já que referencia uma lista/conjunto/coleção? Porque em Java, numa situação de _muitos pra muitos_ - que é o caso da entidade Score - o que garante a NÃO repetição de dados é o Set.
- **@OneToMany**: One(A entidade atual) To(para) Many(muitos). Ou seja, Um movie pode ter muitos scores. **Portanto, `One` será a classe atual onde essa `annotation` está sendo escrita**.
- **@OneToMany(mappedById = "id.movie")**: o `id` é o nome da chave primária do score (ScorePK), e o `movie` é o nome do atributo existente na classe também do ScorePK. Essa linha de código permite acessar todas as avaliações de umm certo filme, a partir de um objeto de filme (a classe Movie). E todo esse processo é feito com o user também.
###### Validação do Postgres local
- Os três perfis de projeto:
- **test**: no momento, a propriedade da aplicação está com o perfil ativado como test, configurado lá no arquivo application.properties. Com isso, será criado alguns arquivos de configuração para configurar outros perfis de projeto
- **dev**: vai ser um perfil de uma homologação (confirmação), para testar o projeto no BD do Postgres localmente.
- **prod**: é o perfil que vai rodar quando instalado na nuvem Heroku.
###### Back-end no Heroku
- Estrutura da url do BD do Postgres da Heroku:
```
postgres://
vwjgmxbputdshi
:
236a2d02aa6262de723ba23647bd277bd5698sd4fe463a949d7bde3acb400efa
@
ec2-3-225-41-234.compute-1.amazonaws.com
:
5432
/
dauuv9j80p0sgj
# Substituindo por explicação a variável de ambiente:
# postgres://
# (Nome do usuário)
# :
# (Senha do usuário)
# @
# (Host onde está hospedado o banco de dados)
# :
# (Porta)
# /
# (Nome da base de dados)
```
#### Espisódio 3
###### Parâmetro de rota: userParams
- **movieId**: o movieId que chega como argumento ao Props, PRECISA ser colocado como dependência do useEffect - _da function FormCard_ - caso contrário a requisição entrará em loop repetido, pois seu valor foi usado (${movieId}), portanto é essecial usar esse valor como parâmetro, guiando para uma nova requisição apenas quando este valor for mudado.