🤖 AI + LINE Advanced Activities

กิจกรรมบอท LINE ขั้นสูง

Practice Building Advanced LINE Bot Features — ฝึกสร้างฟีเจอร์ขั้นสูงของบอท LINE

Week 8 · Gerunds & Infinitives · Flex Messages · Rich Menus · AI Service

📐 Tutorial 1: Create Flex Messages
บทเรียนที่ 1: สร้าง Flex Messages

🎨

Design Beautiful Flex Messages — ออกแบบ Flex Messages สวยๆ 🌱 Easy

สิ่งที่คุณจะได้เรียนรู้:

  • โครงสร้างของ Flex Message (bubble, box, component)
  • การใช้ Flex Message Simulator
  • การสร้างการ์ดสินค้าด้วย Flex Message
  • การใช้ gerunds เพื่ออธิบายสิ่งที่คุณสนุกกับการทำ

What You'll Learn:

Create your first Flex Message! You'll learn the structure of a Flex Message, how to use the simulator, and how to build a product card. Practice gerunds to describe what you enjoy doing!

1เปิด Flex Message Simulator — Open the Simulator

ไปที่ LINE Developers Console แล้วเปิด Flex Message Simulator เครื่องมือนี้ช่วยให้คุณออกแบบและดูตัวอย่าง Flex Messages ก่อนส่งจริง

English: Go to the LINE Developers Console and open the Flex Message Simulator. This tool helps you design and preview Flex Messages before sending them.

// URL for Flex Message Simulator "https://developers.line.biz/flex-simulator/" // You can also access it from LINE Developers Console // ไปที่ LINE Developers Console → Tools → Flex Message Simulator

2สร้าง Product Card — Create a Product Card

สร้างการ์ดสินค้าที่มีรูปภาพ ชื่อสินค้า ราคา และปุ่มกด "Buy Now" ลองออกแบบเอง!

English: Build a product card with an image, product name, price, and a "Buy Now" button. Try designing it yourself!

// Product Card Flex Message { "type": "bubble", "hero": { "type": "image", "url": "https://example.com/thai-tea.jpg", "size": "full", "aspectRatio": "20:13" }, "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Thai Milk Tea", "weight": "bold", "size": "xl" }, { "type": "text", "text": "45 THB", "size": "lg", "color": "#FF6B6B" } ] }, "footer": { "type": "box", "layout": "vertical", "contents": [ { "type": "button", "action": { "type": "message", "label": "Order Now", "text": "order_thai_tea" }, "style": "primary", "color": "#8b5cf6" } ] } }

3สร้าง Carousel — Create a Carousel

สร้าง carousel ที่แสดงสินค้าหลายรายการ ผู้ใช้สามารถเลื่อนซ้าย-ขวาเพื่อดูสินค้าทั้งหมด

English: Create a carousel that shows multiple products. Users can swipe left and right to see all items.

// Carousel — multiple bubbles in one message { "type": "carousel", "contents": [ { /* Bubble 1: Thai Tea */ }, { /* Bubble 2: Green Tea */ }, { /* Bubble 3: Coffee */ } ] } // Each bubble is a separate product card // แต่ละ bubble คือการ์ดสินค้าแยกกัน

💡 Grammar Practice — ฝึกไวยากรณ์

Use gerunds when you describe this activity:

  • ✅ I enjoy designing Flex Message cards.
  • ✅ I finished creating my first product carousel.
  • ✅ I practiced writing JSON for Flex Messages.

📱 Tutorial 2: Rich Menu & Image Responses
บทเรียนที่ 2: Rich Menu และการตอบรูปภาพ

🖼️

Add Rich Menu and Image Responses — เพิ่ม Rich Menu และตอบรูปภาพ 🔍 Medium

สิ่งที่คุณจะได้เรียนรู้:

  • วิธีสร้าง Rich Menu ใน LINE Official Account Manager
  • การกำหนด action ให้แต่ละส่วนของ Rich Menu
  • การให้บอทรับและตอบรูปภาพ
  • การใช้ infinitives เพื่ออธิบายแผนและเป้าหมาย

What You'll Learn:

Create a Rich Menu for your bot and add image response capabilities. You'll learn to design menus, assign actions, and handle image messages. Practice infinitives for describing plans!

1ออกแบบ Rich Menu — Design Your Rich Menu

เตรียมรูปภาพขนาด 2500 x 1686 pixels หรือ 2500 x 843 pixels สำหรับ Rich Menu แบ่งเป็นส่วนต่างๆ ที่กดได้

English: Prepare an image sized 2500 x 1686 pixels or 2500 x 843 pixels for the Rich Menu. Divide it into tappable sections.

// Rich Menu areas — define clickable regions // แต่ละพื้นที่กดจะทำ action ต่างกัน const richMenuAreas = [ { "bounds": { "x": 0, "y": 0, "width": 833, "height": 843 }, "action": { "type": "message", "text": "Menu" } }, { "bounds": { "x": 833, "y": 0, "width": 834, "height": 843 }, "action": { "type": "message", "text": "Help" } }, { "bounds": { "x": 1667, "y": 0, "width": 833, "height": 843 }, "action": { "type": "uri", "uri": "https://yourwebsite.com" } } ];

2สร้าง Rich Menu ผ่าน API — Create Rich Menu via API

สร้าง Rich Menu ผ่าน Messaging API เพื่อควบคุมได้มากขึ้น สามารถเปลี่ยน Rich Menu ตามผู้ใช้หรือสถานการณ์ได้

English: Create the Rich Menu through the Messaging API for more control. You can switch menus based on user or situation.

// Create Rich Menu via API (Node.js) const axios = require('axios'); const richMenu = { "size": { "width": 2500, "height": 843 }, "selected": true, "name": "My Bot Menu", "chatBarText": "Tap to open menu", "areas": richMenuAreas }; // POST to LINE API to create the menu const response = await axios.post( 'https://api.line.me/v2/bot/richmenu', richMenu, { "headers": { "Authorization": `Bearer ${TOKEN}` } } );

3จัดการรูปภาพจากผู้ใช้ — Handle Image Messages

เมื่อผู้ใช้ส่งรูปภาพมา บอทสามารถรับรูปแล้วส่งต่อให้ AI วิเคราะห์ เช่น บอกว่ารูปมีอะไร หรือแปลข้อความในรูป

English: When users send images, your bot can receive them and forward to AI for analysis — describe what's in the image or translate text in the image.

// Handle image messages in your webhook if (event.message.type === 'image') { // Get image content from LINE const imageStream = await client.getMessageContent( event.message.id ); // Save or process the image // ส่งให้ AI วิเคราะห์ (เช่น OpenAI Vision) const analysis = await analyzeImage(imageBuffer); // Reply with AI analysis await client.replyMessage(event.replyToken, { "type": "text", "text": `I can see: ${analysis.description}` }); }

💡 Grammar Practice — ฝึกไวยากรณ์

Use infinitives when describing your plans:

  • ✅ I want to add a Rich Menu to my bot.
  • ✅ I need to create the menu image first.
  • ✅ I plan to use AI for image recognition.
  • ✅ I decided to design a three-section menu.

🧠 Tutorial 3: AI Customer Service Bot
บทเรียนที่ 3: บอทบริการลูกค้าด้วย AI

💼

Build an AI Customer Service Bot — สร้างบอทบริการลูกค้า AI 🏆 Hard

สิ่งที่คุณจะได้เรียนรู้:

  • วิธีเชื่อมต่อ AI (Claude/OpenAI) กับ LINE Bot
  • การสร้างระบบ conversation memory (จำบริบทการสนทนา)
  • การกำหนด system prompt สำหรับบริการลูกค้า
  • การรวม Flex Messages กับการตอบ AI

What You'll Learn:

Build a complete AI-powered customer service bot! Connect AI APIs, add conversation memory, design system prompts, and combine Flex Messages with AI responses. This is the most challenging tutorial!

1ตั้งค่า AI API — Set Up AI API Connection

เชื่อมต่อบอท LINE ของคุณกับ AI API (เช่น Claude หรือ OpenAI) เพื่อให้บอทสามารถตอบคำถามอย่างฉลาด

English: Connect your LINE bot to an AI API (like Claude or OpenAI) so it can answer questions intelligently.

// Connect to AI API (using Anthropic Claude) const Anthropic = require('@anthropic-ai/sdk'); const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }); async function getAIResponse(userMessage, conversationHistory) { const response = await anthropic.messages.create({ model: "claude-sonnet-4-20250514", max_tokens: 500, system: `You are a friendly customer service bot for a Thai restaurant. Answer in both Thai and English. Be helpful and suggest menu items when appropriate.`, messages: conversationHistory }); return response.content[0].text; }

2สร้าง Conversation Memory — Add Conversation Memory

เก็บประวัติการสนทนาของแต่ละผู้ใช้ เพื่อให้ AI จำบริบทได้ ใช้ object เก็บ userId เป็น key

English: Store conversation history for each user so AI remembers context. Use an object with userId as the key.

// Simple conversation memory // ระบบจำบริบทแบบง่าย const conversations = {}; function addMessage(userId, role, content) { if (!conversations[userId]) { conversations[userId] = []; } conversations[userId].push({ role, content }); // Keep only last 10 messages to save memory // เก็บแค่ 10 ข้อความล่าสุดเพื่อประหยัดหน่วยความจำ if (conversations[userId].length > 10) { conversations[userId] = conversations[userId].slice(-10); } } // In your webhook handler: addMessage(userId, 'user', userMessage); const aiReply = await getAIResponse( userMessage, conversations[userId] ); addMessage(userId, 'assistant', aiReply);

3ตอบด้วย Flex Message — Reply with Flex Messages

เมื่อผู้ใช้ถามเกี่ยวกับสินค้าหรือเมนู ให้บอทตอบด้วย Flex Message ที่สวยงามแทนข้อความธรรมดา

English: When users ask about products or menus, reply with beautiful Flex Messages instead of plain text.

// Detect product questions and reply with Flex async function handleMessage(event) { const text = event.message.text.toLowerCase(); if (text.includes('menu') || text.includes('เมนู')) { // Send Flex Message carousel of menu items await client.replyMessage(event.replyToken, { type: 'flex', altText: 'Our Menu', contents: createMenuCarousel() }); } else { // Use AI for general questions const aiReply = await getAIResponse( text, conversations[event.source.userId] ); await client.replyMessage(event.replyToken, { type: 'text', text: aiReply }); } }

4ทดสอบบอทของคุณ — Test Your Bot

ทดสอบบอทโดยถามคำถามต่างๆ ตรวจสอบว่า conversation memory ทำงานถูกต้อง และ Flex Messages แสดงผลสวยงาม

English: Test your bot by asking various questions. Check that conversation memory works correctly and Flex Messages display beautifully.

Example test conversation / ตัวอย่างทดสอบ:

User: "What food do you recommend?"
Bot: (AI response with restaurant recommendations)

User: "Show me the menu"
Bot: (Flex Message carousel with menu items)

User: "I'll take the one you recommended earlier"
Bot: (AI remembers previous recommendation!) ✅

⚠️ Important Notes / ข้อควรระวัง

  • API Keys: Never share your API keys publicly — อย่าเผยแพร่ API keys
  • Rate Limits: AI APIs have usage limits — AI API มีข้อจำกัดการใช้งาน
  • Error Handling: Always add try/catch blocks — เพิ่ม error handling เสมอ
  • Cost: AI API calls cost money — consider caching responses — API AI มีค่าใช้จ่าย

📝 Grammar Checkpoint — ตรวจสอบไวยากรณ์: Gerunds & Infinitives

ก่อนจะจบ ทบทวน Gerunds & Infinitives อีกครั้ง:

Verbs + Gerund (-ing) / กริยา + Gerund:

✅ enjoy + -ing: I enjoy building LINE bots.

✅ finish + -ing: She finished designing the Rich Menu.

✅ keep + -ing: Keep practicing your coding skills.

✅ avoid + -ing: Avoid sharing your API key publicly.

✅ consider + -ing: Consider adding image recognition.

✅ practice + -ing: I practice writing JSON every day.

Verbs + Infinitive (to + V) / กริยา + Infinitive:

✅ want + to V: I want to create an AI customer service bot.

✅ need + to V: You need to install the LINE SDK first.

✅ plan + to V: We plan to add a carousel to the menu.

✅ decide + to V: He decided to use Claude for AI responses.

✅ learn + to V: I learned to build Flex Messages this week.

✅ hope + to V: I hope to finish the project soon.

Preposition + Gerund / บุพบท + Gerund:

✅ I am interested in building AI-powered bots.

✅ She is good at designing user interfaces.

✅ We are excited about launching our new bot.

✅ He is tired of fixing JSON syntax errors.

Common Mistakes / ข้อผิดพลาดที่พบบ่อย:

❌ I enjoy to build bots. → ✅ I enjoy building bots.

❌ She wants creating a menu. → ✅ She wants to create a menu.

❌ He is interested in to learn AI. → ✅ He is interested in learning AI.

⭐ Best Practices — เทคนิคที่ดีที่สุด

💡 Tips for Advanced LINE Bots — เคล็ดลับสำหรับบอท LINE ขั้นสูง

  • Start simple: Begin with basic Flex Messages before adding AI — เริ่มจากง่ายก่อนเพิ่ม AI
  • Test thoroughly: Test every feature on your phone — ทดสอบทุกฟีเจอร์บนโทรศัพท์
  • Handle errors gracefully: If AI fails, have a fallback response — มีข้อความสำรองถ้า AI ล้ม
  • Set clear system prompts: Tell AI exactly what role to play — กำหนด system prompt ให้ชัดเจน
  • Limit conversation history: Keep only recent messages to save costs — เก็บแค่ข้อความล่าสุด
  • Monitor analytics: Check your bot's performance regularly — ตรวจสอบสถิติบอทสม่ำเสมอ

⚠️ Things to Watch Out For — สิ่งที่ต้องระวัง

  • JSON syntax: One wrong comma can break your Flex Message — comma ผิดที่เดียวพัง
  • Image sizes: Rich Menu images must be exact sizes — รูป Rich Menu ต้องขนาดที่กำหนด
  • API costs: AI API calls cost money — manage your budget — API AI มีค่าใช้จ่าย
  • User privacy: Don't store sensitive user data — อย่าเก็บข้อมูลส่วนตัวของผู้ใช้

🏆 เก่งมาก! You've Done Great!

คุณได้ฝึกสร้างฟีเจอร์ขั้นสูงของ LINE Bot แล้ว!

You have practiced building advanced LINE Bot features!

You enjoy designing Flex Messages and want to create AI-powered bots!

ตอนนี้คุณพร้อมทำแบบทดสอบแล้ว!

Now you are ready for the exam!

📄 Intro 📝 Exam 📋 Syllabus