LED Terkendali Internet Menggunakan Server Web Berbasis ESP32: 10 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Ulasan Proyek

Dalam contoh ini, kita akan mengetahui cara membuat server web berbasis ESP32 untuk mengontrol status LED, yang dapat diakses dari mana saja di dunia. Anda akan memerlukan komputer Mac untuk proyek ini, tetapi Anda dapat menjalankan perangkat lunak ini bahkan pada komputer yang murah dan berdaya rendah seperti Raspberry Pi.

Persiapan ESP32 dengan Arduino IDE

Untuk mulai memprogram ESP32 menggunakan Arduino IDE dan bahasa pemrograman Arduino, Anda memerlukan add-on khusus. Baca tentang cara menyiapkan Arduino IDE untuk ESP32 di Mac OS dengan tautan berikut.

Perlengkapan

Untuk tutorial ini Anda memerlukan item berikut:

• Papan pengembangan ESP325mm
• LED Resistor 220ohm
• Layar LCD 16x2 dengan modul I2C
• Papan tempat memotong roti
• Kabel jumper
• Kabel mikro USB

Langkah 1: Membangun Sirkuit

Lakukan koneksi seperti yang ditunjukkan pada diagram skema berikut di bawah ini

Mulailah dengan menghubungkan output tegangan suplai 3V3 pada papan tempat memotong roti ESP32 dan GND. Hubungkan LED melalui resistor ke ESP32 menggunakan pin GPIO 23 sebagai pin output digital. Setelah itu, sambungkan pin SDA layar LCD 16x2 ke GPIO pin 21 dan SCL ke GPIO pin 22.

Langkah 2: Tinjauan Singkat Sistem File SPIFFS

SPIFFS adalah singkatan dari "Serial Peripheral Interface Flash File System", yaitu sistem file untuk memori flash yang mentransfer data melalui SPI. Dengan demikian, SPIFFS adalah sistem file sederhana yang dirancang untuk mikrokontroler dengan chip flash yang mengirimkan data melalui bus SPI (seperti memori flash ESP32).

SPIFFS paling berguna untuk digunakan dengan ESP32 dalam situasi berikut:

• Membuat file untuk menyimpan pengaturan
• Penyimpanan data permanen.
• Membuat file untuk menyimpan sejumlah kecil data (alih-alih menggunakan kartu microSD untuk ini).
• Menyimpan file HTML dan CSS untuk membuat server web.

Langkah 3: Instalasi Bootloader SPIFFS di Mac OS

Anda dapat membuat, menyimpan, dan menulis data ke file yang disimpan di sistem file ESP32 secara langsung menggunakan plugin di Arduino IDE.

Pertama-tama, pastikan Anda menginstal Arduino IDE versi terbaru, dan kemudian lakukan hal berikut:

• Buka tautan berikut dan unduh arsip "ESP32FS-1.0.zip"
• Buka direktori Arduino IDE, yang terletak di folder Documents.
• Buat folder alat, jika tidak ada. Di dalam direktori alat buat folder lain ESP32FS. Di dalam ESP32FS buat yang lain, yang disebut alat.
• Buka zip arsip ZIP yang diunduh pada langkah 1 ke folder alat.
• Mulai ulang IDE Arduino Anda.
• Untuk memeriksa apakah plug-in berhasil diinstal, buka Arduino IDE dan klik "Tools" dan periksa apakah ada item "ESP32 Sketch Data Upload" di menu ini.

Langkah 4: Memasang Perpustakaan

Pustaka ESPAsyncWebServer dan AsyncTCP memungkinkan Anda membuat server web menggunakan file dari sistem file ESP32. Untuk informasi selengkapnya tentang perpustakaan ini, periksa tautan berikut.

Instal perpustakaan ESPAsyncWebServer

• Klik di sini untuk mengunduh arsip ZIP perpustakaan.
• Buka zip arsip ini. Anda harus mendapatkan folder master ESPAsyncWebServer.
• Ubah namanya menjadi "ESPAsyncWebServer".

Instal perpustakaan AsyncTCP

• Klik di sini untuk mengunduh arsip ZIP perpustakaan.
• Buka zip arsip ini. Anda harus mendapatkan folder master AsyncTCP.
• Ubah namanya menjadi "AsyncTCP".

Pindahkan folder ESPAsyncWebServer dan AsyncTCP ke folder library, yang terletak di dalam direktori Documents.

Terakhir, restart Arduino IDE.

Langkah 5: Buat File Index.html dan Style.css Dengan Konten Berikut

Template HTML/CSS untuk tombol sakelar diambil dari sumber berikut.

Langkah 6: Kode Arduino

Terutama, kode didasarkan pada kode Arduino yang diambil dari Server Web ESP32 menggunakan SPIFFS dan Cara Menggunakan LCD I2C dengan ESP32 pada Arduino IDE.

Langkah 7: Unggah Kode dan File Arduino Menggunakan SPIFFS Loader

• Buka folder sketsa kode Arduino.
• Di dalam folder ini, buat folder baru bernama "data".
• Di dalam folder data, Anda harus meletakkan index.html dan style.css.
• Unggah kode Arduino
• Kemudian untuk mengupload file, klik Arduino IDE pada Tools > ESP32 Sketch Data Upload

Langkah 8: Tentukan Alamat IP Server Web ESP32

Itu dapat ditemukan dalam dua cara.

• Monitor serial pada Arduino IDE (Alat> Monitor serial)
• Pada layar LCD

Langkah 9: Menguji Server Web Lokal

Selanjutnya, buka browser web pilihan Anda dan rekatkan alamat IP berikut di bilah alamat. Anda harus mendapatkan output yang mirip dengan tangkapan layar di bawah ini.

Langkah 10: Akses ke Server Web Lokal Dari Mana Saja di Dunia Menggunakan Ngrok

Ngrok adalah platform yang memungkinkan Anda untuk mengatur akses jarak jauh ke server web atau layanan lain yang berjalan di PC Anda dari internet eksternal. Akses diatur melalui terowongan aman yang dibuat di awal ngrok.

• Ikuti tautan ini dan daftar.
• Setelah membuat akun, masuk dan buka tab "Auth". Salin baris dari bidang “Your Tunnel Authtoken”.
• Klik pada tab “Unduh” di bilah navigasi. Pilih versi ngrok yang sesuai dengan OS Anda dan unduh.
• Buka zip folder yang diunduh dan jalankan baris perintah.
• Hubungkan akun Anda dengan memasukkan perintah berikut

./ngrok authtoken

Mulai terowongan HTTP pada port 80

./ngrok http Your_IP_Address:80

Jika semuanya dilakukan dengan benar, maka status terowongan akan berubah menjadi "online", dan tautan pengalihan akan muncul di kolom "Penerusan". Dengan memasukkan tautan ini ke browser Anda, Anda dapat mengakses server web dari mana saja di dunia.