BLOGGER POST LIKE AND DISLIKE COUNT SYSTEM ON FIREBASE

Blogger Post Like And Dislike Count System On Firebase

ဒါကတော့ Blogger Post တခုချင်းစီအတွက် Like and Dislike 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. like=number0
       2. dislike=number0
    3. + Add field ကိုနှိပ်၍ dislike အတွက် field အသစ်ဖန်တီးပါ
33. saveကိုနှိပ်
34. Rules ကိုနှိပ်
35. အောက်က code များထဲမှကြိုက်နှစ်သက်ရာကို copy ယူ၍ထည့်ပါ

    1. Normal(ပုံမှန်)အကန့်အသန့်မရှိ vote ‌ပေးစေချင်ရင်

    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /posts/{postId} {
          allow read: if true;
          allow create, update: if request.resource.data.keys().hasOnly(["likes", "dislikes"])
                                && request.resource.data.likes is int
                                && request.resource.data.dislikes is int
                                && request.resource.data.likes >= 0
                                && request.resource.data.dislikes >= 0;
          allow delete: if false;
        }
      }
    }
    
    

    2. Local storage user IDဖြင့်ကန့်သတ်ခြင်း(user တစ်ဦးကိုတစ်ကြိမ်သာ vote လုပ်ခွင့် ပေးစေချင်ရင်)

    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /posts/{postId} {
          allow read: if true;
          allow create: if request.resource.data.keys().hasOnly(["likes","dislikes","voters"]);
          allow update: if request.resource.data.keys().hasOnly(["likes","dislikes","voters"]);
        }
      }
    }
    

    3. Authentication သုံး၍ Firebase Login ဖြင့်သာ vote လုပ်စေချင်ရင်လဲလုပ်လို့ရပါသည်။လုပ် ဆောင်ရန်အဆင့်ဆင့်ကိုလမ်းညွှန်ပြသပေးနိုင်ပါသည်။

36. Publish ကိုနှိပ်
37. 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='like-dislike' expr:data-post-id='data:post.id'>
  <button class='like-btn'><i class='fa fa-thumbs-up'/> <span class='like-count'>0</span></button>
  <button class='dislike-btn'><i class='fa fa-thumbs-down'/> <span class='dislike-count'>0</span></button>
</div>

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

<style>
.like-dislike {display: flex;justify-content: center;cursor: pointer;gap: 12px;margin-top: 15px;}
.like-dislike button {background: #f5f5f5;border: 2px solid #ddd;border-radius: 25px;padding: 8px 16px;font-size: 18px;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 6px;}
.like-dislike button:hover { background: #e9e9e9;border-color: #bbb;}
.like-btn {color: #2e7d32;}
.like-btn:hover {background: #c8e6c9;}
.dislike-btn {color: #c62828;}
.dislike-btn:hover {background: #ffcdd2;}
.like-count, .dislike-count {font-weight: bold;}
</style>
<script src='https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js'/>
<script src='https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js'/>
<script>
  //<![CDATA[ 
  const firebaseConfig = {
    apiKey: "Your_API_Key_Here",
    authDomain: "Your_Name_Here",
    projectId: "Your_ProjectId_Here",
    storageBucket: "Your_Link_Here",
    messagingSenderId: "Your_Id_Here",
    appId: "Your_App_Id_Here"
  };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();
//]]></script>

1. </body>ရှာပါ။တွေ့ပြီဆိုရင်အောက်က js code များထဲကမှကြိုက်နှစ်သက်ရာကို copy ယူ၍အဲဒီ</body> အပေါ်ကနေထည့်ပါ။
2. Normal(ပုံမှန်)အကန့်အသန့်မရှိ vote လုပ်စေချင်ရင်

<script>//<![CDATA[
document.addEventListener("DOMContentLoaded", () => {
    const postContainer = document.querySelector(".like-dislike");
    if (!postContainer) return;

    const postId = postContainer.getAttribute("data-post-id");
    const postRef = db.collection("posts").doc(postId);
    const likeBtn = postContainer.querySelector(".like-btn");
    const dislikeBtn = postContainer.querySelector(".dislike-btn");
    const likeCountEl = postContainer.querySelector(".like-count");
    const dislikeCountEl = postContainer.querySelector(".dislike-count");
    postRef.onSnapshot((doc) => {
      if (doc.exists) {
        likeCountEl.textContent = doc.data().likes || 0;
        dislikeCountEl.textContent = doc.data().dislikes || 0;
      } else {
        likeCountEl.textContent = 0;
        dislikeCountEl.textContent = 0;
      }
    });

    likeBtn.addEventListener("click", () => {
      db.runTransaction((t) => {
        return t.get(postRef).then((doc) => {
          if (!doc.exists) {
            t.set(postRef, { likes: 1, dislikes: 0 });
          } else {
            t.update(postRef, { likes: (doc.data().likes || 0) + 1 });
          }
        });
      }).catch((err) => console.error("Like error:", err));
    });
    dislikeBtn.addEventListener("click", () => {
      db.runTransaction((t) => {
        return t.get(postRef).then((doc) => {
          if (!doc.exists) {
            t.set(postRef, { likes: 0, dislikes: 1 });
          } else {
            t.update(postRef, { dislikes: (doc.data().dislikes || 0) + 1 });
          }
        });
      }).catch((err) => console.error("Dislike error:", err));
    });
  });
//]]>
</script>

3. Localstorage User ID ဖြင့်ကန့်သတ်ခြင်း(user တစ်ဦးကိုတစ်ကြိမ်သာ vote လုပ်ခွင့်ပြုခြင်း

<script>//<![CDATA[
  function getUserId() {
    let id = localStorage.getItem("likeUserId");
    if (!id) {
      id = "uid-" + Math.random().toString(36).substr(2, 9);
      localStorage.setItem("likeUserId", id);
    }
    return id;
  }
  const postDiv = document.querySelector(".like-dislike");
  const postId = postDiv.getAttribute("data-post-id");
  const postRef = db.collection("posts").doc(postId);
  function handleVote(type) {
    const userId = getUserId();

    db.runTransaction((t) => {
      return t.get(postRef).then((doc) => {
        let data = doc.data() || { likes: 0, dislikes: 0, voters: {} };

        if (data.voters , data.voters[userId]) {
          throw "Already voted";
        }

        if (type === "like") {
          data.likes++;
        } else {
          data.dislikes++;
        }

        data.voters[userId] = true;
        t.set(postRef, data);
      });
    }).catch((err) => console.log(err));
  }
  postRef.onSnapshot((doc) => {
    if (doc.exists) {
      const data = doc.data();
      document.querySelector(".like-count").textContent = data.likes || 0;
      document.querySelector(".dislike-count").textContent = data.dislikes || 0;
    }
  });
document.querySelector(".like-btn").addEventListener("click", () => handleVote("like"));
  document.querySelector(".dislike-btn").addEventListener("click", () => handleVote("dislike"));
//]]></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