Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • M Mutirao do Bem 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
  • Mutirao do Bem
  • Mutirao do Bem Wiki
  • Wiki
  • arquitetura

arquitetura · Changes

Page history
complementando arquitetura authored Nov 27, 2021 by André Luiz Marques Macrini Leite's avatar André Luiz Marques Macrini Leite
Hide whitespace changes
Inline Side-by-side
arquitetura.md
View page @ 6491be7a
......@@ -14,59 +14,62 @@ Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, a
- [Sumário](#sumário)
- [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação)
- [Deploy](#deploy)
- [Recipes API](#recipes-api)
- [Diagrama de Deploy](#diagrama-de-deploy)
- [Backend](#backend)
- [Definições de Tecnologias](#back-end-def-tec)
- [Módulos do Sistema](#back-end-mods-sis)
- [Diagrama de Fluxo](#diagrama-de-fluxo)
- [Frontend](#frontend)
- [Definições de Tecnologias](#front-end-def-tec)
- [Módulos do Sistema](#front-end-mods-sis)
- [Diagramas de Componentes](#diagramas-de-componentes)
- [Diagrama do Sistema](#diagrama-do-sistema)
## Arquitetura Geral da Aplicação
O projeto está dividido em duas grandes partes:
<ul>
<li><b>Backend: </b>aplicação SpringBoot que contém os serviços que espelham as regras de negócio</li>
<li><b>Frontend: </b>aplicação React com Typescript que representa a interface de usuário.</li>
</ul>
![Diagrama de deploy](./resources/images/diagramas/diagrama_componentes_back_front.png)
## Deploy
Para realizar o deploy do backend é feita primeiramente uma conexão ssh na instância do EC2. Após isso, obtemos a versão mais recente do código fonte do projeto e rodamos o docker-compose para buildar a imagem e rodar a aplicação em um container dokcer.
### Recipes API
TBD
O deploy do frontend é feito pelo console da AWS no serviço do S3. Realizamos o build da aplicação e jogamos a pasta gerada dentro do bucket que hospeda o site estático.
### Diagrama de Deploy
![Diagrama de deploy](./resources/images/diagramas/diagrama_deploy_aws.png)
#### DEV-OPS
<ul>
<li><b>Docker: </b> Utilizado para criar uma imagem docker do sistema a fim de ser utilizada para rodar o sistema dentro de uma máquina da amazon.</li>
<li><b>S3: </b> O serviço S3 da amazon foi utilizado para hospedar o frontend em forma de site estático dentro de um bucket.</li>
<li><b>EC2: </b> Foi utilizada uma instância do EC2 de um C4-large para rodar o backend em uma imagem docker.</li>
<li><b>Router 53: </b> Serviço da Amazon utilizado para redirecionar DNS para a aplicação no CloudFront.</li>
<li><b>ACM: </b> Utilizado para geração do certificado digital para que pudesse ser utilizado o contexto HTTPS.</li>
<li><b>Cloud Front: </b> Foi utilizado para vincular o certificado ao DNS, pois não tinha como fazer isso direto no bucket.</li>
</ul>
## Backend
<h3 id="back-end-def-tec">Definições de Tecnologias</h3>
TBD
<h3 id="back-end-mods-sis">Módulos do Sistema</h3>
TBD
### Diagrama de Fluxo
TBD
É uma RESTful API construída utilizando Spring, que é um dos frameworks Java mais populares do mercado. Roda em uma instância na Amazon EC2. Para documentação e teste dos endpoints da aplicação, foi utilizada uma linguagem de descrição de interface, chamada Swagger, utilizando JSON. Referente a estrutura, utilizamos o Layers Pattern(padrão camadas), para decompor o sistema.
Foi seguido o padrão de Component Based Architecture (Arquitetura Baseada em Componentes). A organização foi pensada a partir do conceito de web components, onde cada "parte" da tela é um componente independente, customizável e que pode ser reutilizável em qualquer outra parte da aplicação.
<ul>
<li><b>config: </b>contém as configurações de cors e do Swagger.</li>
<li><b>controller: </b>é o ponto de entrada do backend, onde ficam definidos os endpoints da aplicação.</li>
<li><b>domain: </b>camada que contém entidades que espelham o banco de dados.</li>
<li><b>dto: </b>possui os objetos utilizados para transportar dados entre as camadas.</li>
<li><b>enums: </b>possui as enumerações utilizadas nos dtos ou entidades.</li>
<li><b>message: </b>centraliza todas as mensagens que são devolvidas para o frontend.</li>
<li><b>repository: </b>é responsável por fazer toda comunicação com o banco de dados.</li>
<li><b>security: </b>define configurações de acesso aos endpoints e controla login e autenticação de usuários cadastrados.</li>
<li><b>service: </b>camada que contém as regras de negócio.</li>
<li><b>util: </b>possui classes que tem métodos que são utilizados em diversas services, como por exemplo o Validations.java que contém validações de campos de um objeto. Nessa camada também ficam as exceptions personalizadas e os handlers dessas exceptions.</li>
</ul>
## Frontend
Uma Progressive Web Application, ou seja, uma aplicação web que pode ser instalada utilizando a tecnologia Service Worker, presente nos principais navegadores web do mundo. Desenvolvido em React com linguagem Typescript e é armazenado na Amazon S3. Para estrutura, utilizamos uma espécie de padrão camadas, onde temos algumas camadas.
<ul>
<li><b>assets: </b>é nesta camada que fica todo o conteúdo estático da nossa aplicação, como imagens e logos.</li>
<li><b>components: </b>aqui ficam todos os fragmentos de tela que são reutilizados em mais de uma página.</li>
<li><b>model: </b>nesta camada ficam definidas classes que espelham os objetos de request e de response do backend.</li>
<li><b>pages: </b>contém as páginas da aplicação. Uma página normalmente é composta por diversos componentes.</li>
<li><b>services: </b>contém as funções responsáveis por fazer a comunicação com o backend.</li>
<li><b>styles: </b>contém os estilos gerais da aplicação.</li>
<li><b>utils: </b>possui abstrações de funções que são reutilizadas em diversos componentes ou páginas.</li>
</ul>
<h3 id="front-end-def-tec">Definições de Tecnologias</h3>
TBD
<h3 id="front-end-mods-sis">Módulos do Sistema</h3>
TBD
### Diagramas de Componentes
TBD
### Diagrama do Sistema
TBD
Clone repository
  • Utilizando a wiki
    • adicionando imagens
    • escrevendo em markdown
    • wiki no editor de texto
  • arquitetura
  • banco_dados
  • codigo
  • configuracao
  • escopo
  • gerencia
  • Home
  • horarios
  • instalacao
  • instrucoes
  • mockups
  • processo
View All Pages