Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • VIR - wiki VIR - wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1
    • Issues 1
    • 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
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • VIR - Visual Interactive Reading
  • VIR - wikiVIR - wiki
  • Wiki
  • configuracao

Last edited by Arthur Zanella Lovato Nov 28, 2024
Page history
This is an old version of this page. You can view the most recent version or browse the history.

configuracao

Home Escopo e Cronograma Processo Design/Mockups Configuração Código BD Qualidade Utilização

Arquitetura do Projeto

Descrição

...

Sumário

  • Tecnologias
  • Arquitetura Geral da Aplicação
  • Front-end
  • Back-end
  • Deploy
    • Diagrama de Deploy
    • Como fazer deploy

[...]

Arquitetura geral

Frontend

Votação para definição da tecnologia do frontend

A arquitetura do frontend foi baseada no padrão moderno e bastante utilizado na indústria atual de aplicativos - baseado em 2024, o MVVM (Model,View,ViewModel). Utilizando React Native com TypeScript, foram necessárias algumas adaptações e concessões para que o projeto não corresse o risco de ser insustentável, pois a combinação do padrão de funcionamento React Native com a teoria do MVVM vem de encontro com um pouco mais de verbosidade, o que pode ser um entrave para programadores não tão experientes, como AGES I e II. É uma aposta de que seja garantido um projeto sólido.

Já para o Design System, optamos pelo Atomic Design, que é um sistema modular baseado em componentes. Essa metodologia torna o desenvolvimento de produtos digitais ou interfaces no geral mais escalável, uma vez que é mais fácil adicionar novas funcionalidades utilizando esse tipo de sistema (ref. cursospm3).

Abaixo, uma foto mostrando a divisão de componentes, onde um átomo é algo simples como um componente de InputText, e moléculas são jusções de mais de uma célula/componente.

image

image image

Backend

A arquitetura do projeto foi implementada baseada no tipo cliente-servidor. Onde o cliente é o aplicativo em React Native sendo executado no celular do usuário e o servidor é a aplicação Spring Boot, que é executada dentro de um container Docker dentro de uma máquina virtual EC2, no ambiante de nuvem AWS. Já por parte do código utilizamos o design pattern de Layers, este que possibilita a segregação de responsabilidades no backend por meio de camadas que se comunicam utilizando interfaces. Tais camadas implementadas foram a Controller para gerenciar as requisições dos clientes, a Service, encarregada das regras de negócio, e os Repository e Model, que se responsabilizam pela escrita e leitura no banco de dados.

Votação para definição da tecnologia do backend

image image

Definimos Java e SprintBoot

arq_vivi

  • src.main.java = caminho para os diretórios do projeto com.ages.backend = caminho para os arquivos oficiais da arquitetura
  • controller = diretório onde ficam os arquivos de controle das requisições a API REST
  • mappers = diretório que contem os mappers, para mapear objetos da aplicação para a estrutura de dados do banco de dados e vice-versa
  • dto = diretório onde ficam o tratamento de dados e suas validações das requisições para o banco
  • Enum = diretório onde ficam os objetos enumerados (que possuem valores fixos) que podem ser utilizados
  • model = diretório onde ficam as entidades (a estrutura de informações que vão ser salvos no banco)
  • repository = diretório onde ficam os arquivos de tratamento das camadas de persistência do JPA
  • service = diretório onde ficam validações mais complexas e funções utilizadas pelas requisições
  • resources = diretório onde fica o application.properties com as configurações do spring
  • test = diretório onde ficam os testes do projeto
  • Downloads
Programa Descrição
Como fazer o download do Java 21
Como fazer o download do Maven 3.9.X
Como fazer o download do Postman
Como fazer o download da IDE IntelliJ

Diagrama de Componentes

image

Deploy

Diagrama atualizado:diagram_arch_2.0.svg

Estimativa de custo: image infra_cost_estimate.pdf

Como fazer o deploy

Requisitos:

  • Docker
  • Repositório backend clonado
  • Ferramenta para SSH
  • Conta no DockerHub

Para o backend: 1 - Com projeto clonado na máquina local, rodar o comando no mesmo diretório:

mvn clean install

2 - Gerar a imagem do container Docker que irá conter nosso serviço:

docker build -t <userDockerhub>/iacc_backend:latest .

3 - Teste localmente o container para ver se ta tudo okay com o comando:

docker run -p 8080:8080 iacc_backend

4 - Faça login com suas credenciais do Dockerhub:

docker login

5 - Depois subir a imagem para o repositório do Dockerhub:

docker push <userDockerhub>/iacc_backend:latest

6 - Acesse remotamente a EC2 com ssh (peça a chave .pem para os AGES 3 ou 4):

ssh -i "iacc.pem" [email protected]

7 - Baixar a imagem do Dockerhub do nosso container dentro da EC2 após repetir o passo 4 nela:

docker pull <userDockerhub>/iacc_backend:latest

8 - Rodar o container:

sudo docker run -d -p 8080:8080 <userDockerhub>/iacc_backend:latest

Clone repository
  • arquitetura
  • banco_dados
  • codigo
  • configuracao
  • configurações
  • design_mockups
  • escopo
  • gerencia
  • Home
  • processo
  • qualidade
  • utilizacao