joaofleao| Home | Escopo e Cronograma | Processo | Design | Configuração | Arquitetura | Código | BD | Qualidade | Instalação |
|---|
Arquitetura do Sistema
Descrição
Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, além dos dados relativos ao deploy.
Sumário
Deploy
Diagrama de Deploy
Backend
Definições de Tecnologias
Pontos-chave:
- Questionário inicial para o time.
- Por questão de facilidade no desenvolvimento do projeto (em relação tanto ao backend quanto ao frontend), a linguagem definida foi Javascript.
Escolhas:
- Linguagem: JavaScript com TypeScript
- Frameworks: Node e Express
- knex como ORM
- celebrate como middleware de requests
- jest para testes unitários / integração
Módulos do Sistema
Diagrama de Fluxo
Diagrama do Sistema
Diagramas de Sequência
Frontend
Definições de Tecnologias
Escolhas:
- Linguagem: Javascript
- Framework: React JS com Material UI
- Ferramentas: Prettier, ESLint.
Depois de conversas com os Stakeholders e discussões com o time em relação a tecnologias e conhecimentos de cada um para o projeto, foi concluído que JavaScript com a utilização de React seria ideal para a criação da aplicação a ser desenvolvida.
React.js é uma biblioteca de JavaScript, open source, utilizada para construir user interfaces, nomeadas para aplicações de página única.
O diferencial do React é ser rápida, escalável e simples, podendo ser usada com outras bibliotecas ou frameworks de JavaScript.
Prettier e ESLint são ferramentas voltadas para a padronização de código, a primeira sendo utilizada para formatação do mesmo e a segunda para identificar padrões e garantir o uso de boas práticas. Quando configuradas em uma IDE, elas garantem que ao salvar trechos do código, padrões de indentação, aplicação de boas práticas e formatação sejam seguidas.
Módulos do Sistema
- Components: Onde estarão localizados os componentes visuais encontrados em diferentes páginas da aplicação. Os componentes em sua maioria são genéricos e podem ser utilizado em mais de uma parte do sistema.
- Pages: Onde estarão localizadas as telas da aplicação. Cada tela é composta de diversos componentes que quando agrupados fornecem as funcionalidades da aplicação ao usuário.
- Routes: A camada de rotas da aplicação.
- Context: Onde é disponibilizado uma forma de passar dados entre a árvore de componentes sem precisar passar props manualmente em cada nível. É indicado para compartilhar dados que podem ser considerados “globais” para a árvore de componentes do React.
- Constants: Classe em que se encontramos temas relacionados à aplicação no geral, e que podem ser reaproveitados sempre, como fontes de tipografia e paleta de cores definidas para serem usadas.
- Assets: Pasta com as imagens que são utilizadas na aplicação uma ou mais vezes.