arquitetura

This is an old version of this page. You can view the most recent version or browse the history.

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
Backend
Frontend

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

TBD

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.

Diagrama do Sistema

Apresenta a maneira que as camadas do sistema se comunicam. Um conjunto de componentes (implementados de forma genérica) compõe uma tela, que é chamada pelas rotas para compor o fluxo de telas da nossa aplicação web.

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.

Rotas - Objetos e métodos API

TBD

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.

Diagrama do Fluxo

TBD

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.

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.

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.