วันศุกร์ที่ 26 ตุลาคม พ.ศ. 2561

วิธีใช้ Message objects เพิ่มลูกเล่นในการตอบกลับของ Line บน Dialogflow ด้วย Custom payload

Posted on  

1


          ในบทความก่อนหน้านี้ เราได้ทำการ integrate Line เข้ากับ Dialogflow ไปแล้ว ส่งผลให้ความสะดวกสบายในการคัดกรองข้อความเพิ่มขึ้น แต่กระนั้นก็ยังมีข้อจำกัดอยู่ นั่นคือ Responses ของ Dialogflow ไม่สามารถส่งสติกเกอร์ตอบกลับได้..... "อ้าว! แล้วถ้าเราอยากส่งสติกเกอร์ตอบกลับล่ะ จะทำยังไงดี" .....ไม่เป็นไรทาง Dialogflow มีเปิดช่องทาง Custom payload ให้เราได้ customize ข้อความตอบกลับด้วย JSON เพื่อปรับเปลี่ยนข้อความตอบกลับให้ตรงตาม API ของแต่ละ platform นั่นเอง

          เรามาลองใช้งาน Custom payload กัน ให้เข้าไปที่ https://dialogflow.com/ แล้วเลือก Agent ที่ได้สร้างไว้แล้วในบทความก่อนหน้านี้ จากนั้นก็คลิกไปที่ "Default Welcome Intent" แล้วเลื่อนลงมาในส่วนของ Response


          เจ้า Custom payload จะอยู่ในส่วนของ Responses ให้คลิกปุ่ม ADD RESPONSE แล้วเลือก Custom payload ก็จะมีพื้นที่ว่าง ๆ ขึ้นมา และจาก docs ของ LINE Messaging API รูปแบบของ JSON ที่ใช้ตอบกลับในประเภทข้อความเป็นดังนี้

{     
    "type": "text",     
    "text": "Hello, world" 
}
โดย "type" คือประเภทของการตอบกลับ ใน docs ของ LINE Messaging API จะแบ่งประเภทการตอบกลับออกเป็นประเภทต่าง ๆ ซึ่งจะพูดถึงภายหลังในส่วนของ Message objects และ "text" คือข้อความที่จะตอบกลับ ให้เราใส่ JSON ดังต่อไปนี้ลงไป

{
  "line": {
    "type": "text",
    "text": "สวัสดี นี่คือคำทักทายจาก Dialogflow (Custom payload)"
  }
}
จากการสังเกต จะเห็นว่า JSON ที่เราเพิ่มลงไปในช่อง Custom payload จะอยู่ข้างใน key "line" อีกที เป็นการบอกให้ Dialogflow รู้ว่านี่เป็น response สำหรับ LINE เท่านั้น เมื่อพิมพ์ JSON เสร็จ ให้คลิกปุ่ม SAVE แล้วลองทดสอบด้วยการพิมพ์ว่า "สวัสดี"


ผลลัพธ์ที่ได้ก็จะเป็นข้อความ "สวัสดี นี่คือคำทักทายจาก Dialogflow" และ "สวัสดี นี่คือคำทักทายจาก Dialogflow (Custom payload)" โดยข้อความแรกมาจาก Text response และข้อความที่สองมาจาก Custom payload .....ว่าแต่เมื่อกี้เพื่อน ๆ สังเกตเห็นอะไรกันหรือเปล่าเอ่ย ข้าง ๆ แถบ DEFAULT มีแถบ LINE อยู่


          เมื่อคลิกไปที่แถบ LINE แล้ว ก็จะมีตัวเลือกรูปแบบข้อความตอบกลับให้ 5 ตัวเลือก ได้แก่
  • Text response: เป็นการตอบกลับด้วยข้อความ ซึ่งจะมีช่องให้กรอกข้อความที่จะใช้ในการตอบกลับผู้ใช้ เหมือนกับในแถบ DEFAULT
  • Image: เป็นการตอบกลับด้วยรูป โดยจะมีช่องให้กรอก URL ของไฟล์รูป
  • Card: เป็นการตอบกลับด้วยการ์ด ซึ่งจะมีช่องให้กรอก URL ของไฟล์รูปที่ใช้เป็นรูปของการ์ด, ช่องให้กรอก Card Title, ช่องให้กรอก Card Subtitle, ช่องให้กรอกข้อความของปุ่ม (รายละเอียดอยู่ในส่วนของ Message objects ข้างล่าง)
  • Quick replies: เป็นการตอบกลับด้วยข้อความพร้อมทั้งปุ่ม (รายละเอียดอยู่ในส่วนของ Message objects ข้างล่าง)
  • Custom payload
ซึ่งเป็นการเพิ่มความง่ายในการตอบกลับข้อความของ LINE (มีตัวเลือก Custom payload ให้ด้วย) เพราะมีเป็น Template ให้อยู่แล้ว ทำให้เราไม่ต้องสร้าง JSON ขึ้นมาใหม่


LINE Message objects

          อย่างที่กล่าวไว้เมื่อตอนต้นว่า LINE Message object แบ่งประเภทการตอบกลับออกเป็นประเภทต่าง ๆ แต่ละประเภทก็จะมีจุดประสงค์การใช้ที่แตกต่างกันไป เช่น สติกเกอร์ หรือพิกัดตำแหน่ง เป็นต้น ซึ่งเราสามารถสร้าง Message object ได้จาก JSON รูปแบบต่าง ๆ ตามที่ทาง LINE กำหนดไว้ จากนั้นก็เอาไปใส่ไว้ใน Custom payload ภายใต้ key "line" ตามที่ได้ลองทำเมื่อสักครู่ .....ว่าแล้วเราก็มาดู Message objects แต่ละประเภทกันเลยดีกว่า ซึ่งเราสามารถแบ่งประเภทการตอบกลับออกได้เป็นดังนี้


Text message


          เริ่มจากพื้นฐานสุด ๆ ที่ Text message หรือก็คือการตอบกลับประเภทข้อความ ซึ่งเป็นการตอบกลับด้วยข้อความธรรมดา ๆ โดยจะมีหน้าตา JSON ดังต่อไปนี้

{
  "line": {
    "type": "text",
    "text": "นี่คือข้อความตอบกลับของ Text message"
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ text
  • text: ข้อความที่แสดง สูงสุด 2,000 ตัวอักษร


Image message


          Image message เป็นการตอบกลับด้วยรูป โดยจะใช้ JSON ที่มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "image",
    "originalContentUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9glxf1PI7p2RxnPHpL3oUiFgXW8Xhd1saDLw2xLsF3vZunZpGPW-UwPpEffmGhTRWoZ64HHY1VeljF0uDuGn6Lve2ncoTSZY4sl2L0ibbDlpojgUa0llhv7WnrVLkXX6tln7NLg-FkZI/s1600/sao-full.jpg",
    "previewImageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXWIsA2ka3azOhyeXwvizWjyz0sTiYhBuxFuQ451rXCKyX5wbIl47CIOKz8jk8pcKOC8kiriAIHTFo-zKkcO8Ied4vysq9Na00dlWfBksUMFxDdwSsYTrkjXyG-JGp5GcjgLJLjzmFerk/s1600/sao-preview.jpg"
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ image
  • originalContentUrl: Url ของไฟล์รูปภาพต้นฉบับที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB
  • previewImageUrl: Url ของไฟล์รูปภาพที่ใช้แสดงซึ่งมีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB


Sticker message


          Sticker message เป็นการตอบกลับด้วยสติกเกอร์อันน่ารักของ LINE แต่มีข้อจำกัดตรงที่สติกเกอร์ที่ใช้ในการตอบกลับนั้นต้องเป็นสติกเกอร์ที่สร้างโดย LINE เท่านั้น ไม่สามารถใช้สติกเกอร์ของ Creator คนอื่น ๆ ได้ โดยมีรูปแบบ JSON ดังต่อไปนี้

{
  "line": {
    "type": "sticker",
    "packageId": "1",
    "stickerId": "1"
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ sticker
  • packageId: รหัสแพ็กเกจของสติกเกอร์ที่ต้องการส่ง ดูได้จากที่นี่
  • stickerId: รหัสของสติกเกอร์ที่ต้องการส่ง ดูได้จากที่นี่


Video message


          Video message เป็นการตอบกลับด้วยคลิปวิดีโอสั้น ๆ มีรูปแบบ JSON ดังต่อไปนี้

{
  "line": {
    "type": "video",
    "originalContentUrl": "https://s3-ap-southeast-1.amazonaws.com/dezpax/b_files/video_example.mp4",
    "previewImageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXWIsA2ka3azOhyeXwvizWjyz0sTiYhBuxFuQ451rXCKyX5wbIl47CIOKz8jk8pcKOC8kiriAIHTFo-zKkcO8Ied4vysq9Na00dlWfBksUMFxDdwSsYTrkjXyG-JGp5GcjgLJLjzmFerk/s1600/sao-preview.jpg"
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ video
  • originalContentUrl: Url ของไฟล์วิดีโอที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 10 MB
  • previewImageUrl: Url ของไฟล์รูปภาพที่ใช้แสดงซึ่งมีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB


Audio message


          Audio message เป็นการตอบกลับด้วยเสียงสั้น ๆ มีรูปแบบ JSON ดังต่อไปนี้

{
  "line": {
    "type": "audio",
    "originalContentUrl": "https://s3-ap-southeast-1.amazonaws.com/dezpax/b_files/audio_example.m4a",
    "duration": 10000
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ audio
  • originalContentUrl: Url ของไฟล์เสียงที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 10 MB
  • duration: ความยาวของไฟล์เสียง หน่วยเป็น milliseconds ( 1 วินาที = 1,000 milliseconds )


Location message


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

{
  "line": {
    "type": "location",
    "title": "เซ็นทรัลพลาซา ลาดพร้าว",
    "address": "1693 ถนนพหลโยธิน แขวงจตุจักร เขตจตุจักร กรุงเทพมหานคร 10900",
    "latitude": 13.8164458,
    "longitude": 100.558962
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ location
  • title: ชื่อสถานที่
  • address: ที่อยู่ของสถานที่นั้น ๆ
  • latitude: ตำแหน่งละติจูดของสถานที่นั้น ๆ
  • longitude: ตำแหน่งลองจิจูดของสถานที่นั้น ๆ


Imagemap message


          Imagemap message เป็นการตอบกลับด้วยรูป ซึ่งเราสามารถฝัง action ลงไปในรูปได้ แต่มีข้อเสียนิดหน่อยตรงที่เราจะต้องออกแบบรูปโดยแบ่งพื้นที่ของแต่ละ action เอาเอง จากรูปตัวอย่างจะเป็นการแบ่งรูปออกเป็นสองฝั่ง เมื่อแตะฝั่งซ้ายจะเปิดหน้าเว็บ ส่วนฝั่งขวาจะเป็นการส่งข้อความว่า "Hello" เข้าไปในห้องพูดคุย โดย JSON ที่ใช้มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "imagemap",
    "baseUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9glxf1PI7p2RxnPHpL3oUiFgXW8Xhd1saDLw2xLsF3vZunZpGPW-UwPpEffmGhTRWoZ64HHY1VeljF0uDuGn6Lve2ncoTSZY4sl2L0ibbDlpojgUa0llhv7WnrVLkXX6tln7NLg-FkZI/s1600/",
    "altText": "This is an imagemap",
    "baseSize": {
      "height": 1040,
      "width": 1040
    },
    "actions": [
      {
        "type": "uri",
        "linkUri": "https://www.google.com/",
        "area": {
          "x": 0,
          "y": 0,
          "width": 512,
          "height": 731
        }
      },
      {
        "type": "message",
        "text": "Hello",
        "area": {
          "x": 512,
          "y": 0,
          "width": 512,
          "height": 731
        }
      }
    ]
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ imagemap
  • baseUrl: Url ของไฟล์รูปภาพ ควรทำให้สามารถเข้าถึงภาพ 5 ขนาดได้ (240px, 300px, 460px, 700px, 1040px) โดยใช้รูปแบบ baseUrl/{image width} (เช่น https://1.bp.blogspot.com/-U90M8DyKu7Q/W9EtONMCf6I/AAAAAAAAW_4/7L_jB_Rg9oweu2HKhULNdu9WNefw9zf9wCLcBGAs/s1600/ เป็นต้น) ซึ่ง LINE จะเลือกโหลดขนาดภาพให้เหมาะสมกับอุปกรณ์เอง
  • altText: ข้อความของรูปภาพ จำนวนตัวอักษรสูงสุด 400 ตัวอักษร
  • baseSize: ขนาดของรูปภาพ
    • width: ความกว้างของรูปภาพ ให้เซ็ตเป็น 1040
    • height: ความสูงของรูปภาพ ให้เซ็ตเป็น 1040
  • actions: อาร์เรย์ actions ของ Imagemap โดยเราสามารถใส่ action ได้มากสุด 50 actions
    • type: ประเภทของ action ได้แก่ uri หรือ message ถ้ากำหนดเป็น uri นั่นหมายถึง เมื่อกดที่ action นี้แล้วก็จะทำการเปิดเว็บขึ้นมา และถ้ากำหนดเป็น message นั่นหมายถึง เมื่อกดที่ action นี้แล้วจะทำการส่งข้อความกลับมาให้ bot
    • label: ป้ายกำกับของ action
    • linkUri: Url ของเว็บ ใช้ในกรณีที่กำหนด type = uri
    • text: ข้อความที่จะทำการส่งกลับมาให้ bot ใช้ในกรณีที่กำหนด type = message
    • area: พื้นที่สำหรับ action
      • x: ตำแหน่งแนวนอนนับจากมุมบนซ้ายของพื้นที่
      • y: ตำแหน่งแนวตั้งนับจากมุมบนซ้ายของพื้นที่
      • width: ความกว้างของพื้นที่ action
      • height: ความสูงของพื้นที่ action


Template messages

          Template messages คือ ข้อความที่มีรูปแบบตามที่ LINE กำหนดเอาไว้แล้ว ซึ่งเราสามารถปรับแต่งเพื่อให้ผู้ใช้สามารถโต้ตอบกับ bot ได้ง่ายขึ้น ซึ่ง LINE แบ่งประเภทของเทมเพลตออกเป็นดังนี้


          Buttons template เทมเพลตที่ประกอบไปด้วยรูปภาพ ชื่อ ข้อความ และปุ่มการดำเนินการหลายปุ่ม โดยใช้ JSON ที่มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "template",
    "altText": "This is a buttons template",
    "template": {
        "type": "buttons",
        "thumbnailImageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9glxf1PI7p2RxnPHpL3oUiFgXW8Xhd1saDLw2xLsF3vZunZpGPW-UwPpEffmGhTRWoZ64HHY1VeljF0uDuGn6Lve2ncoTSZY4sl2L0ibbDlpojgUa0llhv7WnrVLkXX6tln7NLg-FkZI/s1600/sao-full.jpg",
        "imageAspectRatio": "rectangle",
        "imageSize": "cover",
        "imageBackgroundColor": "#FFFFFF",
        "title": "แผ่นเกม Sword Art Online",
        "text": "กรุณาเลือก",
        "defaultAction": {
            "type": "uri",
            "label": "View detail",
            "uri": "https://www.google.com"
        },
        "actions": [
            {
              "type": "postback",
              "label": "สั่งซื้อ",
              "data": "action=buy&itemid=123"
            },
            {
              "type": "postback",
              "label": "เพิ่มลงรถเข็น",
              "data": "action=add&itemid=123"
            },
            {
              "type": "uri",
              "label": "อ่านรายละเอียด",
              "uri": "https://www.google.com"
            }
        ]
    }
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ template
  • altText: ข้อความกำกับของ template จำนวนตัวอักษรสูงสุด 400 ตัวอักษร
  • template:
    • type: ประเภทของ template ในที่นี้คือ buttons
    • thumbnailImageUrl: Url ของไฟล์รูปภาพที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB
    • imageAspectRatio: อัตราส่วนของภาพ มีค่าเป็น rectangle (สี่เหลี่ยมผืนผ้า) หรือ square (สี่เหลี่ยมจตุรัส)
    • imageSize: ขนาดของรูปภาพ มีค่าเป็น cover หรือ contain
    • imageBackgroundColor: สีพื้นหลังของรูปภาพ
    • title: หัวเรื่อง จำนวนตัวอักษรสูงสุด 40 ตัวอักษร
    • text: ข้อความ กรณีที่ไม่มีหัวเรื่องหรือรูปภาพ สามารถใส่ได้สูงสุด 160 ตัวอักษร แต่ถ้ามีหัวเรื่องหรือรูปภาพจะใส่ได้สูงสุด 60 ตัวอักษร
    • defaultAction: action ที่จะทำงานเมื่อรูปภาพถูกกด (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)
    • actions: อาร์เรย์ของ action ที่จะทำงานเมื่อถูกกด ใส่ได้มากสุด 4 actions  (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)
....................


          Confirm template เทมเพลตที่ประกอบไปปุ่มการดำเนินการสองปุ่ม โดยใช้ JSON ที่มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "template",
    "altText": "this is a confirm template",
    "template": {
      "type": "confirm",
      "text": "ต้องการที่จะลบข้อมูลหรือไม่?",
      "actions": [
        {
          "type": "message",
          "label": "ใช่",
          "text": "ใช่"
        },
        {
          "type": "message",
          "label": "ไม่",
          "text": "ไม่"
        }
      ]
    }
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ template
  • altText: ข้อความกำกับของ template จำนวนตัวอักษรสูงสุด 400 ตัวอักษร
  • template:
    • type: ประเภทของ template ในที่นี้คือ confirm
    • text: ข้อความ จำนวนตัวอักษรสูงสุด 240 ตัวอักษร
    • actions: อาร์เรย์ของ action ที่จะทำงานเมื่อถูกกด ใส่ได้มากสุด 2 actions (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)
....................


          Carousel template เทมเพลตที่มีหลายคอลัมน์ ซึ่งแต่ละคอลัมน์จะประกอบไปด้วยรูปภาพ ชื่อ ข้อความ และปุ่มการดำเนินการหลายปุ่ม หรือพูดง่าย ๆ ก็คือเทมเพลตที่มี Buttons template หลาย ๆ ตัว มีการแสดงผลตามลำดับโดยการเลื่อนไปตามแนวนอน โดยใช้ JSON ที่มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "template",
    "altText": "this is a carousel template",
    "template": {
      "type": "carousel",
      "imageAspectRatio": "rectangle",
      "imageSize": "cover",
      "columns": [
        {
          "thumbnailImageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9glxf1PI7p2RxnPHpL3oUiFgXW8Xhd1saDLw2xLsF3vZunZpGPW-UwPpEffmGhTRWoZ64HHY1VeljF0uDuGn6Lve2ncoTSZY4sl2L0ibbDlpojgUa0llhv7WnrVLkXX6tln7NLg-FkZI/s1600/sao-full.jpg",
          "imageBackgroundColor": "#FFFFFF",
          "title": "แผ่นเกม Sword Art Online",
          "text": "แผ่นเกม Sword Art Online",
          "defaultAction": {
            "type": "uri",
            "label": "รายละเอียด",
            "uri": "https://www.google.com/"
          },
          "actions": [
            {
              "type": "postback",
              "label": "สั่งซื้อ",
              "data": "action=buy&itemid=111"
            },
            {
              "type": "postback",
              "label": "เพิ่มลงรถเข็น",
              "data": "action=add&itemid=111"
            },
            {
              "type": "uri",
              "label": "รายละเอียด",
              "uri": "https://www.google.com/"
            }
          ]
        },
        {
          "thumbnailImageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVSKKr0uN4_y_UPxK7jk3cP6xB9ERt1OZ_efvW7t40lhiV8xsCakvoYcqy1_3aQMNQHy3f1AX7p9KqBMiWHEVK60QJc3nDFe1FkJP8qPSvImtP7Vq0JSAEt_6HZ3a2jVC1ZRLdYUufulM/s1600/sao-os.jpg",
          "imageBackgroundColor": "#FFFFFF",
          "title": "Sword Art Online Ordinal Scale",
          "text": "Sword Art Online Ordinal Scale",
          "defaultAction": {
            "type": "uri",
            "label": "รายละเอียด",
            "uri": "https://www.google.com/"
          },
          "actions": [
            {
              "type": "postback",
              "label": "สั่งซื้อ",
              "data": "action=buy&itemid=111"
            },
            {
              "type": "postback",
              "label": "เพิ่มลงรถเข็น",
              "data": "action=add&itemid=111"
            },
            {
              "type": "uri",
              "label": "รายละเอียด",
              "uri": "https://www.google.com/"
            }
          ]
        }
      ]
    }
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ template
  • altText: ข้อความกำกับของ template จำนวนตัวอักษรสูงสุด 400 ตัวอักษร
  • template:
    • type: ประเภทของ template ในที่นี้คือ carousel
    • imageAspectRatio: อัตราส่วนของภาพ มีค่าเป็น rectangle (สี่เหลี่ยมผืนผ้า) หรือ square (สี่เหลี่ยมจตุรัส)
    • imageSize: ขนาดของรูปภาพ มีค่าเป็น cover หรือ contain
    • columns: อาร์เรย์ของ column ใส่ได้มากสุด 10 column
      • thumbnailImageUrl: Url ของไฟล์รูปภาพที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB
      • imageBackgroundColor: สีพื้นหลังของรูปภาพ
      • title: หัวเรื่อง จำนวนตัวอักษรสูงสุด 40 ตัวอักษร
      • text: ข้อความ กรณีที่ไม่มีหัวเรื่องหรือรูปภาพ สามารถใส่ได้สูงสุด 160 ตัวอักษร แต่ถ้ามีหัวเรื่องหรือรูปภาพจะใส่ได้สูงสุด 60 ตัวอักษร
      • defaultAction: action ที่จะทำงานเมื่อรูปภาพถูกกด (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)
      • actions: อาร์เรย์ของ action ที่จะทำงานเมื่อถูกกด ใส่ได้มากสุด 4 actions (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)
....................


          Image carousel template เทมเพลตที่มีรูปภาพหลายรูป มีการแสดงผลตามลำดับโดยการเลื่อนไปตามแนวนอน โดยใช้ JSON ที่มีรูปแบบดังต่อไปนี้

{
  "line": {
    "type": "template",
    "altText": "this is a image carousel template",
    "template": {
      "type": "image_carousel",
      "columns": [
        {
          "imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq9glxf1PI7p2RxnPHpL3oUiFgXW8Xhd1saDLw2xLsF3vZunZpGPW-UwPpEffmGhTRWoZ64HHY1VeljF0uDuGn6Lve2ncoTSZY4sl2L0ibbDlpojgUa0llhv7WnrVLkXX6tln7NLg-FkZI/s1600/sao-full.jpg",
          "action": {
            "type": "postback",
            "label": "สั่งซื้อ",
            "data": "action=buy&itemid=111"
          }
        },
        {
          "imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVSKKr0uN4_y_UPxK7jk3cP6xB9ERt1OZ_efvW7t40lhiV8xsCakvoYcqy1_3aQMNQHy3f1AX7p9KqBMiWHEVK60QJc3nDFe1FkJP8qPSvImtP7Vq0JSAEt_6HZ3a2jVC1ZRLdYUufulM/s1600/sao-os.jpg",
          "action": {
            "type": "message",
            "label": "ตกลง",
            "text": "ตกลง"
          }
        },
        {
          "imageUrl": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDnf6GMcW7s9i9uBie9tQZBaepFr6hTOVozf97hmq1w-XC3gEfsZn-EILsLKjpBihd-scR3kdXGJY6iXa2LnTFtXmz5ajoQP_9YtxC1au4aFGmyYGir8b0ZV4B1laG1ZBndVd74BOoDrcf/s1600/saohr-cover-image.jpg",
          "action": {
            "type": "uri",
            "label": "อ่านรายละเอียด",
            "uri": "https://www.google.com/"
          }
        }
      ]
    }
  }
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ template
  • altText: ข้อความกำกับของ template จำนวนตัวอักษรสูงสุด 400 ตัวอักษร
  • template:
    • type: ประเภทของ template ในที่นี้คือ image_carousel
    • columns: อาร์เรย์ของ column ใส่ได้มากสุด 10 column
      • imageUrl: Url ของไฟล์รูปภาพที่มีจำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร เป็น HTTPS และมีขนาดไม่เกิน 1 MB
      • actions: action ที่จะทำงานเมื่อรูปภาพถูกกด  (อ่านรายละเอียดของ action เพิ่มเติมในส่วนของ Action objects)


Flex message


          Flex Message คือ ข้อความที่เปิดให้นักพัฒนาสามารถออกแบบหน้าตาของข้อความได้อย่างอิสระ แตกต่างจาก Template messages ตรงที่ Template messages จะมีรูปแบบตายตัว ถึงจะมีส่วนที่เราสามารถปรับแต่งได้ แต่โดยรวมก็ยังอยู่ในรูปแบบตามที่ LINE กำหนด เช่น ตำแหน่งของรูปภาพจะต้องอยู่ข้างบนสุด ตามด้วยข้อความ จากนั้นจึงจะเป็นปุ่มที่อยู่อันดับล่างสุด เป็นต้น ซึ่งเราไม่สามารถแก้ไขตำแหน่งเหล่านั้นได้ แต่ Flex Message เปิดให้เราสามารถออกแบบข้อความได้ตามใจชอบ สามารถกำหนดให้ตำแหน่งของรูปอยู่ข้างล่างข้อความได้

          เนื่องจากความอิสระของ Flex Message ทำให้ JSON ค่อนข้างมีความซับซ้อน ซึ่งผมขอแนะนำให้เพื่อน ๆ ไปอ่านรายละเอียด รวมถึงวิธีการสร้าง JSON ของ Flex Message เพิ่มเติมที่บทความ "ฉีกกฎการแสดงผลข้อความแบบเดิมๆใน LINE Messaging API ด้วย Flex Messag" ของคุณ Jirawatee ครับ


Action objects

          ประเภทของ action ที่ bot สามารถใช้งานได้เมื่อผู้ใช้แตะปุ่มหรือรูปภาพในข้อความ เช่น เปิดเว็บ เปิดกล้อง หรือแสดงตำแหน่งบนแผนที่ เป็นต้น โดยแบ่งประเภทของ action ออกได้เป็น


          Postback action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Postback action ถูกแตะก็จะทำการส่งค่ากลับไปยัง webhook ด้วยค่าที่ระบุใน data โดย JSON ของการกระทำนี้จะมีหน้าตาประมาณนี้

{  
   "type":"postback",
   "label":"สั่งซื้อ",
   "data":"action=buy&itemid=123",
   "displayText":"สั่งซื้อ"
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ postback
  • label: ข้อความกำกับของ action
  • data: ค่าที่จะส่งไปยัง webhook จำนวนตัวอักษรไม่เกิน 300 ตัวอักษร
  • displayText: ข้อความที่จะส่งเข้าไปในห้องพูดคุยในฐานะข้อความจากผู้ใช้ จำนวนตัวอักษรไม่เกิน 300 ตัวอักษร
....................

          Message action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Message action ถูกแตะ ข้อความที่ระบุอยู่ใน text จะถูกส่งเข้าไปในห้องพูดคุยในฐานะข้อความจากผู้ใช้ โดย JSON ของการกระทำนี้จะมีหน้าตาเป็นแบบนี้

{  
   "type":"message",
   "label":"สั่งซื้อ",
   "text":"สั่งซื้อ"
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ message
  • label: ข้อความกำกับของ action
  • text: ข้อความที่จะส่งเข้าไปในห้องพูดคุยในฐานะข้อความจากผู้ใช้ จำนวนตัวอักษรไม่เกิน 300 ตัวอักษร
....................

          URI action เมื่อตัวควบคุมที่เกี่ยวข้องกับ URI action ถูกแตะ URI ที่ระบุอยู่ใน uri จะถูกเรียกใช้งาน โดย JSON ของการกระทำนี้จะมีหน้าตาเป็นแบบนี้

{  
   "type":"uri",
   "label":"Google",
   "uri":"https://www.google.com/"
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ uri
  • label: ข้อความกำกับของ action
  • uri: URI ที่จะทำงาน รองรับ http, https, line, และ tel จำนวนตัวอักษรไม่เกิน 1,000 ตัวอักษร
....................

          Datetime picker action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Datetime picker action ถูกแตะ ก็จะแสดงตัวเลือกวัน-เวลาขึ้นมาให้ผู้ใช้เลือก เมื่อเลือกเสร็จแล้วก็จะส่งค่าไปที่ webhook โดย JSON ของการกระทำนี้จะมีหน้าตาเป็นแบบนี้

{  
   "type":"datetimepicker",
   "label":"เลือกวันและเวลา",
   "data":"value=12345",
   "mode":"datetime",
   "initial":"2018-10-26t00:00",
   "max":"2019-12-31t23:59",
   "min":"2017-01-01t00:00"
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ datetimepicker
  • label: ข้อความกำกับของ action
  • data: ค่าที่จะส่งไปยัง webhook จำนวนตัวอักษรไม่เกิน 300 ตัวอักษร
  • mode: โหมดสำหรับตัวเลือก มีทั้งหมด 3 โหมด ได้แก่ date สำหรับเลือกวันที่, time สำหรับเลือกเวลา และ datetime สำหรับเลือกทั้งวันที่และเวลา
  • initial: ค่าเริ่มต้น
  • max: ค่ามากสุดที่สามารถเลือกได้
  • min: ค่าน้อยสุดที่สามารถเลือกได้
ค่าของวันที่จะอยู่ในรูปแบบ "ปี-เดือน-วัน" เช่น 2018-10-26 เป็นต้น
ค่าของเวลาจะอยู่ในรูปแบบ "ชั่วโมง:นาที" เช่น 13:00 เป็นต้น
ค่าของวันเวลาจะอยู่ในรูปแบบ "ปี-เดือน-วันTชั่วโมง:นาที" หรือ "ปี-เดือน-วันtชั่วโมง:นาที" เช่น 2018-10-26T13:00 หรือ 2018-10-26t13:00 เป็นต้น

....................

          Camera action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Camera action ถูกแตะก็จะทำการเปิดหน้าจอกล้องถ่ายรูปของ LINE ขึ้นมา โดย JSON ของการกระทำนี้จะมีหน้าตาประมาณนี้

{  
   "type":"camera",
   "label":"กล้องถ่ายรูป",
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ camera
  • label: ข้อความกำกับของ action จำนวนตัวอักษรไม่เกิน 20 ตัวอักษร
....................

          Camera roll action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Camera roll action ถูกแตะก็จะทำการเปิดหน้าจอเลือกรูปภาพของ LINE ขึ้นมา โดย JSON ของการกระทำนี้จะมีหน้าตาประมาณนี้

{  
   "type":"cameraRoll",
   "label":"เลือกรูป",
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ cameraRoll
  • label: ข้อความกำกับของ action จำนวนตัวอักษรไม่เกิน 20 ตัวอักษร
....................

          Location action เมื่อตัวควบคุมที่เกี่ยวข้องกับ Location action ถูกแตะก็จะทำการเปิดหน้าจอเลือกรูปภาพของ LINE ขึ้นมา โดย JSON ของการกระทำนี้จะมีหน้าตาประมาณนี้

{  
   "type":"location",
   "label":"แผนที่",
}
  • type: เป็นตัวกำหนดประเภทของการตอบกลับ ในที่นี้คือ location
  • label: ข้อความกำกับของ action จำนวนตัวอักษรไม่เกิน 20 ตัวอักษร


          บทความนี้เป็นการแนะนำวิธีใช้ความสามารถในการตอบกลับอันหลากหลายของ LINE bot บน Dialogflow โดยการใช้ Custom payload ช่วยในการดัดแปลงข้อความตอบกลับ ซึ่งจะทำให้ bot ของเรามีความน่าสนใจมากยิ่งขึ้น และถ้าอยากทราบรายละเอียดเชิงลึก เพื่อน ๆ สามารถเข้าไปอ่านเพิ่มเติมได้ที่ docs ของ LINE Messaging API .....ถึงตรงนี้ ผมก็คงต้องขอตัวลาไปก่อน ไว้พบกันใหม่ในบทความถัดไป บ๊ายบาย


Share:

1 ความคิดเห็น:

  1. Unknown3 ธันวาคม 2562 เวลา 16:30

    Datetime picker action ค่าที่ส่งไป webhook แล้วเราจะดึงกลับมาแสดงในไลน์ยังไงหรอครับ

    ตอบลบ

สมัครสมาชิก: ส่งความคิดเห็น (Atom)