Exemplo Custom WebApp com ESP32 - Tutorial de Interface Web Simples para Iniciantes
Visão Geral
Este exemplo oferece um modelo completo para criar suas próprias aplicações web personalizadas, que se integram perfeitamente à biblioteca DIYables ESP32 WebApps.
O modelo CustomWebApp é perfeito para iniciantes que querem adicionar a própria interface web ao ecossistema DIYables ESP32 WebApps! Este tutorial mostra como criar uma página web simples com troca de dados bidirecional em tempo real entre o navegador web e o ESP32 via WebSocket, que pode:
- Enviar mensagens de texto do navegador web para o ESP32 instantaneamente via WebSocket
- Receber mensagens do ESP32 e exibi-las em tempo real na página web
- Manter uma conexão WebSocket persistente para comunicação contínua
- Reconectar automaticamente quando a conexão WebSocket é perdida
- Funcionar em dispositivos móveis com design responsivo
Projetado para o ESP32 - este modelo se integra perfeitamente aos apps web DIYables existentes e fornece a base para criar suas próprias interfaces IoT personalizadas!
Este modelo fornece o mínimo de código para você começar. Os usuários podem desenvolver as próprias aplicações web sofisticadas modificando este modelo. Recomenda-se conhecimento básico de programação web (HTML, CSS, JavaScript) para personalizar a interface web e adicionar recursos avançados.
O Que Você Vai Aprender
- Como criar um app web personalizado que se integra à biblioteca DIYables ESP32 WebApps
- Como adicionar sua página personalizada ao ecossistema de apps web DIYables
- Como enviar mensagens de texto do navegador web para o ESP32
- Como enviar dados do ESP32 para o navegador web
- Como tratar conexões WebSocket e a reconexão automática
- Como criar interfaces web responsivas para celular
- Como usar o sistema de modelos da DIYables ESP32 WebApps para um desenvolvimento rápido
Recursos
- Integração com DIYables ESP32 WebApps: Integra-se perfeitamente ao ecossistema da biblioteca DIYables ESP32 WebApps
- Código de Modelo Mínimo: Fornece uma base simples que você pode expandir e personalizar
- Desenvolvimento Baseado em Modelo: Ponto de partida completo que você pode modificar para criar aplicações sofisticadas
- Mensagens de Texto Simples: Envie mensagens entre o navegador web e o Arduino
- Reconexão Automática: Reconecta automaticamente quando a conexão é perdida
- Responsivo para Celular: Funciona perfeitamente em celulares, tablets e computadores
- Amigável para Iniciantes: Código limpo e simples, fácil de entender
- Framework Extensível: Requer conhecimento básico de programação web (HTML/CSS/JavaScript) para personalização avançada
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Como Começar
Você pode começar a criar seu app web personalizado para a placa ESP32 seguindo estas etapas principais:
- Execute o Modelo de App Personalizado Padrão na sua placa ESP32
- Teste e Verifique se o App Web Personalizado Padrão Funciona Corretamente
- Entenda o Protocolo de Comunicação e Como Ele Funciona em Segundo Plano
- Modifique o Modelo para Adaptá-lo à Sua Aplicação
- Gerencie Vários Apps Web Personalizados - Guia Essencial para Evitar Conflitos
Vamos começar, um por um.
Execute o Modelo de App Personalizado Padrão na sua placa ESP32
Passos Rápidos
- Se esta é a primeira vez que você usa o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 no Arduino IDE
- Conecte a placa ESP32 ao seu computador usando um cabo USB
- Abra o Arduino IDE no seu computador
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM
- Navegue até o ícone Libraries na barra esquerda do Arduino IDE
- Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca
- Você será solicitado a instalar algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca
- No Arduino IDE, vá em File > Examples > DIYables ESP32 WebApps > CustomWebApp
- Você verá 4 arquivos que formam o modelo completo do app web personalizado:
- CustomWebApp.ino - Código principal do ESP32 (é aqui que você adiciona sua lógica personalizada!)
- CustomWebApp.h - Arquivo de cabeçalho (define a interface com a biblioteca DIYables ESP32 WebApps)
- CustomWebApp.cpp - Arquivo de implementação (trata a integração com o framework da biblioteca)
- custom_page_html.h - Design da página web (personalize sua interface web aqui!)
- Configure o WiFi alterando estas linhas em CustomWebApp.ino:
const char WIFI_SSID[] = "YOUR_WIFI_NAME";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Passo 5: Upload e Teste
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o ESP32
- Abra o Serial Monitor para ver o status da conexão
- Anote o endereço IP exibido no Serial Monitor
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele deve ser parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Starting Custom WebApp...
INFO: Added app /
INFO: Added app /custom
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🔧 Custom WebApp: http://192.168.0.2/custom
==========================================
- Se você não vir nada, reinicie a placa ESP32.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu smartphone ou PC.
- Exemplo: http://192.168.0.2
- Você verá a página inicial como na imagem abaixo:
- Clique no link Web Custom e você verá a interface do app Web Custom como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /custom. Por exemplo: http://[IP_ADDRESS]/custom
Teste e Verifique se o App Web Personalizado Padrão Funciona Corretamente
Quando você executa o modelo CustomWebApp padrão, é isto que você deve ver:
Na Interface Web:
- Status da Conexão: Mostra "Connected" em azul quando o WebSocket está ativo
- Caixa de Entrada de Mensagem: Campo de texto para digitar mensagens para o Arduino
- Botão Enviar: Clique para enviar sua mensagem (ou pressione Enter)
- Exibição das Mensagens do Arduino: Mostra em texto azul as mensagens recebidas do ESP32
Comportamento do ESP32:
- Resposta Eco: Quando você envia "Hello" pela web, o ESP32 responde com "Echo: Hello"
- Atualizações Periódicas: O ESP32 envia mensagens de tempo de atividade a cada 5 segundos: "Arduino uptime: X seconds"
- Serial Monitor: Todas as mensagens recebidas são registradas para depuração
Teste a Comunicação:
- Digite uma mensagem na caixa de entrada (por exemplo, "test message")
- Clique em Enviar ou pressione Enter
- Verifique o Serial Monitor - você deve ver: "Received from web: test message"
- Verifique a página web - você deve ver: "Echo: test message"
- Aguarde alguns segundos - você verá mensagens periódicas de tempo de atividade atualizadas a cada 3 segundos (por exemplo, "Arduino uptime: 15 seconds", "Arduino uptime: 18 seconds", etc.)
Entenda o Protocolo de Comunicação e Como Ele Funciona em Segundo Plano
Entender os mecanismos internos ajuda você a personalizar o modelo com eficiência.
Sistema de Identificador de App
O modelo CustomWebApp usa tags de mensagem exclusivas (chamadas de "App Identifiers") que ajudam o código do ESP32 e os clientes web a filtrar as mensagens que pertencem a eles. Isso é essencial porque sua aplicação pode incluir vários apps web, e cada app precisa processar somente as próprias mensagens, ignorando as outras:
Lado do ESP32 (CustomWebApp.h e CustomWebApp.cpp)
// In CustomWebApp.h
class CustomWebAppPage : public DIYablesWebAppPageBase {
private:
// WebSocket message identifier for this custom app
static const String APP_IDENTIFIER;
// ...
};
// In CustomWebApp.cpp
const String CustomWebAppPage::APP_IDENTIFIER = "CUSTOM:";
// Usage in handleWebSocketMessage:
if (message.startsWith(APP_IDENTIFIER)) {
String payload = message.substring(APP_IDENTIFIER.length());
// Process clean payload without identifier
}
// Usage in sendToWeb:
broadcastToAllClients(APP_IDENTIFIER + message);
Lado do JavaScript (custom_page_html.h)
// WebSocket message identifier for this custom app
const APP_IDENTIFIER = 'CUSTOM:';
// Usage in receiving:
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Process clean message without identifier
}
// Usage in sending:
ws.send(APP_IDENTIFIER + userInput);
Benefícios deste design:
- Fonte única da verdade: Altere o identificador em um único lugar por linguagem
- Sem strings mágicas: Elimina o "CUSTOM:" fixo espalhado pelo código
- Segurança de tipos: O uso de constantes evita erros de digitação
- Extensível: Fácil de criar vários apps personalizados com identificadores diferentes
- Evita conflito de dados entre vários apps: Cada app usa um identificador exclusivo para evitar interferência nas mensagens
- Profissional: Segue os princípios de design orientado a objetos
Observações Importantes:
- Você pode manter o identificador atual "CUSTOM:" ao modificar este modelo de app web personalizado para adaptá-lo ao seu projeto. No entanto, ao criar mais de um app personalizado, certifique-se de alterá-lo para evitar conflitos.
- Se alterar o identificador, certifique-se de que o valor no JavaScript (arquivo .h) e no código do ESP32 (arquivo .cpp) seja o mesmo (por exemplo, ambos usam "TEMP:" ou ambos usam "SENSOR:").
- Identificadores já reservados pelos apps integrados: Os identificadores a seguir já são usados pelos apps integrados da DIYables ESP32 WebApps e devem ser evitados:
- Identificadores dos apps principais: "CHAT:", "MONITOR:", "PLOTTER:", "DIGITAL_PINS:", "JOYSTICK:", "SLIDER:", "TABLE:", "RTC:", "ROTATOR:", "GAUGE:"
- Identificadores de subprotocolos: "TIME:", "DATETIME:", "JOYSTICK_CONFIG:", "PLOTTER_DATA:", "PLOTTER_CONFIG:", "SLIDER_VALUES:", "TABLE_CONFIG:", "TABLE_DATA:", "VALUE_UPDATE:", "PIN_CONFIG:", "PIN_STATES:", "PIN_UPDATE:"
- O JavaScript adiciona o identificador: O JavaScript anexa automaticamente o identificador do app (que é "CUSTOM:" neste modelo) usando a constante APP_IDENTIFIER e depois envia a mensagem ao ESP32 via WebSocket. A mensagem enviada de fato é: CUSTOM:Hello
- A biblioteca DIYables ESP32 WebApps recebe: A biblioteca recebe a mensagem CUSTOM:Hello e a repassa ao seu método CustomWebAppPage::handleWebSocketMessage
- A classe CustomWebAppPage remove o identificador: Em handleWebSocketMessage, a classe CustomWebAppPage verifica se a mensagem começa com o seu APP_IDENTIFIER, remove o identificador usando .substring(APP_IDENTIFIER.length()) e depois repassa a mensagem restante Hello chamando a função de callback implementada no seu arquivo .ino
- Sua aplicação trata a mensagem: Sua aplicação no arquivo .ino recebe somente Hello e pode tratar a mensagem de acordo com a sua lógica personalizada. O modelo atual apenas a imprime e envia de volta uma resposta
- Sua aplicação chama sendToWeb(): No seu arquivo .ino, você chama customPage.sendToWeb("Temperature: 25°C") para enviar os dados ao navegador web
- A classe CustomWebAppPage adiciona o identificador e transmite: A classe CustomWebAppPage adiciona automaticamente o identificador do app, usando a constante APP_IDENTIFIER, à sua mensagem e transmite CUSTOM:Temperature: 25°C a todos os clientes web conectados via WebSocket
- O JavaScript recebe e filtra a mensagem: O navegador web recebe CUSTOM:Temperature: 25°C pelo manipulador de eventos ws.onmessage, mas o JavaScript processa somente as mensagens que começam com APP_IDENTIFIER e remove o identificador usando .substring(APP_IDENTIFIER.length())
- A página web exibe a mensagem limpa: O modelo atual exibe a mensagem limpa Temperature: 25°C (sem o identificador) na seção "Message from Arduino". Você pode personalizar o JavaScript para analisar e exibir os dados de outras formas, dependendo das necessidades da sua aplicação
- CustomWebApp.ino - Sketch principal do ESP32 com a lógica da sua aplicação
- CustomWebApp.h - Arquivo de cabeçalho que define a classe da página personalizada (interface com a biblioteca)
- CustomWebApp.cpp - Implementação com a lógica de comunicação (código da biblioteca)
- custom_page_html.h - Interface HTML separada para facilitar a personalização
Fluxo de Comunicação
Da Página Web para o ESP32:
Quando você digita uma mensagem na interface web e clica no botão de enviar, por exemplo: Hello, acontece o fluxo abaixo:
Do ESP32 para a Página Web:
Quando o seu ESP32 quer enviar dados para a interface web, por exemplo: Temperature: 25°C, acontece o fluxo abaixo:
Visão Geral da Arquitetura
O exemplo CustomWebApp é composto por quatro arquivos principais:
Modifique o Modelo para Adaptá-lo à Sua Aplicação
O modelo foi projetado para ser facilmente personalizável de acordo com as suas necessidades. Veja como adaptá-lo:
1. Integração com Hardware
Adicionar a Inicialização do Hardware
Na função setup() de CustomWebApp.ino:
void setup() {
Serial.begin(9600);
// Add your hardware initialization here
pinMode(LED_BUILTIN, OUTPUT); // Built-in LED
pinMode(3, OUTPUT); // PWM output pin
pinMode(4, INPUT_PULLUP); // Button input with pullup
pinMode(A0, INPUT); // Analog sensor input
// Initialize sensors, displays, motors, etc.
// servo.attach(9);
// lcd.begin(16, 2);
// Rest of setup...
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&customPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
Tratar Comandos Personalizados
Estenda a função de callback para tratar seus comandos personalizados:
customPage.onCustomMessageReceived([](const String& message) {
Serial.println("Received: " + message);
// LED Control
if (message == "led_on") {
digitalWrite(LED_BUILTIN, HIGH);
customPage.sendToWeb("LED turned ON");
}
else if (message == "led_off") {
digitalWrite(LED_BUILTIN, LOW);
customPage.sendToWeb("LED turned OFF");
}
// Servo Control
else if (message.startsWith("servo:")) {
int angle = message.substring(6).toInt(); // Get number after "servo:"
// servo.write(angle);
customPage.sendToWeb("Servo moved to " + String(angle) + " degrees");
}
// Sensor Reading Request
else if (message == "get_temperature") {
float temp = readTemperatureSensor(); // Your sensor function
customPage.sendToWeb("Temperature: " + String(temp) + "°C");
}
// Add more custom commands here
});
Enviar Dados de Sensores em Tempo Real
void loop() {
webAppsServer.loop();
// Send sensor data every 3 seconds
static unsigned long lastSend = 0;
if (millis() - lastSend > 3000) {
// Read your sensors
int lightLevel = analogRead(A0);
bool buttonPressed = !digitalRead(4); // Inverted due to pullup
float temperature = readTemperatureSensor();
// Send to web interface
customPage.sendToWeb("Light: " + String(lightLevel));
customPage.sendToWeb("Button: " + String(buttonPressed ? "Pressed" : "Released"));
customPage.sendToWeb("Temp: " + String(temperature) + "°C");
lastSend = millis();
}
}
2. Personalização da Interface Web
Modificar o Layout HTML
Edite o HTML em custom_page_html.h para mudar a interface:
<!-- Add new controls -->
<div>
<h3>🔌 Device Control</h3>
<button onclick="send('led_on')">LED ON</button>
<button onclick="send('led_off')">LED OFF</button>
<br><br>
<label>Servo Angle:</label>
<input type="range" id="servoSlider" min="0" max="180" value="90"
onchange="send('servo:' + this.value)">
<span id="servoValue">90°</span>
</div>
<div>
<h3>📊 Sensor Data</h3>
<div>Temperature: <span id="tempValue">--°C</span></div>
<div>Light Level: <span id="lightValue">--</span></div>
<div>Button Status: <span id="buttonValue">--</span></div>
</div>
Personalizar o Processamento em JavaScript
Atualize a função ws.onmessage para tratar tipos de dados específicos:
ws.onmessage = function(event) {
if (event.data.startsWith(APP_IDENTIFIER)) {
let message = event.data.substring(APP_IDENTIFIER.length);
// Display all messages in general area
document.getElementById('rawMessage').textContent = message;
// Handle specific message types
if (message.startsWith('Temperature:')) {
let temp = message.split(':')[1].trim();
document.getElementById('tempValue').textContent = temp;
}
else if (message.startsWith('Light:')) {
let light = message.split(':')[1].trim();
document.getElementById('lightValue').textContent = light;
}
else if (message.startsWith('Button:')) {
let button = message.split(':')[1].trim();
document.getElementById('buttonValue').textContent = button;
}
}
};
Adicionar Estilo
Personalize o CSS da sua aplicação:
<style>
.control-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 20px;
margin: 10px 0;
color: white;
}
.sensor-display {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
</style>
Outras Personalizações
Além de modificar a interface web e a integração com o hardware, você também pode personalizar como o seu app aparece no ecossistema DIYables ESP32 WebApps:
1. Personalizar o Caminho do App
Você pode alterar o caminho da URL em que o seu app web personalizado é acessado, modificando o construtor no seu arquivo de cabeçalho:
Caminho Padrão:
// In CustomWebApp.cpp - Default path is "/custom"
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/custom") {
}
Exemplos de Caminhos Personalizados:
// Temperature monitoring app
CustomWebAppPage::CustomWebAppPage() : DIYablesWebAppPageBase("/new-path") {
}
// Accessible at: http://[IP_ADDRESS]/new-path
Observações Importantes:
- O caminho deve começar com "/": Sempre comece o caminho com uma barra
- Use nomes descritivos: Escolha caminhos que descrevam claramente a função do seu app
- Evite conflitos: Não use caminhos já ocupados por apps integrados, como /chat, /monitor, /plotter, etc.
- Use letras minúsculas e hífens: Siga as convenções de URL da web para maior compatibilidade
2. Personalizar o Cartão do App na Página Inicial
Você pode personalizar como o seu app aparece na página inicial da DIYables ESP32 WebApps modificando o método getNavigationInfo() no seu arquivo de implementação:
Cartão de App Básico:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\">"
"<h3>🔧 Custom App</h3>"
"<p>My custom web application</p>"
"</a>";
}
Cartão de App Avançado com CSS Inline:
// In CustomWebApp.cpp
String CustomWebAppPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card\" "
"style=\"background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>Real-time temperature monitoring</p>"
"</a>";
}
Gerencie Vários Apps Web Personalizados - Guia Essencial para Evitar Conflitos
Ao desenvolver vários aplicativos web personalizados, é fundamental evitar conflitos entre os diferentes apps. Vamos supor que queremos adicionar três apps personalizados chamados "Temperature Monitor", "Motor Controller" e "Sensor Dashboard" ao nosso projeto ESP32. Veja como garantir que eles funcionem juntos em harmonia:
1. Use Identificadores de App Exclusivos
Cada app web personalizado deve ter um identificador exclusivo para evitar conflitos de mensagens:
Exemplo: App Temperature Monitor
// In TemperatureApp.cpp
const String TemperatureAppPage::APP_IDENTIFIER = "TEMP:";
// JavaScript in temperature_page_html.h
const APP_IDENTIFIER = 'TEMP:';
Exemplo: App Motor Controller
// In MotorApp.cpp
const String MotorAppPage::APP_IDENTIFIER = "MOTOR:";
// JavaScript in motor_page_html.h
const APP_IDENTIFIER = 'MOTOR:';
Exemplo: App Sensor Dashboard
// In SensorApp.cpp
const String SensorAppPage::APP_IDENTIFIER = "SENSOR:";
// JavaScript in sensor_page_html.h
const APP_IDENTIFIER = 'SENSOR:';
2. Use Caminhos de Página Exclusivos
Cada app web precisa de um caminho de URL exclusivo:
// Temperature App
TemperatureAppPage::TemperatureAppPage() : DIYablesWebAppPageBase("/temperature") {
}
// Motor Controller App
MotorAppPage::MotorAppPage() : DIYablesWebAppPageBase("/motor") {
}
// Sensor Dashboard App
SensorAppPage::SensorAppPage() : DIYablesWebAppPageBase("/sensors") {
}
3. Use Nomes de Classe Exclusivos
Evite conflitos de nomes usando nomes de classe descritivos:
// Instead of multiple "CustomWebAppPage" classes
class TemperatureMonitorPage : public DIYablesWebAppPageBase { };
class MotorControllerPage : public DIYablesWebAppPageBase { };
class SensorDashboardPage : public DIYablesWebAppPageBase { };
4. Organize Vários Apps em Um Projeto
Veja como estruturar um projeto com vários apps personalizados:
// In main .ino file
#include "TemperatureApp.h"
#include "MotorApp.h"
#include "SensorApp.h"
// Create instances
DIYablesHomePage homePage;
TemperatureMonitorPage tempPage;
MotorControllerPage motorPage;
SensorDashboardPage sensorPage;
void setup() {
// Add all pages to server
webAppsServer.addApp(&homePage); // pre-built app
webAppsServer.addApp(&tempPage);
webAppsServer.addApp(&motorPage);
webAppsServer.addApp(&sensorPage);
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
// Set up callbacks for each app
tempPage.onTemperatureMessageReceived([](const String& message) {
// Handle temperature app messages
});
motorPage.onMotorMessageReceived([](const String& message) {
// Handle motor app messages
});
sensorPage.onSensorMessageReceived([](const String& message) {
// Handle sensor app messages
});
}
5. Boas Práticas para Vários Apps
Organização dos Arquivos
MyProject/
├── MyProject.ino // Main sketch
├── TemperatureApp.h // Temperature app header
├── TemperatureApp.cpp // Temperature app implementation
├── temperature_page_html.h // Temperature app web page
├── MotorApp.h // Motor app header
├── MotorApp.cpp // Motor app implementation
├── motor_page_html.h // Motor app web page
├── SensorApp.h // Sensor app header
├── SensorApp.cpp // Sensor app implementation
└── sensor_page_html.h // Sensor app web page
Navegação Entre os Apps
Atualize o método getNavigationInfo() em cada app para oferecer uma navegação fácil:
String TemperatureMonitorPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card temperature\">"
"<h3>🌡️ Temperature Monitor</h3>"
"<p>View real-time temperature data</p>"
"</a>";
}
String MotorControllerPage::getNavigationInfo() const {
return "<a href=\"" + getPagePath() + "\" class=\"app-card motor\">"
"<h3>⚙️ Motor Controller</h3>"
"<p>Control servo and stepper motors</p>"
"</a>";
}
6. Testando Vários Apps
Ao testar vários apps:
- Teste cada app individualmente primeiro
- Verifique o Serial Monitor para ver conflitos de mensagens
- Verifique se os identificadores exclusivos estão funcionando corretamente
- Teste a navegação entre os diferentes apps
- Monitore o uso de memória com vários apps carregados
Seguindo estas orientações, você pode criar vários aplicativos web personalizados que funcionam juntos sem problemas, sem interferir uns nos outros nem em outros apps da DIYables ESP32 WebApps.
Exemplo do Mundo Real
Quer ver um projeto completo criado com este modelo de app web personalizado? Confira este projeto de sensor de cor, que demonstra como criar uma aplicação web totalmente funcional:
📱 Tutorial do App Web: ESP32 - Sensor de Cor pela Web
Este exemplo mostra uma implementação completa com:
- Exibição de detecção de cor em tempo real
- Interface web interativa para as leituras do sensor
- Comunicação WebSocket para atualizações instantâneas
- Design responsivo para celular
🎥 Tutorial em Vídeo: Assista à construção e à demonstração completas no YouTube
Este projeto é uma excelente referência para entender como adaptar o modelo de app web personalizado aos seus próprios projetos com sensores!