Skip to content

GitLab

Last edited by Leonardo Vargas Soares
Page history
This is an old version of this page. You can view the most recent version or browse the history.

arquitetura

Home Escopo Git Workflow Design/Mockups Configuração Arquitetura Gerência Código BD Qualidade Frontend Backend Analytics

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.