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.
Jika Anda ingin membangun server web dengan file dari SPIFFS, ikuti tutorial berikutnya sebagai gantinya:
• ESP32 Web Server menggunakan SPIFFS (SPIFlash File System)
Ulasan Proyek
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 bisa kami 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.
Anda dapat mengklik tautan berikut untuk mengunduh favicon:
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 (baca papanpengembangan ESP32 Terbaik )
Diagram Skematik
Hubungkan modul kartu microSD ke ESP32 seperti yang ditunjukkan pada diagram skema berikut. Kami menggunakan pin ESP32 SPI default.
Kode
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.
Perpustakaan
Pertama, pastikan Anda menyertakanFS.h,SD.hdanSPI.hperpustakaan untuk dapat berkomunikasi dengan kartu microSD dan menangani file.
Inisialisasi Kartu MicroSD
ItuinitSDKartu()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 dariKirim()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.
Ini sesederhana ini. Ini dapat diterapkan ke proyek server web lainnya.
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.
Membungkus
Dalam tutorial ini, Anda telah mempelajari cara membangun server web dengan ESP32 dengan file yang disimpan di kartu microSD. Alih-alih menulis teks HTML, CSS, dan JavaScript langsung di sketsa Arduino, Anda dapat menyimpannya di file terpisah di kartu microSD. Ini juga berguna untuk menyimpan data lain yang mungkin ingin Anda tampilkan di server web Anda.
Jika Anda tidak memiliki modul kartu microSD, Anda dapat menyimpan file pada sistem file ESP32 (SPIFFS) jika cocok. Anda mungkin juga menyukai:
• Suhu Pencatatan Data ESP32 ke Kartu MicroSD
Kami harap tutorial ini bermanfaat bagi Anda.
Pelajari lebih lanjut tentang ESP32 dengan sumber daya kami:
• Belajar ESP32 dengan Arduino IDE
• Bangun Server Web dengan ESP32 danESP8266
• Proyek dan Tutorial ESP32 lainnya…
Sumber : randomnerdtutorials.com
0 Komentar