... | @@ -7,29 +7,34 @@ |
... | @@ -7,29 +7,34 @@ |
|
|
|
|
|
# Página da Arquitetura do Sistema
|
|
# Página da Arquitetura do Sistema
|
|
<br>
|
|
<br>
|
|
|
|
|
|
### MÓDULOS DO SISTEMA:
|
|
### MÓDULOS DO SISTEMA:
|
|
---------------------
|
|
|
|
|
|
|
|
- **Components**: Onde estão os componentes visuais que podem ser utilizados em toda a aplicação. Não devem possuir lógica e nem depender de outros serviços, tornando-o assim, genérico a partir de alguma característica determinada.
|
|
- **Components**: Onde estão os componentes visuais que podem ser utilizados em toda a aplicação. Não devem possuir lógica e nem depender de outros serviços, tornando-o assim, genérico a partir de alguma característica determinada.
|
|
- Exemplos: `CardEmojiComponent`, `ItemListComponent`
|
|
- Exemplos: `CardEmojiComponent`, `ItemListComponent`
|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
- **Containers**: Os containers ficam responsáveis de unificar os componentes que serão utilizados em uma tela, atribuindo a eles a camada de lógica de acordo com a funcionalidade que o mesmo deve implementar, como por exemplo o que o botão deverá realizar quando pressionado.
|
|
- **Containers**: Os containers ficam responsáveis de unificar os componentes que serão utilizados em uma tela, atribuindo a eles a camada de lógica de acordo com a funcionalidade que o mesmo deve implementar, como por exemplo o que o botão deverá realizar quando pressionado.
|
|
|
|
|
|
- Exemplos: `CardEmojiContainer`, `ListContainer`
|
|
- Exemplos: `CardEmojiContainer`, `ListContainer`
|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
- **Screens**: Possui como responsabilidade montar o Container para a apresentação. Não deve possuir lógica, pois seu container ja deve possuir implementada.
|
|
- **Screens**: Possui como responsabilidade montar o Container para a apresentação. Não deve possuir lógica, pois seu container ja deve possuir implementada.
|
|
|
|
|
|
- Exemplos: `EmojiScreen`, `ListScreen`
|
|
- Exemplos: `EmojiScreen`, `ListScreen`
|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
- **Routes**: A camada de *Routes*, 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 `TabBarNavigator` (navegação por blocos com funcionalidades que diferem umas das outras, possui uma barra com suas opções na parte inferior da aplicação)
|
|
- **Routes**: A camada de *Routes*, 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 `TabBarNavigator` (navegação por blocos com funcionalidades que diferem umas das outras, possui uma barra com suas opções na parte inferior da aplicação)
|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
- **Database**: Classe de acesso ao serviço utilizado, com as configurações necessárias e os métodos que irão facilitar a manipulação do mesmo.
|
|
- **Database**: Classe de acesso ao serviço utilizado, com as configurações necessárias e os métodos que irão facilitar a manipulação do mesmo.
|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
- **Utils**: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
|
|
- **Utils**: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
|
|
|
|
|
|
<br>
|
|
<br>
|
... | @@ -39,30 +44,27 @@ |
... | @@ -39,30 +44,27 @@ |
|
<br>
|
|
<br>
|
|
|
|
|
|
### DIAGRAMA DO SISTEMA:
|
|
### DIAGRAMA DO SISTEMA:
|
|
---------------------
|
|
|
|
|
|
|
|
O diagrama do sistema de como as camadas se comunicam. Cada container irá dispor vários componentes (genericamente implementados). A Screen irá montar os containers, onde estas serão navegadas pelas Routes.
|
|
O diagrama do sistema de como as camadas se comunicam. Cada container irá dispor vários componentes (genericamente implementados). A Screen irá montar os containers, onde estas serão navegadas pelas Routes.
|
|
|
|
|
|
Baixe [**aqui**](/uploads/1c15f533780d951f197aacc40356f56c/DiagramaSistema.pdf) para visualizar um diagrama PDF que exemplifica como funciona as dependências do sistema pelas três camadas. Clique em cada quadrado para visualizar o código.
|
|
Baixe [**aqui**](/Imagens/DiagramaSistema.pdf) para visualizar um diagrama PDF que exemplifica como funciona as dependências do sistema pelas três camadas. Clique em cada quadrado para visualizar o código.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
<br>
|
|
<br>
|
|
|
|
|
|
|
|
|
|
### DIAGRAMA DE COMPONENTES:
|
|
### DIAGRAMA DE COMPONENTES:
|
|
-------------------------
|
|
|
|
|
|
|
|
O diagrama de componentes do sistema está descrito a seguir, mostrando as comunicações e chamadas que o aplicativo realiza para as suas funcionalidades e comunicação com o banco de dados.
|
|
O diagrama de componentes do sistema está descrito a seguir, mostrando as comunicações e chamadas que o aplicativo realiza para as suas funcionalidades e comunicação com o banco de dados.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
### ARQUITETURA DO FIREBASE:
|
|
### ARQUITETURA DO FIREBASE:
|
|
-------------------------
|
|
|
|
|
|
|
|
O *Google Firebase* é conhecido como um *Backend as a Service*, que já fornece um serviço que garante que a estrutura necessária do Backend já esteja pronta para ser usada por desenvolvedores. O projeto *HiperBem* faz uso desta ferramenta para integração e fluxo de dados.
|
|
O *Google Firebase* é conhecido como um *Backend as a Service*, que já fornece um serviço que garante que a estrutura necessária do Backend já esteja pronta para ser usada por desenvolvedores. O projeto *HiperBem* faz uso desta ferramenta para integração e fluxo de dados.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -75,6 +77,6 @@ O diagrama a seguir representa a versão final do produto que será implantada. |
... | @@ -75,6 +77,6 @@ O diagrama a seguir representa a versão final do produto que será implantada. |
|
|
|
|
|
**OBS:** Esta versão atual é parcial e será atualizada assim que as tecnologias forem completamente definidas (executáveis, etc...)
|
|
**OBS:** Esta versão atual é parcial e será atualizada assim que as tecnologias forem completamente definidas (executáveis, etc...)
|
|
|
|
|
|
Clique [**aqui**](/uploads/a6d514fdad9e046491a6970535985dd7/Deployment_Diagram__1_.pdf) para visualizar em *PDF*.
|
|
Clique [**aqui**](/Imagens/Deployment_Diagram__1_.pdf) para visualizar em *PDF*.
|
|
|
|
|
|
 |
|
 |
|
\ No newline at end of file |
|
\ No newline at end of file |