Home	Escopo e Cronograma	Mockups	Configuração	Arquitetura	BD	Instalação	GP	Processo	Horários

Arquitetura do Sistema

Descrição

Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, além dos dados relativos ao deploy.

Sumário

• Arquitetura do Sistema
  • Descrição
  • Sumário
  • Arquitetura Geral da Aplicação
  • Deploy
    • Diagrama de Deploy
  • Backend
  • Frontend

Arquitetura Geral da Aplicação

O projeto está dividido em duas grandes partes:

• Backend: aplicação SpringBoot que contém os serviços que espelham as regras de negócio
• Frontend: aplicação React com Typescript que representa a interface de usuário.

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.

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

DEV-OPS

• Docker: Utilizado para criar uma imagem docker do sistema a fim de ser utilizada para rodar o sistema dentro de uma máquina da amazon.
• S3: O serviço S3 da amazon foi utilizado para hospedar o frontend em forma de site estático dentro de um bucket.
• EC2: Foi utilizada uma instância do EC2 de um C4-large para rodar o backend em uma imagem docker.
• Router 53: Serviço da Amazon utilizado para redirecionar DNS para a aplicação no CloudFront.
• ACM: Utilizado para geração do certificado digital para que pudesse ser utilizado o contexto HTTPS.
• Cloud Front: Foi utilizado para vincular o certificado ao DNS, pois não tinha como fazer isso direto no bucket.

Backend

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

• config: contém as configurações de cors e do Swagger.
• controller: é o ponto de entrada do backend, onde ficam definidos os endpoints da aplicação.
• domain: camada que contém entidades que espelham o banco de dados.
• dto: possui os objetos utilizados para transportar dados entre as camadas.
• enums: possui as enumerações utilizadas nos dtos ou entidades.
• message: centraliza todas as mensagens que são devolvidas para o frontend.
• repository: é responsável por fazer toda comunicação com o banco de dados.
• security: define configurações de acesso aos endpoints e controla login e autenticação de usuários cadastrados.
• service: camada que contém as regras de negócio.
• util: 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.

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.

• assets: é nesta camada que fica todo o conteúdo estático da nossa aplicação, como imagens e logos.
• components: aqui ficam todos os fragmentos de tela que são reutilizados em mais de uma página.
• model: nesta camada ficam definidas classes que espelham os objetos de request e de response do backend.
• pages: contém as páginas da aplicação. Uma página normalmente é composta por diversos componentes.
• services: contém as funções responsáveis por fazer a comunicação com o backend.
• styles: contém os estilos gerais da aplicação.
• utils: possui abstrações de funções que são reutilizadas em diversos componentes ou páginas.