Loading Animation สิ่งเล็กๆที่มาเติมเต็ม UX ให้กับ LINE Chatbot ของคุณ

หนึ่งใน Pain point ที่นักพัฒนา LINE มักจะเจอกันคือ การ handle ประสบการณ์ผู้ใช้ระหว่างที่รอ chatbot ตอบกลับ โดยเคสนี้จะเกิดกับการที่ระบบจำเป็นต้องใช้เวลาในการประมวลผลข้อมูลที่มากกว่าปกติ เช่น การนำรูปไปทำ Image Processing, การเอาข้อมูลไป manipulate, การออกรายงาน, หรือการเชื่อมต่อ Gen AI เป็นต้น ซึ่งตัวอย่างหนึ่งที่ผมเองก็เคยต้องรอและลุ้นการตอบกลับของ LINE Chatbot คือการ detect โลโก้จากภาพที่ส่งไปใน Live Coding

Live coding จากงาน LINE THAILAND DEVELOPER CONFERENCE 2019

การต้องรอการตอบสนองที่นานกว่าปกตินี้เอง ทำให้ผู้ใช้งานจำนวนมากรู้สึกว่าระบบขัดข้อง และนำมาซึ่งการส่งข้อความซ้ำๆไปในห้องแชท เพื่อหวังว่าจะกระตุ้นการตอบกลับ หรือที่วัยรุ่นเขาเรียกกันว่าการ “ฟลัด”(flood) และการฟลัดนี้เองที่เป็นหนึ่งในสาเหตุที่ทำให้ UX การใช้งาน LINE Chatbot เพี้ยนไป รวมถึงอาจทำให้ระบบทำงานหนักขึ้นและมีปัญหาตามมาได้

โดยปัญหานี้ถูกยกขึ้นมาถามใน community เรื่อยมา และ solution ที่เป็นไปได้ก่อนหน้านี้คือการ reply สถานะการทำงานไปก่อน แล้วต่อด้วยการ push ข้อความผลลัพธ์ตามมา แต่วิธีดังกล่าวนี้นักพัฒนาก็จำเป็นจะต้องเสียโควต้าของข้อความไปด้วย

และแล้ว เมษายน ปี 2024 ฝันของนักพัฒนาในบ้านเราก็เป็นความจริง เมื่อทาง LINE ได้รับฟัง feedback เรื่องนี้ และออกฟีเจอร์ Loading Animation เพื่อมาปรับปรุง UX การใช้งาน LINE Chatbot ให้ดีขึ้น

รู้จักกับ Loading Animation

ฟีเจอร์ Loading Animation นี้จะเป็นฟีเจอร์ที่มาในรูปแบบของ API ที่ให้นักพัฒนาสามารถ request เพื่อให้ตัว LINE Chatbot แสดงสถานะการกำลังประมวลผลอยู่ โดยมีหน้าตาเป็นแบบนี้

โดยตัว Loading Animation จะมี เงื่อนไขในการแสดงผล และ เงื่อนไขที่ตัวมันจะหายไปดังนี้

เงื่อนไขที่ Loading Animation จะแสดงออกมาได้

• มันจะสามารถแสดงผลได้ในห้องแชทแบบ one-on-one ระหว่าง ผู้ใช้งาน และ LINE Chatbot เท่านั้น
• มันจะแสดงผลได้ในขณะที่ผู้ใช้งานเปิดหน้าแชทของ LINE Chatbot เท่านั้น

เงื่อนไขที่ Loading Animation จะหายไป

• มันจะหายไปทันทีเมื่อ LINE Chatbot ส่งข้อความมาใหม่
• มันจะหายไปทันทีเมื่อผู้ใช้งานออกจากหน้าแชทนั้นๆ
• มันจะหายไปทันทีเมื่อผ่านระยะเวลาที่กำหนดให้มันแสดงผลจาก API ที่ request

Loading Animation API

คราวนี้เรามาดู spec ของ API กันหน่อยว่ามีรายละเอียดอะไรบ้าง

Endpoint URL: https://api.line.me/v2/bot/chat/loading/start

Method: post

Headers:
  content-type: application/json
  Authorization: Bearer {channel access token}

Body:
  chatId: userId ของผู้ใช้งาน (groupId กับ roomId หมดสิทธิ์นาจา)
  loadingSeconds: [Optional] ระยะเวลาในการแสดงผลเป็นวินาที (5-60 เพิ่มลดได้ทีละ 5) โดยค่า default คือ 20

Rate limit ของ Loading Animation API คือ 100 requests/วินาที

ซึ่งผมก็ได้ลองเอามาประยุกต์ใช้งานจริงกับ LINE Chatbot ของ LINE Developer TH แล้ว โดยเอาง่ายๆคือเมื่อไรที่มี webhook events เข้ามาผมก็ request ตัว API ทันทีเลยตามตัวอย่าง JavaScript ด้านล่างนี้

exports.webhook = onRequest(async (req, res) => {
  const events = req.body.events;
  for (const event of events) {
    const userId = event.source.userId;
    await loading(userId);
    switch (event.type) {
      case "message":
        // ...
        break;
      // ...
    }
  }
  res.end();
});

function loading(userId) {
  return axios({
    method: "post",
    url: "https://api.line.me/v2/bot/chat/loading/start",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.CHANNEL_ACCESS_TOKEN}`
    },
    data: { chatId: userId }
  });
}

ส่วนใครที่อยากลองสัมผัสประสบการณ์​ก่อนว่า Loading Animation มันเป็นอย่างไร ให้เพิ่มเพื่อนกับ @linedevth ใน LINE แล้วพูดคุยกับ LINE Chatbot ตัวนี้ดูได้ครับ

หมายเหตุ

• Loading Animation API ใช้งานได้ฟรีไม่มีค่าใช้จ่าย
• Loading Animation สามารถแสดงผลได้ใน LINE สำหรับ iOS และ Android ตั้งแต่ v13.16.0 และใน LINE สำหรับ Desktop ตั้งแต่ v9.1.2 เป็นต้นไป
• กรณีที่เวอร์ชันของ LINE สำหรับ Android ตรงตามเงื่อนไข และ HTTP status code จากการ request ตัว API ได้ 202 กลับมาแต่ Loading Animation ไม่แสดงผล ให้ kill app แล้วลองใหม่
• หากมีการ request ตัว API ซ้ำในขณะที่ Loading Animation เดิมยังไม่หายไป ตัว Loading Animation จะแสดงผลต่อไป โดยจะยึดเวลาการหายไปของ request ล่าสุดไปแทน

สรุป

สำหรับฟีเจอร์ Loading Animation ต้องขอชื่นชมทาง LINE เลยว่างานนี้ เขาคิดมาครบดีจริงๆ ทั้งเรื่องการหายไปของ Loading Animation เมื่อมีข้อความใหม่มาจาก LINE Chatbot หรือเรื่องการหายไปแบบที่นักพัฒนาสามารถกำหนดเวลาเองได้ แถมใช้งานฟรีอีก ซึ่งผมมั่นใจเลยว่าฟีเจอร์นี้จะช่วยยกระดับ UX การใช้งาน LINE Chatbot ของคุณให้สมูธขึ้นได้อย่างแน่นอน

ท้ายนี้ ใครที่สนใจอยากลองใช้ Loading Animation ผมแนะนำให้ลองเอาไปประยุกต์เข้ากับ LINE Chatbot x Gen AI ดู ซึ่งมันจะเหมาะมากๆเมื่อนำไปคั่นจังหวะที่ Gen AI กำลังสร้าง content โดยทุกคนสามารถเริ่มต้นง่ายๆกับคอร์สเรียนออนไลน์ Building LINE Chatbot with ChatGPT and Gemini นี้ ซึ่งก็ฟรีอีก ^^ แล้วพบกันใหม่ในบทความหน้า สวัสดีค้าบ