Arquitetura

Acesso rápido

• Diagrama de deploy
• Backend
  • Definições de linguagem e bibliotecas
  • Módulos do sistema
  • Diagrama do sistema
  • Diagrama de sequência
• Frontend
  • Módulos do sistema
  • Arquitetura básica do frontend
  • Diagrama do sistema
  • Diagrama de componentes
• Páginas relacionadas

Diagrama de Deploy

Backend

Definições de linguagem e bibliotecas

Pontos-chave:

• Questionário inicial para o time;
• Conhecimento geral do time em Javascript;
• Express mais simples que Spring.

Escolhas:

• Linguagem: Javascript;
• Frameworks: Express e Node.

Antes de começar o desenvolvimento do projeto foi feito um questionário para o time para quantificar o conhecimento dos alunos em diversas tecnologias, frameworks e bancos de dados para determinar quais as tecnologias que seriam mais fáceis de acordo com o conhecimento geral da equipe.

Foi definido a linguagem Javascript para o desenvolvimento do backend devido a proximidade dos integrantes do time com ela e sua facilidade de uso, muitos já haviam estudado Java por causa das cadeiras do curso, mas não tinham conhecimento de Spring, um framework que possui uma curva de aprendizado alta se comparado com o Express que é um micro framework que foi incrementado com extensões para cumprir com as funcionalidades necessárias para o projeto.

Módulos do Sistema:

• Routes: Arquivos possuem o nome do serviço que será disponibilizado, como por exemplo, serviços referentes ao tutorial ficam no arquivo "TutorialRoute". Nele ficam registrados os endpointes da aplicação, ou seja, os caminhos após o endereço do servidor como /user/login e qual o tipo de chamada o endereço irá receber GET, POST, PUT ou DELETE

• Controllers: Aqui estão os arquivos que irão processar o que foi recebido pelos routes e chamar os métodos adequados dos services retornando uma resposta válida para o routes, normalmente em formato JSON

• Services: Nesta pasta ficam os arquivos que validam nossas regras de negócio, como a senha válida do usuário ou se ele é administrador, utilizando o repository para fornecer os dados do banco e realizar as validações

• Repository: Todos os arquivos aqui fazem as chamadas ao banco de dados através dos models passando os parâmetros adequados para as funções desejadas, como as colunas que se deseja dar SELECT, por exemplo.

• Models: Aqui estão todas as representações das tabelas do nosso banco de dados, mas de uma forma com que possamos trabalhar facilmente no código: classes. Os dados são recuperados do banco e convertidos para as classes criadas

Diagrama do Sistema:

Maneira que as camadas do sistema se comunicam. Um fluxo de dados que começa com a requisição do usuário na camada Route, segue para Controller onde são chamados os métodos de Service, que por sua vez validam os dados e encaminham para Repository que utilizam os Model para fazer ações no banco como SELECT, INSERT, UPDATE e DELETE.

Seguindo um fluxo que percorre a estrutura: Route > Controller > Service > Repository > Model.

Diagramas de Sequencia

Usuário

Frontend

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)
• Utils: 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.

Arquitetura Básica do Frontend

A utilização de React Native permite a o desenvolvimento da aplicação inteira em JavaScript. Essa aplicação, ao invés de ser convertida para os códigos nativos do iOS e Android, é processada pelo dispositivo, assim gerando uma interface totalmente nativa para ambos os Sistemas Operacionais.

Os formato .ipa é utilizado para o sistema operacional iOS e o .apk para o Android. Para mais informações de como gerar a aplicação e realizar o build, é possível verificar a seção Compilação e Instalação.

Diagrama do Sistema

Maneira que as camadas do sistema se comunicam. Um conjunto de componentes (implementados de forma genérica) compõe uma tela, que é chamada pelas rotas para compor o fluxo de telas da aplicação.

Diagrama de Componentes

O diagrama de componentes da aplicação apresenta a maneira que as classes do sistema estão organizadas, levando em consideração as interfaces, dependências e componentes criados.

O diagrama abaixo foi desenvolvido pensando em facilitar o entendimento do frontend da aplicação. Durante o desenvolvimento do projeto esse diagrama será modificado para englobar funcionalidades do backend, especificações de banco de dados e outros serviços utilizados.

Páginas relacionadas

Outras páginas da wiki com informações importantes:

• 📄 Configuração: instruções para configuração do ambiente de desenvolvimento do backend e frontend.
• 📄 Padronização: padrões de código, documentação e nomenclatura de arquivos.
• 📄 Git Workflow: padrões de commit, branches e merge requests.
• 📄 Rotas: documentação das rotas da API.
• 📄 Deploy: como fazer o deploy da aplicação (backend para AWS).

Pendencias

• Segurança
• Objects – Backend API
• Methods – Backend API
• Arquitetura Não Funcional
• Análise dos principios SOLID