|[Home](home)|[Escopo](escopo)|[**Arquitetura**](arquitetura)|[Configuração](configuracao)|[Mockups](mockups)|[BD](banco_dados)|[Instalação](instalacao)|[Gerência](gp)|[Qualidade](qualidade)|[Processo](processo)|
|---|---|---|---|---|---|---|---|---|---|

# Arquitetura

_Acesso rápido_

- [Diagrama de deploy](#diagrama-de-deploy)
- [Backend](#backend)
  - [Definições de linguagem e bibliotecas](#definições-de-linguagem-e-bibliotecas)
  - [Módulos do sistema](#módulos-do-sistema)
  - [Diagrama do sistema](#diagrama-do-sistema)
  - [Diagrama de sequência](#diagrama-de-sequência)
- [Frontend](#frontend)
  - [Definições de Tecnologias](#definições-de-tecnologias)
  - [Módulos do sistema](#módulos-do-sistema-1)
  - [Arquitetura básica do frontend](#arquitetura-básica-do-frontend)
  - [Diagrama do sistema](#diagrama-do-sistema)
  - [Diagrama de componentes](#diagrama-de-componentes)
- [Páginas relacionadas](#páginas-relacionadas)

## Diagrama de Deploy

![deployment_diagram](uploads/1665c5af7019c0cd98526ea6c4516adc/deployment_diagram.jpeg)

------

## Backend

### Definições de linguagem e bibliotecas

Pontos-chave:
* Questionário inicial para o time;
* Conhecimento geral do time em Javascript;
* Express mais simples que Spring.

Escolhas:
* Linguagem: Javascript;
* Frameworks: Express e Node.

Antes de começar o desenvolvimento do projeto foi feito um questionário para o time para quantificar o conhecimento dos alunos em diversas tecnologias, frameworks e bancos de dados para determinar quais as tecnologias que seriam mais fáceis de acordo com o conhecimento geral da equipe.

Foi definido a linguagem Javascript para o desenvolvimento do backend devido a proximidade dos integrantes do time com ela e sua facilidade de uso, muitos já haviam estudado Java por causa das cadeiras do curso, mas não tinham conhecimento de Spring, um framework que possui uma curva de aprendizado alta se comparado com o Express que é um micro framework que foi incrementado com extensões para cumprir com as funcionalidades necessárias para o projeto.

### Módulos do Sistema:

- **Routes**: Arquivos possuem o nome do serviço que será disponibilizado, como por exemplo, serviços referentes ao tutorial ficam no arquivo "TutorialRoute". Nele ficam registrados os endpointes da aplicação, ou seja, os caminhos após o endereço do servidor como ```/user/login``` e qual o tipo de chamada o endereço irá receber ```GET```, ```POST```, ```PUT``` ou ```DELETE```

- **Controllers**: Aqui estão os arquivos que irão processar o que foi recebido pelos **routes** e chamar os métodos adequados dos **services** retornando uma resposta válida para o **routes**, normalmente em formato JSON

- **Services**: Nesta pasta ficam os arquivos que validam nossas regras de negócio, como a senha válida do usuário ou se ele é administrador, utilizando o **repository** para fornecer os dados do banco e realizar as validações

- **Repository**: Todos os arquivos aqui fazem as chamadas ao banco de dados através dos **models** passando os parâmetros adequados para as funções desejadas, como as colunas que se deseja dar ```SELECT```, por exemplo.

- **Models**: Aqui estão todas as representações das tabelas do nosso banco de dados, mas de uma forma com que possamos trabalhar facilmente no código: classes. Os dados são recuperados do banco e convertidos para as classes criadas


### Diagrama do Sistema:

Maneira que as camadas do sistema se comunicam. Um fluxo de dados que começa com a requisição do usuário na camada **Route**, segue para **Controller** onde são chamados os métodos de **Service**, que por sua vez validam os dados e encaminham para **Repository** que utilizam os **Model** para fazer ações no banco como ```SELECT```, ```INSERT```, ```UPDATE``` e ```DELETE```. 

Seguindo um fluxo que percorre a estrutura: **Route > Controller > Service > Repository > Model**.

![estrutura geral](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Estrutura_backend.png)

------

### Diagramas de Sequencia

#### Usuário

![diagrama usuario](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Diagrama_Sequencia_Usuario.png)


## Frontend

### Definições de Tecnologias

Os pontos chaves levados em consideração na escolha das tecnologias de Frontend são os mesmos descritos na seção de Backend.

Escolhas:
* Linguagem: JavaScript;
* Framework: React Native.
* Ferramentas: Prettier, ESLint e Expo.

Depois de conversas com a Stakeholder e discussões com o time em relação a tecnologias do projeto, foi concluído que JavaScript com a utilização de ReactNative seria ideal para a criação de aplicações Android e iOS nativas. 

[React Native](https://reactnative.dev/) é um framework aborda a interface como uma função, que representa o estado atual da aplicação, apresentando componentes visuais escritos em JavaScript que podem ser reutilizados em diferentes telas. Para mais informações em relação ao modo que o React Native cria aplicações nativas tanto para Android quanto para iOS, verifique a seção [Arquitetura básica do frontend](#arquitetura-básica-do-frontend).

[Expo ](https://expo.io/)é uma ferramenta utilizada para garantir uma maneira fácil de acessar API's nativas sem precisar instalar dependências. Por meio de uma aplicação disponível para Android e iOS ele estabelece uma conexão com o dispositivo móvel sendo utilizado para desenvolvimento e apresenta em tempo real as mudanças realizadas no código. Expo também oferece diversos recursos disponíveis em aparelhos mobile, como seleção de fotos da galeria, acesso ao storage assíncrono, notificações e outras funcionalidades utilizadas no desenvolvimento nativo. O mesmo garantiu uma configuração de ambiente rápida, e fácil, eliminando barreiras de configuração dos diferentes sistemas operacionais de dispositivos mobile e computadores.

[Prettier](https://prettier.io/) e [ESLint ](https://eslint.org/)são ferramentas voltadas para a padronização de código, a primeira sendo utilizada para formatação do mesmo e a segunda para identificar padrões e garantir o uso de boas práticas. Quando configuradas em uma IDE, elas garantem que ao salvar trechos do código, padrões de indentação, aplicação de boas práticas e formatação sejam seguidas.

### 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)
- **Constants**: 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.

![arquitetura frontend](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Arquitetura_Frontend.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).

### 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.

![diagrama sistema](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/Diagrama_de_Sistema.png)

### Diagrama de Componentes
O diagrama de componentes da aplicação apresenta a maneira que as classes do sistema estão organizadas, levando em consideração as interfaces, dependências e componentes criados. 

> O diagrama abaixo foi desenvolvido pensando em facilitar o entendimento do frontend da aplicação. Durante o desenvolvimento do projeto esse diagrama será modificado para englobar funcionalidades do backend, especificações de banco de dados e outros serviços utilizados.

![diagrama sistema](https://tools.ages.pucrs.br/appoio/appoio-wiki/raw/master/images/arquitetura/component_diagram.png)

## Páginas relacionadas

Outras páginas da wiki com informações importantes:

- [📄 Configuração](configuracao): instruções para configuração do ambiente de desenvolvimento do backend e frontend.
- [📄 Padronização](padronizacao): padrões de código, documentação e nomenclatura de arquivos.
- [📄 Git Workflow](git_workflow): padrões de commit, branches e merge requests.
- [📄 Rotas](rotas): documentação das rotas da API.
- [📄 Deploy](deploy): como fazer o deploy da aplicação (backend para AWS e .apk para Android).

# Pendencias
* Segurança 
* Objects – Backend API
* Methods – Backend API
* Arquitetura Não Funcional
* Análise dos principios SOLID