Pada artikel kali ini kami akan membahas bagaimana cara mengendalikan Stop Kontak Pintar 4 lubang buatan Delta Electronic melalui web application. Pada kondisi awal, Stop Kontak Pintar ini masih belum terkonfigurasi pengaturan Wi-Fi dan Firebase Servicenya. Untuk itu terlebih dahulu harus dilakukan pengaturan parameter-parameter berikut:

• SSID Wi-Fi
• Password Wi-Fi
• Firebase API-Key
• Firebase Realtime Database
• Firebase Email account
• Firebase Password account

Detail pengaturan maupun cara mengendalikan relay melalui Firebase Service dapat dilihat di video berikut

Setelah melakukan pengaturan konfigurasi seperti yang ada di video berikut langkah-langkah yang perlu dilakukan agar kendali relay dapat dilakukan melalui web application seperti pada gambar di bawah

1. Buka artikel  Mengendalikan relay dengan menggunakan DST-ESP8266 dari mana saja menggunakan Firebase bagian 2 (web application) berikut dan lakukan langkah:
   1. Tambahkan aplikasi pada Firebase Project anda, hanya nama projectnya diganti menjadi 4 Ch relay
   2. Setting Firebase Web Application Project dan lakukan langkah-langkah seperti yang dibahas di artikel tersebut
   3. Inisialisasi Firebase Web Application Project dan lakukan langkah-langkah seperti yang dibahas di artikel tersebut
   4. Create Firebase Web Application Project, pada tahap ini kita akan melakukan modifikasi di file html dan menambahkan file-file *.js agar sesuai dengan project kita
      1. Download file html yang sudah kita siapkan di link berikut dan replace file index.html yang ada pada folder project
      2. Atur firebaseconfig yang ada di file index.html dengan parameter-parameter yang sebelumnya disimpan dalam text file, atau bisa juga dilihat di project setting bagian Firebase Project Console
      3. Parameter-parameter dapat dilihat di bagian Project Setting dari Firebase Service
      4. Pilih folder public dan pilih new file lalu buat style.css
      5. Download file style.css di link berikut lalu buka, select all, copy dan paste ke file style.css yang terbentuk di Visual Studio Code kemudian save
      6. Berikutnya kita mulai bentuk file-file java script
      7. Pilih public folder lalu klik new folder dan buat folder scripts
      8. Buat file auth.js di folder scripts dan download file auth.js di link berikut
      9. Buka file, select all, copy dan paste ke file auth.js yang terbentuk di Visual Studio Code dan klik save
      10. Pilih scripts folder dan klik new file dan buat file index.js dan download file index.js dilink berikut
      11. Download file favicon.jpg dan copy ke folder public
      12. Masuk ke layar terminal dan tulis perintah
          • firebase deploy
      13. Maka file index.html yang telah dimodifikasi dan file-file *.js yang dibentuk di local folder akan terinstall di hosting firebase saat tampil pesan deploy completed.
      14. Pada tahap ini web application telah terbentuk dan siap digunakan. Klik url yang terbentuk dan akan tampil seperti berikut pada browser anda
2. Coba tekan On dan OFF dari tiap-tiap tombol dan perhatikan perubahan relay pada Stop Kontak Pintar kita
3. Berikutnya kita akan membahas cara kerja dari Web Application
   1. Bagian Index.html
      1. Bagian ini merupakan judul dari halaman web di mana pengguna dapat dengan bebas merubahnya sesuai keinginan
      2. Script src artinya menjalankan script di eksternal file yang akan berjalan bersama dengan html ini dan kali ini diarahkan ke link firebase-app. Script ini harus ditambahkan apabila anda menggunakan layanan Firebase
      3. Anda harus menambahkan bagian ini karena saat membuat project di Firebase sebelumnya produk yang digunakan adalah Realtime Database dan Authentication
      4. Pada bagian ini anda dapat menuliskan parameter-parameter dari konfigurasi Firebase anda. Parameter ini dapat dilihat pada bagian Project Setting dari Layanan Firebase
         1. Pada bagian ini Firebase diinisialisasi sesuai dengan Firebase Config
         2. Kemudian di bagian ini dibuatlah 2 global variable yaitu auth dan db yang akan menampung parameter auth dan db
         3. Gunakan style sheet yang ada pada link http://href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css”
         4. Gunakan favicon.jpg untuk icon dari halam web ini
         5. Gunakan style.css sebagai style sheet dengan tipe text/css
         6. Bagian ini adalah bagian yang menampilkan judul dari control panel yang kita buat dan anda dapat mengubah namanya sesuai keinginan

1. 1. 1. 1. Pada bagian ini kita atur display style dari semua elemen adalah “none” sehingga otentikasi user berhasil atau gagal tidaklah ditampilkan melainkan hanya langsung dihandle oleh Java Script.
         2. Kemudian dilanjutkan dengan field email dan password di login form. Juga terdapat paragpraph yang menampilkan pesan error apabila terjadi error

1. 1. 1. 1. Bagian ini adalah nama dari tiap tombol, dalam gambar di atas adalah tombol yang mengatur GPIO 4. Pengguna dapat mengubah nama tombol sesuai dengan perangkat apa yang dihubungkan pada stop kontak di lubang tersebut
         2. Merupakan id dari tombol 1 saat kondisi ON. Id ini nantinya akan diproses oleh java script
         3. Bagian ini adalah tulisan yang tampil pada tombol ON dan pengguna dapat mengganti sesuai keinginan.
         4. Merupakan id dari tombol 1 saat kondisi OFF. Id ini nantinya akan diproses oleh java script
         5. Bagian ini adalah tulisan yang tampil pada tombol OFF dan pengguna dapat mengganti sesuai keinginan.
         6. Bagian ini adalah id Status dari tombol 1 yang diperoleh dari java script
      2.  Berikutnya adalah bagian untuk GPIO 16, 14 dan 12 sama seperti yang ada di GPIO 4 hanya ada perbedaan di bagian id tiap tombolPada bagian akhir ini kita tambahkan referensi yang mengarah ke file java script di external yang diletakkan di folder scripts dalam folder public. File auth.js akan menghandle segala sesuatu yang berhubungan dengan otentikasi dan file index.js akan menghandle segala sesuatu yang berhubungan dengan UI.
   2. Bagian Style.css, bagian ini fungsinya untuk mengatur Font, warna, border, margin dan size dari tampilan saja.
   3. Bagian auth.js, bagian ini berfungsi untuk mengatur otentikasi pengguna pada Layanan Firebase.Di sini kita buat sebuah variabel dengan nama loginform yang akan menerima data dari elemen HTML form login yang bisa dilihat di bagian login-form id yang ada pada file index.html seperti tampak pada gambar di bawah iniKemudian kita tambahkan event listener sebagai berikut

di mana instruksi-instruksi dalam sub sequent berikut akan dijalankan saat submit dilakukan

Saat pengguna sedang dalam kondisi login, maka link logout yang mengacu pada logout-link di index.html akan muncul. Saat link tersebut diklik maka instruksi-instruksi di dalam subsequent tersebut akan dijalankan dan proses sebagai berikut:

• preventDefault () yang menghalangi untuk menampilkan proses sehingga hanya eksekusi saja yang dilakukan
• Proses signout dengan auth.signOut.

Untuk memastikan bahwa pengguna tetap login atau sudah logout terdapat fungsi onStateChanged yang memantau kondisi login ataupun logout

4. Bagian index.js, ini adalah bagian yang mengatur UI tergantung pada proses otentikasi. Apabila otentikasi OK maka status dari GPIO dari database maupun dari interface akan ditampilkan. Perubahan status juga akan ditampilkan saat terjadi.

Di sini dibuat beberapa variabel sebagai berikut:

• loginElement mengacu pada Form Login
• contentElement mengacu pada bagian-bagian web yang akan ditampilkan saat pengguna login
• userDetailsElement mengacu pada bagian yang menampilkan email pengguna yang login
• authBarElement mengacu pada bagian yang menampilkan status pengguna yang login saat ini, email pengguna dan logout link

Selanjutnya pada bagian ini kita buat variabel-variabel yang menyimpan database path maupun GPIO ESP8266 yang terhubung dengan tiap-tiap lubang stop kontak dan juga variabel yang terdiri dari reference database dan pathnya.

setupUI() Function, pada bagian ini mengatur UI yang berhubungan dengan otentikasi, pada file auth.js tadi saat setupUI() dijalankan dengan argument user maka hal ini merupakan indikasi bahwa user sign in dan bila setupUI() dijalankan tanpa argument maka hal ini merupakan indikasi bahwa user sign out.

Saat btn1on diklik maka beri nilai 1 di database path yang ditunjuk oleh dbRefOutput1 dan saat btn1off diklik maka beri nilai 0 di database path yang ditunjuk oleh dbRefOutput1. Demikian juga untuk btn2on/off hingga btn4on/off.

Apabila argument yang diterima bukan user, maka statusnya adalah sign out dan bagian-bagian berikut yang ditampilkan.

Sedangkan untuk GPIO states tidak ditampilkan lagi, hanya Form login yang ditampilkan.

Hal-hal yang dibutuhkan

• Stop Kontak Pintar 4 lubang
• Visual Studio Code
• Node.js
• Arduino Sketch
• Library arduino
• index.html
• style.css
• auth.js
• index.js

DELTA ELECTRONIC

Paulus Andi Nalwan, ST