Cara Setting Counter View Postingan Plus UI v3 via Firebase

Beberapa plugin dalam template bergantung pada Layanan Firebase, seperti Realtime Database untuk Penghitung Tampilan Postingan, dll. Oleh karena itu, jika Anda ingin menggunakan salah satu plugin ini, Anda perlu memiliki Proyek Firebase yang dikonfigurasi dengan template blog.

Membuat Firebase Project

Jika Anda sudah memiliki Proyek Firebase yang dibuat sebelumnya, Anda dapat menggunakannya dan melewati langkah-langkah untuk membuat yang baru yang dijelaskan di bawah ini.

1. Buka Firebase Console.
2. Klik + Create a project dan ikuti petunjuk untuk membuat proyek. Anda dapat memberi nama proyek sesuai keinginan.
3. Setelah proyek dibuat, navigasikan ke Project settings.
4. Di bawah General > Your apps, klik </> Web dan ikuti petunjuk untuk membuat aplikasi Web dalam proyek tersebut.

Anda sekarang telah membuat Proyek Firebase untuk Aplikasi Web.

Menyiapkan Aturan Realtime Database

Menambahkan aturan aman ke Realtime Database sangat penting karena aturan yang tidak aman mengizinkan akses ke database read dan write siapa pun di internet, yang memungkinkan mereka untuk membaca dan mengubah apa pun dalam database. Oleh karena itu, kita perlu menambahkan batasan untuk memastikan seseorang tidak dapat membaca atau mengubah data tanpa izin. Ikuti langkah-langkah di bawah ini untuk melindungi database Anda.

1. Buka Firebase Project > Realtime Database.
2. Beralih ke tab Rules
3. Tempel JSON berikut dengan membuat perubahan yang sesuai di editor aturan dan klik Publish.

   Peringatan!
   Aturan yang diberikan dapat diperbarui di masa mendatang oleh tim kami jika ditemukan masalah kritis atau plugin baru tersedia. Sebaiknya Anda memperbarui aturan seperti di bawah ini secara berkala (minimal sebulan sekali) dengan mengunjungi halaman ini.
   Rules was last updated on 1st September, 2023 by Deo Kumar.

   {
     "rules": {
       ".write": false,
       ".read": false,
       "blogs": {
         "$blog_id": {
           ".validate": "$blog_id.matches(/^\\d{18,22}$/) && ($blog_id === '000000000000000000' || $blog_id === '0000' || $blog_id === '0000')",
           "posts": {
             "$post_id": {
               ".validate": "$post_id.matches(/^\\d{18,22}$/)",
               "views": {
                 ".read": true,
                 ".write": "newData.exists()",
                 ".validate": "newData.isNumber() && newData.val() % 1 === 0 && newData.val() === (data.exists() ? data.val() + 1 : 1)"
               }
             }
           }
         }
       }
     }
   }

   {
     "rules": {
       ".read": true,
       ".write": true
     }
   }

Mendapatkan Konfigurasi Firebase

Sekarang kita memerlukan objek konfigurasi aplikasi web Firebase Project. Ikuti langkah-langkah berikut untuk menemukannya.

1. Navigasi ke Firebase Project Anda.
2. Buka Project Settings.
3. Di bawah tab General > Your apps pilih Aplikasi web Anda dan klik Config. Anda akan dapat melihat objek Javascript yang tampak seperti berikut:

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

   Jika kolom tersebut databaseURL tidak tersedia, berarti Anda belum membuat instance Realtime Database. Buat instance tersebut melalui bagian Realtime Database lalu periksa kembali untuk memastikan kolom tersebut databaseURL tersedia.

Biarkan tab browser tetap terbuka karena kami memerlukan informasi tentang objek ini.

Menyiapkan Konfigurasi Firebase

Sekarang kita akan menambahkan konfigurasi firebase ke blog kita.

1. Buka Blogger dashboard dan navigasikan ke Layout.
2. Temukan gadget Daftar Tautan dengan judul Firebase Configurations (jika Anda belum mengganti namanya), klik tombol Edit.
3. Buat atau edit tautan yang ada untuk setiap pasangan kunci-nilai, kuncinya sebagai Site name dan nilainya (konten di bawah tanda kutip) sebagai Site URL masing-masing seperti yang ditunjukkan di bawah ini.

   const firebaseConfig = {
     apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx",
     authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
     databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
     projectId: "xxxxxxxxxxxxx",
     storageBucket: "xxxxxxxxxxxxx.appspot.com",
     messagingSenderId: "000000000000",
     appId: "1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx",
     measurementId: "G-XXXXXXXXXX",
   };

   Tautan Anda akan terlihat seperti yang ditunjukkan di bawah ini:

   Site name	Site URL
   apiKey	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxx
   authDomain	xxxxxxxxxxxxx.firebaseapp.com
   databaseURL	https://xxxxxxxxxxxxx.firebaseio.com
   projectId	xxxxxxxxxxxxx
   storageBucket	xxxxxxxxxxxxx.appspot.com
   messagingSenderId	000000000000
   appId	1:000000000000:web:xxxxxxxxxxxxxxxxxxxxxx
   measurementId	G-XXXXXXXXXX

4. Simpan gadget untuk menerapkan perubahan.

Selesai! Anda telah berhasil mengonfigurasikan Proyek Firebase dengan blog Anda.