Botnoi Voice

6 ก.พ. 2567

Label

UX/UI

สอนทำ Dynamic Flex Message ดึงข้อมูลจาก Google Sheet มาแสดง ผ่าน Botnoi.ai EP.2 [พร้อมโค้ด]

ในการดึงข้อมูลจาก Google Sheet มาแสดงผลบน Flex Message ผ่านแพลตฟอร์ม Botnoi.ai นั้นง่ายมาก โดยเมื่อได้ทำแก้ไขข้อมูลในชีทแล้ว ก็จะอัพเดทเวอร์ชั่นไปยัง Flex Message ทันทีเมื่อเรียกแสดงอีกครั้ง ซึ่งในทางเทคนิคนั้นสามารถทำได้หลายวิธี โดยวิธีนี้เป็นวิธีที่ทีมแชทบอทลงมติว่าง่ายที่สุด!!

Flex Message แสดงข้อมูลจาก Google Sheet หน้าตาเป็นยังไง?

Flex Message EP.2 ของเราที่นำเสนอต่อไปนี้ถูกออกแบบมาเพื่อแสดงข้อมูลตามการค้นหา โดยที่ข้อมูลที่เราต้องการค้นหานั้นจะถูกเก็บในรูปแบบของพารามิเตอร์ <<PARAMETER>> จากแพลตฟอร์ม botnoi.ai และจะส่งไปยัง API เพื่อค้นหาแถวแรกและดึงข้อมูลของคอลัมอื่น ๆ ในแถวเดียวกันออกมา การทำตัวอย่างนี้จำเป็นที่จะต้องใช้ Dialogue เพื่อทำการเก็บข้อมูลชื่อที่ต้องการค้นหา และดึงข้อมูลที่ถูกต้องออกมาจาก Google Sheet

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

ขั้นตอนที่ 1 : เข้าใจแนวคิดและหลักการ

หลักการในการทำ Dynamic Flex ของตัวอย่างนี้ สามารถอธิบายออกมาได้ตามภาพนี้เลย

เราจะตั้งไว้ว่าถ้าหากผู้ใช้งานพิมพ์ข้อความที่แสดงเจตนาว่าต้องการทราบข้อมูลของพนักงานในบริษัท บอทจะถามกลับว่าต้องการทราบข้อมูลของใคร เมื่อผู้ใช้งานจะต้องพิมพ์ชื่อนั้นๆส่งมาให้เก็บลงตัวพารามิเตอร์ <name> และส่งข้อมูลไปยัง API

จากนั้น API จะนำชื่อที่ได้มาทำการค้นหาข้อมูลส่วนอื่นๆ เช่น ตำแหน่ง รูปภาพ ช่องทางการติดต่อในแถวเดียวกันกับชื่อที่ <name> อยู่ใน Google Sheet ออกมา สุดท้ายคือการนำค่ามาแสดงผลผ่าน Flex Message

การใช้งานนี้เหมาะสำหรับการค้นหาและแสดงข้อมูลที่สอดคล้องกับเงื่อนไขที่กำหนด ไม่ว่าเงื่อไขนั้นจะเป็นข้อความ Customer ID หรือข้อมูลเฉพาะใดใดก็แล้วแต่ เช่น การส่งเมนูเครื่องดื่มเมื่อผู้ใช้งานต้องการเมนูเครื่องดื่ม การส่งรายละเอียดประวัติการจองของลูกค้า ข้อมูลนามบัตรของพนักงานในบริษัท ฯลฯ

ขั้นตอนที่ 2 : การเตรียม API สำหรับรับส่งข้อมูลผ่าน Google Apps Script

function doGet(request) {
  var url = "YOUR_SHEET_URL"; //เปลี่ยนเป็น URL SHEET ของเรา
  var ss = SpreadsheetApp.openByUrl(url);
  var sheetName = 'YOUR_SHEET_NAME'; //เปลี่ยนเป็นชื่อ SHEET เของรา


  var c1 = request.parameter.col1;
  var c2 = findColumnValue(ss, sheetName, c1, 2);
  var c3 = findColumnValue(ss, sheetName, c1, 3);
  var c4 = findColumnValue(ss, sheetName, c1, 4);


  var result = {
    col1: c1,
    col2: c2,
    col3: c3,
    col4: c4,
  };
  console.log(result)
  return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}


function findColumnValue(ss, sheetName, c1, colIndex) {
  var sheet = ss.getSheetByName(sheetName);
  var values = sheet.getRange(1, 1, sheet.getLastRow(), 1).getValues();
  for (var i = 0; i < values.length; i++) {
    if (values[i][0] == c1) {
      return sheet.getRange(i + 1, colIndex).getValue();
    }
  }
  return null; // Return null if value is not found
}

หลักการทำงานของโค้ด

1. เปิด Spreadsheet และเลือก Sheet

2. ดึงค่า parameter จาก request

3. ใช้ findColumnValue เพื่อหาค่าในคอลัมน์ที่ระบุ

4. สร้าง Object ที่เก็บค่าที่หาได้

5. สร้าง TextOutput ในรูปแบบ JSON และกำหนด MIME Type

6. ฟังก์ชัน findColumnValue สำหรับค้นหาค่าในคอลัมน์ที่กำหนด

Query Parameter

เมื่อรันโค้ดหรือทดสอบการใช้งานเรียบร้อย สามารถทำการ deploy แอปพลิเคชันเว็บของ Google Apps Script โดยที่จำเป็นต้องกำหนด Query Parameter ใน URL ได้โดยเพิ่ม ? หลัง URL และระบุค่า parameter ตามหลัง ผ่านรูปแบบที่เคยได้อธิบายหลักการเอาไว้ในตัวอย่างแรก จากนั้นก็สามารถนำ Deploy Link นี้ไปสร้างและบันทึกลงแพลตฟอร์ม Botnoi.ai ได้เลย

การแก้ไขและปรับแต่ง Flex Message

เมื่อเราได้ออกแบบ Flex Message จัดวางองค์ประกอบต่างๆได้เป็นอย่างดีแล้ว องค์ประกอบหลักๆของสิ่งที่จะทำให้เป็น Dynamic ที่สามารถเปลี่ยนแปลงข้อมูลมีทั้งสิ้น 4 อย่าง ประกอบไปด้วย รูปโปรไฟล์ ชื่อ ตำแหน่ง และช่องทางการติดต่อที่ได้ใส่เป็นช่องทางโซเซียลมีเดีย

หลักการของการทำจะใช้หลักการเดียวกับ ตัวย่างที่ 2 เลย คือต้องเรียกค่าจาก API ผ่านรูปแบบการเรียกแสดงค่าคือ <<API_NAME.PARAMETER>>

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

ขั้นตอนที่ 3 : การสร้าง Dialogue ในแพลตฟอร์ม botnoi.ai

ในการค้นหาข้อมูลชื่อของโค้ดนั้น ข้อมูลที่นำไปค้นหาจำเป็นต้องเขียนถูกต้องตรงกัน 100% เช่น ผู้ใช้งานต้องส่งข้อความว่า Winn เท่านั้น ถ้าเป็น Win หรือ พี่วินก็จะไม่สามารถดึงข้อมูลมาแสดงได้ วิธีแก้มีหลายวิธี เช่น การแจ้งเป็นข้อความ, การทำ ImageMap, หรือการทำ Flex แสดงข้อมูล ฯลฯ แต่ในตัวอย่างนี้จะใช้ Quick Reply เป็นการยกตัวอย่าง

เพราะฉะนั้นก่อนที่เราจะไปสร้าง Dialogue ต้องไปสร้าง Quick Reply ที่ประกอบไปด้วยชื่อที่ถูกต้องตามที่เราได้ใส่เข้า Google Sheet เพื่อป้องกันความผิดพลาดจากการไม่พบข้อมูล

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

หลักการทำ Dialogue จะสามารถทำได้ดังภาพด้านล่างนี้เลย คือเริ่มจากการถามชื่อบุคคลที่ผู้ใช้งานต้องการทราบข้อมูลติดต่อ ตั้งเงื่อนไขคำตอบของผู้ใช้งานเป็น RegEx,Character จากนั้นเพิ่ม API และ Flex ที่ได้สร้างไว้ก่อนหน้านี้ตามลำดับ เป็นอันเสร็จ

ขั้นตอนที่ 4 :การสร้าง Intent ในแพลตฟอร์ม botnoi.ai

ในส่วนของ Intent ให้ใส่ Response ตามภาพด้านบนได้เลย โดยสามารถเพิ่ม Dialogue ที่สร้างเอาไว้ที่เนื้อหาก่อนหน้านี้ได้เลย

ง่ายใช่ไหมคะทุกคน ขั้นตอนการทำไม่ซับซ้อนเลยแถมยังสามารถนำไปปรับใช้งานการให้ข้อมูลต่างๆ โดยคนที่ไม่มีพื้นฐานด้านโค้ดเลยก็สามารถทำได้ !

สามารถติดตามข้อมูลและอัพเดตเกี่ยวกับ Botnoi Group และ Botnoi Ai ได้ผ่านทาง Website และ Facebook พร้อมทั้งเข้าร่วมการสนทนาและแลกเปลี่ยนความคิดเห็นในชุมชนกลุ่ม AI chatbot by BOTNOI เกี่ยวกับเทคโนโลยี AI และ Chatbot !

ติดตามข่าวสารความเคลื่อนไหวของเราได้ที่ : Botnoi Group
แพลตฟอร์มสำหรับสร้างแชทบอท : Botnoi.ai
ดูตัวอย่างแชทบอทของนักศึกษาฝึกงานกัน : EP.1 แชทบอทร้านขายของออนไลน์
วิดิโอสอนทำก่อนหน้านี้ : Dynamic Flex Message วิธีการเก็บข้อมูล
ตอนถัดไป : EP.3

Back

กิจกรรม

CategoriesType

CategoriesAIType

Anthropic has released the new Claude 3.5 Sonnet, which is smarter, faster, and more playful than ever.

1 ก.ค. 2567

CategoriesType

CategoriesAIType

มาร์แล้ว! MarAds สตูดิโอ AI ช่วยขายของ ที่จะทำให้คุณหาเงินได้ง่ายขึ้น 10 เท่า!!

27 มิ.ย. 2567

อ่านต่อ

photograph-of-a-successful-business-using-ai-voicebot

CategoriesType

CategoriesAIType

เคล็ดลับเพิ่มประสิทธิภาพการดูแลลูกค้าด้วย AI Voicebot

18 มิ.ย. 2567

อ่านต่อ

CategoriesType

CategoriesAIType

Anthropic has released the new Claude 3.5 Sonnet, which is smarter, faster, and more playful than ever.

1 ก.ค. 2567

CategoriesType

CategoriesAIType

มาร์แล้ว! MarAds สตูดิโอ AI ช่วยขายของ ที่จะทำให้คุณหาเงินได้ง่ายขึ้น 10 เท่า!!

27 มิ.ย. 2567

อ่านต่อ

ร่วมกันพัฒนาและสร้างสรรค์

อนาคตใหม่ ไปพร้อมกับเรา

ติดต่อฝ่ายขาย

ร่วมกันพัฒนาและสร้างสรรค์

อนาคตใหม่ ไปพร้อมกับเรา

ติดต่อฝ่ายขาย