Projeto do Subsistema de Software

1. Introdução

1.1. Objetivo do Documento

Este documento tem como objetivo detalhar o projeto do subsistema de software para a máquina automatizada de fazer drinks. O documento abrange a arquitetura, design, tecnologias utilizadas e especificações funcionais e não funcionais necessárias para o desenvolvimento e implementação do sistema.

1.2 Visão Geral do Sistema

A máquina de drinks automatizada é um dispositivo que permite aos usuários solicitar bebidas do cardápio ou criar misturas personalizadas, as quais são preparadas automaticamente. O sistema oferece perfis de usuário e administrador, cada um com funcionalidades específicas, e utiliza uma aplicação web voltada para dispositivos móveis, garantindo acessibilidade e usabilidade. A comunicação entre o software e o hardware (Esp32) é realizada via MQTT.

2. Escopo do Subsistema de Software

O subsistema de software abrange:

Desenvolvimento da aplicação web (front-end e back-end).
Gestão de pedidos e fila de produção.
Sistema de notificações para usuários e administradores.
Integração com o hardware através de comunicação MQTT.
Monitoramento e controle dos recursos da máquina.

3. Arquitetura de Software

para mais detalhes visite o documento especifico de arquitetura de software

3.1. Visão Geral da Arquitetura

A arquitetura do sistema Drink Mixer segue uma abordagem baseada em camadas, separando as responsabilidades entre o frontend, backend, comunicação com hardware e banco de dados. Isso facilita a escalabilidade, a manutenção e a compreensão do sistema.

Os principais componentes e padrões arquiteturais utilizados são:

Frontend (Aplicação Web): Permite que os usuários escolham bebidas, personalizem seus pedidos e monitorem o status de preparo.
Backend (API): Gerencia a lógica de negócios, comunicação com o hardware via MQTT e persistência de dados no banco de dados.
Banco de Dados: Armazena informações relacionadas a usuários, pedidos e histórico.
Comunicação MQTT: Realizada por meio do broker Rabbit MQ, conecta o backend ao ESP32 para envio e recebimento de mensagens.
Dispositivo Embarcado (ESP32): Executa os comandos para preparação de bebidas e reporta o status de sensores e atuadores.

3.2. Diagrama de Arquitetura

diagrama_arquitetura

3.3. Componentes e Módulos

3.3.1. Back-End

Módulo de Usuário: Permite que os usuários visualize histórico de pedidos.
Módulo de Administrador: Ferramentas para gerenciar o cardápio e monitorar a máquina.
Módulo de Pedidos: Processamento e gerenciamento de pedidos, incluindo fila e cancelamentos.
Módulo de Notificações: Envio de notificações em tempo real para usuários e administradores.
Módulo de Comunicação: Interface com o broker MQTT, servindo de protocolo publisher e subscribe para se comunicar com a esp32

3.3.2. Front-End

Módulo de Inteface do Usuario(UI): Responsável por exibir as informações e capturar as interações do usuário.
Módulo de Gerenciador de Pedido: permite que os usuários visualizem, criem e acompanhem pedidos.

3.3.3. Banco de Dados

Usado para persistir dados relacionados a usuários, pedidos, configurações de bebidas e histórico.

3.3.4. Broker MQTT

O broker utilizado no projeto, RabbitMQ, facilita a comunicação assíncrona entre o backend e o ESP32, garantindo entrega e recebimento confiável de mensagens.

3.3.5. ESP32 (Dispositivo Embarcado)

Execução de Comandos: Processa as instruções recebidas via MQTT para controlar atuadores (bombas, válvulas).
Monitoramento de Sensores: Envia atualizações de status e relatórios de erros ao backend.

3.4. Fluxo de Dados

Para mais detalhes do fluxo e visualização de diagramas visite a documentação completa do Fluxo de Dados

Os fluxos de dados no sistema Drink Mixer são divididos em fluxos felizes e fluxos de exceção, representando os cenários ideais e as situações de falha que podem ocorrer na interação do usuário com o sistema.

3.4.1. Fluxos Felizes

Os fluxos felizes demonstram o caminho ideal percorrido pelos usuários para completar suas tarefas com sucesso, garantindo uma experiência intuitiva e eficiente.

Fluxo de Usuário (Cliente): - Descrição: - O cliente acessa a aplicação, escolhe um drink do cardápio, personaliza a bebida (se necessário) e confirma o pedido. O sistema processa o pedido e informa o status até a conclusão do preparo.

Fluxo de Usuário (Administrador): - Descrição: - O administrador acessa a aplicação, gerencia os insumos da máquina, ajusta o cardápio conforme disponibilidade e monitora o status do sistema. Ele pode ocultar ou destacar bebidas no cardápio, dependendo das necessidades do estabelecimento.

3.4.2. Fluxos de Exceção

Os fluxos de exceção mapeiam os caminhos seguidos em caso de falhas, como erros de comunicação com o hardware ou indisponibilidade de insumos.

Fluxo de Exceção (Administrador): - Descrição: - Caso ocorra uma falha no gerenciamento do cardápio ou na comunicação com o hardware, o sistema exibe mensagens de erro e oferece opções para resolver o problema, como reabastecer insumos ou reiniciar o dispositivo.

4. Interface do Usuário

para mais detalhes visite o documento especifico de identidade

4.1. Guia de Estilo

A interface do usuário (UI) é projetada para oferecer uma experiência intuitiva e responsiva, adaptada para dispositivos móveis. O design utiliza uma paleta de cores coerente e tipografia elegante para garantir uma interação fluida e visualmente agradável.

Cores Principais: - Fundo Principal: #013927 (verde escuro). - Fundo Secundário (Aplicação): #012519 (verde mais escuro). - Botões Ativos: #043122 (verde médio). - Botões Desativados: #878D89 (cinza). - Botões de Ação Crítica: #B3261E (vermelho). - Notificações de Sucesso: #1EA94C (verde claro). - Notificações de Falha: #F54A4A (vermelho claro).

Tipografia:

Fonte Principal: Holtwood One SC (Google Fonts).
Tamanhos de Texto:
Informações gerais: 13px.
Títulos: 20px.
Ingredientes: 16px.
Botões: 16px.
CheckBox: 20px.
Top-Bar: 64px.
Opções de menu: 15px.

Ícones e Elementos Gráficos:

Utiliza a biblioteca de ícones MUI, incluindo:
LocalBar: Representação de drinks.
AcUnit: Representação de gelo.
Add: Para adicionar itens.
Menu: Para navegação.

4.2. Protótipo de Alta Fidelidade

O protótipo de alta fidelidade foi desenvolvido no Figma e pode ser acessado diretamente através do link. Este protótipo foi projetado para dispositivos móveis e ilustra as principais telas da aplicação, incluindo: - Tela inicial para escolha de drinks. - Tela de processamento com animação de preparo. - Tela de erro, exibida em caso de falhas.

4.3. Funcionalidades da Interface

Usuário Consumidor

Escolha de Drinks: A interface apresenta um cardápio dinâmico, adaptado à disponibilidade de ingredientes configurada pelo administrador.
Acompanhamento do Pedido: O status do preparo é exibido em tempo real.
Notificações: O sistema fornece mensagens claras sobre sucesso ou falha no processo.

Usuário Administrador

Gerenciamento de Cardápio: Possibilidade de personalizar o cardápio baseado em sugestões automáticas de receitas.
Controle de Ingredientes: Visualização e atualização da disponibilidade de insumos.
Notificações e Alertas: Indicação de possíveis problemas no sistema ou na máquina.

5. Tecnologia Utilizada

5.1. Front-end

React: uma biblioteca JavaScript de código aberto focada na construção de interfaces de usuário (UI) interativas e eficientes.
TypeScript: é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona tipagem estática e outros recursos avançados à linguagem.

5.2. Back-end

NestJS: é um framework para a construção de aplicações Node.js escaláveis e eficientes do lado do servidor. Inspirado em conceitos do Angular, ele utiliza TypeScript e adota uma arquitetura modular

5.3. Banco de Dados

PostgreSQL: é um sistema de gerenciamento de banco de dados objeto-relacional de código aberto, conhecido por sua confiabilidade, robustez e conformidade com padrões. Ele suporta uma vasta gama de tipos de dados, extensões e funcionalidades avançadas como transações ACID, integridade referencial e replicação.

5.4. Comunicação

MQTT(Message Queuing Telemetry Transport): é um protocolo de mensagens leve projetado para cenários onde a largura de banda é limitada, a latência é alta ou a rede é não confiável. É amplamente utilizado em aplicações de Internet das Coisas (IoT) para comunicação entre dispositivos.
RabbitMQ como Broker MQTT: É um broker de mensagens de código aberto que, além de implementar o protocolo AMQP, também suporta o protocolo MQTT por meio do plugin oficial rabbitmq-mqtt.

6. Comunicação com a Esp32

6.1. Protocolo de Comunicação

A comunicação entre o sistema de software e a placa ESP32 será realizada utilizando o protocolo MQTT, com o Rabbit MQ atuando como broker. O protocolo MQTT é ideal para esse tipo de aplicação devido à sua eficiência e baixa sobrecarga, permitindo comunicação em tempo real entre o back-end e o hardware.

6.2. Estrutura da Comunicação:

Broker MQTT: Centraliza a comunicação, recebendo mensagens dos publishers e distribuindo para os subscribers.
Back-end (NestJS): Atua como publisher e subscriber, enviando comandos para a ESP32 e recebendo status.
ESP32: Atua como subscriber para comandos e publisher para status e eventos.

6.3. Conexão Simulada

Para mais informações visite a documentação especifica da simulação

Devido à falta do hardware físico ESP32, utilizamos o software de simulação Wokwi para realizar os testes. No entanto, nossos códigos desenvolvidos inicialmente apresentaram problemas e não estavam compilando corretamente na simulação. Por esse motivo, decidimos utilizar um código pronto da internet, o qual faz uma conexao MQTT utilizando Broker Mosquitto, que demonstrou ser compatível com o Wokwi. O código utilizado pode ser encontrado no seguinte link: ESP32 Servo Example for Wokwi.

Com esse código funcional, conseguimos conectar o ESP32 ao Wi-Fi e ao broker Mosquitto. Para enviar mensagens à ESP32 e observar a resposta, criamos uma interface HTML simples. Essa interface permite o envio de mensagens à ESP32, que exibe o conteúdo recebido no monitor serial, conforme ilustrado nas imagens abaixo.

ESP32 estabelecendo a conexão MQTT:

Conexao esp

Interface HTML para envio de mensagens à ESP32(Enviando a mensagem "Teste"):

Interface HTML para envio de mensagem

ESP32 recebendo a mensagem enviada pela interface HTML via MQTT(recebendo a mensagem "Teste"):

Esp recebendo a mensagem

7. Software Embarcado

7.1.Descrição Geral

O software embarcado no Esp32 é responsável por:

Receber comandos do back-end via MQTT.
Controlar atuadores (bombas, válvulas) para preparar as bebidas.
Monitorar sensores (nível de líquidos, detecção de copos).
Enviar status operacional e relatórios de erro.

Integração com o Sistema

O Esp32 atua como um cliente MQTT, assinando e publicando nos tópicos definidos.

8. Referências

[1]React - A JavaScript library for building user interfaces Acesso em 8 de Novembro de 2024.

[2]What is React Acesso em 8 de Novembro de 2024.

[3]TypeScript - JavaScript with syntax for types Acesso em 8 de Novembro de 2024.

[4]O que é TypeScript? [Guia para iniciantes] Acesso em 8 de Novembro de 2024.

[5]NestJS - A progressive Node.js framework Acesso em 8 de Novembro de 2024.

[6]NestJS - A progressive Node.js framework Acesso em 8 de Novembro de 2024.

[7]PostgreSQL Documentation Acesso em 8 de Novembro de 2024.

[8]O que é MQTT Acesso em 8 de Novembro de 2024.

[9]Eclipse Mosquitto Acesso em 8 de Novembro de 2024.

[10] ESP-IDF Programming Guide - MQTT Acesso em 8 de Novembro de 2024.

Tabela de versionamento

Versão	Data	Descrição	Responsável
0.1	08/11/2024	Criação do documento	Guilherme Kishimoto, Iago Cabral
0.2	08/11/2024	Introdução, Escopo, Tecnologias e Embarcado	Guilherme Kishimoto, Iago Cabral
0.3	13/11/2024	Simulação de conexão entre ESP32 - NestJS	Guilherme Kishimoto, Iago Cabral
0.4	25/11/2024	Arquitetura, Guia de estilo	Guilherme Kishimoto, Iago Cabral
0.5	25/11/2024	fluxo de dados	Guilherme Kishimoto, Iago Cabral