Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • W wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • HiperBem
  • wiki
  • Wiki
  • arquitetura

arquitetura · Changes

Page history
imagens authored Mar 02, 2020 by Gabriel Fanto Stundner's avatar Gabriel Fanto Stundner
Hide whitespace changes
Inline Side-by-side
arquitetura.md
View page @ 647d0361
...@@ -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.
![SystemDiagram](/uploads/7a0dc0df7f1111e03ea29410df8ef891/SystemDiagram.png) ![SystemDiagram](/Imagens/SystemDiagram.png)
<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.
![Diagrama](/uploads/94b2863c265d3fd9b16eb5cafe04d29d/Diagrama.png) ![Diagrama](/Imagens/Diagrama.png)
### 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.
![Firebase](/uploads/f192c0fbc942a940e211431022152c22/Firebase.png) ![Firebase](/Imagens/Firebase.png)
...@@ -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*.
![Deploy](/uploads/8a7573ad6eb5a3865618ee35e08d303d/Deployment_Diagram__1_.png) ![Deploy](/Imagens/Deployment_Diagram__1_.png)
\ No newline at end of file \ No newline at end of file
Clone repository
  • arquitetura
  • banco_dados
  • configuracao
  • cronograma
  • git workflow
  • gp
  • Home
  • horarios
  • material de estudo
  • mockups
  • padronização
  • requisitos
  • retrospectivas
  • sprints
  • testes