Beranda
Blogger
JavaScript

Penghitung Tampilan Realtime menggunakan Database Firebase

Admin
Realtime Views Counter using Firebase Database
Realtime Views Counter using Firebase Database | Fineshop Design

Setelah sekian lama, saya kembali dengan artikel berjudul "Penghitung Tampilan Realtime menggunakan Basis Data Firebase". Hari ini, saya akan membagikan Proyek Basis Data Firebase Realtime yang menghitung Tampilan Postingan atau peristiwa apa pun. Ini adalah proyek pertama yang saya coba dengan TypeScript dan Firebase v9.

Karena menggunakan Firebase Javascript SDK, ukuran bundelnya agak besar. Saya mencoba menggunakan Firebase Database REST API tetapi responsnya jauh lebih lambat daripada SDK, jadi saya harus menggunakan Javascript SDK untuk performa yang lebih baik.

Menggunakan View Counter

Anda dapat menggunakannya sebagai Penghitung Tampilan untuk postingan Anda hanya dengan menentukan jalurnya. Mari kita coba menambahkannya ke Situs Web Blogger.

Penting!
Sebelum kita mulai menambahkan kode dalam XML, saya sarankan Anda untuk mencadangkan tema Anda saat ini. Jika terjadi masalah, Anda dapat memulihkannya nanti.

  1. Pertama-tama, masuk ke Dasbor Blogger Anda.
  2. Pada Dasbor Blogger, klik Tema.
  3. Klik ikon panah bawah di samping tombol 'Sesuaikan'.
  4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
  5. Sekarang cari kode ]]></b:skin> dan tempel Kode CSS berikut tepat di atasnya.
    Jika templat Anda memiliki fitur mode gelap, dan Anda menginginkan warna yang berbeda saat mode gelap, Anda dapat menyesuaikan kode sesuai kebutuhan. Setiap templat dapat memiliki kelas mode gelap yang berbeda, jadi silakan sesuaikan. Anda dapat mengganti kelas yang ditandai dengan kelas mode gelap templat Anda.
    [data-path] {
  --text-color: #000;
  --text-color-dark: #fff;
  --icon-loading: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>");
  --icon-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>");
  --text-loading: "--- --";
  --text-loaded: attr(data-view);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.2);

  line-height: 1rem;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-color);
}
[data-path]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  -webkit-mask: var(--svg-icon);
  mask: var(--svg-icon);
  background: var(--text-color);
  --svg-icon: var(--icon-loading);
}
[data-path][data-view]::before {
  --svg-icon: var(--icon-eye);
}
[data-path]::after {
  content: var(--text-loading);
  opacity: 0.8;
}
[data-path][data-view]::after {
  content: var(--text-loaded);
}
.drK [data-path] {
  --text-color: var(--text-color-dark);
  --border-color: var(--border-color-dark);
}
  6. Langkah ini agak rumit karena Anda harus menemukan tempat yang tepat untuk menambahkan penghitung tampilan di templat Anda. Anda harus menemukan tempat yang tepat sesuai templat Anda dan menempelkannya di sana, misalnya: di atas <data:post.body/> 
    <div class='post-view' expr:data-increment='data:view.isPost ? &quot;1&quot; : &quot;false&quot;' expr:data-path='&quot;/BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id + &quot;/VIEWS&quot;'/>
  7. Sekarang tambahkan Javascript berikut tepat di atas tag </body>. Jika Anda tidak menemukannya, kemungkinan kode tersebut sudah diurai, yaitu &lt;/body&gt;. 
    <script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      selector: ".post-view",
      abbreviation: true
    });
    if (typeof infinite_scroll !== "undefined") {
      infinite_scroll.on("load", counter.init.bind(counter));
    }
  };
</script>
<script defer onload='viewCounterLoaded()' src='https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js'></script>
  8. Terakhir, Simpan perubahan dengan mengklik ikon .

Menggunakan Click Counter

<style>
  .click-counter::before {
    content: "0"
  }

  .click-counter[data-view]::before {
    content: attr(data-view);
  }
</style>

<button class='click-button'>Clicks (<span class='click-counter' data-path='/BLOG_0000/POST_0001/CLICKS' data-increment='false'></span>)</button>

<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      abbreviation: true
    });

    const clickButton = document.querySelector(".click-button");
    const clickCounter = document.querySelector(".click-counter");
    counter.addElement(clickCounter).then(function(counterElement) {
      clickButton.addEventListener("click", function() {
        counterElement.increment(1);
      });
    });
  };
</script>
<script defer="" onload="viewCounterLoaded()" src="https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js"></script>

Copyright (c):
fineshopdesign.com

Posting Komentar