פיתוח אפליקציית אינטרנט עם גישה למכשירים

1. מבוא

תוכנית הגישה למכשירים מספקת את ה-Smart Device Management API, API ל-REST שמאפשר למפתחים לשלוט במכשירי Google Nest מהאפליקציות שלהם. המשתמשים צריכים לתת הסכמה לגישה של צד שלישי למכשירי Nest שלהם.

52f77aa38cda13a6.png

יש שלושה שלבים עיקריים לשילוב מוצלח של 'גישה למכשירים':

  1. יצירת פרויקט – יוצרים פרויקט ב-Google Cloud Platform ונרשמים כמפתח ב-Device Access Console.
  2. קישור חשבונות – תוכלו לעודד את המשתמשים להשלים את תהליך קישור החשבונות ולאחזר את קוד הגישה. ממירים את הקוד לאסימון גישה.
  3. בקרת מכשירים – שולחים בקשות דרך Smart Device Management API כדי לשלוט במכשירים, באמצעות שליחת פקודות באמצעות אסימון הגישה.

בשיעור ה-Codelab הזה נתעמק באופן הפעולה של Device Access על ידי פיתוח של אימות אפליקציית אינטרנט שתומכת באימות וביצוע קריאות ל-Smart Device Management API. נבדוק גם את הפריסה של שרת proxy פשוט באמצעות Node.js ו-Express כדי לנתב את הבקשות לגישה למכשיר.

לפני שמתחילים, כדאי לרענן את הטכנולוגיות הנפוצות באינטרנט שבהן נשתמש ב-Codelab הזה, כמו אימות באמצעות OAuth 2.0 או פיתוח אפליקציית אינטרנט באמצעות Node.js, אבל לא מדובר בדרישות מוקדמות.

הפרטים הדרושים

  • Node.js מגרסה 8 ומעלה
  • חשבון Google עם Nest Thermostat מקושר

הנושאים שתלמד

  • הגדרת פרויקט Firebase לאירוח דפי אינטרנט סטטיים ופונקציות בענן
  • שליחת בקשות גישה למכשיר באמצעות אפליקציית אינטרנט מבוססת דפדפן
  • בניית שרת proxy באמצעות Node.js ו-Express לניתוב הבקשות שלך

2. יצירת פרויקט

כדי להגדיר את השילוב של Device Access, המפתחים צריכים ליצור פרויקט ב-Google Cloud Platform‏ (GCP). מזהה לקוח וסוד לקוח שנוצרו בפרויקט GCP ישמשו כחלק מתהליך OAuth בין האפליקציה של המפתח לבין Google Cloud. המפתחים צריכים גם להיכנס למסוף הגישה למכשירים כדי ליצור פרויקט ולקבל גישה ל-Smart Device Management API.

Google Cloud Platform

נכנסים אל Google Cloud Platform. לוחצים על 'יצירת פרויקט חדש' ומזינים שם פרויקט. יוצג גם מזהה פרויקט [GCP-Project-Id] ב-Google Cloud. חשוב לרשום אותו כי נשתמש בו במהלך הגדרת Firebase. (לאורך הקודלה נתייחס למזהה הזה בתור [GCP-Project-Id]).

585e926b21994ac9.png

בשלב הראשון מפעילים את ספריית ה-API הנדרשת בפרויקט. מעבר אל APIs & שירותים > ספרייה ומחפשים את Smart Device Management API. צריך להפעיל את ה-API הזה כדי לתת לפרויקט הרשאה לשלוח בקשות לקריאות ל-Device Access API.

14e7eabc422c7fda.png

לפני שנעבור ליצירת פרטי כניסה ל-OAuth, אנחנו צריכים להגדיר את מסך ההסכמה של OAuth עבור הפרויקט שלנו. עוברים אל APIs & Services‏ > OAuth consent screen. בהגדרה User Type, בוחרים באפשרות external (חיצוני). כדי להשלים את המסך הראשון, עליכם לספק שם לאפליקציה וכתובת אימייל לתמיכה, וגם את הפרטים ליצירת קשר עם המפתח. כשמתבקשים לספק משתמשים לבדיקה, חשוב לציין את כתובת האימייל עם המכשירים המקושרים בשלב הזה.

לאחר הגדרת מסך ההסכמה ל-OAuth, עוברים אל APIs & שירותים > פרטי כניסה. לוחצים על +Create Credentials ובוחרים באפשרות OAuth client ID. לסוג האפליקציה, בוחרים באפשרות Web application.

5de534212d44fce7.png

נותנים שם ללקוח ולוחצים על יצירה. בהמשך נוסיף מקור JavaScript מורשה ו-URI מורשה להפניה אוטומטית. בסיום התהליך יוצגו הערכים [Client-Id] ו-[Client-Secret] שמשויכים ללקוח OAuth 2.0 הזה.

e6a670da18952f08.png

מסוף הגישה למכשירים

עוברים אל Device Access Console אם לא השתמשת בעבר במסוף הגישה למכשירים, יוצג לך הסכם התנאים וההגבלות ועמלת רישום בסך 5$.

יוצרים פרויקט חדש ונותנים לו שם לפרויקט. בחלון הבא, מספקים את ה-[Client-Id] שקיבלתם מ-GCP בשלב הקודם.

f8a3f27354bc2625.png

הפעלת אירועים וסיום השלבים ליצירת הפרויקט תעביר אתכם לדף הבית של הפרויקט. השם [Project-Id] יהיה רשום מתחת לשם שנתתם לפרויקט.

db7ba33d8b707148.png

שימו לב למזהה [Project-Id], שנשתמש בו לשליחת בקשות אל Smart Device Management API.

3. הגדרת Firebase

Firebase מאפשר למפתחים לפרוס אפליקציות אינטרנט במהירות ובקלות. אנחנו נפתח אפליקציית אינטרנט בצד הלקוח לשילוב של 'גישה למכשיר' באמצעות Firebase.

יצירת פרויקט Firebase

נכנסים למסוף Firebase. לוחצים על Add Project ובוחרים את הפרויקט שיצרתם בשלב Project Creation. הפעולה הזו תיצור פרויקט Firebase שיקושר לפרויקט GCP [GCP-Project-Id].

אחרי שתיצרו את פרויקט Firebase, אתם אמורים לראות את המסך הבא:

dbb02bbacac093f5.png

התקנת כלים ב-Firebase

Firebase מספקת סדרה של כלי CLI ליצירה ולפריסה של האפליקציה. כדי להתקין את הכלים האלה, פותחים חלון טרמינל חדש ומריצים את הפקודה הבאה. הפעולה הזו תתקין את הכלים של Firebase באופן גלובלי.

$ npm i -g firebase-tools

כדי לוודא שכלי firebase מותקנים כראוי, בודקים את פרטי הגרסה.

$ firebase --version

אפשר להיכנס לכלי ה-CLI של Firebase באמצעות חשבון Google באמצעות הפקודה login.

$ firebase login

איך מפעילים את פרויקט האירוח

אחרי שמתחברים, השלב הבא הוא לאתחל פרויקט אירוח לאפליקציית האינטרנט. בטרמינל, עוברים לתיקייה שבה רוצים ליצור את הפרויקט ומריצים את הפקודה הבאה:

$ firebase init hosting

ב-Firebase תתבקשו לענות על כמה שאלות שיעזרו לכם להתחיל לעבוד עם פרויקט אירוח:

  1. בוחרים אפשרות – שימוש בפרויקט קיים
  2. בוחרים פרויקט ברירת מחדל ב-Firebase לספרייה הזו – בחירה ***[GCP-Project-Id]***
  3. במה ברצונך להשתמש כספרייה הציבורית שלך? — ציבורי
  4. להגדיר את האפליקציה כאפליקציה בדף יחיד? — כן
  5. להגדיר גרסאות build ופריסות אוטומטיות באמצעות GitHub? – לא

אחרי שהפרויקט מאתחל, אפשר לפרוס אותו ב-firebase באמצעות הפקודה הבאה:

$ firebase deploy

מערכת Firebase תסרוק את הפרויקט ותפרוס את הקבצים הנדרשים לאירוח בענן.

fe15cf75e985e9a1.png

כשפותחים את כתובת ה-URL לאירוח בדפדפן, אתם אמורים לראות את הדף שפרסתם:

e40871238c22ebe2.png

עכשיו, אחרי שהבנתם את העקרונות הבסיסיים של פריסת דף אינטרנט באמצעות Firebase, בואו נתחיל לפרוס את הדוגמה של Codelab!

4. דוגמה של Codelab

אפשר לשכפל את מאגר codelab שמתארח ב-GitHub באמצעות הפקודה הבאה:

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

במאגר הזה אנחנו מספקים דוגמאות בשתי תיקיות נפרדות. התיקייה codelab-start מכילה את הקבצים הדרושים כדי להתחיל מהנקודה הנוכחית ב-Codelab הזה. התיקייה codelab-done מכילה גרסה מלאה של Codelab הזו, עם לקוח ושרתNode.js שפועלים בפונקציונליות מלאה.

במהלך ה-Codelab הזה נשתמש בקבצים מתיקיית ה-codelab-start, אבל אם בכל זאת תרגיש תקוע, אפשר לעיין גם בגרסה של Codelab.

קבצים לדוגמה של Codelab

מבנה הקבצים בתיקייה codelab-start הוא:

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

התיקייה הציבורית מכילה דפים סטטיים של האפליקציה שלנו. firebase.json אחראי על ניתוב בקשות אינטרנט לאפליקציה שלנו. בגרסה codelab-done מופיעה גם ספרייה functions שמכילה לוגיקה לפריסה של שרת ה-proxy (express) שלנו בפונקציות של Google Cloud.

פריסה של דוגמת Codelab

מעתיקים את הקבצים מהקובץ codelab-start לספריית הפרויקט.

$ firebase deploy

בסיום הפריסה של Firebase, אתם אמורים לראות את אפליקציית Codelab:

e84c1049eb4cca92.png

כדי להתחיל את תהליך האימות, צריך להזין פרטי כניסה של שותף. נפרט אותם בקטע הבא.

5. טיפול ב-OAuth

OAuth הוא תקן האינטרנט להענקת גישה. הוא משמש בדרך כלל כדי שמשתמשים יוכלו להעניק לאפליקציות צד שלישי גישה לפרטי החשבון שלהם בלי לשתף סיסמאות. אנחנו משתמשים ב-OAuth 2.0 כדי לאפשר למפתחים שניגשים למכשירי של משתמשים דרך 'גישה למכשיר'.

7ee31f5d9c37f699.png

ציון 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 להפניה אוטומטית בקובץ הסקריפטים, צריך גם להוסיף אותו לרשימת כתובות ה-URI להפניה אוטומטית המותרות של מזהה הלקוח שיצרתם לפרויקט. עוברים אל Credentials Page (דף פרטי כניסה) ב-Google Cloud Platform. בו יוצגו כל פרטי הכניסה שנוצרו לפרויקט:

1a07b624b5e548da.png

ברשימה מזהי לקוחות של OAuth 2.0, בוחרים את מזהה הלקוח שיצרתם בשלב יצירת פרויקט. מוסיפים את ה-URI להפניה אוטומטית של האפליקציה לרשימת מזהי URI מורשים להפניה אוטומטית בפרויקט.

6d65b298e1f005e2.png

כדאי לנסות להיכנס!

עוברים לכתובת ה-URL לאירוח שהגדרתם ב-Firebase, מזינים את פרטי הכניסה של השותף ולוחצים על הלחצן כניסה. מזהה הלקוח וסוד הלקוח הם פרטי הכניסה שקיבלתם מ-Google Cloud Platform, ומזהה הפרויקט מגיע ממסוף הגישה למכשירים.

78b48906a2dd7c05.png

לחיצה על הלחצן כניסה תעביר את המשתמשים בתהליך OAuth של הארגון, החל ממסך ההתחברות לחשבון Google שלהם. לאחר ההתחברות, המשתמשים יתבקשו לתת הרשאות לפרויקט שלך כדי לגשת למכשירי Nest שלהם.

e9b7887c4ca420.png

מכיוון שזו אפליקציה מדומה, Google תנפיק אזהרה לפני שהיא תפנה אתכם לכתובת אחרת.

b227d510cb1df073.png

לוחצים על 'מתקדם' ובוחרים באפשרות 'מעבר אל web.app (לא בטוח)' כדי להשלים את ההפניה האוטומטית לאפליקציה.

673a4fd217e24dad.png

כך תקבלו קוד OAuth כחלק מבקשת ה-GET הנכנסת, והאפליקציה תחליף אותו באסימון גישה ובאסימון רענון.

6. שליטה במכשיר

באפליקציה לדוגמה של 'גישה למכשירים' נעשה שימוש בקריאות ל-API ל-REST של ניהול מכשירים חכם כדי לשלוט במכשירי Google Nest. הקריאות האלה כוללות העברה של אסימון הגישה בכותרת של בקשת GET או POST, לצד מטען ייעודי (payload) שנדרש לפקודות מסוימות.

כתבנו פונקציית בקשת גישה כללית כדי לטפל בשיחות האלה. עם זאת, תצטרכו לספק לפונקציה הזו את נקודת הקצה הנכונה ואת אובייקט עומס העבודה (payload) במקרה הצורך.

function deviceAccessRequest(method, call, localpath, payload = null) {...}
  • method – סוג בקשת ה-HTTP (GET או POST)
  • קריאה – מחרוזת שמייצגת את הקריאה ל-API, שמשמשת לניתוב תשובות (listDevices, thermostatMode, temperatureSetpoint)
  • localpath – נקודת הקצה שאליה נשלחת הבקשה, שמכילה את מזהה הפרויקט ואת מזהה המכשיר (מוסיפים אחרי https://smartdevicemanagement.googleapis.com/v1)
  • נתוני עומס (payload) (*) – נתונים נוספים שנדרשים לקריאת ה-API (לדוגמה, ערך מספרי שמייצג טמפרטורה של נקודת יעד)

אנחנו ניצור אמצעי בקרה לדוגמה בממשק המשתמש (רשימת מכשירים, הגדרת מצב, הגדרת טמפרטורה) כדי לשלוט ב-Nest Thermostat:

86f8a193aa397421.png

אמצעי הבקרה האלה בממשק המשתמש יפעילו את הפונקציות התואמות (listDevices(),‏ postThermostatMode(),‏ postTemperatureSetpoint()) מ-scripts.js. הם ריקים כדי שתוכלו להטמיע אותם! המטרה היא לבחור את השיטה או הנתיב הנכונים ולהעביר את עומס העבודה לפונקציה deviceAccessRequest(...).

הצגת רשימה של מכשירים

הקריאה הפשוטה ביותר לגישה למכשיר היא listDevices. היא משתמשת בבקשת GET ולא דורשת מטען ייעודי (payload). צריך ליצור את נקודת הקצה באמצעות projectId. משלימים את הפונקציה listDevices() באופן הבא:

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

שומרים את השינויים ופורסים שוב את פרויקט Firebase באמצעות הפקודה הבאה:

$ firebase deploy

אחרי פריסה של הגרסה החדשה של האפליקציה, צריך לנסות לטעון מחדש את הדף וללחוץ על הצגת רשימת מכשירים. הפעולה הזו אמורה לאכלס את הרשימה בקטע 'בקרת מכשירים', שבו אמור להופיע המזהה של התרמוסטט:

b64a198673ed289f.png

בחירת מכשירים מהרשימה תעדכן את השדה deviceId בקובץ scripts.js. עבור שני הפקדים הבאים, צריך לציין את deviceId של המכשיר הספציפי שבו אנחנו רוצים לשלוט.

בקרת תרמוסטט

יש שתי מאפיינים לשליטה בסיסית בתרמוסטט של Nest ב-Smart Device Management API. ThermostatMode ו-TemperatureSetpoint. ThermostatMode מגדיר את המצב של Nest Thermostat לאחד מארבעת המצבים השונים האפשריים: {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. יש שני פרמטרים שאפשר להגדיר במטען הייעודי (payload), 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 מדפדפן. אם אתם רוצים לפתח בצד השרת, אנחנו רוצים לעזור לכם להתחיל עם שרת proxy שיכול להפנות את הבקשות שלכם מהדפדפן.

בשרת ה-proxy הזה נשתמש ב-Firebase Cloud Functions, ב-Node.js וב-Express.

אתחול Cloud Functions

פותחים חלון טרמינל חדש, עוברים לספריית הפרויקט ומריצים את הפקודה הבאה:

$ firebase init functions

המערכת של Firebase תציג לכם כמה שאלות כדי לאתחל פונקציות של Cloud:

  1. באיזו שפה ברצונך לכתוב את הפונקציות של Cloud Functions? – JavaScript
  2. רוצה להשתמש ב-ESLint כדי לזהות באגים אפשריים ולאכוף עיצוב? — לא
  3. רוצה להתקין את יחסי התלות באמצעות npm עכשיו? — כן

הפעולה הזו תפעיל תיקיית functions בפרויקט, וגם תתקין את יחסי התלות הנדרשים. תראו שתיקיית הפרויקט מכילה ספריית פונקציות, עם קובץ index.js להגדרת הפונקציות בענן, package.json כדי להגדיר את ההגדרות וספריית node_Modules שתכיל את יחסי התלות.

נשתמש בשתי ספריות npm כדי ליצור את הפונקציונליות בצד השרת: express ו-xmlhttprequest. תצטרכו להוסיף את הרשומות הבאות לרשימת יחסי התלות בקובץ package.json:

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

לאחר מכן, הרצת התקנה של NPM מספריית הפונקציות אמורה להתקין יחסי תלות בפרויקט:

$ npm install

אם נתקלתם בבעיה ב-npm בזמן הורדת חבילות, תוכלו לנסות לשמור את xmlhttprequest ואת express באופן מפורש באמצעות הפקודה הבאה:

$ npm install express xmlhttprequest --save

שדרוג לתוכנית Blaze

כדי להשתמש בפקודה firebase deploy, תצטרכו לשדרג לתוכנית Blaze. לשם כך, תצטרכו להוסיף אמצעי תשלום לחשבון. עוברים אל סקירה כללית של הפרויקט > שימוש וחיוב ומקפידים לבחור בתוכנית Blaze לפרויקט שלכם.

c6a5e5a21397bef6.png

פיתוח Express Server

שרת Express פועל לפי מסגרת פשוטה כדי להגיב לבקשות GET ו-POST נכנסות. בנינו servlet ששומר בקשות POST, משדר אותן לכתובת יעד שצוינה במטען הייעודי (Payload) ומגיב בתגובה שמתקבלת מההעברה.

משנים את הקובץ 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 לשרת האקספרס שלנו, והשאר ימשיך אל index.html.

קריאות ל-API בשרת proxy

עכשיו כשהשרת שלנו מוכן, נגדיר URI של שרת proxy ב-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

עכשיו יש לכם שרת proxy של Node.js שפועל באמצעות Express ב-Cloud Functions.

מתן הרשאות ל-Cloud Functions

בשלב האחרון צריך לבדוק את הרשאות הגישה לפונקציות של Cloud Functions ולוודא שהאפליקציה בצד הלקוח תוכל לקרוא להן.

ב-Google Cloud Platform, עוברים לכרטיסייה Cloud Functions בתפריט ובוחרים את פונקציית הענן:

461e9bae74227fc1.png

לוחצים על הרשאות ואז על הוספת חבר. כותבים allUsers בשדה החבר החדש ובוחרים את התפקיד Cloud Functions > Cloud Functions Invoker. כשלוחצים על 'שמירה', מוצגת הודעת אזהרה:

3adb01644217578c.png

בחירה באפשרות 'אישור גישה ציבורית' תאפשר לאפליקציה בצד הלקוח שלך להשתמש בפונקציה של Cloud Functions.

כל הכבוד – השלמת את כל השלבים. עכשיו אפשר לעבור לאפליקציית האינטרנט ולנסות את הפקדים של המכשיר שמנותבים דרך שרת ה-proxy.

השלבים הבאים

מחפשים דרכים להרחיב את המומחיות שלכם בנושא גישה למכשירים? במסמכים לגבי תכונות אפשר למצוא מידע נוסף על שליטה במכשירי Nest אחרים, ועל תהליך האישור כדי ללמוד את השלבים להשקת המוצר ברחבי העולם!

משפרים את המיומנויות בעזרת האפליקציה לדוגמה של אפליקציית האינטרנט Device Access, שבה צוברים את חוויית ה-Codelab ופורסים אפליקציית אינטרנט תקינה כדי לשלוט במצלמות, בפעמוני דלת של Nest ובתרמוסטטים.