Pada artikel ini, Arduino Indonesia akan membahas tentang cara membangun web server untuk mengontrol output ESP32 atau ESP8266 menggunakan framework MicroPython. Sebagai contoh, kami akan membuat web server dengan tombol ON dan OFF untuk mengontrol LED onboard ESP32/ESP8266. Kami akan menggunakan socket dan Python socket API.
Mempersiapkan File
Hubungkan papan ESP32 atau ESP8266 ke komputer Anda. Buka uPyCraft IDE, lalu buka Tools > Serial dan pilih port serial yang sesuai.
Anda akan melihat file-file di papan ESP32/ESP8266 pada folder device. Secara default, saat Anda membakar firmware MicroPython, file boot.py akan dibuat.
Untuk proyek ini, Anda memerlukan file boot.py dan main.py. File boot.py berisi kode yang hanya perlu dijalankan sekali saat boot. Ini mencakup pengimporan library, kredensial jaringan, inisialisasi pin, koneksi ke jaringan, dan konfigurasi lainnya.
File main.py akan berisi kode yang menjalankan web server untuk menyajikan file dan mengeksekusi tugas berdasarkan permintaan yang diterima dari klien.
Baca juga: Panduan Lengkap MicroPython ESP8266 - Stasiun Cuaca Hemat Daya Menggunakan BME280
Membuat File main.py di Papan Anda
1. Tekan tombol "New file" untuk membuat file baru.
2. Tekan tombol "Save file" untuk menyimpan file di komputer Anda.
3. Sebuah jendela baru akan terbuka, beri nama file Anda main.py dan simpan di komputer Anda:
4. Setelah itu, Anda akan melihat tampilan berikut di uPyCraft IDE (file boot.py di perangkat Anda dan tab baru dengan file main.py):
5. Klik tombol "Download and run" untuk mengunggah file ke papan ESP Anda:
6. Direktori perangkat sekarang akan memuat file main.py. Papan ESP Anda telah menyimpan file main.py.
boot.py
Salin kode berikut ke file boot.py ESP32/ESP8266 Anda.
try:
import usocket as socket
except:
import socket
from machine import Pin
import network
import esp
esp.osdebug(None)
import gc
gc.collect()
ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
while station.isconnected() == False:
pass
print('Connection successful')
print(station.ifconfig())
led = Pin(2, Pin.OUT)
Seperti yang disebutkan sebelumnya, kami membuat web server menggunakan socket dan Python socket API. Dokumentasi resmi mengimpor library socket sebagai berikut:
try:
import usocket as socket
except:
import socket
Kami perlu mengimpor kelas Pin dari modul machine untuk dapat berinteraksi dengan GPIO.
from machine import Pin
Setelah mengimpor library socket, kami perlu mengimpor library network. Library network memungkinkan kami menghubungkan ESP32 atau ESP8266 ke jaringan Wi-Fi.
import network
Baris-baris berikut mematikan pesan debug OS vendor:
import esp
esp.osdebug(None)
Kemudian, kami menjalankan garbage collector:
import gc
gc.collect()
Garbage collector adalah bentuk manajemen memori otomatis. Ini adalah cara untuk mengambil kembali memori yang ditempati oleh objek yang tidak lagi digunakan oleh program. Ini berguna untuk menghemat ruang di memori flash. Variabel berikut menyimpan kredensial jaringan Anda:
ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'replace_with_your_password'
Anda harus mengganti kata-kata yang disorot merah dengan SSID dan kata sandi jaringan Anda, agar ESP dapat terhubung ke router.
Kemudian, atur ESP32 atau ESP8266 sebagai stasiun Wi-Fi:
station = network.WLAN(network.STA_IF)
Setelah itu, aktifkan stasiun:
station.active(True)
Terakhir, ESP32/ESP8266 terhubung ke router Anda menggunakan SSID dan kata sandi yang telah ditentukan sebelumnya:
station.connect(ssid, password)
Pernyataan berikut memastikan bahwa kode tidak melanjutkan eksekusi sementara ESP belum terhubung ke jaringan Anda.
while station.isconnected() == False:
pass
Setelah koneksi berhasil, cetak parameter antarmuka jaringan seperti alamat IP ESP32/ESP8266 – gunakan metode ifconfig() pada objek stasiun.
print('Connection successful')
print(station.ifconfig())
Buat objek Pin bernama led yang merupakan output dan merujuk ke GPIO2 ESP32/ESP8266:
led = Pin(2, Pin.OUT)
main.py
Salin kode berikut ke file main.py ESP32/ESP8266 Anda.
def web_page():
if led.value() == 1:
gpio_state="ON"
else:
gpio_state="OFF"
html = """<html><head> <title>ESP Web Server</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1>ESP Web Server</h1>
<p>GPIO state: <strong>""" + gpio_state + """</strong></p><p><a href="/?led=on"><button class="button">ON</button></a></p>
<p><a href="/?led=off"><button class="button button2">OFF</button></a></p></body></html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
request = str(request)
print('Content = %s' % request)
led_on = request.find('/?led=on')
led_off = request.find('/?led=off')
if led_on == 6:
print('LED ON')
led.value(1)
if led_off == 6:
print('LED OFF')
led.value(0)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
Skrip dimulai dengan membuat fungsi bernama web_page(). Fungsi ini mengembalikan variabel bernama html yang berisi teks HTML untuk membangun halaman web.
def web_page():
Halaman web menampilkan status GPIO saat ini. Jadi, sebelum menghasilkan teks HTML, kita perlu memeriksa status LED. Kami menyimpan statusnya dalam variabel gpio_state:
if led.value() == 1:
gpio_state="ON"
else:
gpio_state="OFF"
Setelah itu, variabel gpio_state dimasukkan ke dalam teks HTML menggunakan tanda "+" untuk menggabungkan string.
html = """<html><head> <title>ESP Web Server</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none;
border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
.button2{background-color: #4286f4;}</style></head><body> <h1>ESP Web Server</h1>
<p>GPIO state: <strong>""" + gpio_state + """</strong></p><p><a href="/?led=on"><button class="button">ON</button></a></p>
<p><a href="/?led=off"><button class="button button2">OFF</button></a></p></body></html>"""
Membuat Server Socket
Setelah membuat HTML untuk membangun halaman web, kami perlu membuat socket pendengar (listening socket) untuk mendengarkan permintaan masuk dan mengirimkan teks HTML sebagai respons. Untuk pemahaman yang lebih baik, gambar berikut menunjukkan diagram cara membuat socket untuk interaksi server-klien:
Buat sebuah socket menggunakan socket.socket(), dan tentukan jenis socket. Kami membuat objek socket baru bernama s dengan address family dan jenis socket yang diberikan. Ini adalah socket TCP STREAM:
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
Selanjutnya, ikat (bind) socket ke sebuah alamat (antarmuka jaringan dan nomor port) menggunakan metode bind(). Metode bind() menerima variabel tuple yang berisi alamat IP dan nomor port:
s.bind(('', 80))
Dalam contoh kami, kami memberikan string kosong ' ' sebagai alamat IP dan port 80. Dalam hal ini, string kosong merujuk ke alamat IP localhost (artinya alamat IP ESP32 atau ESP8266).
Baris berikutnya mengaktifkan server untuk menerima koneksi; ini membuat socket "listening". Argumennya menentukan jumlah maksimum koneksi antrian. Maksimumnya adalah 5.
s.listen(5)
Di dalam perulangan while adalah tempat kami mendengarkan permintaan dan mengirim respons. Saat klien terhubung, server memanggil metode accept() untuk menerima koneksi. Ketika klien terhubung, ia menyimpan objek socket baru untuk menerima dan mengirim data pada variabel conn, dan menyimpan alamat klien untuk terhubung ke server pada variabel addr.
conn, addr = s.accept()
Kemudian, cetak alamat klien yang disimpan pada variabel addr.
print('Got a connection from %s' % str(addr))
Data dipertukarkan antara klien dan server menggunakan metode send() dan recv().
Baris berikut mendapatkan permintaan yang diterima pada socket yang baru dibuat dan menyimpannya dalam variabel `request`.
request = conn.recv(1024)
Metode recv() menerima data dari socket klien (ingat bahwa kami telah membuat objek socket baru pada variabel conn). Argumen dari metode recv() menentukan jumlah data maksimum yang dapat diterima sekaligus. Baris berikutnya hanya mencetak isi permintaan:
print('Content = %s' % str(request))
Kemudian, buat variabel bernama response yang berisi teks HTML yang dikembalikan oleh fungsi web_page():
response = web_page()
Terakhir, kirim respons ke klien socket menggunakan metode send() dan sendall():
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
Di akhir, tutup socket yang telah dibuat.
conn.close()
Menguji Web Server
Unggah file main.py dan boot.py ke ESP32/ESP8266. Folder perangkat Anda harus berisi dua file: boot.py dan main.py.
Setelah mengunggah file, tekan tombol EN/RST pada papan ESP.
Setelah beberapa detik, ESP akan membangun koneksi dengan router Anda dan mencetak alamat IP di Shell.
Buka browser Anda, dan ketikkan alamat IP ESP yang baru Anda temukan. Anda akan melihat halaman web server seperti yang ditunjukkan di bawah.
Saat Anda menekan tombol ON, Anda membuat permintaan ke alamat IP ESP diikuti dengan /?led=on. LED onboard ESP32/ESP8266 akan menyala, dan status GPIO diperbarui di halaman.
Catatan: Beberapa LED onboard ESP8266 menyala dengan perintah OFF, dan mati dengan perintah ON.
Saat Anda menekan tombol OFF, Anda membuat permintaan ke alamat IP ESP diikuti dengan /?led=off. LED akan mati, dan status GPIO diperbarui.
Catatan: Untuk menjaga kesederhanaan tutorial ini, kami mengontrol LED onboard yang sesuai dengan GPIO 2. Anda dapat mengontrol GPIO lain dengan output apa pun (misalnya, relay) menggunakan metode yang sama. Anda juga dapat memodifikasi kode untuk mengontrol beberapa GPIO atau mengubah teks HTML untuk membuat halaman web yang berbeda.
Baca juga: Panduan Lengkap MicroPython ESP32/ESP8266 - MQTT untuk Pemula
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 on: "Panduan Lengkap MicroPython ESP32/ESP8266 - Web Server untuk Kontrol Output "