|
|[Home](home)|[Sprints](sprints)|[Requisitos](requisitos)|[Arquitetura](arquitetura)|[Configuração](configuracao)|[Mockups](mockups)|[Banco de Dados](banco_dados)|[Instalação](instalacao)|[Gerência](gp)|[Time](time)|[Padronização](padronizacao)|[Git Workflow](git)|[Qualidade](qualidade)|
|
|
|[Home](home)|[Sprints](sprints)|[Requisitos](requisitos)|[Arquitetura](arquitetura)|[Configuração](configuracao)|[Mockups](mockups)|[Banco de Dados](banco_dados)|[Instalação](instalacao)|[Gerência](gp)|[Time](time)|[Padronização](padronizacao)|[Git Workflow](git)|
|
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
# Arquitetura
|
|
# Arquitetura
|
|
|
|
|
... | @@ -20,30 +20,36 @@ |
... | @@ -20,30 +20,36 @@ |
|
#### Usuário
|
|
#### Usuário
|
|
![diagrama usuario](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Diagrama_Sequencia_Usuario.png)
|
|
![diagrama usuario](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Diagrama_Sequencia_Usuario.png)
|
|
|
|
|
|
------
|
|
|
|
|
|
|
|
### Padrões de código
|
|
## Frontend
|
|
|
|
|
|
|
|
### Módulos do Sistema
|
|
|
|
|
|
|
|
- **Components**: Onde estarão localizados os componentes visuais encontrados em diferentes páginas da aplicação. Os componentes em sua maioria são genéricos e podem ser utilizado em mais de uma parte do sistema.
|
|
|
|
- **Screen**: Onde estarão localizadas as telas da aplicação. Cada tela é composta de diversos componentes que quando juntos apresentam funcionalidades da aplicação
|
|
|
|
- **Routes**: A camada de rotas da aplicação, utilizando o padrão de arquitetura *Coordinator*, irá realizar a navegação entre as telas da aplicação, tendo conhecimento do fluxo e como devem se comportar. Possui a `StackNavigator` (navegação em telas empilhadas que seguem um determinado fluxo) e a `TabNavigator` (navegação por blocos com funcionalidades que diferem umas das outras, possui uma barra com suas opções na parte inferior da aplicação)
|
|
|
|
- **Utils**: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
|
|
|
|
- **Assets**: Pasta com as imagens que são utilizadas na aplicação uma ou mais vezes.
|
|
|
|
|
|
|
|
### Arquitetura Básica do Frontend
|
|
|
|
|
|
|
|
A utilização de React Native permite a o desenvolvimento da aplicação inteira em JavaScript. Essa aplicação, ao invés de ser convertida para os códigos nativos do iOS e Android, é processada pelo dispositivo, assim gerando uma interface totalmente nativa para ambos os Sistemas Operacionais.
|
|
|
|
|
|
#### Arquivos
|
|
![Arquitetura Frontend](https://tools.ages.pucrs.br/appoio/appoio-wiki/blob/master/images/arquitetura/Arquitetura_Frontend.png)
|
|
Todos arquivos, com exceção dos "index.js", devem fazer uso do padrão PascalCase, ou seja, primeira letra de cada palavra deve ser maiúscula.
|
|
|
|
|
|
|
|
![exemplo de arquivo](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Formato_Arquivo.png)
|
|
Os formato *.ipa* é utilizado para o sistema operacional iOS e o `.apk` para o Android. Para mais informações de como gerar a aplicação e realizar o build, é possível verificar a seção
|
|
|
|
[Compilação e Instalação](https://tools.ages.pucrs.br/appoio/appoio-wiki/wikis/instalacao).
|
|
|
|
|
|
#### Classes
|
|
|
|
As classes devem ser nomeadas no singular e fazendo uso do padrão PascalCase para nomeação, ou seja, primeira letra de cada palavra deve ser maiúscula.
|
|
|
|
|
|
|
|
![exemplo de classe](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Formato_Classe.png)
|
|
### Diagrama do Sistema
|
|
|
|
Maneira que as camadas do sistema se comunicam. Um conjunto de componentes (implementados de forma genérica) compõe uma tela, que é chamada pelas rotas para compor o fluxo de telas da aplicação.
|
|
|
|
|
|
#### Funções e Variáveis
|
|
![Diagrama de Sistema](https://tools.ages.pucrs.br/appoio/appoio-wiki/blob/master/images/arquitetura/Diagrama_de_Sistema.png)
|
|
As variáveis utilizadas no programa devem fazer uso do padrão camelCase para nomeação, ou seja, primeira letra minúscula e a separação das palavras é por letra maiúscula.
|
|
|
|
|
|
|
|
![exemplo de código](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Formato_Código.png)
|
|
|
|
|
|
|
|
|
|
### Diagrama de Componentes
|
|
|
|
|
|
#### Documentação
|
|
|
|
Fazer uso de comentários com /**/ logo acima do pedaço de código que irá ser documentado, pode incluir marcações como @example, @param, @returns, idealmente devem ser incluídas todas as marcações, mas caso não seja simples/possível deve ter ao menos @param e @returns na documentação.
|
|
|
|
|
|
|
|
![exemplo documentação](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Formato_Documentacao.png)
|
|
|
|
|
|
|
|
# Pendencias
|
|
# Pendencias
|
|
* Segurança
|
|
* Segurança
|
... | @@ -51,8 +57,5 @@ Fazer uso de comentários com /**/ logo acima do pedaço de código que irá ser |
... | @@ -51,8 +57,5 @@ Fazer uso de comentários com /**/ logo acima do pedaço de código que irá ser |
|
funcional)
|
|
funcional)
|
|
* Objects – Backend API
|
|
* Objects – Backend API
|
|
* Methods – Backend API
|
|
* Methods – Backend API
|
|
* Arquitetura Não Funcional)
|
|
* Arquitetura Não Funcional
|
|
* Diagrama de Pacotes / Componentes
|
|
|
|
(Arquitetura de software)
|
|
|
|
* Análise dos principios SOLID |
|
* Análise dos principios SOLID |
|
* Code Review |
|
|