POST LIKE AND DISLIKE SYSTEM ON GOOGLE SHEET

Post Like And Dislike System On Google Sheet

ဒါကတော့ blog site မှာ blog post တခုရဲ့အဆင့်ကို user ကကြယ်များဖြင့်အဆင့်သတ်မှတ်ချင်ရင်သတ်မှတ်လို့ရအောင်ဖန်တီးထားတဲ့ Star Rating System ပါ။ထို Star Rating System တခုကို Google Sheet ဖြင့်ဖန်တီးပြသွားမှာဖြစ်ပါတယ်။

စတင်ဖန်တီးရန် အောက်က link ကို copy ယူ၍ Browser မှာဖွင့်ပါ။(မှတ်ချက် → Mobile ဖုန်းဖြင့်တည်ဆောက်ပါက Browser Desktop site သို့ ပြောင်းပါ)

https://docs.google.com/spreadsheets/u/0/

1. Start a new spreadsheet ➕ ကိုနှိပ်ပါ
2. Untitled Spreadsheet နေရာမှာ → Project name သတ်မှတ်၍ရေးပါ
3. Sheet1 ကိုနှိပ် → Rename ကိုနှိပ် → Sheet name သတ်မှတ်၍ရေးပါ(သတိ → စာလုံး(space)မခြားရပါ)
4. line 1 ကို → Header အဖြစ်သတ်မှတ်ပါ။အောက်ကနမူနာကြည့်၍ရေးပါ

	A	B	C	D	E	F	G	H	I	J	K	L
1	Post ID	Like	Dislike
2

1. 
   save ဖြစ်တဲ့ထိစောင့်ပါ။

1. Extensions ကိုနှိပ်
2. Apps Script ကိုနှိပ်
3. code.gs တွင် အောက်က code ကို copy ယူထည့်

function doGet(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Your_Sheet_Name");
  var action = e.parameter.action;
  var postId = e.parameter.postId;
  var data = Sheet.getDataRange().getValues();
  var rowIndex = -1;
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == postId) {
      rowIndex = i + 1;
      break;
    }
  }
  if (rowIndex == -1) {
    sheet.appendRow([postId, 0, 0]);
    rowIndex = sheet.getLastRow();
  }
  if (action == "like") {
    var current = sheet.getRange(rowIndex, 2).getValue();
    sheet.getRange(rowIndex, 2).setValue(current + 1);
  } else if (action == "dislike") {
    var current = sheet.getRange(rowIndex, 3).getValue();
    sheet.getRange(rowIndex, 3).setValue(current + 1);
  }
  var likeCount = sheet.getRange(rowIndex, 2).getValue();
  var dislikeCount = sheet.getRange(rowIndex, 3).getValue();
  var result = {
    postId: postId,
    likes: likeCount,
    dislikes: dislikeCount
  };
  return ContentService.createTextOutput(JSON.stringify(result))
  .setMimeType(ContentService.MimeType.JSON);
}

1. Your_Sheet_Name နေရာတွင်မိမိ SheetName ထည့်ပေးပါ

1. 
   ကိုနှိပ်။save ဖြစ်တဲ့ထိစောင့်ပါ

1. save ဖြစ်သွားပြီဆို →Deploy ကိုနှိပ်ပါ
2. New deployment ကိုရွေးပါ
3. ⚙️ ကိုနှိပ်ပါ။
4. Web app ကိုရွေးပါ
5. New description နေရာတွင်မိမိ → sheet name ရေးထည့်ပါ
6. Execute as နေရာမှာ မိမိ gmail မှန်မမှန်စစ်ပါ
7. Who has access နေရာတွင် → Anyone ကိုရွေးပါ
8. Deploy ကိုနှိပ်
9. Authorize access ကိုနှိပ်
10. sign in လုပ်ဖို့မိမိ → gmail account ကိုနှိပ်
11. Advanced ကိုနှိပ်
12. Go to Untitled project (unsafe). ကိုနှိပ်
13. Allow ကိုနှိပ်
14. Web app link ကို → copy ယူ၍မှတ်သားထားပါ။‌အောက်ကပုံကိုကြည့်ပါ။Template တွင်ထည့်သွင်းအသုံးပြုရမည်ဖြစ်သည်

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

<div class='vote-box' expr:id='"vote-box-" + data:post.id'>
  <button class='vote-btn like' expr:onclick='"vote(\"like\", \"" + data:post.id + "\")"'><i class='fa fa-thumbs-up'/>
    <span class='vote-count' expr:id='"like-count-" + data:post.id'>0</span>
  </button>
  <button class='vote-btn dislike' expr:onclick='"vote(\"dislike\", \"" + data:post.id + "\")"'><i class='fa fa-thumbs-down'/>
    <span class='vote-count' expr:id='"dislike-count-" + data:post.id'>0</span>
  </button>
</div> 

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

<script>//<![CDATA[
  const SCRIPT_URL = "Your_Web_App_Link_Here"; 
  function vote(action, postId) {
    fetch(`${SCRIPT_URL}?action=${action}&postId=${postId}`)
      .then(res => res.json())
      .then(data => {
document.getElementById("like-count-" + postId).innerText = data.likes;
document.getElementById("dislike-count-" + postId).innerText = data.dislikes;
      });
  }
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".vote-box").forEach(box => {
      const postId = box.id.replace("vote-box-","");
      fetch(`${SCRIPT_URL}?action=get&postId=${postId}`)
        .then(res => res.json())
        .then(data => {
document.getElementById("like-count-" + postId).innerText = data.likes;
document.getElementById("dislike-count-" + postId).innerText = data.dislikes;
        });
    });
  });
//]]></script>

1. Your_Web_App_Link_Here‌ နေရာမှာမိမိ Web App Link ဖြင့်အစားထိုးပါ။
2. save ကိုနှိပ်ပြီးပြီ