สร้าง Track visits with Flag Counter สำหรับเว็บแอพ

bysemicon -
0


สร้างชีต ชื่อ Visits





โค้ดในฝั่ง Client-side

     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Track Visits</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }

    .loading {
      color: blue;
      font-size: 18px;
    }

    .result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }

    .flag {
      margin-top: 10px;
      width: 100px;
      height: auto;
    }
  </style>
</head>

<body>
  <h1>Track Visitor Information</h1>
  <p class="loading">Loading your IP information...</p>
  <div class="result"></div>
  <h1 class="counter"></h1>

  <script>
    // ตรวจสอบรูปแบบ IP Address
    function validateIP(ip) {
      const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
      if (ipPattern.test(ip)) {
        const parts = ip.split(".");
        return parts.every(part => parseInt(part, 10) >= 0 && parseInt(part, 10) <= 255);
      }
      return false;
    }

    // แปลง IP Address เป็นชื่อประเทศและรูปธง
    async function ipToCountry(ip) {
      if (!validateIP(ip)) {
        return { country: "Invalid IP Address", flag: null };
      }

      try {
        const response = await fetch('https://ipwhois.app/json/' + ip);

        if (response.ok) {
          const data = await response.json();
          console.log(data)
          if (data.success) {
            const country = data.country || "Country not found";
            const countryCode = data.country_code || null; // รหัสประเทศ
            const flag = countryCode
              ? data.country_flag
              : null; // URL ของรูปธง
            return { country, flag, countryCode};
          } else {
            return { country: "Country not found", flag: null };
          }
        } else {
          return { country: "API request failed", flag: null };
        }
      } catch (error) {
        return { country: `Error: ${error.message}`, flag: null };
      }
    }

    // ฟังก์ชันบันทึกข้อมูลประเทศ
    function saveVisit(ip, country, flag, countryCode) {
      const visitData = {
        ip: ip,
        country: country,
        flag: flag,
        countryCode: countryCode
      };

      google.script.run.withSuccessHandler((response) => {
        if (response.success) {
          document.querySelector('.counter').innerText = response.counter
          console.log("Visit saved successfully!");
        } else {
          console.error("Failed to save visit.");
        }
      }).saveVisit(visitData); // ส่งข้อมูล Object ไปที่ Google Apps Script
    }


    // ฟังก์ชันดึงข้อมูล IP และแสดงผล
    async function checkUserIP() {
      const loadingElement = document.querySelector('.loading');
      const resultElement = document.querySelector('.result');

      try {
        const response = await fetch('https://api.ipify.org?format=json');
        if (response.ok) {
          const data = await response.json();
          const userIP = data.ip;

          loadingElement.textContent = `Your IP: ${userIP}`;

          const { country, flag, countryCode } = await ipToCountry(userIP);
          resultElement.innerHTML = `Country: ${country}<br>`;

          if (flag) {
            const flagImg = document.createElement('img');
            flagImg.src = flag;
            flagImg.alt = `Flag of ${country}`;
            flagImg.className = 'flag';
            flagImg.style.width = '100px'; // ปรับขนาดให้พอดี
            flagImg.style.height = 'auto'; // คงอัตราส่วนของธง
            resultElement.appendChild(flagImg);
          }

          await saveVisit(userIP, country, flag, countryCode); // บันทึกข้อมูลไปที่ Google Apps Script
        } else {
          loadingElement.textContent = "Failed to fetch your IP address.";
        }
      } catch (error) {
        loadingElement.textContent = `Error: ${error.message}`;
      }
    }

    window.onload = checkUserIP;
  </script>
</body>

</html>


โค้ดในฝั่ง Google Apps Script (Server-side)

     
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

function saveVisit(visitData) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Visits"); // ชื่อชีตที่ต้องการบันทึก

  const { country, flag, countryCode } = visitData; // รับข้อมูลจากฝั่งไคลเอนต์

  const data = sheet.getDataRange().getValues(); // ดึงข้อมูลทั้งหมดในชีต
  let found = false;
  let counter = 0;
  for (let i = 1; i < data.length; i++) {
    if (data[i][0] === country) {
      // ถ้าประเทศนี้มีอยู่แล้ว ให้เพิ่มจำนวนในคอลัมน์สุดท้าย
      sheet.getRange(i + 1, 4).setValue(data[i][3] + 1); // คอลัมน์ที่ 4 สำหรับนับจำนวนการเยี่ยมชม
      counter = sheet.getRange(i + 1, 4).getValue()
      found = true;
      break;
    }
  }

  if (!found) {
    // ถ้าไม่มีประเทศนี้ในชีต ให้เพิ่มแถวใหม่
    sheet.appendRow([country, flag, countryCode, 1]); // เพิ่มข้อมูลในคอลัมน์ที่ 3 (countryCode)
    counter = 1;
  }

  return { success: true, counter: counter }

}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า