Lab to Live > KM > สร้าง LINE OA Rich Menu ผ่าน API

KM

LINE OA

สร้าง LINE OA Rich Menu ผ่าน API

ผมศึกษาตามคุณจิรวัฒน์ (พี่ตี๋)จากลิงค์นี้ครับ เก่ง Rich Menu ใน LINE ให้ครบสูตร และคอร์ส LINE Dev Camp จัดโดย ศูนย์บริการทางวิชาการ มหาวิทยาลัยรังสิต

โปรแกรม LINE Bot Designer

ดาวน์โหลดและติดตั้งโปรแกรม LINE Bot Designer ซึ่งมีทั้ง macOS and Windows

ขั้นตอนการสร้าง Rich Menu ผ่าน API

Step 1: เตรียม JSON เพื่อนำไปสร้าง Rich Menu

ผมเตรียมภาพ 3 ภาพเพื่อทดลองทำ Rich Menu 3 แบบ โดยกำหนดให้

  • Rich Menu แบบแรก (Large) มี Action (พื้นที่คลิกบน Rich Menu) ต่างๆ รวมถึงการคลิกไปยัง Rich Menu แบบที่สอง
  • Rich Menu แบบที่สอง (Compact) มี Action ต่างๆ รวมถึงการคลิกไปยัง Rich Menu แบบที่สามและกลับไปยัง Rich Menu แบบแรก
  • Rich Menu แบบที่สาม (Compact) มี Action ต่างๆ รวมถึงการคลิกกลับไปยัง Rich Menu แบบที่สองและแบบแรก

สร้าง Rich Menu ด้วยโปรแกรม LINE Bot Designer และกำหนด Properties

  • Name: ชื่อของ Rich Menu(ผู้ใช้ไม่เห็น)
  • Image: ไฟล์รูปที่มีขนาดตรงกับ Base Width และ Base Height
  • Base Width: ความกว้างของ Rich Menu ซึ่งตอนนี้มีให้เลือกแค่ 2500
  • Base Height: ความสูงของ Rich menu ซึ่งสามารถเลือกได้ 2 ขนาดคือ Large(1686px) และ Compact(843px)
  • Display Menu by Default: จะโชว์ตั้งแต่เปิดหน้าแชทเลยไหม
  • Chat Bar Title: ชื่อเมนูตรงบาร์ด้านล่าง (ผู้ใช้เห็น)
  • Action: จะถูกสร้างอัตโนมัติหลังจากเราเลือก Area ที่ให้คลิกได้ในส่วนที่ 3 ซึ่งเมื่อถูกสร้างแล้วเราสามารถกำหนดได้ว่าคลิกแล้วจะให้เกิดเหตุการณ์อะไร โดยสามารถกำหนด Action ได้ทั้ง Message, URI, Postback, Datetime Picker และ Web App Action หรือมันก็คือ LIFF นั่นเอง
    • Action ส่วนที่ต้องการให้สลับไป Rich Menu อื่นให้เลือก Type เป็น Postback Action
    • การกำหนด Action ด้วย LINE Bot Designer ทำได้สูงสุด 20 จุด

Step 2: ใช้โปรแกรม Postman เพื่อยิงค่า API สร้างและกำหนด Rich Menu ต่างๆ

  1. ดาวน์โหลดไฟล์ JSON สำหรับยิง API เพื่อแก้ไขค่าต่างๆ ด้วยโปรแกรม Postman
  2. สร้าง Collection และ Import ไฟล์ JSON
  3. แก้ไขค่าของ Token โดยคลิกที่ Richmenu > Variables และนำค่า Chanel access token ที่ Messaging API ใน LINE Developers Console

2.1 เริ่มต้นสร้าง Rich Menu

  1. Copy JSON ที่โปรแกรม LINE Bot Designer ไปยังโปรแกรม Postman ที่ Folder Set Richmenu > Create a rich menu และแทนที่ค่า JSON ที่ส่วนของ Body
  2. ค่า JSON ส่วนของ Postback ที่ต้องการสลับไปยัง Rich Menu อื่น ให้แก้ไขดังนี้
"action": {
        "type": "richmenuswitch",
        "richMenuAliasId": "(กำหนด ID เอง ตัวอย่างเช่น) rich-menu-002",
        "data": "(กำหนดค่าเอง ตัวอย่างเช่น) 2nd Menu"
}
  1. หลังจากนั้นกด Save และกดปุ่ม Send
  2. หากไม่มีอะไรผิดพลาดจะได้ค่า richMenuId ส่งกลับมา และบันทึกค่า richMenuId เก็บไว้เพื่อนำไปใช้

2.2 Upload ภาพที่จะใช้ทำ Rich Menu

  1. ที่ Folder Set Richmenu > Upload the rich menu image
  2. คำค่า richMenuId ที่บันทึกไว้ในข้อก่อนหน้า (เริ่มต้นสร้าง Rich Menu ข้อ 4.) แทนที่ใน {{richMenuId}} ในช่อง URL
  3. ที่ส่วนของ Body (binary) ให้ Browse ภาพ Rich Menu ที่เตรียมไว้และกด Send
  4. หากไม่มีอะไรผิดพลาดจะได้ค่า {} คืนกลับมา

2.3 ตั้งค่าใช้ Rich Menu ที่สร้างเป็นเมนู Default

  1. ที่ Folder Set Richmenu > Set the default rich menu
  2. คำค่า richMenuId ที่บันทึกไว้ในข้อก่อนหน้า (เริ่มต้นสร้าง Rich Menu ข้อ 4.) แทนที่ใน {{richMenuId}} ในช่อง URL และกด Send
  3. หากไม่มีอะไรผิดพลาดจะได้ค่า {} คืนกลับมา

2.4 สร้าง Rich Menu อื่นๆ

ทำตามขั้นตอน 2.1 และ 2.2 ด้วยรูปแบบ Rich Menu แบบที่สองและแบบที่สาม

2.5 สร้าง richMenuAliasId

ตามที่เราได้สร้าง Action เพื่อทำการสลับ Rich Menu และที่เราได้กำหนด richMenuAliasId ไปก่อนหน้านั้น เราจำเป็นต้องยิง Postman เพื่อให้ richMenuAliasId match กับ richMenuId ของแต่ละ Rich Menu

  1. ที่ Folder Set Richmenu Switch Action > [6]Create rich menu alias A
  2. แก้ไขค่า JSON ในส่วนของ Body ประกอบด้วย richMenuAliasId และ richMenuId และกด Send
  3. หากไม่มีอะไรผิดพลาดจะได้ค่า {} คืนกลับมา

Video บันทึกของคอร์ส LINE Dev Camp

วันที่ 1 (ช่วงบ่าย)

https://www.facebook.com/asc.enterprise.rsu/videos/1157818692302189

Special Thanks

  • คุณจิรวัฒน์ กรัณย์วิทยาการ (พี่ตี๋)
  • ผศ.ดร.วุฒิพงษ์ ชินศรี (อ.เณร)
  • LINE API Expert หลายๆ ท่านที่ให้ความรู้ในคอร์ส LINE Dev Camp จัดโดย ศูนย์บริการทางวิชาการ มหาวิทยาลัยรังสิต