จับ Postman มาสร้าง Line Rich Menu API ง่าย ๆ ด้วยตัวเอง

คำถามแรก Rich menu คืออะไร

Rich menu คือเมนูที่อยู่ตรงด้านล่างในหน้าห้องแชทของ Line official account ที่ช่วยให้ผู้ใช้มีปฏิสัมพันธ์กับบอทได้หลากหลายขึ้น เช่น การแชร์ตำแหน่ง การเปิดกล้องถ่ายภาพ การเปิดลิงก์ เป็นต้น โดย Rich Menu จะแบ่งออกเป็น 2 ส่วน คือ Rich menu image ที่ผู้ใช้สามารถแตะแต่ละส่วนของภาพเพื่อทำแอคชั่นต่าง ๆ และ Chat bar ที่แตะเพื่อเปิด/ปิดการแสดง Rich menu image

รู้หรือไม่ ตอนนี้ rich menu เขามี 2 แบบ โดยแยกตามวิธีการสร้าง

• ตัวที่ 1 Rich Menu ที่สร้างผ่านช่องทาง Admin ใน Line Official Account Manager วิธีนี้ค่อนข้างง่าย และไม่ซับซ้อน แต่แลกกับการที่เราจะได้ Rich Menu ที่มีรูปแบบตายตัวตามรูปแบบที่กำหนดมาเท่านั้น
• ตัวที่ 2 Rich Menu ที่สร้างผ่าน Messaging API วิธีนี้คือเราจะยิง API ไปที่ Line Server โดยตรง ทำให้เราปรับเปลี่ยนรูปแบบได้หลากหลายขึ้น สามารถสร้าง Rich Menu สำหรับผู้ใช้แต่ละคนให้แตกต่างกันได้ และยังมี Postback action กับ Datetime picker action เพิ่มมากจาก Rich Menu ตัวที่ 1 ด้วย

และวันนี้เราจะพาชมการสร้าง Rich Menu API ด้วย Postman กันค่า

2 สิ่งที่เราจะต้องมีก่อนเริ่มลุย คือ…

1. Line Chat bot ใน Line Official Account (ถ้าใครยังไม่มีบอท ลองมาสร้างแชทบอทเองง่าย ๆ โดยใช้ Dialogflow ดูก่อนนะ)
2. Postman แอปหนึ่งที่ช่วยพัฒนาและทดสอบ API เจ้าแอปนี้จะช่วยยิง API แทนเราโดยไม่ต้องเขียนโค๊ดมากมาย สามารถดาวน์โหลดแอปได้ ที่นี่

ข้อกำหนดสำหรับภาพ Rich Menu

• ภาพต้องเป็นสกุล JPEG หรือ PNG
• ขนาดภาพกว้าง 2500 x ยาว 1686 หรือกว้าง 2500 x ยาว 843 พิกเซล
• ขนาดไฟล์ต้องไม่เกิน 1 MB

(ซ้าย) Rich Menu Image ขนาด 2500 x 1686 (ขวา) โครงสร้างพื้นที่ของแต่ละแอคชั่น

การสร้าง Rich Menu API แบ่งออกเป็น 3 ขั้นตอน

1. การสร้างตัว rich menu เพื่อให้ได้ Rich Menu ID

เริ่มโดยการยิง request ด้วย POST method ไปที่ endpoint https://api.line.me/v2/bot/richmenuโดยกำหนด Headers และ Body ดังนี้

• Headers
  — Content-Type : application/json
  — Authorization : Bearer {channel access token}

ตัว channel access token สำหรับเชื่อมกับบอทของเรา สามารถหาได้จาก https://developers.line.biz หลังจาก Log in ให้เข้าไปที่
Provider List>Provider>Channel>Channel settings>Messaging settings

ในกรอบสีแดง มีความหมายว่าตั้งแต่พิกัด (0,0) ไปตามแนวแกน x (ความกว้าง) 833 พิกเซล และไปตามแนวแกน y (ความสูง) 843 พิกเซล จะมีแอคชั่น ประเภท message ให้ผู้ใช้ส่งข้อความ “Contact Call Center”

• Body คือส่วนที่เราต้องใส่ json object เพื่อส่ง request ไปกำหนด
  — ขนาดของภาพ
  — ข้อความที่แสดงตรง Chat bar
  — แอคชั่นในแต่ละพื้นที่ที่เรากำหนดไว้ในภาพ โดยกล่องสีแดง 1 กล่องเท่ากับพื้นที่ 1 ส่วน

ถ้าเราอยากเพิ่มแอคชั่นก็สามารถใส่โค๊ดแบบกล่องสีแดงเข้าไปตามจำนวนที่เราต้องการ โดยเปลี่ยนค่า bounds และ action ได้เลย ซึ่งแต่ละแอคชั่นจะมีตัวแปรที่ต่างออกไป

นอกจากแอคชั่น message ยังมีแอคชั่นอื่น ๆ ให้เราเลือกอีกมากมาย เช่น Postback action, URI action, และ Datetime picker action

Tricks&Tips

แอคชั่นอย่าง Camera action, Camera roll action และ Location action สามารถกำหนดให้ type เป็น uri แทน แล้วใส่ uri ของแต่ละแอคชั่นแทนการกำหนด label ได้

ตัวอย่าง json object ที่ส่งไปใน Body

{
 "size":{
  "width":2500,
  "height":1686
    },
    "selected":false,
    "name":"Chat bar",
    "chatBarText":"Rich Menu",
    "areas":[
        {
         "bounds":{
          "x":0,
          "y":0,
          "width":833,
          "height":843
          },
         "action":{
          "type":"message",
          "text":"Contact Call Center"
          }
        },
        {
         "bounds":{
          "x":833,
          "y":0,
          "width":834,
          "height":843
          },
         "action":{
          "type":"uri",
          "uri":"https://www.lazada.co.th/?exlaz=d_1:mm_150050845_51350203_2010350203::11:145954808!13268487008!lazada!e!kwd-19342147066!c&gclid=EAIaIQobChMIkOXviueG5AIVhTUrCh2tKwHqEAAYASAAEgIpB_D_BwE#"
                }
        },
        {
         "bounds":{
          "x":1667,
          "y":0,
          "width":833,
          "height":843
          },
         "action":{
                "type":"uri",
                "uri":"line://nv/camera/"
                }
        },
        {
         "bounds":{
          "x":0,
          "y":843,
          "width":1250,
          "height":843
          },
         "action":{
                "type":"uri",
                "uri":"line://nv/cameraRoll/multi"
                }
        },
        {
         "bounds":{
          "x":1250,
          "y":843,
          "width":1250,
          "height":843
          },
         "action":{
                "type":"uri",
                "uri":"line://nv/location"
                }
        }
        ]
}

พอกดส่ง request ไปเราก็จะได้ Rich Menu ID กลับมาเป็น response หน้าตาแบบนี้เอาไว้ใช้เป็นพารามิเตอร์ในข้อ 2 และ 3

{
"richMenuId": "richmenu-93XXXXXXXXXXXXXXXXXXXXac"
}

2. การอัพโหลดรูปภาพ 1 รูปสำหรับ Rich Menu

แต่ละส่วนของภาพสื่อแอคชั่นต่าง ๆ ที่เรากำหนดไว้ในขั้นตอนที่ 1 โดยส่ง POST request ไปที่ https://api.line.me/v2/bot/richmenu/{richMenuId}/content โดยแทน {richMenuId} ด้วย response ที่เราได้ในขั้นตอนที่ 1 พร้อมกับกำหนด Headers และ Body ดังนี้

• Headers
  — Content-Type : image/jpeg
  — Authorization : Bearer {channel access token} ตัวเดียวกับขั้นตอนที่ 1
• Body เปลี่ยนประเภท object จาก raw เป็น binary เพื่ออัพโหลดไฟล์ภาพ Rich Menu ที่เราเตรียมไว้

หลังจากกดส่ง request เราก็จะได้ Rich Menu มาเรียบร้อย

3. การสั่งให้ Rich Menu ที่สร้างเป็น default ของแอคเคาท์เรา

ขั้นตอนสุดท้ายให้ส่ง POST request ไปที่ https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} แล้วใส่ Rich Menu Id เหมือนกับขั้นตอนที่ 2 โดยกำหนด Header ดังนี้

— Authorization : Bearer {channel access token} ตัวเดียวกับขั้นตอนก่อนเลย

นอกจากนี้เรายังสามารถกำหนด Rich Menu ให้ผู้ใช้แต่ละคนแตกต่างกันได้ เพื่อนำเสนอบริการที่ตอบโจทย์ไลฟ์สไตล์ของผู้ใช้ โดยการเพิ่ม user id เข้าไปที่ลิงก์ที่ส่ง request สามารถศึกษาเรื่องนี้เพิ่มเติมได้ที่นี่

เท่านี้เราก็ได้ Rich Menu มาแสดงในแอคเคาท์ของเราแล้วค่าา

ในบทความนี้หน้าตาของ Rich Menu อาจจะดูไม่แตกต่างจาก Rich Menu ที่สร้างด้วย Admin มากนัก เพราะอยากจะให้ผู้อ่านเข้าใจเรื่องการกำหนดพิกัดและพื้นที่ในแต่ละแอคชั่น แต่เจ้า Rich Menu สามารถทำเป็นฟังก์ชันสนุก ๆ ได้อีกมากมาย ถ้าใครสนใจไอเดียว้าว ๆ สามารถหาอ่านเพิ่มเติมได้ในบทความ Rich Menu API ของเล่นใหม่จาก LINE API เขียนโดยคุณ Chainarong Tangsurakit ผู้เป็น DevOps Engineer จาก LINE Company (Thailand)

References

• ภาพรวมการใช้ Rich Menu: https://developers.line.biz/en/docs/messaging-api/using-rich-menus/
• คำอธิบายตัวแปรใน request ที่ส่งไปสร้าง Rich Menu: https://developers.line.biz/en/reference/messaging-api/#rich-menu
• คำอธิบายตัวแปรที่ใช้กำหนดโครงสร้างของ Rich Menu ใน json object: https://developers.line.biz/en/reference/messaging-api/#rich-menu-structure