{"id":1673,"date":"2024-12-11T20:39:48","date_gmt":"2024-12-11T13:39:48","guid":{"rendered":"https:\/\/delta-electronic.com\/Design\/Hardwares\/?p=1673"},"modified":"2024-12-11T21:16:04","modified_gmt":"2024-12-11T14:16:04","slug":"mengendalikan-stop-kontak-pintar-melalui-web-application","status":"publish","type":"post","link":"https:\/\/delta-electronic.com\/Design\/Hardwares\/mengendalikan-stop-kontak-pintar-melalui-web-application\/","title":{"rendered":"Mengendalikan Stop Kontak Pintar melalui web application"},"content":{"rendered":"<p>Pada artikel kali ini kami akan membahas bagaimana cara mengendalikan <a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/stop-kontak-pintar-4-lubang-smarthome-dapat-diprogram-lewat-arduino-ota-wi-fi\">Stop Kontak Pintar 4 lubang<\/a> 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:<\/p>\n<ul>\n<li>SSID Wi-Fi<\/li>\n<li>Password Wi-Fi<\/li>\n<li>Firebase API-Key<\/li>\n<li>Firebase Realtime Database<\/li>\n<li>Firebase Email account<\/li>\n<li>Firebase Password account<\/li>\n<\/ul>\n<p>Detail pengaturan maupun cara mengendalikan relay melalui Firebase Service dapat dilihat di video berikut<\/p>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/7KZKNjUeHwQ?si=0I0kHR2USudic9ZW\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>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<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1674\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/dst-esp8266-web.png\" alt=\"\" width=\"941\" height=\"537\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/dst-esp8266-web.png 941w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/dst-esp8266-web-300x171.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/dst-esp8266-web-768x438.png 768w\" sizes=\"(max-width: 941px) 100vw, 941px\" \/><\/p>\n<ol>\n<li>Buka artikel\u00a0 <a href=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase-bagian-2-web-application\/\" target=\"_blank\" rel=\"noopener\">Mengendalikan relay dengan menggunakan DST-ESP8266 dari mana saja menggunakan Firebase bagian 2 (web application)<\/a> berikut dan lakukan langkah:\n<ol>\n<li>Tambahkan aplikasi pada Firebase Project anda, hanya nama projectnya diganti menjadi 4 Ch relay<\/li>\n<li>Setting Firebase Web Application Project dan lakukan langkah-langkah seperti yang dibahas di artikel tersebut<\/li>\n<li>Inisialisasi Firebase Web Application Project dan lakukan langkah-langkah seperti yang dibahas di artikel tersebut<\/li>\n<li>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\n<ol>\n<li>Download file html yang sudah kita siapkan di\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1VDITo_yDyd9oRNOUf0pRUZfyyx_MV9V7\/view?usp=sharing\" target=\"_blank\" rel=\"noopener\">link berikut<\/a>\u00a0dan replace file index.html yang ada pada folder project<\/li>\n<li>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<img decoding=\"async\" class=\"alignnone size-full wp-image-1676\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step19-web-app.png\" alt=\"\" width=\"812\" height=\"384\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step19-web-app.png 812w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step19-web-app-300x142.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step19-web-app-768x363.png 768w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/li>\n<li>Parameter-parameter dapat dilihat di bagian Project Setting dari Firebase Service<img decoding=\"async\" class=\"alignnone size-full wp-image-1677\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step20-web-app.png\" alt=\"\" width=\"994\" height=\"437\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step20-web-app.png 994w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step20-web-app-300x132.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step20-web-app-768x338.png 768w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/li>\n<li>Pilih folder public dan pilih new file lalu buat style.css<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1678\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step21-web-app.png\" alt=\"\" width=\"758\" height=\"415\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step21-web-app.png 758w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step21-web-app-300x164.png 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/li>\n<li>Download file style.css di\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/14l-rqHQAPZMTlJIIFTPxGH40QBaTqQ5A\/view?usp=sharing\">link berikut<\/a>\u00a0lalu buka, select all, copy dan paste ke file style.css yang terbentuk di Visual Studio Code kemudian save<\/li>\n<li>Berikutnya kita mulai bentuk file-file java script<\/li>\n<li>Pilih public folder lalu klik new folder dan buat folder scripts<\/li>\n<li>Buat file auth.js di folder scripts dan download file auth.js di<a href=\"https:\/\/drive.google.com\/file\/d\/1mtv0zIRGTvRbeiB378yq36Y8202fKawp\/view?usp=sharing\">\u00a0link berikut<\/a><\/li>\n<li>Buka file, select all, copy dan paste ke file auth.js yang terbentuk di Visual Studio Code dan klik save<\/li>\n<li>Pilih scripts folder dan klik new file dan buat file index.js dan download file index.js di<a href=\"https:\/\/drive.google.com\/file\/d\/1kEsJVd5KsGlAMV1muxgPpdpCm6JsBdp5\/view?usp=sharing\" target=\"_blank\" rel=\"noopener\">link berikut<\/a><\/li>\n<li>Download file\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1N8fa5tod5K6Lf467dICA8dvO6q-Jr3zW\/view?usp=sharing\">favicon.jpg<\/a>\u00a0dan copy ke folder public<\/li>\n<li>Masuk ke layar terminal dan tulis perintah\n<ul>\n<li>firebase deploy<\/li>\n<\/ul>\n<\/li>\n<li>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.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1680\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step22-web-app.png\" alt=\"\" width=\"1050\" height=\"499\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step22-web-app.png 1050w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step22-web-app-300x143.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step22-web-app-1024x487.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/step22-web-app-768x365.png 768w\" sizes=\"(max-width: 1050px) 100vw, 1050px\" \/><\/li>\n<li>Pada tahap ini web application telah terbentuk dan siap digunakan. Klik url yang terbentuk dan akan tampil seperti berikut pada browser anda<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Coba tekan On dan OFF dari tiap-tiap tombol dan perhatikan perubahan relay pada Stop Kontak Pintar kita<\/li>\n<li>Berikutnya kita akan membahas cara kerja dari Web Application\n<ol>\n<li><strong>Bagian Index.html<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1681\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app1.png\" alt=\"\" width=\"885\" height=\"478\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app1.png 885w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app1-300x162.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app1-768x415.png 768w\" sizes=\"(max-width: 885px) 100vw, 885px\" \/>\n<ol>\n<li>Bagian ini merupakan judul dari halaman web di mana pengguna dapat dengan bebas merubahnya sesuai keinginan<\/li>\n<li>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<\/li>\n<li>Anda harus menambahkan bagian ini karena saat membuat project di Firebase sebelumnya produk yang digunakan adalah Realtime Database dan Authentication<\/li>\n<li>Pada bagian ini anda dapat menuliskan parameter-parameter dari konfigurasi Firebase anda. Parameter ini dapat dilihat pada bagian Project Setting dari Layanan Firebase<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1682\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app2.png\" alt=\"\" width=\"917\" height=\"439\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app2.png 917w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app2-300x144.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app2-768x368.png 768w\" sizes=\"(max-width: 917px) 100vw, 917px\" \/>\n<ol>\n<li>Pada bagian ini Firebase diinisialisasi sesuai dengan Firebase Config<\/li>\n<li>Kemudian di bagian ini dibuatlah 2 global variable yaitu auth dan db yang akan menampung parameter auth dan db<\/li>\n<li>Gunakan style sheet yang ada pada link http:\/\/<span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">&#8220;<\/span>https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css&#8221;<\/span><\/li>\n<li>Gunakan favicon.jpg untuk icon dari halam web ini<\/li>\n<li>Gunakan style.css sebagai style sheet dengan tipe text\/css<\/li>\n<li>Bagian ini adalah bagian yang menampilkan judul dari control panel yang kita buat dan anda dapat mengubah namanya sesuai keinginan<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 120px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1683\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app3.png\" alt=\"\" width=\"779\" height=\"455\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app3.png 779w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app3-300x175.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app3-768x449.png 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Pada bagian ini kita atur display style dari semua elemen adalah &#8220;none&#8221; sehingga otentikasi user berhasil atau gagal tidaklah ditampilkan melainkan hanya langsung dihandle oleh Java Script.<\/li>\n<li>Kemudian dilanjutkan dengan field email dan password di login form. Juga terdapat paragpraph yang menampilkan pesan error apabila terjadi error<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 120px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1684\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app5.png\" alt=\"\" width=\"737\" height=\"279\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app5.png 737w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app5-300x114.png 300w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>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<\/li>\n<li>Merupakan id dari tombol 1 saat kondisi ON. Id ini nantinya akan diproses oleh java script<\/li>\n<li>Bagian ini adalah tulisan yang tampil pada tombol ON dan pengguna dapat mengganti sesuai keinginan.<\/li>\n<li>Merupakan id dari tombol 1 saat kondisi OFF. Id ini nantinya akan diproses oleh java script<\/li>\n<li>Bagian ini adalah tulisan yang tampil pada tombol OFF dan pengguna dapat mengganti sesuai keinginan.<\/li>\n<li>Bagian ini adalah id Status dari tombol 1 yang diperoleh dari java script<\/li>\n<\/ol>\n<\/li>\n<li style=\"list-style-type: none;\">\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1686\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app6.png\" alt=\"\" width=\"843\" height=\"633\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app6.png 843w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app6-300x225.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app6-768x577.png 768w\" sizes=\"(max-width: 843px) 100vw, 843px\" \/>Berikutnya adalah bagian untuk GPIO 16, 14 dan 12 sama seperti yang ada di GPIO 4 hanya ada perbedaan di bagian id tiap tombol<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1687\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app7.png\" alt=\"\" width=\"737\" height=\"177\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app7.png 737w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app7-300x72.png 300w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/>Pada 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.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Bagian Style.css<\/strong>, bagian ini fungsinya untuk mengatur Font, warna, border, margin dan size dari tampilan saja.<\/li>\n<li><strong>Bagian auth.js<\/strong>, bagian ini berfungsi untuk mengatur otentikasi pengguna pada Layanan Firebase.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1691\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app8-1.png\" alt=\"\" width=\"801\" height=\"391\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app8-1.png 801w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app8-1-300x146.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app8-1-768x375.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/>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 ini<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1692\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app9.png\" alt=\"\" width=\"766\" height=\"316\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app9.png 766w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app9-300x124.png 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/>Kemudian kita tambahkan <a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_eventlistener.asp\" target=\"_blank\" rel=\"noopener\">event listener<\/a> sebagai berikut<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1694\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app10.png\" alt=\"\" width=\"575\" height=\"27\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app10.png 575w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app10-300x14.png 300w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p style=\"padding-left: 80px;\">di mana instruksi-instruksi dalam sub sequent berikut akan dijalankan saat submit dilakukan<\/p>\n<p style=\"padding-left: 80px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1695\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app11.png\" alt=\"\" width=\"1360\" height=\"420\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app11.png 1360w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app11-300x93.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app11-1024x316.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app11-768x237.png 768w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1696\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app12.png\" alt=\"\" width=\"852\" height=\"401\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app12.png 852w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app12-300x141.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app12-768x361.png 768w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1697\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app13.png\" alt=\"\" width=\"852\" height=\"143\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app13.png 852w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app13-300x50.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app13-768x129.png 768w\" sizes=\"(max-width: 852px) 100vw, 852px\" \/><\/p>\n<p>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:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3schools.com\/jsref\/event_preventdefault.asp\" target=\"_blank\" rel=\"noopener\">preventDefault ()<\/a> yang menghalangi untuk menampilkan proses sehingga hanya eksekusi saja yang dilakukan<\/li>\n<li>Proses signout dengan auth.signOut.<\/li>\n<\/ul>\n<p>Untuk memastikan bahwa pengguna tetap login atau sudah logout terdapat fungsi onStateChanged yang memantau kondisi login ataupun logout<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1698\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app14.png\" alt=\"\" width=\"914\" height=\"270\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app14.png 914w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app14-300x89.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app14-768x227.png 768w\" sizes=\"(max-width: 914px) 100vw, 914px\" \/><\/p>\n<p style=\"padding-left: 40px;\">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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1700\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-15.png\" alt=\"\" width=\"914\" height=\"410\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-15.png 914w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-15-300x135.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-15-768x345.png 768w\" sizes=\"(max-width: 914px) 100vw, 914px\" \/><\/p>\n<p>Di sini dibuat beberapa variabel sebagai berikut:<\/p>\n<ul>\n<li>loginElement mengacu pada Form Login<\/li>\n<li>contentElement mengacu pada bagian-bagian web yang akan ditampilkan saat pengguna login<\/li>\n<li>userDetailsElement mengacu pada bagian yang menampilkan email pengguna yang login<\/li>\n<li>authBarElement mengacu pada bagian yang menampilkan status pengguna yang login saat ini, email pengguna dan logout link<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1702 aligncenter\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app16.png\" alt=\"\" width=\"597\" height=\"268\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app16.png 597w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app16-300x135.png 300w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/p>\n<p>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.<\/p>\n<p><strong>setupUI() Function<\/strong>, 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1703 aligncenter\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app17.png\" alt=\"\" width=\"643\" height=\"353\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app17.png 643w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app17-300x165.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1704 aligncenter\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app18.png\" alt=\"\" width=\"418\" height=\"463\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app18.png 418w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app18-271x300.png 271w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/p>\n<p>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.<\/p>\n<p>Apabila argument yang diterima bukan user, maka statusnya adalah sign out dan bagian-bagian berikut yang ditampilkan.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1705 aligncenter\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app19.png\" alt=\"\" width=\"429\" height=\"157\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app19.png 429w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/12\/web-app19-300x110.png 300w\" sizes=\"(max-width: 429px) 100vw, 429px\" \/><\/p>\n<p>Sedangkan untuk GPIO states tidak ditampilkan lagi, hanya Form login yang ditampilkan.<\/p>\n<p><strong>Hal-hal yang dibutuhkan<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/stop-kontak-pintar-4-lubang-smarthome-dapat-diprogram-lewat-arduino-ota-wi-fi\" target=\"_blank\" rel=\"noopener\">Stop Kontak Pintar 4 lubang<\/a><\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a><\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\">Node.js<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1ydD0UyiMilbSSC0mHqFa_omoJz4HxL1c\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">Arduino Sketch<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1q7l8sEtX1D3tAH8jQXuYWHsd5gNS3axl\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">Library arduino<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1VDITo_yDyd9oRNOUf0pRUZfyyx_MV9V7\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">index.html<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/14l-rqHQAPZMTlJIIFTPxGH40QBaTqQ5A\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">style.css<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1mtv0zIRGTvRbeiB378yq36Y8202fKawp\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">auth.js<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/1kEsJVd5KsGlAMV1muxgPpdpCm6JsBdp5\/view?usp=drive_link\" target=\"_blank\" rel=\"noopener\">index.js<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>DELTA ELECTRONIC<\/strong><\/p>\n<p><strong>Paulus Andi Nalwan, ST<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[361],"tags":[94,196,197,322,96,95,342,201,202,360],"class_list":["post-1673","post","type-post","status-publish","format-standard","hentry","category-mengendalikan-stop-kontak-pintar-melalui-web-application","tag-arduino","tag-esp32","tag-esp8266","tag-home-automation","tag-microcontroller","tag-mikrokontroler","tag-smart-relay","tag-smarthome","tag-smarthouse","tag-web-relay"],"_links":{"self":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1673"}],"collection":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/comments?post=1673"}],"version-history":[{"count":9,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1673\/revisions"}],"predecessor-version":[{"id":1708,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1673\/revisions\/1708"}],"wp:attachment":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/media?parent=1673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/categories?post=1673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/tags?post=1673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}