นักพัฒนา LIFF และ LINE MINI App ทุกคน ต้องรู้ !!!

และต้องอัปเกรด LIFF SDK เป็น v2.31.1 หรือใหม่กว่า ให้ทันก่อนประมาณวันที่ 24 พฤศจิกายน 2026 นี้ หรือ ยิ่งเร็วที่สุดยิ่งดี

ใครที่ยังใช้ LIFF SDK ตั้งแต่ v2.20.0 จนถึง v2.31.0 อยู่ แปลว่าคุณกำลังนั่งอยู่บนช่องโหว่ XSS โดยไม่รู้ตัว และอีกไม่กี่วัน LINE จะเริ่มจำกัดการใช้งานเวอร์ชันเหล่านี้ใน External Browser แล้ว

บทความนี้จะพาไปดูว่าเกิดอะไรขึ้น, LIFF versioning ทำงานยังไง และวิธีเช็คว่าแอพเราโดนหรือไม่ ไปดูกันเลยครับ

เกิดอะไรขึ้น

เมื่อวันที่ 20 ตุลาคม 2026 LINE ออกประกาศว่า LIFF SDK ตั้งแต่ v2.20.0 ถึง v2.31.0 มีช่องโหว่แบบ Cross-site scripting (XSS) ซึ่งนักวิจัยด้านความปลอดภัยภายนอกแจ้งเข้ามาผ่านโครงการรับแจ้งช่องโหว่ของ LINE (CVE-2026-112148 / GHSA-wppr-qmp4-w627)

[Updated] Overview of the LIFF SDK vulnerability in LIFF/LINE MINI App and restrictions on using older versions

อธิบายง่ายๆ คือ ถ้ามีคนส่ง URL ประสงค์ร้ายมา แล้วผู้ใช้เปิด LIFF app หรือ MINI App ของเราบน External Browser ภายใต้เงื่อนไขบางอย่าง คนร้ายสามารถรัน JavaScript อะไรก็ได้บน domain ของแอพเราเลย และอาจดึง Access Token หรือข้อมูลที่แสดงบนหน้าจอออกไปได้

อ่านถึงตรงนี้ ใครเคยอ่านบทความ “ระวัง!! คุณยังส่ง User ID จาก Frontend ไป Backend อยู่หรือไม่” คงเห็นภาพแล้วว่า Access Token หลุดทีเดียว มันน่ากลัวแค่ไหน 😅

ระวัง!! คุณยังส่ง User ID จาก Frontend ไป Backend อยู่หรือไม่

สิ่งที่คนมักพลาด (ประกาศเพิ่มเมื่อ 22 ต.ค.) คือ ไม่ใช่แค่ External Browser นะครับ ถ้าเราเปิด Endpoint URL ตรงๆ ใน In-app Browser ของ LINE (ไม่ได้เปิดผ่าน LIFF URL) LINE จะมองว่าเป็น External Browser เหมือนกัน ก็โดนด้วยเช่นกัน

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

แล้ว 24 พ.ย. จะเกิดอะไร

ประมาณวันอังคารที่ 24 พฤศจิกายน 2026 LINE จะเริ่มจำกัดการใช้งาน LIFF SDK v2.20.0 - v2.31.0 ผลคือ เมื่อเปิดแอพที่ใช้เวอร์ชันเหล่านี้บน External Browser

• LINE Login และฟีเจอร์อื่นๆ ของ LIFF อาจใช้งานไม่ได้
• แอพอาจทำงานผิดปกติ

คำเตือน!! LINE บอกไว้ด้วยว่าวันที่ อาจเลื่อนเร็วขึ้นได้โดยไม่แจ้งล่วงหน้า และการจำกัดการใช้งานก็ไม่ได้ปิดความเสี่ยงได้ 100% ดังนั้นอย่ารอให้ถึงวันนั้น รีบอัปเกรดตอนนี้เลยครับ

สรุปไทม์ไลน์ให้ดูกันชัดๆ

LIFF versioning ทำงานยังไง

ก่อนจะไปอัปเกรด ต้องเข้าใจตรงกันก่อนว่า แต่ละคนโหลด LIFF SDK มาใช้คนละท่า และแต่ละท่าก็ได้รับผลกระทบไม่เท่ากัน

ตั้งแต่ v2.2.0 เป็นต้นมา LIFF ใช้ Semantic Versioning (SemVer) คือ MAJOR.MINOR.PATCH

• MAJOR (เช่น v1 → v2) : เปลี่ยนแบบไม่ backward compatible
• MINOR (เช่น 2.30 → 2.31) : เพิ่มฟีเจอร์ใหม่ โดยไม่ทำของเดิมพัง
• PATCH (เช่น 2.31.0 → 2.31.1) : แก้บั๊ก แก้ช่องโหว่

จะเห็นว่าครั้งนี้เป็นแค่ PATCH เล็กๆ แต่ผลกระทบไม่เล็กเลย อย่าดูถูกเลขเวอร์ชันเชียว ฮ่าา

แล้วต้องแก้ยังไง

วิธีแก้ ดูตามตารางนี้เลยครับ

คนที่น่าเป็นห่วงที่สุดคือสาย fixed path กับสาย npm เพราะถ้าไม่ไปแตะอะไรเลย แอพก็จะค้างอยู่ที่เวอร์ชันเดิมตลอดไป ยิ่งโปรเจคที่ส่งมอบลูกค้าไปตั้งแต่ปีมะโว้นี่ น่าจะโดนกันเยอะเลย

เช็คและอัปเกรด จับมือทำทีละขั้น

ทั้งหมดนี้ใช้เวลาไม่เกิน 15 นาทีต่อแอพ (ไม่นับเวลารอลูกค้าอนุมัติ deploy นะครับ อันนั้นคุมไม่ได้ ฮ่าาา)

ขั้นตอนที่ 1 - เช็คว่าตอนนี้ใช้เวอร์ชันอะไร

ง่ายที่สุดคือเปิดแอพ แล้วพิมพ์ใน Console ของ browser

liff.getVersion()
// "2.31.2" ผ่าน 👍
// "2.29.2" โดนแล้ว ไปต่อขั้นตอนที่ 2 เลย

หรือจะค้นใน source code ก็ได้

grep -rn "liff/edge/versions" .
grep -n '"@line/liff"' package.json package-lock.json

ถ้าได้เลขอยู่ระหว่าง 2.20.0 - 2.31.0 ก็คือโดนครับ อย่าลืมเช็คให้ครบทุก LIFF app และทุก MINI App รวมถึงตัวที่ลืมไปแล้วด้วย

ขั้นตอนที่ 2 - อัปเกรดตามท่าที่ใช้

สาย fixed path แก้บรรทัดเดียว

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/versions/2.31.2/sdk.js"></script>

สาย npm

npm install @line/liff@2.31.2
# หรือ
yarn add @line/liff@2.31.2

เสร็จแล้ว build และ deploy ใหม่ อย่าลืมเช็คด้วยว่า lock file ไม่ได้พาเวอร์ชันเก่ากลับมาอีก

สาย edge path ไม่ต้องแก้อะไร นั่งจิบกาแฟได้เลย ☕ แต่ข้ามขั้นตอนที่ 3 ไม่ได้นะครับ

ขั้นตอนที่ 3 - ทดสอบเรื่อง query parameter

จุดที่ต้องระวังคือ v2.31.2 มีการเปลี่ยนวิธีคืนค่าตัว ? ที่อยู่ในค่าของ query parameter ตอนส่งต่อไปที่ Secondary Redirect URL บน LIFF Browser (ฝั่ง External Browser เหมือนเดิม)

ใครที่ส่ง URL ฝากไปใน query parameter เช่น

https://liff.line.me/<LIFF_ID>/coupon?redirect=https://myshop.com/promo?id=100

ให้ลองเปิดดูบนมือถือจริงว่ายังไปถูกหน้าอยู่มั้ย (คนที่เคยผ่านศึก Replace vs Concatenate มาด้วยกัน น่าจะรู้ดี ว่าเรื่อง redirect URL นี่น่ากลัวแค่ไหน 😂)

คำเตือน!! ทดสอบที่ Test Environment ก่อนขึ้น Production เสมอนะครับ 555

ขั้นตอนที่ 4 - ตรวจการเรียกใช้ LIFF URL

ตรวจดูว่าใน Rich menu, Flex Message หรือข้อความต่างๆ เราใช้ LIFF URL (https://liff.line.me/...) ไม่ใช่ Endpoint URL ตรงๆ เพราะการเปิด Endpoint URL ตรงๆ จะถูกมองเป็น External Browser

ถึงจะอัปเกรดแล้ว ใช้ LIFF URL ให้ถูกต้องตั้งแต่ต้น ก็ดีกว่าเยอะครับ

เท่านี้ก็เป็นอันเรียบร้อย เย้…

ติดตาม release notes ยังไง ไม่ให้ตกขบวน

บทเรียนจากครั้งนี้คือ v2.31.1 ออกมาตั้งแต่ 30 ก.ย. แต่ประกาศเรื่องช่องโหว่ตามมาทีหลังเกือบ 3 สัปดาห์ ใครตาม release notes อยู่แล้ว ก็ได้เวลาเตรียมตัวเพิ่มอีกเยอะเลย

แถมตั้งแต่ 9 ธ.ค. 2025 LINE เลิกเผยแพร่ Roadmap ของ LINE Login และ LIFF แล้ว จะประกาศผ่านหน้า News เป็นหลัก ดังนั้นหน้า News คือพระเอกของเราตอนนี้

ผมแนะนำแหล่งที่ควร bookmark ไว้ ดังนี้

1. LINE Developers News (tag LIFF) : ข่าว LIFF ทั้งหมดรวมที่เดียว ทั้งเวอร์ชันใหม่ ประกาศด้านความปลอดภัย และ outage (สาย MINI App ดู tag LINE MINI App ด้วย)
2. LIFF release notes : สรุปทุกเวอร์ชัน พร้อมคำสั่งอัปเดต
3. npm : ใช้ npm outdated @line/liff เช็คเป็นประจำ หรือเปิด Dependabot / Renovate ให้เปิด PR ให้อัตโนมัติ และรัน npm audit ใน CI ด้วย
4. Facebook Group “LINE Developers Group Thailand” : เพื่อนๆ ในกลุ่มมักจะเอาข่าวสำคัญมาแชร์เร็วมาก และมีคนช่วยตอบเวลาติดปัญหา

Developers Tip: สายที่ทำงานเป็นทีม ลองตั้งกติกาง่ายๆ แบบนี้ครับ

• ทำตารางรวมทุก LIFF ID / MINI App ที่ดูแล พร้อมเวอร์ชัน SDK, ท่าที่โหลด (edge / fixed / npm) และคนรับผิดชอบ
• เจอประกาศที่มีคำว่า vulnerability หรือ restriction ให้ถือเป็นงานด่วนทันที ไม่ต้องรอ sprint หน้า

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

Key Takeaway

• LIFF SDK v2.20.0 - v2.31.0 มีช่องโหว่ XSS ต้องอัปเกรดเป็น v2.31.1 ขึ้นไป (แนะนำ v2.31.2)
• LINE จะเริ่มจำกัดการใช้งานเวอร์ชันเก่าประมาณ 24 พ.ย. 2026 และอาจเร็วกว่านั้น
• edge path = ไม่ต้องทำอะไร / fixed path = แก้ URL / npm = install ใหม่ + deploy
• อัปเกรดแล้วต้องทดสอบเคส query parameter ที่มี ? ซ้อนอยู่ด้วย
• ใช้ LIFF URL เสมอ อย่าเปิด Endpoint URL ตรงๆ

อ่านมาถึงตรงนี้ ใครเพิ่งนึกออกว่ามี LIFF app เก่าๆ ทิ้งไว้ที่ลูกค้าสักตัวสองตัว ก็ขอให้รีบไปจัดการก่อนที่ลูกค้าจะโทรมาตอนตีสองนะครับ 😅

ขอให้ทุกคนอัปเกรดทัน แล้วพบกันใหม่ครับ

Sources

• Overview of the LIFF SDK vulnerability in LIFF/LINE MINI App and restrictions on using older versions (LINE Developers, 20 ต.ค. 2026 อัปเดต 22 ต.ค. 2026)
• LIFF release notes

วิธีอัปเกรด LIFF เป็น v2.31.1+ เพื่อปิดช่องโหว่ XSS was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

ผ่านไปแล้วกับงาน LINE THAILAND DEVELOPER CONFERENCE 2026 ภายใต้ธีม “Build the Next Frontier” หากใครได้ติดตามเนื้อหาในปีนี้จะเห็นสัญญาณที่ชัดเจนมากว่า เรากำลังเข้าสู่ยุคของการใช้ AI Agent ลงมือทำงานจริงๆ ในงานนี้ตอบหนึ่งในคำถามสำคัญของนักพัฒนาคือ

เราจะวางโครงสร้างระบบ (Architecture), กระบวนการทำงาน (SDLC) และพัฒนาตัวเองอย่างไร ให้ AI สร้างงานระดับ Production ได้อย่างรวดเร็ว ปลอดภัย และยั่งยืน

บทความนี้ได้รวบรวมความรู้จากทุกๆ Sessions ในงาน มาสรุปเป็นคู่มือที่อ่านเข้าใจง่ายและนำไปลงมือทำตามได้ทันทีครับ ไปเริ่มกันเลย!

1. ทิศทางใหม่บน LINE Ecosystem: เมื่อ AI Agents คือ App Layer ยุคถัดไป

ในเซสชัน Tech Keynote โดยพี่บอล (CTO, LINE) ได้ชี้ให้เห็นว่า AI Agent ไม่ใช่แค่ฟีเจอร์เสริมอีกต่อไป แต่กำลังกลายเป็น App Layer ใหม่ ที่เปลี่ยนวิธีที่ผู้คนใช้จัดการสิ่งต่างๆ ในชีวิตประจำวัน

ทำไมนักพัฒนาไทยถึงควรเริ่มสร้าง AI Agent บน LINE?

• ไม่ต้องเปลี่ยนพฤติกรรมผู้ใช้: คนไทยอยู่บน LINE อยู่แล้ว แทบไม่ต้องดาวน์โหลดแอปใหม่หรือเรียนรู้วิธีใช้งานใหม่
• จาก Fixed Features สู่ Agent-to-Agent Ecosystem: จากเดิมที่การทำแอปบน LINE คือการสร้างฟีเจอร์ตายตัว (เช่น Rich Menu, OA Broadcast หรือ MINI App แยกกัน) ทิศทางต่อไปคือการเปิดให้ระบบนิเวศของ LINE OA เชื่อมต่อกับบริการภายนอกและพูดคุยข้ามหากันได้ผ่าน APIs, MCP (Model Context Protocol), Skills และ Agent-to-Agent Protocols
• เตรียมตัวให้พร้อมสำหรับปี 2027: LINE เตรียมเปิด Pioneer Program ในปี 2027 ให้พาร์ทเนอร์และนักพัฒนากลุ่มแรกได้ทดลองใช้ Agent APIs/MCP ก่อนจะขยายสู่คอมมูนิตี้ในงาน LINE HACKS 2027

2. ยกเครื่อง SDLC ใหม่: เมื่อ AI คือรถสปอร์ต แต่กระบวนการพัฒนาแบบเดิมคือถนนลูกรัง

เมื่อ AI ช่วยเขียนโค้ดได้เร็วขึ้น หลายทีมกลับพบว่างานไม่ได้เสร็จเร็วขึ้นจริง เพราะคอขวดได้ย้ายจาก “การเขียนโค้ด” ไปอยู่ที่ “การรีวิว การทดสอบ และการทำความเข้าใจระบบ” แทน (ข้อมูลจาก Faros AI ชี้ว่าเมื่อใช้ AI เต็มที่ เวลารอรีวิว PR พุ่งสูงขึ้นกว่าเดิมถึง +441.5%)

จากบทเรียนของทีมนักพัฒนาจาก LINE, LINE MAN Wongnai, Apppi และ BorntoDev นี่คือพิมพ์เขียวการสร้างระบบ Harness & Loop Engineering ที่ทุกทีมสามารถนำไปทำตามได้ทันที:

Step 1: สร้าง Harness ที่ดี (ป้อนบริบทและกฎก่อนเริ่มงาน)

• เขียนไฟล์ AGENTS.md ให้สั้นและชัดเจนที่สุด: รวมกฎเหล็กของทีม โครงสร้าง Architecture คำสั่งรันเทสต์ และไฟล์ที่ห้ามแตะไว้ในไฟล์เดียว (ไม่เกิน 1 หน้า) เคล็ดลับคือ "บรรทัดไหนที่ลบออกแล้ว Agent ไม่ได้ทำผิด ให้ลบทิ้ง" เพื่อไม่ให้เปลือง Context
• บันทึกเหตุผลด้วย ADR (Architecture Decision Record): โค้ดบอกแค่ว่าทำอะไร (What) แต่ ADR บอกว่าทำไมถึงตัดสินใจแบบนั้น (Why) เมื่อมีการเปลี่ยนความหมายของตัวแปรหรือฟิลด์ ต้องเปลี่ยนชื่อใหม่เสมอ และนำชื่อเก่าใส่ใน retired-names.json เพื่อบล็อกไม่ให้ AI เผลอนำชื่อเก่ากลับมาใช้ซ้ำ
• สกัดความรู้เป็น SKILL.md แต่อย่าเยอะเกินไป: ถอดองค์ความรู้จากผู้เชี่ยวชาญในองค์กร หรือใช้โมเดลรุ่นใหญ่ (เช่น Claude Opus / GPT Sol) ช่วยวิเคราะห์การทำงานจริงจาก Trace แล้วสกัดออกมาเป็นไฟล์ขั้นตอนการทำงาน (SKILL.md) เพื่อให้โมเดลตัวเล็กที่ทำงานเร็ว (เช่น Gemini Flash / Haiku) นำไปรันตามได้อย่างแม่นยำ แต่อย่าสร้าง Skill เยอะเกินไปจนคำสั่งตีกันเอง (Skill Hell)
• เชื่อมแหล่งข้อมูลจริงด้วย MCP: เลิกเสียเวลา Copy ข้อความข้ามแอป แต่ให้เชื่อม MCP เข้ากับ JIRA, Confluence, GitHub และ Figma ไปเลย (ควบคู่กับการทำไฟล์ DESIGN.md และ COMPONENTS.json) เพื่อให้ Agent อ่าน Spec และ Design Token จากต้นทางได้โดยตรง

Step 2: บังคับใช้ Guardrails ด้วยโค้ดและสิทธิ์ (ไม่ใช่แค่สั่งใน Prompt)

• “Prompt คือคำแนะนำ แต่ Hook คือการการันตี”: อย่าหวังพึ่งให้ AI จำคำสั่งใน Prompt ว่าห้ามลบข้อมูลหรือต้องรัน Test ให้ตั้งค่าใน .claude/settings.json หรือ Git Hooks (pre-commit / pre-push) เพื่อรันสคริปต์ตรวจสอบอัตโนมัติ
• ทำ TDD แบบแยกวงจร (คนคุมข้อสอบ AI ทำข้อสอบ): ห้ามให้ Agent เขียนทั้งโค้ดและ Unit Test เองใน Closed-loop (วงจรปิดที่ตรวจสอบกันเองภายในระบบ AI) เพราะมีโอกาสสูงที่ AI จะแอบแก้ Test เพื่อให้รันผ่าน ให้คนเป็นผู้อนุมัติ Spec Test และล็อกสิทธิ์ด้วย CODEOWNERS หรือตั้งค่า deny ในระบบไม่ให้ Agent แก้ไขโฟลเดอร์เทสต์และไฟล์ .env เด็ดขาด
• จำลองสภาพแวดล้อมจริงบนเครื่อง Local: แก้ปัญหาโค้ดรันผ่านบนเครื่องแต่พังบนเซิร์ฟเวอร์ ด้วยการใช้ k3d จำลอง Kubernetes Cluster, API Gateway และ Database จริงลงใน Docker เพื่อรัน Integration Test และใช้ Playwright เทียบภาพ Screenshot หน้าเว็บจริงกับ Baseline ก่อนอนุญาตให้ Push โค้ด

Step 3: จัดการกองทัพ Agent และลดภาระการรีวิว (Orchestration)

• เปลี่ยนจาก Loop เดียวเป็น Work Graph บน Disk: สำหรับงานใหญ่ที่ใช้เวลานาน ให้แตกงานเป็น Node ย่อยๆ ที่มีลำดับก่อน-หลัง (Edges งานชิ้นนี้ต้องทำเสร็จก่อน จึงจะสามารถข้ามไปทำอีกงานชิ้นถัดไปได้) และบันทึกสถานะลงบน Disk (เช่น ใช้แนวคิดแบบ beadsที่ใช้สำหรับจัดการ Task, Dependency Graph และทำหน้าที่เป็นหน่วยความจำระยะยาวบน Disk (Git-backed issue tracker) ให้กับ AI Coding Agents) เพื่อให้สถานะงานไม่หายไปเมื่อ Context ถูกบีบอัด พร้อมตั้งกฎให้ Agent สำรองพื้นที่ Context ไว้ 15% (เมื่อใช้ถึง 80% ให้สรุปสิ่งที่ทำค้างไว้และส่งไม้ต่อให้ Agent ตัวถัดไปอย่างเป็นระบบ)
• แบ่งระดับความเสี่ยงในการรีวิว (Risk Tier 0 / 1 / 2): เพื่อไม่ให้คนรีวิวปวดตาเกินไปจนกด Approve แบบไม่อ่าน ให้ใช้ Subagent (ใน Context ใหม่ที่เป็น “ตาวิเศษ” มาช่วยดูอีกแรง) ช่วยตรวจเทียบกับแผนงานด่านแรก แล้วใช้สคริปต์คัดกรองไฟล์เพื่อแบ่งระดับความเสี่ยง:
  Tier 0 (แก้ Docs/Test อ่านผ่านๆ 5 นาที),
  Tier 1 (ฟีเจอร์ทั่วไป รีวิวปกติ 20 นาที) และเก็บสายตาคนไว้ดูแบบละเอียด
  Tier 2 (แตะเรื่องเงิน, Auth, Contract, Migration ที่ต้องตรวจลึกและปล่อยแบบ Staged Rollout/Canary 1% -> 10% -> 100%)

3. เปลี่ยน Source Code ให้เป็นสมองที่สองของทีม (Product Second Brain)

เมื่อระบบมีอายุหลายปีและมีขนาดใหญ่ (เช่น มีถึง 257 Services, 13.3 ล้าน Tokens ซึ่งใหญ่กว่า Context Window ทั่วไปถึง 13 เท่า) เอกสารที่มีอยู่มักไม่อัปเดต และการสั่งให้ AI อ่านโค้ดสดๆ ทุกครั้งก็ทั้งช้าและแพง

แนวคิดจากทีม QA ของ LINE คือการนำ LLM Wiki มาประยุกต์สร้างเป็น Product Second Brain ด้วย 4 ขั้นตอน:

1. Explore (ใช้ Script): เขียนสคริปต์สำรวจหา Entrypoint ของแต่ละภาษาเพื่อดูว่ามีกี่ Services โดยยังไม่ต้องใช้ LLM
2. Map: ใช้ LLM จำแนกประเภทของแต่ละ Service และดูว่าเชื่อมต่อกับ Database หรือ Kafka ตัวไหน
3. Understand: แบ่งทีม Agent เจาะลึก Logic ของแต่ละ Service
4. Build Wiki: เรียบเรียงเป็นไฟล์ Markdown ที่เชื่อมโยงกัน (สามารถเปิดดูเป็น Graph View ใน Obsidian ได้) และใช้วิธีอัปเดตเฉพาะไฟล์ที่เปลี่ยนตาม Commit (Incremental Ingestion)

วิธีนี้ช่วยให้ค้นหาคำตอบได้เร็วขึ้นถึง 38% และประหยัดค่าใช้จ่ายลงกว่า 50% แถมยังต่อยอดไปสร้างเป็น Skill เช่น bug-hunt ที่นำความเข้าใจระบบมารวมกับ Tech Spec และมุมมองการเทสต์เพื่อช่วย QA ค้นหาบั๊กที่ซับซ้อนได้อย่างรวดเร็ว

4. สถาปัตยกรรม AI ระดับองค์กร: ความปลอดภัย การกำกับดูแล และการ Scale

เมื่อนำ AI ไปใช้งานจริงในระดับองค์กร ทั้งฝั่ง Internal และ External นี่คือ 3 เสาหลักด้าน Infrastructure ที่ต้องคำนึงถึง:

• AI Governance แบบ “Guardrails” ไม่ใช่ “Gates”: บทเรียนจาก Fastwork คือการยึดหลัก “Centralize Governance, Decentralize UX” ไม่บังคับให้ทุกคนใช้เครื่องมือหน้าตาเดียวกัน (ทีม Dev ใช้ Claude Code/Cursor คู่กับ Sourcebot ค้นหาโค้ด ส่วนพนักงานทั่วไปใช้แชทผ่านเว็บ/Slack ด้วย Onyx ที่เคารพสิทธิ์การเข้าถึงข้อมูลตามต้นทาง) แต่ให้ทุกอย่างวิ่งผ่านเกตเวย์กลางอย่าง LiteLLM เพื่อคุมงบประมาณและออก Virtual Keys แยกตามทีม พร้อมส่งข้อมูล OpenTelemetry ไปที่ Langfuse เพื่อดู Traces และต้นทุนทั้งหมด

• ล็อกดาวน์เครือข่ายของ AI Agent (Network Lockdown): บทเรียนจากทีม SRE ของ LINE ชี้ให้เห็นความเสี่ยงจากกรณีที่ AI Agent จำนวนมากอาจแอบสื่อสารกันหรือเชื่อมต่อออกไปยังเว็บไซต์ภายนอกที่ไม่ได้รับอนุญาต การตั้งค่า HTTP_PROXY แบบเดิมมักดูแลยากและไม่ครอบคลุมทุกแอป จึงควรใช้แนวทาง Transparent Proxy ในระดับ Kubernetes (เช่น ใช้ Kubernetes Operator ควบคุม nftables คู่กับ GOST และ Envoy Egress Proxy) เพื่อบังคับให้ทุกทราฟฟิกขาออกของ AI Agent ต้องผ่านการตรวจ Domain Whitelisting เสมอ พร้อมมีระบบ Audit Log บน OpenSearch และสวิตช์ตัดเน็ตฉุกเฉิน (Kill Switch) เมื่อเกิดเหตุไม่คาดฝัน
• เตรียม Cloud Infra ให้พร้อมรับ Scale 10,000 RPS: แนวทางจาก AWS ในการเชื่อมต่อกับ LINE Webhook คือการใช้สถาปัตยกรรม Serverless และ Event-Driven (API Gateway -> Lambda -> SQS/SNS -> Step Functions -> DynamoDB) คู่กับ Amazon Bedrock / AgentCore ที่มี Guardrails คั่นกลางทุกเลเยอร์ และรองรับเรื่อง PDPA / Data Residency บน AWS Thailand Region (ap-southeast-7) เพื่อให้พร้อมรับทราฟฟิกมหาศาลได้ทันทีที่ไอเดียประสบความสำเร็จ

5. พลิกโฉมประสบการณ์ผู้ใช้จริงบน LINE (Real-World Use Cases)

เมื่อโครงสร้างหลังบ้านแข็งแรง เราสามารถสร้างประสบการณ์รูปแบบใหม่ที่ไร้รอยต่อ (Seamless Experience) บน LINE ได้หลากหลายมิติ:

• เปลี่ยนงานแอดมินที่ซับซ้อนให้จบใน 1 นาที (AXA & ZWIZ.AI): พัฒนา AI Agent “QQ (Quick Quote)” ที่รับข้อมูลได้ทั้งข้อความแชทที่พิมพ์แยกกันและรูปถ่ายเล่มทะเบียนรถ โดยมีแพลตฟอร์มควบคุม Logic, Session และ Guardrails เพื่อสกัดข้อมูลไปเรียก API ออกใบเสนอราคาประกันรถยนต์อัตโนมัติ ช่วยลดเวลาจาก 5–20 นาที เหลือเพียง 1–2 นาที ลดภาระงานคนลงถึง 80% และส่งข้อเสนอเปรียบเทียบได้ถึง 6 รูปแบบในครั้งเดียว
• ผสาน Chatbot และ Voicebot เป็นหนึ่งเดียว (BOTNOI Group): ใช้ความได้เปรียบของ LINE OA คู่กับ LINE MINI App เพื่อให้ลูกค้าสลับจากการ “พิมพ์แชท” ไปเป็นการ “พูดคุยด้วยเสียง” ได้ทันทีเมื่อต้องการอธิบายเรื่องซับซ้อน โดยมีหัวใจสำคัญคือการใช้ One LINE User ID เชื่อมกับ Shared Memory ที่เก็บข้อเท็จจริงสั้นๆ (Facts & Open Tasks) ทำให้เมื่อเปิดหน้า MINI App ขึ้นมา Voicebot สามารถทักทายและคุยต่อจากเรื่องเดิมในแชทได้ภายใน 1 วินาทีโดยไม่ต้องเริ่มเล่าใหม่ และส่งสรุปกลับมาในแชทได้เมื่อวางสาย

• เปลี่ยนแชทกลุ่มที่วุ่นวายให้เป็นระบบจัดการงาน (BumbleB Project): ต่อยอดแนวคิดจากผู้ชนะเวที LINE HACK สู่โปรเจกต์ทดลอง BumbleB ที่ช่วยสรุปบทสนทนาในกรุ๊ปแชทตามช่วงเวลา แล้วแปลงเป็น Task งาน โดยออกแบบระบบหลังบ้านให้โหลด Skills และ Tools แบบ On-demand เฉพาะที่เกี่ยวข้องกับงาน เพื่อลดความผิดพลาดและให้ผู้ใช้กดยืนยัน (Human-in-the-loop) ก่อนเสมอ ทดลองเล่นได้ที่ LINE OA @bumblebth

• เชื่อมโลกออนไลน์สู่หน้าร้านจริง LINE MINI Eats: การร่วมมือกันระหว่าง LINE Thailand และ LINE MAN Wongnai สร้างประสบการณ์สั่งอาหารล่วงหน้าผ่าน LINE MINI App เพื่อรับที่ร้านได้ทันทีโดยไม่ต้องต่อคิว สะท้อนหลักคิดสำคัญ 3 ข้อคือ Seamless Experience (ออกแบบ UI/UX ให้ผู้ใช้รู้สึกเป็นแอปเดียวกันแม้ข้ามระบบ), Collaborative Ownership (แบ่งขอบเขตงานชัดเจนแต่รับผิดชอบเป้าหมายร่วมกัน) และ Leverage (นำแพลตฟอร์มที่มีอยู่แล้วอย่าง OA Plus, MyCustomer CRM และ Wongnai POS มาต่อยอดโดยไม่ต้องสร้างใหม่จากศูนย์)

6. บทสรุปส่งท้าย: รักษาความเข้าใจ ความรับผิดชอบ และความเป็นมนุษย์

ท่ามกลางการเปลี่ยนแปลงที่รวดเร็ว บทเรียนจากเซสชันของ คุณ Pathai (LINE), พี่ Toy (DataRockie) และเวทีเสวนา Panel Discussion (พี่บอล, พี่ต้า LMWN, พี่ทอย) ได้ฝากข้อคิดสำคัญที่นักพัฒนาทุกคนควรยึดถือไว้เป็นคู่มือ:

1. ระวังช่องว่างของความเข้าใจ (The Understanding Gap): เมื่อ Agent เขียนโค้ดและแก้ Bug แทนเรา โอกาสในการเรียนรู้ของเราจะหายไป ให้ฝึกกระบวนการ Recall Before Generate (คิดเองก่อนถาม AI แล้วค่อยนำคำตอบมาเทียบกัน) และใช้ AI ช่วยสร้างภาพจำลอง (เช่น Interactive HTML) เพื่อสำรวจและถกเถียงร่วมกันในทีม โดยเฉพาะ Junior Dev ที่ต้องแยกให้ออกระหว่าง “โหมดทำงาน” (เน้นผลงาน ใช้ AI เต็มที่) กับ “โหมดเรียน” (ต้องลองทำเองก่อนดูเฉลย เพื่อสร้างการเรียนรู้)
2. AI สร้างโค้ด แต่เราคือเจ้าของผลลัพธ์ (AI Builds It. We Own the Outcome): ต่อให้ AI เก่งแค่ไหน ในวันที่ระบบพังหรือเกิดความผิดพลาด AI ไม่สามารถออกมารับผิดชอบแทนเราได้ ความสามารถในการเรียนรู้สิ่งใหม่ ความเข้าใจในปัญหาของมนุษย์ และความรับผิดชอบ (Accountability) คือสิ่งที่จะไม่วันหมดอายุ
3. สร้างสนามฝึกของตัวเอง: AI คือคานงัด (Lever) และตัวคูณ (Multiplier) แต่ 0 คูณอะไรก็ได้ 0! อย่ารอให้ใครมาป้อนงาน แต่จงสร้างสนามฝึกของตัวเองจากปัญหาจริง ปูพื้นฐาน (Principles) ให้แน่น ฝึกฝนรสนิยม (Taste) ในการเลือกคำตอบที่เหมาะสมกับบริบท และผสมผสานทักษะหลากหลายด้าน (Skill Stacking) เข้าด้วยกัน
4. Humanity Over Technology: ยิ่ง AI เก่งขึ้นเท่าไหร่ เรายิ่งต้องเป็นมนุษย์ที่ดีขึ้นเท่านั้น ใช้เทคโนโลยีเท่าที่จำเป็นเพื่อแก้ปัญหาที่มีความหมายและสร้างคุณค่าที่แท้จริงให้กับผู้คน เพราะลำพังแค่ AI ไม่สามารถสร้างอนาคตที่ดีกว่าเดิมได้ มีเพียง “มนุษย์” เท่านั้นที่ทำได้

ขอบคุณทุกคนที่มางาน LINE DEV CONF 2026 ครับ แล้วพบกันใหม่งานหน้าครับผม
Slide: https://speakerdeck.com/linedevth

6 บทเรียนสำคัญจาก LINE DEV CONF 2026 คู่มืออัปเกรดนักพัฒนาไทยสู่ยุค AI Engineering was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีค่ะ เพื่อนๆ นักพัฒนา LINE Developers ทุกคน! รู้หรือยังคะว่า LINE Bot ของเราที่อยู่ใน Group Chat สามารถตรวจจับได้ด้วยนะว่ามีใครแก้ไขข้อความ! ✏️

ในช่วงที่ผ่านมาหากใครติดตามข่าวสารจาก LINE Developers​ Thailand หรือเข้าร่วมงาน LINE Thailand Developers Conference 2026 ก็จะเห็นฟีเจอร์ใหม่ล่าสุดของ LINE Messaging API นั่นก็คือ Message Edit Webhook ที่ทำให้ LINE Bot รู้ได้ว่ามีการแก้ไขข้อความที่ส่งไปใน Group Chat!

บทความนี้เลยอยากชวนเพื่อน ๆ มาทำความรู้จักกับ LINE Group Chat Webhook Events ว่ามีอะไรบ้าง ก่อนจะพาไปลองใช้ Message Edit Webhook ด้วย LINE Bot SDK Python กันค่ะ 💚

#### Table of Contents ####
1. What Can LINE Bot do in Group Chats?
2. Handling Group Chat Events with Python SDK
3. Message Edit Webhook
      3.1 What Is the Message Edit Webhook?
      3.2 How to Enable Message Editing in LINE Labs
      3.3 Detecting Message Edit Events with Python SDK
4. Example Use Cases
      4.1 Party RSVP: Tracking +1 Events
      4.2 Coffee Shop: Welcoming New Members
      4.3 Meeting Room Booking
5. Conclusion

1. What Can LINE Bot do in Group Chats?

ก่อนจะไปรู้จัก Message Edit Webhook มาดูภาพรวมกันก่อนค่ะว่า LINE Bot ทำอะไรได้บ้างเมื่ออยู่ใน LINE Group

เมื่อเราเปิด Allow bot to join group chats แล้ว ผู้ใช้ก็สามารถเชิญ LINE Bot เข้ากลุ่มได้เหมือนเพื่อนอีกคน และเมื่อ Bot อยู่ในกลุ่มแล้ว จะสามารถรับทุกข้อความในกลุ่ม, ตอบกลับและส่งข้อความเข้ากลุ่ม, รู้ว่าใครเข้า ใครออก,ดึงข้อมูลกลุ่ม และ ออกจากกลุ่มเองได้

Understanding Group Chat Webhook Events

Webhook Events เป็นกลไกที่ LINE Platform ใช้แจ้งให้ Bot ทราบเมื่อมีเหตุการณ์ต่าง ๆ เกิดขึ้นภายใน Group Chat โดย LINE จะส่งข้อมูล Event มายัง Webhook URL ที่เรากำหนดไว้ ทำให้ Bot สามารถรับรู้เหตุการณ์และตอบสนองได้โดยอัตโนมัติ โดยปัจจุบันรองรับ Webhook Events ภายในกลุ่มดังนี้

### LINE Group Chat - Webhook Events ###

1.join - Bot ถูกเชิญเข้ากลุ่ม
2.leave - Bot ถูกลบออกจากกลุ่ม หรือ Bot ออกจากกลุ่มเอง
3.memberJoined - มีสมาชิกใหม่เข้ากลุ่ม
4.memberLeft - มีสมาชิกออกจากกลุ่ม
5.message - สมาชิกส่งข้อความ เช่น Text, Image, Video, Audio, File, Location, Sticker
6.messageEdited - สมาชิกแก้ไขข้อความ Text ที่ส่งไปแล้ว
7.unsend - สมาชิกยกเลิกการส่งข้อความ ดูได้จาก 
8.postback - สมาชิกกดปุ่มที่เป็น Postback Action
9.videoPlayComplete - สมาชิกดูวิดีโอที่ Bot ส่งจนจบ ต้องตั้ง trackingId

นอกเหนือจากการรับรู้เหตุการณ์ต่าง ๆ ภายใน LINE Group Chat ผ่าน Webhook Events แล้ว เรายังสามารถพัฒนาโปรแกรมด้วย LINE Messaging API ร่วมกับ Python SDK เพื่อให้ LINE Bot ดึงข้อมูลและโต้ตอบกับสมาชิกภายในกลุ่มได้ โดยมีความสามารถดังนี้

### LINE Bot in Group Chat - API Capability ###

1. Get group chat summary - ดึงข้อมูลพื้นฐานของกลุ่ม เช่น ชื่อกลุ่มและรูปภาพกลุ่ม
2. Get number of users in a group chat - ตรวจสอบจำนวนสมาชิกทั้งหมดภายในกลุ่ม
3. Get group chat member user IDs - ดึงรายการ User ID ของสมาชิกภายในกลุ่ม (สำหรับบัญชีที่มีสิทธิ์ใช้งาน API นี้)
4. Get group chat member profile - ดึงข้อมูลโปรไฟล์ของสมาชิก เช่น ชื่อที่แสดง รูปโปรไฟล์ และสถานะ
5. Leave group chat - สั่งให้ LINE Bot ออกจากกลุ่มผ่าน LINE Messaging API
6. Reply / Push Message - ส่งข้อความตอบกลับหรือส่งข้อความใหม่เข้าไปในกลุ่ม เช่น ข้อความแจ้งเตือนหรือ LINE Flex Message

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

อย่างไรก็ดี ก่อนที่เราจะสามารถนำ LINE Bot เข้าไปทำงานภายใน Group Chat เพื่อรับ Webhook Events และโต้ตอบกับสมาชิกในกลุ่มได้ จำเป็นต้องตั้งค่า LINE Messaging API เพื่ออนุญาตให้​ LINE Bot เข้าร่วมกลุ่มหรือแชทแบบหลายคน

### ขั้นตอนการสร้าง LINE Bot ให้ทำงานใน Group Chat ###
1. Create LINE Official Account & Messaging API Channel:
    - สร้าง LINE Official Account และเปิดใช้งาน Messaging API ผ่าน LINE Developers Console
2. Enable LINE Bot to Join Group Chats:
    - เข้าไปที่ LINE Official Account Manager → ตั้งค่า → ตั้งค่าบัญชี → การใช้ฟีเจอร์เข้าร่วมในแชท 
    - จากนั้นเลือก อนุญาตให้เข้าร่วมกลุ่มหรือแชทแบบหลายคน
    - เมื่อตั้งค่าเรียบร้อยแล้ว เราจะสามารถเชิญ LINE Bot เข้าร่วม Group Chat เพื่อรับ Webhook Events และโต้ตอบกับสมาชิกผ่าน LINE Messaging API ได้

2. Handling Group Chat Events with Python SDK

อย่างที่เกริ่นไว้ข้างต้น ในบทความนี้เราจะใช้ LINE Bot SDK for Python ในการพัฒนา LINE Bot เพื่อรับและจัดการ Webhook Events ที่เกิดขึ้นภายใน Group Chat ดังนั้นจะต้องทำการลง Library line-bot-sdk ให้เรียบร้อย

หลังจากที่เราสร้าง LINE Official Account (LINE OA) และเปิดใช้งาน Allow bot to join group chats เรียบร้อยแล้ว ขั้นตอนถัดไปคือการเตรียมข้อมูลสำหรับเชื่อมต่อ LINE Bot กับ LINE Messaging API โดยเข้าไปที่ LINE Developers Console เพื่อรับ Channel Secret และ Channel Access Token สำหรับใช้เชื่อมต่อ Backend ของเรากับ LINE Platform

### LINE Messaging API Keys ###
- Channel Access Token - ใช้สำหรับยืนยันสิทธิ์ในการเรียกใช้งาน LINE Messaging API เช่น การส่งข้อความตอบกลับ
- Channel Secret - ใช้สำหรับตรวจสอบ Webhook Signature เพื่อยืนยันว่า Request มาจาก LINE Platform จริง

โค้ดนี้เป็นตัวอย่างการสร้าง Webhook Endpoint สำหรับ LINE Bot ด้วย Python โดยใช้ LINE Bot SDKและ Functions Framework เพื่อรับ Webhook Events จาก LINE Platform และเตรียมเชื่อมต่อกับ LINE Messaging API

import os
import functions_framework
from linebot.v3 import WebhookHandler
from linebot.v3.exceptions import InvalidSignatureError
from linebot.v3.messaging import ApiClient, Configuration, MessagingApi

configuration = Configuration(access_token=os.environ["LINE_CHANNEL_ACCESS_TOKEN"])
handler = WebhookHandler(os.environ["LINE_CHANNEL_SECRET"])
line_bot_api = MessagingApi(ApiClient(configuration))

@functions_framework.http
def callback(request):
    signature = request.headers["X-Line-Signature"]
    body = request.get_data(as_text=True)
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        return ("Invalid signature", 400)
    return "OK"configuration = Configuration(access_token=os.environ["LINE_CHANNEL_ACCESS_TOKEN"])

โค้ดนี้เป็นตัวอย่างการใช้ LINE Bot SDK for Python เพื่อจัดการ Webhook Events ภายใน LINE Group Chat โดยใช้ @handler.add() เพื่อกำหนดว่า เมื่อเกิด Event ประเภทต่าง ๆ จะให้ Bot ทำงานอย่างไร

from linebot.v3.webhooks import MessageEvent, MessageEditedEvent, UnsendEvent, JoinEvent, LeaveEvent,MemberJoinedEvent, MemberLeftEvent, PostbackEvent, TextMessageContent

# 1. Message Event - เมื่อสมาชิกส่งข้อความ
@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
    if event.source.type == "group":
        print(f"Text: {event.message.text}")

# 2. Message Edit Event - เมื่อสมาชิกแก้ไขข้อความ
@handler.add(MessageEditedEvent, message=TextMessageContent)
def handle_message_edited(event):
    print(f"Edited message ID: {event.message.id}")
    print(f"New text: {event.message.text}")

# 3. Unsend Event - เมื่อสมาชิกยกเลิกการส่งข้อความ
@handler.add(UnsendEvent)
def handle_unsend(event):
    print(f"Unsent message ID: {event.unsend.message_id}")

# 4. Join Event - เมื่อ Bot เข้าร่วม Group Chat
@handler.add(JoinEvent)
def handle_join(event):
    reply_text(event.reply_token, "สวัสดีค่ะ ขอบคุณที่ให้น้อง Bot เข้าร่วม Group Chat💚")

# 5. Leave Event - เมื่อ Bot ออกจาก Group Chat
@handler.add(LeaveEvent)
def handle_leave(event):
    print(f"Bot left group: {event.source.group_id}")

# 6. Member Joined Event - เมื่อสมาชิกใหม่เข้าร่วมกลุ่ม
@handler.add(MemberJoinedEvent)
def handle_member_joined(event):
    reply_text(event.reply_token, "ยินดีต้อนรับสมาชิกใหม่ค่ะ 🎉")

# 7. Member Left Event - เมื่อสมาชิกออกจากกลุ่ม
@handler.add(MemberLeftEvent)
def handle_member_left(event):
    for member in event.left.members:
        print(f"Member left: {member.user_id}")

# 8. Postback Event - เมื่อสมาชิกกดปุ่ม Postback
@handler.add(PostbackEvent)
def handle_postback(event):
    data = event.postback.data
    print(f"Postback data: {data}")

จะเห็นได้ว่าจากตัวอย่างด้านบนจะเป็นโค้ดที่รวมวิธีการรับ Webhook Events ประเภทที่รองรับใน LINE Group Chat สำหรับตัวอย่าง Code ในการทำโต้ตอบหรือดึงข้อมูลของ LINE กลุ่มจะเป็นดังนี้

# 1. Get group chat summary
group = line_bot_api.get_group_summary(group_id)
print(group.group_name)
print(group.picture_url)

# 2. Get number of users in a group chat
members_count = line_bot_api.get_group_member_count(group_id)
print(members_count.count)

# 3. Get group chat member user IDs
members = line_bot_api.get_group_members_ids(group_id)
print(members.member_ids)

# 4. Get group chat member profile
profile = line_bot_api.get_group_member_profile(group_id, user_id)

# 5. Leave group chat
line_bot_api.leave_group(group_id)

# 6.1 Reply Message
line_bot_api.reply_message(
    ReplyMessageRequest(
        reply_token=reply_token,
        messages=[TextMessage(text="Hello Group!")]
    )
)

# 6.2 Push Message
line_bot_api.push_message(
    PushMessageRequest(
        to=group_id,
        messages=[TextMessage(text="Hello everyone!")]
    )
)

2. Message Edit Webhook

แต่ตั้งแต่ LINE ประกาศเมื่อวันที่ 12 สิงหาคม 2026 ว่าผู้ใช้สามารถแก้ไขข้อความใน Group Chat ที่มี LINE Official Account ได้แล้ว โดยแก้ไขข้อความ Text ที่ส่งไปแล้วได้ภายใน 15 นาที และเมื่อมีการแก้ไขข้อความ LINE จะส่ง Webhook Event ที่มีชื่อว่า messageEdited มาให้เรา

ความน่าสนใจของ Event นี้มีอยู่ 3 เรื่องหลัก ๆ ได้แก่

1. ตรวจจับข้อความที่ถูกแก้ไข: Event Type จะเป็น messageEdited และมีข้อความเวอร์ชันใหม่อยู่ใน message.text
2. เชื่อมโยงข้อความเดิมได้: message.id ยังคงเป็น ID เดียวกับข้อความต้นฉบับ ทำให้นำไปค้นหาและอัปเดตข้อมูลใน Database ได้
3. ตอบกลับได้ทันที: Event มี replyToken ของตัวเอง ทำให้ Bot ส่งข้อความตอบกลับเมื่อมีการแก้ไขได้

อย่างไรก็ตาม ฟีเจอร์นี้รองรับเฉพาะข้อความ Text ใน LINE Group Chat และคนที่จะแก้ไขข้อความได้จะต้องเป็นผู้ใช้ LINE Premium นะคะ

Detecting Message Edit Events with Python SDK

สำหรับคนที่เคยสร้าง LINE Bot ด้วย Python SDK มาก่อน น่าจะคุ้นเคยกับการรับข้อความใหม่ผ่าน MessageEvent อยู่แล้ว สำหรับการแก้ไขข้อความ เราแค่เพิ่ม MessageEditedEvent เข้าไปได้เลย

@handler.add(MessageEditedEvent, message=TextMessageContent)
def handle_message_edited(event):
    print(f"Edited message ID: {event.message.id}")
    print(f"New text: {event.message.text}")

จากตัวอย่างโค้ดจะเห็นว่า MessageEditedEvent ถูกรับเข้ามาผ่าน handler เมื่อแก้ไขข้อความประเภท Text จากนั้น เราสามารถรับค่า event.message.id เพื่อดู Message ID และ event.message.text เพื่ออ่านข้อความใหม่หลังจากที่สมาชิกแก้ไขได้ทันที !!

4. Example Use Cases

หลังจากที่เราได้เรียนรู้วิธีรับและจัดการ Webhook Events ด้วย LINE Bot SDK for Python กันไปแล้ว ลองมาดูตัวอย่าง Use Cases ที่สามารถนำไปประยุกต์ใช้กับ LINE Group Chat ในสถานการณ์จริงกันบ้าง โดยเฉพาะการใช้ Message Edit Webhook เพื่อให้ LINE Bot สามารถตรวจจับการแก้ไขข้อความและอัปเดตข้อมูลในระบบได้โดยอัตโนมัติ

ซึ่งตอนแรกบีทก็คิด Use Case ไม่ออกว่าจะเอาไปใช้งานอย่างไร แต่พอได้เข้าฟังในงาน LINE DEV CONF ก็ได้ ไอเดียมาเยอะเลยค่ะ ในบทความนี้จะหยิบมา 2 Use Case เอามาใช้งานผ่าน LINE Bot SDK Python ให้เพื่อนๆได้ดูกัน

### ตัวอย่าง​ Use Case ###

- ชวนไปเที่ยว / Party RSVP: สมาชิกพิมพ์ +1 เพื่อยืนยันเข้าร่วม หรือ -1 เพื่อยกเลิก และสามารถแก้ไขข้อความเดิมได้ เช่น เปลี่ยนจาก +1 เป็น -1 โดย Bot รับ messageEdited Event แล้วอัปเดตสถานะผู้เข้าร่วมอัตโนมัติ
- สั่งกาแฟ / Coffee Order: สมาชิกพิมพ์เมนูเครื่องดื่ม เช่น อเมริกาโน่ หวานน้อย และสามารถแก้ไขข้อความเดิมเป็น อเมริกาโน่ หวานปานกลาง ได้ โดย Bot รับ messageEdited Event แล้วอัปเดตออเดอร์ล่าสุดให้ตรงกับข้อความที่แก้ไข
- Meeting Room Booking: สมาชิกจองห้องประชุมผ่าน LINE Group Chat และสามารถแก้ไขข้อความเดิมเพื่อเปลี่ยนวันหรือเวลาจอง โดย Bot รับ messageEdited Event และอัปเดตข้อมูลการจองอัตโนมัติ
- Group Shopping List: สมาชิกเพิ่มรายการซื้อของ เช่น น้ำดื่ม 2 แพ็ก และแก้ไขเป็น น้ำดื่ม 4 แพ็ก โดย Bot อัปเดตจำนวนสินค้าใน Shopping List โดยไม่สร้างรายการซ้ำ
- Group Expense Tracker: สมาชิกบันทึกค่าใช้จ่าย เช่น ค่าอาหาร 800 บาท และแก้ไขเป็น ค่าอาหาร 850 บาท โดย Bot อัปเดตยอดค่าใช้จ่ายและคำนวณยอดหารเงินของสมาชิกใหม่อัตโนมัติ

ถ้าพร้อมแล้วมาเริ่ม Coding Use Case กันค่ะ

** ตัวอย่างโค้ดทั้งหมดของบทความนี้ อยู่ใน GitHub Repo นี้นะคะ ถ้าสนใจ​ Clone มาเล่นได้ค่ะ :) **

4.1 Party RSVP: Tracking +1 Events

Use Case แรกเป็นตัวอย่างที่ได้ไอเดียมาจากงาน LINE Thailand Developers Conference 2026 ค่ะ

Use case นี้เป็นการนำ Message Edit Webhook มาประยุกต์ใช้กับการจัดกิจกรรมหรือการนัดหมายภายใน LINE Group Chat ลองนึกภาพว่าเรากำลังชวนเพื่อน ๆ ไปเที่ยว หรือจัด Party และต้องการเช็กว่าใครจะเข้าร่วมบ้าง ปกติแล้วสมาชิกในกลุ่มอาจพิมพ์ +1 เพื่อยืนยันว่าไปด้วย หรือ -1 เพื่อบอกว่าไม่สามารถไปได้

แต่ถ้ามีเพื่อนคนหนึ่งตอบ +1 ไปแล้ว และภายหลังเปลี่ยนใจไม่ไป แทนที่จะต้องส่งข้อความใหม่ ก็สามารถ แก้ไขข้อความเดิมจาก +1 เป็น -1 ได้เลย โดย LINE Bot จะได้รับ messageEdited Event และนำข้อมูลที่เปลี่ยนแปลงไปอัปเดตสถานะการเข้าร่วมกิจกรรม

อยากบอกว่าในตอน Live Demo บีทได้ส่ง +1 เข้าไปด้วย อิอิ อย่างไรก็ดีในบทความนี้ขอมาแกะตัวอย่างเป็นโค้ด Python ให้ทุกคนดูกันค่ะ

#### ตัวอย่างการทำงาน ####
- สมาชิกพิมพ์ +1 → Bot รับ MessageEvent และบันทึกว่าเข้าร่วมกิจกรรม
- สมาชิกอีกคนพิมพ์ +1 → Bot เพิ่มรายชื่อผู้เข้าร่วม
- สมาชิกเปลี่ยนใจและแก้ไขข้อความเดิมจาก +1 เป็น -1 → Bot รับ messageEdited Event และอัปเดตสถานะเป็นไม่เข้าร่วม
- สมาชิกพิมพ์ สรุปผู้เข้าร่วม → Bot แสดงจำนวนและรายชื่อผู้เข้าร่วมล่าสุด

ในฝั่ง Backend เราสามารถใช้ groupId และ userId ในการจัดเก็บข้อมูลผู้เข้าร่วม และใช้ message.id เพื่อเชื่อมโยงข้อความที่ถูกแก้ไขกับข้อมูลเดิม ทำให้ Bot สามารถอัปเดตสถานะได้โดยไม่ต้องสร้างรายการซ้ำ

โค้ดนี้เป็นส่วนของ LINE Bot สำหรับจัดการ RSVP ใน Group Chat โดยให้สมาชิกพิมพ์ +1 เพื่อยืนยันเข้าร่วมงาน หรือ -1 เพื่อไม่เข้าร่วม โดยรองรับทั้ง MessageEvent สำหรับข้อความใหม่ และ MessageEditedEvent

@handler.add(MessageEvent, message=TextMessageContent)
@handler.add(MessageEditedEvent, message=TextMessageContent) 
def handle_message(event):
    """Runs every time someone sends or edits a message in the group."""
    if not isinstance(event.source, GroupSource) or not event.reply_token:
        return

    group_id = event.source.group_id
    user_id = event.source.user_id
    text = event.message.text.strip()

    if text == ".":
        reset()
        return

    if text in ("+1", "-1") and user_id:
        # Get the sender's name and picture; use defaults if that fails
        try:
            profile = line_bot_api.get_group_member_profile(group_id, user_id)
            name = profile.display_name
            picture = profile.picture_url or ""
        except Exception:
            name, picture = "สมาชิก", ""

        result = apply_rsvp(
            chat_id=group_id,
            user_id=user_id,
            user_name=name,
            status="in" if text == "+1" else "out",
            message_id=event.message.id,
            timestamp=event.timestamp,
            picture_url=picture,
        )
        if result["status"] != "success":
            return
        card = party_card(result["people"], result["change"])

    else:
        return

    line_bot_api.reply_message(
        ReplyMessageRequest(reply_token=event.reply_token, messages=[card])
    )

4.2 Coffee Shop: Updating Orders with Message Edit Webhook

อีกหนึ่ง Use Case ที่น่าสนใจคือการนำ Message Edit Webhook มาประยุกต์ใช้กับ LINE Bot สำหรับร้านกาแฟ เพื่อให้สมาชิกใน Group Chat สามารถสั่งเครื่องดื่มและแก้ไขออเดอร์ของตัวเองได้ง่ายขึ้น

ลองนึกภาพว่าเราสั่งกาแฟพร้อมเพื่อน ๆ ใน LINE Group Chat โดยมี LINE Bot คอยรับและสรุปออเดอร์ สมาชิกแต่ละคนสามารถพิมพ์เมนูที่ต้องการ เช่น อเมริกาโน่ หวานน้อย 1 แก้ว หรือ ชาเขียว หวานมาก 2 แก้ว ซึ่ง Bot จะรับข้อความผ่าน MessageEvent และบันทึกออเดอร์ หากต้องการเปลี่ยนเมนู ระดับความหวาน หรือจำนวนแก้ว ก็สามารถแก้ไขข้อความเดิมได้ โดย Bot จะรับ messageEdited Event และอัปเดตออเดอร์ให้อัตโนมัติ

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

จากโค้ดตัวอย่าง เราใช้ @handler.add() เพื่อรองรับ Webhook Events

• MessageEvent — เมื่อผู้ใช้ส่งข้อความใหม่ เช่น "ลาเต้เย็น 1 แก้ว"
• MessageEditedEvent — เมื่อผู้ใช้แก้ไขข้อความเดิม เช่น เปลี่ยนจาก "ลาเต้เย็น" เป็น "อเมริกาโน่เย็น"

โค้ดนี้จะแบ่งการทำงานออกเป็น 2 ส่วนหลัก ๆ ค่ะ

ส่วนแรกคือ handle_message() จะทำงานเมื่อมีสมาชิกส่งข้อความใหม่เข้ามาใน LINE Group Chat โดย Bot จะดึงข้อมูลของผู้ส่งและนำข้อความไปให้ Jev ช่วยวิเคราะห์ว่าต้องการทำอะไร เช่น ถ้าขอดูเมนู Bot ก็จะแสดงเมนูกาแฟ ถ้าขอสรุปออเดอร์ Bot ก็จะแสดงรายการที่สั่งไว้ แต่ถ้าเป็นการสั่งกาแฟ Bot ก็จะใช้ Jev ช่วยอ่านรายละเอียดออเดอร์ แล้วบันทึกข้อมูลเอาไว้ค่ะ

@handler.add(MessageEvent, message=TextMessageContent)
def handle_message(event):
    """Runs every time someone sends a message."""
    text = (event.message.text or "").strip()
    cid = chat_id(event.source)
    name, picture = get_user_profile(event.source)
    user_id = event.source.user_id

    intent = jev_classify_intent(text)
    if intent == "summary":
        reply_with_flex_msg(event, [order_card(shop.open_order(cid))])
        return
    if intent == "view_menu":
        quick_reply = confirm_reply() if shop.open_order(cid)["items"] else None
        reply_with_flex_msg(event, [menu_flex(quick_reply)])
        return
    if intent == "order":
        if not shop.round_is_open(cid):
            shop.open_round(cid)
        _save_order(event, cid, user_id, name, picture, jev_read_order(text))
        return

ส่วนที่สองคือ handle_edited_message() จะทำงานเมื่อสมาชิกกลับไปแก้ไขข้อความเดิม เช่น ตอนแรกสั่งอเมริกาโน่หวานน้อย 1 แก้ว แต่เปลี่ยนใจมาแก้เป็นอเมริกาโน่ไม่หวาน 2 แก้ว Bot ก็จะรับข้อความที่แก้ไขใหม่ ส่งให้ Jev วิเคราะห์อีกครั้ง แล้วอัปเดตออเดอร์เดิมให้ตรงกับข้อความล่าสุด โดยไม่ต้องสั่งใหม่ค่ะ

@handler.add(MessageEditedEvent, message=TextMessageContent)
def handle_edited_message(event):
    """Runs every time someone edits a message."""
    text = (event.message.text or "").strip()
    cid = chat_id(event.source)
    name, picture = get_user_profile(event.source)
    user_id = event.source.user_id

    if jev_classify_intent(text) == "order":
        _edit_order(event, cid, user_id, name, picture, jev_read_order(text))

หลังจากลอง deploy เราก็จะได้ LINE Bot ที่สั่งกาแฟ แก้ไข order ในกลุ่มได้แบบนี้ค่ะ ซึ่งสำหรับใครที่อยากเห็นโค้ดแบบเต็มๆ เข้าไปดูได้ที่ GitHub นะคะ

5. Conclusion

ในบทความนี้บีทชวนเพื่อนๆ มาทำ LINE Bot ที่อยู่ในกลุ่ม ด้วย Python​ SDK และที่สำคัญเราได้ลองเล่น Message Edit Webhook ซึ่งเป็นอีกหนึ่งฟีเจอร์ที่น่าสนใจของ LINE Messaging API เพราะช่วยให้ LINE Bot ไม่ได้แค่รับข้อความใหม่ แต่ยังรับรู้และตอบสนองต่อการแก้ไขข้อความใน Group Chat ได้ด้วย เมื่อใช้ร่วมกับ Group Events อื่น ๆ อย่าง join, memberJoined และ unsend เราก็สร้าง Bot ที่เข้าใจบริบทของกลุ่มได้ดีขึ้นมาก

หวังว่าบทความนี้จะช่วยให้เพื่อน ๆ LINE Developers เห็นไอเดียใหม่ ๆ ในการนำ Message Edit Webhook ไปใช้งานกันนะคะ 💚

References

• GitHub: https://github.com/punsiriboo/line-group-chatbot-python
• Message Edit Event: https://linedevth.line.me/th/knowledge-api/message-edit-event
• Messaging API Reference: https://developers.line.biz/en/reference/messaging-api/#edit-event

ข้อความเปลี่ยน LINE Bot ก็รู้! ด้วย Message Edit Webhook — Python SDK was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีค่ะ เพื่อน ๆ LINE Developers ทุกคน !😘 ช่วงที่ผ่านมา ถ้าใครติดตามข่าวสารในวงการ AI น่าจะเริ่มเห็นการพูดถึง Jev, System One และ Discriminative Models ซึ่งเป็นแนวทางของ AI ที่เน้นการวิเคราะห์และตัดสินใจได้อย่างรวดเร็ว จนมีหลาย Use Case ที่นักพัฒนาเริ่มหยิบมาทดลองใช้งานกัน และบีทเองก็คิดว่าน่าสนใจมาก ๆ ถ้าเราลองนำมาประยุกต์ใช้กับ LINE Chatbot กันค่ะ

ในบทความนี้ บีทเลยอยากชวนทุกคนมาลองสร้าง LINE AI Chatbot แบบ Hybrid ด้วย Jev และ Google ADK กันค่ะ!

โดยเราจะใช้ Jev ช่วยในการทำ Intent​ Detection จากข้อความของผู้ใช้ แล้วตอบกลับด้วย Flex Message ที่เตรียมไว้ล่วงหน้า หรือส่งต่อให้ AI Agent ที่สร้างด้วย Google ADK จัดการคำถามที่ซับซ้อนขึ้น หวังว่าบทความนี้จะเป็นอีกหนึ่งไอเดียให้ทุกคนได้ลองนำไปต่อยอดสร้าง LINE Chatbot ที่ทั้งตอบไว ประหยัด Token และยืดหยุ่นมากขึ้นกันนะคะ!

###### Table of Contents ######

1. What is Jev?
    1.1 How does Jev work? 
    1.2 System One vs. System Two  
    1.3 Jev Use Cases
2. Hands-on with Jev
3. Intro to Agent Development Kit (ADK) 
4. Building a Hybrid LINE Chatbot with Jev and ADK
    4.1 Hybrid Chatbot Architecture
    4.2 Intent Detection and Routing with Jev
    4.3 Handling Static Responses with Flex Messages
    4.4 Handling Dynamic Conversations with ADK
5. Conclusion

1. What is Jev?

ก่อนจะไปลงมือสร้าง LINE Chatbot บีทขอชวนมาทำความรู้จักกับ Jev กันก่อนค่ะ :) แต่ขอบอกไว้ก่อนว่าบทความนี้บีทอาจจะไม่ได้ลงลึกถึงความเป็นมาของ TypeSafe AI หรือรายละเอียดทางเทคนิคของ Jev มากนักนะคะ เพราะอยากเน้นไปที่การประยุกต์ใช้งานกับ LINE Chatbot มากกว่า ใครอยากทราบความเป็นมาบีทขอแนะนำบทความนี้ของคุณไมค์ค่ะ ที่อธิบายไว้อย่างละเอียดเลย!!

แล้ว Jev คืออะไรกันแน่ ?

JEV เป็น AI Model จาก TypeSafe AI ที่ออกแบบมาเพื่อช่วยในการตัดสินใจ หรือที่เรียกว่า Decision/Discriminative Models ซึ่งมีแนวคิดการทำงานแตกต่างจาก Large Language Models (LLMs) ที่เราคุ้นเคยกันอย่าง Gemini หรือ ChatGPT

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

1.1 How does Jev work?

ในการใช้งาน Jev เราสามารถส่งข้อมูลบริบท (State) ที่ให้โมเดลพิจารณา พร้อมกับคำถาม (Question) ที่เราอยากให้ช่วยโมเดลตัดสินใจ โดยที่เราสามารถเลือกรูปแบบที่จะให้โมเดลให้คำตอบคืนมาได้ 3 รูปแบบ คือ Choice, Score และ Noul

1. Choice — เลือกคำตอบจากตัวเลือกที่กำหนดไว้ได้ตั้งแต่ 2 จนถึงสูงสุด 255 ตัวเลือก พร้อมค่าความน่าจะเป็นของแต่ละตัวเลือกและค่า Confidence
2. Score — ประเมินคะแนนของคำถามตามเกณฑ์ที่เรากำหนดสูงสุด 10 ระดับ
3. Noul — ประเมินคำถาม หรือเงื่อนไขแบบ Yes/No โดยส่งผลลัพธ์เป็นค่าความน่าจะเป็นระหว่าง 0 ถึง 1

ฟังดูแล้ว Jev อาจดูคล้ายกับการเขียนเงื่อนไข If/Else หรือ Case/When ที่เราคุ้นเคยกันในการเขียนโปรแกรม แต่ Jev ใช้ความสามารถของ AI Model ที่ผ่านการเรียนรู้จากข้อมูลจำนวนมาก มาช่วยวิเคราะห์บริบทและประเมินความเป็นไปได้ของคำตอบ ซึ่งจะทำให้เราได้ใช้ความสามารถในการตัดสินใจของ AI มาร่วมกับ Logic ของโปรแกรมแบบเดิม ได้โดยไม่จำเป็นต้องเขียนเงื่อนไขใดๆด้วยตัวเองเลย

จากภาพด้านบนเป็นตัวอย่างการใช้งาน Jev ในรูปแบบ Choice สำหรับทำ Intent Classification หรือ Request Routing โดยให้โมเดลวิเคราะห์ข้อความของลูกค้าและเลือก Intent ที่ตรงกับความต้องการมากที่สุด ซึ่งหากสังเกตจะเห็นว่ามีองค์ประกอบหลัก 4 ส่วน ได้แก่

1. State — บริบท หรือ ข้อความของลูกค้าที่ต้องการให้วิเคราะห์
2. Question — คำถามที่ต้องการให้โมเดลช่วยตัดสินใจ
3. Options — ตัวเลือกที่กำหนดไว้ เช่น Refunds, Delivery หรือ Restaurant
4. Answer — ผลลัพธ์ที่ Jev ประเมินออกมาเป็นคะแนนของแต่ละตัวเลือก

ในรูปด้านบนเราจะเห็นว่าคำตอบที่ Jev ให้มาเป็นรูปแบบของคะแนน ซึ่งคะแนนสูงสุดอยู่ที่ 0.55 ทำให้รู้ว่าลูกค้าต้องการสอบถามเรื่อง Refunds

1.2 System One vs. System Two

แนวคิดที่น่าสนใจของ Jev คือ “System One Model” ซึ่ง TypeSafe AI ได้รับแรงบันดาลใจจากหนังสือ Thinking, Fast and Slow ของ Daniel Kahneman ที่อธิบายการคิดสองรูปแบบ ได้แก่

• System One (Fast Thinking): การคิดเร็วและตัดสินใจโดยอาศัยสัญชาตญาณ เหมาะกับงานที่ต้องการความรวดเร็ว เช่น การจำแนกประเภท (Classification) หรือการเลือกจากตัวเลือกที่กำหนดไว้
• System Two (Slow Thinking): การคิดวิเคราะห์อย่างเป็นลำดับขั้น ใช้เหตุผลและพิจารณาข้อมูลอย่างละเอียด เหมาะกับงานที่ซับซ้อน เช่น การแก้ปัญหาที่ต้องใช้เหตุผลหลายขั้นตอน (Multi-Step Reasoning)

Jev ถูกออกแบบตามแนวคิด System One โดยเน้นการประเมินและตัดสินใจอย่างรวดเร็ว แตกต่างจาก Generative LLMs ที่สร้างข้อความคำตอบทีละ Token (Sequential Generation) และ Reasoning Models ที่อาจต้องใช้ขั้นตอนการวิเคราะห์เพิ่มเติมในลักษณะคล้าย System Two

มาถึงตรงนี้ทุกคนน่าจะพอเห็นภาพกันแล้วว่าการสร้าง LINE AI Chatbot ที่สามารถตอบสนองความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพนั้น จำเป็นต้องอาศัยการทำงานร่วมกันของทั้ง System One และ System Two

1.3 Jev Use Cases

Jev สามารถนำมาประยุกต์ใช้กับงานที่เน้น การจำแนกข้อมูล (Classification) การประเมินผล (Evaluation) และการตัดสินใจ (Decision-Making) เช่น Intent Classification, AI Tool Selection และ Request Routing โดยมีตัวอย่างการใช้งานดังต่อไปนี้

### Example Jev Use Cases ##

1. Intent Classification - จำแนกความต้องการของผู้ใช้ เช่น สั่งสินค้า ติดตามคำสั่งซื้อ หรือสอบถามข้อมูล
2. Tool Selection - วิเคราะห์คำขอเพื่อเลือก Tool หรือ Function ที่เหมาะสมให้ AI Agent เรียกใช้งาน
3. Model / Agent Routing - เลือก AI Model หรือ Agent ที่เหมาะสมกับประเภทและความซับซ้อนของงาน
4. AI Guardrails - ตรวจสอบ Prompt หรือประเมินความเสี่ยงก่อนที่ AI Agent จะดำเนินการ เช่น อนุญาต ปฏิเสธ หรือส่งให้ผู้ใช้ยืนยัน
5. Content Moderation - จำแนกเนื้อหาที่ไม่เหมาะสมหรืออาจละเมิดนโยบาย
6. Scoring & Prioritization - ประเมินคะแนนความเร่งด่วน ความสำคัญ หรือความเกี่ยวข้องของข้อมูล

“สำหรับบทความนี้ บีทจะเลือกนำ Jev มาทำ Intent Classification บน LINE Chatbot ค่ะ“

บีทมองว่าถ้านำ Jev มาใช้กับ LINE Chatbot รูปแบบการทำงานจะคล้ายๆ กับ Intent Classification อย่างเช่น Dialogflow ที่เราเคยใช้กันในสมัยก่อน ซึ่งเป็น Model แบบ Discriminative เช่นกัน เพียงแต่เราไม่ต้องมาเตรียม Training Data เหมือนสมัยก่อนแล้ว เพียงแต่เราไม่ต้องมาเตรียม Training Data เหมือนสมัยก่อนแล้ว :) เพราะ Jev ถูกเทรนมาจากข้อมูลจำนวนมหาศาล แค่กำหนด Intent พร้อมคำอธิบายก็ใช้งานได้ทันทีค่ะ 🎉🎉🎉

2. Hands-on with Jev

สำหรับใครที่ยังไม่เคยลองใช้งาน Jev สามารถเข้าไปทดลองได้ที่ TypeSafe AI Playground โดยไม่จำเป็นต้องเขียนโค้ด เพียงกำหนดข้อมูลหรือบริบท (State) พร้อมคำถามและรูปแบบผลลัพธ์ที่ต้องการ ก็สามารถทดลองให้ Jev วิเคราะห์และตัดสินใจได้ทันที

ถ้ายังไม่รู้จะเริ่มยังไง ในหน้า Playground มี Example Requests และ Walkthrough Lessons ให้ลองกดเล่นได้เลยค่ะ :)

หน้าจอ Playground จะแบ่งออกเป็น 3 ส่วนหลัก ตามหมายเลขในภาพด้านบนค่ะ

1. State (Context) — ข้อมูลหรือบริบทที่ต้องการให้ Jev วิเคราะห์ ใส่ในรูปแบบ JSON เช่น ข้อความของลูกค้า หรือประวัติการสนทนาทั้ง Session ตามตัวอย่างในภาพ ยิ่งใส่ครอบคลุม Jev ก็จะประเมินได้แม่นยำมากขึ้น
2. Questions (Tasks) — คำถามที่ต้องการให้ Jev ตัดสินใจ แต่ละคำถามต้องกำหนดประเภท (noul, choice หรือ score) พร้อม instructions และ criteria จากนั้นกด Run ได้เลย
3. Response — ผลลัพธ์ของแต่ละคำถาม เช่น issue_resolved (Noul) ได้ 40% true, customer_sentiment (Choice) เลือก positive ด้วย Confidence 100% และ predicted_csat (Score) ได้ 2.31 จาก 4

หรือถ้าอยากเรียกใช้ Jev ผ่านโค้ด ก็สามารถใช้ TypeSafe SDK สำหรับ Python ได้เลยค่ะ เริ่มจากติดตั้ง Package ด้วยคำสั่งนี้

pip install typesafe-sdk

โดยให้ไปที่เมนู API keys แล้วกด Create key เพื่อสร้าง API Key สำหรับใช้งานกับ SDK หลังจากนี้ค่ะ

ตัวอย่างด้านล่างเป็นการให้ Jev วิเคราะห์ข้อความของลูกค้า 1 ข้อความ โดยถาม 3 คำถามพร้อมกันในครั้งเดียว ครบทั้ง 3 รูปแบบเลยค่ะ

• billing (Noul) — ถามว่าข้อความนี้เกี่ยวกับการเรียกเก็บเงินหรือไม่ ได้คำตอบเป็นค่าความน่าจะเป็นระหว่าง 0 ถึง 1
• tone (Choice) — ให้เลือกอารมณ์ของลูกค้าจากตัวเลือก calm, frustrated หรือ angry
• urgency (Score) — ให้ประเมินความเร่งด่วนตามเกณฑ์ can wait, this week และ today

from typesafe_sdk import Choice, Noul, Score, TypeSafeClient

with TypeSafeClient() as client:
    response = client.system_one(
        state={"document": "I was charged twice. Please fix this ASAP."},
        questions={
            "billing": Noul(instructions="Is this ticket about billing?"),
            "tone": Choice(
                instructions="What is the customer's tone?",
                criteria={"calm": None, "frustrated": None, "angry": None},
            ),
            "urgency": Score(
                instructions="How urgent is this ticket?",
                criteria=["can wait", "this week", "today"],
            ),
        },
    )

print(response.nouls["billing"].noul)
print(response.choices["tone"].choice)
print(response.scores["urgency"].score)

เมื่อได้ response กลับมา เราสามารถดึงผลลัพธ์ของแต่ละคำถามได้จาก response.nouls, response.choices และ response.scores ตาม Key ที่เราตั้งไว้ได้เลย ซึ่งจากข้อความตัวอย่างนี้ Jev น่าจะประเมินว่าเป็นเรื่อง billing ลูกค้ากำลังไม่พอใจ และต้องการให้แก้ไขภายในวันนี้ ลองรันดูกันได้นะคะ :)

3. Intro to Agent Development Kit (ADK)

ในส่วนนี้จะเป็นการสร้าง AI Agent สำหรับคำถามที่ซับซ้อนหรือไม่อยู่ใน Intent ที่กำหนดไว้ บีทจะใช้ Agent Development Kit (ADK) ซึ่งเป็น Open-source Framework จาก Google โดย ADK จะเข้ามาช่วยจัดการเรื่อง Session การเรียกใช้ LLM และ Tools ให้เรา ทำให้สร้าง Agent ได้ด้วยโค้ดเพียงไม่กี่บรรทัด เริ่มจากติดตั้ง Package ก่อนเลยค่ะ

pip install google-adk

จากนั้นสร้าง Agent สำหรับร้าน BEAT COFFEE โดยมีองค์ประกอบหลักดังนี้ค่ะ

• Agent — กำหนดโมเดล (gemini-3.8-flash) ชื่อ AI Agent คำอธิบาย และ instruction หรือ System Prompt ที่บอกบทบาทของ Agent พร้อมข้อมูลของร้าน เช่น สาขา เวลาเปิด–ปิด โปรโมชั่น และเมนู เพื่อให้ Agent ตอบได้ถูกต้องตามข้อมูลจริงของร้าน
• InMemorySessionService — เก็บประวัติการสนทนาของแต่ละ Session ไว้ใน Memory ทำให้ Agent จำบริบทของบทสนทนาก่อนหน้าได้
• Runner — ตัวกลางที่คอยรัน Agent รับข้อความจากผู้ใช้ เรียกโมเดล และส่งคำตอบกลับมาให้เรา

from google.adk.agents.llm_agent import Agent
from google.adk.runners import Runner
from google.adk.sessions import InMemorySessionService
from google.genai.types import Content, Part
from google.adk.tools import google_search

runner = Runner(
    app_name=APP_NAME,
    session_service=session_service,
    agent=Agent(
        model="gemini-3.8-flash",
        name="beat_coffee_agent",
        description="พนักงานร้านกาแฟ BEAT COFFEE",
        instruction=(
            "คุณเป็นพนักงานร้านกาแฟ BEAT COFFEE ตอบลูกค้าเป็นภาษาไทย สั้น เป็นกันเอง\n"
            "ข้อเท็จจริงของร้าน: มีสาขากรุงเทพฯ และสุรินทร์ เปิดทุกวัน 08:00-18:00 น. "
            "โปรโมชั่นคือซื้อ 2 แก้วลด 10% "
            "สะสมครบ 10 แก้วรับเครื่องดื่มฟรี 1 แก้ว "
            "ชำระเงินสด พร้อมเพย์ หรือบัตร สั่งในแชทนี้แล้วรับที่ร้านหรือจัดส่งได้ "
            "เมนูมีเอสเพรสโซ อเมริกาโน่ ลาเต้ คาปูชิโน่ และมอคค่า\n"
            "ถ้าคำถามอยู่นอกข้อเท็จจริงของร้าน ให้ใช้ Google Search แล้วตอบสั้นจากผลค้นหา"
        ),
        tools=[google_search],
    ),
)

สำหรับการเชื่อมต่อกับ Gemini ที่เราใช้เป็น AI Agent เราจะต้องเข้าไปเอา API Key จาก Google AI Studio ได้เลยค่ะ

4. Building a Hybrid LINE Chatbot with Jev and ADK

“และแล้วก็มาถึงส่วนสำคัญที่สุดของบทความนี้คือการนำ Jev และ ADK มาใช้ เพื่อสร้าง LINE AI Chatbot “

📣📣โค้ดทั้งหมดของบทความนี้ สามารถเข้าไปดูใน GitHub Repo ได้เลยค่ะ 📣📣

### Building a Hybrid LINE Chatbot with Jev and ADK ###
4.1 Hybrid Chatbot Architecture
4.2 Intent Detection and Routing with Jev
4.3 Handling Static Responses with Flex Messages
4.4 Handling Dynamic Conversations with ADK
4.5 Deploy to Cloud Run & Test

4.1 Hybrid Chatbot Architecture

ก่อนลงมือเขียนโค้ด มาดูภาพรวมการทำงานของ Chatbot กันก่อนค่ะ

เมื่อผู้ใช้ส่งข้อความผ่าน LINE Official Account ระบบจะรับข้อความผ่าน LINE Webhook แล้วส่งให้ Jev วิเคราะห์ Intent พร้อมประเมินค่า Confidence เพื่อเลือกวิธีตอบกลับดังนี้

1. Known Intent เช่น view_menu, store_hours, promotion และมี Confidence สูงตามเกณฑ์ที่กำหนด → ตอบกลับทันทีด้วย Flex Message ที่เตรียมไว้ โดยไม่ต้องเรียก LLM
2. Other หรือ Low Confidence → ส่งต่อให้ Google ADK Agent ช่วยวิเคราะห์และ Generate คำตอบ

วิธีนี้ช่วยให้ Chatbot ตอบคำถามทั่วไปได้รวดเร็วด้วย Jev และจัดการคำถามที่ซับซ้อนด้วย Google ADK ค่ะ

สำหรับการเชื่อมต่อกับ LINE Messaging API บีทจะใช้ LINE Messaging API SDK for Python ซึ่งติดตั้งได้ด้วยคำสั่งด้านล่างค่ะ

สำหรับใครที่ยังไม่เคยลองใช้งาน LINE Bot SDK Python บีทฝากบทความนี้ด้วยค่ะ :)

ในการสร้าง LINE Chabot เราจำเป็นต้องเข้าไปสร้าง LINE Official Accout ก่อนที่ LINE Official Account Manager และหลังจากที่ได้ LINE OA Account มาแล้วก็ให้ไปที่หน้า Setting > Messaing API เพื่อทำการเปิดใช้งาน Messaging API ซึ่งจะสามารถทำให้เราเชื่อมต่อ AI Chatbot ที่เราจะสร้าง กับ LINE Messaging API ได้

โดยในการจะเชื่อมต่อนั้นให้เราไป ที่ LINE Developer Console และนำ Channel secret และ Channel access token มาเก็บไว้เพื่อเชื่อมต่อภายหลังค่ะ

ใน Demo ของบทความนี้โค้ดจะอยู่ใน GitHub ที่บีทได้เตรียมไว้ให้แล้ว แต่ส่วนนึงที่สำคัญ และอยากเน้นย้ำก็คือเรื่องของการจัดการ Keys ทั้งหมดค่ะ ถ้าทุกทำตามถึงตรงนี้จะได้ Keys ในการเชื่อมต่อทั้งจาก TypeSaveAI — Jev , Google Gemini, LINE Messaging API ในการเชื่อมต่อบีทจึงใส่ Keys เหล่านี้ใน .env ไฟล์ เพื่อให้ LINE Chatbot Webhook ที่เรากำลังจะสร้างสามารถเข้าถึงได้ทุก services ค่ะ

4.2 Intent Detection and Routing with Jev

เริ่มจากการกำหนด Intents ที่ Chatbot ของเรารองรับก่อนค่ะ โดยเก็บไว้ใน Dictionary ชื่อ INTENT_CRITERIA ซึ่ง Key คือชื่อ Intent และ Value คือคำอธิบายพร้อมตัวอย่างประโยค ยิ่งเขียนคำอธิบายชัดเจน Jev ก็จะยิ่งเลือก Intents ได้แม่นยำขึ้น และอย่าลืมเพิ่ม Intent other ไว้รองรับคำถามที่ไม่เข้าพวกด้วยนะคะ

INTENT_CRITERIA = {
    "view_menu": "อยากดูเมนูกาแฟของร้าน BEAT COFFEE หรือถามว่ามีกาแฟอะไรบ้าง เช่น ขอดูเมนูกาแฟ, มีกาแฟ BEAT COFFEE อะไรบ้าง",
    "store_hours": "ถามเวลาเปิดหรือปิดร้าน BEAT COFFEE เช่น ร้านเปิดกี่โมง, วันนี้ปิดกี่โมง",
    "promotion": "ถามโปรโมชั่น ส่วนลด หรือการสะสมแต้ม เช่น มีโปรอะไรบ้าง, ตอนนี้มีส่วนลดไหม, สะสมครบ 10 ฟรีไหม",
    "location": "ถามตำแหน่งร้าน เช่น ร้านอยู่ที่ไหน, ร้านอยู่ที่กรุงเทพมหานครหรือสุรินทร์",
    "contact": "ถามวิธีติดต่อร้าน เช่น วิธีติดต่อร้าน, โทรศัพท์ร้าน",
    "other": "คำถามอื่นที่ไม่ใช่เมนู เวลาเปิดร้าน โปรโมชั่น การสะสมแต้ม ที่ตั้งร้าน หรือการติดต่อ",
}

จากนั้นสร้างฟังก์ชัน detect_intent_with_jev() เพื่อส่งข้อความของผู้ใช้ไปให้ Jev วิเคราะห์ค่ะ โดยหากดูจากโค้ดก็จะพบว่ามีองค์ประกอบของ Input ที่ส่งให้ Jev ​

• state — บริบทที่ส่งให้ Jev พิจารณา ในที่นี้คือช่องทาง (line) และข้อความของผู้ใช้ (message)
• questions — คำถามที่ต้องการให้ Jev ตัดสินใจ โดยใช้รูปแบบ Choice พร้อม instructions ให้เลือก Intent ที่ตรงที่สุด ผ่านตัวแปร INTENT_CRITERIA เป็นตัวเลือกของ Flex Messages ที่เราเตรียมไว้ก่อนหน้านี้

import os

from typesafe_sdk import Choice, TypeSafeClient

client = TypeSafeClient(api_key=os.environ["JEV_API_KEY"], model="jev-latest")

def detect_intent_with_jev(user_text):
    """Classify a LINE text message with Jev and return (intent, confidence)."""
    result = client.system_one(
        state={"channel": "line", "message": user_text},
        questions={
            "intent": Choice(
                instructions=(
                    "เลือก intent ที่ตรงกับข้อความลูกค้าของร้านกาแฟ BEAT COFFEE มากที่สุด "
                    "ถ้าไม่เข้า intent ที่มีอยู่ ให้เลือก other"
                ),
                criteria=INTENT_CRITERIA,
            )
        },
    )
    answer = result.choices.get("intent")
    return answer.choice, float(answer.confidence or 0)

4.3 Handling Hybrid Responses

เมื่อรู้ Intent แล้ว ขั้นต่อไปคือการเลือกคำตอบที่จะส่งกลับไปหาผู้ใช้ค่ะ บีทสร้าง _FLEX_FILES_MAPPING เพื่อจับคู่ Intent แต่ละตัวกับไฟล์ Flex Message โดยเพื่อนๆ จะสร้าง Flex Message ด้วยตัวเองที่ Flex Message Simulator หรือให้ AI Coding Agent สร้างให้ก็ได้ ในสมัยนี้การพัฒนา LINE Chatbot ง่ายขึ้นมากๆ

ในการทำงานเมื่อ user ส่งข้อความเข้ามา ก็จะถูกส่งให้ Jev ประมวลผล และเมื่อ Jev เลือก intent ได้ก็จะ เอา Intent นั้นมา lookup เพื่อดูว่าจะต้องส่งข้อความ หรือ Flex Message อย่างไร ผ่านตัวแปร _FLEX_FILES_MAPPING จากนั้นใช้ฟังก์ชัน flex_message_for_intent() สร้างข้อความตอบกลับตาม Intent ค่ะ

_FLEX_FILES_MAPPING = {
    "view_menu": ("view_menu.json", "BEAT COFFEE มีเมนูเครื่องดื่มดังนี้ค่ะ"),
    "store_hours": ("store_hours.json", "ร้านเปิดทุกวัน 08:00 - 18:00 น."),
    "promotion": ("promotion.json", "ซื้อ 2 แก้วลด 10% และสะสมครบ 10 แก้วฟรี 1 แก้ว"),
    "location": ("location.json", "BEAT COFFEE มีสาขากรุงเทพมหานครและสุรินทร์"),
    "contact": ("contact.json", "ติดต่อ BEAT COFFEE ได้ในแชทนี้"),
}


def flex_message_for_intent(intent):
    item = _FLEX_FILES_MAPPING.get(intent)
    if item is None:
        return None
    filename, text = item
    raw = (FLEX_DIR / filename).read_text(encoding="utf-8")
    flex_message = FlexMessage(
        alt_text=text,
        contents=FlexContainer.from_json(raw),
    )
    return [TextMessage(text=text), flex_message]

ต่อมาคือหัวใจของ Hybrid Chatbot นั่นก็คือฟังก์ชัน handle_text_message() ที่ทำหน้าที่เป็น Router รับข้อความจาก LINE Messaging API และส่งให้ Jev ตัดสินใจว่าจะตอบด้วย Flex Message หรือส่งต่อให้ ADK ดี

@handler.add(MessageEvent, message=TextMessageContent)
def handle_text_message(event):
    user_text = event.message.text
    user_id = event.source.user_id


    intent, confidence = detect_intent_with_jev(user_text)
    known_intent = intent != "other"
    high_confidence = confidence >= CONFIDENCE_THRESHOLD
    if known_intent and high_confidence:
        messages = flex_message_for_intent(intent)
    else:
        _show_loading(event)
        messages = get_agent_response(user_text, user_id)

    line_bot_api.reply_message(
        ReplyMessageRequest(
            reply_token=event.reply_token,
            messages=messages,
        )
    )

ทุกครั้งที่ user ส่งข้อความเข้ามาทาง LINE Chatbot ฟังก์ชันนี้จะทำงานดังนี้ค่ะ

1. รับข้อความจากผู้ใช้ โดยดึงข้อความ (user_text) และ LINE User ID (user_id) จาก Event ที่ LINE ส่งมา
2. ให้ Jev วิเคราะห์ข้อความ ผ่านฟังก์ชัน detect_intent_with_jev() เพื่อดูว่าผู้ใช้ต้องการอะไร (Intent) พร้อมประเมินค่าความมั่นใจ (Confidence)
3. หาก Jev ระบุ Intent ได้อย่างมั่นใจ โดย Intent ไม่ใช่ other และค่า Confidence มากกว่าหรือเท่ากับ CONFIDENCE_THRESHOLD ระบบจะเรียก flex_message_for_intent() เพื่อส่ง Flex Message ที่เตรียมไว้ทันที
4. หาก Jev ไม่มั่นใจหรือไม่พบ Intent ที่ตรงกัน ระบบจะส่งข้อความต่อให้ ADK Agent ผ่าน get_agent_response() เพื่อช่วยสร้างคำตอบ
5. ส่งคำตอบกลับไปยังผู้ใช้ ผ่าน line_bot_api.reply_message() โดยใช้ reply_token จาก Event ที่ได้รับ

4.5 Deploy to Cloud Run & Test

เมื่อโค้ดพร้อมแล้ว มา Deploy ขึ้น Cloud Run กันค่ะ บีทใช้คำสั่ง gcloud run deploy แบบ Source Deploy ซึ่ง Cloud Run จะ Build Container ให้อัตโนมัติจากโค้ดในโฟลเดอร์ปัจจุบัน ไม่ต้องเขียน Dockerfile เองเลย

gcloud run deploy "$SERVICE_NAME" \
  --account="$GCP_ACCOUNT" \
  --project="$GCP_PROJECT_ID" \
  --region="$GCP_REGION" \
  --source=. \
  --function=callback \
  --base-image="$BASE_IMAGE" \
  --allow-unauthenticated \
  --memory="$MEMORY" \
  --timeout="$TIMEOUT" \
  --env-vars-file="$ENV_FILE" \
  --quiet

เมื่อ Deploy สำเร็จ ให้นำ URL ของ Service ไปใส่ในช่อง Webhook URL ใน LINE Developers Console แล้วเปิด Use webhook จากนั้นลองทักแชทไปที่ LINE OA เพื่อทดสอบได้เลยค่ะ!

ภาพด้านบนแสดงผลการทดสอบ Chatbot หลัง Deploy ซึ่งสามารถตอบคำถามได้ทั้ง 2 รูปแบบตามที่ออกแบบไว้ โดยใช้ Flex Message ตอบคำถามที่พบบ่อยได้อย่างสวยงามและสม่ำเสมอโดยไม่ต้องเรียก LLM ส่วนคำถามที่ซับซ้อนหรือหลากหลายจะส่งต่อให้ Google ADK ตอบกลับอย่างเป็นธรรมชาติค่ะ

5. Conclusion

“จากที่ได้ลองใช้งาน Jev แล้ว ส่วนตัวชอบมากค่ะ “

คิดว่าการนำ Jev มาใช้งานร่วมกับ LLMs ในรูปแบบ Hybrid AI Chatbot เป็นแนวทางที่น่าสนใจมาก เพราะ Chatbot ของเราไม่จำเป็นต้องส่งทุกคำถามไปให้ LLMs ประมวลผลเสมอไป สำหรับคำถามที่รู้คำตอบแน่นอนอยู่แล้ว เช่น การขอเมนูสินค้า เวลาเปิด–ปิดร้าน หรือคำถามที่มี Flow ชัดเจน เราสามารถใช้ Jev แยก Intent แล้วตอบกลับด้วยข้อความหรือ Flex Message ที่กำหนดไว้ล่วงหน้าได้ทันที ส่วนคำถามที่ซับซ้อนหรือต้องการสนทนาแบบ Small Talk ก็ค่อยส่งต่อให้ LLMs จัดการ

จากที่ลองเล่นมา Jev ตอบได้ไวมากๆ และประหยัดใช้ได้เลยค่ะ เนื่องจากลองกดเล่นไปกว่าสี่ร้อยครั้งระหว่างทดสอบ จะเห็นว่า Cost ที่ใช่ไปยังไม่ถึง 0.1 ดอลลาร์เลยค่ะ 🤯🤯 ถูกมาก!!

ข้อดีของ Hybrid AI Chatbot แบบนี้ คือช่วยให้ ประหยัด Token ลดต้นทุน ลด Latency และตอบกลับได้รวดเร็วยิ่งขึ้น พร้อมทั้งรักษาความสม่ำเสมอของคำตอบและความยืดหยุ่นในการสนทนาได้จริงค่ะ

เพราะสุดท้ายแล้ว AI Chatbot ที่ดีไม่จำเป็นต้องใช้ LLMs ตอบทุกคำถาม แต่ควรเลือกใช้ AI ให้เหมาะกับแต่ละงานค่ะ :)

หากบทความนี้เป็นประโยชน์ อย่าลืมกดแชร์หรือกดปรบมือเพื่อเป็นกำลังใจให้ด้วยนะคะ ขอบคุณมากที่อ่านมาจนถึงตรงนี้ แล้วพบกันในบทความหน้าค่ะ 🤟💙

References

• https://typesafe.ai/blog/introducing-system-one-models-and-jev
• https://adk.dev/agents/models/google-gemini/

สร้าง LINE AI Chatbot แบบ Hybrid ด้วย Jev และ Google ADK was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีค้าบเพื่อนๆ LINE Developers ทุกคนนน 👋

ปกติเวลาเราพัฒนาอะไรเกี่ยวกับ LINE ไม่ว่าจะเป็น Messaging API, LINE Login, LIFF หรือ LINE MINI App ก็น่าจะคุ้นเคยกับ LINE Developers Documentation กันอยู่แล้ว

วันนี้ผมเลยอยากมาแนะนำอีกมุมหนึ่งครับ 😆

จริงๆ แล้ว Source ของ LINE Developers Docs มีอยู่บน GitHub ด้วย

และสิ่งที่ผมว่าน่าสนใจคือ…

ถ้า Documentation อยู่ในรูปแบบไฟล์แบบนี้
เราสามารถเลือกเฉพาะเรื่องที่เราใช้ แล้วเอาไปทำเป็น Skill ให้ Codex ช่วยเราทำงานต่อได้ไหม?

วันนี้เลยจะลองกันแบบง่ายๆ ครับ

โจทย์ของเราคือ

สร้าง LINE Messaging API Webhook ด้วย Node.js
รับข้อความจาก User แล้ว Reply กลับว่า Hello {ข้อความ}

สุดท้ายจะได้แบบนี้ครับ 🎉

วันนี้เราจะทำอะไรกันบ้าง? 😆

แบบรวบรัด Flow ของบทความนี้มีประมาณนี้ครับ

• Step 1 ก่อนอื่น เราต้องรู้ก่อนว่าจะใช้ Docs ตัวไหน
• Step 2 Clone LINE Developers Docs มาไว้ก่อน
• Step 3 ลองให้ Codex สร้าง Skill ให้เรา
• Step 4 แล้ว Skill คืออะไร?
• Step 5 ใช้ Skill สั่ง Codex ทำงานจริง
• Step 6 สร้างและ Run LINE Webhook
• Step 7 เปิด Localhost ด้วย ngrok และเชื่อม LINE
• Step 8 ลองของจริงกับ LINE กัน

Step 1 ก่อนอื่น เราต้องรู้ก่อนว่าจะใช้ Docs ตัวไหน

ถ้าเปิดเข้าไปที่ Messaging API

จะพบว่ามี Documentation เยอะมากครับ

แต่โจทย์ของเราแค่ทำ Reply Bot ง่ายๆ

ไม่จำเป็นต้องเอาทั้ง Folder ให้ Codex อ่าน

จากที่ผมลองไล่ดูไฟล์จริงๆ สำหรับ Use Case นี้ ผมเลือกแค่ 5 เรื่องครับ

messaging-api/

├── receiving-messages/. #Webhook และ Event ที่ LINE ส่งเข้ามา
│   └── index.html.md
│
├── verify-webhook-signature/ #ตรวจว่า Request มาจาก LINE จริง
│   └── index.html.md
│
├── sending-messages/ #Reply Message / Push Message
│   └── index.html.md
│
├── line-bot-sdk/ #line-bot-sdk
│   └── index.html.md
│
└── nodejs-sample/ #ตัวอย่าง Reply Bot ด้วย Node.js
    └── index.html.md

จุดหนึ่งที่น่าสนใจคือ nodejs-sample ของ LINE ตั้งใจสอนพื้นฐานโดย ไม่ใช้ SDK แต่ใน line-bot-sdk มี Official SDK สำหรับ Node.js อยู่แล้ว

ดังนั้นสำหรับ Demo ของเรา ผมจะกำหนดใน Skill ไปเลยว่า

ถ้ามี Official LINE SDK ให้ใช้ SDK

เพราะ Code จะสั้นและอ่านง่ายกว่า ตรงนี้เป็นสิ่งแรกที่อยากฝากไว้เลยครับ

อย่าโยน Documentation ทั้งหมดให้ AI ถ้าเราไม่ได้ใช้ทั้งหมด

เลือก Context ให้ตรงกับงานก่อนครับ 😆

Step 2 Clone LINE Developers Docs มาไว้ก่อน

เริ่มจาก Clone Repository

git clone https://github.com/line/line-developers-docs-source.git

เข้า Folder

cd line-developers-docs-source

ตอนนี้เราก็มี Source Docs อยู่ในเครื่องเรียบร้อย

จากนั้นเราจะให้ Codex ช่วยเปลี่ยน Docs ที่เลือกไว้เมื่อกี้ให้กลายเป็น Skill

Step 3 ลองให้ Codex สร้าง Skill ให้เรา

Codex มี $skill-creator สำหรับช่วยสร้าง Skill ได้โดยตรง โดย Skill จะมี SKILL.md เป็นไฟล์หลัก และสามารถมี references, scripts หรือ assets เพิ่มได้ด้วย OpenAI Developers

ลองเปิด Codex แล้ว Prompt แบบนี้ครับ

$skill-creator

Create a skill named line-messaging-api.

Use these LINE Developers Documentation files
as the source of truth:

- docs/en/docs/messaging-api/receiving-messages/index.html.md
- docs/en/docs/messaging-api/verify-webhook-signature/index.html.md
- docs/en/docs/messaging-api/sending-messages/index.html.md
- docs/en/docs/messaging-api/line-bot-sdk/index.html.md
- docs/en/docs/messaging-api/nodejs-sample/index.html.md

This skill should help developers build simple
LINE Messaging API applications.

Rules:

- Prefer official LINE SDKs when available
- Verify webhook signatures before processing events
- Use environment variables for Channel Secret
  and Channel Access Token
- Support text message events
- Support Reply Message
- Keep Node.js examples simple
- Don't invent unsupported LINE API properties
- Refer back to the LINE Developers Documentation
  when API behavior is unclear

ตรงนี้จริงๆ เราไม่ได้บอก Codex ว่า

“ช่วยเขียน Webhook ให้หน่อย”

นะครับ แต่เรากำลังบอกว่า

“เวลาจะช่วยผมทำ LINE Messaging API ต่อจากนี้ ให้ยึดกติกาพวกนี้นะ

Step 4 แล้ว Skill คืออะไร?

หลังจากสร้างเสร็จ เราจะได้โครงประมาณนี้

.codex/
└── skills/
    └── line-messaging-api/
        ├── SKILL.md
        └── references/

Codex Skill หลักๆ ก็คือ Folder ที่มี SKILL.md ซึ่งประกอบด้วย name, description และ Instructions ว่า Skill นี้ใช้เมื่อไร และควรทำงานอย่างไร OpenAI Developers

ตัวอย่างแนวๆ นี้

---
name: line-messaging-api
description: Build LINE Messaging API applications
using official LINE Developers documentation.
---

Use this skill when implementing
LINE Messaging API features.

- Read the relevant LINE documentation first.
- Prefer official LINE SDKs.
- Verify webhook signatures.
- Never hardcode credentials.
- Handle supported webhook events only.
- Don't invent unsupported API properties.

ตรงนี้แหละครับที่เริ่มต่างจากการ Prompt ปกติ

ก่อนมี Skill

เราต้องบอกทุกครั้งว่า

ใช้ SDK นะ
ตรวจ Signature ด้วยนะ
อย่า Hardcode Secret นะ
ใช้ Reply Token นะ
ดู LINE Docs ด้วยนะ
...

หลังมี Skill

เรื่องพวกนั้นอยู่ใน Skill แล้ว Prompt ของเราเลยเหลือแค่… เราต้องการทำอะไร

Step 5 ใช้ Skill สั่ง Codex ทำงานจริง

ผมลองสั่ง Codex ง่ายๆ แบบนี้

Use the line-messaging-api skill.

Create a simple LINE Messaging API webhook
using Node.js and Express.

When the user sends a text message,
reply with:

Hello {message}

Keep the example simple.

ถ้าเป็นภาษาที่ผมใช้จริงๆ ก็ประมาณนี้เลยครับ 😆

ใช้ line-messaging-api skill

ช่วยสร้าง LINE Webhook ง่ายๆ
ด้วย Node.js + Express ให้หน่อย

ถ้าผู้ใช้ส่ง Text Message เข้ามา
ให้ Reply กลับว่า

Hello {ข้อความที่ส่งมา}

ขอ Code แบบง่ายๆ อ่านรู้เรื่อง

Step 6 สร้างและ Run LINE Webhook

Project ง่ายๆ ของเราจะประมาณนี้

ติดตั้ง Package ใน linechatbot

npm install express @line/bot-sdk dotenv

แล้ว index.js ก็ประมาณนี้

require("dotenv").config();

const express = require("express");
const line = require("@line/bot-sdk");

const {
  LINE_CHANNEL_SECRET,
  LINE_ACCESS_TOKEN,
  PORT = 3000,
} = process.env;

if (!LINE_CHANNEL_SECRET || !LINE_ACCESS_TOKEN) {
  throw new Error(
    "Set LINE_CHANNEL_SECRET and LINE_ACCESS_TOKEN before starting the server.",
  );
}

const client = line.LineBotClient.fromChannelAccessToken({
  channelAccessToken: LINE_ACCESS_TOKEN,
});

const app = express();
const webhookMiddleware = line.middleware({
  channelSecret: LINE_CHANNEL_SECRET,
});

app.get("/", (_req, res) => {
  res.sendStatus(200);
});

// Keep LINE's middleware before any JSON body parser so it can verify the raw body.
app.post("/webhook", webhookMiddleware, (req, res) => {
  res.sendStatus(200);

  Promise.all(req.body.events.map(handleEvent)).catch((error) => {
    console.error("Failed to handle LINE webhook events:", error);
  });
});

function handleEvent(event) {
  if (
    event.type !== "message" ||
    event.message?.type !== "text" ||
    !event.replyToken
  ) {
    return Promise.resolve(null);
  }

  return client.replyMessage({
    replyToken: event.replyToken,
    messages: [
      {
        type: "text",
        text: `Hello ${event.message.text}`,
      },
    ],
  });
}

app.listen(PORT, () => {
  console.log(`LINE bot listening on port ${PORT}`);
});

สิ่งที่น่าสังเกตคือ Code ที่ออกมาไม่ได้มีแค่ Logic

รับข้อความ → Reply

แต่มีเรื่อง

line.middleware(config)

เข้ามาด้วย

ซึ่ง Official Docs ระบุชัดว่าควร Verify Webhook Signature ก่อนนำ Event ไปประมวลผล (receiving-messages และ verify-webhook-signature)

ตรงนี้แหละครับที่ผมมองว่า Documentation เริ่มมีประโยชน์กับ Coding Assistant มากขึ้น

Step 7 เปิด Localhost ด้วย ngrok และเชื่อม LINE

ต่อไปก็สร้าง .env file

cp .env.example .env

ต่อไปก็เอาค่าจาก “LINE Developers Console -> Messaging API Channel” มาใส่

LINE_CHANNEL_SECRET=...
LINE_ACCESS_TOKEN=...
PORT=3000

Run Server

npm start

ตอนนี้ Webhook ของเรารันอยู่ที่เครื่อง

http://localhost:3000/webhook

ปัญหาคือ…

LINE เรียก localhost ในเครื่องเราไม่ได้ครับ 😆

เราต้องมี Public URL ที่ LINE Platform สามารถยิง Webhook เข้ามาได้

ตรงนี้ผมใช้ ngrok

ติดตั้งก่อน เช่นบน macOS

brew install ngrok

จากนั้น Login / เพิ่ม Auth Token ตามบัญชี ngrok ของเรา

ngrok config add-authtoken $YOUR_AUTHTOKEN

แล้วเปิด Tunnel ไปที่ Port 3000

ngrok http 3000

จะได้ประมาณนี้

Forwarding
https://xxxx-xxxx.ngrok-free.app -> http://localhost:3000

ดังนั้น Webhook URL ของเราก็จะเป็น

https://xxxx-xxxx.ngrok-free.app/webhook

Flow ตอนนี้จะกลายเป็นแบบนี้ครับ

ตรงนี้ทำให้ Local Project ของเราถูกเรียกจาก LINE ได้แล้วครับ 🎉

กลับไปที่ Messaging API Channel ของเรา จากนั้นเอา

https://xxxx-xxxx.ngrok-free.app/webhook

ไปใส่เป็น Webhook URL แล้วกด

Verify

ถ้าทุกอย่างถูกต้องก็ควร Verify ผ่าน จากนั้นอย่าลืมเปิด

Use webhook

ด้วยครับ

ตรงนี้เป็นอีกภาพที่ดีมากสำหรับบทความ เพราะคนอ่านจะเข้าใจเลยว่า

“อ๋อ… Code ที่รันในเครื่องเรา LINE เข้ามาหาได้ผ่าน ngrok แบบนี้นี่เอง”

Step 8 ลองของจริงกับ LINE กัน

ลองส่ง

ดีจ้า

ผลที่ได้

Hello ดีจ้า

เรียบร้อย 🎉

มี Note เล็ก ๆ ที่ควรใส่ด้วยครับ:

สำหรับ Demo ใช้ ngrok สะดวกมาก แต่ URL แบบฟรีอาจเปลี่ยนเมื่อเราเปิด session ใหม่ ดังนั้นถ้า URL เปลี่ยน อย่าลืมกลับไปแก้ Webhook URL ใน Messaging API Channel ด้วยนะครับ 😆

ผมว่าเพิ่ม Step นี้แล้วบทความจะ ครบและทำตามได้จริงตั้งแต่ต้นจนจบ มากขึ้นครับ.

สุดท้ายแล้ว Skill ช่วยอะไรเรา?

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

Prompt ยาวๆ
+ ต้องอธิบายใหม่ทุกครั้ง
+ กลัว AI จำ API ผิด
Code

มาเป็น

Official Docs
+ Skill
+ Prompt สั้นๆ
Code

Skill เลย ไม่ได้มีไว้เพื่อให้ AI “เก่งขึ้น” อย่างเดียว แต่ช่วยให้เรา กำหนดวิธีทำงานของมันได้ชัดขึ้น และครั้งหน้าถ้าต้องกลับมาทำ LINE Development อีกครั้ง

ก็ไม่ต้องเริ่มจากศูนย์ใหม่ทุกครั้ง 😆💚

ใครใช้ AI ตัวไหน อยู่แล้วแต่เลย และ
แต่อย่าลืมลองหยิบ Documentation ที่ตัวเองใช้บ่อยๆ มาทำ Skill เล่นกันดูครับ

บางที Skill ตัวแรกที่มีประโยชน์ที่สุด…

อาจไม่ใช่ Skill ที่ซับซ้อนที่สุด

แต่เป็น Skill ที่ช่วยลดสิ่งที่เราต้องอธิบายซ้ำๆ ทุกวันนี่แหละครับ 😆

แล้วเจอกันบทความหน้าครับ 👋

LINE Developers Docs อยู่บน GitHub แล้วลองเอามาทำ Skill ให้ Codex กัน! 💚 was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีค้าบทุกคน ชาว LINE Developers 👋 ช่วงนี้เป็นยังไงกันบ้างครับ

เชื่อว่าช่วงนี้หลายคนน่าจะได้จับ ได้ลอง ได้เล่น AI กันแทบทุกวันแล้ว ไม่ว่าจะเป็น ChatGPT, Gemini หรือ AI Tools อีกสารพัดเต็มไปหมด

แล้วอยู่ ๆ ผมก็มีคำถามหนึ่งขึ้นมาครับ…

ถ้าเราอยากจับ AI มาใส่ไว้ใน LINE แล้วให้มันคุยกับลูกค้าของเราได้จริง ๆ เราจะทำให้ง่ายได้แค่ไหนนะ?

เพราะปกติถ้าเราพูดถึงการทำ LINE Chatbot ที่ต่อกับ AI ภาพในหัวของ Developer น่าจะประมาณนี้

LINE Messaging API
        ↓
Webhook
        ↓
My Server
        ↓
Gemini / AI API
        ↓
Reply Message

ซึ่งแน่นอนว่าทำได้ง่ายเลยครับ

และถ้าจะทำ Production จริง ๆ การมี Backend ของตัวเองก็ยังเป็นแนวทางที่เหมาะกับหลาย Use Case อยู่เหมือนเดิม

แต่ทีนี้…

ถ้าโจทย์ของเรายังเป็นแค่

• อยากลองของ
• อยากทำ Prototype
• อยาก Demo ให้ลูกค้าดู
• หรือเป็นร้านเล็ก ๆ ที่อยากมี AI Chatbot สักตัว

เราจำเป็นต้องเริ่มจากการเปิด Project, ทำ Backend, ตั้ง Webhook, จัดการ Token และต่อ AI API เองทั้งหมดตั้งแต่วันแรกเลยไหม?

อืมมม…อาจจะยังไม่ต้องก็ได้ 😆

บทความนี้เลยเป็นอีกหนึ่งบทความ “หาทำ” ของผมครับ

LINE AI Chatbot ด้วย Developer Tools Builder + Gemini

ตั้งแต่เอา LINE Messaging API มาเชื่อม จับ Gemini มาเป็นสมองให้ Bot ตั้ง Character ให้ AI ไปจนถึงพิมพ์คำว่า “สวัสดี”

แล้วมี AI ตอบเรากลับมาบน LINE จริง ๆ ที่สำคัญคือ สำหรับการทดลอง เรายังสามารถเริ่มใช้งาน Free ได้เลย เหมาะมากสำหรับคนที่อยากรู้ว่า

“AI Chatbot บน LINE มันเวิร์กกับ Use Case ของเราจริงไหม?”

ก่อนจะลงทุนทำระบบใหญ่ขึ้นมา บทความนี้ผมจะพาทำแบบ Step by Step ครับ

• Step 0 เตรียของให้พร้อมก่อนเริ่ม
• Step 1 เข้า Developer Tools Builder
• Step 2 Connect LINE Messaging API Channel
• Step 3 Create Gemini API Key
• Step 4 Connect Gemini เข้ากับ Developer Tools Builder
• Step 5 Select Gemini 3.5 Flash-Lite
• Step 6 Role / Prompt
• Step 7 Enable AI Auto Reply
• Step 8 Setup Webhook Proxy
• Step 9 ทดลองคุยกับ AI ผ่าน LINE 🎉

จบบทความนี้ เราจะมี LINE Official Account ที่สามารถคุยและตอบกลับด้วย AI ได้จริงโอเค ถ้าพร้อมแล้ว มาเริ่มกันครับ 🚀

Step 0 เตรียมของให้พร้อมก่อนเริ่ม

ก่อนที่เราจะเริ่ม Connect ทุกอย่างเข้าด้วยกัน เราต้องเตรียมของหลัก ๆ ก่อนครับ

สิ่งที่ต้องมีคือ

• LINE Official Account
• LINE Messaging API Channel
• Google Account
• Account ของ Developer Tools Builder

ถ้าใครมี LINE Official Account และเปิด Messaging API อยู่แล้ว สามารถข้ามส่วนการเตรียม LINE ไปได้เลยครับ

สิ่งสำคัญที่เราจะต้องใช้จาก LINE Messaging API คือ

Channel ID
Channel Secret

สองตัวนี้จะถูกนำไปใช้สำหรับเชื่อม LINE Messaging API Channel ของเราเข้ากับ Developer Tools Builder ใน Step ถัดไป

Step 1 เข้า Developer Tools Builder

ต่อไปเข้า Developer Tools Builder

จากนั้น Login เข้าสู่ระบบ ถ้าเรายังไม่ได้เชื่อม LINE Messaging API Channel ระบบจะมีข้อความแจ้งประมาณว่า

You haven’t connected a LINE Messaging API Channel

ตรงนี้ไม่ต้องตกใจครับ เพราะนี่คือสิ่งที่เรากำลังจะทำต่อใน Step หน้า

หลังจาก Login แล้ว เราจะเห็น Workspace ที่รวมเครื่องมือสำหรับ LINE Platform เอาไว้หลายอย่าง เช่น

• Send Message
• Scheduled Messages
• Message History
• Rich Menu Builder
• Flex Message
• Bot Simulator
• Auto-Reply Flows
• Webhook Proxy
• Audience
• Members

แต่รอบนี้เราจะโฟกัสเฉพาะ Feature ที่เกี่ยวกับ AI Chatbot ก่อน

Step 2 Connect LINE Messaging API Channel

ได้เวลาเชื่อม LINE ของเราเข้ากับ Developer Tools Builder แล้วครับ

ไปที่ Channel Settings → Add Channel ระบบจะให้กรอกข้อมูล Channel ID
Channel Secret

ให้นำข้อมูลจาก LINE Messaging API Channel ของเรามาใส่ตรงนี้

จากนั้นอ่านและยอมรับ Data Retention Policy แล้วกด

Add Channel

เท่านี้ Developer Tools Builder ก็จะรู้แล้วว่า

LINE Official Account ตัวไหนคือ Channel ที่เราต้องการนำมาสร้าง LINE Chatbot

Flow ตอนนี้จะเริ่มเป็น

LINE Official Account
        ↓
LINE Messaging API
        ↓
Developer Tools Builder

Step 3 Create Gemini API Key

ตอนนี้ฝั่ง LINE พร้อมแล้วครับ ต่อไปเราจะเพิ่ม AI Brain ให้ LINE Chatbot ของเรา รอบนี้ผมเลือกใช้ Google Gemini

เข้าไปที่ Google AI Studio

• จากนั้นเลือกเมนู API Keys

หากมี Project ที่ต้องการใช้อยู่แล้ว สามารถเลือก Project นั้นได้เลย แต่ถ้ายังไม่เห็น Project สามารถเลือก “Import projects” แล้วเลือก Google Cloud Project ที่ต้องการนำมาใช้งาน

• จากนั้นเลือก Create API key

เมื่อสร้างสำเร็จ เราจะได้ API Key สำหรับใช้เรียก Gemini

ให้ Copy เก็บไว้ก่อน เพราะเราจะเอา Key นี้ไปใส่ใน Developer Tools Builder ใน Step ถัดไป สำหรับใครที่อยากทดลองเล่นก่อน สามารถเริ่มจาก Gemini Free Tier ได้ตาม Model และ Quota ที่รองรับ แต่ต้องเน้นนิดหนึ่งว่า

Free Tier ≠ Unlimited

ถ้านำไปใช้กับ Production หรือมี User จำนวนมาก ก็ควรกลับมาตรวจสอบ Rate Limit และค่าใช้จ่ายอีกครั้งครับ

Step 4 Connect Gemini เข้ากับ Developer Tools Builder

ตอนนี้เรามี

LINE Messaging API Channel ✅ 
Gemini API Key ✅

ต่อไปก็ถึงเวลาจับสองอย่างนี้มาเจอกันครับ กลับมาที่ Developer Tools Builder

เลือก Channel ที่เราต้องการ จากนั้นเข้า

Channel Settings → AI

ภายใน AI Settings จะมีเมนูสำหรับตั้งค่าต่าง ๆ เช่น

Connection
Model
Auto Reply
Role / Prompt

เริ่มจากส่วน Connection

นำ Gemini API Key ที่สร้างไว้มาใส่ แล้วทำการ Connect

ถ้าทุกอย่างเรียบร้อย ระบบจะแจ้งว่า API Key สามารถใช้งานได้

Architecture ของเราตอนนี้จะเริ่มเป็น

1. LINE
2. Developer Tools Builder
3. Gemini

นี่คือจุดที่ LINE Chatbot ของเราเริ่มมี AI เข้ามาอยู่ใน Flow แล้วครับ

Step 5 Select Gemini 3.5 Flash-Lite

หลังจาก Connect Gemini API Key สำเร็จแล้ว เราจะเห็นข้อความยืนยันว่า API Key สามารถใช้งานได้ จากนั้นลงมาที่ส่วน Select Model สำหรับบทความนี้ผมเลือก

Gemini 3.5 Flash-Lite

เพราะเรากำลังทำ LINE Chatbot ซึ่งสิ่งที่ต้องการคือความสมดุลระหว่าง

เร็ว • ตอบดี • ประหยัด

โดยเฉพาะเวลา User คุยผ่าน LINE เราไม่อยากให้เขาพิมพ์ “สวัสดี”

แล้วต้องรอคำตอบนานเกินไป สำหรับ Tutorial นี้เลือกตัวนี้ตามกันมาได้เลยครับ ส่วนถ้าในอนาคต Use Case ซับซ้อนขึ้น เราค่อยกลับมาเลือก Model ที่เหมาะกับงานอีกครั้ง เมื่อเลือกเรียบร้อยแล้ว ตอนนี้เรามี

LINE Messaging API Channel ✅
Gemini API Key ✅
Gemini 3.5 Flash-Lite ✅

ต่อไปเราจะเริ่มทำส่วนที่ทำให้ Bot แต่ละตัว แตกต่างกันจริง ๆ

นั่นคือการกำหนดว่า AI ของเราเป็นใคร ต้องพูดยังไง และอะไรที่มันห้ามทำ

ไปต่อที่ Role / Prompt กันครับ 🚀

Step 6 Role / Prompt

ต่อมาเป็นส่วนที่ผมชอบที่สุด และเป็นส่วนที่มีผลต่อ Character ของ LINE Chatbot มากที่สุดด้วยครับไปที่

AI Role / Prompt

ตรงนี้เราจะกำหนดว่า

AI ตัวนี้เป็นใคร และต้องทำตัวอย่างไร

ใน Developer Tools Builder ผมเตรียม Template เริ่มต้นไว้หลายแบบ เช่น Customer Service

• Sales Assistant
• FAQ Bot
• Restaurant
• Booking Assistant
• Custom

สมมติรอบนี้เราจะสร้าง Customer Service AI

เราอาจกำหนด System Instruction แบบนี้

# Role
คุณคือผู้ช่วยฝ่ายบริการลูกค้า
พูดคุยกับลูกค้าอย่างสุภาพและเป็นมิตร

# Responsibilities
1. ตอบคำถามเกี่ยวกับสินค้าและบริการ
2. ให้ข้อมูลที่ถูกต้องและเป็นประโยชน์
3. หากไม่ทราบข้อมูล ห้ามสร้างคำตอบขึ้นมาเอง
4. หากข้อมูลจากลูกค้าไม่ครบ ให้ถามเพิ่มเติมอย่างสุภาพ

# Response Format
1. ใช้ภาษาไทยเป็นหลัก
2. ตอบสั้น กระชับ
3. ไม่เกิน 3–4 ประโยค
4. สามารถใช้ Emoji ได้เล็กน้อย

# Constraints
1. ห้ามสร้างข้อมูลที่ไม่มีอยู่จริง
2. ห้ามเดาราคา
3. ห้ามเดาโปรโมชั่น
4. หากไม่มั่นใจ ให้แจ้งว่าต้องตรวจสอบข้อมูลเพิ่มเติม

ผมชอบคิดเรื่อง Prompt ง่าย ๆ ด้วยคำถาม 4 ข้อครับ

AI เป็นใคร?
    ↓
ต้องทำอะไร?
    ↓
ควรตอบอย่างไร?
    ↓
อะไรที่ห้ามทำ?

ถ้าเราตอบคำถามเหล่านี้ได้ Character ของ LINE Chatbot ก็จะเริ่มชัดขึ้นมากครับ

Step 7 Enable AI Auto Reply

ตอนนี้เรามีของสำคัญเกือบครบแล้วครับ

LINE Messaging API Channel ✅
Gemini API Key ✅
Gemini 3.5 Flash-Lite ✅
Role / Prompt ✅

ต่อไปคือการเปิดให้ AI สามารถทำงานแบบ Auto Reply

เข้าไปที่

AI → Auto Reply

จากนั้นเปิด Toggle Auto Reply

ตรงนี้คือการบอก Developer Tools Builder ว่า

เมื่อมีข้อความจาก User เข้ามา ให้นำข้อความไปประมวลผลด้วย Gemini ตาม Role / Prompt ที่เราตั้งไว้ และเตรียมคำตอบกลับไปยัง User

ในฝั่ง AI Flow จะประมาณนี้ครับ

User Message
     ↓
Developer Tools Builder
     ↓
Role / Prompt
     ↓
Gemini 3.5 Flash-Lite
     ↓
Generate Response

ตอนนี้ฝั่ง AI ของเราพร้อมตอบแล้วครับ แต่ยังเหลืออีกหนึ่งเรื่องสำคัญ

เราต้องทำให้ LINE ส่ง Message Event เข้ามาที่ Developer Tools Builder ให้ได้ก่อน

ซึ่งตรงนี้เราจะใช้ Webhook Proxy ไปต่อกันที่ Step 8 ครับ 🚀

Step 8 Setup Webhook Proxy

ตอนนี้ AI ของเราพร้อมตอบแล้วครับ แต่ LINE ยังไม่รู้ว่า

เวลามี User ส่งข้อความเข้ามา จะต้องส่ง Event ไปที่ไหน?

ตรงนี้เราจะใช้ Webhook Proxy ของ Developer Tools Builder เข้าเมนู

Automation → Webhook Proxy

เราจะเจอส่วนที่ชื่อว่า Your Webhook URL

Developer Tools Builder จะสร้าง Webhook URL สำหรับ Channel ของเราเอาไว้ให้แล้ว หน้าตาประมาณนี้

https://...cloudfunctions.net/webhookProxy/xxxxxxxx

Concept ของ Webhook Proxy คือ

User
 ↓
LINE Official Account
 ↓
LINE Webhook Event
 ↓
Webhook Proxy
 ↓
Developer Tools Builder

Webhook Proxy จึงเปรียบเหมือน ประตูที่รับ Event จาก LINE เข้ามาใน Developer Tools Builder

ตั้ง Webhook URL ให้ LINE Messaging API Channel

ในหน้า Webhook Proxy เราจะเห็นสถานะประมาณว่า

LINE Status: Not Set

หมายความว่า LINE Messaging API Channel ของเรายังไม่ได้ตั้งให้ส่ง Webhook มาที่ URL นี้

1. Copy : Your Webhook URL

2. เข้า LINE Developers Console เลือก Messaging API Channel ของเรา

แล้วไปที่ Messaging API → Webhook settings

นำ URL ไปใส่ใน

Webhook URL

จากนั้นตรวจสอบ Verify และเปิด Use webhook

เมื่อ Webhook พร้อมแล้ว Flow ทั้งหมดของเราจะกลายเป็น

User
 ↓
LINE Official Account
 ↓
LINE Messaging API
 ↓
Webhook Proxy
 ↓
Developer Tools Builder
 ↓
Role / Prompt
 ↓
Gemini 3.5 Flash-Lite
 ↓
Generate Response
 ↓
LINE Reply
 ↓
User

ตอนนี้ทุกอย่างพร้อมแล้วครับ 🎉

LINE Messaging API Channel ✅
Gemini API Key ✅
Gemini 3.5 Flash-Lite ✅
Role / Prompt ✅
Auto Reply ✅
Webhook Proxy ✅

เหลือคำถามเดียว…มันตอบจริงไหม? 😆 ไปลองกันครับ

Step 9 ทดลองคุยกับ AI ผ่าน LINE 🎉

มาถึง Step สุดท้ายแล้วครับ

อันนี้คือ Step ที่สนุกที่สุด 😆

เปิด LINE แล้วเข้า Official Account ที่เราเพิ่งตั้งค่าไว้

เริ่มง่าย ๆ ด้วยคำว่า

สวัสดี

จากที่ผมลอง LINE Chatbot ตอบกลับมาว่า

สวัสดีค่ะ ยินดีให้บริการค่ะ 😊
ไม่ทราบว่ามีเรื่องอะไรให้ช่วยดูแลในวันนี้คะ?

จากนั้นลองถามต่อว่า

คุณทำอะไรได้บ้าง

AI ก็จะตอบกลับตาม Character และ Role / Prompt ที่เรากำหนดเอาไว้

Flow ที่เกิดขึ้นเบื้องหลังจริง ๆ คือ

"สวัสดี"
    ↓
LINE
    ↓
Webhook Proxy
    ↓
Developer Tools Builder
    ↓
Gemini 3.5 Flash-Lite
    ↓
AI Response
    ↓
LINE

🎉 เรียบร้อยครับ! เรามี LINE AI Chatbot ที่สามารถตอบ User ได้จริงแล้ว

สรุปทั้งหมดที่เราทำ

ย้อนกลับไปตั้งแต่ต้น เราทำทั้งหมดนี้ครับ

Step 0 เตรียของให้พร้อมก่อนเริ่ม
Step 1 เข้า Developer Tools Builder
Step 2 Connect LINE Messaging API Channel
Step 3 Create Gemini API Key
Step 4 Connect Gemini เข้ากับ Developer Tools Builder
Step 5 Select Gemini 3.5 Flash-Lite
Step 6 Role / Prompt
Step 7 Enable AI Auto Reply
Step 8 Setup Webhook Proxy
Step 9 ทดลองคุยกับ AI ผ่าน LINE 🎉

จาก LINE Official Account ธรรมดา เราเพิ่ม

Developer Tools Builder
        +
Gemini 3.5 Flash-Lite
        +
Role / Prompt
        +
Webhook Proxy

จนสุดท้ายกลายเป็น

LINE AI Chatbot ที่สามารถรับข้อความและตอบกลับ User ได้จริง

และสำหรับการทดลองหรือทำ Prototype เรายังสามารถเริ่มต้นจาก Free Tier / Free Quota ของบริการที่เกี่ยวข้องก่อนได้ครับ

แน่นอนว่า

Free Tier ไม่ได้หมายถึง Unlimited

ถ้า LINE Chatbot เริ่มมี User จริงจำนวนมาก หรือมี AI Request เพิ่มขึ้น ก็ควรกลับมาตรวจสอบ Quota, Rate Limit และ Cost ของแต่ละ Service อีกครั้ง

ขอบคุณทุกคนที่อ่านมาจนถึงตรงนี้นะครับ 🙏

หวังว่าบทความนี้จะช่วยให้เห็นว่า การเริ่มต้นทำ LINE AI Chatbot ไม่จำเป็นต้องเริ่มจากระบบที่ซับซ้อนเสมอไป เราก็สามารถเปลี่ยน LINE Official Account ธรรมดา ให้กลายเป็น AI Chatbot ที่ตอบ User ได้จริงแล้วครับ

ถ้าใครลองทำตามแล้วติดตรงไหน หรือมี Use Case สนุก ๆ ที่อยากเอา AI ไปต่อกับ LINE ลองเอาไปทดลองกันดูนะครับ 😆

สร้าง LINE AI Chatbot ฟรีด้วย Developer Tools Builder + Gemini แบบ Step by Step was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

การพัฒนา Software ในยุค 2026 เราก้าวข้ามจุดที่ AI เป็นเพียงผู้ช่วยเขียนฟังก์ชันสั้นๆ ไปสู่ยุค AI Coding Agents ที่ AI กลายเป็น ‘หนึ่งในทีมพัฒนา’ สิ่งที่ตามมาก็คือเมื่อความเร็วในการเขียนโค้ดไม่ใช่ข้อจำกัดอีกต่อไป แล้วเราจะออกแบบ Architecture, ตรวจสอบโค้ด, ควบคุมความปลอดภัย และผสาน AI บน Production อย่างไรให้มัน Seamless และทำงานด้วยกันอย่างราบรื่นที่สุด

งาน LINE THAILAND DEVELOPER CONFERENCE 2026 กลับมาพร้อมธีม Build the Next Frontier เพื่อพานักพัฒนาไปหาคำตอบเหล่านี้ผ่าน 2 Track หลัก Deep Tech และ Real World Usecase

Deep Tech Stage

• สถาปัตยกรรม AI และ Cloud Infrastructure สู่ 10x Engineering: ครอบคลุมตั้งแต่ Harness & Loop Engineering, การคุมฝูง AI ด้วย Work Graph, การใช้ MCP และ Sandboxing ไปจนถึง Flex-Security Network บน AWS ที่รองรับสเกลระดับหมื่น RPS อย่างมั่นคง โดยไม่ทิ้ง Human Clarity
• เจาะลึกวิธี “สอนงาน” AI Agent ให้เข้าใจการทำงานของทีม ผ่านการออกแบบ Feedback Loop, Hook และการแยก Subagent เพื่อให้ได้ผลลัพธ์ที่ใช้งานได้จริง โดยคุณไมค์ Tanitphon Paniwan Mikelopster
• เปิดเฟรมเวิร์กการออกแบบสถาปัตยกรรมสำหรับทีมขนาดเล็ก เมื่อความท้าทายไม่ใช่การเขียนโค้ด แต่คือวิธีวาง Guardrails เพื่อรับมือและตรวจสอบโค้ดมหาศาลที่ AI สร้างขึ้นอย่างปลอดภัย โดยแอดเปรม Kittikorn Prasertsak Born to Dev
• ทบทวนจุดยืนของนักพัฒนาในวันที่อัลกอริทึมฉลาดขึ้นทุกวัน พร้อมแนวคิดการสร้างโปรดักต์และธุรกิจที่ยั่งยืนโดยมี “Humanity” เป็นศูนย์กลาง โดยพี่ทอย Kasidis Satangmongkol DataRockie

Real World Use Case Stage

• โชว์เคสจริงที่เทคโนโลยีพลิกโฉมประสบการณ์ผู้ใช้: ตั้งแต่เปลี่ยนบทสนทนา Group Chat เป็น Automation Workflow, ผสาน Multimodal LLM (Vision + Text) ออกใบเสนอราคาประกันใน 10 วินาที, และเบื้องหลังโซลูชัน O2O อย่าง MINI Eats ที่จับมือกับ LINE MAN Wongnai
• ก้าวข้ามขีดจำกัดการพิมพ์ ด้วยการสร้าง AI ที่ให้ลูกค้าย้ายจากการแชทมาเป็นเสียงพูด (Voice) ได้แบบลื่นไหล โดยที่ระบบยังจดจำบริบทเดิมได้ทั้งหมด โดยพี่วิน Dr. Winn Voravuthikunchai Botnoi
  ◾ ถอดบทเรียนการทรานส์ฟอร์มองค์กรเทค LMWN สู่ยุค AI-Native และการปรับโครงสร้างการทำงานเมื่อโค้ดกว่า 80% ถูกสร้างด้วย AI โดยพี่ต้า Ta Virot Chiraphadhanakul

🔥 ห้ามพลาด Panel Discussion พิเศษ: “NEXT-GEN Survival Guides from Tech Leaders in the AI Era” เหมาะกับน้องๆ เด็กจบใหม่สาย Dev/Tech และคนทำงานทุกคนที่แอบกังวลว่าจะโดน AI แย่งงาน หรือยังหาทางปรับตัวไม่เจอในวันที่เทคโนโลยีวิ่งเร็วกว่าที่เคย

Event Activities

นอกจากนี้ยังจัดเต็มกิจกรรมตลอดวัน ทั้ง Hands-on Workshop, Student Consultation ให้น้องๆ นักศึกษาและสาย Junior ได้พูดคุยใกล้ชิดกับพี่ๆ LINE Engineer, Hackathon กิจกรรมประลองฝีมือ, พร้อม Lunch Buffet และ Coffee Break ให้ได้ Network และเติมพลังกันแบบจุใจตลอดงาน!

👕 แน่นอนว่าในงานสามารถร่วมกิจกรรมแลกเสื้อ LINE DEV T-shirt สุด Limited กลับบ้านไปเป็นที่ระลึก
ยังไม่พอ! กิจกรรมพิเศษปีนี้ LINE DEV Escape Room ห้องปริศนาสุดท้าทายที่จะทดสอบทั้งไหวพริบและการแก้โจทย์แบบทีมเวิร์ก ใครชอบชาเลนจ์ห้ามพลาด!

FREE Register: https://www.line-website.com/linedevconf2026

Agenda: https://www.line-website.com/linedevconf2026-agenda

📅 เสาร์ที่ 17 ต.ค 10:00–17:00 น.

📍BITEC (BTS บางนา ออกประตู 1)

🇹🇭 บรรยายไทย

LINE DEV CONF 2026: Registration is now open — นักพัฒนายุค Agentic AI ห้ามพลาด! was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

เคยไหมครับ? อยากส่งข้อความ Broadcast หรือส่งรูปใน LINE Official Account (LINE OA) ให้ดูว้าว ดูพรีเมียมกว่าการส่งรูปสี่เหลี่ยมธรรมดา วันนี้ผมมีเทคนิคการส่งข้อความรูปภาพ แบบไม่มีพื้นหลัง (Transparent) มาฝากครับ ซึ่งจะทำให้ตัวการ์ตูนหรือสินค้าของเราดูเหมือนลอยออกมาอยู่บนหน้าแชทเลย!

โดยเราจะใช้เครื่องมือฟรี 2 ตัวหลักๆ คือ Remove.bg สำหรับลบพื้นหลัง และ Dev Tools Builder สำหรับสร้างและส่งข้อความครับ มาดูขั้นตอนกันเลย!

สิ่งที่ต้องเตรียม

1. รูปภาพที่ต้องการส่ง (เช่น รูปสินค้า, รูป Mascot)
2. เครื่องมือลบพื้นหลัง: https://www.remove.bg/th
3. เครื่องมือสร้างและส่งข้อความ: https://devtoolsbuilder.cloudea.tech

Dev Tools Builder เป็นบริการให้ใช้ฟรีโดยยังไม่ต้อง ผูกกับ Channel ของคุณก็สามารถใช้งานได้ แต่หากต้องการฝากรูป และใช้บริการเต็มรูปแบบแนะนำให้ทำทุกขั้นตอน

Step 1: เตรียมภาพให้พื้นหลังโปร่งใส

อันดับแรก เราต้องทำให้ภาพของเราไม่มีพื้นหลังก่อนครับ

1. เข้าไปที่เว็บไซต์ https://www.remove.bg/th
2. อัปโหลดรูปภาพของคุณลงไป ระบบจะตัดพื้นหลังออกให้อัตโนมัติอย่างรวดเร็ว
3. กดดาวน์โหลดภาพที่เป็น .png (พื้นหลังโปร่งใส) เก็บไว้

Step 2: ลงทะเบียนและตั้งค่าเชื่อมต่อ Developer Tools Builder

ก่อนจะเริ่มสร้าง Imagemap เราต้องเข้ามาตั้งค่าเครื่องมือให้รู้จักกับ LINE OA ของเราก่อนครับ

1. เข้าไปที่ https://devtoolsbuilder.cloudea.tech
2. กดปุ่ม Login with LINE เพื่อเข้าสู่ระบบ
3. ไปที่เมนู Setting ด้านบน
4. คุณจะเจอช่องให้กรอก Channel ID และ Channel Secret ซึ่งเราต้องไปเอาข้อมูลนี้มาจาก LINE Developers console ครับ

วิธีหา Channel ID และ Channel Secret: (ใครที่รู้อยู่แล้วไปข้อถัดไปได้เลย)

• ให้ทำตาม Codelab ขั้นตอน ที่ 1–3 https://codelab.line.me/codelabs/chatbot

Step 2: สร้าง Imagemap URL

เมื่อได้ภาพไฟล์ PNG ที่ไม่มีพื้นหลังแล้ว เราต้องนำภาพนี้ไปสร้าง Imagemap ครับ

1. เข้าไปที่เมนู Imagemap Builder หรือ ผ่านลิงก์นี้: LINK
2. ทำการ Upload รูป PNG ที่เราเตรียมไว้จาก Step 1 ลงไปในช่องที่กำหนด
3. ตั้งค่า Action Area (จุดที่คลิกได้) ตามต้องการ หากต้องการให้คลิกแล้วลิงก์ไปที่ไหน
4. เมื่อตั้งค่าเสร็จแล้ว ให้กดปุ่ม “สร้าง Imagemap ” ข้อมูลจะถูกบันทึกเรียบร้อย
5. จะได้ JSON ที่ให้นำไปใช้ต่อได้แล้วครับ 🎉
6. สามารถดูประวัติที่เคยได้ด้วยที่เมนู existing-imagemaps

Step 3: ส่งข้อความเข้า LINE (Optional)

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

1. ไปที่เมนู Send Message ผ่านลิงก์นี้: LINK
2. เลือกประเภทข้อความเป็น Imagemap
3. เลือก Imagemap ที่สร้างไว้ หรือ JSON ที่ได้จาก Step 2 มาใส่ในช่องข้อมูล
4. ตรวจสอบความถูกต้อง แล้วกด Send ได้เลย!

ผลลัพธ์ที่ได้

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

ลองเอาไปปรับใช้กันดูนะครับ วิธีนี้ช่วยเพิ่มลูกเล่นให้ LINE OA ของเราดูไม่น่าเบื่อและมีความเป็นมืออาชีพขึ้นเยอะเลยครับ!

🎉 ส่งข้อความรูปภาพ แบบไม่มีพื้นหลัง ง่ายๆ ด้วย Dev Tools Builder was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

สวัสดีครับเพื่อนๆ ชาว LINE Developers วันนี้ผมมีคำถามชวนคิดมาฝากครับ…

“ลูกค้าที่กด Add LINE OA ของเรา มาจากช่องทางไหนกันแน่?”

มาจากโฆษณา Facebook? Instagram Story? QR code หน้าร้านสาขา A หรือสาขา B? Influencer คนไหน? Email Broadcast? หรือเพื่อนแชร์ต่อ?

ถ้าเพื่อนๆ ตอบไม่ได้ก็ไม่ต้องตกใจครับ เพราะส่วนใหญ่ก็ตอบไม่ได้เหมือนกัน 555+ (ผมเองก็เคยตอบไม่ได้นะครับ)

แต่ปัญหาคือ.. ถ้าเราไม่รู้ว่า traffic มาจากไหน เราก็ไม่รู้ว่าจะทุ่มงบโฆษณาไปทางไหนถึงจะคุ้ม ใช่มั๊ยล่ะครับ?

บริษัทใหญ่ๆ เค้าใช้ Google Analytics + Bitly แบบจ่ายรายเดือน เพื่อแก้ปัญหานี้ครับ

แต่.. ถ้าผมบอกว่า “มีเครื่องมือเริ่มต้นใช้งานฟรี ที่ทำได้ครบในตัวเดียว แถมยังบอกได้ด้วยว่า User คนนี้ใน LINE คือใคร” เพื่อนๆ จะลองมั๊ยครับ?

แท่น แท๊นนน 🎉

วันนี้ผมอยากแนะนำฟีเจอร์ Short Links บน Dev Tools Builder ครับ

🎯 Short Links คืออะไร? ทำอะไรได้บ้าง?

หลายคนคงคุ้นกับ Bitly, TinyURL ใช่มั๊ยครับ? ที่เอา URL ยาวๆ มาย่อให้สั้น

Short Links บน Dev Tools Builder ทำได้แบบนั้นแหละครับ.. แต่ทำได้มากกว่า

มาดูกันเลยว่ามีอะไรบ้าง:

✅ ย่อ URL ยาว ให้สั้นและจำง่าย (custom code ได้)

✅ สามารถกำหนด UTM Parameters ได้เลย

✅ Track click แบบ real-time กี่คลิก, มาจาก OS อะไร, browser อะไร

✅ เชื่อมกับ LIFF เพื่อจับ LINE User ID รู้เลยว่า user คนไหนใน LINE เป็นคนคลิก

✅ Export CSV ทั้ง link list และ click logs ไปวิเคราะห์ต่อใน Excel ได้

✅ ปิด/เปิด link ได้ตลอด ไม่ต้องลบทิ้ง

✅ ตั้งวันหมดอายุได้

✅ Generate QR Code ในตัว ไม่ต้องไปหาเว็บอื่น

เป็นไงครับเพื่อนๆ ดูครบเครื่องดีมั๊ยล่ะ 😎

💡 ตัวอย่างเคส ก่อนลงมือทำ

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

เคสที่ 1: รู้ว่าโฆษณาตัวไหน convert ดีสุด

ยิงแอด Facebook กับ Instagram พร้อมกัน 2 ตัว แต่ขี้เกียจดู Ads Manager?

เราสามารถสร้าง short link 2 อันแยก utm_source ทันที จบ

เคสที่ 2: QR Code หน้าร้านแต่ละสาขา

เปิดร้าน 5 สาขา อยากรู้ว่า QR Code Add LINE สาขาไหนคนสแกนเยอะสุด แปะ short link คนละตัวกับ utm_campaign คนละชื่อ ดูจบในหน้าเดียว

เคสที่ 3: เช็คประสิทธิภาพ Rich Menu vs Broadcast

ปล่อยลิงก์โปรโมชั่นเดียวกัน ทั้งใน Rich Menu และ Broadcast + utm_medium ต่างกัน รู้เลยว่าช่องทางไหนคนกดเยอะกว่า

เคสที่ 4: ตามรอย KOL/Influencer

แจก short link คนละตัวให้ Influencer 10 คน เห็นชัดว่าคนไหนเอาเงินไปแล้วเงียบ คนไหนทำงานคุ้มค่า 🔥 (เคสนี้แอบโหดนะครับ 555+)

เคสที่ 5 (เคสเด็ดของวันนี้): รู้ว่า Add LINE มาจากไหน

นี่คือเคสที่ทำให้ผมรักฟีเจอร์นี้ครับ — เดี๋ยวเราจะลงรายละเอียดในส่วนถัดไป

🚀 เริ่มใช้งาน มาดูทีละขั้นกันครับ

Step 1: เพิ่ม Channel เข้าระบบก่อน

ก่อนจะใช้ Short Links ได้ เราต้อง Connect LINE OA ของเราเข้ามาที่ Dev Tools Builder ก่อนครับ

1. เข้าไปที่หน้า “Channels” หรือเมนูซ้ายมือ

2. กดปุ่ม “+ Add Channel”

3. กรอก Channel ID, Channel Secret Token จาก LINE Developers Console

4. ระบบจะ verify credential ให้อัตโนมัติ ถ้าผ่าน ขึ้นไฟเขียวเลยครับ ✅

(ถ้าใครยังไม่มี LINE OA หรือไม่รู้จะหา credential จากไหนให้เริ่มต้นได้จาก LINE Codelab หัวข้อที่ 3 Step ที่ 7 นี้)

Step 2: เปิดหน้า Short Links

เมื่อมี Channel แล้ว ไปที่เมนูซ้ายมือ คลิก “Short Links”

จะเห็นหน้าจอว่างๆ ใส่ตัวอย่าง Use Case ให้ดู กดปุ่ม “+ Create Short Link” ที่มุมขวาบนได้เลยครับ

Step 3: สร้าง Short Link แรก

Dialog เปิดมา จะมีฟิลด์ให้กรอกประมาณนี้:

🔹 Destination URL (จำเป็น) URL ปลายทางที่จะให้ redirect ไป เช่น

https://lin.ee/XGcZYNU (Add Friend URL ของ LINE OA)

🔹 Short Code (ไม่จำเป็น) ถ้าไม่กรอก ระบบ random ให้ 6 ตัว อยากให้สื่อความ ก็กรอกเองได้ เช่น `fb-jan2026`, `ig-promo`, `qr-siamparagon`

🔹 Title / Description ใส่ไว้กันลืม ไม่งั้นเปิดมา 50 ลิงก์ จำไม่ได้ครับ 555+

🔹 UTM Parameters section (อันนี้แหละครับ พระเอก)

• Source มาจากไหน เช่น facebook, instagram, line, email
• Medium มาแบบไหน เช่น chat, broadcast, rich_menu, social
• Campaign แคมเปญอะไร เช่น “add_friend_jan2026”
• Term / Content ใส่เพิ่มได้ถ้าทำ A/B Test

🔹 Settings

• LIFF ID ถ้าใส่ จะจับ LINE User ID ของคนคลิกได้ด้วย (สำคัญมาก!)
• Open External บังคับเปิดใน browser นอก LINE app
• Expiry Date วันหมดอายุ (optional)

Step 4: คัดลอกไปใช้งาน

พอกด Save จะได้ URL หน้าตาประมาณนี้ครับ:

https://ldt-short.web.app/line-may-2026

สั้น สวย น่ากด 😎

กดปุ่ม QR Code จะ generate รูปออกมาให้ ใช้พิมพ์ใบปลิวต่อได้เลย

🔥 เคสเด็ด: รู้ว่า Add LINE มาจากช่องทางไหน

เอาล่ะ มาที่เคสที่ผมรอจะเล่าให้ฟัง

สมมติว่าเดือนนี้ผมเปิดแคมเปญ Add LINE OA ของร้าน ปล่อยพร้อมกัน 4 ช่องทาง:

1. โฆษณา Facebook

2. Instagram Story

3. QR Code ในไลฟ์ Tiktok

4. Email Broadcast ส่งหาลูกค้าเก่า

ปกติเราจะไม่รู้เลยว่าคนที่ Add มาวันนี้ 100 คน มาจากช่องไหนกันแน่

วิธีที่ผมทำ:

สร้าง Short Link 4 อัน ทุกอันชี้ไปที่ LIFF Add Friend URL เดียวกัน แต่ใส่ UTM ต่างกัน

| Short Code   | Destination    | utm_source | utm_medium | utm_campaign |
| `addline-fb` | Add Friend URL | facebook   | paid_ads   | jan_2026     |
| `addline-ig` | Add Friend URL | instagram  | story      | jan_2026     |
| `addline-tt` | Add Friend URL | tiktok     | live       | jan_2026     |

เสร็จแล้วก็เอาแต่ละ short link ไปวางในช่องทางของตัวเอง ผ่านไป 1 อาทิตย์ เข้ามาดูได้เลย ผ่าน Dashboard

แถมเพราะใส่ LIFF ID ไว้ ระบบจับ LINE User ID ของคนที่คลิกได้ด้วย

ที่เด็ดกว่านั้น — เพื่อนๆ ส่ง broadcast เฉพาะคนที่มาจาก IG ก็ทำได้ครับ ถ้าจับคู่กับฟีเจอร์ Audience ของ Dev Tools Builder (อันนี้ผมจะเขียนแยกอีกบทความนึง 😉)

แน่นอนว่ามันคือข้อมูลล้วนๆ ที่ใช้ตัดสินใจ ว่าเดือนหน้าจะทุ่มงบไปทาง IG หรือ TikTok ดี

เป็นไงครับเพื่อนๆ Short Links บน Dev Tools Builder ตอบโจทย์มั๊ย?

สรุปข้อดี:

✅ ฟรี เริ่มใช้ได้เลย ไม่ต้องจ่ายอะไรก่อน

✅ ทำได้ทั้งย่อ URL + Track ทุกอย่าง ไม่ต้องสลับเครื่องมือไป-มา

✅ เชื่อมกับ LINE User ID ได้ → รู้ลึกว่า “ใคร” คลิก ไม่ใช่แค่ “กี่คน”

✅ Export CSV ไปวิเคราะห์ต่อใน Excel / Google Sheets / Looker Studio ได้

ถ้าเพื่อนๆ กำลังจะปล่อย campaign Add LINE OA, ยิงโปรโมชั่นข้ามหลายช่องทาง, หรืออยากรู้ว่าโฆษณาตัวไหนคุ้มที่สุด ฟีเจอร์นี้ตอบโจทย์มากครับ

ลองสร้าง Short Link แรกแล้วเอาไปทดสอบดูครับ ใช้เวลาแค่ 2 นาที 🚀

แล้วเดี๋ยวบทความหน้า ผมจะพาไปลึกขึ้น เอา Short Link มาเชื่อมกับ Audience + Broadcast เฉพาะกลุ่ม (segment marketing แบบเท่ๆ ไม่ต้องจ่าย Bitly Pro)

ใครติดปัญหา หรืออยากให้รีวิวฟีเจอร์ไหนเพิ่ม คอมเมนต์มาคุยกันได้นะครับ 😉

แล้วพบกันใหม่ในบทความหน้าครับ

🎉 Short Links เครื่องมือใหม่ฟรีใน Dev Tools Builder ย่อ URL + Track ที่มาของ Follower… was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.

อยากให้ Rich Menu สร้าง–ลบ–สลับได้อัตโนมัติจากโค้ด Python ไหม?
ในบทความนี้ บีทจะมาต่อยอดด้วยการรวมทุกฟังก์ชันการจัดการ Rich Menu ไว้ครบ ผ่าน LINE Bot SDK Python เพื่อแบ่งปันให้เพื่อน ๆ ได้ลองใช้จริง

แถม!! มี GitHub Repo ทีรวมโค้ดมาให้แล้ว clone ไปใช้ได้เลย!!

และที่สำคัญใหม่ล่าสุด! ✨ เราสามารถดูข้อมูล สถิติการใช้งาน Rich Menu ของเราผ่าน Python SDK ได้เช่นกัน !!

สำหรับใครที่ยังไม่เคยเรียนรู้พื้นฐานเกี่ยวกับ LINE Rich Menu บีทแนะนำให้อ่านบทความ “เก่ง Rich Menu ใน LINE ให้ครบสูตร” ควบคู่ไปด้วยนะคะ จะได้เห็นภาพครบทุกมิติ

ถ้าพร้อมแล้วมาดูเนื้อหากัน !

#Table of Contents 
1. Introduction to LINE Rich Menu
2. Rich Menu JSON Schema
3. Rich Menu Life Cycle
4. Rich Menu Management in Python
      4.1 Start Using LINE Bot SDK Python
      4.2 Validate & Create Rich Menu in Python
      4.3 List & Get Detail  to Rich Menu in Python
      4.4 Upload & Get Images to Rich Menu in Python
      4.5 Set a Default Rich Menu in Python
      4.6 Link & Unlink Per-User Rich Menu in Python
      4.7 Check Rich Menu Insight
      4.8 Delete Rich Menu

5. ส่งท้าย!!

1. Introduction to LINE Rich Menu

“LINE Chatbot ที่ไม่มี Rich Menu ก็เหมือนเดินเข้าร้านอาหารแล้ว ไม่มีรายการอาหารให้ หรือ ไปเที่ยวแล้วไม่มีแผนที่” — กล่าวโดย Tech Evangelist ท่านหนึ่ง

1.1 What is a Rich Menu?

เชื่อว่านักพัฒนา LINE Developer ส่วนใหญ่คงรู้จัก Rich Menu กันเป็นอย่างดี ซึ่งเป็นเมนูแบบโต้ตอบ (Interactive Menu) ที่ปรากฏอยู่ด้านล่างหน้าต่าง chat ของ LINE Official Account (LINE OA) ช่วยให้ผู้ใช้งานสามารถเข้าถึง feature หรือบริการต่าง ๆ ได้อย่างรวดเร็วผ่านปุ่มเมนูที่สามารถออกแบบเองได้ เช่น ปุ่มดูโปรโมชั่น ปุ่มเปิดกล้อง ปุ่มติดต่อเจ้าหน้าที่ หรือปุ่มเปลี่ยนภาษา โดยการออกแบบ Rich Menu ที่ดีนั้น ไม่เพียงแต่ช่วยเพิ่มความสะดวกให้กับผู้ใช้งาน แต่ยังช่วยยกระดับประสบการณ์การใช้งาน LINE Chatbot ของเราอีกด้วย

1.2 How to Design a Rich Menu

แล้วเราควรจะออกแบบ Rich Menu ของเราอย่างไรดี?

จากภาพด้านล่างคือเว็บไซต์ LINE OA Manager ที่เราสามารถเข้าไปสร้างหรือแก้ไข Rich Menu ได้โดยตรง สำหรับผู้เริ่มต้น แนะนำให้ศึกษาจาก Design Template ที่ใช้ในการออกแบบ Rich Menu ซึ่งมีให้เลือกใช้งานอยู่ 2 ขนาดหลัก ได้แก่ Large (ขนาดใหญ่) และ Compact (ขนาดเล็ก) โดยทั้งสองขนาดนี้สามารถแบ่งพื้นที่เป็นปุ่มย่อยได้ตามรูปแบบมาตรฐานที่ LINE กำหนดไว้ หรือจะเลือกใช้แบบ Free Style เพื่อออกแบบตำแหน่งปุ่มเองก็ได้เช่นกัน ซึ่งหากเรา ดาวน์โหลด Design Template ก็จะมีรูปภาพที่สามารถใช้เป็น Guideline ในการออกแบบได้ค่ะ

แต่หากเพื่อน ๆ ยังไม่มั่นใจในการออกแบบ Rich Menu ด้วยตนเอง ก็สามารถใช้เครื่องมือชื่อว่า Rich Menu Maker ซึ่งเป็นบริการของ LINE for Business ที่ช่วยให้การออกแบบ Rich Menu เป็นเรื่องง่ายและสะดวกมากยิ่งขึ้น

เลือก Rich Menu Template ที่ออกแบบมาแล้วใน Canva

อีกหนึ่งเว็บไซต์ที่อยากแนะนำสำหรับการออกแบบกราฟิกเพื่อใช้สร้าง Rich Menu ก็คือ Canva ซึ่งหากลองค้นหาด้วยคำว่า “LINE Rich Menu” จะพบว่ามีตัวอย่าง Template กราฟิก ให้เลือกมากมาย ซึ่งสามารถนำมาดัดแปลง แก้ไขให้เหมาะกับ LINE Official Account ของเราได้ทันที

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

2. Rich Menu JSON Schema

ต่อจาก ข้อ 1 ที่เรามี Graphic Design สวย ๆ ของ Rich Menu แล้ว

คำถาม: “จะรู้ได้อย่างไรว่าเวลาผู้ใช้กดตรงไหน จะเกิดอะไรขึ้น?”
คำตอบ: เราต้อง กำหนดตำแหน่งและคำสั่งของปุ่ม แต่ละปุ่มไว้ใน areas ของ Rich Menu JSON Schema ค่ะ ​ ซึ่งในหัวข้อนี้จะมาขยายความในส่วนนี้ค่ะ

2.1 Action & Bounding Box

นักพัฒนา LINE Chatbot จะทราบดีว่า การสร้าง Rich Menu JSON Schema นั้น เราจำเป็นต้องระบุ bounding box ของแต่ละส่วนใน Rich Menu ว่าพื้นที่ใดจะทำงานอย่างไร ซึ่งแต่ละส่วนสามารถกำหนด Action ที่แตกต่างกันได้ตามความต้องการ

โดย Action ที่รองรับมีหลายรูปแบบ เช่น:

1.message → ส่งข้อความอัตโนมัติกลับไปยังผู้ใช้
2.postback → ส่งข้อมูลลับๆ (hidden data) กลับไปที่ server ใช้ใน logic ต่อไป
3.uri → เปิด link เช่น เว็บไซต์หรือแอปพลิเคชัน
4.richmenuswitch → สลับไปมายัง Rich Menu อื่นที่ถูกกำหนดไว้
5.datetimepicker → เปิดตัวเลือกวันที่และเวลาให้ผู้ใช้เลือก
6.camera → เปิดกล้องถ่ายรูปเพื่อส่งภาพ
7.cameraRoll → เปิดคลังภาพ (gallery) ให้ผู้ใช้เลือกภาพ
8.location → เปิดหน้าต่างให้ผู้ใช้แชร์ตำแหน่งที่ตั้งปัจจุบัน
9.clipboard → คัดลอกข้อความที่กำหนดไว้ไปยังคลิปบอร์ดของผู้ใช้

ตัวอย่าง Rich Menu JSON Schema

2.2 Example Schema Generation with Gemini

Trick & Tip — นอกจากการเขียนโค้ดด้วยตนเองแล้ว ปัจจุบันเรายังสามารถใช้ AI อย่าง Gemini มาช่วยสร้าง Rich Menu JSON Schema ได้อีกด้วย เพียงแค่เราออกแบบ Rich Menu ให้เสร็จ แล้วส่งภาพพร้อมเขียน Prompt บอก AI ว่าต้องการให้สร้าง JSON Schema โดยระบุ Bounding Box และ Action ของแต่ละปุ่ม AI ก็จะช่วยร่างโครงสร้างออกมาให้ทันที

จากรูปด้านบนจะเห็นว่า บีทได้ส่งภาพ Rich Menu ที่ออกแบบเสร็จเรียบร้อยแล้วไปยัง Gemini พร้อมทั้งเขียน Prompt เพื่อสั่งให้ AI ช่วยสร้าง JSON Schema โดยระบุ Bounding Box สำหรับการกดปุ่มแต่ละตำแหน่ง และให้แสดงผลใน Canvas ของ Gemini

3. Rich Menu Life Cycle

ในกระบวนการการจัดการ Rich Menu นั้นมีตั้งแต่เริ่มออกแบบไปจนถึงทำการสร้างละตั้งค่าให้ผู้ใช้ทุกคน หรือบางคน

การจัดการ Rich Menu หลายคนอาจมองว่าเป็นเรื่องง่าย แต่เมื่อได้ลองลงมือทำจริง ๆ จะพบว่ามีหลายขั้นตอนและกระบวนการที่ต้องเข้าใจ หากต้องการทำงานอย่างมืออาชีพบน LINE Messaging API เราควรรู้จักวงจรชีวิต (Life Cycle) ของ Rich Menu ซึ่งสามารถแบ่งออกได้เป็นขั้นตอนหลัก ๆ ตาม API ของ LINE Messaging API ได้ดังนี้

1. Validate/ Create — ตรวจสอบโครงสร้าง Rich Menu และสร้าง Rich Menu

POST /v2/bot/richmenu → สร้าง Rich Menu
POST /v2/bot/richmenu/validate → ตรวจสอบว่า JSON Schema ถูกต้องก่อนใช้งานจริง

2. Upload / Get Content — ใส่รูปตามโครงสร้างของ Rich Menu ที่สร้างไว้

POST /v2/bot/richmenu/{richMenuId}/content → อัปโหลดรูปภาพเข้า Rich Menu ตาม richMenuId ที่ระบุ
GET /v2/bot/richmenu/{richMenuId}/content → ดึงรูปภาพของ Rich Menu ออกมา ตาม richMenuId ที่ระบุ

3. List/ Read — เรียกดู Rich Menu ทั้งหมด หรือบางตัว

GET /v2/bot/richmenu/list → เรียกดู Rich Menu ทั้งหมดในระบบ
GET /v2/bot/richmenu/{richMenuId} → อ่านข้อมูลของ Rich Menu เฉพาะตัว ตาม richMenuId ที่ระบุ

4. กำหนด Default Rich Menu ให้ผู้ใช้ทุกคน หรือเฉพาะคน

POST /v2/bot/user/all/richmenu/{richMenuId} → กำหนด Default Rich Menu ให้ผู้ใช้ทุกคน
GET /v2/bot/user/all/richmenu → ตรวจสอบ Default Rich Menu ปัจจุบัน
POST /v2/bot/user/{userId}/richmenu/{richMenuId} → กำหนด Rich Menu ให้ผู้ใช้ตาม UserID ที่กำหนด
DELETE /v2/bot/user/{userId}/richmenu/{richMenuId} → ยกเลิก Rich Menu ให้ผู้ใช้ตาม UserID ที่กำหนด

5. Delete — ลบ Rich Menu หรือ ยกเลิก Default Rich Menu

DELETE /v2/bot/richmenu/{richMenuId} → ลบ Rich Menu
DELETE /v2/bot/user/all/richmenu → ยกเลิก Default Rich Menu

6. Insight — ดูสถิติการใช้งาน Rich Menu

GET /v2/bot/insight/richmenu/{richMenuId}/summary -> ดูสถิติแบบสรุป
GET /v2/bot/insight/richmenu/{richMenuId}/daily -> ดูสถิติรายวัน

4. Rich Menu Management in Python

แน่นอนว่า การจัดการ Rich Menu ตลอดทั้ง Life Cycle นั้น สามารถดำเนินการได้ครบถ้วนผ่าน REST API ของ LINE Messaging API อย่างไรก็ตาม สำหรับนักพัฒนาที่คุ้นเคยกับภาษา Python ก็ไม่ต้องกังวล เพราะในบทความส่วนนี้ เราจะเลือกใช้ LINE Bot SDK Python เพื่อจัดการ Rich Menu ครบทุกขั้นตอน ตั้งแต่การสร้าง แก้ไข การลบและการผูก Rich Menu กับผู้ใช้งาน จบถึงดูสถิติโดยเนื้อหาในหัวข้อนี้จะแบ่งออกเป็นหัวข้อย่อยดังต่อไปนี้

4.1 Start Using LINE Bot SDK Python
4.2 Validate & Create Rich Menu in Python
4.3 List & Get Detail to Rich Menu in Python
4.4 Upload & Get Images to Rich Menu in Python
4.5 Create Rich Menu Alias in Python
4.6 Set a Default Rich Menu in Python
4.7 Link & Unlink Per-User Rich Menu in Python
4.8 Check Rich Menu Insight
4.9 Delete Rich Menu

โดยอยากบอกทุกคนว่า Source code ของ Python ทั้งหมดบีทได้รวบรวมไว้ให้ใน GitHub Repo นี้แล้วกดๆ ได้เลยค่ะ

4.1 Start Using LINE Bot SDK Python

LINE Bot SDK for Python เป็น libary ที่ช่วยให้นักพัฒนาสามารถเชื่อมต่อและใช้งาน LINE Messaging API ได้สะดวกขึ้น โดยไม่จำเป็นต้องเรียก API โดยตรง เหมาะสำหรับคนที่อยากพัฒนา LINE และถนัดในการใช้ภาษา Python

เราสามารถติดตั้งแพ็กเกจผ่านคำสั่ง pip install line-bot-sdk ซึ่งปัจจุบันรองรับ LINE Bot SDK v3 โดยหากต้องการพัฒนาและจัดการ Rich Menu คลาสหลักที่ใช้งานจะอยู่ภายใต้ linebot.v3 ซึ่งในบทความนี้จะใช้งานอยู่ 3 คลาสหลัก ได้แก่ MessagingApi, MessagingApiBlob และ Insight

• MessagingApi ใช้สำหรับสื่อสารกับผู้ใช้งานและควบคุมการทำงานหลักของ LINE Chatbot ที่ไม่เกี่ยวข้องกับไฟล์หรือรูปภาพ เช่น การส่งและตอบข้อความ การดึงข้อมูลผู้ใช้ การจัดการ Rich Menu และ Rich Menu Alias
• MessagingApiBlob ใช้สำหรับจัดการข้อมูลประเภทไฟล์ โดยเฉพาะการอัปโหลดรูปภาพสำหรับ Rich Menu และการดึงรูปภาพของ Rich Menu กลับมาใช้งาน
• Insight เป็นคลาสสำหรับเรียกดูสถิติต่าง ๆ ของ LINE Official Account เช่น ข้อมูลเชิงประชากร (Demographic) ของผู้ใช้งาน จำนวนข้อความที่ส่งผ่านบัญชี และสถิติการใช้งานหรือการคลิก Rich Menu

ทั้งสามคลาสนี้ครอบคลุมการทำงานหลักที่จำเป็นสำหรับการสร้าง จัดการ และวิเคราะห์การใช้งาน Rich Menu ผ่าน LINE Bot SDK for Python

ในการเริ่มต้นใช้งาน เราสามารถติดตั้งแพ็กเกจ line-bot-sdk จากนั้นจึง Import คลาสที่เกี่ยวข้อง และเชื่อมต่อกับบริการของ LINE ผ่านค่า CHANNEL_ACCESS_TOKEN

จากตัวอย่างโค้ดด้านบน จะเห็นว่ามีการสร้างตัวแปร messaging_api สำหรับเรียกใช้งานฟังก์ชันทั่วไปในการจัดการ Rich Menu ขณะที่ messaging_api_blob ใช้สำหรับจัดการข้อมูลประเภทไฟล์ เช่น รูปภาพและ Content ต่าง ๆ

ส่วนสำคัญคือการกำหนดค่าใน Configuration โดยส่ง CHANNEL_ACCESS_TOKEN เข้าไป เพื่อใช้ยืนยันตัวตนและเชื่อมต่อกับ LINE Messaging API

ตัวอย่างโค้ดในการ Import คลาส และ Configuration :

import os
from pathlib import Path
from dotenv import load_dotenv
from linebot.v3.messaging import Configuration, ApiClient, MessagingApi, RichMenuRequest
from linebot.v3.insight import Insight

load_dotenv(override=True, dotenv_path=Path(__file__).resolve().parent / ".env")

configuration = Configuration(access_token=os.getenv("CHANNEL_ACCESS_TOKEN"))
api_client = ApiClient(configuration)
messaging_api = MessagingApi(api_client)

4.2 Validate & Create Rich Menu in Python

ในส่วนนี้เราจะเรียนรู้การสร้าง Rich Menu ผ่าน LINE Bot SDK for Python ซึ่งประกอบด้วยฟังก์ชันที่เกี่ยวข้องได้แก่

• ตรวจสอบความถูกต้องของ JSON Structure — messaging_api.validate_rich_menu_object
• สร้าง Rich Menu — messaging_api.create_rich_menu

จากตัวอย่างโค้ดด้านล่าง จะเห็นว่ามีการเรียกใช้ validate_rich_menu_object() เพื่อตรวจสอบความถูกต้องของโครงสร้าง JSON ก่อน จากนั้นจึงเรียก create_rich_menu() เพื่อสร้าง Rich Menu โดยอ่านรายละเอียดจากไฟล์ JSON ซึ่งกำหนดข้อมูลต่าง ๆ เช่น ขนาด (Size), พื้นที่กด (Areas) และ Action ของแต่ละเมนู ก่อนส่งไปสร้าง Rich Menu บน LINE Official Account

ตัวอย่างโค้ดในการตรวจสอบ และ สร้าง Rich Menu :

def create_rich_menus(rich_menu_file: str):
    try:
        with open(rich_menu_file, "r") as f:
            richmenu_json = f.read()
        rich_menu_request = RichMenuRequest.from_json(richmenu_json)
        messaging_api.validate_rich_menu_object(rich_menu_request=rich_menu_request)
        api_response = messaging_api.create_rich_menu(rich_menu_request=rich_menu_request)
        print(f"Successfully created rich menu from {rich_menu_file} with ID: {api_response.rich_menu_id}")
        return api_response.rich_menu_id
    except Exception as e:
        print(f"Error: {e}")
        return None

ข้อดีของการเรียกใช้ฟังก์ชัน Validate คือช่วยตรวจสอบความถูกต้องของ JSON Structure ของ Rich Menu ก่อนทำการสร้างจริง หากโครงสร้างมีข้อผิดพลาด ระบบจะแจ้งรายละเอียดของข้อผิดพลาด พร้อมระบุบรรทัดหรือจุดที่เกิดปัญหา ทำให้สามารถแก้ไขได้อย่างรวดเร็วและตรงจุด

หากการ​​สามารถตรวจสอบและสร้าง Rich Menu ได้สำเร็จก็จได้ ID ของ Rich Menu

4.3 List & Get Detail to Rich Menu in Python

ในการตรวจสอบจำนวน Rich Menu ที่มี และรายละเอียดของ Rich Menu แต่ละตัวเราสามารถที่จะใช้ฟังก์ชันดังต่อไปนี้

• แสดงรายการ Rich Menu ทั้งหมด — messaging_api.get_rich_menu_list
• ดู Rich Menu — messaging_api.get_rich_menu

ตัวอย่างโค้ดในการดู Rich Menu ทั้งหมด และ รายละเอียด Rich Menu ด้วย ID:

from linebot.v3.messaging import Configuration, ApiClient, MessagingApi

load_dotenv(override=True, dotenv_path=Path(__file__).resolve().parent / ".env")
configuration = Configuration(access_token=os.getenv("CHANNEL_ACCESS_TOKEN"))
api_client = ApiClient(configuration)
messaging_api = MessagingApi(api_client)

def get_rich_menu_list():
    try:
        response = messaging_api.get_rich_menu_list()
        print(f"Total rich menus: {len(response.richmenus)}")
        for rm in response.richmenus:
            print(f"- {rm.rich_menu_id}: {rm.name}")
        return response
    except Exception as e:
        print(f"Error: {e}")

def get_rich_menu(rich_menu_id: str):
    try:
        response = messaging_api.get_rich_menu(rich_menu_id)
        print(f"Rich menu ID: {response.rich_menu_id}")
        print(f"Name: {response.name}")
        print(f"Chat Bar Text: {response.chat_bar_text}")
        print(f"Size: {response.size.width}x{response.size.height}")
        print(f"Areas: {len(response.areas)}")
    except Exception as e:
        print(f"Error: {e}")

เมื่อรันโค้ดด้านบน จะได้รายการ Rich Menu ทั้งหมดที่ถูกสร้างไว้ใน LINE Official Account ของเรา จากนั้นสามารถนำค่า rich_menu_id ไปเรียกใช้งานฟังก์ชัน get_rich_menu เพื่อดึงรายละเอียดของ Rich Menu แต่ละรายการได้ ไม่ว่าจะเป็นชื่อ (Name), ขนาด (Size), จำนวนพื้นที่กด (Bounding Box) รวมถึง Action ของแต่ละพื้นที่ที่กำหนดไว้ใน JSON Schema

4.4 Upload & Get Images to Rich Menu in Python

หลังจากมีโครงสร้างแล้วเราจะต้องทำการอัพโหลด และตรวจสอบรูปของ Rich Menu ด้วย โดยใช้ function ดังนี้

• อัปโหลดรูปภาพ — messaging_api.set_rich_menu_image
• ดูรูปภาพปัจจุบัน — messaging_api.get_rich_menu_image

จากในตัวอย่างโค้ดด้านล่างจะเห็นการสร้างฟังก์ในการสร้าง Rich Menu โดยเรียกคำสั่ง set_rich_menu_image ซึ่งเราจะต้องระบุ rich_menu_id และ file path ของรูปที่เราต้องการจะใช้เพื่อสร้าง Rich Menu

ตัวอย่างโค้ดในการ upload รูปภาพของ Rich Menu :

from linebot.v3.messaging import Configuration, ApiClient, MessagingApiBlob

load_dotenv(override=True, dotenv_path=Path(__file__).resolve().parent / ".env")
configuration = Configuration(access_token=os.getenv("CHANNEL_ACCESS_TOKEN"))
api_client = ApiClient(configuration)
messaging_api_blob = MessagingApiBlob(api_client)

def upload_richmenu_image(rich_menu_id: str, image_path: str):
    try:
        with open(image_path, "rb") as f:
            image_bytes = f.read()
        messaging_api_blob.set_rich_menu_image(
            rich_menu_id,
            body=image_bytes,
            _headers={"Content-Type": "image/jpeg"},
        )
        print(f"Uploaded: {image_path}")
    except Exception as e:
        print(f"Error: {e}")

หลังจากสร้าง Rich Menu เรียบร้อยแล้ว หากต้องการตรวจสอบรูปภาพที่อัปโหลดไว้ สามารถใช้ฟังก์ชัน get_rich_menu_image เพื่อเรียกดูรูปภาพที่เราทำการอัปโหลดไปแล้วได้ โดยผลลัพธ์ที่ได้จะอยู่ในรูปแบบ bytearray ของตัวรูปภาพ และเราสามารถใช้ Python library ที่ชื่อว่า Pillow ทำการเปิดภาพออกมาแสดงโดยใช้ฟังก์ชันImage.open เพื่อแปลงและแสดงรูปภาพของ Rich Menu ได้ตามตัวอย่างโค้ดด้านล่าง

ตัวอย่างโค้ดในการดึงรูปภาพของ Rich Menu ด้วย ID :

def get_richmenu_image(rich_menu_id: str, show: bool = False):
    try:
        image_data = messaging_api_blob.get_rich_menu_image(rich_menu_id)
        img = Image.open(BytesIO(image_data))
        print(f"Downloaded: {len(image_data)} bytes, Size: {img.size}, Mode: {img.mode}")
        if show:
            img.show()
    except Exception as e:
        print(f"Error: {e}")

เมื่อรันฟังก์ชันด้านบน จะได้ผลลัพธ์เป็นรูปภาพของ Rich Menu ตาม rich_menu_id ที่ระบุ พร้อมรายละเอียดของรูปภาพ เช่น ขนาด (Width, Height), รูปแบบไฟล์ (Format) และโหมดสี (Color Mode) ซึ่งช่วยให้สามารถตรวจสอบได้ว่ารูปภาพที่อัปโหลดไปยัง LINE Official Account ถูกต้องและพร้อมใช้งาน

4.5 Create Rich Menu Alias in Python

นอกเหนือกจากสร้าง Rich Menu แล้วเราสามารถ ตั้งชื่อเล่นให้กับ Rich Menu ของเราได้ด้วย โดยใช้ฟังก์ชัน create_rich_menu_aliasมีหน้าที่ สร้าง Rich Menu Alias ซึ่งเป็นชื่ออ้างอิง (Alias) ให้กับ Rich Menu ID จริง เพื่อให้เราสามารถอ้างอิง Rich Menu ด้วยชื่อที่จำง่าย และรองรับการ Rich Menu Switching ได้สะดวกในอนาคต

• สร้าง Rich Menu Alias — messaging_api.create_rich_menu_alias
• แก้ไข Rich Menu Alias — messaging_api.update_rich_menu_alias
• ลบ Rich Menu Alias — messaging_api.delete_rich_menu_alias

ตัวอย่างการจัดการ Rich Menu Alias:

def create_rich_menu_alias(rich_menu_alias_id: str, rich_menu_id: str):
    try:
        messaging_api.create_rich_menu_alias(
            CreateRichMenuAliasRequest(
                rich_menu_alias_id=rich_menu_alias_id,
                rich_menu_id=rich_menu_id,
            )
        )
        print(f"Created alias {rich_menu_alias_id} -> {rich_menu_id}")
    except Exception as e:
        print(f"Error: {e}")


def delete_rich_menu_alias(rich_menu_alias_id: str):
    try:
        messaging_api.delete_rich_menu_alias(rich_menu_alias_id)
        print(f"Deleted alias: {rich_menu_alias_id}")
    except Exception as e:
        print(f"Error: {e}")

4.6 Set a Default Rich Menu in Python

หากต้องการกำหนด Rich Menu หลัก (Default Rich Menu) ให้แสดงกับผู้ใช้งานทุกคนใน LINE Official Account สามารถใช้งานฟังก์ชันสำหรับกำหนดและยกเลิก Rich Menu หลักได้ โดย Rich Menu นี้จะถูกแสดงเป็นค่าเริ่มต้นสำหรับผู้ใช้ทุกคนที่ยังไม่ได้กำหนด Rich Menu แบบรายบุคคล ซึ่งมีฟังก์ชันที่ใช้งานดังต่อไปนี้

• ตั้งค่า Rich Menu — messaging_api.set_default_rich_menu
• ตรวจสอบ Rich Menu หลัก — messaging_api.get_default_rich_menu
• ยกเลิก Rich Menu หลัก — messaging_api.cancel_default_rich_menu

ตัวอย่างโค้ดของการตั้งค่า Default Rich Menu:

def set_default_rich_menu(rich_menu_id: str):
    try:
        messaging_api.set_default_rich_menu(rich_menu_id)
        print(f"Set default rich menu: {rich_menu_id}")
    except Exception as e:
        print(f"Error: {e}")

def get_default_rich_menu():
    try:
        response = messaging_api.get_default_rich_menu_id()
        print(f"Default rich menu ID: {response.rich_menu_id}")
        return response.rich_menu_id
    except Exception as e:
        print(f"Error: {e}")
        return None

def cancel_default_rich_menu():
    try:
        messaging_api.cancel_default_rich_menu()
        print("Canceled default rich menu")
    except Exception as e:
        print(f"Error: {e}")

4.7 Link & Unlink Per-User Rich Menu in Python

อีกหนึ่งความสามารถที่น่าสนใจของ LINE Messaging API คือ การกำหนด Rich Menu รายบุคคล (Per-user Rich Menu) ซึ่งสามารถนำไปประยุกต์ใช้กับ Rich Menu Switching เพื่อสลับหน้า Rich Menu ตามเงื่อนไขต่าง ๆ เช่น สถานะผู้ใช้งาน สิทธิ์การใช้งาน หรือเมื่อผู้ใช้กดเมนูบางรายการ ทำให้ผู้ใช้แต่ละคนสามารถเห็น Rich Menu ที่แตกต่างกันได้

ฟังก์ชันที่ใช้สำหรับกำหนด Rich Menu รายบุคคลมีดังนี้

• Link Rich Menu ให้แต่ละคนด้วย user ID — messaging_api.link_rich_menu_to_user
• Unlink Rich Menu — messaging_api.unlink_rich_menu_from_user
• ตรวจสอบ Rich Menu ที่ใช้งานอยู่ด้วย user ID — messaging_api.get_rich_menu_id_of_user

ตัวอย่างโค้ดของการจัดการ Rich Menu รายบุคคล:

4.8 Check Rich Menu Insight

🚨🚨🚨 ข่าวใหม่ล่าสุดปี 2026! LINE เปิดตัว 2 API ใหม่ ที่ช่วยให้นักพัฒนาสามารถดึงข้อมูลสถิติของ Rich Menu ที่สร้างผ่าน Messaging API ได้แล้ว 🎉

ข่าวนี้ถือเป็นข่าวดีมาก ๆ สำหรับนักพัฒนา เพราะที่ผ่านมา Rich Menu ที่สร้างผ่าน API ยังมีข้อจำกัดด้านการดูสถิติ แต่ตอนนี้เราสามารถตรวจสอบข้อมูลการใช้งานและจำนวนการคลิกในแต่ละพื้นที่ของ Rich Menu ได้โดยตรงผ่าน LINE Messaging API ที่สำคัญบทความนี้มาพร้อมโค้ด Python ที่บีทเอามาให้ดูด้วย :)

โดยใน line-bot-sdk จะต้องทำการ import คลาสของ Insight เข้ามาใช้งานก่อนซึ่ง คลาสนี้จะจัดการเกี่ยวกับการดึงของมูลทางสถิติของ LINE OA ทั้งหมด

ตัวอย่างโค้ดการ import คลาส Insight มาใช้งาน:

from linebot.v3.insight import ApiClient, Configuration, Insight

load_dotenv(override=True, dotenv_path=Path(__file__).resolve().parent / ".env")
configuration = Configuration(access_token=os.getenv("CHANNEL_ACCESS_TOKEN"))
api_client = ApiClient(configuration)
insight_api = Insight(api_client)

ก่อนจะดึงข้อมูลสถิติของ Rich Menu เรามาทำความรู้จักกับ API ที่ใช้สำหรับ Insight กันก่อน ซึ่งใน LINE Bot SDK จะมีอยู่ 2 รูปแบบหลัก ดังนี้

• Get rich menu insight totals — สำหรับดูสถิติแบบสรุป insight_api.get_rich_menu_insight_summary
• Get rich menu insight by day — การใช้งานแบบรายวัน insight_api.get_rich_menu_insight_daily

จากตัวอย่างโค้ดด้านล่าง จะเห็นว่าในการเรียกใช้งาน API ทั้งสองรูปแบบ จำเป็นต้องระบุ rich_menu_id ของ Rich Menu ที่ต้องการวิเคราะห์ และสำหรับการดึงข้อมูลแบบรายวัน (get_rich_menu_insight_daily) จะต้องกำหนด วันที่เริ่มต้น (start) และ วันที่สิ้นสุด (end) ของช่วงเวลาที่ต้องการดูสถิติด้วย เพื่อให้สามารถวิเคราะห์แนวโน้มการใช้งานในแต่ละวันได้อย่างละเอียด โดยตัวอย่างโค้ดในการดึงข้อมูลสถิติของการใช้งาน Rich Menu มีดังนี้

def get_rich_menu_summary(rich_menu_id: str, from_date: str, to_date: str):
    try:
        response = insight_api.get_rich_menu_insight_summary(rich_menu_id, from_date, to_date)
        print(f"Summary {rich_menu_id} ({from_date} - {to_date})")
        pprint(response)
        return response
    except Exception as e:
        print(f"Error: {e}")
        return None

def get_rich_menu_daily(rich_menu_id: str, from_date: str, to_date: str):
    try:
        response = insight_api.get_rich_menu_insight_daily(rich_menu_id, from_date, to_date)
        print(f"Daily {rich_menu_id} ({from_date} - {to_date})")
        pprint(response)
        return response
    except Exception as e:
        print(f"Error: {e}")
        return None

จากตัวอย่างด้านล่างจะเป็นผลลัพธ์ที่ได้จากการดึงข้อมูลสถิติ ซึ่งมาในรูปแบบของ Python Object​ ซึ่งก็ทำให้ดูยาก เราสามารถที่จะแปลงเป็น JSON หรือ สร้างเป็น Visualization ให้ดูง่ายขึ้นได้เช่นกัน

ในบทความนี้ เราได้เอาผลของget_rich_menu_insight_summary() หรือ get_rich_menu_insight_daily() มาจัดรูปแบบเป็น DataFrame และส่งต่อให้ไลบรารี Plotly เพื่อสร้างกราฟแสดงผลแบบ Interactive ได้

การแสดงผลในรูปแบบกราฟจะช่วยให้เรามองเห็นภาพรวมและแนวโน้มการใช้งาน Rich Menu ได้ชัดเจนยิ่งขึ้น เช่น จำนวนครั้งที่ผู้ใช้งานกด Rich Menu ในแต่ละวัน หรือเปรียบเทียบจำนวนการกดของแต่ละปุ่ม bounding boxใน Rich Menu เพื่อดูว่าปุ่มหรือเมนูใดได้รับความสนใจมากที่สุด ข้อมูลเหล่านี้สามารถนำไปใช้ประกอบการวิเคราะห์และปรับปรุงการออกแบบ Rich Menu ให้สอดคล้องกับพฤติกรรมของผู้ใช้งานได้อย่างมีประสิทธิภาพมากขึ้น

ตัวอย่างขอโค้ดที่ทำการส่งต่อผลสถิติไป plot เพื่อแสดงผลเป็นกราฟ:

def plot_summary(response):
    rows = [
        {"label": "Impressions", "metric": "Count", "value": response.impression.metrics.count},
        {"label": "Impressions", "metric": "Unique users", "value": response.impression.metrics.unique_users},
    ]
    for i, click in enumerate(response.clicks or []):
        rows.append({"label": f"Area {i + 1}", "metric": "Count", "value": click.metrics.count})
        rows.append({"label": f"Area {i + 1}", "metric": "Unique users", "value": click.metrics.unique_users})

    fig = px.bar(
        pd.DataFrame(rows),
        x="label",
        y="value",
        color="metric",
        barmode="group",
        title=f"Rich Menu Summary ({response.metrics_from} - {response.metrics_to})",
        labels={"label": "", "value": "Count", "metric": "Metric"},
    )
    fig.show()


if __name__ == "__main__":
    rich_menu_id = "richmenu-1d2e62eb1e49dc5e98de2a3a72ae4369"
    from_date, to_date = "20260701", "20260711"
    summary = get_rich_menu_summary(rich_menu_id, from_date, to_date)
    daily = get_rich_menu_daily(rich_menu_id, from_date, to_date)
    plot_summary(summary)
    plot_daily(daily)

เมื่อส่งข้อมูลสถิติการใช้งาน Rich Menu ไปสร้างกราฟด้วย Plotly เราก็จะได้ Interactive Graphs ที่สามารถโต้ตอบกับข้อมูลได้ ไม่ว่าจะเป็นการซูม, เลื่อนดูข้อมูล, แสดงรายละเอียดของแต่ละจุดข้อมูลเมื่อเลื่อนเมาส์ตามข้อมูลที่สนใจได้ตามตัวอย่างรูปด้านล่าง

4.8 Delete Rich Menu

หลังจากใช้งาน Rich Menu เสร็จแล้ว หรือไม่ต้องการใช้งานอีกต่อไป เราสามารถลบทั้ง Rich Menu และ Rich Menu Alias ผ่าน LINE Bot SDK ได้

• ลบ Rich Menu — messaging_api.delete_rich_menu
• ลบ Rich Menu Alias — messaging_api.delete_rich_menu_alias

จากตัวอย่างโค้ดด้านล่าง จะเห็นว่ามีการเรียกใช้ delete_rich_menu โดยระบุ rich_menu_id ที่ต้องการลบ และ delete_rich_menu_aliasโดยระบุ rich_menu_alias_id ที่ต้องการลบ

def delete_rich_menu(rich_menu_id: str):
    try:
        messaging_api.delete_rich_menu(rich_menu_id)
        print(f"Deleted rich menu: {rich_menu_id}")
    except Exception as e:
        print(f"Error: {e}")

def delete_rich_menu_alias(rich_menu_alias_id: str):
    try:
        messaging_api.delete_rich_menu_alias(rich_menu_alias_id)
        print(f"Deleted alias: {rich_menu_alias_id}")
    except Exception as e:
        print(f"Error: {e}")

5. ส่งท้าย!!

ท้ายที่สุดแล้ว ในยุคที่ AI สามารถเข้ามาช่วยเราเขียนโค้ดได้อย่างมีประสิทธิภาพ หลายคนอาจตั้งคำถามว่า “เรายังจำเป็นต้องเขียนบทความอยู่ไหม”

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

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

Reference:

• https://developers.line.biz/en/docs/messaging-api/switch-rich-menus
• เพิ่ม Speed การสลับริชเมนูใน LINE แบบ Personalize ให้เร็วระดับแสงด้วย Richmenu Switch Action
• เก่ง Rich Menu ใน LINE ให้ครบสูตร
• ดูสถิติ Rich Menu ที่สร้างผ่าน LINE Messaging API แบบละเอียดได้ง่าย ๆ เพียงปลายนิ้ว

จัดการ Rich Menu บน LINE ด้วย LINE Bot SDK​ Python แบบครบวงจร was originally published in LINE Developers Thailand on Medium, where people are continuing the conversation by highlighting and responding to this story.