หน้านี้ได้รับการแปลโดย Cloud Translation API

การสร้างเว็บแอปพลิเคชันสำหรับการเข้าถึงอุปกรณ์

1. เกริ่นนำ

โปรแกรมการเข้าถึงอุปกรณ์มี Smart Device Management API ซึ่งเป็น REST API สำหรับนักพัฒนาซอฟต์แวร์เพื่อควบคุมอุปกรณ์ Google Nest จากแอปพลิเคชันของตน ผู้ใช้ต้องยินยอมให้บุคคลที่สามเข้าถึงอุปกรณ์ Nest ของตน

การผสานรวมการเข้าถึงอุปกรณ์ให้ประสบความสำเร็จมี 3 ขั้นตอนสำคัญดังนี้

การสร้างโปรเจ็กต์ - สร้างโปรเจ็กต์ใน Google Cloud Platform และลงชื่อสมัครใช้เป็นนักพัฒนาซอฟต์แวร์ในคอนโซลการเข้าถึงอุปกรณ์
การลิงก์บัญชี - ดึงผู้ใช้ผ่านขั้นตอนการลิงก์บัญชีและเรียกข้อมูลรหัสการเข้าถึง แลกเปลี่ยนรหัสเป็นโทเค็นเพื่อการเข้าถึง
การควบคุมอุปกรณ์ - สร้างคำขอ Smart Device Management API เพื่อควบคุมอุปกรณ์โดยการส่งคำสั่งที่มีโทเค็นเพื่อการเข้าถึง

ใน Codelab นี้ เราจะเจาะลึกวิธีการทำงานของการเข้าถึงอุปกรณ์ด้วยการสร้างเว็บแอปพลิเคชันที่จัดการการตรวจสอบสิทธิ์และเรียก Smart Device Management API นอกจากนี้ เราจะสำรวจการทำให้พร็อกซีเซิร์ฟเวอร์แบบง่ายที่ใช้ Node.js และ Express กำหนดเส้นทางคำขอการเข้าถึงอุปกรณ์ได้ด้วย

ก่อนที่จะเริ่มต้น โปรดทบทวนเทคโนโลยีเว็บทั่วไปที่เราจะใช้ใน Codelab นี้ เช่น การตรวจสอบสิทธิ์ด้วย OAuth 2.0 หรือการสร้างเว็บแอปด้วย Node.js แม้ว่าสิ่งเหล่านี้จะไม่ใช่ข้อกำหนดเบื้องต้นก็ตาม

สิ่งที่ต้องมี

Node.js 8 ขึ้นไป
บัญชี Google ที่ลิงก์กับ Nest Thermostat

สิ่งที่คุณจะได้เรียนรู้

การตั้งค่าโปรเจ็กต์ Firebase ที่โฮสต์หน้าเว็บแบบคงที่และฟังก์ชันระบบคลาวด์
การออกคำขอเข้าถึงอุปกรณ์ผ่านเว็บแอปพลิเคชันบนเบราว์เซอร์
การสร้างพร็อกซีเซิร์ฟเวอร์ด้วย Node.js และ Express เพื่อกำหนดเส้นทางคำขอของคุณ

2. การสร้างโปรเจ็กต์

นักพัฒนาแอปต้องสร้างโปรเจ็กต์ Google Cloud Platform (GCP) เพื่อตั้งค่าการผสานรวมการเข้าถึงอุปกรณ์ ระบบจะใช้รหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ที่สร้างขึ้นภายในโปรเจ็กต์ GCP เป็นส่วนหนึ่งของขั้นตอน OAuth ระหว่างแอปพลิเคชันของนักพัฒนาซอฟต์แวร์กับ Google Cloud นักพัฒนาแอปยังต้องไปที่ Device Access Console เพื่อสร้างโปรเจ็กต์สำหรับเข้าถึง Smart Device Management API ด้วย

Google Cloud Platform

ไปที่ Google Cloud Platform คลิกสร้างโปรเจ็กต์ใหม่และระบุชื่อโปรเจ็กต์ ระบบจะแสดงรหัสโปรเจ็กต์ [GCP-Project-Id] สำหรับ Google Cloud ด้วย โปรดบันทึกรหัสไว้เนื่องจากเราจะใช้รหัสดังกล่าวระหว่างการตั้งค่า Firebase (เราจะเรียกรหัสนี้ว่า [GCP-Project-Id] ใน Codelab นี้)

ขั้นตอนแรกคือเปิดใช้ไลบรารี API ที่จำเป็นในโปรเจ็กต์ ไปที่ API และบริการ > ไลบรารี แล้วค้นหา Smart Device Management API คุณต้องเปิดใช้ API นี้เพื่อให้สิทธิ์โปรเจ็กต์ในการส่งคำขอไปยังการเรียก Device Access API

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

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

ตั้งชื่อให้ลูกค้า แล้วคลิกสร้าง เราจะเพิ่มต้นทางของ JavaScript ที่ได้รับอนุญาตและ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตในภายหลัง เมื่อเสร็จสิ้นกระบวนการนี้ ระบบจะเรียก [Client-Id] และ [Client-Secret] ที่เชื่อมโยงกับไคลเอ็นต์ OAuth 2.0 นี้ขึ้นมา

คอนโซลการเข้าถึงอุปกรณ์

ไปที่คอนโซลการเข้าถึงอุปกรณ์ หากไม่เคยใช้คอนโซลการเข้าถึงอุปกรณ์มาก่อน คุณจะพบกับข้อกำหนดในการให้บริการและค่าธรรมเนียมการลงทะเบียน $5

สร้างโปรเจ็กต์ใหม่และตั้งชื่อโปรเจ็กต์ ในหน้าต่างถัดไป ให้ระบุ [Client-Id] ที่คุณได้รับจาก GCP ในขั้นตอนก่อนหน้า

การเปิดใช้เหตุการณ์และดำเนินขั้นตอนการสร้างโปรเจ็กต์ให้เสร็จสิ้นจะนำคุณไปยังหน้าแรกของโปรเจ็กต์ [Project-Id] จะแสดงอยู่ใต้ชื่อซึ่งคุณตั้งให้กับโปรเจ็กต์

โปรดทราบว่า [Project-Id] ของคุณจะใช้เมื่อส่งคำขอไปยัง Smart Device Management API

3. การตั้งค่า Firebase

Firebase ช่วยให้นักพัฒนาซอฟต์แวร์ใช้งานเว็บแอปพลิเคชันได้อย่างรวดเร็วและง่ายดาย เราจะพัฒนาเว็บแอปพลิเคชันฝั่งไคลเอ็นต์สำหรับการผสานรวมการเข้าถึงอุปกรณ์โดยใช้ Firebase

สร้างโปรเจ็กต์ Firebase

ไปที่คอนโซล Firebase คลิกเพิ่มโปรเจ็กต์ จากนั้นเลือกโปรเจ็กต์ที่คุณสร้างไว้ในขั้นตอนการสร้างโปรเจ็กต์ การดำเนินการนี้จะสร้างโปรเจ็กต์ Firebase ซึ่งจะลิงก์กับโปรเจ็กต์ GCP [GCP-Project-Id]

เมื่อสร้างโปรเจ็กต์ Firebase เรียบร้อยแล้ว คุณควรจะเห็นหน้าจอต่อไปนี้

ติดตั้งเครื่องมือ Firebase

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

$ npm i -g firebase-tools

หากต้องการยืนยันว่าติดตั้งเครื่องมือ Firebase อย่างถูกต้องแล้ว โปรดตรวจสอบข้อมูลเวอร์ชัน

$ firebase --version

คุณลงชื่อเข้าสู่ระบบเครื่องมือ Firebase CLI ด้วยบัญชี Google ด้วยคำสั่งเข้าสู่ระบบได้

$ firebase login

เริ่มต้นโปรเจ็กต์โฮสติ้ง

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

$ firebase init hosting

Firebase จะถามคำถามชุดหนึ่งเพื่อช่วยคุณเริ่มต้นใช้งานโปรเจ็กต์โฮสติ้ง

โปรดเลือกตัวเลือก — ใช้โปรเจ็กต์ที่มีอยู่
เลือกโปรเจ็กต์ Firebase เริ่มต้นสำหรับไดเรกทอรีนี้ - เลือก***[GCP-Project-Id]***
คุณต้องการใช้อะไรเป็นไดเรกทอรีสาธารณะ — สาธารณะ
กำหนดค่าเป็นแอปหน้าเดียวไหม — ใช่
ตั้งค่าบิลด์อัตโนมัติและทำให้ใช้งานได้ด้วย GitHub ไหม — ไม่

เมื่อเริ่มต้นโปรเจ็กต์แล้ว คุณสามารถทำให้โปรเจ็กต์ใช้งานได้กับ Firebase ด้วยคำสั่งต่อไปนี้

$ firebase deploy

Firebase จะสแกนโปรเจ็กต์และนำไฟล์ที่จำเป็นไปใช้ในการโฮสต์ระบบคลาวด์

เมื่อเปิด URL โฮสติ้งในเบราว์เซอร์ คุณจะเห็นหน้าเว็บที่เพิ่งทำให้ใช้งานได้ ดังนี้

เมื่อคุณทราบข้อมูลพื้นฐานเกี่ยวกับวิธีทำให้หน้าเว็บใช้งานได้ด้วย Firebase แล้ว เรามาติดตั้งใช้งานตัวอย่าง Codelab กันต่อ

4. ตัวอย่าง Codelab

คุณโคลนที่เก็บ Codelab ที่โฮสต์บน GitHub ได้โดยใช้คำสั่งด้านล่าง

$ git clone https://github.com/google/device-access-codelab-web-app.git

ในที่เก็บนี้ เรามีตัวอย่างไว้ใน 2 โฟลเดอร์แยกกัน โฟลเดอร์ codelab-start มีไฟล์ที่จําเป็นในการเริ่มต้นใช้งานจากจุดปัจจุบันที่ Codelab นี้ โฟลเดอร์ codelab-done มี Codelab นี้ในเวอร์ชันที่สมบูรณ์ พร้อมด้วยไคลเอ็นต์และเซิร์ฟเวอร์ Node.js ที่ทำงานได้อย่างสมบูรณ์

เราจะใช้ไฟล์จากโฟลเดอร์ codelab-start ใน Codelab นี้ทั้งหมด แต่หากคุณยังพบปัญหาอยู่ ก็อ้างอิงเวอร์ชันที่ทำจาก Codelab ได้เช่นกัน

ไฟล์ตัวอย่างของ Codelab

โครงสร้างไฟล์ของโฟลเดอร์ codelab-start มีดังนี้

public
├───index.html
├───scripts.js
├───style.css
firebase.json

โฟลเดอร์สาธารณะมีหน้าเว็บแบบคงที่ของแอปพลิเคชัน firebase.json มีหน้าที่กำหนดเส้นทางคำขอเว็บไปยังแอปของเรา ในเวอร์ชัน codelab-done คุณจะเห็นไดเรกทอรี functions ที่มีตรรกะสำหรับการทำให้พร็อกซีเซิร์ฟเวอร์ (ด่วน) ใช้งานได้ในฟังก์ชันของ Google Cloud

ทำให้ตัวอย่าง Codelab ใช้งานได้

คัดลอกไฟล์จาก codelab-start ลงในไดเรกทอรีของโปรเจ็กต์

$ firebase deploy

เมื่อ Firebase ติดตั้งใช้งานเสร็จแล้ว คุณควรจะเห็นแอปพลิเคชัน Codelab ดังต่อไปนี้

การเริ่มต้นขั้นตอนการตรวจสอบสิทธิ์จำเป็นต้องใช้ข้อมูลเข้าสู่ระบบของพาร์ทเนอร์ ซึ่งเราจะกล่าวถึงในส่วนถัดไป

5. การจัดการ OAuth

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

ระบุ URI การเปลี่ยนเส้นทาง

ขั้นตอนแรกของขั้นตอน OAuth จะต้องส่งชุดพารามิเตอร์ไปยังปลายทาง Google OAuth 2.0 หลังจากได้รับความยินยอมจากผู้ใช้ เซิร์ฟเวอร์ Google OAuth จะส่งคำขอที่มีรหัสการให้สิทธิ์ไปยัง URI การเปลี่ยนเส้นทาง

อัปเดตค่าคงที่ SERVER_URI (บรรทัดที่ 19) ด้วย URL โฮสติ้งของคุณเองใน scripts.js:

const SERVER_URI = "https://[GCP-Project-Id].web.app";

การทำให้แอปใช้งานได้อีกครั้งด้วยการเปลี่ยนแปลงนี้จะอัปเดต URI การเปลี่ยนเส้นทางที่ใช้สำหรับโปรเจ็กต์ของคุณ

$ firebase deploy

เปิดใช้ URI การเปลี่ยนเส้นทาง

เมื่อคุณอัปเดต URI การเปลี่ยนเส้นทางในไฟล์สคริปต์ คุณจะต้องเพิ่ม URL ดังกล่าวลงในรายการ URI การเปลี่ยนเส้นทางที่อนุญาตสำหรับรหัสไคลเอ็นต์ที่คุณสร้างไว้สำหรับโปรเจ็กต์ด้วย ไปที่หน้าข้อมูลเข้าสู่ระบบใน Google Cloud Platform ซึ่งจะแสดงรายการข้อมูลเข้าสู่ระบบทั้งหมดที่สร้างขึ้นสำหรับโปรเจ็กต์ของคุณ ดังนี้

ในรายการรหัสไคลเอ็นต์ OAuth 2.0 ให้เลือกรหัสไคลเอ็นต์ที่คุณสร้างไว้ในขั้นตอนการสร้างโครงการ เพิ่ม URI การเปลี่ยนเส้นทางของแอปลงในรายการ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับโปรเจ็กต์

ลองลงชื่อเข้าใช้!

ไปที่ URL โฮสติ้งที่คุณตั้งค่าไว้ด้วย Firebase ป้อนข้อมูลเข้าสู่ระบบของพาร์ทเนอร์ แล้วคลิกปุ่มลงชื่อเข้าใช้ รหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์คือข้อมูลเข้าสู่ระบบที่คุณได้รับจาก Google Cloud Platform รหัสโปรเจ็กต์มาจากคอนโซลการเข้าถึงอุปกรณ์

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

เนื่องจากแอปนี้เป็นแอปจำลอง Google จะออกคำเตือนก่อนที่จะทำการเปลี่ยนเส้นทาง!

คลิก "ขั้นสูง" จากนั้นเลือก "ไปที่ web.app (ไม่ปลอดภัย)" เพื่อเปลี่ยนเส้นทางไปยังแอปของคุณให้เสร็จสมบูรณ์

ซึ่งจะให้รหัส OAuth เป็นส่วนหนึ่งของคำขอ GET ที่เข้ามา ซึ่งแอปจะแลกเปลี่ยนกับโทเค็นเพื่อการเข้าถึงและโทเค็นการรีเฟรช

6. ระบบควบคุมอุปกรณ์

แอปตัวอย่างการเข้าถึงอุปกรณ์ใช้การเรียก API ของ Smart Device Management REST เพื่อควบคุมอุปกรณ์ Google Nest การเรียกเหล่านี้เกี่ยวข้องกับการส่งโทเค็นเพื่อการเข้าถึงในส่วนหัวของคำขอ GET หรือ POST พร้อมกับเพย์โหลดที่จำเป็นสำหรับคำสั่งบางอย่าง

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

function deviceAccessRequest(method, call, localpath, payload = null) {...}

method — ประเภทของคำขอ HTTP (GET หรือ POST)
การเรียก — สตริงที่แสดงถึงการเรียก API ของเรา ซึ่งใช้ในการกำหนดเส้นทางคำตอบ (listDevices, thermostatMode, temperatureSetpoint)
localpath — ปลายทางที่ส่งคำขอถึง ซึ่งมีรหัสโปรเจ็กต์และรหัสอุปกรณ์ (ต่อท้ายหลัง https://smartdevicemanagement.googleapis.com/v1)
เพย์โหลด (*) — ข้อมูลเพิ่มเติมที่ต้องระบุสำหรับการเรียก API (เช่น ค่าตัวเลขที่แสดงถึงอุณหภูมิของค่าที่กำหนด)

เราจะสร้างการควบคุม UI ตัวอย่าง (แสดงรายการอุปกรณ์ ตั้งโหมด ตั้งอุณหภูมิ) เพื่อควบคุม Nest Thermostat ดังนี้

การควบคุม UI เหล่านี้จะเรียกฟังก์ชันที่เกี่ยวข้อง (listDevices(), postThermostatMode(), postTemperatureSetpoint()) จาก scripts.js จึงได้เว้นว่างไว้เพื่อให้คุณนำไปใช้ เป้าหมายคือการเลือกวิธี/เส้นทางที่ถูกต้องและส่งเพย์โหลดไปยังฟังก์ชัน deviceAccessRequest(...)

แสดงรายการอุปกรณ์

การเรียกใช้การเข้าถึงอุปกรณ์ที่ง่ายที่สุดคือ listDevices การดำเนินการจะใช้คำขอ GET และไม่จำเป็นต้องมีเพย์โหลด ปลายทางต้องมีการจัดโครงสร้างโดยใช้ projectId เติมฟังก์ชัน listDevices() ให้สมบูรณ์ดังนี้

function listDevices() {
  var endpoint = "/enterprises/" + projectId + "/devices";
  deviceAccessRequest('GET', 'listDevices', endpoint);
}

บันทึกการเปลี่ยนแปลงและทำให้โปรเจ็กต์ Firebase ใช้งานได้อีกครั้งด้วยคำสั่งต่อไปนี้

$ firebase deploy

เมื่อใช้งานแอปเวอร์ชันใหม่แล้ว ให้ลองโหลดหน้านี้ซ้ำ และคลิกรายการอุปกรณ์ ขั้นตอนนี้ควรปรากฏในรายการในส่วน "ควบคุมอุปกรณ์" ซึ่งคุณควรเห็นรหัสของตัวควบคุมอุณหภูมิ

การเลือกอุปกรณ์จากรายการจะอัปเดตช่อง deviceId ในไฟล์ scripts.js สำหรับการควบคุม 2 ส่วนถัดไป เราจะต้องระบุ deviceId สำหรับอุปกรณ์ที่ต้องการควบคุม

ควบคุมตัวควบคุมอุณหภูมิ

การควบคุม Nest Thermostat ใน Smart Device Management API มีลักษณะพื้นฐาน 2 ประการ ThermostatMode และ TemperatureSetpoint ThermostatMode ตั้งค่าโหมดสำหรับ Nest Thermostat เป็น 1 ใน 4 โหมดที่เป็นไปได้ ได้แก่ {Off, Heat, Cool, HeatCool} จากนั้นเราจะต้องระบุโหมดที่เลือกให้เป็นส่วนหนึ่งของเพย์โหลด

แทนที่ฟังก์ชัน postThermostatMode() ใน scripts.js ด้วยข้อมูลต่อไปนี้

function postThermostatMode() {
  var endpoint = "/enterprises/" + projectId + "/devices/" + deviceId + ":executeCommand";
  var tempMode = id("tempMode").value;
  var payload = {
    "command": "sdm.devices.commands.ThermostatMode.SetMode",
    "params": {
      "mode": tempMode
    }
  };
  deviceAccessRequest('POST', 'thermostatMode', endpoint, payload);
}

ฟังก์ชันถัดไป postTemperatureSetpoint() จะจัดการการตั้งอุณหภูมิ (เป็นเซลเซียส) สำหรับ Nest Thermostat ของคุณ พารามิเตอร์ 2 ตัวที่ตั้งค่าในเพย์โหลดได้คือ heatCelsius และ coolCelsius ขึ้นอยู่กับโหมดตัวควบคุมอุณหภูมิที่เลือก

function postTemperatureSetpoint() {
  var endpoint = "/enterprises/" + projectId + "/devices/" + deviceId + ":executeCommand";
  var heatCelsius = parseFloat(id("heatCelsius").value);
  var coolCelsius = parseFloat(id("coolCelsius").value);

  var payload = {
    "command": "",
    "params": {}
  };
  
  if ("HEAT" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetHeat";
    payload.params["heatCelsius"] = heatCelsius;
  }
  else if ("COOL" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetCool";
    payload.params["coolCelsius"] = coolCelsius;
  }
  else if ("HEATCOOL" === id("tempMode").value) {
    payload.command = "sdm.devices.commands.ThermostatTemperatureSetpoint.SetRange";
    payload.params["heatCelsius"] = heatCelsius;
    payload.params["coolCelsius"] = coolCelsius;
  } else {
    console.log("Off and Eco mode don't allow this function");
    return;
  }
  deviceAccessRequest('POST', 'temperatureSetpoint', endpoint, payload);
}

7. เซิร์ฟเวอร์ Node.js (ไม่บังคับ)

ยินดีด้วย คุณได้สร้างเว็บแอปพลิเคชันฝั่งไคลเอ็นต์ที่ส่งคําขอ Smart Device Management API จากเบราว์เซอร์ได้ สำหรับผู้ที่ต้องการสร้างจากฝั่งเซิร์ฟเวอร์ เราอยากเริ่มต้นอย่างรวดเร็วด้วยพร็อกซีเซิร์ฟเวอร์ที่สามารถเปลี่ยนเส้นทางคำขอของคุณจากเบราว์เซอร์

เราจะใช้ฟังก์ชันระบบคลาวด์ของ Firebase, Node.js และ Express สำหรับพร็อกซีเซิร์ฟเวอร์นี้

เริ่มต้น Cloud Functions

เปิดหน้าต่างเทอร์มินัลใหม่ ไปที่ไดเรกทอรีโปรเจ็กต์ และเรียกใช้รายการต่อไปนี้

$ firebase init functions

Firebase จะถามชุดคำถามต่อไปนี้เพื่อเริ่มต้นฟังก์ชันระบบคลาวด์

คุณต้องการใช้ภาษาใดในการเขียน Cloud Functions — JavaScript
คุณต้องการใช้ ESLint เพื่อตรวจหาข้อบกพร่องที่อาจเกิดขึ้นและบังคับใช้รูปแบบไหม — ไม่
ต้องการติดตั้งทรัพยากร Dependency ด้วย npm เลยไหม — ใช่

การดำเนินการนี้จะเริ่มต้นโฟลเดอร์ functions ในโปรเจ็กต์ รวมถึงติดตั้งทรัพยากร Dependency ที่จำเป็นด้วย คุณจะเห็นว่าโฟลเดอร์โปรเจ็กต์มีไดเรกทอรีฟังก์ชัน พร้อมด้วยไฟล์ index.js สำหรับกำหนดฟังก์ชันระบบคลาวด์ ส่วน package.json เพื่อกำหนดการตั้งค่าและไดเรกทอรี node_modules เพื่อเก็บการอ้างอิง

เราจะใช้ไลบรารี npm 2 รายการเพื่อสร้างฟังก์ชันการทำงานฝั่งเซิร์ฟเวอร์ ได้แก่ Express และ xmlhttprequest คุณจะต้องเพิ่มรายการต่อไปนี้ลงในรายการทรัพยากร Dependency ในไฟล์ package.json

"xmlhttprequest": "^1.8.0",
"express": "^4.17.0"

จากนั้นการเรียกใช้การติดตั้ง npm จากไดเรกทอรีฟังก์ชันควรติดตั้งการอ้างอิงสำหรับโปรเจ็กต์ของคุณ ดังนี้

$ npm install

ในกรณีที่ npm พบปัญหาในการดาวน์โหลดแพ็กเกจ คุณสามารถลองบันทึก xmlhttprequest และแสดงออกมาอย่างชัดเจนด้วยคำสั่งต่อไปนี้:

$ npm install express xmlhttprequest --save

อัปเกรดเป็นแพ็กเกจ Blaze

เมื่อใช้คำสั่ง firebase deploy คุณจะต้องอัปเกรดเป็นแพ็กเกจ Blaze ซึ่งกำหนดให้คุณเพิ่มวิธีการชำระเงินลงในบัญชี ไปที่ภาพรวมโปรเจ็กต์ > การใช้งานและการเรียกเก็บเงิน และอย่าลืมเลือกแพ็กเกจ Blaze สำหรับโปรเจ็กต์ของคุณ

เซิร์ฟเวอร์บิลด์ Express

เซิร์ฟเวอร์ Express ปฏิบัติตามเฟรมเวิร์กง่ายๆ เพื่อตอบกลับคำขอ GET และ POST ที่เข้ามาใหม่ เราได้สร้างเซิร์ฟเล็ตที่รอฟังคำขอ POST ส่งไปยัง URL ปลายทางที่ระบุไว้ในเพย์โหลด และตอบกลับด้วยการตอบกลับที่ได้รับจากการโอน

แก้ไขไฟล์ index.js ในไดเรกทอรีฟังก์ชันให้มีลักษณะดังนี้

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
const functions = require('firebase-functions');
const express = require('express');
const http = require('http');

const app = express();
app.use(express.json());


//***** Device Access - Proxy Server *****//

// Serving Get Requests (Not used) 
app.get('*', (request, response) => {
  response.status(200).send("Hello World!");
});
// Serving Post Requests
app.post('*', (request, response) => {
  
  setTimeout(() => {
    // Read the destination address from payload:
    var destination = request.body.address;
    
    // Create a new proxy post request:
    var xhr = new XMLHttpRequest();
    xhr.open('POST', destination);
    
    // Add original headers to proxy request:
    for (var key in request.headers) {
            var value = request.headers[key];
      xhr.setRequestHeader(key, value);
    }
    
    // Add command/parameters to proxy request:
    var newBody = {};
    newBody.command = request.body.command;
    newBody.params = request.body.params;
    
    // Respond to original request with the response coming
    // back from proxy request (to Device Access Endpoint)
    xhr.onload = function () {
      response.status(200).send(xhr.responseText);
    };
    
    // Send the proxy request!
    xhr.send(JSON.stringify(newBody));
  }, 1000);
});

// Export our app to firebase functions:
exports.app = functions.https.onRequest(app);

ในการกำหนดเส้นทางคำขอไปยังเซิร์ฟเวอร์ของเรา เราจำเป็นต้องปรับการเขียนใหม่จาก firebase.json ดังนี้

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
        "source": "/proxy**",
        "function": "app"
      },{
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

การดำเนินการนี้จะกำหนดเส้นทาง URL ที่ขึ้นต้นด้วย /proxy ไปยังเซิร์ฟเวอร์ Express และ URL ที่เหลือจะส่งไปยัง index.html ต่อไป

การเรียก Proxy API

ตอนนี้เรามีเซิร์ฟเวอร์พร้อมแล้ว เรามากำหนด URI ของพร็อกซีใน scripts.js เพื่อให้เบราว์เซอร์ของเราส่งคำขอไปยังที่อยู่นี้กัน:

const PROXY_URI = SERVER_URI + "/proxy";

จากนั้นเพิ่มฟังก์ชัน proxyRequest คือ scripts.js ซึ่งมีลายเซ็นเหมือนกับฟังก์ชัน deviceAccessRequest(...) สำหรับการเรียกการเข้าถึงอุปกรณ์โดยอ้อม

function proxyRequest(method, call, localpath, payload = null) {
    var xhr = new XMLHttpRequest();
    
    // We are doing our post request to our proxy server:
    xhr.open(method, PROXY_URI);
    xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.onload = function () {
      // Response is passed to deviceAccessResponse function:
      deviceAccessResponse(call, xhr.response);
    };
    
    // We are passing the device access endpoint in address field of the payload:
    payload.address = "https://smartdevicemanagement.googleapis.com/v1" + localpath;
    if ('POST' === method && payload)
        xhr.send(JSON.stringify(payload));
    else
        xhr.send();
}

ขั้นตอนสุดท้ายคือการแทนที่การเรียก deviceAccessRequest(...) ด้วยฟังก์ชัน proxyRequest(...) ในฟังก์ชัน postThermostatMode() และ postTemperatureSetpoint() ภายใน scripts.js

เรียกใช้ firebase deploy เพื่ออัปเดตแอป

$ firebase deploy

ซึ่งจะทำให้คุณมีพร็อกซีเซิร์ฟเวอร์ Node.js ที่ทำงานอยู่ โดยใช้ Express บน Cloud Functions

ให้สิทธิ์ Cloud Function

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

จาก Google Cloud Platform ให้ไปที่แท็บ Cloud Functions จากเมนู แล้วเลือกฟังก์ชันระบบคลาวด์ โดยทำดังนี้

คลิกสิทธิ์ แล้วคลิกเพิ่มสมาชิก เขียน allUsers ลงในช่องสมาชิกใหม่ และเลือก Cloud Functions > Cloud Functions Invoker เป็นบทบาท การคลิก บันทึก จะแสดงข้อความเตือน:

การเลือกอนุญาตการเข้าถึงแบบสาธารณะจะทำให้แอปพลิเคชันฝั่งไคลเอ็นต์สามารถใช้ฟังก์ชันระบบคลาวด์ได้

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

ขั้นตอนถัดไป

หากคุณกำลังมองหาวิธีเสริมความเชี่ยวชาญเกี่ยวกับการเข้าถึงอุปกรณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับการควบคุมอุปกรณ์ Nest อื่นๆ และขั้นตอนการรับรองเพื่อดูขั้นตอนการเปิดตัวผลิตภัณฑ์สู่สายตาชาวโลกในเอกสารประกอบเกี่ยวกับลักษณะ

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