![AI Chatbot](https://framerusercontent.com/images/k9jg2fXwppVlPRUcdsiDNgmiZwA.png)
AI Chatbot By BOTNOI
19 ก.พ. 2567
การแสดงข้อมูลแบบสุ่มโดยดึงข้อมูลจาก Google Sheet และนำมาแสดงผลบน Flex Message ผ่านแพลตฟอร์ม Botnoi.ai เป็นวิธีที่ง่ายและสะดวก นอกจากนี้ยังช่วยประหยัดเวลาในการจัดการข้อมูลด้วยการอัพเดทอัตโนมัติของข้อมูลเมื่อมีการแก้ไขใน Google Sheet แถมยังไม่ต้องให้ผู้ใช้งานพิมพ์เข้าหาบอทแบบเจาะจงข้อมูล แค่พิมพ์คำที่เราเทรนก็จะมีข้อมูลแบบสุ่มมาแสดงบน Flex Message ให้อัตโนมัติ!
Flex Message แสดงข้อมูลจาก Google Sheet หน้าตาเป็นยังไง?
Flex Message EP.3 ของเราที่นำเสนอต่อไปนี้เหมาะกับการใช้งานเพื่อแสดงข้อมูลแบบสุ่ม การแสดงข้อมูลแบบสุ่มนี้มีวัตถุประสงค์เพื่อให้ผู้ใช้งานได้พบกับข้อมูลที่เป็นตัวอย่างหรือตัวอย่างการใช้งานของบริการ โดยที่ไม่จำเป็นต้องกรอกข้อมูลหรือไม่ได้เจาะจงว่าเป็นข้อมูลใดโดยเฉพาะ ในตัวอย่างนี้เราก็ยังคงใช้ Google Sheet ของเราเป็นตัวเก็บข้อมูลที่จะมาแสดงเหมือนเดิม
![image-flex-random-data](https://framerusercontent.com/images/ak2VdqVs3peiDOjf3FpOp99Excc.png)
ขั้นตอนที่ 1 : เข้าใจแนวคิดและหลักการ
![Concept-flex-random-data](https://framerusercontent.com/images/76pZdZyo8Gia3LAolAgDfzS1xs.png)
เราจะตั้งไว้ว่าถ้าหากผู้ใช้งานส่งข้อความที่แสดงถึงเจตนาที่ต้องการดูคลิปยูทูปหรือกด 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
หลักการทำงานของโค้ด
1. เปิด Spreadsheet และเลือก Sheet ที่กำหนด
![flex-random-data-step1](https://framerusercontent.com/images/vb31e6FQU72TCsJoqSsxuVyxuZ8.png)
2. ดึงข้อมูลทั้งหมดใน Sheet และนำข้อมูล Header Row (แถวที่ 1) ออก
![flex-random-data-step2](https://framerusercontent.com/images/YcIuWOrx1pDVgjWPO3pDccZ3RsI.png)
3. สุ่มเลือก Index ของข้อมูลแถวใดแถวหนึ่งมา
![flex-random-data-step3](https://framerusercontent.com/images/P1Ni05VFyvJoG16H4WzcUTupmZQ.png)
4. ดึงข้อมูลของแถวที่ถูกสุ่มมา
![flex-random-data-step4](https://framerusercontent.com/images/gz6sE5vy0NNO2YysQamLj40YLTU.png)
5. ดึงข้อมูลจากแต่ละคอลัมน์ของแถวที่ถูกสุ่ม
![flex-random-data-step5](https://framerusercontent.com/images/GWk9Ct45Lp8yCvJWX5C0NdADE.png)
6. นำข้อมูลที่ดึงมาไว้ใน Object
![flex-random-data-step6](https://framerusercontent.com/images/LUT94Igx008tuS0FzOMNjqa20Q.png)
7. สร้าง TextOutput ในรูปแบบ JSON จาก Object กำหนด MIME Type เป็น JSON และส่งผลลัพธ์ JSON กลับ
![flex-random-data-step7](https://framerusercontent.com/images/wzsfgbuBnfpD6W8iViDKzXqbA44.png)
Query Parameter
เมื่อรันโค้ดและ deploy แอปพลิเคชันเว็บของ Google Apps Script ในโค้ดนี้เราไม่จำเป็นที่ต้องกำหนด Query Parameter ใน URL เพราะว่าไม่ได้มีการ Request Parameter ใดๆในโค้ด สามารถนำลิงค์ที่ Deploy นั้นมาว่าที่ URL bar ดังภาพได้เลย
![flex-random-data-parameter1](https://framerusercontent.com/images/LqtZuPrJDmHPitDwUcUBTQN9Kt4.png)
เมื่อกด Enter หากโค้ดสามารถทำงานได้อย่างถูกต้อง จะขึ้นข้อมูลในลักษณะดังภาพด้านบนนี้ คือจะขึ้นข้อมูลแถวใดแถวหนึ่งที่สุ่มได้จาก google sheet ออกมาแสดงผลในรูปแบบ
![flex-random-data-parameter2](https://framerusercontent.com/images/ZQvn0kCvQijWxt9zQsAo547wJXo.png)
หากลองรีเฟรชดู 2-3 ครั้งจะสังเกตเห็นว่าข้อมูลนั้นจะมีการเปลี่ยนไป แสดงว่า API นี้สามารถทำงานได้อย่างถูกต้องและสามารถนำไปใช้งานได้แล้ว โดยเมื่อต้องการนำข้อมูลที่เก็บในพารามิเตอร์มาใช้งาน เช่น ต้องการให้แสดงค่าลิงค์ Youtube ซึ่งเป็นค่าที่อยู่ในคอลัม 3 ต้องรู้และเข้าใจว่าพารามิเตอร์ที่เก็บนั้นมีชื่อว่า column3
![flex-random-data-parameter3](https://framerusercontent.com/images/IaWP6UBcTIZ0FLndm1AObVFt8F0.png)
การแก้ไขและปรับแต่ง Flex Message
![ex1-flex-random-data](https://framerusercontent.com/images/Bn49fjHfB3sLvRiqDV6vZxGDRI.png)
สิ่งที่แตกต่างไปจากตัวอย่างที่ 1 คือ ค่าที่เก็บในพารามิเตอร์นั้น ไม่ได้มาจาก Dialogue แต่มาจาก API รูปแบบการเรียกแสดงค่าของพารามิเตอร์นั้นเลยจะแตกต่างไปเล็กน้อย เพราะค่าของพารามิเตอร์จะมาจาก API ซึ่งมีรูปแบบการเรียกแสดงค่าคือ <<API_NAME.PARAMETER>>
โดยที่ API_NAME คือชื่อของ API รวมถึงจำเป็นที่จะต้องเขียน API_ ด้วย และ PARAMETER คือชื่อของพารามิเตอร์ที่ได้กำหนดในโค้ด ในที่นี้คือ ชื่อคลิป รายละเอียด และลิงค์ยูปทูป จะได้ว่า column1, column2 และ column3 ตามลำดับ สามารถแก้ไขได้ตามรูปถาพด้านล่างนี้ได้เลย
![ex2-flex-random-data](https://framerusercontent.com/images/KmhrGv0HxuDYrBvJAAE9BnsQg.png)
![ex3-flex-random-data](https://framerusercontent.com/images/vDgsOubUJrDKiCh2l6nJTrVTM.png)
ส่วนของปุ่มกดยืนยันนั้นจะตั้งค่าประเภทเป็น URI หากขึ้นเตือนแบบดังภาพก็ไม่ต้องสนใจ เพราะว่ารูปแบบของข้อมูลนั้นไม่ถูกต้อง แต่เมื่อกด View as JSON นั้นจะอัปเดตโค้ดบรรทัดนั้นเป็นข้อมูลตามที่เราเขียนอยู่ จากนั้นสามารถคัดลอด โค้ด JSON ของ Flex Message ตัวนี้ไปสร้างในแพลตฟอร์ม Botnoi.ai ได้เลย
Flex Message นี้ไม่ได้เปลี่ยนรูปภาพ ตั้งให้เป็นปกเดิมทุกครั้ง หากต้องการเป็นปกคลิปสามารถแก้ไขโค้ดและตั้งพารามิเตอร์ในส่วนรูปภาพได้เลย
![ex4-flex-random-data](https://framerusercontent.com/images/67vz25putzN5MhzhYbnroOo7o.png)
ขั้นตอนที่ 3 :การสร้าง Intent ในแพลตฟอร์ม botnoi.ai
![intent-flex-random-data](https://framerusercontent.com/images/ozukY67eG3VhiHMKnqm8ugEWHY.png)
ในส่วนของ Intent ให้ใส่ Response ตามภาพด้านบนได้เลย โดยต้องเพิ่ม API ก่อน และตามด้วย Flex ที่สร้างไว้ตามลำดับเท่านั้น เพราะว่าระบบจะเรียงลำดับการแสดงข้อมูลจากบนลงล่าง เท่านี้ก็เป็นอันเสร็จเรียบร้อย
เป็นยังไงบ้างคะ ขั้นตอนการทำไม่ยุ่งยากเลยแถมยังสามารถนำไปปรับใช้งานการให้ข้อมูลต่างๆ โดยคนที่ไม่มีพื้นฐานด้านโค้ดเลยก็สามารถทำได้ !
สามารถติดตามข้อมูลและอัพเดตเกี่ยวกับ Botnoi Group และ Botnoi Ai ได้ผ่านทาง Website และ Facebook พร้อมทั้งเข้าร่วมการสนทนาและแลกเปลี่ยนความคิดเห็นในชุมชนกลุ่ม AI chatbot by BOTNOI เกี่ยวกับเทคโนโลยี AI และ Chatbot !
ติดตามข่าวสารความเคลื่อนไหวของเราได้ที่ : Botnoi Group
แพลตฟอร์มสำหรับสร้างแชทบอท : Botnoi.ai
วิดิโอสอนทำก่อนหน้านี้ : Dynamic Flex Message วิธีการดึงข้อมูล
Back