GitLab

Descrição

Esta seção irá abordar os detalhes sobre a arquitetura selecionada para o backend e frontend, além da informações relacionadas ao deploy.

Sumário

• Arquitetura Geral da Aplicação
• Deploy
  • Diagrama de Deploy
• AWS
• Diagrama do Sistema
• Diagrama de Componentes
• Backend
  • Definições de Tecnologias
  • Módulos do Sistema
• Frontend
  • Definições de Tecnologias
  • Diagrama de Fluxo
  • Módulos do Sistema

Arquitetura geral da aplicação

Baseando-se no que foi planejado para o nosso banco de dados, levantamento dos requisitos e o entendimento geral do time sobre o projeto a ser desenvolvido, optamos por uma arquitetura de Cliente-Servidor, onde o há uma separação entre o frontend e backend.

O frontend é responsável por apresentar a interface ao usuário e interagir com o backend via chamadas de API. Já o backend por sua vez, gerencia a lógica de negócios, processamento de dados e interações com o banco de dados.

Além disso a estrutura conta com módulos que facilita a reutilização de código e melhor organização do projeto. Ao construirmos a arquitetura desta maneira permitimos uma escalabilidade maior, fácil manutenção e um desenvolvimento mais ágil para cada parte do sistema.

Deploy

Deploy consiste no processo de colocar no ar uma aplicação já concluída. Ele pode ocorrer durante várias fases do projeto, bem como após a sua conclusão. Dessa forma, utilizamos a plataforma de computação em nuvem da Amazon, EC2, onde será mantido o gitLab runner, a execução da pipeline do projeto e também armazenar as imagens do AWS S3.

Diagrama de Deploy

Diagrama de Componentes

O diagrama de componentes da aplicação apresenta a maneira que as classes do sistema estão organizadas, levando em consideração as interfaces, dependências e componentes criados.

AWS

A AWS (Amazon Web Services) é uma plataforma de serviços em nuvem oferecida pela Amazon. Ela fornece uma ampla gama de serviços de computação em nuvem, armazenamento, banco de dados, análise, inteligência artificial, Internet das Coisas (IoT), segurança e muito mais. A AWS é uma das principais provedoras de serviços em nuvem do mundo.

EC2

O Amazon Elastic Compute Cloud (Amazon EC2) oferece uma capacidade de computação escalável sob demanda na nuvem Amazon Web Services (AWS) ao prover uma web service através do qual um usuário pode iniciar uma Amazon Machine Image para criar uma máquina virtual, que a Amazon chama uma "instância", contendo qualquer software desejado. Um usuário pode criar, lançar e terminar instâncias do servidor, conforme necessário.

S3

O Simple Storage Service (AWS S3) é um serviço de armazenamento de arquivos, também chamados de objetos com foco em escalabilidade, disponibilidade, segurança e performance. E na maior parte das vezes é utilizado para a distribuição de conteúdos, hospedagem de arquivos estáticos para sites, distribuição de conteúdos, armazenamento de dados para aplicativos da web e backups, etc.

Diagrama do Sistema

O diagrama apresenta a maneira que as camadas do sistema se comunicam. O sistema Excedentes funciona da seguinte maneira:

Tudo começa quando o usuário interage com o frontend, o frontend envia uma requisição HTTP atavés de uma chamada para a API backend, o backend processa a requisição e a lógica apropriada é executada (seja a validaçãode dados e autenticação), após essa etapa acontece uma interação entre o backend e o banco de dados PostgreSQL para armazenar e/ou recuperar dados, assim como o uso da AWS S3 para o armazenar as imagens enviados.

Por fim, o backend retorna uma resposta HTTP para a requisição feita anteriormente e então o frontend a processa e atualiza a interface para o usuário conforme o esperado do sistema.

Backend

Repositório: https://tools.ages.pucrs.br/excedentes/excedentes-backend

Definições de linguagem e bibliotecas

Nest (NestJS) é um framework para construção de aplicações eficientes e escaláveis no lado do servidor com Node.js. Ele utiliza JavaScript progressivo, é construído com suporte total a TypeScript (embora ainda permita que desenvolvedores programem em JavaScript puro) e combina elementos de OOP (Programação Orientada a Objetos), FP (Programação Funcional) e FRP (Programação Reativa Funcional). TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem. npm é um gerenciador de pacotes para o Node.JS npm, Inc. é uma subsidiária do GitHub, que fornece hospedagem para desenvolvimento de software e controle de versão com o uso do Git. npm é o gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.js. O TypeORM é um ORM que pode ser executado em NodeJS, nos navegadores, React Native, NativeScript, Expo e Electron, e pode ser usado com TypeScript e JavaScript. Seu objetivo é sempre suportar os recursos mais recentes do JavaScript e oferecer funcionalidades adicionais que nos ajudam a desenvolver qualquer tipo de aplicação que utilize bancos de dados - desde pequenas aplicações com poucas tabelas até aplicações empresariais de grande escala com múltiplos bancos de dados.

Módulos do Sistema

• Api: Contém a lógica para lidar com solicitações HTTP recebidas do frontend. Isso inclui rotas, controladores e métodos para lidar com operações como criação, leitura, atualização e exclusão (CRUD) de recursos.
  • Auth: Módulo de autenticação lida com a autenticação de usuários.
  • Base/Entities: Contém a presença de ORM (Object-Relational Mapping) no sistema. As entidades representam os objetos de dados principais da aplicação e estão relacionadas com as tabelas no banco de dados.
  • Client: Aqui lida-se com a lógica relacionada aos clientes da aplicação.
  • Commons/Validators: Aqui, estão localizados os validadores comuns usados em diferentes partes da aplicação. Isso inclui validações de dados de entrada, como validação de e-mail, verificação de campos obrigatórios, etc.
  • ContractorCompanies: Esse módulo é sobre o gerenciamento de empresas contratantes na aplicação.
  • Products: Esse módulo trata sobre o gerenciamento dos produtos/alimentos na aplicação.

Frontend

Repositório: https://tools.ages.pucrs.br/excedentes/excedentes-frontend

Definições de Tecnologias

React é uma biblioteca front-end de JavaScript, utilizada para definir a parte lógica, e criar componentes HTML, para aplicações web de página única. Vite é uma ferramenta de construção front-end moderna que melhora significativamente a experiência de desenvolvimento. Ele serve código via módulos ES nativos, permitindo um início rápido do servidor e substituição de módulos a quente (HMR). Durante o desenvolvimento, o Vite compila apenas o módulo atual quando um arquivo é editado, em vez de empacotar todos os módulos antecipadamente. Tailwind CSS é uma estrutura CSS de código aberto. A principal característica desta biblioteca é que, ao contrário de outros frameworks CSS como Bootstrap, ela não fornece uma série de classes predefinidas para elementos como botões ou tabelas. TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. É um superconjunto sintático estrito de JavaScript e adiciona tipagem estática opcional à linguagem. Chakra UI é uma biblioteca de componentes simples, modular e acessível que oferece os blocos de construção necessários para desenvolver suas aplicações React. O Zod é uma biblioteca de declaração e validação de dados, ou “schema validation” em TypeScript. Dessa forma, é possível criar uma estrutura com os requisitos de dados que você deseja validar. Ele permite definir tipos de dados utilizando uma sintaxe concisa, garantindo que apenas dados válidos sejam aceitos, o que assegura a segurança do código. Além disso, possui integração com o TypeScript, permitindo o uso de tipos estáticos e inferência de tipos. npm é um gerenciador de pacotes para o Node.JS npm, Inc. é uma subsidiária do GitHub, que fornece hospedagem para desenvolvimento de software e controle de versão com o uso do Git. npm é o gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.js. Node.js é um software de código aberto, multiplataforma, baseado no interpretador V8 do Google e que permite a execução de códigos JavaScript fora de um navegador web. A principal característica do Node.js é sua arquitetura assíncrona e orientada por eventos.

Diagrama do Fluxo

Consumidor

Contratante

Módulos do Sistema

Estrutra de pastas o nosso sistema foi dividido da seguinte maneira:

• App: Contém os componentes principais do React, como App e o roteador principal.
  • Assets/styles: Diretório para arquivos estáticos, como imagens e estilos globais.
  • Components: Componentes React reutilizáveis utilizados em todo o projeto.
  • Config: Configurações globais do projeto, como as do Axios.
  • Core: Contém tipos essenciais, APIs, modelos e serviços centrais.
  • Helpers: Funções auxiliares para formatação de dados, validações, etc.
  • Modules: Features modulares da aplicação, cada uma com seu próprio contexto, páginas, estilos e tipos.