| ... | ... | @@ -11,16 +11,42 @@ Para que uma task possa ser declarada como finalizada é preciso que: |
|
|
|
- Não quebra nenhuma funcionalidade anteriormente desenvolvida
|
|
|
|
- Código foi revisado e aprovado por um AGES III ou AGES IV
|
|
|
|
|
|
|
|
## Diagramas
|
|
|
|
|
|
|
|
### Diagrama de Deployment
|
|
|
|
|
|
|
|
|
|
|
|
## Frontend
|
|
|
|
|
|
|
|
# **Entendendo o *react pattern* utilizado no front**
|
|
|
|
### Módulos do sistema
|
|
|
|
- **actions**
|
|
|
|
- description
|
|
|
|
- **assets**
|
|
|
|
- Pasta com as imagens que são utilizadas na aplicação, geralmente SVGs.
|
|
|
|
- **components**
|
|
|
|
- Onde ficam os componentes da aplicação. Geralmente os componentes são criados da maneira mais genérica possível, para ser reutilizado diversas vezes.
|
|
|
|
- **pages**
|
|
|
|
- Onde ficam as páginas da aplicação. Elas são compostas pelos componentes e quando finalizadas significam alguma funcionalidade do app.
|
|
|
|
- **providers**
|
|
|
|
- description
|
|
|
|
- **reducers**
|
|
|
|
- description
|
|
|
|
- **routes**
|
|
|
|
- Camada de rotas da aplicação. Definição de todas as rotas utilizando uma propriedade `path` que permite definir a rota.
|
|
|
|
- **services**
|
|
|
|
- Onde ficam os serviços da aplicação como as definições para realizar chamadas ao backend.
|
|
|
|
- **styles**
|
|
|
|
- Pasta com o estilo da aplicação, majoritariamente possuindo a paleta de cores.
|
|
|
|
- **utils**
|
|
|
|
- Pasta com funções uteis para o sistema, geralmente é algo que é usado mais de uma vez e não é um componente.
|
|
|
|
|
|
|
|
### Diagrama do Sistema
|
|
|
|
Forma que alguns módulos comunicam entre si. Componentes são implementados de forma genérica, que juntos fromam uma tela, que pode ser chamada pelas rotas da aplicação para criar o fluxo das telas.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### **Entendendo o *react pattern* utilizado no front**
|
|
|
|
|
|
|
|
Esta explicação foi baseado neste excelente [artigo](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0), sugiro ler caso queira aprofundar-se mais no assunto. Entretanto, algumas alterações foram feitas para adequar-se mais ao nosso projeto.
|
|
|
|
## *Presentational and Container Components*
|
|
|
|
### *Presentational and Container Components*
|
|
|
|
|
|
|
|
O React fornece muitas vantagens para a reutilização de código. É possível perceber que tudo fica mais simples se você conseguir dividir os seus componentes em duas categorias: *Container* e *Presentational components*. Talvez você não conheça por esses nomes, por isso eles também podem ser chamados de *Fat & Skinny*, *Smart & Dumb, Stateful & Pure, Screens & Components*, etc. Eles não são exatamente iguais, mas a ideia principal é similar.
|
|
|
|
|
| ... | ... | @@ -45,29 +71,10 @@ O React fornece muitas vantagens para a reutilização de código. É possível |
|
|
|
|
|
|
|
- ***Presentational components* são essencialmente sua “palette”.** Você pode colocá-lo em uma página e mexer em todas as variações de design, sem tocar na sua lógica. Você também pode executar *screenshot regression tests* nesta página (*(to-do) estruturação dos testes*)
|
|
|
|
|
|
|
|
# Módulos do sistema - Front: TO-DO
|
|
|
|
- **actions**
|
|
|
|
- description
|
|
|
|
- **assets**
|
|
|
|
- description
|
|
|
|
- **components**
|
|
|
|
- description
|
|
|
|
- **pages**
|
|
|
|
- description
|
|
|
|
- **providers**
|
|
|
|
- description
|
|
|
|
- **reducers**
|
|
|
|
- description
|
|
|
|
- **routes**
|
|
|
|
- description
|
|
|
|
- **services**
|
|
|
|
- description
|
|
|
|
- **styles**
|
|
|
|
- description
|
|
|
|
- **utils**
|
|
|
|
- description
|
|
|
|
|
|
|
|
|
|
|
|
## Backend
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Esta é a página onde irá ficar todas as informações da Arquitetura do seu projeto, Como:
|
| ... | ... | |
