| ... | @@ -12,36 +12,43 @@ Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, a |
... | @@ -12,36 +12,43 @@ Esta seção irá abordar a arquitetura selecionada para o Backend e Frontend, a |
|
|
- [Arquitetura do Sistema](#arquitetura-do-sistema)
|
|
- [Arquitetura do Sistema](#arquitetura-do-sistema)
|
|
|
- [Descrição](#descrição)
|
|
- [Descrição](#descrição)
|
|
|
- [Sumário](#sumário)
|
|
- [Sumário](#sumário)
|
|
|
|
- [Tecnologias](#tecnologias)
|
|
|
|
- [Flutter](#flutter)
|
|
|
|
- [Firebase](#firebase)
|
|
|
|
- [Integração](#integração)
|
|
|
- [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação)
|
|
- [Arquitetura Geral da Aplicação](#arquitetura-geral-da-aplicação)
|
|
|
- [Deploy](#deploy)
|
|
|
|
|
- [Recipes API](#recipes-api)
|
|
|
|
|
- [Diagrama de Deploy](#diagrama-de-deploy)
|
|
|
|
|
- [Backend](#backend)
|
|
|
|
|
- [Definições de Tecnologias](#back-end-def-tec)
|
|
|
|
|
- [Módulos do Sistema Back-end](#módulos-do-sistema-back-end)
|
|
|
|
|
- [Diagrama de Fluxo](#diagrama-de-fluxo)
|
|
|
|
|
- [Front-end](#front-end)
|
|
- [Front-end](#front-end)
|
|
|
- [Definições de Tecnologias](#front-end-def-tec)
|
|
- [Definições de Tecnologias](#front-end-def-tec)
|
|
|
- [Módulos do Sistema Front-end](#módulos-do-sistema-front-end)
|
|
- [Módulos do Sistema Front-end](#módulos-do-sistema-front-end)
|
|
|
- [Diagramas de Componentes](#diagramas-de-componentes)
|
|
- [Diagramas de Componentes](#diagramas-de-componentes)
|
|
|
- [Diagrama do Sistema](#diagrama-do-sistema)
|
|
- [Diagrama do Sistema](#diagrama-do-sistema)
|
|
|
|
- [Deploy](#deploy)
|
|
|
|
- [Recipes API](#recipes-api)
|
|
|
|
- [Diagrama de Deploy](#diagrama-de-deploy)
|
|
|
|
|
|
|
|
|
|
|
|
|
## Arquitetura Geral da Aplicação
|
|
## Tecnologias
|
|
|
Abaixo está representado graficamente como funciona a comunicação do Front-end(Flutter) com o Back-end(Firebase).
|
|
Na decisão sobre as tecnologias a serem utilizadas no desenvolvimento da aplicação, a equipe promoveu um debate e um formulário para mapear os conhecimentos de cada integrante. Sendo assim, para a desisão final, foi considerando o tempo de entrega do projeto, os conhecimentos já existentes na equipe, bem como aqueles que poderiam ser adquiridos durante o desenvolvimento.
|
|
|
|
|
|
|
|
### Flutter
|
|
|
|
O Flutter foi criado pela Google, sendo um framework mais voltado para desenvolvimento de aplicativos móveis. Ele permite a criação de aplicativos compilados nativamente para iOS, Android, Windows, Mac, Linux e Web. Utilizando a linguagem de programação Dart, o flutter se diferencia de outros fameworks por utilizar uma abordagem de desenvolvimento baseada em Widgets, que são elementos gráficos reutilizáveis e personalizáveis.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Backend
|
|
### Firebase
|
|
|
|
O Firebase é uma plataforma de desenvolvimento de aplicativos móveis e web da Google, que fornece diversos recursos para ajudar os desenvolvedores a criar aplicações de forma efetiva, rápida e simples. Ele inclui diversas funcionalidades, incluindo armazenamento de dados em tempo real, autenticação de usuários, hospedagem, mensagens e notificações, análise de dados, entre outros.
|
|
|
|
|
|
|
|
### Módulos do sistema Back-end
|
|
### Integração
|
|
|
|
|
|
|
|
|
## Arquitetura Geral da Aplicação
|
|
|
|
Abaixo está representado graficamente como funciona a comunicação do Front-end(Flutter) com o Back-end(Firebase).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Front-end
|
|
## Front-end
|
|
|
|
Para o projeto em questão, optamos por adotar a arquitetura MVC para o desenvolvimento do aplicativo utilizando Flutter. Para o Back-end, decidimos utilizar somente as chamadas ao Firebase.
|
|
|
|
|
|
|
|
### Módulos do sistema Front-end
|
|
### Módulos do sistema Front-end
|
|
|
Para o projeto, foi definida para o Front-end uma arquitetura chamada de MVC, que será utilizada no desenvolvimento com o Flutter. Todavia, a sua estrutura é definida em três partes:
|
|
A arquitetura MVC para Front-end é usada para separar as responsabilidades de interface do usuário, manipulação de dados e a parte lógica. Essas responsábilidades são representadas por três camadas, elas são:
|
|
|
|
|
|
|
|
**Model** é a camada de manipulação de dados. Ele é responsável pela leitura e escrita de dados, e também de suas validações. Sendo assim, ela acaba sendo completamente independente das outras duas camadas.
|
|
**Model** é a camada de manipulação de dados. Ele é responsável pela leitura e escrita de dados, e também de suas validações. Sendo assim, ela acaba sendo completamente independente das outras duas camadas.
|
|
|
|
|
|
| ... | @@ -52,3 +59,10 @@ Para o projeto, foi definida para o Front-end uma arquitetura chamada de MVC, qu |
... | @@ -52,3 +59,10 @@ Para o projeto, foi definida para o Front-end uma arquitetura chamada de MVC, qu |
|
|
### Diagrama do Sistema
|
|
### Diagrama do Sistema
|
|
|
Aqui podemos ver visualmente através de um diagrama como ficou a implementação do **padrão arquitetural** do Flutter:
|
|
Aqui podemos ver visualmente através de um diagrama como ficou a implementação do **padrão arquitetural** do Flutter:
|
|
|
|
|
|
|
|
|
|
|
|
|
### Diagrama de Componentes
|
|
|
|
|
|
|
|
|
|
|
|
## Deploy
|
|
|
|
|
|
|
|
|
