Google sheet, app script Tạo button Like giống facebook trên Web app

15/12/2023 giaoanppt

Giáo án link (giaoan.link) chia sẻ đến bạn một project về Google sheet, app script Tạo button Like giống facebook trên Web app. Với project này bạn dễ dàng bổ sung tính năng like như facebook vào các web app khác, nhằm đánh giá được mức độ tương tác của người dùng thông qua số like được ghi lại trên sheet. Bạn xem code ví dụ và video hướng dẫn bên dưới.

Xem thêm các project Google sheet khác:

Code file “Code.gs”

function doGet() {
 return HtmlService.createTemplateFromFile('index').evaluate()
   .setTitle('Like button')
   .setFaviconUrl('https://giaoan.link/ads/button-like.png')
   .addMetaTag('viewport', 'width=device-width, initial-scale=1')
   .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

let ws = SpreadsheetApp.getActiveSpreadsheet();
let ss = ws.getSheetByName("Data");  

function likeData(){
  let likeButton = ss.getRange('A2').getValue()
   likeButton++
   ss.getRange('A2').setValue(likeButton)
   return likeButton
}

function loadLike(){
  return ss.getRange('A2').getValue()
}

Code file “index.html”

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>NetmediaCCTV</title>
  <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
  <style>    
      .zoom{
        transform: scale(1.1);
      }
    </style>
</head>

<body>  
    <div class="container">
      <div class="text-center mt-5">
        <button type="button" onclick="likebutton()" id="likebutton" class="btn btn-primary position-relative rounded-pill">
          <i class="fa-solid fa-thumbs-up fa-2x"></i>
          <span class="position-absolute top-0 start-60 translate-middle badge rounded-pill bg-danger">
            <span id='Countlike'></span>           
          </span>
        </button>        
      </div>
    </div>

    <script>
      $(document).ready(()=>{
          google.script.run.withSuccessHandler(data=>{
            document.getElementById('Countlike').innerText = data
          }).loadLike()
          setFooter()
        });
    
    function likebutton(){
        document.getElementById('likebutton').disabled = true;
        document.getElementById("likebutton").classList.add('zoom');
      google.script.run.withSuccessHandler(data=>{
        document.getElementById('Countlike').innerText = data
        document.getElementById('likebutton').disabled = false;
        document.getElementById("likebutton").classList.remove('zoom');
      }).likeData()
    }
    </script>    
  </body>
</html>

Code file “Code.gs”

Code file “index.html”

Video hướng dẫn

giaoanppt