Home
FIREBASE

BLOGGER POST CLAP COUNT SYSTEM ON FIREBASE

Blogger Post Clap Count System On Firebase


ဒါကတော့ Blogger Post တခုချင်းစီအတွက် Clap Count System တခုကိုဖန်တီးပြသပေးမှာဖြစ်ပါတယ်။အသုံးပြုလိုသူများအောက်ကလုပ်ဆောင်ပုံအဆင့်ဆင့်ကိုလိုက်ပါလုပ်ဆောင်လိုက်ရုံဖြင့်ကိုယ်တိုင်ကိုယ်ကျဖန်တီးပြီးသားဖြစ်သွားမှာပါ။



စတင်တည် ဆောက်ရန်အတွက် အောက်က link ကိုနှိပ်ပါ။


  1. https://firebase.google.com
  2. Get started in console (or) Go to console ကိုနှိပ်
  3. Create a new Firebase project ကိုနှိပ်
  4. Project name ကိုကြိုက်နှစ်သက်သလိုရေးပါ
  5. Continueကိုနှိပ်
  6. Continueကိုနှိပ်
  7. Continueကိုနှိပ်
  8. Select an account ကိုနှိပ်
  9. Create a new account ကိုနှိပ်
  10. firebase project name ထည့်ပေးပါ
  11. saveကိုနှိပ်
  12. l accept the Google Analytics terms ကိုအမှန်ခြစ်
  13. Create Projectကိုနှိပ်
  14. Continueကိုနှိပ်
  15. ➕ Add app ကိုနှိပ်
  16. </> ကိုနှိပ်
  17. My Web app နေရာမှာ project name ထည့်ရေးပေးပါ
    1. Also set up Firebase Hosting for this app ကိုအမှန်ခြစ်ပါ
    2. မိမိ project name မှန်မမှန်စစ်ဆေး ပေးပါ
  18. Register appကိုနှိပ်
  19. Use a <script> tag ရွေး
  20. Copy အိုင်ကွန်ကိုနှိပ်၍အဲဒီ SDK Code တွေကို copy ကူးယူထားပါ။ copy ကူးယူထား သော code များကိုတ နေရာတွင်ခဏမှတ်သားထားပါ။အရေးကြီးသည်ထို code များသည်မိမိ Template တွင်ထည့်သွင်းအသုံးပြုရမဲ့ code များဖြစ် သော ကြောင့်ပါ
  21. Nextကိုနှိပ်
  22. Nextကိုနှိပ်
  23. Continue to consoleကိုနှိပ်
  24. Menu ဘားကိုနှိပ်
  25. Build ကိုနှိပ်
  26. Firestore Database ကိုနှိပ်
  27. Create Databaseကိုနှိပ်
  28. Nextကိုနှိပ်
  29. Nextကိုနှိပ်
  30. Start in test mode ရွေး
  31. Create ကိုနှိပ်
  32. + Start collection ကိုနှိပ်
    1. Collection ID နေရာမှာpostsအဖြစ်သတ်မှတ်၍ရေးပါ
      1. Nextကိုနှိပ်
    2. Document ID နေရာမှာpostIdအဖြစ်သတ်မှတ်၍ရေးပါ။အောက်ကပုံစံအတိုင်း Field ကိုသတ်မှတ်၍ရေးပါ။
        FieldTypeValue
      1. Count=number0
  33. saveကိုနှိပ်
  34. Rules ကိုနှိပ်
  35. အောက်က code ကို copy ယူ၍ထည့်ပါ

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    match /posts/{postId} {
      allow read, write: if true; 
    }

    match /{document=**} {
      allow read, write: if false;
    }
  }
}

  1. Publish ကိုနှိပ်
  2. Data ကိုနှိပ်ပါ။ပြီးပြီ။HTML-CSS-JavaScript code များထည့်သွင်းရန်အသုံးပြုမည့် blog site သို့သွားပါ

  1. dashboard ထဲက Theme ကိုနှိပ်
  2. HTML🔻ကိုနှိပ်
  3. <data.post.body/> ရှာပါ(သတိ - template တခုနှင့်တစ်ခုမတူသဖြင့် <data.post.body/> သည်တခုထက်ပို၍ရှိနိုင်သည်။နောက်ဆုံး <data.post.body/> အောက်တွင် အောက်က code ကို copy ယူ၍ထည့်ပါ

<div class='wrap-center'>
<div class='post' expr:data-post-id='data:post.id'>
  <button aria-label='Clap' class='claps_button'>
    <!-- Clap SVG icon -->
    <svg class='clap-icon' fill='currentColor' viewBox='0 0 33 33'><path d='M28.86 17.342l-3.64-6.402c-.292-.433-.712-.729-1.163-.8a1.124 1.124 0 0 0-.889.213c-.63.488-.742 1.181-.33 2.061l1.222 2.587 1.4 2.46c2.234 4.085 1.511 8.007-2.145 11.663-.26.26-.526.49-.797.707 1.42-.084 2.881-.683 4.292-2.094 3.822-3.823 3.565-7.876 2.05-10.395zm-6.252 11.075c3.352-3.35 3.998-6.775 1.978-10.469l-3.378-5.945c-.292-.432-.712-.728-1.163-.8a1.122 1.122 0 0 0-.89.213c-.63.49-.742 1.182-.33 2.061l1.72 3.638a.502.502 0 0 1-.806.568l-8.91-8.91a1.335 1.335 0 0 0-1.887 1.886l5.292 5.292a.5.5 0 0 1-.707.707l-5.292-5.292-1.492-1.492c-.503-.503-1.382-.505-1.887 0a1.337 1.337 0 0 0 0 1.886l1.493 1.492 5.292 5.292a.499.499 0 0 1-.353.854.5.5 0 0 1-.354-.147L5.642 13.96a1.338 1.338 0 0 0-1.887 0 1.338 1.338 0 0 0 0 1.887l2.23 2.228 3.322 3.324a.499.499 0 0 1-.353.853.502.502 0 0 1-.354-.146l-3.323-3.324a1.333 1.333 0 0 0-1.886 0 1.325 1.325 0 0 0-.39.943c0 .356.138.691.39.943l6.396 6.397c3.528 3.53 8.86 5.313 12.821 1.353z' fill-rule='evenodd'/>
    </svg>
  </button>
  <span class='claps'>0</span>
</div>
</div>

  1. </body>ရှာပါ။တွေ့ပြီဆိုရင်အောက်က css & sdk & js code ကို copy ယူ၍အဲဒီ</body> အပေါ်ကနေထည့်ပါ။

<style>
:root {
--clap-size: 36px;
--clap-color: #ff8c42;
--clap-active-scale: 1.2;
--clap-duration: 180ms;}
.claps_button {display: inline-flex;align-items: center;justify-content: center;background: white;border: 1px solid #41B375;border-radius: 999px;padding: 8px;cursor: pointer;transition: transform 0.15s ease, box-shadow 0.2s ease;}
.claps_button:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transform: translateY(-1px);}
.clap-icon {width: var(--clap-size);height: var(--clap-size);color: var(--clap-color);transition: transform var(--clap-duration) ease, filter var(--clap-duration) ease;will-change: transform, filter;}
.claps {display: inline-block;align-items:center;justify-content:center; padding:5px;color:#444;transition: transform 0.2s ease, color 0.2s ease;}
.claps_button.clicked .clap-icon {transform: scale(var(--clap-active-scale));filter: drop-shadow(0 3px 8px rgba(255, 140, 66, 0.4));}
.claps_button.clicked + .claps {color: var(--clap-color);transform: translateY(-3px);}
@media (max-width: 480px) {
  :root {
  --clap-size: 28px;}
  .claps {
     font-size: 14px;}
}
.wrap-center{display:flex;justify-content:center}
</style>
<script type='module'>
//<![CDATA[
  import { initializeApp } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-app.js";
  import { getFirestore, doc, getDoc, setDoc, updateDoc, increment } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-firestore.js";

  const firebaseConfig = {
    apiKey: "Your_API_Key_Here",
    authDomain: "Your_AuthDomain_Here",
    projectId: "Your_ProjectId_Here",
    storageBucket: "Your_StorageBucket_Here",
    messagingSenderId: "hYour_MessagingSenderId_Here",
    appId: "Your_AppId_Here",
    measurementId: "Your_MeasurementId_Here"
  };

const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

document.querySelectorAll(".post").forEach(async post => {
  const postId = post.dataset.postId; 
  const button = post.querySelector(".claps_button");
  const display = post.querySelector(".claps");
    if (!postId) return;
  const ref = doc(db, "posts", postId);
  const snap = await getDoc(ref);
  if (snap.exists()) {
    display.innerText = "+" + snap.data().count;  
  } else {
    await setDoc(ref, { count: 0 });
    display.innerText = "+0";  
  }
  button.addEventListener("click", async () => {
    await updateDoc(ref, { count: increment(1) });
    const updatedSnap = await getDoc(ref);
    display.innerText = "+" + updatedSnap.data().count;  
    button.classList.add("is_clicked");
    setTimeout(() => button.classList.remove("is_clicked"), 800);
  });
});
//]]>
</script>

အောက်မှာပြသထား‌သောနေရာများတွင်မိမိ firebase console မှ copy ကူးယူထားသော SDK code များဖြင့်အစားထိုးပါ။ပြီးပြီ။

  1. apiKey:Your_API_Key_Here
  2. authDomain:Your_Name_Here
  3. projectId:Your_ProjectId_Here
  4. storageBucket:Your_Link_Here
  5. messagingSenderId:Your_Id_Here
  6. appId:Your_App_Id_Here
  7. measurementId:Your_MeasurementId_Here

Post a Comment