ดึงข้อมูลโปรไฟล์ผู้ใช้งาน LINE จาก User ID ใน Google Sheets เรื่องง่ายๆที่คุณไม่รู้

เชื่อว่านักพัฒนาส่วนใหญ่ที่พัฒนาบริการร่วมกับ Messaging API, LINE MINI App, LIFF app, หรือ LINE Login จะมีการเก็บข้อมูลโปรไฟล์ผู้ใช้งาน LINE เพื่อนำไปอ้างอิง และ Google Sheets ก็เป็นเครื่องมือยอดนิยม ที่หลายคนเลือกใช้ในการเก็บข้อมูล

กรณีของ LINE OA หากที่ผู้ใช้งานได้มีการเพิ่มเพื่อนแล้ว ระบบจะสามารถดึงข้อมูลโปรไฟล์ของผู้ใช้งานจาก userId ผ่าน API ออกมาได้ ซึ่งจะมีข้อมูลตามนี้

{
  "displayName": "LINE taro",
  "userId": "U4af4980629...",
  "language": "en",
  "pictureUrl": "https://profile.line-scdn.net/ch/v2/p/uf9da5ee2b...",
  "statusMessage": "Hello, LINE!"
}

ตามรายละเอียดในข้อ 2.1 ของบทความด้านล่างนี้

รู้ครบจบในที่เดียวกับการดึง User Profile ผ่าน API ต่างๆใน LINE

โดยนักพัฒนาหลายคนเลือกที่จะเก็บข้อมูลข้างต้นลงใน Google Sheets ทั้งหมด โดยที่ไม่รู้ว่าข้อมูลทั้งหมดที่ไม่ใช่ userId จะสามารถเปลี่ยนแปลงได้ตลอดเวลา จึงทำให้การแสดงผลข้อมูลใน Google Sheets นั้นไม่อัปเดท

จริงอยู่ว่า userId สามารถนำไปใช้ดึงข้อมูลโปรไฟล์ของผู้ใช้ LINE ที่เป็นปัจจุบันออกมาได้ แต่ใน Google Sheets ก็ไม่มีสูตร(formula) ที่จะเอา userId ไปเรียก API ได้โดยตรง และนั่นก็คือที่มาของบทความนี้ ที่ผมจะพาทุกคนไปรู้จักเคล็ดลับในการสร้าง formula ของตัวเอง แบบที่ง่ายมากๆ และไม่มีค่าใช้จ่ายใดๆ…ถ้าพร้อมแล้ว เราไปเริ่มกันเลย!

1. สร้าง Spreadsheet ใน Google Sheets

เริ่มต้นให้ไปสร้าง spreadsheet ใหม่ขึ้นมา โดยสามารถพิมพ์หรือคลิก sheets.new ที่เว็บเบราเซอร์ของคุณ จากนั้นกำหนด column เพื่อแสดงผลข้อมูลโปรไฟล์ต่างๆของผู้ใช้งาน LINE โดยที่ column แรกให้ระบุค่า userId ของผู้ติดตาม LINE OA ของคุณลงไป

2. เพิ่มโค้ด Apps Script

ในหน้าของ Google Sheets ให้ไปเมนูด้านบน จากนั้นคลิก Extensions > Apps Script

เมื่อเข้าสู่หน้า Apps Script ให้ลบโค้ดทุกอย่างที่อยู่ใน Editor ออก แล้วให้คัดลอกโค้ดของฟังก์ชัน LINEPROFILE ด้านล่างนี้ไปใส่แทนที่

Get Jirawatee’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

ห้ามลืม: คุณจะต้องเอาค่า Channel Access Token จาก Messaging API Channel ของ LINE OA ของคุณไปแทนที่ YOUR-ใน CHANNEL-ACCESS-TOKEN ในโค้ด

function LINEPROFILE(userId, path) {
  try {
    // 1. กำหนด headers สำหรับการใช้งาน Messaging API
    var options = {
      "method" : "get",
      "headers" : {
        "Authorization": "Bearer YOUR-CHANNEL-ACCESS-TOKEN",
        "Accept": "application/json"
      },
      "muteHttpExceptions": true
    };

    // 2. ดึงข้อมูลโปรไฟล์จาก userId ผ่าน API
    var response = UrlFetchApp.fetch(`https://api.line.me/v2/bot/profile/${userId}`, options);

    if (response.getResponseCode() !== 200) {
      return "Error: HTTP " + response.getResponseCode() + " - " + response.getContentText();
    }

    var json = response.getContentText();
    var data = JSON.parse(json);
    
    // 2. ดึงค่าของ JSON object ตาม path ที่ต้องการ
    var pathArray = path.split('.');
    for (var i = 0; i < pathArray.length; i++) {
      data = data[pathArray[i]];
    }
    
    return data;
  } catch (error) {
    return "Error: " + error.toString();
  }
}

เสร็จแล้วให้กด Save ผ่านไอคอน floppy disk แล้วปิดแท็บ Apps Script ไปได้เลย

Save ด้วยการกด Ctrl + S บน Windows หรือ Cmd + S บน Mac ก็ได้ด้วยนะ

3. เรียกใช้งานฟังก์ชัน LINEPROFILE

กลับมาที่หน้า Google Sheets เราจะมาเรียกใช้ฟังก์ชัน LINEPROFILE ที่เราสร้างขึ้นมา โดยอ้างอิงโค้ดในขั้นตอนที่ 2 ฟังก์ชันนี้จะรับตัวแปร 2 ตัว

• userId ข้อมูลที่เตรียมไว้ใน column A ของ spreadsheet แล้ว
• path ชื่อ path ของ response ที่ได้มาจาก API ในขั้นตอนที่ 2

// ตัวอย่าง formula สำหรับดึงค่า displayName
=LINEPROFILE(A2, "displayName")

โปรดทราบ: เมื่อมีการเรียก formula ที่ต้องเชื่อมต่อกับ API ภายนอก Google Sheets จะแจ้งเตือนขอสิทธิ์จากเราก่อน ตรงนี้ก็ให้เรากด Allow access ไปครับ

เมื่อนำ formula นี้มาใช้กับทั้ง 4 path ตาม column ข้อมูลก็จะโผล่มาแล้วจ้า

Bonus: เทคนิคการแสดงรูป และ ลิงก์ไปเปิดภาพใหญ่

ใครที่ทำตามมาถึงขั้นตอนที่ 3 แล้ว ก็คงคิดว่าถ้า pictureUrl สามารถแสดงเป็นรูปออกมาได้เลยก็น่าจะดีใช่ไหมครับ เพราะบางครั้งเห็นรูปปุ๊บก็รู้ได้เลยว่าเป็นใคร หรือตัวตนเขาเป็นอย่างไร ดังนั้น ขั้นตอนนี้ผมจะมาบอกเทคนิคพิเศษที่ทำให้มันเป็นจริงได้

การแสดงรูปจาก URL

จากขั้นตอนที่ 3 เราจะเพิ่มฟังก์ชัน IMAGE โดยมันจะรับ URL ของรูป โดยเราจะเอาไปครอบฟังก์ชัน LINEPROFILE เดิมแบบนี้

=IMAGE(LINEPROFILE(A2, "pictureUrl"))

เพียงเท่านี้ รูปก็จะปรากฏขึ้นมา บอกเลยว่า easy มั๊กมาก

โหลดรูปไวกว่าด้วย Thumbnail

รูปที่เราดึงมาจาก pictureUrl นั้นจะเป็นรูปต้นฉบับที่ผู้ใช้อัปโหลดเข้ามา ซึ่งบางรูปคือใหญ่มาก ดังนั้นลองคิดดูว่าถ้า spreadsheet นี้มีข้อมูลผู้ใช้สัก 1,000 แถว มันก็น่าจะใช้เวลาแสดงรูปนานเลยใช่ไหมครับ แต่โชคเข้าข้างเรา เพราะ LINE เขาเตรียมรูปที่เป็น thumbnail มาไว้ให้เราเรียกใช้แล้ว

ดังนั้นเพื่อให้ตัว Google Sheets โหลดรูปได้เร็วขึ้นเราจะมาปรับ formula เป็นตามนี้

=IMAGE(LINEPROFILE(A2, "pictureUrl") & "/large")

โดยหน้าตาผลลัพธ์ที่ได้จะเหมือนเดิม แต่เวลาโหลดรูปจะเร็วกว่าเดิม โดยเฉพาะกรณีที่มีจำนวนแถวเยอะๆนี่เห็นชัดเลยว่าโหลดรูปเร็วขึ้นมากๆครับ

สร้างลิงก์ไปเปิดภาพใหญ่

รูปเล็ก โหลดเร็ว ก็จริง แต่บางรูปก็อยากดูชัดๆ ใหญ่ๆ จะได้ไหม? ได้สิครับ เพราะเทคนิคนี้เราจะใช้ฟังก์ชัน HYPERLINK สร้างลิงก์ให้กดไปเปิดรูปต้นฉบับได้ โดยตัวมันจะรับตัวแปร 2 ตัวคือ URL และ Object ตามตัวอย่างด้านล่างนี้

=HYPERLINK(LINEPROFILE(A2, "pictureUrl"), IMAGE(LINEPROFILE(A2, "pictureUrl") & "/large"))

คราวนี้หากเราไปคลิกที่รูปก็จะมี URL ต้นฉบับแสดงออกมาพร้อมให้เราคลิกได้แล้ว

เพอร์ฟอร์แมนซ์

ยั๊ง ยังไม่หมดอีกเหรอ 555 เทคนิคสุดท้ายละ สำหรับผู้อ่านที่เป็นนักพัฒนาทุกท่าน จะสังเกตว่า การทำลิงก์ก่อนหน้านี้ มันมีอะไรขัดใจอยู่ใช่ไหม…ใช่ครับ มันเรียก LINEPROFILE เพื่อไปเอา pictureUrl เดิม ออกมาถึง 2 ครั้ง ในตัวอย่างมี 4 คน ก็โหลด 8 ครั้ง แล้วถ้ามีแถวเป็นหลักพันหลักหมื่น นี่โหลดกระจาย กลายเป็นช้าไปอีก

ดังนั้นเราจะใช้ฟังก์ชัน LET ที่ใช้ประกาศตัวแปร และสามารถเรียกใช้ตัวแปรภายหลังได้ (โปรแกรมมิ่งใน formula มีอยู่จริง) โดยตัวมันจะรับ name, value, และ formula expression ตามนี้

=LET(pictureUrl, LINEPROFILE(A3, "pictureUrl"), HYPERLINK(pictureUrl, IMAGE(pictureUrl & "/large")))

เท่านี้ เราก็จะเรียก LINEPROFILE เพื่อดึงเอา pictureUrl เพียงครั้งแล้ว

Last but not least

ถึงแม้ Apps Script จะให้ใช้งานฟรี(ไม่มีเติมเงิน) แต่มันก็มีข้อจำกัดด้านจำนวนการ fetch URL อยู่ ซึ่งโควต้าการ fetch จะขึ้นอยู่กับประเภทของบัญชีผู้ใช้ที่เป็นเจ้าของ Apps Script นั้น โดยหากเป็น

• บัญชี Gmail จะ fetch ได้ 20,000 ครั้ง/วัน
• บัญชี Google Workspace จะ fetch ได้ 100,000 ครั้ง/วัน

ดังนั้นใครที่คิดจะนำไปใช้กับ spreadsheet ที่มีจำนวนแถวเยอะๆ ลองประเมินจำนวนครั้งที่ต้อง fetch ก่อนนะครับ รายละเอียดเกี่ยวกับโควต้าดูเพิ่มเติมได้ที่ลิงก์ด้านล่าง

Quotas for Google Services | Apps Script | Google for Developers

ปิดท้าย

จากการได้ศึกษาและเขียนบทความนี้ ผมพบว่า Google Sheets มันทรงพลังมาก ทำอะไรได้มากกว่าที่ผมคิด และเชื่อเหลือเกินว่าบทความนี้จะตอบโจทย์นักพัฒนา LINE ในบ้านเรา เพราะดูจากโพสใน Community จะเห็นได้เลยว่ามีคนใช้ Google Sheets ในการเก็บข้อมูลเยอะ หวังว่าเทคนิคที่ผมมาแบ่งปันในบทความนี้ จะเป็นประโยชน์กับทุกท่าน แล้วพบกันใหม่บทความหน้าครับ