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.
Diagrama do Sistema
É a maneira como as camadas do sistema se comunicam, em outras palavras, uma representação do comportamento da aplicação como um todo. Um conjunto de componentes (implementados de forma genérica) compõe uma tela. Esta tela então é chamada pela Routes para assim compor o fluxo de telas da aplicação.
Uma forma de ajudar a entender as diversas relações que o sistema possui é criando/projetando diagramas para compreender estar relações. Vamos partir por exemplo de um nível mais profundo na aplicação, demonstrando como ocorre essas relações dentro de um componente.
A imagem apresentada pode nos auxiliar no entendimento de como se comportam os componentes dentro do React. Claro, essa não é uma ideia definitiva mas sim uma concepção das possíveis relações existentes. Uma outra abordagem que poderíamos analisar é a presença apenas de campos como Name, Props,State e Functions, pois se um componente possuir outro componente filho ou nodos dentro de si, os mesmo podem ser acessados ao usar um props.children