สร้าง Rich Menu ของ LINE Bot ด้วย Spring-Boot

Photo by Bundo Kim on Unsplash

หลังจากที่เราสร้าง LINE Bot ง่ายๆ กันมาแล้ว ผมก็สังเกตุเห็นว่าเหล่า LINE@ ต่างๆ เค้ามีเมนูที่เป็นรูปภาพและทำให้ User ง่ายที่จะ interactive กับ LINE Bot ดังนั้งในบทความนี้ผมเลยจะมากล่าวถึงการสร้าง LINE Bot ด้วย Spring-Boot ที่มี Rich Menu กันครับ

Rich Menu เป็นเมนูที่ปรับแต่งได้ให้แสดงบนหน้าจอเพื่อช่วยใน User มีปฏิสัมพันธ์กับ Bot ของเราได้ ซึ่งเรามามารถปรับแต่งเมนูให้เปลี่ยนไปได้ในแต่ละ action

ตัว Rich Menu จะประกอบด้วย 2 ส่วน คือ เมนูรูปภาพ และ chat bar

1. รูปภาพ Rich Menu: เป็นรูปภาพที่มีบริเวณที่สามารถ tap ได้ ที่ map ไปยัง action อื่นๆ ได้ อย่างเช่น return postback action หรือ เปิด URL
2. Chat bar: เป็น Bar ที่ใช้เปิดหรือปิด Rich Menu เราสามารถปรับแต่งข้อความของส่วนนี้ได้

เราสามารถสร้าง Rich Menu สำหรับ ​Bot ของเราได้ 2 วิธี คือ Massaging API หรือ LINE@ Manager

1. Messaging API: เป็นวิธีที่เรียกไปยัง Messaging API โดยตรง และเราสามารถแสดง Rich Menu ที่แตกต่างกันของแต่ละ User ได้ ซึ่งรองรับ postback และ datetime picker action และเราก็สามารถสร้างปรับแต่งพื้นที่ที่สามารถ tap ของ รูปภาพ Rich Menu ได้
2. LINE@ Manager: จะเป็นวิธีที่ง่ายสำหรับสร้าง Rich Menu เพราะว่าเราสามารถสร้างได้ด้วย Web UI โดยไม่ต้องโค้ด และก็สามารถปรับแต่งอะไรได้หลายอย่างเช่นเดียวกับทำผ่าน Messaging API และที่สำคัญใช้สำหรับสร้าง default Rich Menu ได้

ในบทความนี้จะใช้ Messaging API ในสร้างและปรับเปลียน Rich Menu ตามที่เลือก

ขั้นตอนในการสร้าง Rich Menu

เพื่อสร้าง Rich Menu ให้กับ Bot ของเราด้วย Messaging API จะต้องทำตามขั้นตอนดังนี้

• เตรียมรูปภาพ Rich Menu
• สร้างและอัพโหลดรูปภาพ Rich Menu
• เชื่อมโยง Rich Menu สำหรับแต่ละ user

เตรียมรูปภาพ Rich Menu

รูปภาพของ Rich Menu สามารถกำหนดพื้นที่ที่สามารถ tap ได้ที่แตกต่างกันถึง 20 พื้นที่ โดยที่รูปจะต้องตรงกับสเปก ดังนี้

• รูปแบบของรูปภาพ: JPEG หรือ PNG
• ขนาดของรูป: 2500x1688 หรือ 2500x843 pixel
• ขนาดของไฟล์สูงสุด: 1 MB

จากรูปแบบการออกแบบที่ LINE@ Manager แนะนำก็จะมีหลายรูปแบบดังนี้

แต่เราก็สามารถออกแบบจุด tap ได้ตามที่เราต้องการ ดังนี้

สร้าง Rich Menu

แต่ก่อนอื่นต้องออกแบบรูปภาพ Rich Menu ก่อน ซึ่งผมจะออกแบบให้มี 2 Rich Menu ซึ่งอันหนึ่งจะเป็น Home Menu และอีกอันหนึ่งจะเป็น More Menu ซึ่งเราสามารถแตะที่ Home Menu เพื่อเปลี่ยนไปเป็น More Menu และแตะที่ More Menu เพื่อกลับมายัง Home Menu ได้ (เมนูออกแบบง่ายๆ ) ดังนี้

สำหรับ Rich Menu object จะมีข้อมูลดังนี้

เป็นรูปแบบของ JSON ดังตัวอย่างด้านล่างนี้

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": false,
  "name": "Nice richmenu",
  "chatBarText": "Tap to open",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 2500,
        "height": 1686
      },
      "action": {
        "type": "postback",
        "data": "action=buy&itemid=123"
      }
    }
  ]
}

ซึ่งเราสามารถกำหนดให้เป็นไฟล์ YAML ได้เหมือนกัน เราจะต้องกำหนด Rich Menu object สำหรับ 2 Rich Menu ที่เราจะสร้างขึ้น ดังนี้

จะเห็นได้ว่าไฟล์ YAML ของ Home Menu นั้นในส่วนของ area จะมี 4 ส่วนซึ่งเป็น map เข้ากับรูปภาพของเมนู และของ More Menu มี 2 ส่วน

สร้าง Java project สำหรับสร้าง Rich Menu ง่ายๆ โดยเรียกใช้ LINE SDK อย่างคลาส LineMessagingClient เพื่อ request ไปหา LINE System เพื่อจัดการ Rich Menu ซึ่งโค้ดนี้จะเป็นการอ่านไฟล์ YAML แล้วก็เรียก createRichMenu เพื่อสร้าง Rich Menu หลังจากนั้นก็เรียก setRichMenuImage เพื่อ upload ไฟล์รูปภาพของ Rich Menu

เมื่อเรารัน Application นี้ก็จะได้ richMenuId ของ Home Menu และ More Menu ดังนี้

.. (richMenuId=richmenu-01331e94bf39b56b1a4fff4dd7cc71f4, name=Home)
.. (richMenuId=richmenu-5735297bc45c0e9e6bd5980f04f00dc9, name=More)

เป็นอันว่าเราสามารถสร้าง Rich Menu ได้แล้ว ต่อไปเราก็จะเอา Rich Menu นี้ไปใช้ใน LINE Bot

เชื่อมโยง Rich Menu สำหรับแต่ละ user

หลังจากที่เราได้สร้าง Rich Menu แล้วสำหรับ Home Menu และ More Menu เราก็จะนำมาใช้ใน LINE Bot ซึ่งผมจะ reuse LINE Bot จากบทความที่แล้ว โดยจะเพิ่มการจัดการข้อความของ Message Event ดังนี้

• Richmenu — ให้ link กับ Home Menu กับ User
• richmenu more — ให้เปลี่ยน link More Menu กับ User
• richmenu back — ให้เปลี่ยน link Home Menu กับ User
• richmenu unlink — ให้ unlink (ลบ Rich Menu ทั้งหมด) กับ User

จะเห็นได้ว่าเราเพียงเรียกใช้งาน linkRichMenuIdToUser สำหรับ link User กับ homeMenu และ moreMenu และใช้ unlinkRichMenuIdFromUser เพื่อ unlink กับ User หลังจากรันก็จะได้ผลประมาณนี้

สรุป

เราก็จะได้ลองสร้าง Rich Menu แบบง่ายๆ ไม่ซับซ้อนอะไร แม้ว่าการออกแบบเมนูจะดูธรรมดาไปหน่อย แต่ก็อยากจะ focus ไปที่โค้ดมากกว่า สามารถอ่านเพิ่มเติมได้ที่ link ด้านล่างครับ แต่อย่างไรก็ตามก็ยังมี Feature อีกมากสำหรับ LINE Messaging API จะมาต่อในตอนหลังน่ะครับ 👨🏻‍💻

Using rich menus