สร้าง Python Line Chatbot ด้วย Messages ตอบกลับรูปแบบต่าง ๆ

S T A C K P Y T H O N

สร้าง Python Line Chatbot ด้วย Messages ตอบกลับรูปแบบต่าง ๆ


สำหรับบทความนี้เราจะมาเรียนรู้กันเกี่ยวกับ Messages ของ Line Chatbot  ด้วยภาษาไพธอน ในการตอบกลับให้กับผู้ติดต่อซึ่ง Message ที่ Line Chatbot นั้นสามารถตอบกลับได้หลากหลายรูปเเบบซึ่งบาง Message นั้นมีเพียง Line Chatbot เท่านั้นที่สามารถตอบในรูปแบบนี้ได้ ในบทความนี้เราจะมาสอนวิธีการที่จะทำให้ Chatbot ตอบกลับไปยังผู้ติดต่อในรูปแบบต่าง  ๆ


จุดประสงค์

  1. เข้าใจเกี่ยวกับ Message ของ Line Chatbot ที่ตอบกลับ
  2. รู้จัก Message ในรูปแบบต่างของ Line Chatbot
  3. สามารถใช้งาน Message ที่ต้องการร่วมกับ Line Chatbot ด้วยภาษา Python



ชนิดของ Message ของ Chatbot

  • ข้อความปกติ (Text message)
  • ข้อความแบบสติ๊กเกอร์ (Sticker message)
  • ข้อความเเบบรูปภาพ (Image message)
  • ข้อความเบบเสียง (Audio message)
  • ข้อความแบบวีดีโอ (Video message)
  • ข้อความเเบบระบุสถานที่ (Location message)
  • ข้อความเเบบเทมเพลต (Template messages)


มาทำความรู้จักและวิธีใช้ Message กัน

ก่อนอื่นเลย Chatbot จะต้องใช้งานร่วมกับ Dialogflow เพราะใน Messages ต่าง ๆ ที่เราจะได้รู้จักกันในว่านี้จะถูกเขียนไว้ใน Dialogflow ซึ่งอยู่ในช่องของ Custom payload วิธีค้นหา Custom payload ให้เราเปิดตัว Chatbot ของเราใน Dialogflow ขึ้นมาก่อนจากให้ทำการสร้าง Intent ขึ้นในช่องของ Custom payload จะอยู่ในส่วนของ Responses ซึ่งในช่องของ Responses จะมี TextResponses มาให้เราเเล้วในส่วนของ Default ให้เราทำการปิดทิ้ง เเละกดไปที่ AddResponses จากนั้นเลือกที่ Custom payload จากนั้นจะมีช่องของ Custom payload เด้งขึ้นมาก็ให้เราสามารถเขียนโค้ด ตามเเบบที่ต้องการลงไปได้เลย เเละโค้ด Message ต่างๆจะอยู่ในรูปแบบ Json ในกรณีที่เราเลือก Default จะมี 2 แบบคือ Custom payload, TextResponses เเต่หากว่าเราเลือกเป็น Line ไว้เมื่อกดจะมีทั้งหมด 5 แบบคือ Text Response, Image, Card, Quick Replies, Custom Payload


Dialogflow (Photo by: Dialogflow Documentation)


ส่วนของ Default

  • TextResponses : เป็นช่องที่จะใช้ในการเขียน Text ส่งกลับไปยังผู้ติดต่อ สำหรับใครที่ต้องการส่งเป็นข้อความปกติก็สามารถเลือกใช้ได้ได้เลย
  • Custom Payload : เป็นช่องที่สำคัญมากในบทความนี้ เพราะเราต้องใช้มันในการใช้สร้าง Message ในรูปเเบบต่าง ๆ จากที่กล่าวไปข้างต้น 


ส่วนของ Line

  • TextResponses : เป็นข้อความที่เป็น Text คุยกันเเบบปกติ
  • Image : เป็นการตอบกลับไปยังผู้ติดต่อยังด้วยรูป โดยจะมีช่องให้กรอก URL ของไฟล์รูปที่ต้องการ
  • Card Card : เป็นการตอบกลับไปยังผู้ติดต่อด้วยการ์ด ซึ่งจะมีช่องให้กรอก URL ของไฟล์รูปที่ใช้เป็นรูปของการ์ด
  • Quick Replies : เป็นการตอบกลับด้วยข้อความพร้อมทั้งปุ่ม
  • Custom Payload : เป็นช่องที่ใช้เขียนโค้ด Message มากที่สุดในบทความนี้


"Chatbot ที่ผมสร้างขึ้นนั้นมีชื่อว่า BotTest ซึ่งในการเเสดงเเต่ละ Message นั้นผมได้กำหนดไว้หมดเเล้ว Message ผมมี 1-7 เรียงตามชนิด Message ข้างต้น"


Message 1: ข้อความแบบปกติ (Text Message)



โค้ดที่ใช้สำหรับ Message 1

{
  "line": {
    "text": "ข้อความที่ต้องการ",
    "type": "text"
  }
}

  •   type : กำหนดประเภทของการตอบกลับของ Chatbot แบบ Text
  •   text : ข้อความแสดงได้สูงสุด 2,000 ตัวอักษร
  • กรณีที่เป็น Message 1 อาจจะเปลี่ยนจากโค้ด ไปใช้เป็น TextResponses ซึ่งค่อนข้างง่ายกว่า


Message 2: ข้อความแบบสติ๊กเกอร์ (Sticker Message)



โค้ดที่ใช้สำหรับ Message 2

{
  "line": {
    "stickerId": "52002735",
    "type": "sticker",
    "packageId": "11537"
  }
}


Message 3: ข้อความแบบรูปภาพ (Image Message)



โค้ดที่ใช้สำหรับ Message 3

{
  "line": {
    "previewImageUrl": "ลิ้งค์ภาพ",
    "originalContentUrl": "ลิ้งค์ภาพ",
    "type": "image"
  }
}
  •  type : เป็นตัวกำหนดประเภทของการตอบกลับแบบ Image
  •  originalContenUrl : URL ของไฟล์รูปภาพต้นฉบับ เป็น https และมีขนาดไม่เกิน 1 MB

  •  previewImageUrl : เหมือนกับ  originalContenUrl 


Message 4: ข้อความแบบเสียง (Audio Message)



โค้ดที่ใช้สำหรับ Message 4

{
  "line": {
    "duration": 10000,
    "type": "audio",
    "originalContentUrl": "ลิ้งค์เสียง"
  }
}
  •  type : เป็นตัวกำหนดประเภทของการตอบกลับแบบ Audio
  •  originalContenUrl  URL ของไฟล์เสียง
  •  duration : ความยาวของไฟล์เสียง หน่วยเป็น milliseconds


Message 5: ข้อความแบบวิดีโอ (Video Message)




โค้ดที่ใช้สำหรับ Message 5

{
  "line": {
    "type": "video",
    "originalContentUrl": "ลิ้งค์วีดีโอ",
    "previewImageUrl": "ลิ้งค์ภาพ"
  }
}
  •   type  : เป็นตัวกำหนดประเภทของการตอบกลับแบบ Video
  •   originalContentUrl : URL ของไฟล์วิดีโอ เเละเป็น HTTPS และมีขนาดไม่เกิน 10 MB
  •   previewImageUrl : URL ของไฟล์รูปภาพที่ต้องการใช้แสดงผล


Message 6: ข้อความแบบระบุสถานที่ (Location Message)



โค้ดที่ใช้สำหรับ Message 6

{
  "line": {
    "address": "2194 ถนน เจริญกรุง แขวง วัดพระยาไกร เขตบางคอแหลม กรุงเทพมหานคร 101200",
    "title": "เอเชียทีค เดอะ ริเวอร์ฟร้อนท์",
    "latitude": 13.704435,
    "type": "location",
    "longitude": 100.503212
  }
}
  •  type : เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ Location
  •  title : ชื่อสถานที่
  •  address : ที่อยู่ของสถานที่นั้น ๆ
  •  latitude : ตำแหน่งละติจูดของสถานที่นั้น ๆ
  •  longitude : ตำแหน่งลองจิจูดของสถานที่นั้น ๆ


Message 7: ข้อความแบบเทมเพลต (Template Message)



โค้ดที่ใช้สำหรับ Message 7

{
  "line": {
    "altText": "This is a buttons template",
    "type": "template",
    "template": {
      "text": "STACKPYTHON",
      "imageBackgroundColor": "#FFFFFF",
      "thumbnailImageUrl": "https://stackpython.co/media/course/%E0%B9%80%E0%B8%A3%E0%B8%A2%E0%B8%99-django-course.jpg",
      "defaultAction": {
        "type": "uri",
        "uri": "https://stackpython.co/course/python-web-development-with-django",
        "label": "View detail"
      },
      "imageSize": "cover",
      "title": "Python Web Development with Django",
      "imageAspectRatio": "rectangle",
      "actions": [
        {
          "type": "uri",
          "uri": "https://stackpython.co/course/python-web-development-with-django",
          "label": "สั่งคอร์ส"
        }
      ],
      "type": "buttons"
    }
  }
}
  •   type : ประเภทของ Template แบบ Button
  •   thumbnailImageUrl : URL ของไฟล์รูปภาพ https และมีขนาดไม่เกิน 1 MB
  •   imageAspectRatio : ส่วนของภาพมีค่าเป็นสี่เหลี่ยมจตุรัส
  •   imageSize : ขนาดรูปภาพมีค่าเป็น Cover
  •   imageBackgroundColor : สีพื้นหลังของรูปภาพ
  •   title : หัวเรื่อง จำนวนตัวอักษรสูงสุด 40 ตัวอักษร
  •   defaultAction : Action ที่จะทำงานเมื่อถูกกด


ตัวอย่างการสมัคร DialogFlow พร้อมใส่ Message ให้ Chatbot ตอบกลับไปยังผู้ติดต่อ

ก่อนอื่นให้การ สมัครใช้งาน DialogFlow จากนั้นให้ทำการ Login เข้าใช้งาน



กดเลือกที่ Create Agent เพื่อเป็นการสร้าง Chatbot ขึ้นมา เลือกตรง DEFAULT LANGUAGE เป็น Thai-th และ DEFAULT TIME ZONE ให้เลือกเป็น (GMT+7:00) Asia/Bangkok ตามด้วยชื่อที่เราต้องการลงในช่อง GOOGLE PROJECT แล้วกดที่ CREATE เพื่อเริ่มสร้างได้เลย



เมื่อสร้างมาแล้วในตัว Dialogflow จะสร้าง Intent มาให้เราแล้ว 2 อันนั้นคือ นั้นคือ Default Fallback Intent และ Default Welcome Intent ให้เราสร้าง Intent ขึ้นมาเพิ่มด้วยการกดที่ CREATE INTENT จากนั้นให้เราทำการตั้งชื่อ Intent นั้นด้วยการกรอกที่ช่องบนสุด “Intent name” จากนั้นให้เลื่อนลงมาดูที่ Training phrases แล้วกด ADD TRAINING PHRASES จากนั้นจะมีช่องข้อความเด้งขึ้นมาให้กรอกซึ่งตรงที่จะเป็นการกำหนดกลุ่มคำถามที่เราต้องการ เช่น หากเรากรอกคำว่า “หิว” เข้าไป เมื่อผู้ติดติดพิมพ์ คำว่าหิวเข้ามา Intent นี้ก็จะถูกทำงาน ซึ่งตรงนี้ผมจะลองทำตัวอย่าง Message 6 : ข้อความแบบระบุสถานที่ (Location Message) โดยกลุ่มคำถามผมจะใช้เป็นคำว่า “แผนที่” เมื่อกำหนดเสร็จแล้วให้เราเลื่อนต่อไปยัง Responses จากนั้นกด ADD RESPONSE เพื่อสร้างข้อความตอบกลับ ให้ดูเลือก DEFAULT จะมี Text Responses สร้างมาไว้ให้เราอยู่แล้วแต่ครั้งนี้เราไม่ได้ใช้งาน Text Responses ให้ทำการลบออกไปได้เลยด้วยการคิดที่ Icon ถังขยะแล้วกด ADD RESPONSES เลือก Custom Payload จากนั้นคัดลอกโค้ด Message 6 มาวางไว้ได้เลย แล้วกดที่ SAVE ปุ่มสีฟ้าด้านบน




นำ DialogFlow มาเชื่อมต่อกับ Line

เริ่มจากการเข้าใช้งาน โดยสมัครใช้งาน Line Business ID ทำการ Login ด้วย Line จากนั้นให้  Create Provider ขึ้นมาเลือกที่ Create a Message API channel




จากนั้นทำการใส่รายละเอียดที่ต้องการลงไปซึ่งเมื่อเสร็จเเล้วเราก็จะได้ Line Bot มาหนึ่งตัว



ให้เราเปิดเข้าไปที่ Integrations ใน DialogFlow จากนั้นเลื่อนลงมาและไปเลือกที่ Line จากนั้นกรอกรายละเอียดโดยดูจาก Line Developer ด้านบน




เมื่อกรอกเสร็จให้กดที่ START เพื่อเป็นการเริ่มใช้งานทั้งนี้หากไม่เข้าใจในส่วนไหนสามารถดูได้ในลิ้งค์ด้านล่างเลยครับ


ลิ้งค์วิดีโอที่เกี่ยวข้อง

ซีรีย์ Python Chatbot :

สอน Python Chatbot Ep.1 -  ทำความรู้จักกับ Chatbot

สอน Python Chatbot Ep.2 - สมัครใช้งาน Line Developer

สอน Python Chatbot Ep.3 – ใช้งาน DialogFlow

สอน Python Chatbot Ep.4 – Flask

สอน Python Chatbot Ep.5 - Database, Firebase, Google Sheet

หรือสามารถดูได้เป็น List ซีรีย์ Python Line Chatbot


ทางเรา STACKPYTHON คาดหวังว่าทุกคนที่อ่านบทความนี้จบ จะสามารถสร้าง Line Chatbot ด้วย Messages รูปแบบต่าง ๆ ในเบื้องต้นกันได้ครับ และสามารถศึกษาและรับชมได้เพิ่มเติมในช่องยูทูปของ STACKPYTHON กับซีรีย์ สร้าง Line Chatbot ด้วยภาษา Python

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

Nu STACKPYTHON

Follow us on

Medium: STACKPYTHON

Youtube: STACKPYTHON

Facebook: STACKPYTHON


| Like | Comment | Share | >> STACKPYTHON 

                  

>> 📒Python Line Chatbot full course 2021



กิจกรรมที่กำลังจะมาถึง

ไม่พลาดกิจกรรมเด็ด ๆ ที่น่าสนใจ



STACKPYTHON

Full Stack Python Developers.

Focusing On

Partner