Mantap! Menggunakan ESP32 sebagai server lokal (offline) untuk ruang belajar digital adalah ide yang cerdas dan hemat biaya — cocok untuk sekolah. Saya akan jelaskan dengan langkah-langkah jelas agar kamu bisa buat "kelas digital" yang bisa diakses lewat WiFi tanpa kuota internet.
---
🧠 Konsep Dasar
ESP32 bisa membuat WiFi hotspot lokal dan menyimpan file HTML/website di dalamnya. Siswa cukup:
Sambung ke WiFi ESP32
Buka browser dan ketik alamat seperti http://192.168.4.1
Maka halaman belajar akan muncul (seperti index.html buatan kamu)
---
✅ Alat dan Bahan:
1. ESP32 Dev Board
2. Kabel USB data
3. Laptop dengan Arduino IDE
4. File HTML / CSS / JS (materi ruang belajar)
---
🔧 Langkah-Langkah:
✴️ 1. Install Library ESPAsyncWebServer
Kamu perlu menambahkan 2 library ke Arduino IDE:
ESPAsyncWebServer
AsyncTCP
Cara install:
Buka Arduino IDE > Sketch > Include Library > Manage Libraries
Cari dan install ESPAsyncWebServer dan AsyncTCP
---
✴️ 2. Siapkan File HTML
Buat folder seperti ini:
/project-belajar/
├── index.html
├── style.css
Contoh isi index.html:
<!DOCTYPE html>
<html>
<head>
<title>Ruang Belajar Otomotif</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bab 1: Sistem Pengapian</h1>
<p>Materi pembelajaran tentang CDI, koil, dan busi.</p>
</body>
</html>
---
✴️ 3. Upload File ke ESP32
Gunakan ESP32 Sketch Data Upload Tool (plugin untuk Arduino IDE) agar bisa upload file ke SPIFFS (storage di ESP32).
Langkah:
Install plugin: ESP32 FS Tool
Simpan file HTML/CSS dalam folder data/
Di Arduino IDE, klik Tools > ESP32 Sketch Data Upload
Maka file HTML/CSS akan masuk ke memori ESP32
---
✴️ 4. Koding Arduino
Gunakan kode ini:
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include "SPIFFS.h"
const char* ssid = "RuangBelajar";
const char* password = "12345678";
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
WiFi.softAP(ssid, password);
Serial.println("WiFi Started");
if (!SPIFFS.begin(true)) {
Serial.println("Gagal mount SPIFFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", "text/html");
});
server.serveStatic("/", SPIFFS, "/");
server.begin();
}
void loop() {
}
---
🚀 Hasilnya:
ESP32 membuat hotspot bernama RuangBelajar
HP siswa tersambung ke WiFi itu
Akses http://192.168.4.1 → langsung lihat tampilan ruang belajar digital tanpa internet!
---
🎁 BONUS IDE
Tambahkan soal interaktif (pakai JavaScript di HTML)
Poin untuk nilai kuis
Multi-bab (gunakan tombol dan link antar file)
---
Kalau kamu ingin: ✅ File HTML + CSS + struktur siap upload
✅ Template edukasi Otomotif
✅ Desain yang menarik dan ringan
Saya bisa bantu buatkan. Mau Bab 1-nya tentang apa dulu? Saya bantu siapkan filenya sekalian siap upload ke ESP32.
Siap! ✅ Kamu bisa buat barcode (QR Code) untuk alamat localhost (misalnya ESP32 http://192.168.4.1) agar siswa tinggal scan barcode lalu langsung masuk ke ruang belajar digital tanpa ketik alamat manual.
---
🔧 Cara Membuat QR Code dari Alamat Localhost
✅ Jika Alamatnya:
http://192.168.4.1
🧰 Gunakan QR Generator Online (praktis):
1. Buka website: https://www.qr-code-generator.com/
2. Masukkan URL: http://192.168.4.1
3. Klik Download atau Save
4. Cetak / tampilkan QR Code untuk siswa
---
📱 Alternatif (dari HP):
Gunakan aplikasi pembuat QR seperti:
QR Code Generator (by TeaCapps) – Play Store
Barcode Generator
Atau aplikasi WhatsApp Web Scanner bawaan HP Samsung/Xiaomi (bisa buat QR juga)
---
📌 Tips Cetak dan Penggunaan:
Cetak QR dan tempel di dinding/lab kelas.
Siswa cukup:
1. Sambung ke WiFi ESP32: RuangBelajar
2. Scan QR → langsung terbuka http://192.168.4.1 di browser HP
Tanpa internet, tanpa aplikasi tambahan, tanpa login!
---
Mau Dibuatkan QR Sekarang?
Kalau kamu konfirmasi alamatnya misalnya:
http://192.168.4.1
Saya bisa buatkan QR code dalam format gambar PNG sekarang juga.
Mau? Silakan konfirmasi alamatnya, atau kirim alamat lain yang ingin dijadikan barcode.
Siap! Kita mulai dari Bab 1: Sistem Pengapian Sepeda Motor, lengkap dengan materi HTML-nya untuk digunakan di ESP32 atau localhost, dan bisa ditampilkan lewat QR Code.
---
📘 Materi: Bab 1 – Sistem Pengapian Sepeda Motor
📂 Struktur File:
/data/
├── index.html
└── style.css
---
📝 index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bab 1: Sistem Pengapian</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Bab 1: Sistem Pengapian Sepeda Motor</h1>
</header>
<main>
<section class="materi">
<h2>🔧 Komponen Utama</h2>
<ul>
<li><strong>CDI (Capacitor Discharge Ignition)</strong> – Mengatur waktu pengapian.</li>
<li><strong>Koil Pengapian</strong> – Meningkatkan tegangan listrik.</li>
<li><strong>Busi</strong> – Menyalakan campuran bahan bakar dan udara di ruang bakar.</li>
</ul>
</section>
<section class="materi">
<h2>⚙️ Cara Kerja Sistem Pengapian</h2>
<p>
Ketika mesin berputar, pulser mengirim sinyal ke CDI. CDI memproses sinyal tersebut dan mengeluarkan arus ke koil. Koil meningkatkan tegangan dan mengalirkan ke busi untuk memercikkan api di ruang bakar.
</p>
</section>
<section class="latihan">
<h2>📝 Latihan Soal</h2>
<ol>
<li>Sebutkan 3 komponen utama sistem pengapian!</li>
<li>Apa fungsi CDI dalam sistem pengapian?</li>
<li>Jelaskan proses pengapian secara singkat!</li>
</ol>
</section>
</main>
<footer>
<p>SMK Otomotif Digital | Ruang Belajar Offline</p>
</footer>
</body>
</html>
---
🎨 style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0 20px;
}
header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
border-bottom: 5px solid #2980b9;
}
h1, h2 {
margin: 10px 0;
}
.materi, .latihan {
background-color: white;
margin: 20px 0;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 10px;
font-size: 0.9em;
color: #888;
}
---
📦 Cara Menggunakan:
🧑🏫 Untuk di ESP32:
1. Simpan index.html dan style.css di folder data/.
2. Upload ke ESP32 menggunakan ESP32 Sketch Data Upload Tool.
3. Jalankan program ESP32 server (seperti yang dijelaskan sebelumnya).
4. Akses dari browser HP: http://192.168.4.1
💻 Untuk Laptop (offline):
1. Simpan file di satu folder.
2. Klik dua kali index.html → langsung tampil di browser (tanpa internet).
---
📲 QR Code Link (contoh)
Kalau kamu pakai alamat ini:
http://192.168.4.1
Saya bisa langsung buatkan gambar QR Code-nya sekarang.
Ketik "Ya, buatkan QR-nya" kalau kamu mau saya kirim QR-nya sekarang.
Butuh saya bantu ZIP semua file siap upload juga?
Pertanyaan bagus! Kapasitas penyimpanan ESP32 memang terbatas, jadi penting untuk tahu batasannya sebelum memasukkan materi ke dalamnya.
---
📦 Kapasitas Penyimpanan ESP32
🧠 1. Flash Memory (Penyimpanan)
ESP32 biasanya memiliki Flash Memory 4 MB (kadang 8 MB, tergantung jenis board). Tapi tidak semuanya bisa dipakai untuk file materi.
📁 2. SPIFFS atau LittleFS (untuk simpan file HTML, CSS, JS, gambar)
Umumnya kamu bisa pakai sekitar 1–1.5 MB untuk SPIFFS (tempat file materi disimpan).
Cukup untuk:
±10 halaman HTML
±10–20 file CSS/JS kecil
Gambar ukuran kecil (resolusi rendah, <100 KB per gambar)
---
📊 Estimasi Ukuran File Edukasi HTML (seperti yang kita buat tadi)
Jenis File Ukuran Perkiraan
index.html ± 5 KB
style.css ± 3 KB
Tambahan JS ± 5–10 KB (optional)
5 gambar kecil ± 300–500 KB total
Total ± 500 KB (setengah dari kapasitas SPIFFS)
✅ Masih sangat cukup!
---
🧠 Tips Hemat Kapasitas:
Gunakan gambar berformat .jpg/.webp dan resize ke ukuran kecil (misal: 300px).
Hindari file video/audio — terlalu besar untuk ESP32.
Jangan pakai framework besar (seperti Bootstrap) kecuali versi ringan.
---
✴️ Kalau Butuh Lebih Banyak Kapasitas?
1. Gunakan kartu microSD (ESP32 bisa dihubungkan dengan modul SD Card)
Kapasitas bisa sampai 32 GB
Cocok untuk file multimedia dan e-learning besar
2. Gunakan ESP32 versi 8MB Flash (misalnya WROVER)
Kapasitas SPIFFS bisa lebih besar dari 1.5 MB
---
🔧 Kesimpulan:
Kebutuhan Bisa Di-Handle ESP32 (SPIFFS)?
Halaman HTML + CSS ✅ Sangat bisa
Gambar ukuran kecil ✅ Bisa (kalau dioptimasi)
Video pembelajaran ❌ Tidak disarankan (terlalu besar)
Soal interaktif (JS) ✅ Bisa, asal ringan
---
Kalau kamu mau saya bantu: ✅ Buat versi lengkap dari materi
✅ Kompres gambar
✅ Buat versi ZIP siap upload ke ESP32
Cukup bilang aja, nanti saya kirim!
Tidak ada komentar:
Posting Komentar