| ... | ... | @@ -27,7 +27,7 @@ Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, a |
|
|
|
## Arquitetura Geral da Aplicação
|
|
|
|
|
|
|
|
Uma visão geral sobre o entendimento de como a aplicação funciona, onde as diferentes camadas comunicam-se entre si, enviando e recebendo dados/requisições.
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/system_architecture.png">
|
|
|
|
<img src="resources/images/system_architecture.png">
|
|
|
|
|
|
|
|
## Deploy
|
|
|
|
|
| ... | ... | @@ -39,7 +39,7 @@ Esse processo é apresentado nesse vídeo: [Ages 2021 - Configurando CI/CD com G |
|
|
|
|
|
|
|
### Diagrama de Deploy
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/imagem_2021-05-20_181932.png">
|
|
|
|
<img src="resources/images/imagem_2021-05-20_181932.png">
|
|
|
|
|
|
|
|
## Backend
|
|
|
|
|
| ... | ... | @@ -74,7 +74,7 @@ Escolhas: |
|
|
|
|
|
|
|
### Diagrama de Fluxo
|
|
|
|
|
|
|
|
<img src="http://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/backend-ages-olive.png">
|
|
|
|
<img src="resources/images/backend-ages-olive.png">
|
|
|
|
|
|
|
|
## Frontend
|
|
|
|
|
| ... | ... | @@ -109,17 +109,17 @@ O diagrama de componentes da aplicação apresenta a maneira com que as classes |
|
|
|
|
|
|
|
Uma forma de ajudar a entender as diversas relações que o sistema possui é criando/projetando **diagramas** para compreender estas relações. Primeiro vamos partir por exemplo de um nível mais profundo na aplicação, demonstrando como ocorre essas relações **dentro** de um componente.
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/idea-of-component-olive.png">
|
|
|
|
<img src="resources/images/idea-of-component-olive.png">
|
|
|
|
|
|
|
|
A imagem apresentada pode nos auxiliar no entendimento de como se comportam os componentes dentro do React. Claro, essa não é uma ideia definitiva mas sim uma concepção das possíveis relações existentes. Uma outra abordagem que poderíamos analisar é a presença apenas de campos como `Name`, `Props`,`State` e `Functions`, pois se um componente possuir outro componente filho ou nodos dentro de si, os mesmos podem ser acessados ao usar um `props.children` por exemplo.
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/componentesProps.png">
|
|
|
|
<img src="resources/images/componentesProps.png">
|
|
|
|
|
|
|
|
Na imagem acima temos o que seria a representação para compreender a forma como os componentes conseguem se relacionar uns com os outros através das `Props` que foram descritas acima.
|
|
|
|
|
|
|
|
Aplicando esse conceito de representação para o nosso projeto, nós teremos um Diagrama de Componentes organizados da seguinte maneira:
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/components_diagram_frontend.png">
|
|
|
|
<img src="resources/images/components_diagram_frontend.png">
|
|
|
|
|
|
|
|
### Diagrama do Sistema
|
|
|
|
|
| ... | ... | @@ -132,7 +132,7 @@ Pensando agora de maneira mais técnica e entrando mais afundo no código, o sis |
|
|
|
- Para acessar as páginas existentes, uma rota é especificada para cada uma delas.
|
|
|
|
> Por exemplo, caso o usuário deseje acessar a parte de Criações de uma Receita, é necessário que o caminho que ele faça na aplicação tenha uma rota que leve para `/creations`
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/system_diagram_frontend.png">
|
|
|
|
<img src="resources/images/system_diagram_frontend.png">
|
|
|
|
|
|
|
|
Neste diagrama de sistema abordamos exatamente o que foi explicado acima, onde a Routes (através do `react-router`) manipula os diversos caminhos da aplicação, sendo que caso o desejo seja acessar a página responsável pelo Feed, é necessário que o seu _path_ seja igual à `/recipes`. Também é demonstrado a forma como se comunicam as estruturas do sistema, onde uma página chama diversos componentes ou um único componente que, dentro de si, chama outros componentes.
|
|
|
|
|
| ... | ... | @@ -140,4 +140,4 @@ Neste diagrama de sistema abordamos exatamente o que foi explicado acima, onde a |
|
|
|
|
|
|
|
O Diagrama de sequência é uma abordagem na modelagem em UML na qual o objetivo é incidir sobre as _linhas da vida_ existentes na aplicação. Em outras palavras, é uma espécie de diagrama de interação, pois descreve **como** e **em qual ordem** os diversos pacotes de trabalho trabalham juntos.
|
|
|
|
|
|
|
|
<img src="https://tools.ages.pucrs.br/olive/olive-wiki/raw/master/Images/diagrams/sequence-frontend.png"> |
|
|
|
<img src="resources/images/sequence-frontend.png"> |
