Xây dựng ứng dụng web truy cập thiết bị

1. Giới thiệu

Chương trình Quyền truy cập vào thiết bị cung cấp Smart Device Management API (API Quản lý thiết bị thông minh), một API REST để nhà phát triển điều khiển các thiết bị Google Nest qua ứng dụng của họ. Người dùng cần phải cho phép bên thứ ba truy cập vào thiết bị Nest của họ.

52f77aa38cda13a6.png

Có ba bước chính để tích hợp thành công Quyền truy cập vào thiết bị:

  1. Tạo dự án – Tạo một dự án trong Google Cloud Platform và đăng ký làm nhà phát triển trong Bảng điều khiển truy cập thiết bị.
  2. Liên kết tài khoản – Chuyển người dùng thông qua quy trình liên kết tài khoản và truy xuất mã truy cập. Đổi mã này lấy mã truy cập.
  3. Kiểm soát thiết bị – Đưa ra các yêu cầu API quản lý thiết bị thông minh để điều khiển thiết bị bằng cách gửi lệnh kèm mã truy cập.

Trong lớp học lập trình này, chúng ta sẽ tìm hiểu sâu hơn về cách hoạt động của tính năng Quyền truy cập thiết bị bằng cách xây dựng một ứng dụng web xử lý quy trình xác thực và thực hiện các lệnh gọi API Quản lý thiết bị thông minh. Chúng ta cũng sẽ tìm hiểu cách triển khai một máy chủ proxy đơn giản bằng cách sử dụng Node.js và Express để định tuyến các yêu cầu Truy cập thiết bị.

Trước khi bắt đầu, bạn nên tìm hiểu về các công nghệ web phổ biến mà chúng ta sẽ sử dụng trong lớp học lập trình này, chẳng hạn như xác thực bằng OAuth 2.0 hoặc tạo ứng dụng web bằng Node.js, mặc dù những công nghệ này không phải là điều kiện tiên quyết.

Những thông tin bạn cần

  • Node.js 8 trở lên
  • Tài khoản Google với một máy Nest Thermostat được liên kết

Kiến thức bạn sẽ học được

  • Thiết lập một dự án Firebase lưu trữ các trang web tĩnh và chức năng trên đám mây
  • Gửi yêu cầu quyền truy cập vào thiết bị thông qua ứng dụng web dựa trên trình duyệt
  • Xây dựng máy chủ proxy với Node.js và Express để định tuyến các yêu cầu của bạn

2. Tạo dự án

Nhà phát triển cần tạo một dự án Google Cloud Platform (GCP) để thiết lập chế độ tích hợp Quyền truy cập vào thiết bị. Mã ứng dụng kháchBí mật ứng dụng khách tạo trong dự án GCP sẽ được dùng trong luồng OAuth giữa ứng dụng của nhà phát triển và Google Cloud. Nhà phát triển cũng cần truy cập vào Bảng điều khiển truy cập thiết bị để tạo dự án nhằm truy cập vào API Quản lý thiết bị thông minh.

Google Cloud Platform

Truy cập vào Google Cloud Platform. Nhấp vào tạo dự án mới rồi cung cấp tên dự án. Mã dự án [GCP-Project-Id] cho Google Cloud cũng sẽ hiển thị. Vui lòng ghi lại vì chúng tôi sẽ sử dụng mã đó trong quá trình thiết lập Firebase. (Trong suốt lớp học lập trình này, chúng ta sẽ gọi mã này là [GCP-Project-Id].)

585e926b21994ac9.png

Bước đầu tiên là bật Thư viện API cần thiết trên dự án của chúng ta. Chuyển đến APIs & Services > Library (API và dịch vụ > Thư viện) rồi tìm Smart Device Management API (API Quản lý thiết bị thông minh). Bạn cần bật API này để cho phép dự án của bạn gửi yêu cầu đến các lệnh gọi API Truy cập thiết bị.

14e7eabc422c7fda.png

Trước khi chuyển sang tạo thông tin xác thực OAuth, chúng ta cần định cấu hình màn hình xin phép bằng OAuth cho dự án. Chuyển đến API và dịch vụ > Màn hình xin phép bằng OAuth. Đối với Loại người dùng, hãy chọn bên ngoài. Cung cấp tên và email hỗ trợ cho ứng dụng của bạn, cũng như thông tin liên hệ của nhà phát triển để hoàn tất màn hình đầu tiên. Khi được yêu cầu Người dùng thử nghiệm, hãy nhớ cung cấp địa chỉ email có thiết bị được liên kết ở bước này.

Sau khi bạn định cấu hình màn hình xin phép bằng OAuth, hãy chuyển đến API và dịch vụ > Thông tin xác thực. Nhấp vào +Tạo thông tin xác thực rồi chọn Mã ứng dụng khách OAuth. Đối với loại ứng dụng, hãy chọn Ứng dụng web.

5de534212d44fce7.png

Đặt tên cho khách hàng của bạn rồi nhấp vào TẠO. Sau này, chúng tôi sẽ thêm nguồn gốc JavaScript được ủy quyền và URI chuyển hướng được ủy quyền. Hoàn tất quy trình này sẽ hiển thị [Client-Id][Client-Secret] được liên kết với Ứng dụng OAuth 2.0 này.

e6a670da18952f08.png

Bảng điều khiển quyền truy cập vào thiết bị

Chuyển đến Device Access Console (Bảng điều khiển quyền truy cập vào thiết bị). Nếu chưa từng sử dụng Device Access Console, bạn sẽ được chào đón bằng thoả thuận về Điều khoản dịch vụ và khoản phí đăng ký là 5 USD.

Tạo một dự án mới rồi đặt tên cho dự án đó. Trong cửa sổ tiếp theo, hãy cung cấp [Client-Id] mà bạn nhận được từ GCP ở bước trước.

f8a3f27354bc2625.png

Việc bật sự kiện và hoàn tất các bước tạo dự án sẽ đưa bạn đến trang chủ của dự án. [Project-Id] của bạn sẽ xuất hiện dưới tên mà bạn đã đặt cho dự án của mình.

db7ba33d8b707148.png

Vui lòng ghi lại [Project-Id] của bạn vì chúng tôi sẽ sử dụng mã này khi gửi yêu cầu đến Smart Device Management API.

3. Thiết lập Firebase

Firebase giúp nhà phát triển triển khai các ứng dụng web một cách nhanh chóng và dễ dàng. Chúng tôi sẽ phát triển một ứng dụng web phía máy khách để tích hợp Quyền truy cập vào thiết bị bằng Firebase.

Tạo một dự án Firebase

Truy cập vào Bảng điều khiển của Firebase. Nhấp vào Add Project (Thêm dự án), sau đó chọn dự án mà bạn đã tạo ở bước Project Creation (Tạo dự án). Thao tác này sẽ tạo một dự án Firebase liên kết với dự án GCP của bạn [GCP-Project-Id].

Sau khi tạo dự án Firebase thành công, bạn sẽ thấy màn hình sau:

dbb02bbacac093f5.png

Cài đặt các công cụ Firebase

Firebase cung cấp một bộ công cụ CLI để xây dựng và triển khai ứng dụng của bạn. Để cài đặt các công cụ này, hãy mở cửa sổ dòng lệnh mới và chạy lệnh sau. Thao tác này sẽ cài đặt các công cụ Firebase trên toàn cầu.

$ npm i -g firebase-tools

Để xác minh rằng các công cụ Firebase đã được cài đặt đúng cách, hãy kiểm tra thông tin phiên bản.

$ firebase --version

Bạn có thể đăng nhập vào các công cụ Firebase CLI bằng Tài khoản Google của mình bằng lệnh đăng nhập.

$ firebase login

Khởi chạy dự án lưu trữ

Sau khi đăng nhập được, bước tiếp theo là khởi động dự án lưu trữ cho ứng dụng web của bạn. Trên cửa sổ dòng lệnh, hãy chuyển đến thư mục mà bạn muốn tạo dự án và chạy lệnh sau:

$ firebase init hosting

Firebase sẽ hỏi bạn một loạt câu hỏi để giúp bạn bắt đầu dự án lưu trữ:

  1. Vui lòng chọn một mục — Sử dụng dự án hiện có
  2. Chọn một dự án Firebase mặc định cho thư mục này — Chọn***[GCP-Project-Id]***
  3. Bạn muốn dùng nội dung nào làm thư mục công khai? — Công khai
  4. Định cấu hình là ứng dụng trang đơn? — Có
  5. Dùng GitHub để thiết lập các bản dựng và triển khai tự động? – Không

Sau khi khởi động dự án, bạn có thể triển khai dự án cho Firebase bằng lệnh sau:

$ firebase deploy

Firebase sẽ quét dự án của bạn và triển khai các tệp cần thiết để lưu trữ trên đám mây.

fe15cf75e985e9a1.png

Khi mở URL lưu trữ trong trình duyệt, bạn sẽ thấy trang mình vừa triển khai:

e40871238c22ebe2.png

Giờ đây khi bạn đã nắm được các kiến thức cơ bản về cách triển khai một trang web bằng Firebase, hãy cùng bắt đầu triển khai mẫu Lớp học lập trình!

4. Mẫu của lớp học lập trình

Bạn có thể sao chép kho lưu trữ lớp học lập trình được lưu trữ trên GitHub bằng lệnh dưới đây:

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

Trong kho lưu trữ này, chúng tôi cung cấp các mẫu trong hai thư mục riêng biệt. Thư mục codelab-start có các tệp cần thiết để giúp bạn bắt đầu từ thời điểm hiện tại ở lớp học lập trình này. Thư mục codelab-done chứa một phiên bản hoàn chỉnh của lớp học lập trình này, với ứng dụng khách và máy chủ nốt.js có đầy đủ chức năng.

Chúng ta sẽ sử dụng các tệp từ thư mục codelab-start trong suốt lớp học lập trình này. Tuy nhiên, nếu bạn cảm thấy khó khăn bất cứ lúc nào, vui lòng tham khảo phiên bản đã hoàn tất của lớp học lập trình.

Tệp mẫu của lớp học lập trình

Cấu trúc tệp của thư mụcCodelab-start như sau:

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

Thư mục công khai chứa các trang tĩnh trong ứng dụng của chúng tôi. firebase.json chịu trách nhiệm định tuyến các yêu cầu web đến ứng dụng của chúng tôi. Trong phiên bản codelab-done, bạn cũng sẽ thấy thư mục functions chứa logic để máy chủ proxy (mô tả) được triển khai trên các chức năng của Google Cloud.

Triển khai mẫu của lớp học lập trình

Sao chép các tệp từ codelab-start vào thư mục của dự án.

$ firebase deploy

Sau khi Firebase hoàn tất quá trình triển khai, bạn có thể thấy ứng dụng của lớp học lập trình:

e84c1049eb4cca92.png

Việc bắt đầu quy trình xác thực yêu cầu phải có thông tin xác thực của đối tác. Chúng tôi sẽ đề cập đến những thông tin này trong phần tiếp theo.

5. Xử lý OAuth

OAuth là tiêu chuẩn web để uỷ quyền truy cập, thường được dùng để người dùng cấp cho các ứng dụng của bên thứ ba quyền truy cập vào thông tin tài khoản của họ mà không cần chia sẻ mật khẩu. Chúng tôi sử dụng OAuth 2.0 để cho phép nhà phát triển truy cập vào thiết bị của người dùng thông qua tính năng Quyền truy cập thiết bị.

7ee31f5d9c37f699.png

Chỉ định URI chuyển hướng

Bước đầu tiên của quy trình OAuth bao gồm việc truyền một nhóm tham số đến điểm cuối của Google OAuth 2.0. Sau khi nhận được sự đồng ý của người dùng, máy chủ OAuth của Google sẽ gửi một yêu cầu kèm theo mã uỷ quyền đến URI chuyển hướng của bạn.

Cập nhật hằng số SERVER_URI (dòng 19) bằng URL lưu trữ của riêng bạn trong scripts.js:

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

Khi bạn triển khai lại ứng dụng cùng với sự thay đổi này, hệ thống sẽ cập nhật URI chuyển hướng mà bạn dùng cho dự án.

$ firebase deploy

Bật URI chuyển hướng

Sau khi cập nhật URI chuyển hướng trong tệp tập lệnh, bạn cũng phải thêm URI đó vào danh sách các URI chuyển hướng được phép cho mã ứng dụng khách mà bạn đã tạo cho dự án của mình. Chuyển đến Trang thông tin xác thực trong Google Cloud Platform. Trang này sẽ liệt kê tất cả thông tin đăng nhập đã tạo cho dự án của bạn:

1a07b624b5e548da.png

Trong danh sách Mã ứng dụng khách OAuth 2.0, hãy chọn mã ứng dụng bạn đã tạo ở bước Tạo dự án. Thêm URI chuyển hướng của ứng dụng vào danh sách URI chuyển hướng được uỷ quyền cho dự án của bạn.

6d65b298e1f005e2.png

Hãy thử đăng nhập!

Truy cập vào URL lưu trữ mà bạn đã thiết lập bằng Firebase, nhập thông tin đăng nhập đối tác của bạn rồi nhấp vào nút ĐĂNG NHẬP. Mã ứng dụng khách và Mật khẩu ứng dụng khách là thông tin xác thực bạn nhận được từ Google Cloud Platform, Mã dự án là từ Bảng điều khiển truy cập thiết bị.

78b48906a2dd7c05.png

Nút SIGN IN (Đăng nhập) sẽ đưa người dùng của bạn thông qua quy trình OAuth dành cho doanh nghiệp, bắt đầu từ màn hình đăng nhập vào Tài khoản Google của họ. Sau khi đăng nhập, người dùng sẽ được yêu cầu cấp quyền cho dự án của bạn để họ truy cập vào thiết bị Nest.

e9b7887c4ca420.png

Vì đây là ứng dụng mô phỏng nên Google sẽ đưa ra cảnh báo trước khi chuyển hướng!

b227d510cb1df073.png

Nhấp vào "Nâng cao", sau đó chọn "Truy cập web.app (không an toàn)" để hoàn tất việc chuyển hướng đến ứng dụng của bạn.

673a4fd217e24dad.png

Thao tác này sẽ cung cấp Mã OAuth trong yêu cầu GET được gửi đến. Sau đó, ứng dụng sẽ đổi lấy Mã truy cập và Mã làm mới.

6. Điều khiển thiết bị

Ứng dụng mẫu Device Access (Quyền truy cập vào thiết bị) sử dụng các lệnh gọi API REST API quản lý thiết bị thông minh để điều khiển các thiết bị Google Nest. Những lệnh gọi này liên quan đến việc truyền mã truy cập trong tiêu đề của yêu cầu GET hoặc POST cùng với trọng tải cần thiết cho một số lệnh nhất định.

Chúng ta đã viết một hàm yêu cầu quyền truy cập chung để xử lý các lệnh gọi này. Tuy nhiên, bạn cần cung cấp điểm cuối chính xác cũng như đối tượng tải trọng khi cần cho hàm này!

function deviceAccessRequest(method, call, localpath, payload = null) {...}
  • phương thức – Loại yêu cầu HTTP (GET hoặc POST)
  • lệnh gọi – Một chuỗi đại diện cho lệnh gọi API, dùng để định tuyến phản hồi (listDevices, thermostatMode, temperatureSetpoint)
  • localpath – Điểm cuối gửi yêu cầu, chứa Mã dự án và Mã thiết bị (thêm sau https://smartdevicemanagement.googleapis.com/v1)
  • tải trọng (*) — Dữ liệu bổ sung cần thiết cho lệnh gọi API (ví dụ: giá trị số biểu thị nhiệt độ cho một điểm đặt)

Chúng ta sẽ xây dựng các chế độ điều khiển giao diện người dùng mẫu (Liệt kê thiết bị, Đặt chế độ, Đặt nhiệt độ) để điều khiển một máy điều nhiệt Nest:

86f8a193aa397421.png

Các thành phần điều khiển trên giao diện người dùng này sẽ gọi các hàm tương ứng (listDevices(), postThermostatMode(), postTemperatureSetpoint()) qua scripts.js. Hãy để trống các trường này để bạn triển khai! Mục tiêu là chọn phương thức/đường dẫn chính xác và truyền tải trọng (payload) đến hàm deviceAccessRequest(...).

Liệt kê thiết bị

Lệnh gọi Truy cập thiết bị đơn giản nhất là listDevices. Phương thức này sử dụng yêu cầu GET và không đòi hỏi tải trọng. Điểm cuối cần được cấu trúc bằng projectId. Hoàn tất hàm listDevices() như sau:

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

Lưu các thay đổi và triển khai lại dự án Firebase bằng lệnh sau:

$ firebase deploy

Sau khi triển khai phiên bản mới của ứng dụng, hãy thử tải lại trang rồi nhấp vào DANH SÁCH THIẾT BỊ. Thao tác này sẽ điền sẵn danh sách vào phần Điều khiển thiết bị. Bạn sẽ thấy mã máy điều nhiệt của mình:

b64a198673ed289f.png

Thao tác chọn thiết bị trong danh sách sẽ cập nhật trường deviceId trong tệp scripts.js. Đối với 2 thành phần điều khiển tiếp theo, chúng ta cần chỉ định deviceId cho thiết bị cụ thể mà chúng ta muốn điều khiển.

Điều khiển máy điều nhiệt

Có hai đặc điểm để điều khiển cơ bản máy điều nhiệt Nest trong Smart Device Management API. ThermostatModeTemperatureSetpoint. ThermostatMode đặt chế độ cho máy Nest Thermostat của bạn thành một trong bốn chế độ có thể có: {Off, Heat, Cool, HeatCool}. Sau đó, chúng ta cần cung cấp chế độ đã chọn như một phần của tải trọng.

Thay thế hàm postThermostatMode() trong scripts.js bằng hàm sau:

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);
}

Hàm tiếp theo, postTemperatureSetpoint(), sẽ xử lý việc đặt nhiệt độ (tính bằng độ C) cho máy điều nhiệt Nest của bạn. Có 2 tham số có thể đặt trong tải trọng, heatCelsiuscoolCelsius, tuỳ thuộc vào chế độ máy điều nhiệt đã chọn.

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. Máy chủ Node.js (Không bắt buộc)

Xin chúc mừng! Bạn đã tạo một ứng dụng web phía máy khách có thể đưa ra các yêu cầu về API Quản lý thiết bị thông minh từ trình duyệt. Đối với những người muốn xây dựng trên máy chủ, chúng tôi muốn khởi đầu với một máy chủ proxy có thể chuyển hướng yêu cầu của bạn từ trình duyệt.

Đối với máy chủ proxy này, chúng tôi sẽ sử dụng các chức năng đám mây của Firebase, Node.js và Express.

Khởi chạy Cloud Functions

Mở cửa sổ dòng lệnh mới, chuyển đến thư mục dự án của bạn và chạy lệnh sau:

$ firebase init functions

Firebase sẽ hỏi bạn một loạt câu hỏi để khởi chạy các chức năng của đám mây:

  1. Bạn muốn sử dụng ngôn ngữ nào để viết Chức năng đám mây? – JavaScript
  2. Bạn có muốn sử dụng ESLint để phát hiện các lỗi có thể xảy ra và thực thi kiểu không? – Không
  3. Bạn có muốn cài đặt các phần phụ thuộc bằng npm ngay bây giờ không? — Có

Thao tác này sẽ khởi chạy một thư mục functions trong dự án của bạn, cũng như cài đặt các phần phụ thuộc cần thiết. Bạn sẽ thấy rằng thư mục dự án chứa thư mục hàm, trong đó có tệp index.js để xác định hàm đám mây, package.json để xác định các chế độ cài đặt và thư mục node_modules chứa các phần phụ thuộc.

Chúng tôi sẽ sử dụng hai thư viện npm để xây dựng chức năng phía máy chủ: express và xmlhttprequest. Bạn sẽ cần thêm các mục nhập sau vào danh sách các phần phụ thuộc trong tệp package.json:

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

Sau đó, việc chạy npm install từ thư mục hàm sẽ cài đặt các phần phụ thuộc cho dự án của bạn:

$ npm install

Trong trường hợp npm gặp sự cố khi tải xuống gói, bạn có thể cố gắng lưu xmlhttprequest và thể hiện rõ ràng bằng lệnh sau:

$ npm install express xmlhttprequest --save

Nâng cấp lên Gói linh hoạt

Nếu dùng lệnh firebase deploy, bạn sẽ phải nâng cấp lên gói Blaze. Khi đó, bạn sẽ phải thêm một phương thức thanh toán vào tài khoản của mình. Chuyển đến Tổng quan về dự án > Mức sử dụng và thanh toán, sau đó đảm bảo bạn chọn Gói linh hoạt cho dự án của mình.

c6a5e5a21397bef6.png

Xây dựng máy chủ Express

Máy chủ Express tuân theo một khung đơn giản để phản hồi các yêu cầu GETPOST đến. Chúng ta đã xây dựng một dịch vụ servlet giúp theo dõi các yêu cầu POST, truyền các yêu cầu này tới một URL đích được chỉ định trong tải trọng và phản hồi bằng phản hồi nhận được từ quá trình chuyển dữ liệu.

Sửa đổi tệp index.js trong thư mục hàm có dạng như sau:

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);

Để định tuyến các yêu cầu đến máy chủ, chúng ta cần điều chỉnh việc ghi lại từ firebase.json như sau:

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

Thao tác này sẽ định tuyến các URL bắt đầu bằng /proxy đến máy chủ Express của chúng tôi và các URL còn lại sẽ tiếp tục chuyển đến index.html.

Lệnh gọi API proxy

Bây giờ, máy chủ của chúng ta đã sẵn sàng, hãy xác định một URI proxy trong scripts.js để trình duyệt của chúng ta gửi yêu cầu đến địa chỉ này:

const PROXY_URI = SERVER_URI + "/proxy";

Sau đó, hãy thêm hàm proxyRequestscripts.js. Hàm này có cùng chữ ký với hàm deviceAccessRequest(...) cho các lệnh gọi gián tiếp từ Quyền truy cập thiết bị.

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();
}

Bước cuối cùng là thay thế các lệnh gọi deviceAccessRequest(...) bằng hàm proxyRequest(...), trong các hàm postThermostatMode()postTemperatureSetpoint() trong scripts.js.

Chạy firebase deploy để cập nhật ứng dụng.

$ firebase deploy

Nhờ vậy, bạn hiện có một máy chủ proxy Node.js đang chạy bằng cách sử dụng Express trên Cloud Functions.

Cấp quyền sử dụng chức năng trên đám mây

Bước cuối cùng là xem lại quyền truy cập đối với các chức năng trên đám mây và đảm bảo rằng ứng dụng phía máy khách của bạn có thể gọi các chức năng này.

Từ Google Cloud Platform, hãy chuyển đến thẻ Cloud Functions trong trình đơn, sau đó chọn chức năng đám mây của bạn:

461e9bae74227fc1.png

Nhấp vào Quyền, rồi nhấp vào Thêm thành viên. Ghi tất cả Người dùng vào trường thành viên mới rồi chọn Cloud Functions > Cloud Functions Invoker làm vai trò. Khi nhấp vào Lưu, bạn sẽ thấy một thông báo cảnh báo:

3adb01644217578c.png

Khi bạn chọn Cho phép truy cập công khai, ứng dụng phía máy khách sẽ có thể sử dụng chức năng đám mây của bạn.

Xin chúc mừng, bạn đã hoàn thành tất cả các bước. Bây giờ, bạn có thể truy cập vào ứng dụng web và cho phép các chế độ điều khiển thiết bị được định tuyến qua máy chủ proxy của bạn!

Các bước tiếp theo

Bạn đang tìm cách nâng cao kiến thức chuyên môn của mình về Quyền truy cập thiết bị? Hãy xem tài liệu về đặc điểm để tìm hiểu thêm về cách kiểm soát các thiết bị Nest khác cũng như cách kiểm soát các thiết bị Nest khác cũng như quy trình chứng nhận để tìm hiểu các bước ra mắt sản phẩm ra thế giới!

Nâng cao kỹ năng của bạn hơn nữa bằng ứng dụng mẫu ứng dụng web Truy cập thiết bị. Ứng dụng này sẽ được xây dựng dựa trên trải nghiệm của bạn trong lớp học lập trình và triển khai một ứng dụng web đang hoạt động để điều khiển camera, chuông cửa và máy điều nhiệt Nest.