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
  • Deploy
    • Recipes API
    • Diagrama de Deploy
  • Backend
    • Definições de Tecnologias
    • Módulos do Sistema
    • Diagrama de Fluxo
  • Frontend
    • Definições de Tecnologias
    • Módulos do Sistema
    • Diagramas de Componentes
    • Diagrama do Sistema

Arquitetura Geral da Aplicação

TBD

Deploy

Recipes API

TBD

Diagrama de Deploy

TBD

Backend

Definições de Tecnologias

TBD

Módulos do Sistema

TBD

Diagrama de Fluxo

TBD

Frontend

Definições de Tecnologias

Escolhas:

• Linguagem: JavaScript;
• Frameworks: React e React Native;
• Ferramentas: Prettier, ESLint, Expo e NGIX.

Justificativa:

React e React Native possuem sintaxe similiar, logo a curva de aprendizado não será grande. Deixar em repositórios separados faz com que cada responsabilidade esteja em um lugar específico sem causar impacto em ambos.

Expo é uma ferramenta utilizada no desenvolvimento, garantindo uma maneira simples de acessar API's nativas sem precisar instalar dependências. Muito utilizado no desenvolvimento mobile, apresentando mudanças em tempo real relizadas no código.

Prettier e ESLint são ferramentas voltadas para a padronização de código. A primeira aplica formatação e a segunda identifica padrões e garante o uso de boas práticas.

NGIX é um servidor leve de HTTP que será usado para disponibilizar nosso site estático.

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.
• Screen: Onde estarão localizadas as telas da aplicação. Cada tela é composta de diversos componentes que quando juntos apresentam funcionalidades da aplicação
• Routes: A camada de rotas da aplicação, utilizando o padrão de arquitetura Coordinator, irá realizar a navegação entre as telas da aplicação, tendo conhecimento do fluxo e como devem se comportar. Possui a StackNavigator (navegação em telas empilhadas que seguem um determinado fluxo) e a TabNavigator (navegação por blocos com funcionalidades que diferem umas das outras, possui uma barra com suas opções na parte inferior da aplicação)
• Constants: Classes que podem ser reaproveitadas na aplicação, com funcionalidades de formatação de texto, modelos de entrada, acesso a constantes, etc...
• Assets: Pasta com as imagens que são utilizadas na aplicação uma ou mais vezes.

Diagramas de Componentes

TBD

Diagrama do Sistema

TBD