LED Dikawal Internet Menggunakan Pelayan Web Berasaskan ESP32: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Gambaran keseluruhan projek

Dalam contoh ini, kita akan mengetahui cara membuat pelayan web berasaskan ESP32 untuk mengawal keadaan LED, yang dapat diakses dari mana saja di dunia. Anda memerlukan komputer Mac untuk projek ini, tetapi anda boleh menjalankan perisian ini walaupun pada komputer yang murah dan berkuasa rendah seperti Raspberry Pi.

Penyediaan ESP32 dengan Arduino IDE

Untuk memulakan program ESP32 menggunakan Arduino IDE dan bahasa pengaturcaraan Arduino, anda memerlukan tambahan tambahan. Baca tentang cara menyediakan Arduino IDE untuk ESP32 pada Mac OS dengan pautan berikut.

Bekalan

Untuk tutorial ini, anda memerlukan item berikut:

• Papan pengembangan ESP325mm
• LEDResistor 220ohm
• Paparan LCD 16x2 dengan modul I2C
• Papan roti
• Wayar pelompat
• Kabel USB mikro

Langkah 1: Membina Litar

Lakukan sambungan seperti yang ditunjukkan dalam rajah skematik berikut

Mulakan dengan menyambungkan output voltan bekalan 3V3 pada papan roti ESP32 dan GND ke papan roti. Sambungkan LED melalui perintang ke ESP32 menggunakan pin GPIO 23 sebagai pin output digital. Selepas itu, sambungkan pin SDA paparan LCD 16x2 ke GPIO pin 21 dan SCL ke pin GPIO 22.

Langkah 2: Tinjauan Ringkas Sistem Filif SPIFFS

SPIFFS adalah singkatan dari "Serial Peripheral Interface Flash File System", iaitu sistem fail untuk memori flash yang memindahkan data melalui SPI. Oleh itu, SPIFFS adalah sistem fail ringkas yang direka untuk mikrokontroler dengan cip kilat yang menghantar data melalui bas SPI (seperti memori kilat ESP32).

SPIFFS sangat berguna untuk digunakan dengan ESP32 dalam situasi berikut:

• Membuat fail untuk menyimpan tetapan
• Penyimpanan data kekal.
• Membuat fail untuk menyimpan sejumlah kecil data (bukannya menggunakan kad microSD untuk ini).
• Menyimpan fail HTML dan CSS untuk membuat pelayan web.

Langkah 3: Pemasangan Bootloader SPIFFS pada Mac OS

Anda boleh membuat, menyimpan dan menulis data ke fail yang disimpan dalam sistem fail ESP32 secara langsung menggunakan plugin pada Arduino IDE.

Pertama sekali, pastikan anda memasang versi terbaru Arduino IDE, dan kemudian lakukan perkara berikut:

• Buka pautan berikut dan muat turun arkib "ESP32FS-1.0.zip"
• Pergi ke direktori Arduino IDE, yang terletak di folder Dokumen.
• Buat folder alat, jika tidak ada. Di dalam direktori alat buat folder lain ESP32FS. Di dalam ESP32FS buat yang lain, yang dipanggil alat.
• Buka zip zip yang dimuat turun pada langkah 1 ke folder alat.
• Mulakan semula Arduino IDE anda.
• Untuk memeriksa apakah plug-in berjaya dipasang, buka Arduino IDE dan klik pada "Tools" dan periksa apakah ada item "ESP32 Sketch Data Upload" dalam menu ini.

Langkah 4: Memasang Perpustakaan

Perpustakaan ESPAsyncWebServer dan AsyncTCP membolehkan anda membuat pelayan web menggunakan fail dari sistem fail ESP32. Untuk maklumat lebih lanjut mengenai perpustakaan ini, periksa pautan berikut.

Pasang pustaka ESPAsyncWebServer

• Klik di sini untuk memuat turun arkib ZIP perpustakaan.
• Nyahzip arkib ini. Anda harus mendapatkan folder master ESPAsyncWebServer.
• Namakan semula menjadi "ESPAsyncWebServer".

Pasang pustaka AsyncTCP

• Klik di sini untuk memuat turun arkib ZIP perpustakaan.
• Nyahzip arkib ini. Anda harus mendapatkan folder master AsyncTCP.
• Namakan semula menjadi "AsyncTCP".

Pindahkan folder ESPAsyncWebServer dan AsyncTCP ke folder perpustakaan, yang terletak di dalam direktori Dokumen.

Akhirnya, mulakan semula Arduino IDE.

Langkah 5: Buat Fail Index.html dan Style.css Dengan Kandungan Berikut

Templat HTML / CSS untuk butang togol diambil dari sumber berikut.

Langkah 6: Kod Arduino

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

Langkah 7: Muat naik Kod dan Fail Arduino Menggunakan Pemuat SPIFFS

• Buka folder lakaran kod Arduino.
• Di dalam folder ini, buat folder baru yang disebut "data".
• Di dalam folder data, anda perlu meletakkan index.html dan style.css.
• Muat naik kod Arduino
• Kemudian, untuk memuat naik fail, klik pada Arduino IDE pada Tools> ESP32 Sketch Data Upload

Langkah 8: Tentukan Alamat IP Pelayan Web ESP32

Ia boleh didapati dalam dua cara.

• Monitor bersiri pada Arduino IDE (Alat> Monitor bersiri)
• Pada paparan LCD

Langkah 9: Menguji Pelayan Web Tempatan

Seterusnya, buka penyemak imbas web pilihan anda dan tampal alamat IP berikut di bar alamat. Anda harus mendapatkan output yang serupa dengan tangkapan skrin di bawah.

Langkah 10: Akses ke Pelayan Web Tempatan Dari Mana sahaja di Dunia Menggunakan Ngrok

Ngrok adalah platform yang membolehkan anda mengatur akses jauh ke pelayan web atau beberapa perkhidmatan lain yang berjalan di PC anda dari internet luaran. Akses diatur melalui terowong selamat yang dibuat pada awal ngrok.

• Ikuti pautan ini dan daftar.
• Setelah membuat akaun, log masuk dan pergi ke tab "Auth". Salin baris dari medan "Tunnel Authtoken".
• Klik pada tab "Muat turun" di bar navigasi. Pilih versi ngrok yang sesuai dengan OS anda dan muat turun.
• Buka zip folder yang dimuat turun dan jalankan baris arahan.
• Sambungkan akaun anda dengan memasukkan arahan berikut

./ngrok authtoken

Mulakan terowong HTTP di port 80

./ngrok http Your_IP_Address: 80

Sekiranya semuanya dilakukan dengan betul, maka status terowong akan berubah menjadi "dalam talian", dan pautan pengalihan akan muncul di lajur "Memajukan". Dengan memasukkan pautan ini ke penyemak imbas anda, anda dapat mengakses pelayan web dari mana saja di dunia.