Home	Escopo e Cronograma	Processo	Design/Mockups	Configuração	Arquitetura	Código	BD	Qualidade	Utilizaçã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

• Arquitetura do Sistema
  • Descrição
  • Sumário
  • Arquitetura Geral da Aplicação
  • Backend
    • Definições de Tecnologias
    • Módulos do Sistema
    • Diagrama de Fluxo
  • Frontend
    • Definições de Tecnologias
    • Módulos do Sistema
    • Diagramas de Componentes

Arquitetura Geral da Aplicação

O dispositivo do usuário (Mobile ou Desktop) através de uma interface gráfica feita em JavaScript + React + PWA, faz requisições (através do Axios) ao nosso back-end feito com Typescript + Node + Express. Se necessário, o back-end salva ou lê dados do nosso banco de dados não relacional, utilizando o serviço do Firebase.

Backend

Definições de Tecnologias

O backend utilizará Node + Express para construir uma API que rodará em um servidor na AWS. Utilizaremos Typescript por acreditar deixar o código mais legível e ESLint para ajudar no monitoramento dos padrões determinados pelo time. Para o banco de dados e validação de login, utilizaremos os serviços do Firebase.

Módulos do Sistema

Routes: Rotas onde o servidor estará esperando receber solicitações HTTP para devolver uma resposta em JSON.

Controller: Fazer o controle do que foi solicitado pela rota, validando o pedido e repassando a tarefa para ser executada pelo service.

Service: Responsável por conseguir e organizar a resposta (de acordo com as regras de negócio) que a controller está esperando.

Repository: Interage com o Firebase, preenche a Model e encaminha de volta para a Service.

Model: Modelo que representa as entidades do banco de dados, será preenchido com os dados do Firebase pela service.

Firebase: Serviço externo do Google, utilizaremos para autenticação/login dos usuários e para armazenar o nosso banco de dados não relacional.

Diagrama de Fluxo

Frontend

Definições de Tecnologias

Utilizaremos o Framework React para fazer as views da aplicação, que receberão dados do backend através do Axios. Por ser uma aplicação Mobile, faremos o React gerar uma PWA.

Módulos do Sistema

Component: Componentes visuais genéricos e reutilizáveis em toda a aplicação. Não devem possuir lógica ou dependências.

Container: Utilizará os componentes para apresentar o que for necessário na sua tela, o container é responsável por preencher as informações necessárias do componente (dados, ações de botões e etc) e implementar a lógica.

Screen: Apresentar os containers necessários para formar a tela específica de acordo com os mockups.

Diagramas de Componentes