Tech-Verse 2026 งาน Tech Conf ที่ใหญ่ที่สุดของ LY Corporation บริษัทแม่ของ LINE Thailand

งาน Tech-Verse 2026 เป็นงาน Tech Conference ประจำปีของบริษัท LY Corporation (LINE และ Yahoo! JAPAN) โดยหลังจากทั้ง 2 บริษัทควบรวมกัน ก็ได้จัดงานนี้ครั้งแรกในปี 2022 และจัดต่อเนื่องมาเรื่อยๆ โดยวัตถุประสงค์ในการจัดงานก็เพื่อแสดงวิสัยทัศน์ทิศทางเรื่องเทคโนโลยีของบริษัท การแลกเปลี่ยนความรู้ Best practice ต่างๆระหว่างบริษัทในเครือทั้งฝั่ง ญี่ปุ่น เกาหลี ไต้หวัน เวียดนาม และ ไทย

ส่วนตัวผมเคยมาร่วมงานนี้ในปี 2024 ซึ่งตอนนั้นยังเป็นงานที่จัดภายในออฟฟิศ และให้พนักงานเข้าร่วมเท่านั้น แต่ปีนี้ทาง LY ได้เลือกไปจัดงานที่ Akasaka Intercity Conference ซึ่งเป็นฮอลจัดงานที่ใหญ่และอลังการมาก แถมมีการถ่ายทอดสดให้คนที่สนใจได้รับชมผ่านช่องทางออนไลน์ด้วย โดยในงานวันนั้นมีผู้เข้าร่วมกว่าพันคน ทั้งพนักงานในเครือ และแขกที่ทาง LY เชิญมา

สำหรับประเทศไทย ปีนี้ผมมีเพื่อนจากทีม Engineer ของ LINE Thailand อีก 13 คน ร่วมทริปมาทำภารกิจด้วยกัน โดยภารกิจหลักของเราคือ มาเรียนรู้สิ่งที่กำลังจะเกิดขึ้นในอนาคต นำความรู้ใหม่ๆกลับไปใช้กับงาน รู้จักกับเพื่อนต่างชาติต่างทีมให้มากที่สุด เนื่องจากทุกคนมีโอกาสที่จะได้ร่วมงานกับพนักงานจากประเทศอื่นๆในเครือ ในการพัฒนาบริการที่เอาไปใช้กับอีกหลายประเทศ

โดยเมื่อเดินทางมาถึงงาน Check-in แล้วจะได้รับ ป้ายชื่อและถุงยังชีพ ภายในถุงจะมีสติ๊กเกอร์ของงาน, ช็อคโกแลต, สมุดสะสมสติ๊กเกอร์, และสติ๊กเกอร์ที่เอาไว้แลกกับคนอื่น โดยแต่ละคนจะได้สติ๊กเกอร์สำหรับแลกไม่เหมือนกัน

ผมว่าไอเดียการสะสมสติ๊กเกอร์นี่เจ๋งดีนะ คือเราต้องสะสมสติ๊กเกอร์ที่แตกต่างกันให้ได้ครบ 12 ตัว จึงจะสามารถนำไปแลก Special swag ได้ แล้วคือของที่ให้แลกมันก็พรีเมี่ยมด้วยไง อย่างผมนี่เล็งร่มไว้เลย เพราะเป็นร่มกัน UV แถมเวลาเก็บก็มีปลอกกันน้ำด้วย

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

บริเวณรอบฮอลจะมีบูธที่แสดงเทคโนโลยีจากหลายๆทีมกว่า 20 บูธ โดยจะมีทั้งเทคโนโลยีที่เปิดให้ใช้งานแล้ว และยังอยู่ในขั้นทดลอง แต่ละบูธจะมี Engineer ที่พัฒนายืนให้ความรู้อยู่ประจำบูธ ใครสนใจเรื่องอะไร เข้าไปคุยได้เลย ทั้งความรู้และ Insight คืออย่างลึก ลึกระดับแกนโลกอะบอกเลย ถถถ

มาถึงเนื้อหาของงานบ้าง หัวข้อที่เขาขึ้นมาแชร์ในปีนี้จะถูกแบ่งออกเป็น 2 Tracks คือ AI และ Core Technology โดยในบทความนี้ ผมจะขอหยิบหนึ่ง session ในช่วงเช้า และอีกหนึ่ง session ในช่วงบ่ายที่ผมชอบมาเล่าสู่กันฟัง โดยเริ่มกันที่ Keynote ในช่วงเช้า

Keynote

Speaker ของ session นี้จะมี 2 คน คือ Park Euivin (CTO) และ Namiki Ryouta (
AI CBU Lead) ขึ้นมาพูดถึงวิสัยทัศน์ของ LY Corporation ในการผสานเทคโนโลยี AI เข้ากับชีวิตประจำวันและการทำงานอย่างเต็มรูปแบบ โดยเนื้อหาจะแบ่งเป็น 3 เรื่อง

1. Agent I บริการ AI เพื่อผู้ใช้และธุรกิจ

LY Corporation ตั้งเป้าที่จะนำจุดเด่นของบริการที่มีผู้ใช้อย่างกว้างขวางอย่าง LINE ที่มีผู้ใช้มากกว่า 100 ล้านคน รวมถึงบริการ Yahoo Search, สื่อ, อีคอมเมิร์ซ และการชำระเงิน มาเปลี่ยนให้เป็นระบบ AI Agent โดยจะแบ่งออกเป็น 2 ส่วน

Agent I (สำหรับบุคคลทั่วไป): จะไม่ได้เป็นเพียงแค่การถามตอบ แต่เป็นการเชื่อมโยง AI Agent หลายตัวเข้าด้วยกันเพื่อเข้าใจความต้องการของผู้ใช้ เช่น หากคุณและเพื่อนเสนอวันที่สะดวกจัดงานปาร์ตี้ในห้องแชท แต่เพื่อนตอบช้า ตัวเอเจนต์จะทำการส่งแจ้งเตือน ปรับตารางเวลา และลงทะเบียนลงในปฏิทินให้โดยอัตโนมัติเมื่อได้ข้อสรุป

Agent I for Business (สำหรับธุรกิจ): จะเปิดระบบให้กับ LINE Official Account ซึ่งมีอยู่กว่า 100 ล้านบัญชี โดยเพิ่ม AI Mode ที่ให้ธุรกิจต่างๆ สามารถพัฒนาฟังก์ชัน AI เข้ากับบริการของตัวเองได้ทันที เช่น ระบบ AI สำหรับจองโต๊ะในร้านอาหารผ่าน LINE ที่สามารถเสนอช่วงเวลาอื่นได้อย่างเหมาะสม หากเวลาที่ลูกค้าต้องการเลือกมีคนจองเต็ม

2. Platform เบื้องหลัง Agent I

เทคโนโลยีเบื้องหลัง Agent I ที่พัฒนาขึ้นเพื่อเปลี่ยนผ่าน AI สู่ระดับการใช้งานในองค์กร ว่าเขาโฟกัสเรื่องอะไร ใช้เครื่องมือตัวไหน และเทคนิคอะไรบ้าง

พัฒนาง่ายและเร็ว (Democratized Development): มี “Agent Builder” ให้พนักงานทุกคนสามารถสร้างและเปิดใช้งาน Agent ได้ทันที, มี “MCP Hub” ที่เชื่อมโยงระบบความปลอดภัยและการเรียกใช้ข้อมูลภายในบริษัท โดยที่ไม่ต้องเขียนโค้ด แถมมี “Agent Router” ระบบวิเคราะห์ความต้องการของผู้ใช้ เพื่อเลือกส่งต่องานไปยัง Agent ที่เหมาะสมที่สุด

รู้ใจผู้ใช้งาน (High Precision Personalization): มี “Long-term Memory” สำหรับจดจำข้อมูลสำคัญของผู้ใช้ โดย AI จะประเมินเองว่าข้อมูลส่วนไหนควรจำ อัปเดต หรือลบทิ้ง และทำงานร่วมกับ “Memory Aggregator” ที่มีข้อมูลโปรไฟล์ของผู้ใช้ เพื่อสร้างเป็น Context ที่ส่งต่อให้โมเดลประมวลผลได้แม่นยำขึ้น

ควบคุมและความปลอดภัย (Governance & Safety): มี “Model Routing” ที่เลือกใช้โมเดล AI ให้เหมาะสมกับงาน เช่น ใช้โมเดลขนาดเล็กในเครื่องเพื่อความเป็นส่วนตัว หรือโมเดลขนาดใหญ่สำหรับงานซับซ้อน ทั้งนี้เพื่อช่วยจำกัดต้นทุนและเพิ่มความเร็วในการใช้งาน มี “Agent Catalog” ที่มาคุมการทำงานของ Agent ทุกตัวที่อยู่ในกระบวนการ และมี “5-Layer Guardrails” ในการคัดกรองเนื้อหาที่ไม่เหมาะสม

3. AX (AI Transformation)

หัวข้อนี้เขาเล่าถึงกลยุทธ์การเปลี่ยนผ่านองค์กรขนาดใหญ่ในยุค AI จากขั้นเตรียมการและเพิ่มทักษะ (Build & Enable), ขั้นตอน Execution, และการวัดผล

การเตรียมระบบและบุคลากร: มีการปรับปรุงระบบข้อมูลและเชื่อมต่อผ่าน API และ MCP พร้อมทั้งการ Training พนักงานให้เป็น “AI-Native Human Workforce”

การจัดการ Legacy Services: มีการปรับปรุงระบบเก่าให้อยู่ในรูปแบบที่ AI เข้าใจได้ง่ายขึ้น ส่งผลให้โค้ดใหม่ที่สร้างโดย AI ในระบบเดิมเพิ่มเป็น 20% แล้ว

การวัดผล: ใช้ “Production Lead Time” (เวลาในกระบวนการทำงาน) เป็นตัวชี้วัดหลัก และขยายการใช้ AI ไปยังส่วนงานต่างๆ ซึ่งช่วยลดเวลาทำงานโดยรวมลงไปประมาณ 13% แล้ว

Cloud และ Security: มีการเปิดใช้งาน Private Cloud อย่าง “Flava” ภายในองค์กร และเริ่มใช้ AI Agent ในการควบคุมความปลอดภัย

ตัดภาพมาช่วงพักเที่ยง ทางผู้จัดงานก็มีข้าวกล่องที่มีเมนูให้เลือกทานได้ และหยิบไปทานได้แบบฟรีๆเลย พร้อมน้ำดื่มที่สกรีนชื่องานบนตัวขวดสวยงาม

หลังจากนั้น ด้วยความโลภเข้าครอบงำ กลัวจะมีคน Redeem ร่มไปจนหมด ผมเลยรีบพุ่งไปหาคนคุย เพื่อแลกสติ๊กเกอร์ให้ครบในเที่ยงวันให้ได้ ความพยายามอยู่ที่ไหน ความพยายามก็อยู่ที่นั่นแหละ ^^ ในที่สุดผมก็ได้มันมาสมใจปองก่อนไปเข้า session ช่วงบ่าย

Good Design Pays Dividends: The Evolution of LINE API Gateway Handling 30B Daily Requests

Session นี้อยู่ใน Core Technology Track ที่ผมเล็งไว้ตั้งแต่ก่อนบินมาญี่ปุ่น เพราะเกี่ยวข้องกับ LINE API โดย Speaker ที่ขึ้นพูดมาจากบริษัท LINE Plus (บริษัท LINE ที่เกาหลีใต้) ซึ่งมีคุณ Gihwan Kim (Developer Platform Dev) และคุณ Yejin Shin (Developer Platform Dev)

เนื้อหาจะพูดถึง LINE API Gateway ที่ต้องรับ traffic มหาศาลกว่า 30,000 ล้าน requests ต่อวัน! ทีมที่พัฒนา LINE Channel Platform ได้แชร์เรื่องการปรับจูนระบบจากที่เคยมีปัญหาคอขวดและระบบล่มบ่อยๆ จนกลายมาเป็นระบบที่เสถียรได้ โดยปัญหาหลักๆที่เจอจะมีอยู่ 2 เรื่อง

Cascading Failures: แต่ก่อนระบบเขารันบน Tomcat และ Spring Web ซึ่งเป็นแบบ synchronous (1 request ต่อ 1 thread) เวลาบริการปลายทาง (upstream) ทำงานช้า ตัว thread ก็จะค้างจนเต็ม ส่งผลให้เซิร์ฟเวอร์ไม่สามารถรับ request ใหม่ได้และล่มในท้ายที่สุด

The Bottleneck: เวลาทีมอื่นต้องการเพิ่ม API แม้จะเป็นเพียงโค้ดง่ายๆ ทีม Gateway ก็ต้องมาคอยเขียนโค้ด Java เอง ต้องนัดประชุมหลายรอบเพื่อเข้าใจรายละเอียดงาน ทำการรีวิว PR และต้องมาเขียน Wiki เองด้วยมือ ซึ่งใช้เวลาทำงานเป็นสัปดาห์ แถมบางครั้งโค้ดที่อัปเดตไปแล้วก็ไม่ตรงกับ Wiki

เพื่อแก้ปัญหาทั้งหมด ทีมเขาจึงตัดสินใจสร้าง Moon ซึ่งเป็น API Gateway Framework ของตัวเองขึ้นมา โดยตัวมันจะมีความสามารถหลัก 4 เรื่อง

• Declarative: ใช้ YAML กำหนด API Gateway แทนการเขียนโค้ด Java
• Dynamic Reconfiguration: สามารถปรับเปลี่ยนโครงสร้างเส้นทางหรือตั้งค่าระบบได้ทันทีในแบบ real-time โดยไม่ต้อง restart server
• Extensible: ออกแบบให้สามารถเพิ่มฟังก์ชันหรือฟีเจอร์ใหม่ๆ ได้ง่าย
• High Performance: รันบน Armeria (asynchronous framework ที่ LINE พัฒนาขึ้นเอง) ช่วยตัดปัญหาเรื่อง thread ค้าง และป้องกันการล่มแบบโดมิโนได้

ช่วงท้ายเขาได้โชว์ผลลัพธ์จากการใช้ Moon Framework ที่พัฒนาขึ้นมา ว่ารองรับ traffic ได้มากกว่าเดิมถึง 3 เท่า และหาก upstream ทำงานช้าลง ระบบก็จะไม่ล่ม แถมข้อมูลของ API ทั้งหมดยังถูกดึงจาก YAML ไปอัปเดท API Docs ให้อัตโนมัติ และเนื่องจากข้อมูลทุกอย่างอยู่ในรูปแบบ YAML ที่มีโครงสร้างชัดเจน ทีมเขาจึงสามารถแปลงข้อมูลนี้ไปเป็น Markdown เพื่อป้อนให้ Gemini ช่วยตอบคำถามของนักพัฒนาเกี่ยวกับการใช้ API ได้อย่างรวดเร็ว นอกจากนี้ยังสร้าง MCP server เพื่อรองรับการเขียนโค้ดร่วมกับ AI อย่าง Claude Code ให้อ่านข้อมูล API specs และเขียนโค้ดได้อย่างแม่นยำอีกด้วย

สรุปได้ว่า การออกแบบระบบที่ดีด้วยการจัดการข้อมูลให้มีโครงสร้างที่ชัดเจน (Structured Specification) ไม่เพียงแต่ช่วยลดขั้นตอนการทำงานและเพิ่มความเสถียรให้กับระบบระดับ 3 หมื่นล้าน requests/day เท่านั้น แต่ยังช่วยสร้างโอกาสใหม่ ๆ ในการนำ AI เข้ามาเพิ่มประสิทธิภาพการทำงานได้อย่างมหาศาลครับ

ช่วงท้ายมีพิธีมอบรางวัล Best Speaker / Best Author ให้กับ Speaker ที่ได้รับคะแนนโหวตมากที่สุด ซึ่งพี่บอล CTO จากไลน์ประเทศไทยก็เป็นหนึ่งในผู้ที่ได้รับเชิญขึ้นไปมอบรางวัลนี้

ตามด้วย After Party ที่เสิร์ฟอาหารแบบจัดเต็ม โดย Gimmick ปีนี้คือมีเบียร์จากทุกประเทศในกลุ่ม LY ให้เลือกดื่ม ซึ่งก็มีเบียร์สิงห์จากไทยด้วย งานนี้กินกันแบบอิ่มจังตังค์อยู่ครบ(เสียงในหัว)

ความประทับใจปิดท้ายของการร่วมงาน Tech-Verse ในปีนี้ คือการได้เจอกลุ่ม Engineer ชาวไทยที่ทำงานที่ LY ทั้ง ติ๊ที่ทำงานที่ Yahoo! JAPAN มากว่า 6 ปี และโมกกับแคนที่เป็น New grad เพิ่งเข้ามาจอย และระหว่างที่พวกเรากำลังบันเทิงชนแก้วกับเพื่อนต่างชาติทั้ง คัมปาย, คอนแบ, คัมเปย, อู่กานลา, และ โมไหบ๋า โย่! กันอยู่นั้น…

Park Euivin (CTO) ที่ขึ้นพูด Keynote ก็เดินเข้ามาฉลองกับพวกเราด้วย แกเป็นกันเองมาก เข้ามาถามว่างานเป็นไงบ้าง สนุกกันไหม ที่สำคัญแกเรียกผมว่า “ที่” ซึ่งผมก็โมเมไปก่อนละว่าแกจำผมได้ ถถถ โดยหลังจากแกเดินจากไป ผมก็ถาม Engineer ชาวไทยที่ทำงานที่นี่ว่า ปกติทุกคนใกล้ชิดกับแกได้แบบนี้ไหม ทั้ง 3 คนก็มองกันไปมาแล้วยิ้ม 555+

การมาร่วมงาน Tech-Verse 2026 ในปีนี้มันตอบโจทย์ตัวผมมาก ทั้งการได้มาเรียนรู้สิ่งใหม่ๆ ได้มาดูการจัดงานระดับ Global ได้มาเจอเพื่อนๆ DevRel จากแต่ละประเทศ ได้เจอทั้งเพื่อนเก่าเพื่อนใหม่ โดยเฉพาะได้เจอคนไทยที่ทำงานที่นี่ ได้ Swag เกร๋ๆกลับบ้าน และที่สำคัญได้กระทบไหล่กับ CTO ด้วย(จากภาพน่าจะเรียกแบบนั้นได้ ^^) ทั้งหมดเป็นอีกหนึ่งประสบการณ์ที่ผมจะจดจำไว้ และแน่นอนว่าผมจะรอโอกาสที่จะได้มางานนี้อีกในอนาคตครับ

Tech-Verse 2026 งาน Tech Conference ที่ใหญ่ที่สุดของ LY Corporation บริษัทแม่ของ LINE Thailand was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

เชื่อว่านักพัฒนาส่วนใหญ่ที่พัฒนาบริการร่วมกับ 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 ด้านล่างนี้ไปใส่แทนที่

ห้ามลืม: คุณจะต้องเอาค่า 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 ไปได้เลย

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 ในการเก็บข้อมูลเยอะ หวังว่าเทคนิคที่ผมมาแบ่งปันในบทความนี้ จะเป็นประโยชน์กับทุกท่าน แล้วพบกันใหม่บทความหน้าครับ

ดึงข้อมูลโปรไฟล์ผู้ใช้งาน LINE จาก User ID ใน Google Sheets เรื่องง่ายๆที่คุณไม่รู้ was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

https://miniapp.line.me/1655694964-pkPXD1Ng

ไปเปิดผ่านเว็บเบราว์เซอร์บนคอมพิวเตอร์ ก็จะต้องพบกับหน้าจอที่แจ้งว่าให้เปิดผ่านสมาร์ทโฟนเท่านั้น

สำหรับนักพัฒนาบางท่านที่ตาดีไปเห็นข้อความด้านล่างนี้ใน Channel ก็คงคิดว่า LIFF URL จะเป็นแสงสว่างที่ปลายอุโมงค์ให้เราสามารถเปิด LINE MINI App กับเว็บเบราว์เซอร์บนคอมพิวเตอร์ได้แน่ๆ

แต่…เสียใจด้วย มันยังไม่ใช่ทางออกของเรื่องนี้ เพราะผลลัพธ์จากการเอา ID ของ LINE MINI App ไปเปิดด้วย LIFF URL แบบด้านล่างนี้ กับเบราว์เซอร์บนคอมพิวเตอร์นั้น ก็จะพบกับข้อความที่แจ้งว่าให้เปิดผ่านสมาร์ทโฟนเช่นกัน

https://liff.line.me/1655694964-pkPXD1Ng

เจอแบบนี้เข้าไป คิดหนักเลย นี่เราต้องทำเว็บแอปขึ้นมา 2 ตัว ตัวหนึ่งใช้กับ LINE MINI App อีกตัวหนึ่งใช้กับเว็บเบราว์เซอร์บนคอมพิวเตอร์เหรอเนี่ย ? ตอนนั้นก็มืดแปดด้านเลย เอาไงดี…จู่ๆเสียงในหัวก็มีเพลงพี่ตูนดังขึ้นมา

“ในค่ำคืนที่ฟ้านั้นไม่มีดาวอยู่ตรงนี้ ฉันยังคงก้าวไป ยังคงมีรักแท้เป็นแสงนำไปในคืนที่หลงทาง”

เท่านั้นหละ ไอเดียมา! โดยบทความนี้ผมจะมาเฉลยวิธีการสร้าง Universal URL สำหรับ LINE MINI App ใน 5 ขั้นตอน ซึ่งผลลัพธ์เราจะได้ URL เดียว ที่เปิดได้ทั้งสมาร์ทโฟน และ คอมพิวเตอร์ ถ้าพร้อมแล้ว ไปลุยกันเลย 🚀

1. เตรียม HTML

นอกจากการที่เราจะทำให้ LINE MINI App เปิดใช้งานได้กับเบราว์เซอร์บนคอมพิวเตอร์แล้ว สิ่งที่หนึ่งที่ช่วยยืนยันว่าเราได้เข้าถึงฟังก์ชันของ LINE MINI App ได้จริง ก็คือการเข้าถึงโปรไฟล์ของลูกค้าหรือผู้ใช้งาน ดังนั้นผมจะเตรียม HTML ไว้เพื่อแสดงผลข้อมูลผู้ใช้งาน

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>LINE MINI App</title>
  <meta name="description" content="A web application which you can deliver services on LINE">
  <link rel="stylesheet" href="https://mokmoon.com/mini/css/mini.css">
</head>
<body>
  <img id="pictureUrl" src="https://vos.line-scdn.net/imgs/apis/ic_mini.png">
  <p id="userId"><b>userId:</b> </p>
  <p id="displayName"><b>displayName:</b> </p>
  <p id="statusMessage"><b>statusMessage:</b> </p>
  <p id="decodedIDToken"><b>email:</b> </p>
  
  <!-- button จะถูกซ่อนไว้ด้วย CSS เป็น default -->
  <button id="btnLogIn" onclick="liff.login();">Log In</button>
  <button id="btnLogOut" onclick="liff.logout(); window.location.reload();">Log Out</button>
</body>
</html>

2. Bind ตัว HTML Element

ขั้นตอนนี้เราจะทำการ bind ตัว element ต่างๆจาก HTML ในข้อ 1 เพื่อเตรียมใช้งานใน JavaScript

<script>
  const pictureUrl = document.querySelector("#pictureUrl");
  const userId = document.querySelector("#userId");
  const displayName = document.querySelector("#displayName");
  const statusMessage = document.querySelector("#statusMessage");
  const email = document.querySelector("#decodedIDToken");
  const btnLogIn = document.querySelector("#btnLogIn");
  const btnLogOut = document.querySelector("#btnLogOut");
</script>

3. Import ตัว LIFF SDK เข้ามา

ด้วยความสามารถต่างๆบน LINE MINI App ในฝั่งโปรแกรมมิ่งนั้นมี LIFF SDK เป็นผู้อยู่เบื้องหลังทั้งหมด และ workaround ที่เราจะทำในวันนี้ ก็จะใช้ความสามารถของฟังก์ชันจาก LIFF SDK ด้วย ดังนั้นให้เราทำการ import ตัว SDK เข้ามา

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

4. เตรียมฟังก์ชัน mobileCheck() และ getUserProfile()

ขั้นตอนนี้เราจะเตรียมฟังก์ของ JavaScript 2 ฟังก์ชันด้วยกัน โดย

• mobileCheck() ใช้สำหรับตรวจสอบว่าผู้ใช้งานเปิดเว็บจากสมาร์ทโฟนหรือไม่ ?
• getUserProfile() ใช้สำหรับแสดงผลข้อมูลผู้ใช้งาน

<script>
  function mobileCheck() {
    let check = false;
    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
    return check;
  }
  
  async function getUserProfile() {
    const profile = await liff.getProfile();
    pictureUrl.src = profile.pictureUrl;
    userId.append(profile.userId);
    statusMessage.append(profile.statusMessage);
    displayName.append(profile.displayName);
    email.append(liff.getDecodedIDToken().email);
  }
</script>

5. สร้างฟังก์ชัน main() เพื่อกำหนดทิศทางลม

ฟังก์ชัน main() ถือเป็นหัวใจของ workaround นี้เลย โดยการทำงานจะแบ่งออกมาเป็น 3 ขั้นตอนย่อย

<script>
  async function main() {
    const liffId = "YOUR-LIFF-ID";

    // Step 5.1
    if (liff.isInClient()) {
      await liff.init({ liffId });
      getUserProfile();
      return;
    }

    // Step 5.2
    if (mobileCheck()) {
      window.location.replace(`line://app/${liffId}`);
      setTimeout(() => { window.close(); }, "5000");
      return;
    }

    // Step 5.3
    await liff.init({ liffId, withLoginOnExternalBrowser: true });
    if (liff.isLoggedIn()) {
      getUserProfile();
      btnLogOut.style.display = "block";
      return;
    }
    btnLogIn.style.display = "block";
  }

  main();
</script>

ขั้นตอนที่ 5.1

ขั้นตอนนี้ จะตรวจสอบว่าผู้ใช้งานเปิด Universal URL ในแอป LINE หรือไม่ ? หาก “ใช่” ตัว LINE MINI App จะทำการ Log in ให้อัตโนมัติ และเราจะดึงข้อมูลโปรไฟล์ผู้ใช้ออกมาแสดง

ขั้นตอนที่ 5.2

หากไม่เข้าเงื่อนไขที่ 5.1 จะมาเจอขั้นตอนนี้ โดยขั้นตอนนี้จะตรวจสอบว่าผู้ใช้งานได้เปิด Universal URL บนสมาร์ทโฟนหรือไม่ ? หาก “ใช่” เราจะเปิดตัว LINE MINI App ด้วย LINE URL scheme และสั่งปิดเว็บที่เปิดจาก Universal URL ใน 5 วินาที

ขั้นตอนที่ 5.3

หากไม่เข้าเงื่อนไขทั้ง 5.1 และ 5.2 จะเจอมาขั้นตอนนี้ (ขั้นตอนนี้บ่งบอกว่าผู้ใช้เปิด Universal URL กับเบราว์เซอร์บนคอมพิวเตอร์) โดยขั้นตอนนี้จะตรวจสอบว่าผู้ใช้งาน Log in มาแล้วหรือไม่ ? หาก

• “ใช่” เราจะดึงข้อมูลโปรไฟล์ผู้ใช้ออกมาแสดง พร้อมแสดงปุ่ม Log out
• “ไม่ใช่” เราจะแสดงปุ่ม Log in

หมายเหตุ

• LINE URL scheme ในขั้นตอนที่ 5.2 จะช่วยพาผู้ใช้งานกระโดดออกจาก In-App browser ของ LINE, Facebook, หรือแอปอื่นๆ แล้วพาไปเปิด LINE MINI App โดยตรง
• การระบุ withLoginOnExternalBrowser: true ใน liff.init() ขั้นตอนที่ 5.3 จะช่วยให้ตัวเว็บเรียกคำสั่ง Log in ให้อัตโนมัติ โดยหากเป็น External browser บนสมาร์ทโฟนจะทำการ Log in กับแอป LINE ให้อัตโนมัติด้วยนาจา

สรุป

มาถึงตรงนี้หากใครต้องการทดสอบ workaround ที่ผมได้แนะนำไป สามารถเอา https://mokmoon.com/mini ซึ่งเป็น Universal URL ไปทดลองเปิดใช้งาน LINE MINI App ตามช่องทางต่างๆ หรือจะดูโค้ดฉบับเต็มก็ view-source ดูได้เลย

สุดท้ายนี้ผมหวังเป็นอย่างยิ่งว่าบทความนี้จะช่วยทลายข้อจำกัดการใช้งาน LINE MINI App กับเบราว์เซอร์บนคอมพิวเตอร์ได้ และช่วยให้นักพัฒนาตัดสินใจย้าย LIFF app มาเป็น LINE MINI App ได้อย่างมั่นใจขึ้น

ปลดล็อค LINE MINI App ให้ใช้งานผ่าน “เว็บเบราว์เซอร์” บน “คอมพิวเตอร์” was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

ขอเกริ่นสักนิดนึงก่อนว่าที่มาของบทความนี้ นั้นมาจากสมาชิกใน Community และคนที่รู้จัก ได้สอบถามวิธีการเก็บสถิติการส่งข้อความใน LINE OA ว่ามันมี API ให้ดึงข้อมูลเดียวกันกับเมนู Insights ใน OA Manager บ้างไหม ตามตัวอย่างด้านล่างนี้

บางคนต้องการจะเอาข้อมูลตรงนี้ไปทำหน้า Dashboard บางคนจะเอาไปทำระบบ Alert แจ้งเตือน หรือบางคนก็จะเอาไปทำ Report แบบ Programmatic (ไม่อยากไป copy แบบ manual) โดยสิ่งที่ผมทำก็คือ จะต้องไปค้นหา API ตามโจทย์ของแต่ละคนใน Document ซึ่งจะต้องใช้เวลา เนื่องจาก API แต่ละตัวจะอยู่กระจัดกระจายตามหมวดที่ต่างกัน ดังนั้นบทความนี้ จะมารวบตึง API ที่เกี่ยวข้องกับสถิติการส่งข้อความทั้งหมด พร้อมคำอธิบายไว้ในที่เดียว ถ้าพร้อมกันแล้วไปดูกันเลย!

1. Get จำนวนข้อความที่สามารถส่งได้ตามแพ็กเกจ

API เส้นนี้จะให้ข้อมูลจำนวนข้อความที่สามารถส่งได้ด้วยการ Push, Multicast, Narrowcast, และ Broadcast ในเดือนปัจจุบันตามแพ็กเกจที่ใช้งาน

// HTTP Request
GET https://api.line.me/v2/bot/message/quota

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• type: limited กรณีมีข้อความที่จำกัด หรือ none กรณียิงได้ไม่อั้น
• value: จำนวนข้อความที่สามารถส่งได้ โดย object ตัวนี้จะมาในกรณีที่ type ด้านบนเป็น limited

// Example Response
{
  "type": "limited",
  "value": 15000
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

2. Get จำนวนข้อความที่ใช้ไปในเดือนแบบ Real-time

API เส้นนี้จะให้ข้อมูลจำนวนข้อความรวมที่ถูกส่งผ่าน OA Manager และ Messaging API จากการ Push, Multicast, Narrrowcast, และ Broadcast ในเดือนปัจจุบัน ซึ่งเป็น API ที่ให้ข้อมูลตามการใช้งานจริงแบบ Real-time

// HTTP Request
GET https://api.line.me/v2/bot/message/quota/consumption

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• totalUsage: ตัวเลขจำนวนข้อความที่ใช้ไป

// Example Response
{
  "totalUsage": 4096
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

3. Get จำนวนข้อความที่ส่งด้วยการ Reply

API เส้นนี้จะให้ข้อมูลจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/reply

// HTTP Request
GET https://api.line.me/v2/bot/message/delivery/reply

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

//Query Parameters
date: วันที่ส่งข้อความในรูปแบบ yyyyMMdd ต.ย 20250615 [Required]

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• status: สถานะของการประมวลผลจำนวนข้อความ โดยจะแบ่งเป็น
  + ready: ประผลเสร็จแล้ว พร้อมให้ดึงข้อมูล
  + unready: ยังประมวลผลไม่เสร็จ
  + out_of_service: วันที่เลือกเก่ากว่า 31 มี.ค 2018
• success: ตัวเลขจำนวนข้อความที่ส่งไปตามวันที่กำหนด โดย object ตัวนี้จะมาในกรณีที่ status ด้านบนเป็น ready

// Example Response
{
  "status": "ready",
  "success": 2048
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

4. Get จำนวนข้อความที่ส่งด้วยการ Push

API เส้นนี้จะให้ข้อมูลจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/push

// HTTP Request
GET https://api.line.me/v2/bot/message/delivery/push

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

//Query Parameters
date: วันที่ส่งข้อความในรูปแบบ yyyyMMdd ต.ย 20250615 [Required]

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• status: สถานะของการประมวลผลจำนวนข้อความ โดยจะแบ่งเป็น
  + ready: ประผลเสร็จแล้ว พร้อมให้ดึงข้อมูล
  + unready: ยังประมวลผลไม่เสร็จ
  + out_of_service: วันที่เลือกเก่ากว่า 31 มี.ค 2018
• success: ตัวเลขจำนวนข้อความที่ส่งไปตามวันที่กำหนด โดย object ตัวนี้จะมาในกรณีที่ status ด้านบนเป็น ready

// Example Response
{
  "status": "ready",
  "success": 1024
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

5. Get จำนวนข้อความที่ส่งด้วยการ Multicast

API เส้นนี้จะให้ข้อมูลจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/multicast

// HTTP Request
GET https://api.line.me/v2/bot/message/delivery/multicast

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

//Query Parameters
date: วันที่ส่งข้อความในรูปแบบ yyyyMMdd ต.ย 20250615 [Required]

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• status: สถานะของการประมวลผลจำนวนข้อความ โดยจะแบ่งเป็น
  + ready: ประผลเสร็จแล้ว พร้อมให้ดึงข้อมูล
  + unready: ยังประมวลผลไม่เสร็จ
  + out_of_service: วันที่เลือกเก่ากว่า 31 มี.ค 2018
• success: ตัวเลขจำนวนข้อความที่ส่งไปตามวันที่กำหนด โดย object ตัวนี้จะมาในกรณีที่ status ด้านบนเป็น ready

// Example Response
{
  "status": "ready",
  "success": 512
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

6. Get จำนวนข้อความที่ส่งด้วยการ Broadcast

API เส้นนี้จะให้ข้อมูลจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/broadcast

// HTTP Request
GET https://api.line.me/v2/bot/message/delivery/broadcast

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

//Query Parameters
date: วันที่ส่งข้อความในรูปแบบ yyyyMMdd ต.ย 20250615 [Required]

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• status: สถานะของการประมวลผลจำนวนข้อความ โดยจะแบ่งเป็น
  + ready: ประผลเสร็จแล้ว พร้อมให้ดึงข้อมูล
  + unready: ยังประมวลผลไม่เสร็จ
  + out_of_service: วันที่เลือกเก่ากว่า 31 มี.ค 2018
• success: ตัวเลขจำนวนข้อความที่ส่งไปตามวันที่กำหนด โดย object ตัวนี้จะมาในกรณีที่ status ด้านบนเป็น ready

// Example Response
{
  "status": "ready",
  "success": 256
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 2,000 requests/วินาที

7. Get จำนวนข้อความที่ส่งจากทุกกระบวนท่า

ใครอ่านมาถึงตรงนี้ ถือว่าโชคดีมาก 55 เพราะผมมั่นใจว่าหลายคนไม่รู้จัก API เส้นนี้ โดยความพิเศษมันคือ จะให้ข้อมูลจำนวนข้อความที่ส่งจากทุกประบวนท่าแบบแยกส่วนกัน ทั้งจากฝั่ง OA Manager และ Messaging API ครบจบใน Request เดียวเลย

// HTTP Request
GET https://api.line.me/v2/bot/insight/message/delivery

// Request Headers
Authorization: Bearer CHANNEL-ACCESS-TOKEN

//Query Parameters
date: วันที่ส่งข้อความในรูปแบบ yyyyMMdd ต.ย 20250615 [Required]

โดยหาก Request สำเร็จ 200 จะได้ Response เป็น JSON object ที่ประกอบไปด้วย

• status: สถานะของการประมวลผลจำนวนข้อความ โดยจะแบ่งเป็น
  + ready: ประผลเสร็จแล้ว พร้อมให้ดึงข้อมูล
  + unready: ยังประมวลผลไม่เสร็จ
  + out_of_service: วันที่เลือกเก่ากว่า 31 มี.ค 2018
• broadcast: ตัวเลขจำนวนข้อความที่ส่งผ่าน OA Manager แบบที่เลือกผู้รับเป็น All Friends (จะมีในกรณีที่มีการใช้งาน)
• targeting: ตัวเลขจำนวนข้อความที่ส่งผ่าน OA Manager แบบที่เลือกผู้รับเป็น Targeting (จะมีในกรณีที่มีการใช้งาน)
• apiBroadcast: ตัวเลขจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/broadcast (จะมีในกรณีที่มีการใช้งาน)
• apiPush: ตัวเลขจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/push (จะมีในกรณีที่มีการใช้งาน)
• apiMulticast: ตัวเลขจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/multicast (จะมีในกรณีที่มีการใช้งาน)
• apiNarrowcast: ตัวเลขจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/narrowcast (จะมีในกรณีที่มีการใช้งาน)
• apiReply: ตัวเลขจำนวนข้อความที่ส่งผ่าน Endpoint /bot/message/reply (จะมีในกรณีที่มีการใช้งาน)
• pnpNoticeMessage: ตัวเลขจำนวนข้อความที่ส่งผ่าน LON (จะมีในกรณีที่มีการใช้งาน)

// Example Response
{
  "status": "ready",
  "broadcast": 4096,
  "targeting": 2048
}

หมายเหตุ: Rate limit ของ API เส้นนี้คือ 60 requests/ชั่วโมง

สรุป

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

มัดรวม API สำหรับดึงสถิติการส่งข้อความใน LINE OA ด้วย Messaging API was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สร้าง LINE Chatbot ให้เข้าใจ PDF, Image, Video และ Audio ที่ผู้ใช้ส่งเข้ามา ด้วย Gemini และ Firebase

วันนี้หลายๆคนน่าจะคุ้นเคยกับการถามเรื่องต่างๆกับ AI แต่สิ่งที่ตัวมันสามารถตอบเราได้นั้นก็จะเป็น ข้อมูล ความรู้ ทั่วๆไป ซึ่งในบางครั้งเราก็อยากให้มันตอบกลับในสิ่งที่เฉพาะเจาะจงกลับมา เช่น

• ตอบข้อมูลสิทธิประโยชน์ของพนักงานในองค์กรจากไฟล์ PDF
• วิเคราะห์เกรดในใบ Transcript จากไฟล์ Image
• สรุปเนื้อหาที่ได้จากไฟล์ Video
• ถอดบทสนทนาในการประชุมจากไฟล์ Audio

ตอนนี้บางคนก็อาจจะยังไม่รู้ว่า AI มันสามารถเข้าใจบริบท และโต้ตอบเนื้อหาแบบเฉพาะเรื่อง ผ่านการที่เราให้มันกินไฟล์เนื้อหาเข้าไปก่อนได้ และด้วยที่ผู้ใช้งานส่วนใหญ่คุ้นเคยกับการส่งไฟล์อย่าง PDF, Image, Video และ Audio ผ่าน LINE กันอยู่แล้ว ดังนั้น บทความนี้ผมจะพาทุกคนไปสร้าง LINE Chatbot ที่เข้าใจ File หรือ URL ที่ส่งเข้ามาในห้องแชท พร้อมควบคุมให้การตอบกลับมีเฉพาะเนื้อหาที่อยู่ในไฟล์กัน

1. สร้าง Provider และ Channel

ใครที่ยังไม่เคยสร้าง Provider และ Channel สำหรับ LINE Chatbot มาก่อน ก็ให้อ่านบทความปฐมบทด้านล่างนี้ แต่ใครที่คุ้นเคยอยู่แล้วให้ข้ามขั้นตอนนี้ไปได้เลย

ปฐมบทการสร้าง LINE Chatbot (ฉบับอัพเดท 2024)

2. ติดตั้ง Cloud Functions for Firebase

ใครที่ยังไม่เคยพัฒนาโปรแกรมด้วย Cloud Functions for Firebase มาก่อน ก็ให้อ่านบทความด้านล่างนี้(โดยเฉพาะข้อ 2) แต่สำหรับคนที่คุ้นเคยแล้วให้ข้ามโลด

รู้จัก Cloud Functions for Firebase 2nd Gen ตั้งแต่ Zero จนเป็น Hero

3. สร้าง Webhook สำหรับ LINE Chatbot

3.1 สร้าง Module สำหรับการทำ HTTP Request

ในตัวอย่างนี้ผมจะใช้ axios มาเป็นตัวช่วยในการสร้าง request ซึ่งจะต้องทำการติดตั้ง dependency ตัวนี้ก่อน โดยให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่ง

npm install axios --save

และผมจะใช้ node-cache มาเก็บข้อมูลไฟล์ที่ผู้ใช้ส่งมาใน memory ซึ่งสำหรับ serverless มันจะหายไปเองหาก Instance ไม่มีคนใช้งาน หรือมีการ deploy โค้ดขึ้นไปสร้าง Instance ใหม่ โดยให้ทำการติดตั้งผ่านคำสั่ง

npm install node-cache --save

ถัดไปให้สร้างไฟล์ /functions/.env แล้วให้ไป copy ค่า Channel Access Token ของ Messaging API Channel ใน LINE Developers console จากข้อ 1 มาระบุ

CHANNEL_ACCESS_TOKEN=YOUR-CHANNEL-ACCESS-TOKEN

และเพื่อโค้ดที่สั้น เป็นระเบียบ เราจะแยกฟังก์ชันสำหรับการทำ HTTP Request ออกมาเป็น module โดยภายในจะมีฟังก์ชัน

• getBinary() สำหรับดึง binary ของไฟล์ที่ส่งผ่าน LINE
• reply() สำหรับตอบข้อความกลับหาผู้ใช้
• loading() สำหรับแสดง animation ระหว่างที่ AI กำลังประมวลผล
• curl() สำหรับดึง binary ของไฟล์ที่ส่งมาเป็น URL

ขั้นตอนนี้ให้สร้างไฟล์ /functions/utils/request.js แล้ว copy โค้ดด้านล่างนี้ไปวาง

const axios = require("axios");
const LINE_HEADER = {
  "Content-Type": "application/json",
  Authorization: `Bearer ${process.env.CHANNEL_ACCESS_TOKEN}`
};

class Request {
  getBinary(messageId) {
    return axios({
      method: "get",
      headers: LINE_HEADER,
      url: `https://api-data.line.me/v2/bot/message/${messageId}/content`,
      responseType: "arraybuffer"
    });
  }
  reply(replyToken, payload) {
    return axios({
      method: "post",
      url: "https://api.line.me/v2/bot/message/reply",
      headers: LINE_HEADER,
      data: { replyToken, messages: payload }
    });
  }
  loading(userId) {
    return axios({
      method: "post",
      url: "https://api.line.me/v2/bot/chat/loading/start",
      headers: LINE_HEADER,
      data: { chatId: userId }
    });
  }
  async c/service/https://medium.com/url(url) {
    try {
      return axios({ method: "get", url, responseType: "arraybuffer" });
    } catch (error) {
      throw error;
    }
  }
}

module.exports = new Request()

3.2 สร้างและเชื่อมต่อ Webhook กับ Messaging API Channel

ให้เปิดไฟล์ /functions/index.js แล้วให้ copy โค้ดด้านล่างนี้ไปแทนที่โค้ดเดิม เพื่อเตรียมรับ Webhook event ประเภท image , video , audio และ text จาก LINE

const { onRequest } = require("firebase-functions/v2/https");
const request = require("./utils/request");
const NodeCache = require("node-cache");
const cache = new NodeCache();

exports.webhook = onRequest(async (req, res) => {
  if (req.method !== "POST") { return res.send(req.method); }

  const events = req.body.events;
  if (events.length === 0) { return res.end(); }

  for (const event of events) {
    const userId = event.source.userId;
    switch (event.type) {
      case "postback":
        break;
      case "message":
        const messageType = event.message.type;
        if (["image", "video", "audio"].includes(messageType)) {
        }
        if (messageType === "text") {
        }
        break;
    }
  }
  res.end();
});

แล้วก็ให้เปิด command line ขึ้นมาอีกครั้ง และให้แน่ใจว่าเราอยู่ที่ functions/ จากนั้นใช้คำสั่งด้านล่างนี้เพื่อ deploy ตัว webhook ของเราขึ้น production

firebase deploy --only functions

เมื่อ deploy เสร็จเรียบร้อยเราจะเห็น Webhook URL โผล่อยู่ใน command line เลย ก็ให้เรา copy มา หรือกรณีที่ไม่พบก็ให้เข้าไปที่ Firebase console เลือกโปรเจคที่เราสร้างไว้ แล้วเมนู Functions ทางด้านซ้าย ก็จะเจอ ชื่อฟังก์ชัน และ Webhook URL ที่นั่น

เมื่อได้ Webhook URL มาอย่างสมใจปองแล้ว ก็เอา URL นี้ไปอัพเดทที่ Messaging API Channel ใน LINE Developers console ตามที่ได้สร้างไว้ในข้อที่ 1 และให้มั่นใจว่าได้เปิดใช้ Use webhook ด้วยแล้ว

4. สร้าง API Key ใน Google AI Studio

ขั้นตอนนี้เราจะพาทุกคนไปสร้าง API key สำหรับการใช้งาน Gemini API กัน โดยเริ่มจากคลิกลิงค์ https://aistudio.google.com/app/apikey แล้วกดปุ่ม Create API key ที่มุมขวาบน จากนั้นจะเจอ dialog ที่ให้เราเลือก Google Cloud projects โดยให้เราเลือกโปรเจคเดียวกับที่เราได้สร้าง Firebase project ไว้ในข้อที่ 2 ซึ่งเมื่อกดปุ่ม Create API key in existing project เราก็จะได้ API key มา

จากนั้นให้เราเพิ่มตัวแปร API_KEY ในไฟล์ /functions/.env แล้วให้เอา API key ที่ได้จาก Google AI Studio ระบุลงไปแบบนี้

CHANNEL_ACCESS_TOKEN=YOUR-CHANNEL-ACCESS-TOKEN
API_KEY=YOUR-API-KEY

5. เชื่อมต่อ LINE Chatbot เข้ากับ Gemini API

5.1 สร้าง Module สำหรับการเรียกใช้ Gemini API

ขั้นตอนนี้เราจะมาติดตั้ง GoogleGenAI ซึ่งเป็น dependency สำหรับใช้งาน Gemini โดยให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่ง

npm install @google/genai --save

และเพื่อให้โค้ดไม่ยาวจนเกินไป เราจะแยกฟังก์ชันทั้งหมดออกมาเป็น module โดยภายในจะมีฟังก์ชัน

• isUrl() สำหรับตรวจสอบว่าข้อความที่เข้ามาเป็น URL หรือไม่
• getMimeType() สำหรับดึง Content-Type ของไฟล์ออกมา
• isAllowedMimes() สำหรับตรวจสอบว่าไฟล์นำไปใช้กับ Gemini ได้หรือไม่
• multimodal() สำหรับส่ง prompt ที่รวมทั้งข้อความ Text และ File ไปให้ Gemini สร้างเนื้อหากลับมา

โดยให้สร้างไฟล์ /functions/utils/gemini.js แล้วให้ copy โค้ดด้านล่างนี้ไปวาง

const { GoogleGenAI } = require("@google/genai");
const ai = new GoogleGenAI({ apiKey: `${process.env.API_KEY}` });

class Gemini {
  isUrl(str) {
    return /^(http(s)?:\/\/)?(www\.)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(str);
  }
  getMimeType(response) {
    const contentType = response.headers["content-type"];
    return contentType ? contentType.split(';')[0] : 'application/octet-stream';
  }
  isAllowedMimes(mimeType) {
    return [
      "application/pdf",
      "image/jpeg",
      "image/png",
      "audio/wav",
      "audio/mp3",
      "audio/x-m4a",
      "video/mp4",
      "video/mov",
    ].includes(mimeType);
  }
  async multimodal(promptArray) {
    const response = await ai.models.generateContent({
      model: "gemini-2.5-flash",
      contents: promptArray,
    });
    return response;
  }
}

module.exports = new Gemini();

เสร็จแล้วก็ให้เราไปอัพเดทโค้ดในไฟล์ /functions/index.js โดยดึงเอา module ของ Gemini มาใช้งาน

const { onRequest } = require("firebase-functions/v2/https");
const request = require("./utils/request");
const NodeCache = require("node-cache");
const cache = new NodeCache();
const gemini = require("./utils/gemini");

5.2 รับและบันทึกไฟล์ Image, Video, และ Audio ลงใน Cache

ที่ไฟล์ /functions/index.js เราจะไปดึงเอา event.message.id จาก Webhook events มาแล้วเรียกใช้ฟังก์ชัน getBinary() เพื่อดึงเอา binary ของไฟล์ออกมาจาก LINE

// ...
if (["image", "video", "audio"].includes(messageType)) {
  const response = await request.getBinary(event.message.id);
  if (response.status === 202) {
    await request.reply(event.replyToken, [{
      type: "text",
      text: `ระบบกำลังประมวลผลไฟล์ กรุณากดปุ่ม "ตรวจสอบสถานะ" ด้านล่างอีกครั้งครับ?`,
      quickReply: {
        items: [{
          type: "action",
          action: { type: "postback", label: "ตรวจสอบสถานะ", data: `${event.message.id}` }
        }]
      }
    }]);
    break;
  }
  if (response.status === 200) {
    await getReady(response, userId, event.replyToken);
    break;
  }
}
// ...

ขั้นตอนนี้จะสำคัญตรงที่ เราต้องตรวจสอบ HTTP status ของ response จาก API ด้วย เนื่องจากเวลาในการประมวลผลไฟล์ที่ LINE sever จะขึ้นอยู่กับขนาดของไฟล์โดย response.status จะแบ่งออกเป็น 2 แบบ

• 202 : กรณี LINE ยังประมวลผลไม่เสร็จ (ไฟล์ขนาดใหญ่) เราจึงยังไม่ได้ binary กลับมา ดังนั้นผมจึงจะ reply() ข้อความกลับไปว่า “ระบบกำลังประมวลผลไฟล์…” พร้อมแนะนำ Quick Reply ที่แนบ event.message.id ไปกับ Postback action เพื่อจะไปจัดการในลำดับถัดไป
• 200: กรณี LINE ประมวลผลเสร็จแล้ว (ไฟล์ขนาดเล็ก) เราจะไปเรียกฟังก์ชัน getReady()

รอรับ Postback event
กรณีที่ได้ HTTP status เป็น 202 และผู้ใช้งานได้กด “ตรวจสอบสถานะ” จาก Quick Reply มา เราจะต้องเขียนโค้ดเพื่อรอรับ Webhook event ประเภท Postback โดยในตัวอย่างนี้ ผมจะเอา event.message.id ที่แนบมากับ Postback ไปยิง getBinary() ซ้ำ โดยหาก HTTP status เป็น 200 แล้วก็จะเรียกฟังก์ชัน getReady()

// ...
case "postback":
  const response = await request.getBinary(event.postback.data);
  if (response.status === 200) {
    await getReady(response, userId, event.replyToken);
  }
  break;
// ...

ฟังก์ชัน getReady()
ฟังก์ชันนี้ผมได้สร้างไว้ที่จุดล่างสุดของ /functions/index.js เลย โดยหน้าที่ของมันจะมี 3 อย่างด้วยกัน

• ตรวจสอบ Content-Type ของไฟล์ว่ารองรับไหม
• เก็บข้อมูล binary ไฟล์ที่แปลงเป็น base64 และ mimeType ลงใน cache โดยใช้ userId เป็น key ของ cache (หากมีไฟล์ใหม่จะทับไฟล์เดิม) เพื่อให้ cache ในระบบไม่ซ้ำของใครของมัน และไม่มีการกำหนดอายุของ cache เพื่อให้สามารถแชทถามได้ต่อเนื่อง
• Reply หาผู้ใช้งานว่าระบบพร้อมให้คุยกับ AI แล้ว หรือกรณีที่ไฟล์ไม่รองรับก็จะมีการแจ้งว่าระบบรองรับไฟล์ประเภทไหนบ้าง

// ...
const getReady = async (response, userId, replyToken) => {
  let message = "ปัจจุบันฉันสามารถเข้าใจไฟล์ PDF, JPEG, PNG, WAV, MP3, MP4, และ MOV ได้เท่านั้น";
  const mimeType = gemini.getMimeType(response);
  if (gemini.isAllowedMimes(mimeType)) {
    const base64 = Buffer.from(response.data).toString('base64');
    cache.set(`${userId}`, { data: base64, mimeType });
    message = "คุณอยากรุ้เรื่องอะไรจากไฟล์ที่คุณส่งมาครับ?";
  }
  await request.reply(replyToken, [{ type: "text", text: message }]);
}

5.3 จัดการ File URL และปั้น Prompt ส่ง Gemini

นอกจากระบบเราจะรองรับไฟล์ที่ผู้ใช้ส่งมาแล้ว เพื่อเพิ่มความสะดวกในการใช้งาน เราจะเขียนโค้ดเพิ่มอีกหน่อย เพื่อรองรับการส่งไฟล์แบบ URL ไปด้วยเลย ซึ่งกรณีนี้จะทำให้ LINE Chatbot ของเรารับไฟล์ประเภท PDF ได้ (ปัจจุบันผู้ใช้งานไม่สามารถ browse หรือ drag ไฟล์ PDF เข้ามาใน LINE OA ได้)

โดยเราจะสร้างเงื่อนไขในการตรวจสอบว่าข้อความ Text ที่ส่งเข้ามาว่าเป็น URL หรือไม่ โดยหากเป็น URL จะไปเรียกฟังก์ชัน curl() เพื่อดึง binary ออกมา และเอา binary นั้นส่งไปยังฟังก์ชัน getReady() ตามโค้ดด้านล่างนี้

// ...
if (messageType === "text") {
  const prompt = event.message.text.trim();

  if (gemini.isUrl(prompt)) {
    try {
      const response = await request.curl(https://medium.com/prompt);
      await getReady(response, userId, event.replyToken);
    } catch (error) {
      await request.reply(event.replyToken, [{ type: "text", text: "ขออภัย ฉันไม่สามารถเปิด URL นี้ได้ครับ" }]);
    }
    break;
  }
}
// ...

กรณีที่ข้อความ Text ที่ส่งเข้ามาไม่ใช่ URL เราก็ตรวจสอบ cache ก่อนโดยเอา userId ของผู้ใช้ไปดึงมาว่าตอนนี้มีข้อมูลไฟล์อยู่ในนั้นไหม โดยหากมีข้อมูลไฟล์อยู่ใน cache เราจะเอามันมาปั้น prompt ซึ่ง prompt ของเราจะแบ่งออกเป็น 3 ส่วน

• การใส่คำสั่งให้ AI ตอบเฉพาะเนื้อหาในไฟล์
• ข้อมูลไฟล์จาก cache ที่ประกอบไปด้วย base64 และ mimeType
• คำสั่งหรือคำถามที่ผู้ใช้ส่งมา

ให้เราเอา prompt ที่ปั้น ส่งไปให้ฟังก์ชัน multimodal() เพื่อให้ AI ประมวลผล ซึ่งเมื่อเราได้ผลลัพธ์มาก็จะ reply คำตอบกลับไปหาผู้ใช้งาน ตามโค้ดด้านล่าง

// ...
if (messageType === "text") {
  // ...
  const data = cache.get(userId);
  if (data) {
    await request.loading(userId);
    const response = await gemini.multimodal([
      "ตอบคำถามผู้ใช้เฉพาะเนื้อหาที่อยู่ในไฟล์เท่านั้น",
      { inlineData: data },
      prompt
    ]);
    await request.reply(event.replyToken, [{ type: "text", text: `${response.text}` }]);
  }
}

มาถึงตรงนี้โค้ดเราก็พร้อม deploy แล้ว จะรออะไรเปิด command line ขึ้นมา และให้แน่ใจว่าเรา cd ไปอยู่ที่ functions/ แล้ว จากนั้นเรียกคำสั่งด้านล่างได้เลย

firebase deploy --only functions

ผมได้เตรียม ไฟล์ + Prompt ไว้สำหรับ Demo ตามนี้ครับ

• PDF สรุปเรื่อง LINE Promotion Sticker เป็นภาษาไทย
• Video สรุปเนื้อหาจากไฟล์วิดีโอที่ส่งไป
• Audio ถอดเนื้อเพลงจากไฟล์ที่ส่งไป
• Image ร้านนี้ชื่ออะไร ? + กระจกในภาพมีทั้งหมดกี่บาน ?

โดยผลลัพธ์ที่ได้คือมันใช้ได้จริง แม่นมากๆ และที่สำคัญคือช่วยลดเวลาที่ผมจะต้องใช้ในการไปอ่าน ไปแปล ไปดู ไปฟัง ไปศึกษา ได้เยอะมหาศาลเลยครับ

Tips

• Gemini API มีทั้งแพลน Free และ Paid (Pay as you go)
• กรณีที่ใช้ Paid plan จะมีการคิดค่าใช้จ่ายจาก Token โดยรวมทั้ง input และ output แต่ราคาจะขึ้นอยู่กับแต่ละ model ที่เลือกใช้
• วิธีตรวจสอบ token รวมทั้ง input และ output ที่เราใช้ไปในแต่ละ request ให้เอา response จาก Gemini ไปเรียกดูได้จาก response.usageMetadata.totalTokenCount

สรุป

หวังว่าเนื้อหาในบทความนี้จะทำให้ผู้อ่านทุกคนได้ไอเดียไปพัฒนา LINE Chatbot ที่เปรียบเสมือนผู้ช่วยที่คอยตอบคำถามต่างๆให้งานอีเวนท์ต่างๆ องค์กร แผนก ทีม หรือ ตัวคุณเอง ได้อย่างรอบรู้จากไฟล์ที่เราให้มันกินเข้าไป

และสำหรับใครที่อยากเอาโค้ดไปใช้เลย ผมได้เอา source code ทั้งหมดขึ้น GitHub ให้แล้ว ไป clone กันได้ตามลิงค์ด้านล่างนี้เลยครับ

GitHub - jirawatee/LINE-Chatbot-x-Gemini-Multimodal: Building a LINE Chatbot for user chatting with a PDF, Image, Video, and Audio files by Gemini and Cloud Functions

แล้วพบกันใหม่ในบทความถัดไป สำหรับวันนี้ลาไปก่อน…สวัสดีค้าบ

สร้าง LINE Chatbot ให้เข้าใจ PDF, Image, Video และ Audio ที่ผู้ใช้ส่งเข้ามา ด้วย Gemini + Firebase was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

Verify Signature ให้ครอบคลุม Emoji ทั้งจักรวาลกับ LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase

ในปี 2019 ผมได้เคยแนะนำวิธีการเพิ่มความปลอดภัย ที่สำคัญมากในการพัฒนา LINE Chatbot นั่นก็คือการตรวจสอบว่า Webhook Events ที่วิ่งเข้ามายัง Webhook API ของเรานั้นถูกดัดแปลงข้อมูลมาหรือไม่ ผ่านบทความด้านล่างนี้

X-Line-Signature ตัวช่วยจาก LINE ที่จะช่วยยกระดับความปลอดภัยให้กับ Webhook ของคุณ

บทความดังกล่าวมีนักพัฒนาในบ้านเราให้ความสนใจเข้ามาอ่านเป็นจำนวนมาก หลายๆคนก็นำมันไปใช้กับ LINE Chatbot ของตัวเอง แต่หลังจากนั้นผมก็ได้ feedback กลับมา ว่าโค้ดที่ใช้ในบทความดังกล่าวนั้นไม่ครอบคลุมการมี emoji ในข้อความ และโชคดีที่มีนักพัฒนาใน Community มาแชร์วิธีการที่จะเขียนโค้ดให้รองรับ emoji ในข้อความ จึงเป็นที่มาของวิดีโอ Secret Tips EP.18 ที่ปล่อยออกมาในปี 2021

แต่ในท้ายคลิปดังกล่าว ผมได้ทิ้งท้ายไว้ว่าโค้ดที่ใช้จะรองรับ emoji ที่มีในปัจจุบันเท่านั้น โดยสาเหตุที่ผมพูดเช่นนั้นก็เพราะ emoji มันเกิดขึ้นใหม่ได้ทุกปี ซึ่งโค้ดที่ใช้ในคลิปจะต้องคอยอัพเดทมันอยู่เรื่อยๆนั่นเอง

หลังจากปล่อยคลิปไป นักพัฒนาหลายๆคนก็เอาเทคนิคนี้ไปปรับใช้ และเหมือนมันจะใช้งานได้ดีเลย จนกระทั่งปีที่แล้ว 2024 ก็มีนักพัฒนาชาวญี่ปุ่นใน GitHub ชื่อ Yang-33 มาคอมเม้นท์ใต้โค้ดของผมใจความว่า “การแปลง request.body แล้วนำไปสร้าง signature จะมีโอกาสที่ข้อมูลจะเปลี่ยนแปลงไป และจะ verify ไม่ผ่านได้”

ผมขอยอมรับว่าช่วงนั้นผมค่อนข้างยุ่ง เลยไม่ได้ไปพิสูจน์ ทดลอง และหาคำตอบในทันที ซึ่งหลังจากนั้นผมก็ลืมมันไป แล้วเวลาก็ผ่านไปอย่างรวดเร็ว Fast forward มาที่ปี 2025 Supakarn Laorattanakul ซึ่งเป็น LINE API Expert ของประเทศไทย ทักผมมาว่า

จากข้อความนี้ ทำให้ผมรู้ว่าโค้ดที่ผมเคยแนะนำไว้ มีคนนำไปใช้ และกำลังเจอกับปัญหาอยู่(มีอีกหลายคนแน่ๆ) ทันใดนั้นเอง ผมก็คิดขึ้นมาได้ว่าเรื่องนี้ต้องมีคนรับผิดชอบ! ซึ่งจะเป็นใครหละ ถ้าไม่ใช้ Jirawatee นางตัวดี 555+

เอาหละบทความนี้ ผมจะพาทุกคนไปเข้าใจเหตุของปัญหา หนทางสู่การดับทุกข์ ที่รับรองได้ว่าเป็นทางสว่างที่ยั่งยืน คลอบคลุม emoji ทั้ง อดีต ปัจจุบัน และ อนาคต

[แบบเดิม] วิธีการสร้าง Signature จาก Webhook event ใน Cloud Functions for Firebase

const crypto = require('crypto');

let text = JSON.stringify(request.body);

text = text.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g, (e) => {
  return "\\u" + e.charCodeAt(0).toString(16).toUpperCase() + "\\u" + e.charCodeAt(1).toString(16).toUpperCase();
});

const signature = crypto.createHmac('SHA256', CHANNEL_SECRET).update(text).digest('base64').toString();
if (request.headers['x-line-signature'] !== signature) {
  return res.status(401).send('Unauthorized');
}

จากโค้ดด้านบนจะเป็นโค้ดเดิมที่ผมใช้มาตั้งแต่ปี 2021 โดยมันจะทำการ verify ตัว x-line-signature ที่ส่งมากับ Webhook event กับ signature ที่เราสร้างขึ้นมาจาก request.body และจุดสำคัญจะอยู่ที่ update() ซึ่งเป็น method ที่จะรับ argument ประเภท String, Buffer, TypedArray, และ DataView เท่านั้น

แต่ประเภทของ request.body ที่เราได้จาก Cloud Functions for Firebase นั้นจะเป็น JSON Object จึงทำให้เราต้องทำการแปลงมันก่อน และวิธีที่โค้ดด้านบนใช้คือการแปลงเป็น String ด้วยคำสั่ง JSON.stringify();

โดยการแปลง request.body จะไม่พบปัญหากับข้อความที่เป็น text เพียวๆ แต่เมื่อไรก็ตามที่มี emoji อยู่ในข้อความจะทำให้ผลของการสร้าง signature นั้นจะไม่ตรงกับ x-line-signature จึงมีคนนำเสนอเทคนิคที่จะหา emoji ในข้อความและแปลงมันกลับมาให้เหมือนเดิมด้วย text.replace() ตามโค้ดด้านบน แต่ก็จะสังเกตได้ว่าการกำหนดตัว emoji จะอยู่ในรูปแบบของ regex ซึ่งมีการระบุรูปแบบ emoji ในวงจำกัดเท่าที่มีอยู่ ณ เวลานั้น

ตัวอย่าง emoji แบบที่ ผ่าน และ ไม่ผ่าน

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

ข้อความที่ 1 🔥 Fire

ข้อความที่ 2 ❌ Cross mark

ถ้าคุณได้ทดลองแล้ว คุณจะพบว่า ข้อความที่ 2 จะไม่ผ่านการ verify signaure โดยตัวอย่างค่า signature ที่ผม log ออกมาจะเห็นชัดว่า x-line-signature กับ signature ที่ผมสร้างไม่เหมือนกัน

// x-line-signature
4dO6jgHXCr7MQ8AcJP1Hf3WVzEEhlHUEuajRG8LzLII=

// signature
jw4bm/FoOtmA5iE6A5kaA5lh2uX30JNchT1ke3kHZVg=

[แบบยั่งยืน] วิธีการสร้าง Signature จาก Webhook event ใน Cloud Functions for Firebase

ต่อจากนี้คือหนทางของการดับทุกข์ของผมนะครับ เอ้า ไปเริ่มกันเลย

สิ่งแรกที่ผมคิดคือ หากเราแปลง request.body จาก JSON Object มาเป็น Buffer แล้วโยนมันเข้าไปใน update() มันจะได้ไหมนะ

const jsonString = JSON.stringify(request.body);
const buffer = Buffer.from(jsonString, 'utf8');

จากผลการทดลองบอกผมว่าค่า signature ที่ได้ จะไม่เท่ากับ x-line-signature ดังนั้น อย่าหาทำท่านี้กันนะครับทุกคน

ถัดมาผมได้ลองค้นหาใน Google อีก 2–3 ท่า แต่ทั้งหมดก็ยังไม่เวิร์ค จนกระทั่งผมมาเจอโพสนี้ใน reddit

ทำให้ผมได้ keyword ที่สำคัญมานั่นคือ raw body และสิ่งที่ผมคิดต่อมา คือคนที่น่าจะรู้เรื่องนี้ดีที่สุดคนหนึ่งก็ควรเป็น…Gemini เพราะถ้ามันไม่รู้บริการในบริษัทตัวเอง ก็ไม่ต้องไปหวังพึ่ง AI ตัวอื่นแล้ว ผมจึงได้ถามมันไปว่า “Gemini เอ๋ย บอกข้าเถิดใครงามเลิศในปฐพี” หยอกๆ จริงๆแล้วผมถามว่า

เท่านั้นหละ ผมรีบ console.log(request); ดูทันทีว่ามี rawBody พระเอกของผมอยู่ในนั้นไหม และนี่คือผลที่ได้…

มันมี rawBody อยู่จริง และประเภทของมันก็เป็น Buffer ซะด้วย ผมถึงกับต้องอุทานขึ้นมาว่า…

และเมื่อผมได้มาปรับแต่งโค้ดใหม่โดยเปลี่ยนการส่ง request.body ไปเป็น request.rawBody ไปกับ update() ผมก็พบว่าไม่ว่าจะส่งข้อความที่มี emoji รูปแบบไหนมา signature ที่ผมสร้างจะเท่ากับ x-line-signature แล้ว

const crypto = require('crypto');

const signature = crypto.createHmac('SHA256', CHANNEL_SECRET).update(request.rawBody).digest('base64').toString();
if (request.headers['x-line-signature'] !== signature) {
  return res.status(401).send('Unauthorized');
}

หมายเหตุ

• rawBody จะมาเมื่อมี body ส่งมากับ request เสมอ
• วิธีการในบทความนี้นั้นรองรับการสร้าง Signature แบบถูกหลักอนามัย ทั้งใน Cloud Functions for Firebase 1st และ 2nd Gen ที่ใช้ Node.js

สรุป

บทความนี้ทำให้ผมรู้สึกได้ปลดปล่อยตัวเองจากความทุกข์ ที่โค้ดไม่ครอบคลุม emoji ใหม่ๆ และเกิด issue กับคนที่นำไปใช้ โดยเมื่อผมได้พบวิถีของการดับทุกข์นี้แล้ว ผมก็บอกกับตัวเองทันทีว่า “กรูจะไม่เก็บเรื่องนี้ไว้คนเดียวแน่ๆ 555” หวังว่าโค้ดชุดใหม่นี้จะช่วยให้ LINE Chatbot ของผู้อ่านตอบสนองผู้ใช้งานได้คลอบคลุม 100% จากนี้ไปนะครับ

สุดท้ายนี้ผมขอขอบคุณทุกท่านที่ได้ feedback ผมมา รวมถึงผู้ที่ช่วยผมหาคำตอบทุกคน โดยเฉพาะอย่างยิ่ง คุณ Siraphoom Sri-Art, Yang-33 และ คุณพร็อมท์ LAE ครับ ผมจะเป็นคนที่เก่งขึ้นไม่ได้ถ้าไม่มี…Community ขอบคุณค้าบ

Verify Signature ให้ครอบคลุม Emojis ทั้งจักรวาลกับ LINE Chatbot ที่พัฒนาด้วย Cloud Functions for… was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

หนึ่งในคำถามที่ผมมักจะได้รับ จากคนที่ให้บริการต่างๆบน LINE OA ไม่ว่าจะเป็น ผู้ประกอบการ, นักพัฒนา โดยเฉพาะอย่างยิ่ง ทีมการตลาด ทั้งมือใหม่และมืออาชีพ ในปีนี้ ก็คือ…

“เราจะรู้ได้อย่างไรว่า ลูกค้าคนนั้นๆ add ตัว LINE OA มาจากช่องทางไหน ที่เราไปโปรโมทไว้ ?”

แน่นอนว่าถ้าเรามีข้อมูลตรงนี้ ก็จะสามารถวัดผลได้ว่า Marketing Campaign ที่ไปโปรโมท LINE OA ตามช่องทางต่างๆ เช่น LINE, Facebook, Google, X, Instagram, รวมถึง QR code ที่เราติดไว้บนป้ายโฆษณา หรือที่ร้านค้านั้นๆ ช่องทางไหนทำให้เรามี followers เพิ่มขึ้นมากที่สุด

ดังนั้น เพื่อให้ตอบโจทย์สิ่งที่หลายคนต้องการ บทความนี้ผมจะชวนทุกคนไปสร้างระบบ Friend Path ฉบับ DIY ที่จะช่วยให้คุณได้รู้ว่า followers ของคุณมาจากช่องทางไหนที่คุณไปโปรโมทไว้บ้าง โดยขั้นตอนจะมีดังนี้

1. สร้าง LINE OA และเปิดใช้งาน Messaging API
2. สร้าง API เพื่อรับและเก็บข้อมูล Marketing Campaign
3. สร้าง LIFF app เพื่อเก็บข้อมูลและพาผู้ใช้ไปหา LINE OA
4. สร้าง Webhook API เพื่อรอรับสัญญาณการ Add / Unblock
5. Deploy และ Demo

1. สร้าง LINE OA และเปิดใช้งาน Messaging API

ขั้นตอนแรก เราจะต้องมี LINE Chabot (LINE OA + Messaging API Channel) ซะก่อน โดยถ้าใครมีแล้วให้ข้ามขั้นตอนนี้ไป แต่หากใครยังไม่มีให้สร้างตามข้อ 1–3 ของบทความด้านล่างนี้ได้เลยครับ

ปฐมบทการสร้าง LINE Chatbot (ฉบับอัพเดท 2024)

2. สร้าง API เพื่อรับและเก็บข้อมูล Marketing Campaign

ขั้นตอนนี้เราจะมาเตรียม API ไว้สำหรับรอรับค่า Marketing Campaign ที่จะส่งจาก LIFF app กัน โดยผมจะเลือกสร้างตัว API ด้วย Callable Function จาก Cloud Functions for Firebase เพราะผมชอบที่จะไม่ต้องระบุตัว Endpoint URL ลงไปฝั่ง client side

2.1 สร้าง Callable Function และ ลงทะเบียน Web app

ขั้นตอนนี้ เราจะมาสร้างโปรเจคใน Firebase และ setup ตัว Callable Function ขึ้นมาไว้ให้พร้อมเขียนโปรแกรม และไปลงทะเบียน Web app ของเราให้เรียบร้อยตามข้อ 1–2.1 ของบทความด้านล่างนี้เลยครับ

รู้จัก Callable Function ใน Cloud Functions for Firebase ตั้งแต่ Zero จนเป็น Hero

2.2 เปิดใช้งาน Cloud Firestore

ด้วยระบบ Friend Path ฉบับ DIY ที่เรากำลังจะสร้างขึ้น จำเป็นต้องมีการเก็บและเรียกใช้ข้อมูล ผมจึงขอเลือกใช้ Firestore มาเป็น database ในงานนี้ ดังนั้นให้เราไปเปิดใช้งาน Cloud Firestore กันก่อน โดยใน Firebase console ให้เลือกเมนู Firestore Database ทางซ้าย แล้วกด Create database

จากนั้นเลือก location ของ database ตามต้องการ

ถัดไปให้เลือก Start in production mode เพื่อที่จะป้องกันไม่ให้เขียนและอ่านข้อมูลจาก client script ได้

จากนั้นกดปุ่ม Create ก็เป็นการเปิดใช้งาน Firestore เรียบร้อยครับ

2.3 สร้าง API จาก Callable Function ไว้เพื่อรับและเก็บข้อมูล

เมื่อเราเตรียม Callable Function ไว้เรียบร้อย ขั้นตอนนี้เราจะมาเขียนโค้ด เพื่อสร้าง API กัน โดยเราจะใช้ axios มาเป็นตัวช่วยในการสร้าง request ซึ่งเราจะต้องทำการติดตั้ง dependency ตัวนี้ก่อน

เริ่มต้นให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่งเพื่อติดตั้ง axios ก่อน เพราะเราจะใช้ dependency ตัวนี้ในการเรียกใช้ LINE API

npm install axios --save

เพื่อโค้ดที่สั้น เป็นระเบียบ เราจะสร้างฟังก์ชันสำหรับการเรียกใช้ LINE API และ Firebase ออกมาเป็น module โดยมีรายละเอียดดังนี้

LINE module (/functions/utils/line.js) โดยภายในจะมีฟังก์ชัน getUserProfile() ที่จะทำหน้าที่ในการดึงข้อมูลผู้ใช้ด้วย accessToken ที่ได้จาก LIFF app

const axios = require("axios");

class LINE {
  async getUserProfile(accessToken) {
    try {
      const profile = await axios({
        method: 'get',
        url: "https://api.line.me/v2/profile",
        headers: { Authorization: `Bearer ${accessToken}` }
      });
      return profile.data;
    } catch (error) { return error.response.status; }
  }
}
module.exports = new LINE();

Firebase module (/functions/utils/firebase.js) โดยภายในจะมี 3 ฟังก์ชันดังนี้

const { getFirestore } = require("firebase-admin/firestore");
const { initializeApp } = require("firebase-admin/app");
initializeApp();
const followersRef = getFirestore().collection("followers");

class Firebase {
  // สำหรับดึงข้อมูลการ add/unblock ตัว LINE OA ของผู้ใช้แต่ละคนจาก Firestore
  getFollower(userId) {
    return followersRef.doc(userId).get();
  }

  // สำหรับ เพิ่มหรืออัพเดท ข้อมูลการ add/unblock ตัว LINE OA ของผู้ใช้แต่ละคน
  upSertFollower(userId, data) {
    return followersRef.doc(userId).set(data, { merge: true });
  }

  // สำหรับนับจำนวน follower ที่ add/unblock ตัว LINE OA จากแต่ละช่องทาง
  countUtmResource(utmSource) {
    return followersRef.where("utmSource", "==", utmSource).where("isAddedOrUnblockedFromAd", "==", true).count().get();
  }
}
module.exports = new Firebase()

เสร็จแล้วให้ไปที่ไฟล์ /functions/index.js แล้ว copy โค้ดด้านล่างนี้ไปแทนที่โค้ดเดิมทั้งหมดในไฟล์

const { onCall, onRequest, HttpsError } = require("firebase-functions/v2/https");

// Import LINE และ Firebase modules
const firebase = require("./utils/firebase");
const line = require("./utils/line");

exports.myCallable = onCall(async (request) => {
  // ดัึง user profile ด้วย accessToken จาก LIFF app
  const profile = await line.getUserProfile(request.data.accessToken);
  if (profile >= 400) {
    throw new HttpsError("failed-precondition", "The function must be called with a valid accessToken");
  }

  // Insert ข้อมูลของผู้ใช้ที่มาคลิก ad ไปเก็บที่ Firestore
  await firebase.upSertFollower(profile.userId, {
    utmSource: request.data.utmSource,
    timestamp: Date.now(),
    isAddedOrUnblockedFromAd: false
  });
  
  return request.data.utmSource;
});

การทำงานของ myCallable คือจะเอา accessToken จาก LIFF app ไปยิง LINE API เพื่อดึงข้อมูลผู้ใช้ออกมา โดยสิ่งที่เราอยากได้จากข้อมูลผู้ใช้คือ userId เพื่อมาเป็น identity ของแต่ละ record และจะมีการเก็บค่าอีก 3 ค่าใน Firestore ดังนี้

• utmSource: ชื่อช่องทางที่คุณไปโปรโมทซึ่งได้มาจาก LIFF app
• timestamp: เวลา ณ จังหวะที่ผู้ใช้เปิด LIFF app ขึ้นมา
• isAddedOrUnblockedFromAd: สิ่งที่จะยืนยันว่าผู้ใช้คนนั้นๆได้ add/unblock ตัว LINE OA จากช่องทางที่คุณไปโปรโมท โดยค่าเริ่มต้นจะเป็น false

3. สร้าง LIFF app เพื่อรับข้อมูลและพาผู้ใช้ไปหา LINE OA

ขั้นตอนนี้เราจะมาสร้าง LIFF app เพื่อรับและเก็บข้อมูล ว่าใครมาจากช่องทางไหน ก่อนที่จะมา add/unblock ตัว LINE OA โดยผลลัพธ์เมื่อเราพัฒนาเสร็จ เราจะได้ LIFF URL และ Endpoint URL ไปไว้เป็นลิงค์ติด ad ต่างๆ หรือ QR code เพื่อโปรโมท LINE OA ต่อไปได้

3.1 สร้าง LINE Login Channel และ LIFF App

ขั้นตอนนี้เราจะมาสร้าง LINE Login Channel และ LIFF app ตามบทความด้านล่างนี้ตั้งแต่ ข้อ 2–3 (ย้ำว่าไม่ทำข้อ 1)

สร้างและพัฒนา LIFF v2 ให้ดึง Email ของผู้ใช้ออกมาได้

โดยสิ่งที่คุณจำเป็นต้อง ทำเพิ่ม นอกเหนือจากบทความด้านบนนี้จะมีอยู่ สองเรื่อง คือ

• เรื่องแรก: จะต้องไปทำการ Linked LINE Official Account ที่แท็บ Basic settings ของ LINE Login Channel ใน LINE Developers Console โดยให้เราเลือกเชื่อมต่อ LINE OA ที่เราสร้างไว้ ซึ่งจะมีผลทำให้ LIFF app สามารถรู้ได้ว่าผู้ใช้งานที่เปิด LIFF app คนนั้นๆเป็นเพื่อนกับ LINE OA แล้วหรือยัง

• เรื่องที่สอง: จะต้องตั้งค่า Add friend option ของ LIFF app ใน LINE Developers Console ให้เป็น Off ซะก่อน เนื่องจากหากผู้ใช้งานมีการ add/unblock ตัว LINE OA ที่หน้า consent ก่อนที่จะมาเจอหน้า LIFF app จะทำให้เรา track ไม่ได้ว่า followers คนนั้นๆมาจากช่องทางใด

*** คำเตือน ***

ระบบ Friend Path ฉบับ DIY ที่เรากำลังสร้างขึ้นจะไม่สามารถทำงานได้ถูกต้อง หากคุณไปสร้าง LINE Login Channel ภายใต้ Provider ใหม่ ซึ่งต่างกันกับ Provider ที่ Messaging API Channel อาศัยอยู่ เนื่องจากเราจำเป็นต้องเชื่อมโยงผู้ใช้จาก LIFF app และ LINE Chatbot ด้วย userId ที่เหมือนกัน

3.2 พัฒนา LIFF app และเชื่อมต่อ Callable Function

ขั้นตอนนี้เราจะมาเขียน JavaScript เพื่อที่จะดักเก็บข้อมูล marketing campaign และพาผู้ใช้ไปหน้า add/unblock ตัว LINE OA

เริ่มต้นให้สร้างไฟล์ main.js ขึ้นมาก่อน แล้ว copy ฟังก์ชัน isMobile() ด้านล่างนี้ไปใส่ไว้ โดยเราจะใช้ฟังก์ชันนี้ในลำดับถัดไป

function isMobile() {
  let check = false;
  (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
  return check;
}

จากนั้นให้สร้างไฟล์ index.html ขึ้นมา แล้วให้ import ตัว LIFF SDK และ main.js ที่สร้างไว้เข้ามา

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="main.js"></script>

ถัดไปให้เรา import ตัว Firebase SDK และ initialize ให้พร้อมใช้งาน

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
  import { getFunctions, httpsCallable, connectFunctionsEmulator } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-functions.js";

  const app = initializeApp({
    apiKey: "### FIREBASE API KEY ###",
    authDomain: "### FIREBASE AUTH DOMAIN ###",
    projectId: "### CLOUD FUNCTIONS PROJECT ID ###"
  });
  const functions = getFunctions(app);
  async function main() {
    // ...
  }
  main();
</script>

หมายเหตุ: ค่า apiKey, authDomain, และ projectId หาได้จาก ขั้นตอนที่ 2.1

ภายในฟังก์ชัน main() ให้เราเพิ่มโค้ดตามด้านล่างนี้

// URL ของ LINE OA โดยให้ระบุ Basic ID จาก ขั้นตอนที่ 1
const LINE_OA_URL = "https://line.me/R/ti/p/### BASIC ID ###";

// ดึง query parameters ทั้งหมดที่ติดมากับ URL
const params = new URLSearchParams(window.location.search);

// Initial ตัว LIFF app ด้วย LIFF ID ที่ได้จาก ขั้นตอนที่ 3.1
await liff.init({ liffId: "### LIFF ID ###" });

ถัดลงมาในฟังก์ชัน main() เหมือนเดิม ให้เพิ่มโค้ดด้านล่างนี้เพื่อ survive ตัว In-App Browser และ รองรับ External Browser

if (!liff.isInClient()) {
  if (isMobile()) {
    window.location = `line://app/${liff.id}?${params}`;
    setTimeout(() => { liff.closeWindow(); }, "3000");
    return;
  }
  if (!liff.isLoggedIn()) {
    liff.login({ redirectUri: window.location.href });
    return;
  }
}

โดยโค้ดด้านบนจะตรวจสอบว่าผู้ใช้งานได้เปิด LIFF app ใน LIFF Browser หรือไม่ หากไม่ จะเจอกับเงื่อนไขสองข้อ

• isMobile() จะตรวจสอบว่าผู้ใช้งานเปิดหน้าเว็บนี้บนสมาร์ทโฟนหรือไม่ โดย หากใช่ เราจะผลักผู้ใช้งานกระโดดไปหน้าเว็บนี้บน LIFF Browser เนื่องจากเราจะ ดึงโปรไฟล์ผู้ใช้งานได้โดยไม่ต้อง login (กรณีนี้มักเกิดกับผู้ใช้งานที่คลิกเปิดลิงค์จาก ad หรือโพสในแอปต่างๆ ซึ่งจะการเปิดลักษณะนี้ จะเป็นการเปิดแบบ In-App Browser)
• liff.isLoggedIn() จะตรวจสอบว่าผู้ใช้งานได้ login แล้วหรือยัง หากยัง เราก็จะพาเขาไป login ก่อน เพื่อที่เราจะระบุตัวตนคนที่คลิก ad ได้ (กรณีนี้มักเกิดกับผู้ใช้งานที่เปิดเว็บนี้บน PC หรือ MacBook)

ยัง ยัง ยังไม่หมด ในฟังก์ชัน main() ให้เพิ่มโค้ดด้านล่างนี้ เพื่อตรวจสอบว่าผู้ใช้งานที่เปิดเว็บนี้เขาเป็นเพื่อนกับ LINE OA แล้วหรือยัง

try {
  const data = await liff.getFriendship();
  if (data.friendFlag) {
    // หากเขาเป็นเพื่อนกับ LINE OA อยู่แล้ว ระบบจะพาผู้ใช้งานไปเปิด LINE OA ทันที
    window.location = LINE_OA_URL;
    setTimeout(() => { liff.closeWindow(); }, "3000");
    return;
  }
} catch (error) {
  // กรณนี้ที่นักพัฒนายังไม่ได้ Linked LINE Official Account ใน ขั้นตอนที่ 3.1 มันจะฟ้อง
  alert(error.message);
  liff.closeWindow();
  return;
}

และแล้วเราก็มาถึงส่วนสุดท้ายของการพัฒนา LIFF app ในฟังก์ชัน main() ละ ให้เพิ่มโค้ดด้านล่างนี้

// เชื่อมต่อกับ Callable Function ที่เราได้เตรียมไว้ใน ขั้นตอนที่ 2.3
// โดยส่งค่า accessToken ของ LIFF app และ utmSource ซึ่งเป็น query param ที่มากับ URL
const myCallable = httpsCallable(functions, 'myCallable');
const result = await myCallable({
  accessToken: liff.getAccessToken(),
  utmSource: params.get("utm_source") || "none"
});

// พาผู้ใช้กระโดดต่อไปหน้า LINE OA
window.location = LINE_OA_URL;
setTimeout(() => { liff.closeWindow(); }, "3000");

หมายเหตุ

• เหตุผลที่ผมเลือกตั้งชื่อตัว query param เป็น utm_source เนื่องจาก หากต้องการจะติด Google Analytics เพื่อ track การเปิดหน้าเว็บนี้ ก็จะรองรับไปในคราวเดียวกัน
• เหตุผลที่ผมใช้เวลา setTimeout() เป็น 3,000 (3 วินาที) เนื่องจากผมทดลองแล้วว่าเป็นช่วงเวลาที่ผู้ใช้จะกระโดดไปยังจุดต่อไป ได้โดยที่ต้นทางจะไม่ ปิด ตัวไปก่อน หรือจะ ไม่เปิดหน้านั้นค้าง นานจนเกินไป

4. สร้าง Webhook API เพื่อรอรับสัญญาณการ Add / Unblock

ขั้นตอนนี้เราจะมาพัฒนา Webhook API สำหรับรอรับข้อมูลของผู้ใช้งานที่กด add/unblock ตัว LINE OA มา และสร้างเงื่อนไขเพื่อยืนยันว่าเขามาจากช่องทางที่เราไปโปรโมทหรือไม่

กลับมาที่โฟลเดอร์ /functions กัน โดยให้เปิดไฟล์ index.js ขึ้นมา แล้วเพิ่มโค้ดด้านล่างนี้ไปที่จุดล่างสุดของไฟล์ เพื่อที่จะรอรับ follow event จาก LINE

exports.webhook = onRequest(async (req, res) => {
  for (const event of req.body.events) {
    switch (event.type) {
      case "follow": {
        // ...
      }
    }
  }
  res.send("ok");
});

ถัดไปเราจะเพิ่มโค้ดด้านล่างนี้ภายใน follow เพื่อดักเก็บ userId ที่มากับสัญญาณ แล้วนำไปใช้เรียก firebase.getFollower() เพื่อดึงประวิตการคลิก ad ออกมาจาก Firestore ที่เราได้เก็บไว้ใน ขั้นตอนที่ 2.3

แต่ในกรณีที่ผู้ใช้งานกด add/unblock ตัว LINE OA เองโดยไม่ผ่าน ad ก็จะไม่มีข้อมูลใน Firestore เราจึงต้องกำหนดค่า default ไปด้วย

const doc = await firebase.getFollower(event.source.userId);
let isAddedOrUnblockedFromAd = (doc.exists) ? doc.data().isAddedOrUnblockedFromAd : false;
const utmSource = (doc.exists) ? doc.data().utmSource : "none";
const timestamp = (doc.exists) ? doc.data().timestamp : Date.now();

ถัดไปให้เราเพิ่มโค้ด เพื่อสร้างเงื่อนไขก่อนที่จะยืนยันว่าผู้ติดตามมาจาก ad หรือไม่

// ถ้ายืนยันแล้วว่าผู้ใช้คนนั้นๆ add/unblock มาจากช่องทางไหน เราก็จะไม่ไปอัพเดท database
if (isAddedOrUnblockedFromAd) { break; }

// ถ้าระยะเวลาระหว่าง "การกด ad" กับ "การ add/unblock" ต่างกันมากกว่า 1 นาที
// เราจะถือว่า follower คนดังกล่าวไม่ได้มาจาก ad เราก็จะไม่ไปอัพเดท database
if (doc.exists) {
  const expectedTimeToAdd = 1000 * 60 * 1; // 1 minute
  const gapTimeOfAdding = Date.now() - doc.data().timestamp;
  if (gapTimeOfAdding > expectedTimeToAdd) { break; }
}

// กรณีที่ follower คนนั้นกด add/unblock มาจาก ad ค่าตรงนี้จะเป็น true
isAddedOrUnblockedFromAd = (utmSource !== "none");

ส่วนสุดท้ายในฟังก์ชัน follow ให้เราเพิ่มโค้ดด้านล่างนี้ เพื่อเพิ่มหรืออัพเดท ข้อมูลการ add/unblock ตัว LINE OA ของผู้ใช้แต่ละคน

await firebase.upSertFollower(event.source.userId, {
  isAddedOrUnblockedFromAd,
  utmSource,
  timestamp
});

5. Deploy และ Demo

และแล้วเราก็เดินทางมาถึงขั้นตอนสุดท้ายกันแล้ว โดยในขั้นตอนนี้ เราจะพาทุกคนไป deploy และ demo กัน

5.1 Deploy

สำหรับ LIFF app ที่เราพัฒนาไปใน ข้อ 3 ให้เราเลือกไป deploy ที่ไหนก็ได้ตามใจปรารถนา แต่ถ้านึกไม่ออกว่าที่ไหนดี ผมแนะนำ Firebase Hosting โฮสที่ให้เริ่มต้นใช้ฟรีกับพื้นที่ 10GB

รู้จัก Firebase Hosting ตั้งแต่ Zero จนเป็น Hero

โดยเมื่อเรา deploy แล้ว ให้เอา URL ที่ได้ไปอัพเดทที่ LIFF detail ใน LINE Login Channel ให้เรียบร้อย

สำหรับ Callable Function และ Webhook API ที่เราพัฒนาไปใน ข้อ 2 และ 4 ให้เราเปิด command line ขึ้นมาอีกครั้ง และให้แน่ใจว่าเราอยู่ที่ /functions จากนั้นใช้คำสั่งด้านล่างนี้เพื่อ deploy โค้ดของเรา

firebase deploy --only functions

เมื่อ deploy เสร็จเรียบร้อยเราจะเห็น Webhook URL โผล่อยู่ใน command line เลย ก็ให้เรา copy มา หรือกรณีที่ไม่พบก็ให้เข้าไปที่ Firebase console เลือกโปรเจคที่เราสร้างไว้ แล้วเลือกเมนู Functions จะเจอชื่อฟังก์ชันและ Webhook URL ที่นั่น

5.2 เชื่อมต่อ Webhook API กับ Messaging API Channel

เมื่อได้ Webhook URL มาอย่างสมใจปองแล้ว ก็เอา URL นี้ไปอัพเดทที่ Messaging API Channel ใน LINE Developers Console ตามที่ได้สร้างไว้ใน ขั้นตอนที่ 1 และให้มั่นใจว่าได้เปิดใช้ Use webhook ด้วยแล้ว

5.3 Demo

ขั้นตอนนี้จะทดสอบกับ LINE OA ที่เราเป็นเพื่อนอยู่แล้วไม่ได้ ดังนั้น ใครที่จะทดสอบกับตัว LINE OA ที่มีอยู่ จะต้อง block มันก่อน จากนั้นมาดูกันตั้งแต่กด URL ที่ฝังในที่ต่างๆจนไปถึงการ add/unblock ตัว LINE OA ว่าแต่ละแบบจะเป็นเช่นไร

5.3.1 เปิด LIFF URL และ Endpoint URL ในแอป LINE

ขั้นตอนนี้ผมจะเอา LIFF URL ไปใส่ใน Flex Message ให้เปรียบเสมือนผมไปลงโฆษณาที่แอป LINE และจะเอา Endpoint URL โพสลงไปในห้องแชทเพื่อทดสอบ

LIFF URL
https://liff.line.me/1653575653-M4RbrV6y?utm_source=line

Endpoint URL
https://mokmoon.com/liff1/friendpath/index.html?utm_source=line

ผลปรากฏว่าทั้ง LIFF URL และ Endpoint URL สามารถพาผู้ใช้ไปเปิดหน้า LINE OA ได้ทั้งคู่ และนอกจากนี้ข้อมูลก็ได้บันทึกลงไปใน Firestore แล้วว่าผมคลิกมาจากที่ไหน และค่า isAddedOrUnblockedFromAd จะเปลี่ยนเป็น true ก็ต่อเมื่อผมกด add/unblock ภายในเวลาที่กำหนด ซึ่งจากตัวอย่างก็คือภายใน 1 นาทีนั่นเอง

5.3.2 เปิด LIFF URL และ Endpoint URL ในแอป Facebook

ขั้นตอนนี้ผมจะเอา LIFF URL และ Endpoint URL ไปโพสลง Facebook แบบแยกโพสกันเพื่อทดสอบ

LIFF URL
https://liff.line.me/1653575653-M4RbrV6y?utm_source=facebook

Endpoint URL
https://mokmoon.com/liff1/friendpath/index.html?utm_source=facebook

ผลปรากฏว่าทั้ง LIFF URL และ Endpoint URL สามารถพาผู้ใช้จาก Facebook ไปเปิดหน้า LINE OA ได้ทั้งคู่ แต่จุดสังเกตของระบบที่ผมออกแบบไว้ก็คือ หากเรายังไม่ได้ add friend หรือ block ตัว LINE OA ไว้ เราจะคลิก ad อีกกี่ครั้งกี่ที่ก็ได้ แต่ระบบจะจำช่วงเวลาและช่องทางล่าสุดไว้ให้เสมอ

5.3.3 เปิด LIFF URL จาก QR code

ขั้นตอนนี้ผมจะเอา LIFF URL ไปใส่ลงใน QR code โดยแนบ utm_source เป็น LINECafe เพื่อทดสอบ

LIFF URL
https://liff.line.me/1653575653-M4RbrV6y?utm_source=LINECafe

ผลปรากฏว่าทั้งการแสกน QR code เพื่อเปิด LIFF URL ก็สามารถพาผู้ใช้ไปเปิดหน้า LINE OA ได้ และเราก็ track ได้ด้วยว่าผู้ใช้งานมาจากร้าน LINE Cafe

5.3.4 เปิด LIFF URL และ Endpoint URL ใน PC

ขั้นตอนนี้ผมจะเอา LIFF URL ไปเปิดกับ browser ใน PC ซึ่งมันจะ redirect ไปที่ Endpoint URL ของเราเมื่อเปิด ซึ่งในการทดสอบนี้ผมให้ utm_source เป็น google เพื่อให้เหมือนเราเจอโฆษณา LINE OA ของเราเป็น ad ของ Google นั่นเอง

ผลปรากฏว่าหากผู้ใช้งานไม่ได้ login กับ LINE ไว้ ตัวหน้าเว็บก็จะพาไป login ก่อนจึงจะพาต่อไปหน้าที่ให้ add friend ผ่าน QR code ของ LINE และข้อมูลใน Firestore ก็แสดงให้เห็นว่าเราเก็บค่า utm_source ได้จริง

Bonus วิธีดึงยอด followers ของช่องทางต่างๆไปทำ Report

แน่นอนว่า เมื่อเราเก็บค่าต่างๆไว้ใน Firestore แล้ว ก็คงต้อง query ออกมาเพื่อทำรายงานสรุปผลประสิทธิภาพของช่องทางต่างๆที่คุณไปโปรโมท LINE OA กัน ผมจึงเตรียมวิธีการสร้าง API เพื่อดึงจำนวน followers แต่ละช่องทางมาให้แล้วดังนี้

ในไฟล์ /functions/index.js ให้เพิ่มโค้ดด้านล่างนี้ที่จุดล่างสุดของไฟล์

exports.count = onRequest(async (req, res) => {
  const utmSource = (req.query.utm_source || "none");
  const snapshot = await firebase.countUtmResource(utmSource);
  res.send(`The number of followers who added/unblocked the LINE OA from <b>${utmSource}</b> is <b>${snapshot.data().count}</b>`);
});

โดยโค้ดด้านบนเราจะสร้าง API ที่ชื่อ count มาเพื่อรับ query param ชื่อ utm_source โดยค่าเริ่มต้นคือ none (follower เพิ่มเพื่อนเอง ไม่ได้มาจากช่องทางที่เราไปโปรโมทไว้) จากนั้นจะเอาค่า utmSource ที่ได้ส่งไปกับฟังก์ชัน firebase.countUtmResource() ที่เราเตรียมไว้ใน ขั้นตอนที่ 2.3 เพื่อนับจำนวน followers ที่มาจากช่องทางนั้นๆ และได้ยืนยันแล้วว่ามาจากช่องทางที่เราไปโปรโมทจริงๆ

โดยเมื่ออัพเดทโค้ดเรียบร้อยแล้ว ให้เปิด command line ขึ้นมาอีกครั้ง และให้แน่ใจว่าเราอยู่ที่ /functions จากนั้นใช้คำสั่งด้านล่างนี้เพื่อ deploy โค้ดของเรา

firebase deploy --only functions

เมื่อ deploy แล้วก็ไปเอา URL จาก Firebase console มาลองเปิดดู ก็จะได้ผลลัพธ์ประมาณนี้ค้าบ

สิ่งที่ระบบ Friend Path ฉบับ DIY มีเพิ่มเติมจากระบบ Friend Path ใน OA Manager

ระบบ Friend Path ฉบับ DIY ที่ผมพาทุกคนไปสร้างนั้น จะแก้ pain point บางอย่างที่ ณ วันที่เขียนบทความนี้ ระบบ Friend Path ของ OA Manager ยังไม่มี ได้แก่

✅ DIY รองรับการกระโดดจาก In-App Browser เพียงคลิกเดียว

✅ DIY กดคลิกเปิดจาก LINE Desktop ได้

✅ DIY ไม่ได้รู้เฉพาะช่องทางว่ามาจากไหนเท่าไร แต่รู้ถึงตัวตนของคนคนนั้นด้วย

✅ DIY ได้ข้อมูล userId ซึ่งเอาไปใช้อะไรต่อได้มากมาย

✅ จำนวน Query param ของ DIY มีได้ไม่จำกัด

✅ ชื่อ Query param ของ DIY ใช้ร่วมกับ Google Analytics ได้

✅ DIY ปรับแต่ง OG Meta Tags ได้เอง ช่วยให้ตอนแชร์ URL ตาม Social Platform สามารถกำหนด Image และ Title เองได้

✅ ข้อมูลที่ DIY ให้มีถึง ระดับเวลา ทำให้หาช่วงเวลาทองของการโปรโมทได้

✅ ข้อมูลที่ DIY จะอัพเดทแบบ Real-time

✅ ข้อมูลที่ DIY อยู่ใน DB ตัวเอง จึงยืดหยุ่น นำไปสร้าง API เพื่อเชื่อมต่อกับ Platform อื่นๆได้ง่าย

สรุป

มาถึงตรงนี้ ถ้าใครที่อ่านมาเรื่อยๆ แล้วยังไม่ได้ลงมือทำ ผมแนะนำให้ clone repo ด้านล่างนี้ไปได้เลย(แต่ฝากกด Star ให้ด้วยจะขอบคุณมากๆครับ)

GitHub - jirawatee/Friend-Path-of-LINE-OA: A demo in how to track users to see which channels they added/unblocked the LINE OA from by integrating LINE Front-end Framework, LINE Messaging API, Cloud Functions for Firebase, and Cloud Firestore.

หวังว่าเนื้อหาการสร้างระบบ Friend Path ฉบับ DIY ในบทความนี้ จะตอบโจทย์นักพัฒนา ผู้ประกอบการ โดยเฉพาะอย่างยิ่งทีม Marketing ให้ทลายข้อจำกัดและปลดล๊อควิธีการได้มาซึ่งข้อมูล ที่จำเป็นสำหรับการวัดผล Marketing Campaign ตามช่องทางต่างๆที่โปรโมทตัว LINE OA ทั้งของตัวเองและของลูกค้าได้อย่างมีประสิทธิภาพมากขึ้นในอนาคตครับ

รู้หมดใครเพิ่มเพื่อน LINE OA จากช่องทางไหน ด้วยระบบ Friend Path ที่คุณก็สร้างเองได้ was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

ครั้งหนึ่งนานมาแล้ว ผมเคยเห็น LIFF CLI v0.1.0 ที่ทาง LINE ปล่อยให้นักพัฒนาได้ใช้งาน ผมใคร่สัมผัสจับต้องมัน แต่ถูกเพื่อนห้ามเอาไว้ เนื่องด้วยขณะนั้นบร๊ะลานุภาพของมันยังมิต้องตาต้องใจ แต่บัดนี้ บร๊ะลานุภาพของมันได้เพิ่มพูนถึง v0.2.0 ที่จะนำไปใช้ในงานได้แล้ว ผมจึงจะนำเครื่องมือนี้มารีวิวให้ชมกัน

LIFF CLI คืออะไร

LIFF CLI คือ Command Line Interface ที่ช่วยให้นักพัฒนาสามารถบริหารจัดการ LIFF app ทั้งการ create, update, list และ delete รวมถึงการ run & debug ใน local ได้ง่ายและสะดวกผ่าน Terminal หรือ Command-line tool (ต่อไปขอเรียกว่า Terminal)

สำหรับนักพัฒนา แค่อ่านมันไม่พอ! ดังนั้นบทความนี้ผมจะพาทุกคนไป learning by doing ทีละขั้นทีละตอน โดยเนื้อหาจะครอบคลุมตามหัวข้อดังนี้

1. สร้าง LINE Login Channel
2. ติดตั้ง Node.js และ LIFF CLI
3. บริหารจัดการ LIFF app ด้วย CLI
4. Setup และ Run ตัว LIFF app ใน Local

1. สร้าง LINE Login Channel

เนื่องจาก LIFF คือบริการที่อยู่ภายใต้ LINE Login Channel ดังนั้นจุดเริ่มต้นคือเราต้องมี LINE Login Channel กันซะก่อน โดยถ้าใครที่มีอยู่แล้วให้ข้ามขั้นตอนนี้ไป แต่ถ้ายังไม่มีให้ทำตามข้อ 1 และ 2 ของบทความด้านล่างนี้

สร้างและพัฒนา LIFF v2 ให้ดึง Email ของผู้ใช้ออกมาได้

2. ติดตั้ง Node.js และ LIFF CLI

การติดตั้ง LIFF CLI นั้นสามารถทำผ่าน npm หรือ yarn ก็ได้ แต่เนื่องด้วย LIFF CLI จะ run อยู่บน Node.js ดังนั้นในบทความนี้ผมจะเลือกติดตั้งผ่าน npm ที่มาพร้อมกับการติดตั้ง Node.js ไปเลย

2.1 ติดตั้ง Node.js และ npm

ให้เข้าไปดาวน์โหลดและติดตั้ง Node.js ให้เรียบร้อย ซึ่งเมื่อติดตั้งเรียบร้อยแล้วสามารถตรวจสอบว่าทั้ง node และ npm พร้อมใช้งานในเครื่องเราโดยเปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่งตามด้านล่าง

node --version // แนะนำว่าควรเป็น v20 หรือใหม่กว่า
npm --version

หากเห็นตัวเลขเวอร์ชันโผล่มาก็เป็นอันว่าผ่าน

2.2 ติดตั้ง LIFF CLI

ใน Terminal ให้ใช้คำสั่งด้านล่างนี้เพื่อติดตั้ง LIFF CLI

npm install -g @line/liff-cli

3. บริหารจัดการ LIFF app ด้วย CLI

ปัจจุบันนักพัฒนาสามารถใช้ LIFF CLI ในการ Create, Update, List และ Delete ตัว LIFF app ได้ โดยมีขั้นตอนดังนี้

3.1 เพิ่มและตั้งค่า Default กับ Channel

จุดเริ่มขบวนของการจัดการ LIFF app ทั้งหลายใน LINE Login Channel นั้น เราจะต้องผูก Channel ที่ต้องการเข้ากับ LIFF CLI โดยให้เปิด Terminal แล้วพิมพ์คำสั่ง
liff-cli channel add ตามด้วย Channel ID ที่ได้จากข้อที่ 1 ลงไป (ตัวอย่าง Channel ID คือ 1234567890)

liff-cli channel add 1234567890

จากนั้นตัว LIFF CLI จะถามหา Channel Secret ก็ให้ copy มาวาง ซึ่งถ้าถูกต้อง ก็จะมีข้อความยืนยันการเพิ่ม Channel ตามตัวอย่างด้านล่างนี้

Channel Secret?: ********************************
# Channel 1234567890 is now added.

3.2 ตั้งค่า Default ให้กับ Channel

ขั้นตอนนี้เป็น optional เพื่อให้ LIFF CLI จดจำ Channel ID ซึ่งจะช่วยให้นักพัฒนาสามารถเรียกคำสั่งถัดๆไปในการจัดการ LIFF app สำหรับ Channel นั้นได้สั้นลง

ใน Terminal ให้พิมพ์คำสั่ง liff-cli channel use ตามด้วย Channel ID ที่เราได้เพิ่มไว้ในข้อก่อนหน้า ซึ่งถ้าเรียบร้อย ก็จะมีข้อความยืนยันตามตัวอย่างด้านล่างนี้

liff-cli channel use 1234567890
# Channel 1234567890 is now selected.

3.3 Create a LIFF app

ขั้นตอนนี้เราจะมาลองสร้าง LIFF app ผ่านคำสั่ง liff-cli app create กับ LIFF CLI กัน โดยคำสั่งในการสร้างจะมีส่วนประกอบดังนี้

• --channel-id Channel ID ของ LINE Login Channel [optional]
• --name ชื่อของ LIFF app (ห้ามมีคำว่า LINE) [Required]
• --endpoint-url URL ขึ้นต้นด้วย HTTPS [Required]
• --view-type ขนาดในการแสดงผล LIFF app ซึ่งมี 3 ขนาดได้แก่ full, tall และ compact [Required]

โดยเมื่อ run คำสั่งสร้าง LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app create \
   --name "LIFF CLI Demo" \
   --endpoint-url https://mokmoon.com/ \
   --view-type full
# Successfully created LIFF app: 1234567890-AbcdEfgh

หมายเหตุ: ตัวอย่างคำสั่งด้านบนจะไม่ได้ระบุ --channel-id เนื่องจากได้มีการตั้งค่า default ให้กับ channel มาแล้ว

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่ามี LIFF app ถูกสร้างขึ้นแล้ว

3.4 Update a LIFF app

ขั้นตอนนี้เราจะมาลองอัพเดท LIFF app ผ่านคำสั่ง liff-cli app update กับ LIFF CLI กัน โดยคำสั่งในการอัพเดทจะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ต้องการอัพเดท [Required]
• --channel-id Channel ID ของ LINE Login Channel [optional]
• --name ชื่อของ LIFF app (ห้ามมีคำว่า LINE) [optional]
• --endpoint-url URL ขึ้นต้นด้วย HTTPS [optional]
• --view-type ขนาดในการแสดงผล LIFF app ซึ่งมี 3 ขนาดได้แก่ full, tall และ compact [optional]

โดยเมื่อ run คำสั่งอัพเดท LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app update \
   --liff-id 1234567890-Jv5mrQdE \
   --view-type tall
# Successfully updated LIFF app: 1234567890-Jv5mrQdE

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่า LIFF app ได้ถูกอัพเดทขนาดแล้ว

3.5 List LIFF apps

ขั้นตอนนี้เราจะมาลอง list ตัว LIFF app ที่มีอยู่ใน Channel ออกมาให้หมด ผ่านคำสั่ง liff-cli list กับ LIFF CLI กัน โดยคำสั่งในการ list จะมีส่วนประกอบดังนี้

• --channel-id Channel ID ของ LINE Login Channel [optional]

โดยเมื่อ run คำสั่ง list ตัว LIFF app เสร็จจะมี LIFF ID และ ชื่อ แสดงตามตัวอย่างด้านล่าง

liff-cli app list
# LIFF apps:
# 1234567890-Jv5mrQdE: LIFF CLI Demo

3.6 Delete a LIFF app

ขั้นตอนนี้เราจะมาลองลบ LIFF app ผ่านคำสั่ง liff-cli app delete กับ LIFF CLI กัน โดยคำสั่งในการลบจะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ต้องการอัพเดท [Required]
• --channel-id Channel ID ของ LINE Login Channel [optional]

โดยเมื่อ run คำสั่งลบ LIFF app เสร็จ จะมีข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli app delete \
   --liff-id 1234567890-Jv5mrQdE \
   --channel-id 1234567890
# Deleting LIFF app...
# Successfully deleted LIFF app: 1234567890-Jv5mrQdE

4. Setup และ Run ตัว LIFF app ใน Local

ฟีเจอร์ใหม่ใน LIFF CLI ที่มาตั้งแต่ v0.2.0 เป็นต้นไป คือมันสามารถสร้าง local development server ขึ้นมาเพื่อช่วยให้เรา run ตัว LIFF app ใน local ได้

4.1 สร้าง Cerificate และ Private Key

จุดเริ่มขบวนของการ run ตัว LIFF app ใน local คือเราจะต้องสร้าง valid certificate ขึ้นมาก่อน โดยให้เปิด Terminal ขึ้นมาแล้วติดตั้ง mkcert ผ่านคำสั่ง

# For macOS (using Homebrew)
brew install mkcert

# For Windows (using Chocolatey)
choco install mkcert

จากนั้นติดตั้ง Certificate Authority(CA) ใน local ด้วยคำสั่ง

mkcert -install
# The local CA is now installed in the system trust store! ⚡️

แล้วสร้างไฟล์ certificate(localhost.pem) และไฟล์ private key (localhost-key.pem) ด้วยคำสั่ง

mkcert localhost

# Created a new certificate valid for the following names 📜
# - "localhost"

# The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
# It will expire on 24 December 2026 🗓

เสร็จแล้วเราจะได้ไฟล์ทั้งสองมาละครับ

4.2 Run ตัว LIFF app ใน Local

ขั้นตอนนี้เราจะสร้าง local proxy server เพื่อมา run ตัว LIFF app ผ่านคำสั่ง serve กับ LIFF CLI กัน โดยคำสั่งในการ run จะมีส่วนประกอบดังนี้

• --liff-id LIFF ID ของ LIFF app ที่ได้ตั้งค่า default channel [Required]
• --url URL ของ local development server [Required]

การ run คำสั่ง serve จะต้อง run ใน directory เดียวกับไฟล์ localhost.pem และ localhost-key.pem โดยเมื่อ run คำสั่ง serve แล้วก็จะพบข้อความยืนยันตามตัวอย่างด้านล่าง

liff-cli serve \
   --liff-id 1234567890-Jv5mrQdE \
   --url http://localhost:5000/

# Successfully updated endpoint url for LIFF ID: 1234567890-Jv5mrQdE.

→  LIFF URL:     https://liff.line.me/1234567890-Jv5mrQdE
→  Proxy server: https://localhost:9000/

และถ้าเข้าไปดูใน LINE Login Channel จะพบว่า LIFF app ได้ถูกอัพเดท Endpoint URL ไปเป็น https://localhost:9000/ แล้ว

คำเตือน: ห้ามใช้คำสั่ง serve กับ LIFF ID ที่อยู่ใน prod เป็นอันขาด เพราะตัว LIFF CLI จะเอา URL ของ local proxy server ไปแทนที่ใน Endpoint URL ของ LIFF app ทำให้ผู้ใช้งานทั่วไปจะไม่สามารถใช้งาน LIFF app ตัวนั้นได้

คราวนี้มาลองเปิด LIFF app ด้วย LIFF URL กัน ซึ่งผลปรากฏว่า…มันจะ redirect ไปเปิด https://localhost:9000/ ได้แล้วทุกคน!

ปล. โค้ดในหน้าเว็บตัวอย่างจะมีการรองรับการ Login สำหรับ External Brower เพื่อดึงข้อมูลผู้ใช้มาแสดง ซึ่งมันเวิร์คกับ https://localhost:9000/ ด้วย (Copy ไปลองกันได้ แต่เปลี่ยน LIFF ID กันด้วยนะ)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
  <title>LIFF CLI Demo</title>
  <style>
    button { display: block; width: 100%; padding: 8px 0; margin: 8px auto }
    #pictureUrl { display: block; margin: 0 auto; width: 25%; display: -moz-box; display: -webkit-box; display: box; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; -moz-border-radius: 256px; -webkit-border-radius: 256px; border-radius: 256px;
    }
  </style>
</head>
<body>
  <img id="pictureUrl" width="25%" />
  <p id="displayName"></p>
  <p id="statusMessage"></p>
  <p id="language"></p>
  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <script>
    function runApp() {
      liff.getProfile().then(profile => {
        document.getElementById("displayName").innerHTML = '<b>DisplayName:</b> ' + profile.displayName;
        document.getElementById("statusMessage").innerHTML = '<b>StatusMessage:</b> ' + profile.statusMessage;
        document.getElementById("pictureUrl").src = profile.pictureUrl;
        document.getElementById("language").innerHTML = '<b>Language:</b> ' + liff.getAppLanguage();
      }).catch(err => console.error(err));
    }
    liff.init({ liffId: "1234567890-Jv5mrQdE" }, () => {
      if (liff.isLoggedIn()) {
        runApp()
      } else {
        liff.login();
      }
    }, err => console.error(err.code, error.message));
  </script>
</body>
</html>

4.3 Debug ตัว LIFF app ด้วย LIFF Inspector

ต่อยอดจากคำสั่ง serve ในข้อก่อนหน้า สำหรับใครที่ใช้ LIFF Inspector เพื่อ debug ตัว LIFF app ผ่าน ChromeDevTools เราสามารถเพิ่ม option --inspect เข้าไปกับคำสั่ง serve ตามตัวอย่างด้านล่างนี้

liff-cli serve \
   --liff-id 1234567890-AbcdEfgh \
   --url http://localhost:3000/ \
   --inspect

# Successfully updated endpoint url for LIFF ID: 1234567890-AbcdEfgh.

→  LIFF URL:     https://liff.line.me/1234567890-AbcdEfgh
→  Proxy server: https://localhost:9000/?li.origin=wss%3A%2F%2Flocalhost%3A9222
Debugger listening on wss://192.168.1.6:9222

โดยเมื่อเราเปิด LIFF URL ตัว Terminal ก็จะพ่น DevTools URL ที่ขึ้นต้นด้วย devtools://devtools/ ออกมาตามตัวอย่างด้านล่างนี้

connection from client, id: 1234567890-AbcdEfgh
DevTools URL: devtools://devtools/bundled/inspector.html?wss=localhost:9222/?hi_id=1234567890-AbcdEfgh

ซึ่งเราสามารถนำ DevTools URL ที่ได้ไปเปิดผ่าน Google Chrome เพื่อ debug ตัว LIFF app ได้

สรุป

นอกจากที่ LIFF CLI จะช่วยให้นักพัฒนาสามารถ Create, Update, List และ Delete ตัว LIFF app ได้แล้ว การมาของคำสั่ง serve ใน LIFF CLI v0.2.0 ที่สามารถ run ตัว LIFF app ใน local ได้ ก็ถือเป็น killer feature ที่เหล่าพัฒนารอคอย เพราะการพัฒนา LIFF app จากนี้ไป จะสะดวกและรวดเร็วขึ้นอย่างมากแน่นอน

หวังว่าบทความนี้จะทำให้เพื่อนๆนักพัฒนาสามารถนำ LIFF CLI ไปใช้ต่อ ให้ก่อประโยชน์กับงานสืบต่อไป แล้วพบกันใหม่บทความหน้า สวัสดีค้าาาบ

รู้จักกับ LIFF CLI ตั้งแต่ Zero จนเป็น Hero was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

หนึ่งใน Pain point ที่นักพัฒนา LINE มักจะเจอกันคือ การ handle ประสบการณ์ผู้ใช้ระหว่างที่รอ chatbot ตอบกลับ โดยเคสนี้จะเกิดกับการที่ระบบจำเป็นต้องใช้เวลาในการประมวลผลข้อมูลที่มากกว่าปกติ เช่น การนำรูปไปทำ Image Processing, การเอาข้อมูลไป manipulate, การออกรายงาน, หรือการเชื่อมต่อ Gen AI เป็นต้น ซึ่งตัวอย่างหนึ่งที่ผมเองก็เคยต้องรอและลุ้นการตอบกลับของ LINE Chatbot คือการ detect โลโก้จากภาพที่ส่งไปใน Live Coding

การต้องรอการตอบสนองที่นานกว่าปกตินี้เอง ทำให้ผู้ใช้งานจำนวนมากรู้สึกว่าระบบขัดข้อง และนำมาซึ่งการส่งข้อความซ้ำๆไปในห้องแชท เพื่อหวังว่าจะกระตุ้นการตอบกลับ หรือที่วัยรุ่นเขาเรียกกันว่าการ “ฟลัด”(flood) และการฟลัดนี้เองที่เป็นหนึ่งในสาเหตุที่ทำให้ UX การใช้งาน LINE Chatbot เพี้ยนไป รวมถึงอาจทำให้ระบบทำงานหนักขึ้นและมีปัญหาตามมาได้

โดยปัญหานี้ถูกยกขึ้นมาถามใน community เรื่อยมา และ solution ที่เป็นไปได้ก่อนหน้านี้คือการ reply สถานะการทำงานไปก่อน แล้วต่อด้วยการ push ข้อความผลลัพธ์ตามมา แต่วิธีดังกล่าวนี้นักพัฒนาก็จำเป็นจะต้องเสียโควต้าของข้อความไปด้วย

และแล้ว เมษายน ปี 2024 ฝันของนักพัฒนาในบ้านเราก็เป็นความจริง เมื่อทาง LINE ได้รับฟัง feedback เรื่องนี้ และออกฟีเจอร์ Loading Animation เพื่อมาปรับปรุง UX การใช้งาน LINE Chatbot ให้ดีขึ้น

รู้จักกับ Loading Animation

ฟีเจอร์ Loading Animation นี้จะเป็นฟีเจอร์ที่มาในรูปแบบของ API ที่ให้นักพัฒนาสามารถ request เพื่อให้ตัว LINE Chatbot แสดงสถานะการกำลังประมวลผลอยู่ โดยมีหน้าตาเป็นแบบนี้

โดยตัว Loading Animation จะมี เงื่อนไขในการแสดงผล และ เงื่อนไขที่ตัวมันจะหายไปดังนี้

เงื่อนไขที่ Loading Animation จะแสดงออกมาได้

• มันจะสามารถแสดงผลได้ในห้องแชทแบบ one-on-one ระหว่าง ผู้ใช้งาน และ LINE Chatbot เท่านั้น
• มันจะแสดงผลได้ในขณะที่ผู้ใช้งานเปิดหน้าแชทของ LINE Chatbot เท่านั้น

เงื่อนไขที่ Loading Animation จะหายไป

• มันจะหายไปทันทีเมื่อ LINE Chatbot ส่งข้อความมาใหม่
• มันจะหายไปทันทีเมื่อผู้ใช้งานออกจากหน้าแชทนั้นๆ
• มันจะหายไปทันทีเมื่อผ่านระยะเวลาที่กำหนดให้มันแสดงผลจาก API ที่ request

Loading Animation API

คราวนี้เรามาดู spec ของ API กันหน่อยว่ามีรายละเอียดอะไรบ้าง

Endpoint URL: https://api.line.me/v2/bot/chat/loading/start

Method: post

Headers:
  content-type: application/json
  Authorization: Bearer {channel access token}

Body:
  chatId: userId ของผู้ใช้งาน (groupId กับ roomId หมดสิทธิ์นาจา)
  loadingSeconds: [Optional] ระยะเวลาในการแสดงผลเป็นวินาที (5-60 เพิ่มลดได้ทีละ 5) โดยค่า default คือ 20

Rate limit ของ Loading Animation API คือ 100 requests/วินาที

ซึ่งผมก็ได้ลองเอามาประยุกต์ใช้งานจริงกับ LINE Chatbot ของ LINE Developer TH แล้ว โดยเอาง่ายๆคือเมื่อไรที่มี webhook events เข้ามาผมก็ request ตัว API ทันทีเลยตามตัวอย่าง JavaScript ด้านล่างนี้

exports.webhook = onRequest(async (req, res) => {
  const events = req.body.events;
  for (const event of events) {
    const userId = event.source.userId;
    await loading(userId);
    switch (event.type) {
      case "message":
        // ...
        break;
      // ...
    }
  }
  res.end();
});

function loading(userId) {
  return axios({
    method: "post",
    url: "https://api.line.me/v2/bot/chat/loading/start",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.CHANNEL_ACCESS_TOKEN}`
    },
    data: { chatId: userId }
  });
}

ส่วนใครที่อยากลองสัมผัสประสบการณ์​ก่อนว่า Loading Animation มันเป็นอย่างไร ให้เพิ่มเพื่อนกับ @linedevth ใน LINE แล้วพูดคุยกับ LINE Chatbot ตัวนี้ดูได้ครับ

หมายเหตุ

• Loading Animation API ใช้งานได้ฟรีไม่มีค่าใช้จ่าย
• Loading Animation สามารถแสดงผลได้ใน LINE สำหรับ iOS และ Android ตั้งแต่ v13.16.0 และใน LINE สำหรับ Desktop ตั้งแต่ v9.1.2 เป็นต้นไป
• กรณีที่เวอร์ชันของ LINE สำหรับ Android ตรงตามเงื่อนไข และ HTTP status code จากการ request ตัว API ได้ 202 กลับมาแต่ Loading Animation ไม่แสดงผล ให้ kill app แล้วลองใหม่
• หากมีการ request ตัว API ซ้ำในขณะที่ Loading Animation เดิมยังไม่หายไป ตัว Loading Animation จะแสดงผลต่อไป โดยจะยึดเวลาการหายไปของ request ล่าสุดไปแทน

สรุป

สำหรับฟีเจอร์ Loading Animation ต้องขอชื่นชมทาง LINE เลยว่างานนี้ เขาคิดมาครบดีจริงๆ ทั้งเรื่องการหายไปของ Loading Animation เมื่อมีข้อความใหม่มาจาก LINE Chatbot หรือเรื่องการหายไปแบบที่นักพัฒนาสามารถกำหนดเวลาเองได้ แถมใช้งานฟรีอีก ซึ่งผมมั่นใจเลยว่าฟีเจอร์นี้จะช่วยยกระดับ UX การใช้งาน LINE Chatbot ของคุณให้สมูธขึ้นได้อย่างแน่นอน

ท้ายนี้ ใครที่สนใจอยากลองใช้ Loading Animation ผมแนะนำให้ลองเอาไปประยุกต์เข้ากับ LINE Chatbot x Gen AI ดู ซึ่งมันจะเหมาะมากๆเมื่อนำไปคั่นจังหวะที่ Gen AI กำลังสร้าง content โดยทุกคนสามารถเริ่มต้นง่ายๆกับคอร์สเรียนออนไลน์ Building LINE Chatbot with ChatGPT and Gemini นี้ ซึ่งก็ฟรีอีก ^^ แล้วพบกันใหม่ในบทความหน้า สวัสดีค้าบ

Loading Animation สิ่งเล็กๆที่มาเติมเต็ม UX ให้กับ LINE Chatbot ระดับอัลตร้าสมูท! was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

ปี 2023 ถือได้ว่าเป็นการเริ่มต้นยุค AI อย่างแท้จริง จากการที่ OpenAI เปิดตัว ChatGPT แล้วตามติดด้วย Bard จาก Google ที่ใครๆก็หันมาให้ความสนใจในการใช้ประโยชน์เพื่อความสะดวกสบาย เช่น ค้นหาข้อมูล, แต่งบทความ, คำนวณ, แปลความหมาย หรือแม้กระทั่ง เขียนโค้ด

ปีที่ผ่านมา ผมก็มีการหยิบเอา PaLM2 ซึ่งเป็น Large Language Models(LLMs) ที่อยู่เบื้องหลัง Bard มาเชื่อมต่อกับ LINE Chatbot แล้วบอกเล่าวิธีการผ่านบทความมาแล้ว ซึ่งหลายคนที่ได้อ่านคงจะทราบแล้วว่า PaLM2 มันรองรับเฉพาะภาษาอังกฤษ

แต่แล้วช่วงปลายปีที่ผ่านมา Google ก็ได้สร้างเซอร์ไพรส์ด้วยการเปิดตัว Gemini ซึ่งเป็น AI Model ที่เก่งที่สุดที่ทีม Google DeepMind เคยมีออกมา โดยมาพร้อมกับการรองรับ 38 ภาษารวมถึงภาษาไทย และที่ล้ำไปกว่าเดิมคือมันสามารถเข้าใจ input ที่หลากหลายมากขึ้นแบบ Multimodal ทั้ง Text, Code, Audio, Image, และ Video

เอาหละ บทความนี้ ผมจะพาทุกคนไปดูความสามารถของ Gemini ผ่านการสร้าง LINE Chatbot ที่เชื่อมต่อกับ Gemini API ทั้งแบบ Text-Only และแบบ Multimodal ด้วย Cloud Functions for Firebase 2nd Gen ตามสไตล์ Zero to Hero ง่ายๆเพียง 5 ขั้นตอนกัน

1. สร้าง Provider และ Channel

ใครที่ยังไม่เคยสร้าง Provider และ Channel สำหรับ LINE Chatbot มาก่อน ก็ให้อ่านบทความปฐมบทด้านล่างนี้ แต่ใครที่คุ้นเคยอยู่แล้วให้ข้ามขั้นตอนนี้ไปได้เลย

ปฐมบทการสร้าง LINE Bot

2. ติดตั้ง Cloud Functions for Firebase

ใครที่ยังไม่เคยพัฒนาโปรแกรมด้วย Cloud Functions for Firebase มาก่อน ก็ให้อ่านบทความด้านล่างนี้(โดยเฉพาะข้อ 2) แต่สำหรับคนที่คุ้นเคยแล้วให้ข้ามโลด

รู้จัก Cloud Functions for Firebase 2nd Gen ตั้งแต่ Zero จนเป็น Hero

3. สร้าง Webhook สำหรับ LINE Chatbot

3.1 สร้าง Module สำหรับการเรียกใช้ Messaging API

ในตัวอย่างนี้ผมจะใช้ axios มาเป็นตัวช่วยในการสร้าง request ซึ่งจะต้องทำการติดตั้ง dependency ตัวนี้ก่อน โดยให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่ง

npm install axios --save

ถัดไปให้สร้างไฟล์ /functions/.env แล้วให้ไป copy ค่า Channel Access Token ของ Messaging API Channel ใน LINE Developers console จากข้อ 1 มาระบุ

CHANNEL_ACCESS_TOKEN=YOUR-CHANNEL-ACCESS-TOKEN

และเพื่อโค้ดที่สั้น เป็นระเบียบ เราจะแยกฟังก์ชันสำหรับการเรียกใช้ Messaging API ออกมาเป็น module โดยภายในจะมีฟังก์ชัน

• getImageBinary() สำหรับการดึง binary ของภาพที่ผู้ใช้ส่งผ่าน LINE
• reply() สำหรับการตอบข้อความกลับหาผู้ใช้

ขั้นตอนนี้ให้สร้างไฟล์ /functions/utils/line.js แล้วให้ copy โค้ดด้านล่างนี้ไปวาง

const axios = require("axios");

const LINE_HEADER = {
  "Content-Type": "application/json",
  Authorization: `Bearer ${process.env.CHANNEL_ACCESS_TOKEN}`
};

const getImageBinary = async (messageId) => {
  const originalImage = await axios({
    method: "get",
    headers: LINE_HEADER,
    url: `https://api-data.line.me/v2/bot/message/${messageId}/content`,
    responseType: "arraybuffer"
  })
  return originalImage.data;
}

const reply = (token, payload) => {
  return axios({
    method: "post",
    url: "https://api.line.me/v2/bot/message/reply",
    headers: LINE_HEADER,
    data: { replyToken: token, messages: payload }
  });
};

module.exports = { getImageBinary, reply };

3.2 สร้างและเชื่อมต่อ Webhook กับ Messaging API Channel

ให้เปิดไฟล์ /functions/index.js แล้วให้ copy โค้ดด้านล่างนี้ไปแทนที่โค้ดเดิม เพื่อเตรียมรับ Webhook event ประเภท text และ image จาก LINE

const {onRequest} = require("firebase-functions/v2/https");
const line = require("./utils/line");

exports.webhook = onRequest(async (req, res) => {
  if (req.method === "POST") {
    const events = req.body.events;
    for (const event of events) {
      switch (event.type) {
        case "message":
          if (event.message.type === "text") {
          }
          if (event.message.type === "image") {
          }
          break;
      }
    }
  }
  res.send(req.method);
});

แล้วก็ให้เปิด command line ขึ้นมาอีกครั้ง และให้แน่ใจว่าเราอยู่ที่ functions/ จากนั้นใช้คำสั่งด้านล่างนี้เพื่อ deploy ตัว webhook ของเราขึ้น production

firebase deploy --only functions

เมื่อ deploy เสร็จเรียบร้อยเราจะเห็น Webhook URL โผล่อยู่ใน command line เลย ก็ให้เรา copy มา หรือกรณีที่ไม่พบก็ให้เข้าไปที่ Firebase console เลือกโปรเจคที่เราสร้างไว้ แล้วเลือกเมนู Build > Functions จะเจอชื่อฟังก์ชันและ Webhook URL ที่นั่น

เมื่อได้ Webhook URL มาอย่างสมใจปองแล้ว ก็เอา URL นี้ไปอัพเดทที่ Messaging API Channel ใน LINE Developers console ตามที่ได้สร้างไว้ในข้อที่ 1 และให้มั่นใจว่าได้เปิดใช้ Use webhook ด้วยแล้ว

4. สร้าง API Key ใน Google AI Studio

ขั้นตอนนี้เราจะพาทุกคนไปสร้าง API key สำหรับการใช้งาน Gemini API กัน โดยเริ่มจากคลิกลิงค์ https://aistudio.google.com/app/api-keys แล้วให้กดปุ่ม Create API key ที่มุมขวา จากนั้นจะพบทางเลือกที่ให้เรากดสร้าง API key ด้วยการสร้างโปรเจคใหม่ หรือ จะเลือกโปรเจคที่มีอยู่แล้วใน Google Cloud ก็ได้(ถ้ามี) ซึ่งเมื่อสร้างเสร็จ เราก็จะได้ API key มา

จากนั้นให้เราเพิ่มตัวแปร API_KEY ในไฟล์ /functions/.env แล้วให้เอา API key ระบุลงไปแบบนี้

CHANNEL_ACCESS_TOKEN=YOUR-CHANNEL-ACCESS-TOKEN
API_KEY=YOUR-API-KEY

5. เชื่อมต่อ LINE Chatbot เข้ากับ Gemini API

5.1 สร้าง Module สำหรับการเรียกใช้ Gemini API

สำหรับ module ที่เราจะสร้างจะแบ่งการทำงานออกเป็น 3 ฟังก์ชันดังนี้

• textOnly() สร้างเนื้อหาจาก input ที่เป็น text เหมาะกับการโต้ตอบรายครั้ง และไม่จำเป็นต้องมีความต่อเนื่อง แนวๆถามมาตอบไป
• multimodal() สร้างเนื้อหาจาก input ที่เป็น text และ image เหมาะกับการโต้ตอบแบบรายครั้ง ที่ต้องการให้ output สื่อถึงความสัมพันธ์กับภาพ โดยภาพจะรองรับทั้ง PNG, JPEG, WebP, HEIC, HEIF และยังสามารถแนบภาพได้สูงสุด 16 ภาพ ใน 1 request (Google แนะนำว่าแนบภาพเดียวจะได้ผลลัพธ์ที่ตรงกว่า)
• chat() สร้างเนื้อหาจาก input ที่เป็น text เหมาะกับการโต้ตอบที่ต่อเนื่องกัน(multi-turn conversation) โดยเราสามารถเก็บประวัติการสนทนาเพื่อให้ AI เรียนรู้ในการสร้างเนื้อหาที่ต่อเนื่องในการตอบครั้งถัดไปได้ ซึ่งประวัติการสนทนาจะอยู่ในรูปแบบของ array ที่จะเก็บการโต้ตอบของ user และ model ตามตัวอย่างด้านล่างนี้

history: [
  {
    role: "user",
    parts: [{ text: "สวัสดีค่ะ" }],
  },
  {
    role: "model",
    parts: [{ text: "สวัสดีครับ ผมชื่อตี๋, ผู้เชี่ยวชาญเกี่ยวกับ LINE API ที่ช่วยตอบคำถามให้กับคุณครับ" }],
  }
]

เมื่อได้ทราบถึง concept ของทั้ง 3 ฟังก์ชันแล้ว ถัดไปเราจะมาลงมือกัน เริ่มจากติดตั้ง GoogleGenerativeAI ซึ่งเป็น dependency สำหรับใช้งาน Gemini API โดยให้เปิด command line แล้วเข้าไปที่ /functions จากนั้นใช้คำสั่ง

npm install @google/genai --save

และเพื่อโค้ดไม่ยาวจนเกินไป เราจะแยกฟังก์ชันทั้ง 3 ออกมาเป็น module โดยให้สร้างไฟล์ /functions/utils/gemini.js แล้วให้ copy โค้ดด้านล่างนี้ไปวาง

const { GoogleGenAI } = require("@google/genai");
const ai = new GoogleGenAI({ apiKey: `${process.env.API_KEY}` });

const textOnly = async (prompt) => {
  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: prompt,
  });
  return response.text;
};

const multimodal = async (imageBinary) => {
  const contents = [
    {
      inlineData: {
        data: Buffer.from(imageBinary, "binary").toString("base64"),
        mimeType: "image/png"
      }
    },
    { text: "ช่วยบรรยายภาพนี้ให้หน่อย" }
  ];

  const response = await ai.models.generateContent({
    model: "gemini-2.5-flash",
    contents: contents
  });

  return response.text;
};

const chat = async (prompt) => {
  const chat = ai.chats.create({
    model: "gemini-2.5-flash",
    history: [
      {
        role: "user",
        parts: [{ text: "สวัสดีจ้า" }],
      },
      {
        role: "model",
        parts: [{ text: "สวัสดีครับ ผมชื่อตี๋ ผมเป็นผู้เชี่ยวชาญเกี่ยวกับ LINE API ที่ช่วยตอบคำถามและแบ่งปันความรู้ให้กับชุมขนนักพัฒนา" }],
      },
      {
        role: "user",
        parts: [{ text: "ปัจจุบันมี LINE API อะไรบ้างที่ใช้งานได้ในประเทศไทย" }],
      },
      {
        role: "model",
        parts: [{ text: "ปัจจุบันมีทั้ง Messaging API, LIFF, LINE Login, LINE Beacon, LINE Pay, และ LINE MINI App ที่สามารถใช้งานในไทยได้ครับ" }],
      },
    ]
  });

  const response = await chat.sendMessage({
    message: prompt,
  });
  return response.text;
};

module.exports = { textOnly, multimodal, chat };

เสร็จแล้วก็ให้เราไปอัพเดทโค้ดในไฟล์ /functions/index.js เพื่อดึงเอา module ของ gemini มาใช้งาน

const {onRequest} = require("firebase-functions/v2/https");
const line = require("./utils/line");
const gemini = require("./utils/gemini");

5.2 การใช้งาน textOnly()

ในไฟล์ /functions/index.js ให้เพิ่มโค้ดภายในส่วนที่ตรวจสอบเงื่อนไขว่าเป็นข้อความ text ตามนี้

if (event.message.type === "text") {
  const msg = await gemini.textOnly(event.message.text);
  await line.reply(event.replyToken, [{ type: "text", text: msg }]);
  break;
}

จากนั้นก็ deploy ผ่าน command line ด้วยคำสั่ง

firebase deploy --only functions

เสร็จแล้วก็มาดูผลทดสอบกัน…

5.3 การใช้งาน multimodal()

ในไฟล์ /functions/index.js ให้เพิ่มโค้ดภายในส่วนที่ตรวจสอบเงื่อนไขว่าเป็นข้อความ image ตามนี้

if (event.message.type === "image") {
  const imageBinary = await line.getImageBinary(event.message.id);
  const msg = await gemini.multimodal(imageBinary);
  await line.reply(event.replyToken, [{ type: "text", text: msg }]);
  break;
}

จากนั้นก็ deploy ผ่าน command line ด้วยคำสั่ง

firebase deploy --only functions

การทดสอบนี้ ผมจะแบ่ง prompt ออกเป็น 3 แบบ โดยเรียงลำดับตามผลลัพธ์จากซ้ายไปขวา ซึ่งเนื้อหาที่ Gemini ส่งออกมามันน่าทึ่งมากๆ (AI มันเห็นสิ่งเดียวกับที่เราเห็นเลย)

• ช่วยบรรยายภาพนี้ให้หน่อย
• ช่วยแต่งนิทานจากภาพนี้ให้หน่อย
• ช่วยหาคำตอบของภาพนี้ให้หน่อย

5.4 การใช้งาน chat()

ในไฟล์ /functions/index.js ให้เพิ่มโค้ดภายในส่วนที่ตรวจสอบเงื่อนไขว่าเป็นข้อความ text ตามนี้

if (event.message.type === "text") {
  const msg = await gemini.chat(event.message.text);
  await line.reply(event.replyToken, [{ type: "text", text: msg }]);
  break;
}

จากนั้นก็ deploy ผ่าน command line ด้วยคำสั่ง

firebase deploy --only functions

ผลทดสอบคือมันสามารถสวมบทเป็นเรา ตาม context ที่เราเตรียมไว้ และตอบคำถามเกี่ยวกับ LINE API ได้ดีเลย ซึ่งในอนาคต ถ้าใครจะต่อยอดก็เก็บบทสนทนาและเพิ่มเข้าไปใน history: [] ก่อนจะส่งให้มันสร้างเนื้อหาถัดๆไป ตัว AI มันก็จะเข้าใจบริบททั้งหมดที่คุยกันมาก่อนหน้าได้ แล้วตอบเนื้อหาที่แม่นยำมากยิ่งขึ้น

การตั้งค่าความปลอดภัย

เบื้องหลังเนื้อหาที่ Gemini สร้างขึ้นมาแต่ละครั้งนั้น จะมีการกรองเนื้อหาที่ไม่เหมาะสมอยู่ด้วย โดยจะแบ่งออกเป็น 4 หมวดหมู่

• Harassment: เนื้อหาเกี่ยวกับการล่วงละเมิด
• Hate speech: เนื้อหาที่แสดงถึงความเกลียดชัง
• Sexually explicit: เนื้อหาที่ไม่เหมาะสมทางเพศ
• Dangerous: เนื้อหาที่ส่งเสริมการกระทำที่เป็นอันตราย

ซึ่งค่าเริ่มต้นของการกรองเนื้อหาทั้ง 4 หมวดหมูจะเป็น BLOCK_MEDIUM_AND_ABOVE หรือจะกรองเอาเนื้อหาที่เสี่ยงจะเข้าข่ายระดับกลางถึงสูงออก โดยระดับของการกรองที่เราสามารถปรับได้ก็จะมีด้วยกัน 4 ระดับ

• BLOCK_NONE: ไม่กรองเนื้อหาใดๆ
• BLOCK_ONLY_HIGH: กรองเนื้อหาที่เสี่ยงสูงออกเท่านั้น
• BLOCK_MEDIUM_AND_ABOVE: กรองเนื้อหาที่เสี่ยงปานกลางถึงสูงออก
• BLOCK_LOW_AND_ABOVE: กรองเนื้อหาที่เสี่ยงต่ำถึงสูงออก

ซึ่งจากที่ได้ทดลองใช้งาน multimodal() ไปเรื่อยๆผมพบว่ามีภาพนึงมันถูก block ซึ่งก็งงว่ามันสุ่มเสี่ยงตรงไหน 55

ผมจึงลองตั้งค่าความปลอดภัยให้ Gemini โดยสร้าง array ของ safetySettings ในทั้ง 4 หมวดหมู แล้วตั้งค่าให้กรองเนื้อหาที่เสี่ยงสูงออกเท่านั้น

const safetySettings = [
  {
    category: "HARM_CATEGORY_HARASSMENT",
    threshold: "BLOCK_ONLY_HIGH"
  },
  {
    category: "HARM_CATEGORY_HATE_SPEECH",
    threshold: "BLOCK_ONLY_HIGH"
  },
  {
    category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
    threshold: "BLOCK_ONLY_HIGH"
  },
  {
    category: "HARM_CATEGORY_DANGEROUS_CONTENT",
    threshold: "BLOCK_ONLY_HIGH"
  }
];

และเพิ่ม safetySettings เข้าไปตอน generateContent()

const response = await ai.models.generateContent({
  model: "gemini-2.5-flash",
  contents: contents,
  config: { safetySettings: safetySettings }
});

ทดสอบกับ prompt “บอกหน่อยว่าซ้ายหรือขวาคือสุนัข” แล้วผลลัพธ์ก็ออกมาจนได้

เกร็ดน่ารู้เกี่ยวกับ Gemini

• ข้อมูลที่เอามาใช้ train ตัวโมเดล Gemini ล่าสุดคือต้นปี 2023
• Rate limit การใช้เรียกใช้งาน Gemini API คือ 60 requests/minute
• วิธีขยาย Rate limit ทำได้ 2 วิธี โดยวิธีแรกคือขอไปทาง Google ผ่านฟอร์ม(ไม่มีค่าใช้จ่ายแต่จะขึ้นอยู่กับการพิจารณา) หรืออีกวิธีคืออัพเกรดไปใช้ Vertex AI

สรุป

การเชื่อมต่อ LINE Chatbot กับ Gemini API ด้วย Cloud Functions for Firebase 2nd Gen สำหรับผมนั้นก็เรียกว่าง่ายมากๆ เพราะโค้ดกระชับและตรงไปตรงมา โดย source code ทั้งหมดผมเอาขึ้น GitHub ไว้ให้แล้ว ใครไม่อยากเขียนเองก็ clone มาเล่นกันได้เลย

GitHub - jirawatee/LINE-Chatbot-x-Gemini-API: A repo of building Gen AI Chatbot with Gemini by using LINE Messaging API and Cloud Functions for Firebase 2nd Gen

Gemini-1.5-Flash-8b ที่เราได้ใช้กันในบทความนี้ มันเก่งจริงๆ นี่ขนาดเป็นโมเดลที่ Google บอกว่าสำหรับใช้งานทั่วไปนะ ปี 2024 นี้จะมีโมเดล Gemini Ultra ที่เก่งกว่าสำหรับงานที่ซับซ้อนกว่า แถมมีการขิงผลการทดสอบที่ชนะ GPT-4 แทบทุกแง่มุม ซึ่งคาดว่าน่าจะเปิดตัวในงาน Google I/O ปีนี้ จะโหดขนาดไหนรอติดตามชมกัน

สุดท้ายนี้หวังว่าตัวอย่างการสร้าง LINE Chatbot x Gemini API ในบทความนี้ ทั้งแบบ Text-Only และ Multimodal จะทำให้ผู้อ่านเห็นภาพและเห็นโอกาสในการนำไปประยุกต์ใช้กับ Use case ของตัวเอง ซึ่งผมจะรอชมผลงานจากทุกคน แล้วพบกันใหม่บทความหน้าครับ

สร้าง LINE Chatbot x Gemini(Gen AI ที่เก่งที่สุดของ Google) ด้วย Cloud Functions for Firebase was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.