💬 LINE Chatbot Activities — บทเรียนขั้นสูง

🎯 ยินดีต้อนรับสู่ Advanced Tutorials
Welcome to Advanced Tutorials

🇹🇭 คุณจะได้เรียนรู้

ใน tutorial นี้คุณจะอัพเกรด Echo Bot ของคุณให้กลายเป็น bot ที่ใช้งานจริงได้ — ตอบตามคีย์เวิร์ด ต้อนรับผู้ใช้ใหม่ และส่งการ์ดสวยงาม!

🇬🇧 What You Will Learn

In these tutorials you will upgrade your Echo Bot into a real-world bot — responding to keywords, welcoming new followers, and sending beautiful message cards!

🌱 Tutorial 1: Keyword Bot — ง่าย 🔍 Tutorial 2: Welcome Bot — ปานกลาง 🏆 Tutorial 3: Flex Message Bot — ยาก

🔑 Tutorial 1: Keyword Response Bot
บทที่ 1: Bot ตอบตามคีย์เวิร์ด

🤖

Keyword Response Bot — Bot ที่เข้าใจคำสั่ง

🌱 Easy / ง่าย

What you'll build: A bot that reads the user's message and gives a different reply based on the keyword. For example: "สวัสดี" → "สวัสดีครับ! ยินดีต้อนรับ! 🙏"

คุณจะสร้าง: Bot ที่อ่านข้อความผู้ใช้และตอบตามคีย์เวิร์ด

You'll learn: if/elif statements, string comparison, multiple response types

1เข้าใจ Logic — Understand the Logic

Bot อ่านข้อความของผู้ใช้ → เปรียบเทียบกับคีย์เวิร์ดที่เรากำหนด → ส่งคำตอบที่เหมาะสม ถ้าไม่ตรงคีย์เวิร์ดไหน → ส่งข้อความ default

English: The bot reads the user's message → compares it with keywords we define → sends the appropriate reply. If no keyword matches → sends a default message.

2สร้างฟังก์ชันตอบกลับ — Create the Reply Function

เราสร้างฟังก์ชัน get_reply(message) ที่รับข้อความและส่งคำตอบกลับมา

English: We create a function get_reply(message) that receives the message text and returns the reply.

# keyword_bot.py
from flask import Flask, request, abort
from linebot import LineBotApi, WebhookHandler
from linebot.exceptions import InvalidSignatureError
from linebot.models import MessageEvent, TextMessage, TextSendMessage

app = Flask(__name__)
LINE_TOKEN = 'YOUR_TOKEN'
LINE_SECRET = 'YOUR_SECRET'
line_bot_api = LineBotApi(LINE_TOKEN)
handler = WebhookHandler(LINE_SECRET)

# ฟังก์ชันตอบตามคีย์เวิร์ด / Keyword reply function
def get_reply(message):
    msg = message.lower().strip()   # แปลงเป็นตัวเล็ก
    
    if 'สวัสดี' in msg or 'hello' in msg:
        return 'สวัสดีครับ! ยินดีต้อนรับ! 🙏
Hello! Welcome!'
    
    elif 'ราคา' in msg or 'price' in msg:
        return 'สินค้าราคาเริ่มต้น 199 บาท 💰
Prices start at 199 baht.'
    
    elif 'เวลา' in msg or 'time' in msg or 'open' in msg:
        return 'เปิดทำการ: จันทร์–ศุกร์ 9:00–18:00 🕘
Open: Mon–Fri 9AM–6PM'
    
    elif 'help' in msg or 'ช่วย' in msg:
        return 'พิมพ์ได้เลย:
• สวัสดี / hello
• ราคา / price
• เวลา / time'
    
    else:  # default reply
        return f'คุณพิมพ์ว่า: "{message}"
พิมพ์ "help" เพื่อดูคำสั่ง 😊'

@app.route('/callback', methods=['POST'])
def callback():
    signature = request.headers['X-Line-Signature']
    body = request.get_data(as_text=True)
    try: handler.handle(body, signature)
    except InvalidSignatureError: abort(400)
    return 'OK'

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    reply = get_reply(event.message.text)
    line_bot_api.reply_message(
        event.reply_token,
        TextSendMessage(text=reply)
    )

if __name__ == '__main__':
    app.run(port=5000)

3ทดสอบ Bot — Test Your Bot

รัน ngrok http 5000 และ python keyword_bot.py พร้อมกัน แล้วทดสอบส่งคีย์เวิร์ดต่างๆ ใน LINE

English: Run ngrok http 5000 and python keyword_bot.py together, then test by sending different keywords in LINE.

💡 Challenge! / ท้าทาย!

ไทย: ลองเพิ่มคีย์เวิร์ดและคำตอบของคุณเอง! เช่น ชื่อร้าน เมนูอาหาร หรือคำถามที่พบบ่อยของธุรกิจจริง

English: Try adding your own keywords and replies! For example: shop name, food menu, or real business FAQ.

👋 Tutorial 2: Welcome Message Bot
บทที่ 2: Bot ส่งข้อความต้อนรับ

🎉

Welcome Message Bot — Bot ต้อนรับสมาชิกใหม่

🔍 Medium / ปานกลาง

What you'll build: A bot that detects when a new user follows it and automatically sends a personalized welcome message with their display name.

คุณจะสร้าง: Bot ที่ตรวจจับเมื่อมีคนใหม่ติดตาม และส่งข้อความต้อนรับพร้อมชื่อผู้ใช้

1เข้าใจ Follow Event — Understand Follow Events

เมื่อมีคนกด "เพิ่มเพื่อน" กับ bot ของคุณ LINE จะส่ง follow event มาที่ webhook ของคุณ เราสามารถดักจับ event นี้และส่งข้อความต้อนรับได้

English: When someone taps "Add Friend" on your bot, LINE sends a follow event to your webhook. We can catch this event and send a welcome message.

2ดึงชื่อผู้ใช้ — Get the User's Name

เราสามารถใช้ LINE API เพื่อดึงข้อมูลโปรไฟล์ของผู้ใช้ รวมถึงชื่อที่แสดง (display name)

English: We can use the LINE API to get the user's profile information, including their display name.

from linebot.models import FollowEvent, TextSendMessage

# จัดการ Follow Event — Handle Follow Event
@handler.add(FollowEvent)
def handle_follow(event):
    user_id = event.source.user_id   # รหัสผู้ใช้
    
    # ดึงโปรไฟล์ผู้ใช้ / Get user profile
    profile = line_bot_api.get_profile(user_id)
    name = profile.display_name       # ชื่อที่แสดง
    
    # สร้างข้อความต้อนรับ / Create welcome message
    welcome = (
        f'สวัสดีครับคุณ {name}! 🙏
'
        f'ยินดีต้อนรับสู่ร้านของเรา!

'
        f'Hello, {name}! 👋
'
        f'Welcome to our store!

'
        f'พิมพ์ "help" เพื่อดูคำสั่งทั้งหมด
'
        f'Type "help" to see all commands'
    )
    
    # ส่ง push message / Send push message
    line_bot_api.push_message(
        user_id,
        TextSendMessage(text=welcome)
    )

# รวม follow handler กับ message handler ที่มีอยู่แล้ว
# Add the follow handler to your existing keyword bot

💡 Push vs Reply — ต่างกันอย่างไร?

reply_message: ตอบกลับโดยใช้ reply_token (ใช้ได้ครั้งเดียวต่อ event, ฟรี)

push_message: ส่งหาผู้ใช้ตอนใดก็ได้โดยใช้ user_id (มีค่าใช้จ่ายใน production)

English: reply_message uses a reply token (free, one-time use per event). push_message can be sent anytime using user_id (costs money in production).

🎨 Tutorial 3: Flex Message Bot
บทที่ 3: Bot ส่งการ์ดสวยงาม

🃏

Flex Message Bot — Bot ส่ง Message Card

🏆 Hard / ยาก

What you'll build: A bot that responds with a beautiful card containing an image, title, description, and action buttons — perfect for a product catalog or menu.

คุณจะสร้าง: Bot ที่ส่งการ์ดสวยงามพร้อมรูปภาพ หัวข้อ คำอธิบาย และปุ่มกด

1เข้าใจ Flex Message — Understand Flex Messages

Flex Message สร้างด้วย JSON ที่อธิบายโครงสร้างของการ์ด — เหมือนเขียน HTML แต่ใน LINE มีส่วนประกอบหลัก: header, hero, body, footer

English: Flex Messages are built with JSON that describes the card structure — like writing HTML but inside LINE. Main parts: header, hero, body, footer.

2สร้าง Flex Message — Build the Flex Message

from linebot.models import (
    MessageEvent, TextMessage, FlexSendMessage,
    BubbleContainer, BoxComponent, TextComponent,
    ImageComponent, ButtonComponent, URIAction
)

def make_product_card(name, price, image_url, buy_url):
    # สร้างการ์ดสินค้า / Create a product card
    
    bubble = BubbleContainer(
        hero=ImageComponent(           # รูปสินค้า
            url=image_url,
            size='full',
            aspect_ratio='20:13',
            action=URIAction(uri=buy_url)
        ),
        body=BoxComponent(
            layout='vertical',
            contents=[
                TextComponent(         # ชื่อสินค้า
                    text=name,
                    weight='bold',
                    size='xl'
                ),
                TextComponent(         # ราคา
                    text=f'฿{price}',
                    size='lg',
                    color='#FF6B6B'
                )
            ]
        ),
        footer=BoxComponent(
            layout='vertical',
            contents=[
                ButtonComponent(       # ปุ่มซื้อ
                    action=URIAction(
                        label='🛒 Buy Now / ซื้อเลย',
                        uri=buy_url
                    ),
                    style='primary',
                    color='#00B900'
                )
            ]
        )
    )
    
    return FlexSendMessage(
        alt_text=f'Product: {name}',
        contents=bubble
    )

# ส่งการ์ดเมื่อผู้ใช้พิมพ์ "สินค้า" หรือ "product"
@handler.add(MessageEvent, message=TextMessage)
def handle_flex(event):
    msg = event.message.text.lower()
    
    if 'สินค้า' in msg or 'product' in msg:
        card = make_product_card(
            name='Thai Tea Cake Box 🍰',
            price='299',
            image_url='https://example.com/product.jpg',
            buy_url='https://example.com/buy'
        )
        line_bot_api.reply_message(event.reply_token, card)
    else:
        line_bot_api.reply_message(
            event.reply_token,
            TextSendMessage(text=get_reply(event.message.text))
        )

⚠️ Image URLs / URL ของรูปภาพ

ไทย: URL รูปภาพต้องเป็น HTTPS เท่านั้น LINE จะไม่แสดงรูปที่ใช้ HTTP

English: Image URLs must use HTTPS only. LINE will not display images served over HTTP.

📋 Reference — ตารางอ้างอิง

Method / เมธอด	ใช้เมื่อ / Use When	Example
`reply_message()`	ตอบกลับข้อความที่รับมา Reply to a received message	`line_bot_api.reply_message(event.reply_token, msg)`
`push_message()`	ส่งหาผู้ใช้ตอนใดก็ได้ Send to user anytime	`line_bot_api.push_message(user_id, msg)`
`get_profile()`	ดึงข้อมูลโปรไฟล์ Get user profile data	`profile = line_bot_api.get_profile(user_id)`
`TextSendMessage`	ส่งข้อความธรรมดา Send plain text	`TextSendMessage(text="Hello!")`
`FlexSendMessage`	ส่ง message card Send a rich card	`FlexSendMessage(alt_text=..., contents=bubble)`

Event Type	เมื่อไหร่ / When	Handler
`MessageEvent`	ผู้ใช้ส่งข้อความ / User sends a message	`@handler.add(MessageEvent, message=TextMessage)`
`FollowEvent`	มีคนติดตาม / Someone follows	`@handler.add(FollowEvent)`
`UnfollowEvent`	มีคนเลิกติดตาม / Someone unfollows	`@handler.add(UnfollowEvent)`
`PostbackEvent`	ผู้ใช้กดปุ่ม / User taps a button	`@handler.add(PostbackEvent)`

🏆 Best Practices — แนวทางปฏิบัติที่ดี

🇹🇭 สิ่งที่ควรทำ

เก็บ token ไว้ใน environment variable ไม่ใช่ในโค้ด
ตรวจสอบ signature ทุกครั้งก่อนประมวลผล
ตอบกลับทันที (return 'OK') แม้ยังไม่ได้ประมวลผล
ใส่ default reply เสมอ ถ้าไม่มีคีย์เวิร์ดตรง
ทดสอบด้วย ngrok ก่อน deploy จริง

🇬🇧 Best Practices

Store tokens in environment variables, not in code
Always verify the signature before processing
Return 'OK' immediately (LINE expects a fast response)
Always include a default reply for unrecognised input
Test with ngrok before deploying to a real server

🏆 คุณเป็น LINE Bot Developer แล้ว! / You are a LINE Bot Developer!

คุณสร้าง bot ที่ตอบตามคีย์เวิร์ด ต้อนรับสมาชิกใหม่ และส่งการ์ดสวยงามได้แล้ว 🎉

You built a bot that responds to keywords, welcomes new followers, and sends beautiful Flex Message cards! 🎉

← Back to Intro 📝 Take the Exam / ทำข้อสอบ →

🎯 ยินดีต้อนรับสู่ Advanced TutorialsWelcome to Advanced Tutorials