สร้าง Actions on Google ให้เชื่อมต่อกับ API เพื่อเพิ่มความสามารถในการโต้ตอบ

          ในบทความที่แล้ว เราได้เขียน Actions ให้โต้ตอบกับเราอย่างง่าย ๆ โดยปราศจากการเขียนโค้ดไปบ้างแล้ว (จริง ๆ น่าจะเรียกว่า "ตั้งค่าการตอบกลับ" มากกว่าการเขียนโค้ดนะ ฮา) และเพื่อน ๆ ก็น่าจะเข้าใจขั้นตอนการทำงานของ Dialogflow แล้ว แต่ถ้าสังเกตดูก็จะพบว่าข้อความที่ตอบกลับมาเป็นข้อความตายตัว ซึ่งถ้าแบบนี้คงจะไม่มีใครอยากใช้งาน Actions ของเรา เพราะงั้นเราควรจะเพิ่มความสามารถในตอบกลับให้ประโยคโต้ตอบมีการเปลี่ยนแปลงไปตามสิ่งที่ผู้ใช้พูด และการจะทำแบบนั้นได้ เราก็จำเป็นจะต้องเชื่อมต่อกับ API เพื่อส่งข้อความของผู้ใช้ไปประมวลผลซะก่อน

สร้างบทสนทนาตอบกลับ

---

          ก่อนจะเชื่อมต่อ API เรามาแก้ไขรายละเอียดอะไรบางอย่างในตอนท้ายของบทความที่แล้วกันดีกว่า เข้าไปที่ Dialogflow Console กันเล้ยยยยย

          เข้าไปที่เมนู Intents แล้วคลิกที่ Welcome Response Intent ในส่วนของ Text response ให้แก้ไขข้อความเป็น "ดีใจที่ได้ยินเช่นนั้นค่ะ ว่าแต่วันนี้คุณใส่เสื้อสีอะไรเหรอคะ" แล้วคลิกปุ่ม SAVE

          คลิกปุ่ม + ข้าง ๆ เมนู Intents เพื่อสร้าง Intent ขึ้นมาใหม่ และกรอกชื่อว่า Your Color Intent โดยจะมีส่วนที่เราต้องกรอกรายละเอียดเพิ่ออีก 3 ส่วน ได้แก่ Training phrases, Action and parameters และ Fulfillment

          ในส่วน Training phrases ให้ใส่คำว่า "สีแดง", "แดง", "สีแดงครับ", "เสื้อสีแดง" และ"เสื้อสีแดงครับ" ซึ่งเพื่อน ๆ จะสังเกตเห็นว่าตอนที่ใส่คำทีละคำ จะมีไฮไลท์สีเหลืองขึ้นที่คำว่า "สีแดง" ให้โดยอัตโนมัติ และจะมีการใส่ค่า Entity ในส่วนของ Action and parameters ให้เอง..... Entity คืออะไรน่ะเหรอ? Entity ก็คือประเภทของสิ่งต่าง ๆ ซึ่ง Dialogflow จะใช้เพื่อดึงค่าตัวแปรออกมาจากข้อความของผู้ใช้

          ในส่วนของ Fulfillment คลิกเปิดให้ intent นี้มีการเรียกใช้งาน webhook ซึ่งเป็นที่เก็บโค้ดสำหรับประมวลผลและสร้างข้อความโต้ตอบแบบไดนามิก โดยเพื่อน ๆ สามารถสร้าง webhook ได้ 2 วิธี

1. สร้างภายใน Dialogflow ผ่านเมนู Inline Editor
2. สร้างที่ Server ภายนอก จากนั้นนำ url มาใส่ให้ Dialogflow

          เมื่อเปิดการเรียกใช้งาน webhook เรียบร้อยแล้วให้คลิกปุ่ม SAVE ซึ่งในขั้นตอนต่อไป เราจะมาทำการสร้าง webhook และเขียนโค้ดเพื่อประมวลผลข้อความของผู้ใช้ ซึ่งผมจะอธิบายวิธีการสร้าง webhook โดยแบ่งออกเป็น 2 วิธี ได้แก่ สร้าง Webhook บน Inline Editor และ สร้าง Webhook บน Cloud Functions for Firebase

สร้าง Webhook บน Inline Editor

---

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

          คลิกเปิดการใช้งาน Inline Editor จากนั้นก็ก๊อปปี้โค้ดด้านล่างไปใส่

'use strict';

// Import the Dialogflow module from the Actions on Google client library.
const {dialogflow} = require('actions-on-google');
// Import the firebase-functions package for deployment.
const functions = require('firebase-functions');
// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});


app.intent('Your Color Intent', conv => {
    const userColor = conv.parameters.color;
    // ตอบแล้วยังไม่จบการสนทนา
    //conv.ask('เลขนำโชคสำหรับ' + userColor+'คือ '+userColor.length);
    // ตอบแล้วจบการสนทนาทันที
    conv.close('เลขนำโชคสำหรับ' + userColor+'คือ '+userColor.length);
});

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

          ถ้าใช้ conv.ask() บทสนทนาจะยังไม่จบ แต่ถ้าใช้ conv.close() บทสนทนาจะจบทันที จากนั้นให้คลิกปุ่ม DEPLOY เพื่อใช้งานโค้ดปัจจุบัน และจะใช้เวลาในการ deploy สักครู่ ระหว่างรอ Dialogflow ทำการ deploy เรามาทำความเข้าใจโค้ดกันสักนิด

          โค้ดที่ใช้ใน webhook จะเขียนด้วยภาษา Javascript และเรียกใช้งาน Actions on Google Node.js client library เพื่อตอบกลับ HTTP requests ที่ Google Assistant ส่งมาที่ webhook ซึ่ง conv.parameters จะเก็บตัวแปรที่มาจาก Entity โดย color มาจากชื่อ Parameter Name ที่ประกาศไว้ใน Entity

          Inline editor ของ Dialogflow จะ deploy โค้ดของ webhook บน Cloud Functions for Firebase ซึ่งเป็น cloud service ของ Google

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

สร้าง Webhook บน Cloud Functions for Firebase

---

          วิธีนี้จะเป็นการเขียนโค้ดลงในเครื่องของเรา จากนั้นก็จะ deploy ขึ้นไปบน Cloud Functions for Firebase ซึ่งวิธีนี้จะต้องใช้ Node Package Manager หรือ npm ที่เป็นตัวจัดการแพ็คเกจเสริมต่าง ๆ ในการติดตั้งแพ็คเกจ firebase-tools โดยเจ้าตัว npm นี้จะถูกติดตั้งมาพร้อมกับ Node.js เพราะงั้นอันดับแรกเราก็มาติดตั้ง Node.js กันก่อน

วิธีติดตั้ง Node.js

          ให้เข้าไปที่ Nodejs.org แล้วเลือกตัวติดตั้งตามที่เพื่อน ๆ ต้องการ

          เมื่อโหลดตัวติดตั้งเสร็จแล้วก็อย่ารอช้า กดติดตั้งโลด หลังจากติดตั้งเสร็จก็ให้เปิด Command Prompt (สำหรับ Window) หรือ Terminal (สำหรับ Mac) ขึ้นมาแล้วพิมพ์คำสั่ง

node -v

          ถ้าหาก Command Prompt (หรือ Terminal) แสดงเลขเวอร์ชันของ Node.js ขึ้นมา ก็แปลว่าเราได้ติดตั้ง Node.js เสร็จเรียบร้อยแล้ว อันดับถัดไปเราจะต้องติดตั้ง Firebase Command Line Interface (CLI) ให้พิมพ์คำสั่ง

npm -g install firebase-tools

          เราสามารถเช็คว่าติดตั้ง Firebase CLI สำเร็จหรือไม่ ได้โดยการพิมพ์คำสั่ง

firebase --version

          อันดับถัดไปให้ทำการ Login Firebase CLI โดยการพิมพ์

firebase login

          Command Prompt (หรือ Terminal) จะเปิดเว็บบราวน์เซอร์ขึ้นมา ให้เพื่อน ๆ login Account ของ Google

          เมื่อ login แล้ว ก็จะเจอหน้า Firebase CLI ขอสิทธิ์การเข้าถึง Google Account ให้คลิกปุ่ม ALLOW

          เสร็จเรียบร้อยแล้วก็ปิดเว็บบราวน์เซอร์ได้เลย จากนั้นให้สร้างโฟลเดอร์ที่จะเก็บโปรเจค แล้วย้ายเข้าไปยังโฟลเดอร์นั้น

mkdir test-action
cd test-action

          จากนั้นก็ทำการ init ตัว Cloud Functions for Firebase ด้วยคำสั่ง

firebase init functions

          Command Prompt (หรือ Terminal) จะแสดงตัวเลือกให้เลือกโปรเจคที่เราต้องการจะใช้งาน (ตามตัวอย่างผมจะเลือกโปรเจค test-action) จากนั้นก็กดปุ่ม enter แล้ว Firebase CLI จะแสดงคำถามขึ้นมาให้เลือกอีก 3 คำถาม ได้แก่

• โปรเจคจะใช้ภาษา Javascript หรือ TypeScript (ตามตัวอย่างผมใช้ JavaScript)
• โปรเจคจะใช้ ESLint เพื่อตรวจสอบ bug และ code style หรือไม่ (ตามตัวอย่างผมเลือก Yes)
• ต้องการให้ติดตั้ง dependencies ทันทีเลยหรือไม่ (ตอบ Y ไปเล้ยยยยย)

          เมื่อเลือกคำตอบครบเรียบร้อยแล้วก็รอให้ Firebase CLI ทำการ Initial โปรเจคขึ้นมา .....หลังจาก Initial เสร็จแล้ว ไฟล์ที่เราต้องใช้งานคือไฟล์ index.js ที่อยู่ในโฟลเดอร์ functions แต่ก่อนจะเปิดไฟล์ index.js ให้เข้าไปยังโฟลเดอร์ functions แล้วทำการติดตั้ง Actions on Google Node.js client library ด้วยคำสั่ง

cd functions
npm install actions-on-google

          ต่อไปให้เปิดไฟล์ firebase.json ขึ้นมา ลบคำสั่งที่อยู่ในนั้นทั้งหมด แล้วก๊อปปี้คำสั่งข้างล่างลงไปแทน

{
  "functions": {
    "predeploy": [
    ]
  }
}

          อันดับถัดไปให้เปิดไฟล์ index.js ขึ้นมา แล้วก๊อปปี้โค้ดข้างล่างไปวางไว้ในไฟล์ index.js

'use strict';

// Import the Dialogflow module from the Actions on Google client library.
const {dialogflow} = require('actions-on-google');
// Import the firebase-functions package for deployment.
const functions = require('firebase-functions');
// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});


app.intent('Your Color Intent', conv => {
    const userColor = conv.parameters.color;
    // ตอบแล้วยังไม่จบการสนทนา
    //conv.ask('เลขนำโชควันนี้สำหรับ' + userColor+'คือ '+userColor.length);
    // ตอบแล้วจบการสนทนาทันที
    conv.close('เลขนำโชควันนี้สำหรับ' + userColor+'คือ '+userColor.length);
});

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

          เสร็จแล้วก็ใช้คำสั่ง deploy เพื่อส่งโค้ดที่เพิ่งเขียนขึ้นไป deploy บน Cloud Functions for Firebase ด้วยคำสั่ง

firebase deploy

          รอสักครู่จน Command Prompt (หรือ Terminal) แสดงข้อความว่า "Deploy complete!" จากนั้นให้เราเข้าไปยังเมนู Fulfillment ของ Dialogflow Console เพื่อตั้งค่า webhook ใหม่

          คลิกเปิดการใช้งานในส่วน Webhook ซึ่งจะมีป๊อปอัพขึ้นมาถามยืนยันว่า "ถ้าเปิดการใช้งานในส่วนนี้ จะปิดการใช้งานของ Inline Editor" ให้คลิกปุ่ม YES ไปได้เลย จะสังเกตได้ว่า Dialogflow มีการใส่ค่าในช่อง URL มาให้โดยอัตโนมัติ ซึ่งเป็นผลจากการเลือกโปรเจคในตอนที่ Initial โปรเจค (โปรเจค test-action) เพียงเท่านี้ก็เสร็จสิ้นการ deploy โค้ดตัวใหม่เรียบร้อยแล้ว ไปทดสอบกันโล้ด

          พอกลับไปทดสอบการทำงานใน Actions Console จะเห็นได้ว่า Actions มีการทำงานแบบเดียวกับตอนที่ใช้ webhook บน Inline Editor แต่ต่างกันเล็กน้อยที่ประโยคตอบกลับ (ตรง "เลขนำโชควันนี้สำหรับ.....") ซึ่งข้อดีของการสร้าง Webhook บน Cloud Functions for Firebase นั่นก็คือ เราสามารถใช้งาน JavaScript Library ตัวอื่นเสริมได้ด้วย ซึ่งจะเพิ่มประสิทธิภาพในการเขียนโค้ดนั่นเอง

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