Membuat Web Server dengan ESP32?

Haloo
Setelah beberapa minggu aku tidak meng-upload konten baru, kini aku akan menulis tentang "Bagaimana Cara Membuat Web Server dengan ESP32" nih.
Oh iya sebelumnya, aku mau bilang buat kalian untuk STAY SAFE and STAY AT HOME GUYS! Jangan pernah meremehkan virus ataupun penyakit lainnya. INTINYA JAGA KESEHATAN YA! hehe..
Dan aku juga berharap Indonesia baik pemerintah, tenaga medis, hingga masyarakat dapat bertahan melewati semua wabah pandemi ini. WE CAN DO IT GUYS!
Oke sekarang langsung aja yuk.

Jadi tugas kali ini itu diberikan di saat COVID - 19 sedang mewabah hebatnya di Indonesia sehingga membuat semua sekolah dan universitas rata-rata di rumahkan alias belajar online. Kebayang gak sih, harusnya ini itu kerja kelompok karena yang punya ESP32 cuma satu orang. Tapi, fortunatelly di kelompok aku itu masing-masing punya ESP32. Walaupun ada nih teman aku yang entah kesambet apa ngebuang ESP32 miliknya. Sayang banget kan:(
Tapi aku sih emang punya gitu kitnya yang aku namakan Sistem Embedded Kit (SE KIT), keren kan hehe.. Aku emang suka ngoprek sensor-sensor gitu sih, meskipun sering banget gagal (keinget zaman PRD waktu TPB huhu).

Okey balik lagi ke judulnya, kita akan membuat Web Server dengan ESP32. HOW?
Yuk ikutin langkah ini.

Alat dan Bahan

1. ESP32 (30 pins)
2. Kabel jumper female to male (3 buah)
3. Resistor 330 ohm (2 buah)
4. LED (2 buah) * note: disarankan menggunakan LED 5mm dan berbeda warna.
5. Breadboard

Rangkaian

Kode Program

Gimana? Pasti gagal sih kalau kalian ngikutin 100% kode aku di atas hehe..
Kalau di perhatikan lagi, pada bagian define variabel ssid dan password pada kode emang aneh gak sih..
Nah itu sebenarnya adalah nama dari koneksi yang sedang tersambung ke perangkat kalian atau bisa dibilang Wi-Fi atau hotspot siapa yang sedang kalian pakai beserta dengan password koneksi tersebut. Di kode itu, aku memakai koneksi Hotspot? Tanya yang punya dulu dengan password I******* (maaf di sensor hehe). Intinya bagian itu disesuaikan sama koneksi yang sedang digunakan saja. Dan tentunya jangan lupa untuk menyesuaikan pin GPIO pada ESP32 dengan define pada Arduino IDE.
Selain itu, saat aku melakukan eksplorasi ini, aku berulang kali ganti kabel jumper karena kabel jumper milikku sudah banyak yang sedikit rusak, jadi pastikan juga kabel jumper yang kalian pakai dalam kondisi baik ya..

Setelah semuanya sudah berjalan, sekarang buka serial monitor dan akan muncul seperti gambar berikut.

Copy bagian IP Address di Host dan ketik pada Address Bar di Web Browser kalian. IP Address itu merupakan IP Address dari Web Browser ESP32 milik kalian.
Dan selesaii.. Di bawah ini, kalian bisa lihat hasil simulasi percobaan aku. Selamat mencoba!

Oh iya, blog selanjutnya juga berbicara tentang Web Server Cuaca dengan ESP32. Jangan lupa dikunjungi di link ini https://coretangrace.blogspot.com/2020/03/web-server-cuaca-dengan-esp32.html

Referensi :
https://randomnerdtutorials.com/esp32-web-server-arduino-ide/

Playing with ESP32 Touch Sensor and LED

Halooo..
Gimana first experience ESP32 dengan modul BLINK-nya? Masih easy gak sih? Nah kali ini kita juga bakal bermain lagi nih dengan ESP32. Kali ini tidak hanya dengan ESP32, tapi juga ada resistor dan LED, penasaran kan gimana cara bermainnya? Let's go!

Menyalakan LED di luar ESP32

[[ Persiapan :: ]]

1. LED
2. Resistor 330 Ohm
3. Breadboard
4. Kabel Jumper Male to Male (2 buah)
5. ESP32 Devkit V1 WROOM 32 (30 pins)
6. Laptop / PC
7. Kabel USB Type A to Micro USB
8. Arduino IDE

Sebelum ke langkah percobaan, aku mau pastikan lagi nih kalau kalian sudah melakukan instalasi board dan port yang dibutuhkan dalam percobaan ini. Jika belum melakukan instalasi, kalian bisa lihat pada post sebelumnya (bit.ly/InstalasiBoardESP32).

[[ Steps :: ]

Pembuatan Rangkaian :

1. Pasang LED pada breadboard dan jika memungkinkan pasang juga ESP32 Development Board pada breadboard (tips : jika tidak cukup, boleh di luar dengan menghubungkan board dengan kabel jumper male to female).
2. Hubungkan kutub katoda atau kutub negatif LED (tips : kutub katoda pada LED adalah salah satu kaki LED yang lebih pendek dari kaki yang satunya) pada ground dengan cara kaki katoda diletakkan pada breadboard yang memiliki kutub negatif (biasanya bergaris biru) dan sebaris dengan kaki katoda tersebut, hubungkan breadboard dengan pin GND pada ESP32 menggunakan kabel jumper.
3. Sedangkan kutub anoda atau kutub positif LED dihubungkan pada salah satu kaki resistor 330 Ohm yang juga diletakkan pada breadboard satu kolom dengan kaki anoda, kemudian hubungkan kaki resistor yang satunya menggunakan kabel jumper yang diletakkan sekolom dengan kaki resistor tersebut dengan pin D5 pada ESP32.
4. Rangkaian telah selesai dan siap untuk disimulasikan dengan program.

   

   Rangkaian LED dan resistor pada breadboard

Coding :

Kode blink untuk LED dan resistor

[[ Simulasi :: ]]

1. Hubungkan laptop / PC kamu dengan ESP32 menggunakan kabel USB Type A to Micro USB, kemudian compile terlebih dahulu dengan meng-klik icon centang dengan label verify pada Arduino IDE.
2. Setelah selesai, lakukan uploading (untuk jenis NodeMCU ESP32 tekan sebentar tombol boot bersamaan dengan munculnya notifikasi update pada monitor.
3. Selesai, program telah terbaca oleh ESP32.

Gimana? sudah berhasil belum?

Kalau sudah berhasil, lanjut berikutnya yuk.

Touch Sensor

Nah dari judulnya adakah yang bisa menebak kita memerlukan komponen apa saja pada modul ini? Kalau jawaban kalian adalah sensor sentuh, kalian SALAH BANGET loh. Kok bisa ya? Kan kita mau eksperimen dengan touch sensor tapi kok kita tidak memerlukan touch sensor itu sendiri?

Jadi begini teman-teman, kita tidak memerlukan sensor tersebut karena pada ESP32 sendiri telah terdapat touch sensor tersebut atau yang lebih dikenal dengan GPIO4. Selain itu, ada sensor-sensor lainnya loh, mungkin kalau ada kesempatan aku bakal share deh pengalaman ngoprek aku di sini. Mungkin loh ya, hehe. Tanpa panjang lebar lagi, ayo kita lakukan percobaan berikutnya yaitu Touch Sensor Module.

[[ Persiapan :: ]]

1. LED
2. Resistor 330 Ohm
3. Breadboard
4. Kabel Jumper Male to Male (3 buah)
5. ESP32 Devkit V1 WROOM 32 (30 pins)
6. Laptop / PC
7. Kabel USB Type A to Micro USB
8. Arduino IDE

[[ Steps :: ]

Pembuatan Rangkaian :

1. Pasang LED pada breadboard dan jika memungkinkan pasang juga ESP32 Development Board pada breadboard (tips : jika tidak cukup, boleh di luar dengan menghubungkan board dengan kabel jumper male to female).
2. Hubungkan kutub katoda atau kutub negatif LED (tips : kutub katoda pada LED adalah salah satu kaki LED yang lebih pendek dari kaki yang satunya) pada ground dengan menggunakan kabel jumper male to male yang diletakkan pada breadboard yang memiliki kutub negatif (biasanya bergaris biru) dan menggunakan kabel jumper lagi yang diletakkan sebaris dengan kabel jumper penghubung kaki katoda LED yang kemudian dihubungkan pada GND di ESP32.
3. Sedangkan kutub anoda atau kutub positif LED dihubungkan pada salah satu kaki resistor 330 Ohm yang juga diletakkan pada breadboard satu kolom dengan kaki anoda, kemudian hubungkan kaki resistor yang satunya menggunakan kabel jumper yang diletakkan sekolom dengan kaki resistor tersebut dengan pin GPIO16 (di sebelahnya D4 atau GPIO4) pada ESP32.
4. Hubungkan kabel jumper ke GPIO4 (D4) di ESP32.
5. Rangkaian telah selesai dan siap untuk disimulasikan dengan program.

   

   Contoh rangkaian Touch Sensor

   
   Coding :

   

   Kode untuk Touch Sensor dengan LED Blink

[[Simulasi :: ]]

Setelah proses compile dan update selesai, buka serial monitor (tips: Tools >> Serial Monitor) untuk melihat apakah percobaan berhasil atau tidak. Kita juga bisa melihat plot yang dihasilkan dengan membukanya di Tools >> Serial Plotter.

Hall Effect Sensor

Sensor efek hall dapat mendeteksi variasi medan magnet di sekitarnya. Semakin besar medan magnet, semakin besar tegangan output sensor. Dalam percobaan ini pun, baru dapat dikatakan 'sukses' jika pada serial monitor menampilkan angka yang membuat perbedaan signifikan dari angka yang biasa keluar seperti angka positif yang besar atau bahkan angka negatif. Itu semua terjadi karena posisi/letak dari pemberian kutub magnet pada posisi sensor di ESP32, seperti pada gambar berikut.

Nah, sekarang langsung saja ke percobaannya..

[[Persiapan ::]]

1. Magnet (usahakan berukuran sedang/medium karena akan berpengaruh pada daya deteksi Hall Sensor ESP32) 
2. ESP32 Devkit V1 WROOM 32 (30 pins)
3. Laptop / PC
4. Kabel USB Type A to Micro USB
5. Arduino IDE

[[Steps :: ]]

Coding :

Kode untuk Hall Effect Sensor

[[Simulasi :: ]]

Untuk percobaan ini, lebih mudah sedikit karena kita hanya tinggal menghubungka ESP32 dengan program pada Arduino IDE nih. Setelah proses compile dan update selesai, buka serial monitor (tips: Tools >> Serial Monitor) untuk melihat apakah percobaan berhasil atau tidak. Kita juga bisa melihat plot yang dihasilkan dengan membukanya di Tools >> Serial Plotter.