Skip to content

GitLab

Last edited by Leonardo Vargas Soares
Page history

arquitetura

Home Escopo Git Workflow Design/Mockups Configuração Arquitetura Gerência BD Qualidade

Definições Arquitetura

Descrição

  • Esta seção irá abordar a arquitetura da aplicação.

Sumário

Arquitetura do Sistema

  • Baseando-se no que foi planejado para o nosso banco de dados, levantamento dos requisitos e o entendimento geral do time sobre o projeto "giftreminder" a ser desenvolvido, optamos por uma arquitetura MVC (Model-View-Controller). Esta escolha foi motivada pela clareza e separação de responsabilidades que o MVC oferece, facilitando tanto o desenvolvimento quanto a manutenção do código. O "Model" gerencia os dados e a lógica do negócio, o "View" é responsável pela apresentação visual dos dados, e o "Controller" atua como um intermediário entre o Model e o View, gerenciando o fluxo de informações e as interações do usuário.

  • Utilizando a arquitetura MVC, podemos garantir uma maior organização do código, o que se traduz em uma manutenção e expansão mais eficientes do projeto. Além disso, esta abordagem promove uma melhor divisão de trabalho e especialização dentro da equipe, pois permite que desenvolvedores de diferentes áreas (back-end, front-end) concentrem seus esforços em partes específicas da aplicação sem interferir uns com os outros. Por fim, a integração com tecnologias de containerização, como demonstrado no diagrama de deploy, reforça a flexibilidade e escalabilidade do sistema, permitindo um gerenciamento mais eficaz dos recursos e uma adaptação rápida a diferentes ambientes de produção.

Deploy

  • O deploy é o processo de disponibilizar uma aplicação concluída para uso. Esse processo pode ser realizado em diversas fases do projeto, assim como após sua finalização. Utilizamos a plataforma de computação em nuvem Amazon EC2 para hospedar o GitLab Runner, que gerencia a execução das pipelines do projeto. Além disso, utilizamos o AWS S3 para armazenar as imagens relacionadas ao projeto.

Diagrama de Deploy

  • O diagrama apresenta o processo de deploy da aplicação Giftreminder utilizando a nuvem AWS.

Diagrama de Componentes

  • Para criar um eficiente para a aplicação "giftreminder", que ilustre claramente, podemos seguir a descrição a seguir, organizando os elementos conforme suas funções específicas:

  • Componentes de Usuário (User Interface Components)

    • Mobile App
      • Função: Interface de usuário para interação com o sistema via dispositivos móveis.
      • Responsabilidades: Enviar requisições e receber respostas do servidor.
      • Plataformas Suportadas: Android, iOS.

  • Componentes de Servidor (Server-side Components)

    • Web Server (FastAPI)
      • Função: Processamento de requisições HTTP dos aplicativos móveis.
      • Responsabilidades: Gerenciar rotas, autenticação e autorização.
    • Application Logic (Controllers)
      • Função: Gerenciamento da lógica de controle.
      • Responsabilidades: Interagir com os modelos de dados para preparar e enviar dados aos usuários.
    • Models
      • Função: Gerenciamento da camada de dados e lógica de negócios.
      • Responsabilidades: Interação com o banco de dados para manipulação de informações.
    • Database (Postgres)
      • Função: Armazenamento de dados persistentes.
      • Responsabilidades: Gerenciado pela camada Model da aplicação.

  • Componentes de Infraestrutura

    • Docker Containers
      • Função: Isolamento e gerenciamento de dependências.
      • Responsabilidades: Cada componente do servidor (FastAPI, Gitlab Runner, Postgres) é implantado em um contêiner separado.
    • Gitlab Runner
      • Função: Automação de CI/CD.
      • Responsabilidades: Automatizar atualizações e testes do código.
    • AWS EC2
      • Função: Hospedagem dos contêineres Docker.
      • Responsabilidades: Fornecer recursos computacionais.
    • AWS S3
      • Função: Armazenamento para dados estáticos ou backups.
      • Responsabilidades: Integrar-se com a aplicação para armazenamento de dados não-relacionais.

  • Componentes de Comunicação

    • API Gateway (FastAPI)
      • Função: Ponto único de entrada para as requisições.
      • Responsabilidades: Roteamento de requisições para os componentes internos apropriados e gerenciamento de respostas.

Definições de Tecnologias

  • Logo abaixo todas as tecnologias e linguagens de programação utilizadas no projeto.

Frontend

  • Repositório: https://tools.ages.pucrs.br/giftreminder/front-end

  • React Native: Framework para desenvolvimento de aplicativos móveis usando JavaScript, permitindo que um único conjunto de código funcione tanto em iOS quanto em Android. Referência

  • TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. Referência

  • Expo: Plataforma que oferece um conjunto de ferramentas e serviços construídos em torno de React Native para ajudar a desenvolver, construir, implantar e rapidamente iterar em aplicativos iOS, Android e web a partir da mesma base de código JavaScript/TypeScript. Referência

  • JavaScript: Uma linguagem de programação versátil usada principalmente para criar interatividade em sites e aplicações web. Referência

  • Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. Referência

  • HTML/CSS: HTML é usado para estruturar o conteúdo na web, e CSS é usado para controlar a apresentação, formatação e layout. Referência

  • Redux: Biblioteca para gerenciamento de estado em aplicações JavaScript, muito usada com React para construir interfaces de usuário previsíveis. Referência

  • React Navigation: Biblioteca para lidar com navegação e transição entre as telas em aplicativos usando React Native ou React. Referência

  • Styled-components: Biblioteca que permite usar estilos em nível de componente em aplicações React e React Native, usando tagged template literals para estilizar os componentes. Referência

Backend

  • Repositório: https://tools.ages.pucrs.br/giftreminder/back-end

  • Python: Linguagem de programação de alto nível, interpretada e de script, conhecida por sua legibilidade de código e suporte a múltiplos paradigmas de programação. É popular em diversos campos, como web, automação, análise de dados e aprendizado de máquina. Referência

  • TypeScript: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. É amplamente usada em projetos que exigem maior escalabilidade e manutenção. Referência

  • FastAPI: Framework moderno e rápido para construir APIs com Python, baseado em Starlette para as partes de roteamento e Pydantic para a validação de dados. É projetado para ser fácil de usar e intuitivo, enquanto fornece altos níveis de desempenho. Referência

  • Postgres (PostgreSQL): Sistema de gerenciamento de banco de dados relacional robusto e de código aberto, conhecido por sua confiabilidade, flexibilidade e suporte a recursos avançados, como consultas complexas e transações atômicas. Referência

  • Docker: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. É essencial para a criação de ambientes isolados e portáteis. Referência

  • Virtual Environment (venv): Ferramenta para criar ambientes Python isolados. Cada ambiente virtual pode ter suas próprias dependências e versões de pacotes, permitindo que projetos diferentes rodem em uma mesma máquina sem conflitos. Referência

Módulos do Sistema

  • Frontend:

    • Estrutura Principal

      • .expo: Configurações específicas para projetos usando Expo.
      • .vscode: Configurações para o editor VS Code, como extensões recomendadas e configurações específicas do projeto.
      • node_modules: Bibliotecas e dependências do projeto instaladas via npm ou yarn.
      • src: Diretório principal onde o código-fonte do front-end está organizado.

    • Dentro do diretório src

      • app: Contém os módulos principais da aplicação.
      • assets: Recursos estáticos como imagens, vídeos ou arquivos de som.
      • components: Componentes reutilizáveis usados em várias partes do aplicativo.
      • constants: Constantes utilizadas ao longo do projeto, como cores, strings, etc.
      • controllers: Lógica para manipular a interação entre a UI e o modelo de dados.
      • DTOs (Data Transfer Objects): Objetos usados para transferir dados entre processos, tipicamente entre o cliente e o servidor.
      • hooks: Hooks personalizados do React utilizados no projeto.
      • services: Serviços para gerenciar a lógica de negócios e as interações com APIs externas.

    • Arquivos de Configuração e Scripts

      • app.json: Configurações específicas para o Expo e outras informações do app.
      • eas.json: Configurações para o serviço de build e submissão do Expo.
      • expo-env.d.ts: Definições de tipo para as variáveis de ambiente usadas com Expo.
      • package.json & package-lock.json: Gerenciam as dependências do projeto e garantem uma instalação consistente das mesmas.
      • tsconfig.json: Configurações do TypeScript para o projeto.

  • Backend:

    • Estrutura Principal

      • app: Diretório principal do projeto onde estão localizados os principais módulos e componentes do back-end.

    • Dentro do diretório APP:

      • controllers: Contém os controladores que gerenciam as operações de entrada e saída de dados, funcionando como intermediários entre os modelos e as visualizações.
      • dependencies: Gerencia as dependências que são necessárias para os controladores, facilitando a injeção de dependências e a configuração do serviço.
      • helpers: Funções auxiliares que fornecem funcionalidades comuns que podem ser utilizadas em várias partes da aplicação.
      • models: Define os modelos de dados que a aplicação utiliza, geralmente correspondendo às tabelas no banco de dados.
      • routes: Gerencia as rotas da aplicação, mapeando as URLs às funções dos controladores que devem responder às solicitações.
      • __init__.py: Arquivo que transforma o diretório em um pacote Python, permitindo sua importação em outras partes do código.
      • main.py: Ponto de entrada da aplicação quando ela é executada como um módulo ou pacote Python.
      • migrate.py: Script para gerenciar as migrações de banco de dados, facilitando a atualização e manutenção do esquema do banco de dados.
      • settings.py: Contém configurações globais da aplicação, como conexão com banco de dados, configurações de segurança, entre outros.

    • Outros Diretórios e Arquivos

      • venv: Diretório que contém o ambiente virtual Python para o projeto, isolando as dependências.
      • docker-compose.yml: Define e configura serviços relacionados, volumes e redes utilizando o Docker Compose.
      • Dockerfile: Script para criar uma imagem Docker do projeto.
      • requirements.txt: Lista todas as bibliotecas Python necessárias para o projeto.