Lucas Dimer JustoArquitetura 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 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.
Deploy
Recipes API
TBD
Diagrama de Deploy
TBD
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
