วันอังคารที่ 4 กันยายน พ.ศ. 2561

วิธีขอ Permission เข้าถึงชื่อและสถานที่ของผู้ใช้งานใน Actions on Google


          ตอนที่เราสร้าง Actions ใน Google Assistant บางครั้งเราอาจจำเป็นต้องการรู้ชื่อหรือสถานที่ของผู้ใช้งานเพื่อที่จะตอบสนองการกระทำบางอย่าง เช่น Actions ประเภทส่งของ ซึ่งเราต้องการรู้ชื่อและสถานที่ของผู้ใช้ เพื่อที่จะนำข้อมูลไปเตรียมจัดส่งของ แต่ไม่ใช่ว่าจู่ ๆ เราจะไปเอาข้อมูลของผู้ใช้มาได้ง่าย ๆ นะ ก่อนที่เราจะเอาข้อมูลของผู้ใช้มาได้ เราก็จำเป็นต้องแจ้งผู้ใช้งานเพื่อขอสิทธิ์การเข้าถึงก่อน "เฮ้! เราต้องการเข้าถึงข้อมูลของคุณนะ จะอนุญาตอ๊ะป่าว?"

          จากเงื่อนไขดังกล่าว เราต้องเขียนโค้ดขอสิทธิ์การเข้าถึงข้อมูลของผู้ใช้งานก่อน ซึ่งทาง Assistant ก็ได้เตรียมข้อความมาตราฐานในการแจ้งกับผู้ใช้งานไว้แล้ว โดยสิทธิ์การเข้าถึงข้อมูลของผู้ใช้งานที่เราสามารถขอได้ ได้แก่
  • NAME: ขอสิทธิ์การเข้าถึงชื่อและนามสกุลของผู้ใช้งาน
  • DEVICE_PRECISE_LOCATION: ขอสิทธิ์การเข้าถึงตำแหน่งที่อยู่ของผู้ใช้งาน โดยจะคืนค่ามาเป็นละติจูดและลองติจูดของตำแหน่งที่ผู้ใช้งานอยู่
  • DEVICE_COARSE_LOCATION: ขอสิทธิ์การเข้าถึงที่อยู่ของผู้ใช้งาน รหัสไปรษณีย์ เมือง และรหัสประเทศ ใช้ได้เฉพาะจากอุปกรณ์ Google Home เท่านั้น
ซึ่งในบทความนี้เราจะมาสร้าง Actions ที่มีลำดับการทำงานดังต่อไปนี้
  • Action: สวัสดีค่ะ นี่เป็น Action สำหรับขอสิทธิ์การเข้าถึงข้อมูล
  • User: สวัสดี
  • Action: จะต้องใช้ชื่อและตำแหน่งปัจจุบันของคุณจาก Google {ข้อความเพิ่มเติมจากในโค้ด} ตกลงมั้ยคะ
  • User: โอเค
  • Action: ขอบคุณค่ะ คุณ{ชื่อ} พิกัดที่คุณอยู่คือ ({ละติจูด}, {ลองติจูด}) ขอให้มีความสุขนะคะ

สร้าง Action


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


          หลังจากทำการสร้างโปรเจค Actions เสร็จแล้ว ให้คลิกเมนู Actions ที่อยู่ในแถบเมนูซ้ายมือ


          คลิกปุ่ม ADD YOUR FIRST ACTION เพื่อเริ่มสร้าง Actions กันเลย


          ป๊อปอัพจะแสดงขึ้นมาให้เลือก Actions ที่เพื่อน ๆ ต้องการจะสร้าง ให้เลือก Custom intent แล้วคลิกปุ่ม BUILD จากนั้นระบบก็จะเปิดหน้าเว็บของ Dialogflow Console ขึ้นมาให้โดยอัตโนมัติ


          เลือกภาษาและเวลาที่จะให้ Actions รองรับการใช้งาน จากนั้นก็คลิกปุ่ม CREATE ได้เลย

สร้าง Intent



          เมื่อระบบสร้าง Actions ขึ้นมาแล้ว เราจะไปอยู่ที่เมนู Intents โดยอัตโนมัติ ซึ่งใน Actions นี้มี intent ที่เราจะใช้ทั้งหมด 3 ตัว นั่นคือ
  • Default Welcome Intent: intent นี้เป็น static intent ธรรมดา ๆ ที่ใช้ทักทายหลังจากผู้ใช้งานได้ทำการเรียก Actions ขึ้นมา โดยจะพูดทักทายผู้ใช้งานว่า "สวัสดีค่ะ นี่เป็น Actions สำหรับขอสิทธิ์การเข้าถึงข้อมูล"
  • request_permission: intent สำหรับร้องขอสิทธิ์การเข้าถึงข้อมูลของผู้ใช้
  • handle_permission: intent ที่จะถูกเรียกใช้งานหลังจากผู้ใช้ตอบคำขอสิทธิ์ ถ้าผู้ใช้ให้สิทธิ์การเข้าถึงข้อมูลก็จะพูดชื่อ พิกัดละติจูดและลองติจูดของผู้ใช้งาน จากนั้นก็จะจบการสนทนา
          เริ่มแรกให้เราจัดการในส่วนทักทายก่อน คลิกไปที่ Default Welcome Intent


          ส่วนของ Responses ให้จัดการลบข้อความอื่น ๆ ออกแล้วใส่คำว่า "สวัสดีค่ะ นี่เป็น Actions สำหรับขอสิทธิ์การเข้าถึงข้อมูล" ลงไปแทน จากนั้นก็คลิกปุ่ม SAVE เพื่อบันทึกการเปลี่ยนแปลง

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


          ในส่วนของ Training phrases ให้พิมพ์คำว่า "สวัสดี" ลงไป ตรงนี้จะเป็นการตั้งค่าให้ Dialogflow ตรวจจับคำพูด เมื่อผู้ใช้งานพูดคำที่เราระบุไว้ใน Training phrases (ในกรณีนี้ก็คือคำว่า "สวัสดี" นั่นเอง) ก็จะเป็นการเรียกใช้งาน intent นี้


          เลื่อนลงมาข้างล่างในส่วนของ Fulfillment คลิกเปิดให้มีการเรียกใช้งาน Webhook เนื่องจากเราจะต้องเขียนโค้ดร้องขอสิทธิ์ที่ Intent นี้ ให้คลิกปุ่ม SAVE เพื่อบันทึกการตั้งค่า

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


          ในส่วนของ Events ให้พิมพ์ actions_intent_PERMISSION ลงไป เพื่อให้ intent นี้ถูกเรียกใช้งานเมื่อเกิด event ผู้ใช้งานตอบคำขอเข้าถึงข้อมูลของ Action


          ในส่วนของ Fulfillment ที่อยู่ข้างล่างก็ให้คลิกเบา ๆ เพื่อเปิดการเรียกใช้งาน webhook ซะ แล้วคลิกปุ่ม SAVE

เขียนโค้ด


          หลังจากที่เราสร้าง intent ที่ต้องใช้ครบตามที่ต้องการแล้ว ขั้นตอนถัดไปก็จะเป็นการเขียนโค้ดให้ Actions ทำงาน ในส่วนนี้ผมจะเขียนโค้ดที่ Inline Editor เนื่องจากโค้ดไม่ยาว และไม่ได้มีการทำงานซับซ้อนอะไร .....คลิกที่เมนู Fulfillment ที่อยู่ในเมนูด้านซ้ายมือ


          คลิกเปิดการใช้งาน Inline Editor พื้นที่สำหรับเขียนโค้ดข้างล่างก็จะพร้อมใช้งาน จากนั้นก็ก๊อปปี้โค้ดด้านล่างไปใส่ทับโค้ดเก่า

'use strict';

// Import Dialogflow และ Permission module จาก Actions on Google library.
const {dialogflow, Permission} = require('actions-on-google');
// Import firebase-functions package
const functions = require('firebase-functions');
// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});

// กำหนดให้ intent 'request_permission' ทำการร้องขอสิทธิ์เข้าถึงข้อมูลของผู้ใช้งาน
app.intent('request_permission', (conv) => {
    const options = {
      // ข้อความเพิ่มเติมที่จะแจ้งผู้ใช้งาน
      context: 'เพื่อทำการทดสอบ Action',
      // ข้อมูลที่ต้องการจะขอ
      permissions: ['NAME', 'DEVICE_PRECISE_LOCATION'],
    };
    conv.ask(new Permission(options));
      
});

// กำหนดให้ intent 'handle_permission' ตอบกลับเมื่อผู้ใช้งานให้/ไม่ให้สิทธิ์เข้าถึงข้อมูล
app.intent('handle_permission', (conv, params, confirmationGranted) => {
    const {name} = conv.user;
    const {coordinates} = conv.device.location;
    
    if (confirmationGranted) {
      if (name && coordinates) {
        conv.close(`ขอบคุณค่ะ คุณ${name.display} พิกัดที่คุณอยู่คือ (${coordinates.latitude}, ${coordinates.longitude}) ขอให้มีความสุขนะคะ`);
      } else {
        conv.close(`ไม่พบชื่อหรือพิกัดของคุณ กรุณาตั้งชื่อหรือเปิด GPS ก่อน`);
      }
    } else {
      conv.close(`เสียใจจัง ชั้นไม่สามารถเข้าถึงข้อมูลของคุณได้ เอาไว้ค่อยกลับมาใช้บริการใหม่นะคะ บ๊ายบายค่ะ`);
    }
});

// Set ให้ DialogflowApp object จัดการ HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);
          คลิกปุ่ม DEPLOY เพื่อใช้งานโค้ดปัจจุบัน ซึ่ง Dialogflow จะใช้เวลาในการ deploy สักครู่ ระหว่างที่รอระบบ deploy อยู่ เรามาทบทวนการทำงานของ Actions นี้กันเถอะ เริ่มจากเมื่อผู้ใช้เรียกใช้งาน Actions แล้ว
  • Action จะทักทายผู้ใช้งานว่า "สวัสดีค่ะ นี่เป็น Action สำหรับขอสิทธิ์การเข้าถึงข้อมูล"
  • เมื่อ User ทักทายตอบกลับว่า "สวัสดี" Action ก็จะขอสิทธิ์การเข้าถึงข้อมูลด้วยการถามว่า "จะต้องใช้ชื่อและตำแหน่งปัจจุบันของคุณจาก Google {ข้อความเพิ่มเติมจากในโค้ด} ตกลงมั้ยคะ" แต่ถ้า User พูดคำอื่น Action ก็จะงง ๆ ไม่เข้าใจที่ User พูด (เนื่องจากไปตกที่ Default Fallback Intent ก็จะใช้ข้อความ Response ใน intent นั้น ๆ)
  • ในกรณีที่ Action ร้องขอสิทธิ์ แล้ว User ตอบกลับว่า "โอเค" Action ก็จะพูดกลับว่า "ขอบคุณค่ะ คุณ{ชื่อ} พิกัดที่คุณอยู่คือ ({ละติจูด}, {ลองติจูด}) ขอให้มีความสุขนะคะ" แต่กรณีที่ User ตอบปฏิเสธการเข้าถึงข้อมูล Action ก็จะตอบว่า "เสียใจจัง ชั้นไม่สามารถเข้าถึงข้อมูลของคุณได้ เอาไว้ค่อยกลับมาใช้บริการใหม่นะคะ บ๊ายบายค่ะ" แล้วก็จบการสนทนาไป
          หลังจาก deploy เสร็จแล้ว ก็ให้กลับไปหน้า Actions Console คลิกที่เมนู Simulator ถึงตรงนี้เราจะยังทดสอบ Actions ไม่ได้ เนื่องจากเราตั้งค่าให้ Actions ทำงานกับภาษาไทย แต่ใน Simulator ยังเป็นภาษาอังกฤษอยู่ เพราะฉะนั้นเราก็เปลี่ยนภาษาของ Simulator ซะก็สิ้นเรื่อง


          แก้ไขภาษาและตำแหน่งที่อยู่ให้เป็นไทยก่อน เมื่อคลิกปุ่ม START TESTING เพื่อเริ่มทำการทดสอบก็จะมีป๊อปอัพ Start testing your Actions ขึ้นมาให้เราเลือกเวอร์ชันที่จะทดสอบ แต่เนื่องจากตอนนี้มีอยู่เวอร์ชันเดียว งั้นก็ไม่ต้องไปสนใจ คลิกปุ่ม DONE ไปเลย


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


Share:

0 comments:

แสดงความคิดเห็น