{"id":1596,"date":"2024-09-13T02:30:29","date_gmt":"2024-09-12T19:30:29","guid":{"rendered":"https:\/\/delta-electronic.com\/Design\/Hardwares\/?p=1596"},"modified":"2024-09-15T06:24:03","modified_gmt":"2024-09-14T23:24:03","slug":"mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase-bagian-2-web-application","status":"publish","type":"post","link":"https:\/\/delta-electronic.com\/Design\/Hardwares\/mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase-bagian-2-web-application\/","title":{"rendered":"Mengendalikan relay dengan menggunakan DST-ESP8266 dari mana saja menggunakan Firebase bagian 2 (web application)"},"content":{"rendered":"<p>Bila pada artikel jilid 1 saya menuliskan bagaimana cara mengendalikan relay menggunakan layanan Firebase dengan cara membuka database dan edit nilai logic yang ada di database maka pada artikel ini saya akan membahas bagaimana cara mengendalikan relay-relay tersebut dengan cara yang lebih mudah yaitu dengan menggunakan browser yang mengakses ke web application.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-1600\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1.jpg\" alt=\"\" width=\"2396\" height=\"2092\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1.jpg 2396w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1-300x262.jpg 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1-1024x894.jpg 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1-768x671.jpg 768w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1-1536x1341.jpg 1536w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-web-app-1-2048x1788.jpg 2048w\" sizes=\"(max-width: 2396px) 100vw, 2396px\" \/><\/p>\n<p>Di sini akan dijelaskan bagaimana membuat web application yang akan mengakses realtime database yang ada di firebase.<\/p>\n<ul>\n<li>Firebase akan menyediakan hosting untuk web application anda dengan menggunakan global CDN dan dilengkapi dengan SSL certificate untuk keamanannya. Kita dapat mengakses web application ini dari mana saja dengan domain yang di-generate oleh Firebase<\/li>\n<li>Saat pertama kali mengakses, kita harus melakukan registrasi menggunakan email dan password seperti yang dijelaskan pada<a href=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/category\/kumpulan-aplikasi\/esp8266\/mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase\/\"> bagian pertama<\/a><\/li>\n<li>Saat sesudah terotentikasi maka kita dapat melihat tombol-tombol yang dapat mengubah status pada database dan juga mengubah GPIO dari <a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/2-channel-relay-esp8266-dst-esp8266-infrared-remote-receiver-transmitter\">DST-ESP8266<\/a><\/li>\n<li><a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/2-channel-relay-esp8266-dst-esp8266-infrared-remote-receiver-transmitter\">DST-ESP8266<\/a> yang selalu memantau perubahan di database akan melakukan perubahan di GPIOnya setiap kali ada perubahan di database di saat kita klik tombol di web application<\/li>\n<li>Web application akan menampilkan status GPIO saat itu<\/li>\n<li>Kita dapat menambah dan mengurangi jumlah GPIO maupun board <a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/2-channel-relay-esp8266-dst-esp8266-infrared-remote-receiver-transmitter\">DST-ESP8266<\/a><\/li>\n<li>Saat kita login, kita juga dapat logout setiap saat dan harus login lagi apabila ingin mengakses web application tersebut lagi<\/li>\n<\/ul>\n<p>Berikut adalah tampilannya di browser<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-1602\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/web-app.jpg\" alt=\"\" width=\"1200\" height=\"990\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/web-app.jpg 1200w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/web-app-300x248.jpg 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/web-app-1024x845.jpg 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/web-app-768x634.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>Sebelum kita mulai membuat web application ada beberapa software sebagai berikut:<\/p>\n<ul>\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>Install firebase tools\n<ul>\n<li>Buka VS Code<\/li>\n<li>Buka Terminal window dengan klik goto Terminal &gt; New Terminal<\/li>\n<li>Masuk ke path c:\\ dengan tulis cd\\ &lt;enter&gt;<\/li>\n<li>Install npm versi terakhir dengan perintah:\n<ul>\n<li>npm install -g npm@latest<\/li>\n<\/ul>\n<\/li>\n<li>Install firebase tools dengan perintah\n<ul>\n<li>npm -g install firebase-tools<\/li>\n<\/ul>\n<\/li>\n<li>Firebase tools akan terinstal dan abaikan saja semua warning<\/li>\n<li>Kita dapat memeriksa apakah instalasi berhasil dengan perintah\n<ul>\n<li>firebase &#8211;version<\/li>\n<\/ul>\n<\/li>\n<li>Pada awal biasanya kita akan memperoleh error sebagai berikut<img decoding=\"async\" class=\"alignnone size-full wp-image-1603\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/screenshot1.png\" alt=\"\" width=\"750\" height=\"201\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/screenshot1.png 750w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/screenshot1-300x80.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/li>\n<li>Masuk ke path <span class=\"rnthl rntliteral\">C: \\Users\\username\\AppData\\Roaming\\npm<\/span> path dan hapus firebase.ps1<\/li>\n<li>Kembali masuk ke terminal dan ketik perintah\n<ul>\n<li>firebase &#8211;version<\/li>\n<\/ul>\n<\/li>\n<li>Berikut hasil yang akan diperoleh apabila instalasi sudah OK<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1604\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-version.png\" alt=\"\" width=\"943\" height=\"76\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-version.png 943w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-version-300x24.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/firebase-version-768x62.png 768w\" sizes=\"(max-width: 943px) 100vw, 943px\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Langkah-langkah dalam membuat web application<\/strong><\/p>\n<ol>\n<li><strong>Tambahkan aplikasi pada project anda<\/strong>\n<ol>\n<li>Masuk ke Firebase Project Console dan tambahkan application dengan klik +Add app\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1605\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step1-web-app.png\" alt=\"\" width=\"1274\" height=\"216\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step1-web-app.png 1274w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step1-web-app-300x51.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step1-web-app-1024x174.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step1-web-app-768x130.png 768w\" sizes=\"(max-width: 1274px) 100vw, 1274px\" \/><\/li>\n<li>Pilih icon web app<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1606\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step2-web-app.png\" alt=\"\" width=\"1002\" height=\"417\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step2-web-app.png 1002w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step2-web-app-300x125.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step2-web-app-768x320.png 768w\" sizes=\"(max-width: 1002px) 100vw, 1002px\" \/><\/li>\n<li>Tuliskan nama project dan centang &#8220;also setup firebase hosting for this app&#8221; lalu klik <strong>register app<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1607\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step3-web-app.png\" alt=\"\" width=\"896\" height=\"449\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step3-web-app.png 896w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step3-web-app-300x150.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step3-web-app-768x385.png 768w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/li>\n<li>Copy dan simpan firebaseConfig dan simpan dalam text file karena nanti akan kita butuhkan\n<ul>\n<li><span class=\"pln\">\u00a0 apiKey<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;AIzaSyBymKnrmZuG-4siTNcIruIMkN1VDVhfEtk&#8221;<\/span><span class=\"pun\">,<\/span>\n<div class=\"line-container ng-star-inserted\"><span class=\"pln\">\u00a0 authDomain<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;dst-esp8266-2-ch-relay.firebaseapp.com&#8221;<\/span><span class=\"pun\">,<\/span><\/div>\n<div class=\"line-container ng-star-inserted\"><span class=\"pln\">\u00a0 databaseURL<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;https:\/\/dst-esp8266-2-ch-relay-default-rtdb.asia-southeast1.firebasedatabase.app&#8221;<\/span><span class=\"pun\">,<\/span><\/div>\n<div class=\"line-container ng-star-inserted\"><span class=\"pln\">\u00a0 projectId<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;dst-esp8266-2-ch-relay&#8221;<\/span><span class=\"pun\">,<\/span><\/div>\n<div class=\"line-container ng-star-inserted\"><span class=\"pln\">\u00a0 storageBucket<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;dst-esp8266-2-ch-relay.appspot.com&#8221;<\/span><span class=\"pun\">,<\/span><span class=\"pln\">\u00a0 messagingSenderId<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;922868568040&#8221;<\/span><span class=\"pun\">,<\/span><\/div>\n<div class=\"line-container ng-star-inserted\"><span class=\"pln\">\u00a0 appId<\/span><span class=\"pun\">:<\/span> <span class=\"str\">&#8220;1:922868568040:web:ab8a365cfb0b0e2b799e5d&#8221;<\/span><\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li>Klik next dan kemudian continue to console<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1608\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step4-web-app.png\" alt=\"\" width=\"695\" height=\"483\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step4-web-app.png 695w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step4-web-app-300x208.png 300w\" sizes=\"(max-width: 695px) 100vw, 695px\" \/><\/li>\n<\/ol>\n<\/li>\n<li><strong>Setting Firebase web application project<\/strong>\n<ol>\n<li><strong>Buat Folder Project<\/strong>\n<ol>\n<li>Buat folder baru contohnya folder firebase-dst-esp8266-web-app<\/li>\n<li>Buka Visual Studio Code, pilih Open Folder dan arahkan ke firebase-dst-esp8266-web-app folder<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1610\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step5-web-app.png\" alt=\"\" width=\"890\" height=\"407\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step5-web-app.png 890w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step5-web-app-300x137.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step5-web-app-768x351.png 768w\" sizes=\"(max-width: 890px) 100vw, 890px\" \/><\/li>\n<li>Masuk View dan pilih terminal untuk masuk ke layar terminal<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1611\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step6-web-app.png\" alt=\"\" width=\"989\" height=\"506\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step6-web-app.png 989w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step6-web-app-300x153.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step6-web-app-768x393.png 768w\" sizes=\"(max-width: 989px) 100vw, 989px\" \/><\/li>\n<\/ol>\n<\/li>\n<li><strong>Firebase Login<\/strong>\n<ol>\n<li>Tulis firebase login dan kemudian &lt;Enter&gt;, apabila sudah login maka akan tampil tulisan &#8220;already login as &#8230;.@gmail.com, namun apabila belum maka akan tampil pesan sbb:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1612\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step7-web-app.png\" alt=\"\" width=\"1013\" height=\"377\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step7-web-app.png 1013w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step7-web-app-300x112.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step7-web-app-768x286.png 768w\" sizes=\"(max-width: 1013px) 100vw, 1013px\" \/><\/li>\n<li>Kemudian akan muncul jendela seperti pada gambar berikut di layar browser<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1613\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step8-web-app.png\" alt=\"\" width=\"777\" height=\"377\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step8-web-app.png 777w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step8-web-app-300x146.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step8-web-app-768x373.png 768w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/li>\n<li>Sign in ke akun google anda dan ijinkan Firebase CLI mengakses akun google anda<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1614\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step9-web-app.png\" alt=\"\" width=\"730\" height=\"431\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step9-web-app.png 730w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step9-web-app-300x177.png 300w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/li>\n<li>Pada layar Visual Studio Code akan tampil pesan seperti pada gambar di bawah ini<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1615\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step10-web-app.png\" alt=\"\" width=\"1108\" height=\"278\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step10-web-app.png 1108w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step10-web-app-300x75.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step10-web-app-1024x257.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step10-web-app-768x193.png 768w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" \/><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li><strong>Inisialisasi web application Firebase Project<\/strong>\n<ol>\n<li>Saat sudah berhasil login lakukan inisialisasi firebase dengan perintah\n<ul>\n<li>firebase init<\/li>\n<\/ul>\n<\/li>\n<li>Klik Yes saat tampil pesan seperti pada gambar ini<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1616\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step11-web-app.png\" alt=\"\" width=\"1069\" height=\"347\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step11-web-app.png 1069w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step11-web-app-300x97.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step11-web-app-1024x332.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step11-web-app-768x249.png 768w\" sizes=\"(max-width: 1069px) 100vw, 1069px\" \/><\/li>\n<li>Gunakan up down tombol untuk memilih ke atas dan ke bawah, tombol spasi untuk menandai pilihan dan pilih:\n<ul>\n<li>Realtime Database: konfigurasi rule security dari real time database<\/li>\n<li>Hosting: konfigurasi file-file untuk firebase hosting\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1617\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step12-web-app.png\" alt=\"\" width=\"1069\" height=\"286\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step12-web-app.png 1069w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step12-web-app-300x80.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step12-web-app-1024x274.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step12-web-app-768x205.png 768w\" sizes=\"(max-width: 1069px) 100vw, 1069px\" \/><\/li>\n<\/ul>\n<\/li>\n<li>Pilih use an existing project<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1618\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step13-web-app.png\" alt=\"\" width=\"924\" height=\"246\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step13-web-app.png 924w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step13-web-app-300x80.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step13-web-app-768x204.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/li>\n<li>Pilih project yang kita buat di <a href=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/category\/kumpulan-aplikasi\/esp8266\/mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase\/\">bagian 1<\/a><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1619\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step14-web-app.png\" alt=\"\" width=\"999\" height=\"257\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step14-web-app.png 999w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step14-web-app-300x77.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step14-web-app-768x198.png 768w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/li>\n<li>Klik enter saat ada pertanyaan &#8220;What file should be used for Realtime Database Rules?<\/li>\n<li>Klik enter untuk memilih public directory<\/li>\n<li>pilih no saat ditanya &#8220;single-page app (rewrite urls to \/index.html)?&#8221;<\/li>\n<li>pilih no saat ditanya &#8220;set up automatic builds and deploys with GitHub?&#8221;<\/li>\n<li>Proses inisialisasi telah selesai saat tampil pesan seperti pada gambar berikut<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1620\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step15-web-app.png\" alt=\"\" width=\"863\" height=\"254\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step15-web-app.png 863w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step15-web-app-300x88.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step15-web-app-768x226.png 768w\" sizes=\"(max-width: 863px) 100vw, 863px\" \/><\/li>\n<li>Pada tahap ini akan terbentuk file-file yang dibutuhkan pada folder project anda<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1621\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step16-web-app.png\" alt=\"\" width=\"882\" height=\"400\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step16-web-app.png 882w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step16-web-app-300x136.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step16-web-app-768x348.png 768w\" sizes=\"(max-width: 882px) 100vw, 882px\" \/><\/li>\n<li>Agar file-file yang terbentuk ini bisa langsung ter install di hosting firebase anda, maka tuliskan perintah\n<ul>\n<li>firebase deploy<\/li>\n<\/ul>\n<\/li>\n<li>Setelah tampil pesan deploy complete maka file-file tersebut telah siap di hosting. Untuk menguji hosting yang terbentuk bisa copy &#8211; paste URL yang terbentuk<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1622\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step17-web-app.png\" alt=\"\" width=\"1044\" height=\"301\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step17-web-app.png 1044w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step17-web-app-300x86.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step17-web-app-1024x295.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step17-web-app-768x221.png 768w\" sizes=\"(max-width: 1044px) 100vw, 1044px\" \/><\/li>\n<li>Akan tampil pesan seperti pada gambar di bawah ini yang menandakan bahwa hosting telah siap dengan file index.html standard<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1623\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step18-web-app.png\" alt=\"\" width=\"779\" height=\"380\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step18-web-app.png 779w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step18-web-app-300x146.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step18-web-app-768x375.png 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/li>\n<\/ol>\n<\/li>\n<li><strong>Create Firebase web application<\/strong>, 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 <a href=\"https:\/\/drive.google.com\/file\/d\/1GKhNtmeTX12M1cL4Y_ma6XBE6juqhtcS\/view?usp=sharing\">link berikut<\/a> dan 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 loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1624\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step19-web-app.png\" alt=\"\" width=\"812\" height=\"384\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step19-web-app.png 812w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step19-web-app-300x142.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step19-web-app-768x363.png 768w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/li>\n<li>Parameter-parameter dapat dilihat di bagian Project Setting<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1625\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step20-web-app.png\" alt=\"\" width=\"994\" height=\"437\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step20-web-app.png 994w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step20-web-app-300x132.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/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-1626\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step21-web-app.png\" alt=\"\" width=\"758\" height=\"415\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step21-web-app.png 758w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step21-web-app-300x164.png 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/li>\n<li>Download file style.css di <a href=\"https:\/\/drive.google.com\/file\/d\/14l-rqHQAPZMTlJIIFTPxGH40QBaTqQ5A\/view?usp=sharing\">link berikut<\/a> lalu 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\"> link 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\/1u9YRMvpW21FJMfygxxVJEBYn17kLMN5L\/view?usp=sharing\"> link berikut<\/a><\/li>\n<li>Buka file, select all, copy dan paste ke file index.js yang terbentu di Visual Studio Code dan klik save<\/li>\n<li>Download file <a href=\"https:\/\/drive.google.com\/file\/d\/1N8fa5tod5K6Lf467dICA8dvO6q-Jr3zW\/view?usp=sharing\">favicon.jpg<\/a> dan 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-1628\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step22-web-app.png\" alt=\"\" width=\"1050\" height=\"499\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step22-web-app.png 1050w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step22-web-app-300x143.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step22-web-app-1024x487.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/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<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1629\" src=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step23-web-app.png\" alt=\"\" width=\"1143\" height=\"421\" srcset=\"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step23-web-app.png 1143w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step23-web-app-300x110.png 300w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step23-web-app-1024x377.png 1024w, https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-content\/uploads\/2024\/09\/step23-web-app-768x283.png 768w\" sizes=\"(max-width: 1143px) 100vw, 1143px\" \/><\/li>\n<li>Klik on \/ off di GPIO12 dan GPIO13 lalu lihat reaksinya pada relay-relay di <a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/2-channel-relay-esp8266-dst-esp8266-infrared-remote-receiver-transmitter\">DST-ESP8266 Relay<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Hal-hal yang dibutuhkan:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.tokopedia.com\/delta-electronic\/2-channel-relay-esp8266-dst-esp8266-infrared-remote-receiver-transmitter\">DST-ESP8266<\/a> sebagai Sistem Minimum ESP8266<\/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>file<a href=\"https:\/\/drive.google.com\/file\/d\/1GKhNtmeTX12M1cL4Y_ma6XBE6juqhtcS\/view?usp=drive_link\"> index.html<\/a><\/li>\n<li>file <a href=\"https:\/\/drive.google.com\/file\/d\/14l-rqHQAPZMTlJIIFTPxGH40QBaTqQ5A\/view?usp=drive_link\">style.css<\/a><\/li>\n<li>file-file java script <a href=\"https:\/\/drive.google.com\/file\/d\/1mtv0zIRGTvRbeiB378yq36Y8202fKawp\/view?usp=drive_link\">auth.js<\/a> dan <a href=\"https:\/\/drive.google.com\/file\/d\/1u9YRMvpW21FJMfygxxVJEBYn17kLMN5L\/view?usp=drive_link\">index.js<\/a><\/li>\n<\/ul>\n<p><iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/mlxEA9p6uE0?si=diwOtNKWFZw5X_S2\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Disclaimer:<\/p>\n<p>Artikel ini saya tulis dengan menggunakan sumber dari <a href=\"https:\/\/randomnerdtutorials.com\/control-esp-gpios-firebase-web-app\/\">https:\/\/randomnerdtutorials.com\/control-esp-gpios-firebase-web-app\/<\/a>\u00a0dengan gaya bahasa dan konstruksi hardware yang saya sesuaikan dengan produk kami.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>DELTA ELECTRONIC<\/strong><\/p>\n<p><strong>Paulus Andi Nalwan, ST<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bila pada artikel jilid 1 saya menuliskan bagaimana cara mengendalikan relay menggunakan layanan Firebase dengan cara membuka database dan edit nilai logic yang ada di database maka pada artikel ini saya akan membahas bagaimana cara mengendalikan relay-relay tersebut dengan cara yang lebih mudah yaitu dengan menggunakan browser yang mengakses ke web application. Di sini akan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[340],"tags":[94,319,344,196,197,96,95],"class_list":["post-1596","post","type-post","status-publish","format-standard","hentry","category-mengendalikan-relay-dengan-menggunakan-dst-esp8266-dari-mana-saja-menggunakan-firebase","tag-arduino","tag-esp01","tag-esp12f","tag-esp32","tag-esp8266","tag-microcontroller","tag-mikrokontroler"],"_links":{"self":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1596"}],"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=1596"}],"version-history":[{"count":8,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1596\/revisions"}],"predecessor-version":[{"id":1633,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/posts\/1596\/revisions\/1633"}],"wp:attachment":[{"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/media?parent=1596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/categories?post=1596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/delta-electronic.com\/Design\/Hardwares\/wp-json\/wp\/v2\/tags?post=1596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}