Arduino Nano ESP32 - Servidor Web em Cartão MicroSD
Neste tutorial, vamos explorar o processo de criação de um servidor web com Arduino Nano ESP32 hospedado em um Cartão MicroSD. Todos os arquivos HTML, CSS, JavaScript e de imagem necessários ficarão no Cartão MicroSD.
Hardware Necessário
Or you can buy the following kits:
| 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.
Sobre o Arduino Nano ESP32 e o Servidor Web
Temos tutoriais específicos sobre o Arduino Nano ESP32 e Servidor Web, Cartão MicroSD. Cada tutorial contém informações detalhadas e instruções passo a passo sobre a pinagem do hardware, o princípio de funcionamento, a ligação com o Arduino Nano ESP32, o código do Arduino Nano ESP32... Saiba mais sobre eles nos links a seguir:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Copie os conteúdos HTML para o Cartão MicroSD
- Certifique-se de que seu Cartão Micro SD está formatado no formato FAT32, como abaixo (no Windows, clique com o botão direito do mouse → formatar):
- Crie um arquivo HTML index.html e adicione o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arduino Nano ESP32 Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Web Page hosted on MicroSD Card</h1>
<img src="luffy.jpg" alt="A beautiful image">
<p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Crie um arquivo CSS styles.css e adicione o seguinte código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
}
- Prepare uma imagem. Este tutorial usa luffy.jpg, que é usada no código HTML. Você pode baixar esta imagem aqui:
- (Opcional) Prepare uma imagem de favicon. Este tutorial usa este favicon.ico
- Coloque todos os arquivos no diretório raiz do Cartão MicroSD, como nas imagens abaixo:
Observe que você pode adicionar outros arquivos, como JavaScript, txt, csv...
Código Arduino Nano ESP32 - Servidor Web em Cartão MicroSD
/*
* Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com
* Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server-on-sd-card
*/
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS D4 // The Arduino Nano ESP32 pin connected to the CS pin of SD card module
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// init MicroSD Card
if (!SD.begin(PIN_SPI_CS)) {
while (1) {
Serial.println(F("SD CARD FAILED, OR NOT PRESENT!"));
delay(1000);
}
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
=================
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Nano ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Passos Rápidos
- Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente do Arduino Nano ESP32 na Arduino IDE.
- Conecte a placa Arduino Nano ESP32 ao seu PC por meio de um cabo micro USB
- Abra a Arduino IDE no seu PC.
- Selecione a placa Arduino Nano ESP32 e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda da Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para instalar a biblioteca Web Server.
- Copie o código acima e abra-o na Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
- Ao acessar o Serial Monitor, você verá um endereço IP, como: 192.168.0.3.
- Digite o endereço IP fornecido na barra de endereços de um navegador web no seu celular ou PC.
- Lembre-se de substituir '192.168.0.3' pelo endereço IP exibido no Serial Monitor.
- Ao digitar o endereço IP, uma página carregará HTML, CSS e imagens do Cartão SD.
- Ao inspecionar, você notará que o navegador web carrega com sucesso o HTML, o CSS e as imagens armazenados no Cartão SD.
Sinta-se à vontade para personalizar o código HTML e CSS, e incluir imagens adicionais e JavaScript para criar a sua própria página web exclusiva.