เพิ่ม Speed การสลับริชเมนูใน LINE แบบ Personalize ให้เร็วระดับแสงด้วย Richmenu Switch Action

เชื่อว่าคนที่ใช้งาน OA(LINE Official Account) ในไทยตอนนี้ คงไม่มีใครไม่รู้จัก Rich Menu หรือ เมนูที่ช่วยนำทางผู้ใช้งานไปสู่บริการหลักๆของเรา ซึ่งการที่จะได้มันมาก็แสนจะง่ายเพียงแค่ใช้เครื่องมือ หรือ จะเขียนโปรแกรมก็สามารถทำได้

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

จากภาพด้านบนจะเห็นว่าการสลับไปมาของ Rich Menu แบบที่พบเห็นในปัจจุบัน จะ delay พอสมควร เนื่องจากเบื้องหลังการสลับนั้นมีหลายขั้นตอนด้วยกัน

1. ผู้ใช้กด Rich Menu เพื่อส่งคำขอผ่านข้อความ หรือ Postback action จากห้องแชทไปที่ LINE server
2. LINE server จะส่ง Webhook event ต่อไปยัง Bot application ของเรา
3. Bot appliation จะประมวลผลว่า Webhook event ดังกล่าวต้องการสลับ Rich Menu เป็นแบบใด และจะส่งคำขอเปลี่ยนกลับไปยัง LINE server
4. LINE server จะทำการเปลี่ยน Rich Menu ให้ผู้ใช้คนที่ร้องขอ

สังเกตได้ว่า กว่าที่จะสลับ Rich Menu ให้ผู้ใช้เห็นได้นั้น จะต้องมี request ถึง 4 ครั้งด้วยกัน แน่นอนว่า request เยอะ ก็ทำให้ latency เพิ่มมากขึ้นตามไปด้วย

รู้จักกับ Richmenu Switch Action

Richmenu Switch Action คือ action ที่เกิดมาเพื่อ Rich Menu ซึ่งจะเข้ามาช่วยให้ผู้ใช้สามารถสลับ Rich Menu ได้รวดเร็วมากกว่าเดิมแบบเท่าตัว เพราะ request ที่เกิดขึ้น จะเหลือเพียง 2 request ระหว่าง Client กับ LINE server เท่านั้น

1. ผู้ใช้กด Rich Menu เพื่อส่งคำขอไปที่ LINE server
2. LINE server รับคำขอและสลับ Rich Menu ให้ผู้ใช้คนที่ร้องขอ

หมายเหตุ: ตอนที่ LINE server ได้รับคำขอ นอกจากมันจะสลับ Rich Menu ให้ผู้ใช้แล้ว มันก็จะส่ง Wehook แบบ Postback event ให้ Bot application พร้อมกันไปด้วย

สำหรับวิธีการสร้าง Rich menu แบบที่มี Richmenu Switch Action จะประกอบไปด้วย 4 ขั้นตอน

1. เตรียม Rich Menu สำหรับแบบ A และ B
2. สร้าง Rich Menu
3. กำหนด Rich Menu Alias
4. กำหนด Rich Menu ให้ผู้ใช้
5. API อื่นๆที่เกี่ยวข้องกับ Alias

1. เตรียม Rich Menu สำหรับแบบ A และ B

ให้สร้างรูปสำหรับ Rich Menu ทั้งแบบ A และ B โดยทำตาม ข้อ 1 ของบทความด้านล่างนี้

เก่ง Rich Menu ใน LINE ให้ครบสูตร

จากนั้นให้สร้าง JSON สำหรับ Rich Menu ทั้ง 2 แบบตาม ข้อ 3 ของบทความด้านบน ซึ่งตัวอย่างผมจะตั้งชื่อ Rich Menu ว่า richmenu-a(อีกรูปชื่อ richmenu-b) พร้อมทั้งกำหนด area ของปุ่ม More(อีกรูปคือปุ่ม Back) ให้สามารถคลิกได้ โดยยังไม่ต้องสนใจการตั้งค่า Action ในขั้นตอนนี้

ผลลัพธ์จะต้องได้ JSON ออกมา 2 ก้อน

หมายเหตุ: การตั้งชื่อ(name) สามารถใช้ ขีดกลาง คั่นได้ แต่ห้ามมีช่องว่าง

2. สร้าง Rich Menu

ขั้นตอนนี้ให้เอา JSON ที่ได้จากขั้นตอนก่อนหน้านี้มาปรับแต่ง Action ใหม่ตามนี้

// Action ของ Rich Menu แบบ A
areas.action.type: "richmenuswitch"
areas.action.richMenuAliasId: "richmenu-b"
areas.action.data: "richmenu=b"
// Action ของ Rich Menu แบบ B
areas.action.type: "richmenuswitch"
areas.action.richMenuAliasId: "richmenu-a"
areas.action.data: "richmenu=a"

ตัวอย่าง JSON ของ Rich Menu แบบ A

เมื่อเราปรับแต่ง JSON ของ Rich Menu ทั้ง 2 แบบแล้ว ก็ให้สร้าง Rich Menu โดยทำตามข้อ 4.1(Create) และ 4.2(Upload) ของบทความ โดยอาจใช้เครื่องมืออย่าง Postman มาช่วย ซึ่งผลลัพธ์จะต้องได้ richMenuId ออกมาเก็บไว้ 2 IDs นาจา

3. กำหนด Rich Menu Alias

ขั้นตอนนี้เราจะต้องกำหนด Alias ให้กับ Rich Menu รู้จักกันก่อน ทั้งแบบ A และ B

Headers:
  + Authorization: Bearer {channel access token}
  + Content-Type: application/json
Endpoint: https://api.line.me/v2/bot/richmenu/alias
Method: POST
Body:
  + richMenuId: ID ของ Rich Menu ที่ได้จากข้อ 2
  + richMenuAliasId: ชื่อของ Rich Menu โดยสามารถระบุเป็น a-z, A-Z, 0-9, _, และ - สูงสุด 100 ตัวอักษร

โดยหากสำเร็จจะได้ status 200 และจะได้ {} กลับมา

4. กำหนด Rich Menu ให้ผู้ใช้

ขั้นตอนสุดท้ายก็ให้เรานำ Rich Menu ที่ได้ไปแสดงผลกับ OA หรือ LINE Chatbot โดยจะกำหนดแบบทุกคนเห็นเหมือนกัน ข้อ 4.3 หรือจะกำหนดให้เห็นแบบเฉพาะบุคคล ข้อ 4.6 หรือ 4.7 ของบทความ เสร็จแล้วก็มาดูผลงานกัน ว่ามันเร็วขึ้นแค่ไหน!

5. API อื่นๆที่เกี่ยวข้องกับ Alias

5.1 Update Rich Menu Alias

ความสะดวกอย่างหนึ่งในการกำหนด Rich Menu Alias ก็คือ การที่เราสามารถอัพเดท Rich Menu ID ปลายทางได้โดยไม่ต้องกลับไปทำข้อ 1–3 ใหม่ แต่วิธีการนี้ไม่ได้ real-time นะครับ จะมีช่วงเวลา Cache อยู่แพร๊บนึงจึงจะมีผล

Headers:
  + Authorization: Bearer {channel access token}
  + Content-Type: application/json
Endpoint: https://api.line.me/v2/bot/richmenu/alias/{richMenuAliasId}
Method: POST
Param:
  + richMenuAliasId: ชื่อของ Rich Menu (สูงสุด 100 ตัวอักษร)
Body:
  + richMenuId: ID ของ Rich Menu ที่อยู่ใน channel เดียวกัน

โดยหากสำเร็จจะได้ status 200 และจะได้ {} กลับมา

5.2 Get List of Rich Menu Alias

Headers:
  + Authorization: Bearer {channel access token}
Endpoint: https://api.line.me/v2/bot/richmenu/alias/list
Method: GET

โดยหากสำเร็จจะได้ status 200 และจะได้ JSON ที่มีโครงสร้างแบบนี้คืนมา

{
  "aliases": [
    {
        "richMenuAliasId": "richmenu-alias-a",
        "richMenuId": "richmenu-862e6ad6..."
    },
    {
      "richMenuAliasId": "richmenu-alias-b",
      "richMenuId": "richmenu-88c05ef6..."
    }
  ]
}

5.3 Get Rich Menu Alias Info

Headers:
  + Authorization: Bearer {channel access token}
Endpoint: https://api.line.me/v2/bot/richmenu/alias/{richMenuAliasId}
Method: GET
Param:
  + richMenuAliasId: ชื่อของ Rich Menu (สูงสุด 100 ตัวอักษร)

โดยหากสำเร็จจะได้ status 200 และจะได้ JSON ที่มีโครงสร้างแบบนี้คืนมา

{
  "richMenuAliasId": "richmenu-alias-a",
  "richMenuId": "richmenu-88c05ef6..."
}

5.4 Delete Rich Menu Alias

เนื่องจาก 1 Chatbot จะมี Rich Menu Alias ได้สูงสุด 1,000 ดังนั้นกรณีที่มันติด limit แล้วต้องการสร้างเพิ่ม คุณก็จำเป็นที่ต้องลบ Alias ที่คุณไม่ใช้งานออกไปก่อน

Headers:
  + Authorization: Bearer {channel access token}
Endpoint: https://api.line.me/v2/bot/richmenu/alias/{richMenuAliasId}
Method: DELETE
Param:
  + richMenuAliasId: ชื่อของ Rich Menu (สูงสุด 100 ตัวอักษร)

โดยหากสำเร็จจะได้ status 200 และจะได้ {} กลับมา

สรุป

Richmenu Switch Action ที่ทาง LINE ปล่อยออกมา ได้ช่วยให้ Rich Menu ในมุมมองของผู้ใช้ สลับได้แบบ real-time เลยทีเดียว แถมงานของฝั่งนักพัฒนาก็ลดลงอีกด้วย บอกเลยว่าใครอ่านมาถึงตรงนี้ ไม่ใช้ก็ไม่รู้จะว่ายังไงแล้ว 555

สุดท้ายนี้ หากบทความนี้เป็นประโยชน์กับคุณ ฝากกด Clap กด Share และกด Follow ตัว publication: LINE Developers Thailand เพื่อที่คุณจะไม่พลาดบทความตอนใหม่ๆจากเรา สำหรับวันนี้ต้องขอตัวลาไปก่อน แล้วพบกันใหม่บทความหน้าครับ