Muat Halaman Web Konfigurasi Arduino/ESP Anda Dari Cloud: 7 Langkah

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

Saat membuat proyek Arduino / ESP (ESP8266/ESP32), Anda bisa melakukan hardcode semuanya. Tetapi lebih sering daripada tidak, sesuatu muncul dan Anda akhirnya akan memasang kembali perangkat IoT Anda ke IDE Anda lagi. Atau Anda baru saja mendapatkan lebih banyak orang yang mengakses konfigurasi dan Anda ingin memberikan UI alih-alih mengharapkan mereka memahami cara kerja bagian dalamnya.

Instruksi ini akan memberi tahu Anda cara menempatkan sebagian besar UI di cloud alih-alih di Arduino / ESP. Melakukannya dengan cara ini akan menghemat penggunaan ruang dan memori Anda. Layanan yang menyediakan halaman web statis gratis sangat cocok sebagai "cloud", seperti Halaman GitHub, tetapi opsi lain mungkin akan berfungsi juga.

Membangun halaman web dengan cara ini mengharuskan browser pengguna melalui 4 langkah:

1. Minta url root dari Arduino / ESP
2. Terima halaman web yang sangat sederhana, beri tahu ke:
3. Minta file JavaScript dari cloud
4. Terima kode yang membangun halaman yang sebenarnya

Instruksi ini juga akan menjelaskan cara berinteraksi dengan Arduino / ESP setelah halaman siap sesuai langkah di atas.

Kode yang dibuat pada instruksi ini juga dapat ditemukan di GitHub.

Prasyarat

Instruksi ini mengasumsikan Anda mendapatkan akses ke materi tertentu dan beberapa pengetahuan sebelumnya:

• Arduino (dengan akses jaringan) / ESP
• Sebuah komputer untuk melampirkan di atas untuk
• Akses WiFi terhubung ke internet
• Arduino IDE diinstal (juga untuk ESP32)
• Anda tahu cara mengunggah sketsa ke perangkat IoT Anda
• Anda tahu cara menggunakan Git & GitHub

Langkah 1: Memulai Dengan Sketsa Server Web Sederhana

Kami akan mulai sesederhana mungkin, dan biarkan itu tumbuh dari sini.

#termasuk

const char* ssid = "milik Anda"; const char* kata sandi = "passwd Anda"; Server WiFiServer (80); void setup() { //Inisialisasi serial dan tunggu port terbuka: Serial.begin(115200); while(!Serial) {; // tunggu port serial terhubung. Diperlukan hanya untuk port USB asli } WiFi.begin(ssid, password); while(WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("WiFi terhubung."); Serial.println("Alamat IP: "); Serial.println(WiFi.localIP()); server.mulai(); } void loop() { // mendengarkan klien yang masuk Klien WiFiClient = server.available(); // mendengarkan klien masuk bool sendResponse = false; // set ke true jika kita ingin mengirim respon String urlLine = ""; // buat String untuk menampung URL yang diminta if(client) // jika Anda mendapatkan klien, { Serial.println("New Client."); // mencetak pesan dari port serial String currentLine = ""; // membuat String untuk menampung data yang masuk dari klien while(client.connected()) // loop saat klien terhubung { if(client.available()) // jika ada byte untuk dibaca dari klien, { char c = klien.baca(); // membaca satu byte, lalu if(c == '\n') // jika byte adalah karakter baris baru { // jika baris saat ini kosong, Anda mendapatkan dua karakter baris baru berturut-turut. // itulah akhir dari permintaan HTTP klien, jadi kirim tanggapan: if(currentLine.length() == 0) { sendResponse = true; // Semuanya baik! merusak; // keluar dari loop while } else // jika Anda mendapatkan baris baru, hapus baris saat ini: { if(currentLine.indexOf("GET /") >= 0) // ini seharusnya baris URL { urlLine = currentLine; // simpan untuk digunakan nanti } currentLine = ""; // reset String currentLine } } else if(c != '\r') // jika Anda mendapatkan yang lain selain karakter carriage return, { currentLine += c; // tambahkan ke akhir baris saat ini } } } if(sendResponse) { Serial.print("Klien diminta "); Serial.println(urlLine); // Header HTTP selalu dimulai dengan kode respons (mis. HTTP/1.1 200 OK) // dan tipe konten sehingga klien tahu apa yang akan terjadi, lalu baris kosong: client.println("HTTP/1.1 200 OK"); client.println("Tipe-konten:teks/html"); klien.println(); if(urlLine.indexOf("GET / ") >= 0) // jika URL hanya berupa "/" { // isi dari respon HTTP mengikuti header: client.println("Hello world!"); } // Respon HTTP diakhiri dengan baris kosong lainnya: client.println(); } // tutup koneksi: client.stop(); Serial.println("Klien Terputus."); } }

Salin kode di atas, atau unduh dari komit di GitHub.

Jangan lupa untuk mengganti SSID dan password agar sesuai dengan jaringan Anda.

Sketsa ini menggunakan Arduino yang terkenal

mempersiapkan()

dan

lingkaran()

fungsi. Dalam

mempersiapkan()

fungsi koneksi serial ke IDE diinisialisasi dan begitu juga WiFi. Setelah WiFi terhubung ke SSID tersebut, IP dicetak dan server web dimulai. Dalam setiap iterasi dari

lingkaran()

fungsi server web diperiksa untuk klien yang terhubung. Jika klien terhubung, permintaan dibaca dan URL yang diminta disimpan dalam variabel. Jika semuanya tampak baik-baik saja, respons dari server ke klien dilakukan berdasarkan URL yang diminta.

PERINGATAN! Kode ini menggunakan kelas Arduino String agar tetap sederhana. Optimalisasi string tidak berada dalam cakupan instruksi ini. Baca lebih lanjut tentang ini di instruksi tentang Manipulasi String Arduino Menggunakan Ram Minimal.

Langkah 2: Membuat JavaScript Jarak Jauh

Arduino/ESP akan memberitahu browser pengunjung untuk memuat file yang satu ini. Semua sisanya akan dilakukan oleh kode JavaScript ini.

Dalam Instruksi ini kami akan menggunakan jQuery, ini tidak sepenuhnya diperlukan, tetapi akan membuat segalanya lebih mudah.

File ini harus dapat diakses dari web, server halaman statis sudah cukup untuk membuat ini berfungsi, misalnya halaman GitHub. Jadi, Anda mungkin ingin membuat repositori GitHub baru dan membuat a

halaman-gh

cabang. Masukkan kode berikut di dalam a

.js

file dalam repositori di cabang yang benar.

Salin kode di atas, atau unduh dari komit di GitHub.

Periksa apakah file Anda dapat diakses. Untuk halaman GitHub, buka https://username.github.io/repository/your-file.j… (ganti

nama pengguna

,

gudang

dan

file-anda.js

untuk parameter yang benar).

Langkah 3: Memuat File JavaScript Jarak Jauh ke Browser Pengunjung

Sekarang setelah kita menyiapkan semuanya, saatnya membuat halaman web memuat file JavaScript jarak jauh.

Anda dapat melakukan ini dengan mengubah garis 88 sketsa dari

client.println("Halo dunia!"); T

klien.println("");

(mengubah

src

atribut untuk menunjuk ke file JavaScript Anda sendiri). Ini adalah halaman web html kecil, yang dilakukannya hanyalah memuat file JavaScript ke browser pengunjung.

File yang diubah juga dapat ditemukan di komit yang sesuai di GitHub.

Unggah sketsa yang disesuaikan ke Arduino / ESP Anda.

Langkah 4: Menambahkan Elemen Baru ke Halaman

Halaman kosong tidak berguna, jadi sekarang saatnya menambahkan elemen baru ke halaman web. Untuk saat ini ini akan menjadi video YouTube. Dalam contoh ini beberapa kode jQuery akan digunakan untuk melakukannya.

Tambahkan baris kode berikut ke

init()

fungsi:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0' }).css({ lebar: '608px', tinggi: '342px' }).appendTo('body');

Ini akan membuat

iframe

elemen, atur yang benar

src

atribut dan atur ukurannya menggunakan css dan tambahkan elemen ke badan halaman.

jQuery membantu kita untuk dengan mudah memilih dan mengubah elemen di halaman web, beberapa hal dasar yang perlu diketahui:

• $('tubuh')

• memilih elemen yang sudah ada, pemilih css lainnya dapat digunakan juga

• $(' ')

  menciptakan yang baru

• elemen (tetapi tidak menambahkannya ke dokumen)

• .appendTo('.main')

• menambahkan elemen yang dipilih/dibuat ke elemen dengan kelas css 'utama'

• Fungsi lain untuk menambahkan elemen adalah

  .menambahkan()

  ,

  .prepend()

  ,

  .prependTo()

  ,

  .memasukkan()

  ,

  .masukkanSetelah()

  ,

  .masukkanSebelum()

  ,

  .setelah()

  ,

  .sebelum()

Lihatlah komit yang sesuai di GitHub jika ada yang tidak jelas.

Langkah 5: Elemen Interaktif

Sebuah video memang menyenangkan, tetapi tujuan dari instruksi ini adalah untuk berinteraksi dengan Arduino / ESP. Mari kita ganti video dengan tombol yang mengirimkan informasi ke Arduino / ESP dan juga menunggu tanggapan.

Kami membutuhkan

$('')

untuk menambahkan ke halaman, dan melampirkan pendengar acara ke dalamnya. Eventlistener akan memanggil fungsi callback ketika event yang ditentukan terjadi:

$('').text('tombol').on('klik', fungsi()

{ // kode di sini akan dieksekusi ketika tombol diklik }).appendTo('body');

Dan tambahkan permintaan AJAX ke fungsi panggilan balik:

$.get('/ajax', fungsi(data)

{ // kode di sini akan dieksekusi ketika permintaan AJAX selesai });

Setelah permintaan selesai, data yang dikembalikan akan ditambahkan ke halaman:

$('

').text(data).appendTo('body');

Singkatnya, kode di atas membuat tombol, menambahkannya ke halaman web, ketika tombol diklik, permintaan akan dikirim dan respons juga akan ditambahkan ke halaman web.

Jika ini adalah pertama kalinya Anda menggunakan panggilan balik, Anda mungkin ingin memeriksa komit di GitHub untuk melihat bagaimana semuanya bersarang.

Langkah 6: Tanggapi Elemen Interaktif

Tentu saja, permintaan AJAX membutuhkan tanggapan.

Untuk membuat respons yang benar untuk

/ajax

url kita perlu menambahkan

lain jika()

tepat setelah tanda kurung tutup dari pernyataan if yang memeriksa

/

url.

else if(urlLine.indexOf("GET /ajax ") >= 0)

{ klien.print("Hai!"); }

Dalam komit di GitHub, saya juga menambahkan penghitung untuk menunjukkan kepada browser bahwa setiap permintaan itu unik.

Langkah 7: Kesimpulan

Ini adalah akhir dari instruksi ini. Anda sekarang memiliki Arduino / ESP yang melayani halaman web kecil yang memberi tahu browser pengunjung untuk memuat file JavaScript dari cloud. Setelah JavaScript dimuat, ia membangun sisa konten halaman web yang menyediakan UI bagi pengguna untuk berkomunikasi dengan Arduino / ESP.

Sekarang terserah imajinasi Anda untuk membuat lebih banyak elemen di halaman web dan menyimpan pengaturan secara lokal di beberapa jenis ROM (EEPROM / NVS / dll).

Terima kasih telah membaca, dan jangan ragu untuk memberikan umpan balik!