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 dijelaskan bagaimana membuat web application yang akan mengakses realtime database yang ada di firebase.

• 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
• Saat pertama kali mengakses, kita harus melakukan registrasi menggunakan email dan password seperti yang dijelaskan pada bagian pertama
• Saat sesudah terotentikasi maka kita dapat melihat tombol-tombol yang dapat mengubah status pada database dan juga mengubah GPIO dari DST-ESP8266
• DST-ESP8266 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
• Web application akan menampilkan status GPIO saat itu
• Kita dapat menambah dan mengurangi jumlah GPIO maupun board DST-ESP8266
• Saat kita login, kita juga dapat logout setiap saat dan harus login lagi apabila ingin mengakses web application tersebut lagi

Berikut adalah tampilannya di browser

Sebelum kita mulai membuat web application ada beberapa software sebagai berikut:

• Visual Studio Code
• Node.js
• Install firebase tools
  • Buka VS Code
  • Buka Terminal window dengan klik goto Terminal > New Terminal
  • Masuk ke path c:\ dengan tulis cd\ <enter>
  • Install npm versi terakhir dengan perintah:
    • npm install -g npm@latest
  • Install firebase tools dengan perintah
    • npm -g install firebase-tools
  • Firebase tools akan terinstal dan abaikan saja semua warning
  • Kita dapat memeriksa apakah instalasi berhasil dengan perintah
    • firebase –version
  • Pada awal biasanya kita akan memperoleh error sebagai berikut
  • Masuk ke path C: \Users\username\AppData\Roaming\npm path dan hapus firebase.ps1
  • Kembali masuk ke terminal dan ketik perintah
    • firebase –version
  • Berikut hasil yang akan diperoleh apabila instalasi sudah OK

Langkah-langkah dalam membuat web application

1. Tambahkan aplikasi pada project anda
   1. Masuk ke Firebase Project Console dan tambahkan application dengan klik +Add app 
   2. Pilih icon web app
   3. Tuliskan nama project dan centang “also setup firebase hosting for this app” lalu klik register app
   4. Copy dan simpan firebaseConfig dan simpan dalam text file karena nanti akan kita butuhkan
      •   apiKey: “AIzaSyBymKnrmZuG-4siTNcIruIMkN1VDVhfEtk”,
          authDomain: “dst-esp8266-2-ch-relay.firebaseapp.com”,
          databaseURL: “https://dst-esp8266-2-ch-relay-default-rtdb.asia-southeast1.firebasedatabase.app”,
          projectId: “dst-esp8266-2-ch-relay”,
          storageBucket: “dst-esp8266-2-ch-relay.appspot.com”,  messagingSenderId: “922868568040”,
          appId: “1:922868568040:web:ab8a365cfb0b0e2b799e5d”
   5. Klik next dan kemudian continue to console
2. Setting Firebase web application project
   1. Buat Folder Project
      1. Buat folder baru contohnya folder firebase-dst-esp8266-web-app
      2. Buka Visual Studio Code, pilih Open Folder dan arahkan ke firebase-dst-esp8266-web-app folder
      3. Masuk View dan pilih terminal untuk masuk ke layar terminal
   2. Firebase Login
      1. Tulis firebase login dan kemudian <Enter>, apabila sudah login maka akan tampil tulisan “already login as ….@gmail.com, namun apabila belum maka akan tampil pesan sbb:
      2. Kemudian akan muncul jendela seperti pada gambar berikut di layar browser
      3. Sign in ke akun google anda dan ijinkan Firebase CLI mengakses akun google anda
      4. Pada layar Visual Studio Code akan tampil pesan seperti pada gambar di bawah ini
3. Inisialisasi web application Firebase Project
   1. Saat sudah berhasil login lakukan inisialisasi firebase dengan perintah
      • firebase init
   2. Klik Yes saat tampil pesan seperti pada gambar ini
   3. Gunakan up down tombol untuk memilih ke atas dan ke bawah, tombol spasi untuk menandai pilihan dan pilih:
      • Realtime Database: konfigurasi rule security dari real time database
      • Hosting: konfigurasi file-file untuk firebase hosting 
   4. Pilih use an existing project
   5. Pilih project yang kita buat di bagian 1
   6. Klik enter saat ada pertanyaan “What file should be used for Realtime Database Rules?
   7. Klik enter untuk memilih public directory
   8. pilih no saat ditanya “single-page app (rewrite urls to /index.html)?”
   9. pilih no saat ditanya “set up automatic builds and deploys with GitHub?”
   10. Proses inisialisasi telah selesai saat tampil pesan seperti pada gambar berikut
   11. Pada tahap ini akan terbentuk file-file yang dibutuhkan pada folder project anda
   12. Agar file-file yang terbentuk ini bisa langsung ter install di hosting firebase anda, maka tuliskan perintah
       • firebase deploy
   13. Setelah tampil pesan deploy complete maka file-file tersebut telah siap di hosting. Untuk menguji hosting yang terbentuk bisa copy – paste URL yang terbentuk
   14. Akan tampil pesan seperti pada gambar di bawah ini yang menandakan bahwa hosting telah siap dengan file index.html standard
4. Create Firebase web application, 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
   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 di link berikut
   11. Buka file, select all, copy dan paste ke file index.js yang terbentu di Visual Studio Code dan klik save
   12. Download file favicon.jpg dan copy ke folder public
   13. Masuk ke layar terminal dan tulis perintah
       • firebase deploy
   14. 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.
   15. Pada tahap ini web application telah terbentuk dan siap digunakan. Klik url yang terbentuk dan akan tampil seperti berikut pada browser anda
   16. Klik on / off di GPIO12 dan GPIO13 lalu lihat reaksinya pada relay-relay di DST-ESP8266 Relay

Hal-hal yang dibutuhkan:

• DST-ESP8266 sebagai Sistem Minimum ESP8266
• Visual Studio Code
• Node.js
• file index.html
• file style.css
• file-file java script auth.js dan index.js

Disclaimer:

Artikel ini saya tulis dengan menggunakan sumber dari https://randomnerdtutorials.com/control-esp-gpios-firebase-web-app/ dengan gaya bahasa dan konstruksi hardware yang saya sesuaikan dengan produk kami.

DELTA ELECTRONIC

Paulus Andi Nalwan, ST