Konfigurasi Firebase

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

Membuat Proyek Firebase

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. Pergi ke Konsol Firebase.
2. Klik + Create a project dan ikuti petunjuk untuk membuat proyek. Anda dapat memberi nama proyek apa pun yang Anda inginkan.
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 Basis Data Realtime

Menambahkan aturan aman ke Realtime Database sangat penting karena aturan yang tidak aman mengizinkan akses read dan write basis data kepada siapa pun di internet, yang memungkinkan mereka membaca dan mengubah apa pun di dalam basis data. 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 basis data 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. Disarankan untuk memperbarui aturan seperti di bawah ini secara berkala (minimal 3 bulan sekali) dengan mengunjungi halaman ini.
   Aturan terakhir diperbarui pada 1 September 2023 oleh 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 membutuhkan objek konfigurasi aplikasi web Proyek Firebase kita. 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 melihat objek JavaScript yang terlihat 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 databaseURL tidak tersedia, berarti Anda belum membuat instans Realtime Database. Buat instans tersebut melalui bagian Realtime Database, lalu periksa ulang untuk memastikan kolom databaseURL tersedia.

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

Menyiapkan Konfigurasi Firebase

Sekarang kita akan menambahkan konfigurasi firebase ke blog kita.

1. Buka Dasbor Blogger dan navigasikan ke Tata Letak.
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 Nama situs dan nilainya (konten di bawah tanda kutip) sebagai URL Situs 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:

   Nama situs	URL situs
   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 mengonfigurasi Proyek Firebase dengan blog Anda.