| | [**Home**](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) | | | [**Home**](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) | | ||
| | :--------------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: | | | :--------------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: | | ||
| # Arquitetura do Projeto | |||
| ## Descrição | |||
| ... | |||
| ## Sumário | |||
| - [Tecnologias](#tecnologias) | |||
| - [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação) | |||
| - [Front-end](#front-end) | |||
| - [Back-end](#back-end) | |||
| - [Deploy](#deploy) | |||
| - [Diagrama de Deploy](#diagrama) | |||
| - [Como fazer 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](https://www.cursospm3.com.br/blog/atomic-design-o-que-e-etapas-usos-e-dicas-para-aplicar/#:~:text=O%20Atomic%20Design%20%C3%A9%20um,utilizando%20esse%20tipo%20de%20sistema.)). | |||
| 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. | |||
|  | |||
|  | |||
|  | |||
| ## 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 | |||
|  | |||
|  | |||
| Definimos Java e SprintBoot | |||
|  | |||
| - 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 | |||
| |---|---| | |||
| |[](backend/java_instalacao)| Como fazer o download do Java 21 | |||
| |[](backend/maven_instalacao)| Como fazer o download do Maven 3.9.X | |||
| |[](backend/postman_instalacao)|Como fazer o download do Postman| | |||
| |[](backend/intellij_instalacao)|Como fazer o download da IDE IntelliJ | |||
| ## Diagrama de Componentes | |||
|  | |||
| ## Deploy | |||
| Diagrama atualizado: | |||
| Estimativa de custo: | |||
|  | |||
| [infra_cost_estimate.pdf](uploads/447775d29893ac0def5560f9e44a667a/infra_cost_estimate.pdf) | |||
| ### Como fazer o deploy | |||
| Requisitos: | |||
| - Docker | |||
| - Repositório backend clonado | |||
| - Ferramenta para SSH | |||
| - Conta no [DockerHub](https://hub.docker.com/) | |||
| 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``` | |||
| \ No newline at end of file |