🤖 AI + LINE Activities — กิจกรรม AI LINE Bot

💬 Tutorial 1: AI Auto-Reply LINE Bot
บทเรียนที่ 1: LINE Bot ที่ใช้ AI ตอบอัตโนมัติ

🎯

Set Up a LINE Bot That Uses AI for Auto-Replies 🌱 Easy

ตั้งค่า LINE Bot ที่ใช้ AI ตอบอัตโนมัติ

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

วิธีสร้าง LINE Messaging API channel
การตั้งค่า webhook ที่รับข้อความจาก LINE
การเชื่อมต่อ AI เพื่อสร้างคำตอบอัตโนมัติ
การใช้ relative clauses เพื่ออธิบายส่วนประกอบของบอท

What You'll Learn:

Create your first AI-powered LINE bot that automatically replies to messages! You'll learn about webhooks, APIs, and how to connect AI that generates smart responses.

1สร้าง LINE Channel — Create a LINE Channel

ไปที่ developers.line.biz และสร้าง Messaging API channel ใหม่ นี่คือช่องทางที่บอทของคุณจะใช้สื่อสาร

English: Go to developers.line.biz and create a new Messaging API channel. This is the channel that your bot will use to communicate.

// Steps to create a LINE channel:
// ขั้นตอนการสร้าง LINE channel:

Go to developers.line.biz
Log in with your LINE account
Create a new Provider (a provider is a company/person that owns bots)
Create a Messaging API channel
Copy the Channel Access Token (which you will need later)

2สร้าง Webhook Server — Create a Webhook Server

สร้างเซิร์ฟเวอร์ง่ายๆ ที่รับข้อความจาก LINE Webhook คือ URL ที่ LINE ส่งข้อมูลไปให้เมื่อมีคนส่งข้อความ

English: Create a simple server that receives messages from LINE. A webhook is a URL that LINE sends data to when someone sends a message.

// Simple webhook server (Node.js + Express)
// เซิร์ฟเวอร์ webhook ง่ายๆ

const express = require('express');
const app = express();
app.use(express.json());

// This is the endpoint that receives LINE messages
app.post('/webhook', async (req, res) => {
    const events = req.body.events;

    for (const event of events) {
        if (event.type === 'message' && event.message.type === 'text') {
            const userText = event.message.text;
            console.log('User who sent message:', userText);

            // We will add AI here in the next step!
            await replyMessage(event.replyToken, 'Hello! I received: ' + userText);
        }
    }
    res.sendStatus(200);
});

app.listen(3000);

3เพิ่ม AI — Add AI Auto-Reply

เชื่อมต่อ AI ที่สร้างคำตอบอัจฉริยะ แทนที่จะแค่ echo ข้อความกลับ ให้ส่งไปให้ AI ประมวลผลก่อน

English: Connect AI that generates intelligent responses. Instead of just echoing the message back, send it to AI for processing first.

// Add AI that generates smart replies
// เพิ่ม AI ที่สร้างคำตอบอัจฉริยะ

async function getAIReply(userMessage) {
    // The system prompt, which tells AI how to behave
    const systemPrompt = `You are a friendly LINE bot that helps
Thai users. Reply in the same language that the user writes in.
Keep responses short (under 200 characters).`;

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            model: 'gpt-4',
            messages: [
                { role: 'system', content: systemPrompt },
                { role: 'user', content: userMessage }
            ]
        })
    });

    const data = await response.json();
    return data.choices[0].message.content;
}

💡 Grammar in Code Comments — ไวยากรณ์ในคอมเมนต์โค้ด

Notice how we use relative clauses in comments:

"The endpoint that receives LINE messages" — defining clause
"The system prompt, which tells AI how to behave" — non-defining clause
"The user who sent the message" — defining clause for people

📖 Tutorial 2: FAQ Bot with Natural Language
บทเรียนที่ 2: บอท FAQ ที่เข้าใจภาษาธรรมชาติ

📋

Create a FAQ Bot That Understands Natural Language 🔍 Medium

สร้างบอท FAQ ที่เข้าใจภาษาธรรมชาติ

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

วิธีสร้างบอทที่ตอบคำถามที่พบบ่อย (FAQ)
การใช้ AI เพื่อเข้าใจคำถามที่ถูกถามในหลายรูปแบบ
การจัดการ conversation flow
การเขียน system prompt ที่มีประสิทธิภาพ

What You'll Learn:

Build a FAQ bot that understands questions even when users ask in different ways! The AI, which processes natural language, can match questions to the right answers.

1เตรียมข้อมูล FAQ — Prepare Your FAQ Data

สร้างรายการคำถามและคำตอบที่ผู้ใช้มักถามบ่อย AI จะใช้ข้อมูลนี้เพื่อตอบคำถามที่คล้ายกัน

English: Create a list of questions and answers that users frequently ask. The AI will use this data to answer similar questions.

// FAQ data that the bot will use
// ข้อมูล FAQ ที่บอทจะใช้

const faqData = `
FAQ for Our Online Shop:

Q: What are your business hours?
A: We are open Monday-Saturday, 9 AM - 6 PM.

Q: How long does shipping take?
A: Shipping takes 2-3 business days within Thailand.

Q: What is your return policy?
A: Items that are unused can be returned within 7 days.

Q: Do you accept credit cards?
A: Yes, we accept Visa, Mastercard, and PromptPay.

Q: How can I track my order?
A: Users who have placed an order will receive a tracking
   number via LINE within 24 hours.
`;

2สร้าง System Prompt — Create an Intelligent System Prompt

เขียน system prompt ที่บอก AI ว่าควรตอบอย่างไร ใส่ข้อมูล FAQ เข้าไปเพื่อให้ AI มีความรู้

English: Write a system prompt that tells the AI how to respond. Include the FAQ data so the AI has the knowledge it needs.

// System prompt that makes AI a smart FAQ bot
// System prompt ที่ทำให้ AI เป็นบอท FAQ อัจฉริยะ

const systemPrompt = `You are a helpful customer service bot
for a Thai online shop. You answer questions that customers ask
about our services.

Rules:
1. Answer based on the FAQ data which is provided below.
2. If a customer asks something that is not in the FAQ, say
   "I'm not sure. Let me connect you with a staff member who
   can help you."
3. Be friendly and concise.
4. Reply in the language that the user writes in (Thai or English).

${faqData}`;

3จัดการคำถามหลายรูปแบบ — Handle Multiple Question Formats

AI ที่ประมวลผลภาษาธรรมชาติ จะเข้าใจคำถามแม้จะถูกถามในรูปแบบต่างๆ ลองทดสอบ:

English: The AI, which processes natural language, will understand questions even when they are asked in different ways. Try testing:

Test Questions (ทดสอบคำถาม):

User: "When are you open?" → AI understands: Business hours
User: "เปิดกี่โมง?" → AI understands: เวลาทำการ
User: "How fast is delivery?" → AI understands: Shipping time
User: "ส่งของกี่วันถึง?" → AI understands: ระยะเวลาจัดส่ง
User: "Can I return this?" → AI understands: Return policy
User: "คืนของได้ไหม?" → AI understands: นโยบายคืนสินค้า

4เพิ่ม Fallback Response — Add a Fallback Response

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

English: When AI cannot answer, send a fallback message that directs the user to a staff member who can help.

// Fallback for questions that AI cannot answer
// คำตอบสำรองสำหรับคำถามที่ AI ตอบไม่ได้

const fallbackMessage = `I'm sorry, I don't have information
about that. Please contact our staff who can help you:
📞 Line: @ourshop
📧 Email: support@ourshop.com

ขอโทษค่ะ ไม่มีข้อมูลเรื่องนี้ กรุณาติดต่อพนักงานที่สามารถช่วยคุณได้:
📞 Line: @ourshop
📧 Email: support@ourshop.com`;

🔍 Tutorial 3: Bilingual AI LINE Bot
บทเรียนที่ 3: สร้างบอท LINE สองภาษาด้วย AI

🌏

Build a Bilingual LINE Bot (Thai/English) Using AI 🏆 Hard

สร้าง LINE Bot สองภาษา (ไทย/อังกฤษ) ด้วย AI

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

การสร้างบอทที่ตรวจจับภาษาอัตโนมัติ
การสร้าง conversation flow สำหรับหลายภาษา
การใช้ AI ที่แปลและตอบกลับได้ทั้งสองภาษา
การออกแบบ UX ที่ดีสำหรับผู้ใช้หลายภาษา

What You'll Learn:

Build an advanced LINE bot that automatically detects the language that the user writes in and responds in the same language! This bot, which uses AI for translation and understanding, provides a seamless bilingual experience.

1ตรวจจับภาษา — Language Detection

ใช้ AI เพื่อตรวจจับภาษาที่ผู้ใช้พิมพ์ แล้วตอบกลับในภาษาเดียวกัน ไม่ต้องเขียนโค้ดตรวจจับเอง!

English: Use AI to detect the language that the user types in, then reply in the same language. No need to write detection code yourself!

// System prompt for bilingual bot
// ผู้ใช้ที่พิมพ์ภาษาไทย จะได้รับคำตอบภาษาไทย

const bilingualPrompt = `You are a bilingual assistant
that serves users who speak Thai or English.

Rules:
1. Detect the language that the user writes in.
2. Always reply in the SAME language that the user uses.
3. If a user writes in Thai, reply entirely in Thai.
4. If a user writes in English, reply entirely in English.
5. If a user mixes languages, reply in the language
   which appears more frequently in their message.
6. For users who ask for translations, provide both
   Thai and English versions.`;

2เพิ่ม Conversation Memory — Add Conversation Memory

สร้างระบบจำบริบทการสนทนา เพื่อให้บอทจำสิ่งที่ผู้ใช้พูดก่อนหน้าได้

English: Create a conversation memory system so the bot remembers what the user said before. Users who have ongoing conversations will get more relevant answers.

// Conversation memory that stores chat history
// ระบบจำบริบทที่เก็บประวัติแชท

const conversations = {};  // Store history per user

function addMessage(userId, role, content) {
    if (!conversations[userId]) {
        conversations[userId] = [];
    }
    conversations[userId].push({ role, content });

    // Keep only last 10 messages (which saves memory)
    if (conversations[userId].length > 10) {
        conversations[userId] = conversations[userId].slice(-10);
    }
}

async function getBilingualReply(userId, userMessage) {
    addMessage(userId, 'user', userMessage);

    const messages = [
        { role: 'system', content: bilingualPrompt },
        ...conversations[userId]
    ];

    const response = await callAI(messages);
    addMessage(userId, 'assistant', response);

    return response;
}

3เพิ่ม Rich Menu — Add a Rich Menu

สร้าง Rich Menu ที่ให้ผู้ใช้เลือกภาษาหรือฟังก์ชันที่ต้องการ Rich Menu คือเมนูที่แสดงที่ด้านล่างของแชท

English: Create a Rich Menu that lets users choose a language or function. A Rich Menu, which appears at the bottom of the chat, makes the bot easier to use.

// Rich Menu structure (JSON)
// โครงสร้าง Rich Menu

{
    "size": { "width": 2500, "height": 843 },
    "areas": [
        {
            "bounds": { "x": 0, "y": 0, "width": 833, "height": 843 },
            "action": { "type": "message", "text": "🇹🇭 Thai Mode" }
        },
        {
            "bounds": { "x": 833, "y": 0, "width": 834, "height": 843 },
            "action": { "type": "message", "text": "🇬🇧 English Mode" }
        },
        {
            "bounds": { "x": 1667, "y": 0, "width": 833, "height": 843 },
            "action": { "type": "message", "text": "🔄 Translate / แปล" }
        }
    ]
}

4Deploy และทดสอบ — Deploy and Test

Deploy บอทขึ้น server แล้วทดสอบด้วยข้อความทั้งภาษาไทยและอังกฤษ

English: Deploy the bot to a server and test with messages in both Thai and English. Test users who switch between languages during the conversation.

Test Conversation (ทดสอบการสนทนา):

User: "สวัสดีครับ ขอถามหน่อย"
Bot: "สวัสดีค่ะ! ยินดีช่วยเหลือค่ะ มีอะไรให้ช่วยคะ?"

User: "Hello, I need help"
Bot: "Hello! I'd be happy to help. What can I do for you?"

User: "Translate 'ขอบคุณ' to English"
Bot: "'ขอบคุณ' means 'Thank you' in English."

📝 Grammar Checkpoint — ตรวจสอบไวยากรณ์: Relative Clauses

ทบทวน Relative Clauses (that/which/who) กับตัวอย่างจาก LINE Bot:

Defining Clauses (ไม่ใส่ comma / ข้อมูลจำเป็น):

✅ A webhook is a URL that receives data from LINE.

✅ Users who send messages will get auto-replies.

✅ The API key that you created must be kept secret.

ตัดออกไม่ได้ เพราะความหมายจะเปลี่ยน — ใช้ that/which/who ได้

Non-Defining Clauses (ใส่ comma / ข้อมูลเพิ่มเติม):

✅ LINE, which has 54 million Thai users, is perfect for bots.

✅ The developer, who is from Thailand, speaks both languages.

✅ The AI model, which was trained on multilingual data, understands Thai.

ตัดออกได้ ความหมายไม่เปลี่ยน — ใช้ which/who เท่านั้น (ห้ามใช้ that)

Practice / ฝึกหัด — เลือก that, which, หรือ who:

1. A chatbot is a program ___ responds to messages. → that (defining)

2. Our bot, ___ uses GPT-4, is very smart. → which (non-defining, comma)

3. Customers ___ need help can message the bot. → who (defining, people)

4. The webhook, ___ runs 24/7, never sleeps. → which (non-defining, comma)

5. The developer ___ created this bot is Thai. → who (defining, person)

⭐ Best Practices — เทคนิคสำหรับ AI LINE Bots

💡 Tips for Building Great AI LINE Bots — เคล็ดลับสร้าง AI LINE Bot ที่ดี

Write clear system prompts: A prompt that is specific will give better results — เขียน system prompt ที่ชัดเจน
Keep responses short: LINE messages that are too long are hard to read — ตอบสั้นๆ ข้อความ LINE ที่ยาวเกินอ่านยาก
Handle errors gracefully: Users who encounter errors should see a friendly message — จัดการ error อย่างสุภาพ
Test in both languages: A bot that only works in English will frustrate Thai users — ทดสอบทั้งสองภาษา
Protect API keys: Keys that are exposed can be stolen and misused — ป้องกัน API key

⚠️ Common Mistakes — ข้อผิดพลาดที่พบบ่อย

Forgetting error handling: A bot that crashes gives a bad user experience — อย่าลืมจัดการ error
Not setting response limits: AI responses that are too long get cut off on LINE — จำกัดความยาวคำตอบ
Exposing API keys: Never put keys in code that is pushed to GitHub — อย่าเผยแพร่ API key บน GitHub
Ignoring Thai language: Bots that don't support Thai will lose most Thai users — ต้องรองรับภาษาไทย

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

คุณได้ฝึกสร้าง AI LINE Bot และ relative clauses แล้ว!

You have practiced building AI LINE bots and using relative clauses!

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

Now you are ready for the exam!

💬 Tutorial 1: AI Auto-Reply LINE Botบทเรียนที่ 1: LINE Bot ที่ใช้ AI ตอบอัตโนมัติ

Set Up a LINE Bot That Uses AI for Auto-Replies 🌱 Easy

ตั้งค่า LINE Bot ที่ใช้ AI ตอบอัตโนมัติ

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

What You'll Learn:

1สร้าง LINE Channel — Create a LINE Channel

2สร้าง Webhook Server — Create a Webhook Server

3เพิ่ม AI — Add AI Auto-Reply

💡 Grammar in Code Comments — ไวยากรณ์ในคอมเมนต์โค้ด

📖 Tutorial 2: FAQ Bot with Natural Languageบทเรียนที่ 2: บอท FAQ ที่เข้าใจภาษาธรรมชาติ

Create a FAQ Bot That Understands Natural Language 🔍 Medium

สร้างบอท FAQ ที่เข้าใจภาษาธรรมชาติ

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

What You'll Learn:

1เตรียมข้อมูล FAQ — Prepare Your FAQ Data

2สร้าง System Prompt — Create an Intelligent System Prompt

3จัดการคำถามหลายรูปแบบ — Handle Multiple Question Formats

4เพิ่ม Fallback Response — Add a Fallback Response

🔍 Tutorial 3: Bilingual AI LINE Botบทเรียนที่ 3: สร้างบอท LINE สองภาษาด้วย AI

Build a Bilingual LINE Bot (Thai/English) Using AI 🏆 Hard

สร้าง LINE Bot สองภาษา (ไทย/อังกฤษ) ด้วย AI

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

What You'll Learn:

1ตรวจจับภาษา — Language Detection

2เพิ่ม Conversation Memory — Add Conversation Memory

3เพิ่ม Rich Menu — Add a Rich Menu

4Deploy และทดสอบ — Deploy and Test

📝 Grammar Checkpoint — ตรวจสอบไวยากรณ์: Relative Clauses

⭐ Best Practices — เทคนิคสำหรับ AI LINE Bots

💡 Tips for Building Great AI LINE Bots — เคล็ดลับสร้าง AI LINE Bot ที่ดี

⚠️ Common Mistakes — ข้อผิดพลาดที่พบบ่อย

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

💬 Tutorial 1: AI Auto-Reply LINE Bot
บทเรียนที่ 1: LINE Bot ที่ใช้ AI ตอบอัตโนมัติ

📖 Tutorial 2: FAQ Bot with Natural Language
บทเรียนที่ 2: บอท FAQ ที่เข้าใจภาษาธรรมชาติ

🔍 Tutorial 3: Bilingual AI LINE Bot
บทเรียนที่ 3: สร้างบอท LINE สองภาษาด้วย AI