Botnoi Voice

19 ก.พ. 2567

Label

UX/UI

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

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

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

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

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

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

เนื่องจากในตัวอย่างนี้ไม่ได้จำเป็นที่จะต้องตอบคำถามที่เจาะจงหรือคำถามที่มีความต่อเนื่องแต่อย่างใด จึงไม่จำเป็นที่จะต้องใช้ Dialogue ในการทำงาน แต่วิธีการนี้จะต้องใช้ Intent ในการทำงาน

สำหรับใครที่ตั้งให้สามารถกดได้ใน Rich Menu ได้นั้นก็คงยังต้องสร้าง Intent ในการใช้งานด้วยเช่นกัน เนื่องจาก Rich Menu นั้นรองรับการใช้แค่ 1 Object เท่านั้นแต่ในตัวอย่างนี้เราจะใช้ 2 Object คือ API และ Flex Message วิธีคือใช้วิธีการตั้ง Action เป็น Message ที่ได้เทรนไว้ใน Expected Phrase ของ Intent

Flex ในตัวอย่างที่ 2 นี้สามารถนำใช้งานทั่วไปและประยุกต์ได้หลากหลาย ไม่ว่าจะเป็นการทำสถานที่ที่ใกล้เคียงสำหรับแชทบอทโรงแรม เมนูอาหารแนะนำวันนี้สำหรับแชทบอทร้านอาหาร สุ่มคำศัพท์ภาษาอังกฤษสำหรับแชทบอทสอนภาษาต่างประเทศ ฯลฯ ขึ้นอยู่กับความคิดสร้างสร้างสรรค์และการนำไปใช้งานด้วยเช่นกัน

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

function doGet(request) {
  var ss = SpreadsheetApp.openByUrl("YOUR_SHEET_URL");
  var sheet = ss.getSheetByName('YOUR_SHEET_NAME');


  const dataRange = sheet.getDataRange();
  const values = dataRange.getValues();
  const headerRow = values.shift();
  const randomIndex = Math.floor(Math.random() * values.length);
  const rowData = values[randomIndex];
  const col1 = rowData[0]; // ใช้ตัวแปร col1Value แทน col1value
  const col2 = rowData[1];
  const col3 = rowData[2]; // ใช้ตัวแปร col3Value แทน col3value
  const col4 = rowData[3];


  const selectedColumns = {
    column1: col1,
    column2: col2,
    column3: col3,
    column4: col4
  };


  var output = ContentService.createTextOutput(JSON.stringify(selectedColumns));
  output.setMimeType(ContentService.MimeType.JSON);
  return output;
}

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

1. เปิด Spreadsheet และเลือก Sheet ที่กำหนด

2. ดึงข้อมูลทั้งหมดใน Sheet และนำข้อมูล Header Row (แถวที่ 1) ออก

3. สุ่มเลือก Index ของข้อมูลแถวใดแถวหนึ่งมา

4. ดึงข้อมูลของแถวที่ถูกสุ่มมา

5. ดึงข้อมูลจากแต่ละคอลัมน์ของแถวที่ถูกสุ่ม

6. นำข้อมูลที่ดึงมาไว้ใน Object

7. สร้าง TextOutput ในรูปแบบ JSON จาก Object กำหนด MIME Type เป็น JSON และส่งผลลัพธ์ JSON กลับ

Query Parameter

เมื่อรันโค้ดและ deploy แอปพลิเคชันเว็บของ Google Apps Script ในโค้ดนี้เราไม่จำเป็นที่ต้องกำหนด Query Parameter ใน URL เพราะว่าไม่ได้มีการ Request Parameter ใดๆในโค้ด สามารถนำลิงค์ที่ Deploy นั้นมาว่าที่ URL bar ดังภาพได้เลย

เมื่อกด Enter หากโค้ดสามารถทำงานได้อย่างถูกต้อง จะขึ้นข้อมูลในลักษณะดังภาพด้านบนนี้ คือจะขึ้นข้อมูลแถวใดแถวหนึ่งที่สุ่มได้จาก google sheet ออกมาแสดงผลในรูปแบบ

หากลองรีเฟรชดู 2-3 ครั้งจะสังเกตเห็นว่าข้อมูลนั้นจะมีการเปลี่ยนไป แสดงว่า API นี้สามารถทำงานได้อย่างถูกต้องและสามารถนำไปใช้งานได้แล้ว โดยเมื่อต้องการนำข้อมูลที่เก็บในพารามิเตอร์มาใช้งาน เช่น ต้องการให้แสดงค่าลิงค์ Youtube ซึ่งเป็นค่าที่อยู่ในคอลัม 3 ต้องรู้และเข้าใจว่าพารามิเตอร์ที่เก็บนั้นมีชื่อว่า column3

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

สิ่งที่แตกต่างไปจากตัวอย่างที่ 1 คือ ค่าที่เก็บในพารามิเตอร์นั้น ไม่ได้มาจาก Dialogue แต่มาจาก API รูปแบบการเรียกแสดงค่าของพารามิเตอร์นั้นเลยจะแตกต่างไปเล็กน้อย เพราะค่าของพารามิเตอร์จะมาจาก API ซึ่งมีรูปแบบการเรียกแสดงค่าคือ <<API_NAME.PARAMETER>>

โดยที่ API_NAME คือชื่อของ API รวมถึงจำเป็นที่จะต้องเขียน API_ ด้วย และ PARAMETER คือชื่อของพารามิเตอร์ที่ได้กำหนดในโค้ด ในที่นี้คือ ชื่อคลิป รายละเอียด และลิงค์ยูปทูป จะได้ว่า column1, column2 และ column3 ตามลำดับ สามารถแก้ไขได้ตามรูปถาพด้านล่างนี้ได้เลย

ส่วนของปุ่มกดยืนยันนั้นจะตั้งค่าประเภทเป็น URI หากขึ้นเตือนแบบดังภาพก็ไม่ต้องสนใจ เพราะว่ารูปแบบของข้อมูลนั้นไม่ถูกต้อง แต่เมื่อกด View as JSON นั้นจะอัปเดตโค้ดบรรทัดนั้นเป็นข้อมูลตามที่เราเขียนอยู่ จากนั้นสามารถคัดลอด โค้ด JSON ของ Flex Message ตัวนี้ไปสร้างในแพลตฟอร์ม Botnoi.ai ได้เลย

Flex Message นี้ไม่ได้เปลี่ยนรูปภาพ ตั้งให้เป็นปกเดิมทุกครั้ง หากต้องการเป็นปกคลิปสามารถแก้ไขโค้ดและตั้งพารามิเตอร์ในส่วนรูปภาพได้เลย

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

ในส่วนของ Intent ให้ใส่ Response ตามภาพด้านบนได้เลย โดยต้องเพิ่ม API ก่อน และตามด้วย Flex ที่สร้างไว้ตามลำดับเท่านั้น เพราะว่าระบบจะเรียงลำดับการแสดงข้อมูลจากบนลงล่าง เท่านี้ก็เป็นอันเสร็จเรียบร้อย

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

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

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

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

อ่านต่อ

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

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

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

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

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

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