Dalam tutorial ini, Anda akan belajar bagaimana membangun server web ESP32 untuk melayani file dari kartu microSD menggunakan modul kartu microSD yang berkomunikasi menggunakan protokol SPI. Anda akan mempelajari cara menyajikan file HTML, CSS, JavaScript, gambar, dan aset lainnya yang disimpan di kartu microSD. Ini bisa sangat berguna jika file Anda terlalu besar untuk muat di sistem file (SPIFFS), atau bisa juga lebih nyaman tergantung pada proyek Anda. Untuk membangun server web, kami akan menggunakan perpustakaan ESPAsyncWebServer.
Untuk menunjukkan cara membangun server web dengan file dari kartu microSD, kami akan membuat halaman HTML sederhana yang menampilkan beberapa teks yang diformat dengan CSS. Kami juga akan menyajikan favicon. Gambar berikut menunjukkan halaman web yang akan kami layani:
• Server web dibangun menggunakan perpustakaan ESPAsyncWebServer ;
• File HTML, CSS, dan favicon disimpan di kartu microSD;
• Kartu microSD berkomunikasi dengan ESP32 melalui protokol komunikasi SPI;
• Ketika klien membuat permintaan ke ESP32, itu melayani file yang disimpan di kartu microSD;
• Anda dapat menerapkan apa yang akan Anda pelajari di sini ke proyek server web apa pun yang sedang Anda kerjakan.
Modul Kartu MicroSD
Ada modul kartu microSD berbeda yang kompatibel dengan ESP32. Kami menggunakan modul kartu microSD yang ditampilkan pada gambar berikut – modul ini berkomunikasi menggunakan protokol komunikasi SPI. Anda dapat menggunakan modul kartu microSD lainnya dengan antarmuka SPI.
Dimana kami bisa beli?
Anda dapat mengklik tautan di bawah ini untuk memeriksa berbagai toko tempat Anda bisa mendapatkan modul kartu microSD:
• Modul kartu MicroSD
Pinout Modul Kartu MicroSD
Modul kartu microSD berkomunikasi menggunakan protokol komunikasi SPI. Kami akan menggunakan pin ESP32 SPI default seperti yang ditunjukkan pada tabel berikut:
Mempersiapkan Kartu MicroSD
Sebelum melanjutkan dengan tutorial, pastikan Anda memformat kartu microSD Anda sebagai FAT32 . Ikuti petunjuk selanjutnya untuk memformat kartu microSD Anda atau menggunakan alat perangkat lunak seperti SD Card Formater (kompatibel dengan Windows dan Mac OS).
1. Masukkan kartu microSD ke komputer Anda. Pergi ke Komputer Saya dan klik kanan pada kartu SD. Pilih Format seperti yang ditunjukkan pada gambar di bawah ini.
2. Sebuah jendela baru muncul. Pilih FAT32 , tekan Mulai untuk menginisialisasi proses pemformatan dan ikuti petunjuk di layar.
Setelah memformat kartu microSD, Anda dapat menempelkan file yang digunakan untuk membangun server web di sana. Kami akan memindahkanindex.html,style.css, danfavicon.pngfile ke sana. Ikuti bagian selanjutnya untuk mendapatkan file Anda.
Berkas HTML
Buat file bernamaindex.htmldengan isi sebagai berikut:
File CSS
Buat file bernamastyle.cssdengan isi sebagai berikut:
Favicon
Kami juga akan menyajikan favicon. Ini adalah gambar png dengan 15 × 15 piksel. Anda dapat menggunakan favicon yang sama dengan milik kami, atau ikon Anda sendiri, atau tidak menggunakan favicon sama sekali.
Salin File ke Kartu MicroSD
Setelah semua file disiapkan, buka direktori kartu microSD dan rekatkan file.
Bagian yang Diperlukan
Untuk tutorial ini Anda memerlukan bagian-bagian berikut:
• ESP32
• Modul kartu MicroSD
• Kartu MicroSD
• Breadboard
• Kabel jumper
Diagram Skematik
Hubungkan modul kartu microSD ke ESP32 seperti yang ditunjukkan pada diagram skema berikut. Kami menggunakan pin ESP32 SPI default.
Kode Program
Salin kode berikut ke Arduino IDE Anda.
Masukkan kredensial jaringan Anda ke dalam variabel berikut dan kode akan langsung berfungsi:
Cara Kerja Kode
Kami telah membahas cara membangun server web dengan ESP32 di tutorial sebelumnya . Jadi, kita hanya akan melihat bagian yang relevan untuk tutorial ini.
Library
Pertama, pastikan Anda menyertakan FS.h,SD.hdanSPI.h library untuk dapat berkomunikasi dengan kartu microSD dan menangani file.
Inisialisasi Kartu MicroSD
initSDKartu() fungsi menginisialisasi kartu microSD pada pin SPI default.
Kemudian, Anda perlu memanggil fungsi ini dimempersiapkan():
Sajikan File dari Kartu microSD
Saat Anda mengakses alamat IP ESP32 di root (/) URL, kirim file HTML yang disimpan di kartu microSD.
Argumen pertama dari Kirim() fungsi adalah sistem file tempat file disimpan. Dalam hal ini, disimpan di kartu SD (SD). Argumen kedua adalah jalur tempat file berada/index.html). Argumen ketiga mengacu pada tipe konten (teks/html).
Ketika file HTML dimuat di browser Anda, itu akan meminta CSS dan file favicon. Ini adalah file statis yang disimpan di direktori yang sama (SD). Kita dapat menambahkan baris berikut untuk menyajikan file statis di direktori saat diminta oleh URL root. Ini melayani file CSS dan favicon secara otomatis.
Jika server web Anda perlu menangani lebih banyak rute, Anda dapat menambahkannya kemempersiapkan(). Jangan lupa aturSDsebagai argumen pertama untukKirim()fungsi. Dengan cara ini, ia akan mencari file di kartu microSD.
Demonstrasi
Setelah mengupload kode, buka Serial Monitor pada baud rate 115200. Tekan tombol RST on-board. Anda harus mendapatkan sesuatu yang serupa di Serial Monitor: alamat IP ESP32 dan informasi tentang kartu microSD.
Buka browser di jaringan lokal Anda dan rekatkan alamat IP ESP32. Ini akan memuat halaman web berikut dengan file yang disimpan di kartu microSD. Perhatikan favicon di bilah judul browser web.
Sumber: randomnerdtutorials.com
Siap Belajar & Bangun Proyek IoT?
KLIK GAMBAR DI BAWAH INI UNTUK BELI TRAINER KIT ESP32
 |
| Klik gambar untuk pembelian |
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 Komentar