จัดการ LINE Rich Menu ด้วย ABDUL Tools

ไม่รู้ว่ามีใครเป็นเหมือนผมหรือเปล่า ที่ใช้ Custom LINE Rich Menu ในการสร้างแชตบอตในหลาย use case เพื่อให้ง่ายกับผู้ใช้ในการใช้งานเบื้องต้น แต่ทุกครั้งที่ใช้ก็จะหงุดหงิดตรงที่ต้องยิง API เอง ซึ่งกว่าจะได้ใช้ ต้องยิงไปถึง 3 API คือ

1. Register เรียกไปที่ https://api.line.me/v2/bot/richmenu เพื่อสร้างและลงทะเบียน rich menu ก่อน และจะได้ {richMenuId} มา
2. Upload Image เมื่อได้ {richMenuId} มาแล้วก็ต้องเรียกไปที่ https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content เพื่ออัพโหลดรูปขึ้นไป
3. Assign to Users เรียกไปที่ https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} เพื่อ set ให้เป็น default menu

ไม่รวมที่อยากรู้ว่าสร้างไปแล้วกี่ชุด อะไรบ้าง จะลบของเก่าทิ้งก็ต้องยิงเพิ่มอีกเช่นกัน

ตัวอย่าง LINE Rich Menu

หากมี Rich Menu ที่ออกแบบไว้แล้ว ก็สามารถใช้ LINE Bot Designer ช่วยในการกำหนดค่าต่างๆ ก็จะทุ่นแรงไปเยอะครับ เพื่อให้ได้ JSON Code มาก่อน

การสร้าง rich menu ผ่าน LINE Bot Designer

จากท่าเดิมที่ใช้กัน ก็คือยิง API ต่างๆ ที่ผมพูดถึงในตอนต้น ไปทีละขั้นตอนผ่าน Postman ซึ่งก็น่าจะเป็นท่าที่หลายคนใช้อยู่ หรือใครจะเขียนสคริปต์ยิงเองแบบดิบๆ ก็ไม่ขัดนะครับ เอาที่สบายใจกันได้เลย :P

ลงทะเบียน rich menu ผ่าน Postman

จะเห็นว่า กว่าจะเสร็จได้ใช้งาน ต้องผ่านกันหลายขั้นตอน

วันนี้ผมมีระบบใหม่ที่จะมาช่วยแก้ปัญหานี้ครับ …

ว่ากันง่ายๆ ระบบนี้คือรวมทุกขั้นตอนไว้ใน “คลิกเดียว” นั่นเอง ซึ่งระบบประกอบด้วยส่วนต่างๆ ตามรูปข้างล่างนี้ครับ

โดยแต่ละส่วนประกอบด้วย

(1) LINE Channel Access Token ของบอตที่เรากำลังสร้าง Rich Menu ให้

(2) JSON Code ของ Rich Menu ซึ่งถ้าใครทำใน LINE Bot Designer ก็สามารถ Copy มาวางได้เลย

(3) Image ที่ใช้เป็นเมนู

รูปที่จะนำมาสร้าง rich menu ต้องถูกต้องตามมาตรฐานของ LINE ด้วยนะครับ

เมื่อใส่ข้อมูลครบทั้ง 1–3 แล้ว ก็สามารถกดปุ่ม [GENERATE] (4) เพื่อสร้างได้เลย และเมื่อสร้างเมนูสำเร็จ ก็จะมีข้อความที่เป็น {richMenuId} ปรากฏอยู่ใต้ปุ่ม (5)

หากไม่มีข้อความขึ้น ให้รอสักครู่แล้วกดปุ่มใหม่อีกครั้งครับ

อย่างไรก็ตาม จากขั้นตอน 1–4 จะยังไม่มีการกำหนด rich menu ให้กับ User นะครับ ซึ่งจะเผื่อไว้ในกรณีต้องการสร้างหลายเมนูไว้ก่อน หรือมีการเปลี่ยนแปลงไปมา อาจไม่จำเป็นต้อง set as default ไปทุกรอบ

(6) Rich Menu List จะแสดง rich menu ทั้งหมดที่เราเคยสร้างด้วย Access Token เดียวกัน ก็สามารถจัดการจากตรงนี้ได้เลย โดย …

กด [ X ] ถ้าต้องลบเมนูนั้นทิ้งไป

กด [ H ] ถ้าต้องการตั้งให้เมนูดังกล่าวไปเป็น Default Menu

*** ตรงนี้ต้องสังเกตนิดนึงว่า เมื่อกด [ H ] ค่าตรงที่เป็นตัวหนาด้านบนสุดเปลี่ยนด้วยหรือเปล่า ถ้าไม่เปลี่ยนอาจจะรอสักพักแล้วกดใหม่ เพราะผมพบว่า มีบางครั้งที่เรียก API ไปแล้วค่าไม่เปลี่ยน ก็เว้นระยะสักนิด แล้วลองใหม่จนกว่าจะได้นะครับ ***

เข้าไปใช้กันได้เลยที่ ABDUL Tools

หวังว่าเครื่องมือนี้จะทำให้ชีวิตของทุกคนดีขึ้นครับ :)

ขอให้สนุกกับการสร้างแชตบอตนะครับ