วิธีแสดงผล Rich Menu ใน LINE แบบ Personalize ให้ตรงกับภาษาของเครื่องผู้ใช้งาน

ในปีที่ผ่านมาบทความเกี่ยวกับ Rich Menu ถือว่าได้รับความนิยมเป็นอย่างสูง สำหรับคนที่มี LINE Official Account หรือ LINE Chatbot ด้วยข้อดีของมันที่ช่วยให้ผู้ใช้เริ่มต้นใช้งานได้ง่าย โดยการแสดงเมนูที่สำคัญต่างๆในหน้าแชท และมี Action ที่หลากหลายให้เลือกใช้ แถมขั้นตอนในการสร้าง ก็สามารถทำได้ทั้งคนทั่วไป รวมถึงคนที่มีทักษะในการเขียนโปรแกรม จึงไม่น่าแปลกใจที่ Rich Menu จะเป็นฟีเจอร์พื้นฐานที่แต่ละ Account ต้องมีกันในปัจจุบัน

สำหรับบทความนี้ ผมจะชวนทุกคนมาต่อยอดการพัฒนา Rich Menu ให้สามารถแสดงผลได้ตรงกับภาษาของเครื่องผู้ใช้แต่ละคนกัน โดยปัจจัยหลักที่เราจะต้องรู้ก่อนก็คือ “เครื่องผู้ใช้คนนั้นๆเขาใช้ภาษาอะไรอยู่?” ซึ่งหนทางที่เราจะได้ภาษาของเครื่องผู้ใช้มานั้น ไม่ใช่เรื่องยาก เพราะทาง LINE เขาเพิ่ม property ที่ชื่อว่า language มาให้ในข้อมูลโปรไฟล์ของผู้ใช้แล้ว จากที่ก่อนหน้านี้เราจะได้แค่ userId, displayName, pictureUrl และ statusMessage

ถึงตรงนี้ เราก็มีต้นทุนและไอเดียที่พร้อมละ ดังนั้นเรามาดูขั้นตอนในการพัฒนากันเลย

1. เตรียม LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase
2. เตรียม Rich Menu สำหรับ ภาษาไทย และ ภาษาอังกฤษ
3. สร้างเงื่อนไขเพื่อดักจับ Webhook Event ประเภท Follow
4. ดึงค่า Language มาจากโปรไฟล์ผู้ใช้
5. แสดงผล Rich Menu ให้ตรงตามภาษาของเครื่องผู้ใช้คนนั้นๆ

1. เตรียม LINE Chatbot ที่พัฒนาด้วย Cloud Functions for Firebase

สำหรับใครที่ยังไม่เคยพัฒนา LINE Chatbot ด้วย Cloud Functions for Firebase ให้ทำตามขั้นตอนของบทความด้านล่างนี้(ข้อ 1–3 ก็พอ) แต่หากใครมีประสบการณ์ตรงนี้แล้ว ข้ามไปขั้นตอนที่ 2 ได้เลย

สร้าง LINE Bot ด้วย Messaging API และ Cloud Functions for Firebase

หมายเหตุ: เนื่องจากการพัฒนา LINE Chatbot ด้วย Cloud Functions คุณจำเป็นต้องเรียก API นอก Google domain ทำให้คุณต้องเปลี่ยนแพลนการใช้งานจาก Spark ไปเป็น Blaze แต่ข้อดีคือคุณจะได้โควต้าฟรีเพิ่มขึ้นใน Blaze แบบทวีคูณ

2. เตรียม Rich Menu สำหรับ ภาษาไทย และ ภาษาอังกฤษ

ขั้นตอนนี้จะขอแยกวิธีการออกเป็น 3 ขั้นตอนย่อย โดยจะอิงจากบทความด้านล่างนี้

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

2.1 สร้างภาพ Rich Menu ด้วย Rich Menu Maker

ให้ผู้อ่านทำตามข้อ 1 ของบทความ โดยสร้างภาพสำหรับ Rich Menu ทั้ง 2 ภาษา ซึ่งในตัวอย่างนี้ จะสร้างภาพมา 2 ภาพ(ดาวน์โหลดไปลองได้)

ตัวอย่าง Rich Menu สำหรับภาษาอังกฤษ

ตัวอย่าง Rich Menu สำหรับภาษาไทย

2.2 สร้าง JSON สำหรับ Rich Menu ด้วย LINE Bot Designer

ให้ผู้อ่านทำตามข้อ 3 ของบทความ โดยให้สร้าง JSON สำหรับ Rich Menu ทั้ง 2 ภาษา ซึ่งผลลัพธ์จะต้องได้ JSON ออกมา 2 ก้อน

ตัวอย่างนี้หากคลิก Rich Menu ก็จะไปเปิดเว็บของ LINE Developers

2.3 สร้าง Rich Menu ผ่าน Messaging API

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

3. สร้างเงื่อนไขเพื่อดักจับ Webhook Event ประเภท Follow

เราจะดักจับ Webhook Event ประเภท Follow เพื่อที่จะแสดงผล Rich Menu ให้ตรงตามภาษาของเครื่องผู้ใช้เมื่อเขาเพิ่ม Chatbot ของเราเป็นเพื่อน หรือ Unblock ตัว Chatbot ของเรา

15 สัญญาณจาก Webhook Events ที่จะปลุกให้ LINE Bot ของคุณตื่นจากภวังค์

จากโครงสร้าง Payload ใน Follow Event ตามข้อ 2 ของบทความด้านบนนี้ สิ่งที่เราสนใจจะมี 2 อย่าง คือ events[0].type และ events[0].source.userId ดังนั้นเราจะเขียนเงื่อนไขและเก็บค่า userId ไว้แบบนี้

exports.LineBot = functions.https.onRequest((req, res) => {
  const event = req.body.events[0];
  if (event.type === "follow") {
    const userId = event.source.userId;
  }
  return res.end();
})

4. ดึงค่า Language มาจากโปรไฟล์ผู้ใช้

ขั้นตอนนี้เราจะมาชี้ชัดว่าเครื่องผู้ใช้คนนั้นๆเขาใช้ภาษาอะไร โดยการใช้ userId ที่ได้จากขั้นตอนที่แล้ว มาดึงข้อมูลโปรไฟล์ตามข้อ 2.1 ของบทความด้านล่างนี้

รู้ครบจบในที่เดียวกับการดึง User Profile ผ่าน API ต่างๆใน LINE

ซึ่งผมจะสร้างฟังก์ชัน getProfile() ไว้แบบนี้

const getProfile = (userId) => {
  return request.get({
    headers: LINE_HEADER,
    uri: `${LINE_MESSAGING_API}/profile/${userId}`,
    json: true
  });
}

จากนั้นก็เรียกฟังก์ชันดังกล่าวโดยส่งตัวแปร userId เข้าไป แค่นี้ก็เรียบร้อย

exports.LineBot = functions.https.onRequest(async (req, res) => {
  const event = req.body.events[0];
  if (event.type === "follow") {
    const userId = event.source.userId;
    const profile = await getProfile(userId);
    const language = profile.language;
  }
  return res.end();
})

หมายเหตุ: เนื่องจากเราจะต้องรอ callback จากฟังก์ชัน getProfile() ดังนั้นเพื่อให้โค้ดกระชับขึ้น ผมจึงใช้ async/await เข้ามาช่วย

5. แสดงผล Rich Menu ให้ตรงตามภาษาของเครื่องผู้ใช้คนนั้นๆ

มาถึงขั้นตอนสุดท้ายละ นั่นก็คือการกำหนด Rich Menu ให้ตรงตามภาษาของผู้ใช้แต่ละคน โดยวิธีการลิงค์นั้นเราจะทำตามข้อ 4.6 ของบทความ เก่ง Rich Menu ใน LINE ให้ครบสูตร ซึ่งผมจะสร้างฟังก์ชัน linkRichMenu() ไว้ และเรียกใช้มันโดยส่งตัวแปร userId และ language ที่ได้จากขั้นตอนก่อนหน้านี้เข้าไป และนี่คือโค้ดทั้งหมดครับ

พร้อมแล้วก็ shell เข้าไปที่โฟลเดอร์ functions แล้ว deploy ด้วยคำสั่ง

firebase deploy --only functions

เสร็จแล้วก็มาดูผลลัพธ์กันหน่อย

ปิดท้าย

จะเห็นว่าการที่ LINE เพิ่ม language เข้ามาในโปรไฟล์ของผู้ใช้นั้น เราสามารถจะหยิบมันไปสร้างประสบการณ์แบบ Personalize ที่นอกเหนือจาก Rich Menu ได้อีกหลายอย่าง เช่น การ reply กลับด้วยภาษาที่ผู้ใช้ใช้งานอยู่เป็นต้น ซึ่งผมหวังว่าเทคนิคในบทความนี้จะช่วยให้ผู้อ่านสามารถนำไปประยุกต์ใช้ และสร้างสิ่งที่เรียกว่า “Love at first sight” หรือ “รักแรกพบ” ให้กับ LINE Chatbot ของคุณได้

ก่อนจากฝากทุกท่านกด Follow ตัว Publication ไว้ด้วยนะครับ เพื่อที่จะได้ไม่พลาดบทความตอนใหม่ๆจากเรา สำหรับวันนี้ต้องลาไปก่อน แล้วพบกันใหม่บทความหน้า 🙏 สวัสดีพี่น้องนักพัฒนาชาวไทย