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