إنشاء تطبيق ويب للوصول إلى الأجهزة

‫1. مقدمة

يوفّر برنامج الوصول إلى الأجهزة واجهة برمجة التطبيقات Smart Device Management، وهي واجهة REST API تتيح للمطوّرين التحكّم في أجهزة Google Nest من تطبيقاتهم. على المستخدمين منح موافقتهم على وصول الجهات الخارجية إلى أجهزة Nest.

في ما يلي ثلاث خطوات رئيسية لعملية ربط ناجحة بخدمة "الوصول إلى الأجهزة":

إنشاء مشروع: أنشِئ مشروعًا في Google Cloud Platform واشترِك كمطوّر في وحدة التحكّم في الوصول إلى الجهاز.
ربط الحساب: يمكنك جذب المستخدمين من خلال عملية ربط الحساب واسترداد رمز وصول. استبدِل الرمز برمز دخول.
التحكّم بالأجهزة: يمكنك إرسال طلبات إلى واجهة برمجة التطبيقات Smart Device Management للتحكّم في الأجهزة من خلال إرسال أوامر باستخدام رمز الدخول.

في هذا الدرس التطبيقي حول الترميز، سنتعمّق في طريقة عمل ميزة "الوصول إلى الأجهزة" من خلال إنشاء تطبيق ويب يتعامل مع المصادقة ويُجري طلبات بيانات من واجهة برمجة التطبيقات Smart Device Management API. سنتعرّف أيضًا على كيفية تفعيل خادم وكيل بسيط باستخدام Node.js وExpress لتوجيه طلبات الوصول إلى الأجهزة.

قبل البدء، من المفيد مراجعة تكنولوجيات الويب الشائعة التي سنستخدمها في هذا الدرس العملي، مثل المصادقة باستخدام OAuth 2.0 أو إنشاء تطبيق ويب باستخدام Node.js، علمًا بأنّها ليست من المتطلبات الأساسية.

المتطلبات

الإصدار 8 أو الإصدارات الأحدث من Node.js
حساب Google مرتبط بترموستات Nest

ما ستتعلمه

إعداد مشروع Firebase لاستضافة صفحات ويب ثابتة ووظائف سحابية
إصدار طلبات الوصول إلى الجهاز من خلال تطبيق ويب يستند إلى المتصفّح
إنشاء خادم وكيل باستخدام Node.js وExpress لتوجيه طلباتك

‫2. إنشاء مشروع

على المطوّرين إنشاء مشروع على Google Cloud Platform (GCP) لإعداد عملية دمج "الوصول إلى الأجهزة". سيتم استخدام معرّف العميل وسر العميل اللذين تم إنشاؤهما في مشروع Google Cloud Platform كجزء من مسار OAuth بين تطبيق المطوّر وGoogle Cloud. على المطوّرين أيضًا الانتقال إلى وحدة التحكّم في الوصول إلى الجهاز لإنشاء مشروع للوصول إلى واجهة برمجة التطبيقات Smart Device Management.

Google Cloud Platform

انتقِل إلى Google Cloud Platform. انقر على "إنشاء مشروع جديد" وقدِّم اسمًا للمشروع. سيتم أيضًا عرض رقم تعريف مشروع [GCP-Project-Id] في Google Cloud، يُرجى تسجيله لأنّنا سنستخدمه أثناء إعداد Firebase. (سنشير إلى رقم تعريف المشروع هذا باسم [GCP-Project-Id] في جميع أنحاء هذا الدرس التطبيقي حول الترميز).

الخطوة الأولى هي تفعيل "مكتبة واجهات برمجة التطبيقات" اللازمة في مشروعنا. انتقِل إلى واجهات برمجة التطبيقات والخدمات > المكتبة وابحث عن Smart Device Management API. عليك تفعيل واجهة برمجة التطبيقات هذه لمنح مشروعك الإذن بإرسال طلبات إلى واجهة برمجة تطبيقات الوصول إلى الأجهزة.

قبل الانتقال إلى إنشاء بيانات اعتماد OAuth، علينا ضبط شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth لمشروعنا. انتقِل إلى واجهات برمجة التطبيقات والخدمات > شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth. بالنسبة إلى نوع المستخدم، اختَر خارجي. قدِّم اسمًا وبريدًا إلكترونيًا للدعم لتطبيقك، بالإضافة إلى معلومات الاتصال بالمطوّر لإكمال الشاشة الأولى. عندما يُطلب منك إدخال المستخدمين التجريبيين، احرص على تقديم عنوان البريد الإلكتروني المرتبط بالأجهزة في هذه الخطوة.

بعد إعداد شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth، انتقِل إلى واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد. انقر على +إنشاء بيانات اعتماد واختَر معرِّف عميل OAuth. بالنسبة إلى نوع التطبيق، اختَر تطبيق الويب.

أدخِل اسمًا لعميلك وانقر على إنشاء. سنضيف مصدر JavaScript معتمَدًا ومعرّف موارد منتظمًا معتمَدًا لإعادة التوجيه لاحقًا. سيؤدي إكمال هذه العملية إلى عرض [Client-Id] و[Client-Secret] المرتبطَين بعميل OAuth 2.0 هذا.

وحدة التحكّم في الوصول إلى الجهاز

انتقِل إلى وحدة التحكّم في الوصول إلى الجهاز. إذا لم يسبق لك استخدام وحدة التحكّم في الوصول إلى الجهاز، ستظهر لك اتفاقية بنود الخدمة ورسوم تسجيل بقيمة 5 دولارات أمريكية.

أنشئ مشروعًا جديدًا وامنحه اسمًا. في النافذة التالية، أدخِل [Client-Id] الذي تلقّيته من "منصة Google Cloud" في الخطوة السابقة.

سيؤدي تفعيل الأحداث وإكمال خطوات إنشاء المشروع إلى نقلك إلى الصفحة الرئيسية لمشروعك. سيتم إدراج [Project-Id] ضمن الاسم الذي منحته لمشروعك.

يُرجى تدوين [Project-Id] لأنّنا سنستخدمه عند إرسال الطلبات إلى واجهة برمجة التطبيقات Smart Device Management API.

3- إعداد Firebase

توفّر Firebase للمطوّرين طريقة سريعة وسهلة لنشر تطبيقات الويب. سنعمل على تطوير تطبيق ويب من جهة العميل لدمج ميزة "الوصول إلى الأجهزة" باستخدام Firebase.

إنشاء مشروع على Firebase

انتقِل إلى وحدة تحكّم Firebase. انقر على إضافة مشروع، ثم اختَر المشروع الذي أنشأته في خطوة إنشاء المشروع. سيؤدي ذلك إلى إنشاء مشروع على Firebase سيتم ربطه بمشروعك على Google Cloud Platform [GCP-Project-Id].

بعد إنشاء مشروع Firebase بنجاح، من المفترض أن تظهر لك الشاشة التالية:

تثبيت أدوات Firebase

توفّر Firebase مجموعة من أدوات واجهة سطر الأوامر لإنشاء تطبيقك ونشره. لتثبيت هذه الأدوات، افتح نافذة محطة طرفية جديدة ونفِّذ الأمر التالي. سيؤدي ذلك إلى تثبيت أدوات Firebase على مستوى العالم.

$ npm i -g firebase-tools

للتأكّد من تثبيت أدوات Firebase بشكلٍ صحيح، راجِع معلومات الإصدار.

$ firebase --version

يمكنك تسجيل الدخول إلى أدوات Firebase CLI باستخدام حسابك على Google من خلال أمر تسجيل الدخول.

$ firebase login

إعداد مشروع Hosting

بعد أن تتمكّن من تسجيل الدخول، تتمثّل الخطوة التالية في بدء مشروع استضافة لتطبيق الويب. من الوحدة الطرفية، انتقِل إلى المجلد الذي تريد إنشاء مشروعك فيه ونفِّذ الأمر التالي:

$ firebase init hosting

سيطلب منك Firebase الإجابة عن مجموعة من الأسئلة لمساعدتك في بدء مشروع استضافة:

يُرجى اختيار أحد الخيارات: استخدام مشروع حالي
اختَر مشروعًا تلقائيًا على Firebase لهذا الدليل — اختيار ***[GCP-Project-Id]***
ما هو الدليل الذي تريد استخدامه كدليل متاح للجميع؟ — علني
هل تريد ضبطه كتطبيق من صفحة واحدة؟ — نعم
هل يمكن إعداد عمليات إنشاء ونشر تلقائية باستخدام GitHub؟ — لا

بعد إعداد مشروعك، يمكنك نشره على Firebase باستخدام الأمر التالي:

$ firebase deploy

سيفحص Firebase مشروعك وينشر الملفات اللازمة في خدمة الاستضافة السحابية.

عند فتح عنوان URL للاستضافة في متصفّح، من المفترض أن تظهر الصفحة التي تم نشرها للتو:

بعد أن تعرّفت على أساسيات كيفية نشر صفحة ويب باستخدام Firebase، لننتقل إلى نشر نموذج الدرس التطبيقي حول الترميز.

4. عيّنة درس تطبيقي حول الترميز

يمكنك استنساخ مستودع الدرس التطبيقي حول الترميز المستضاف على GitHub باستخدام الأمر أدناه:

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

في هذا المستودع، نقدّم عيّنات في مجلدَين منفصلَين. يحتوي المجلد codelab-start على الملفات اللازمة لبدء العمل من النقطة الحالية في هذا الدرس التطبيقي حول الترميز. يحتوي المجلد codelab-done على نسخة كاملة من هذا الدرس التطبيقي حول الترميز، مع خادم node.js وعميل يعملان بكامل وظائفهما.

سنستخدم الملفات من المجلد codelab-start خلال هذا الدرس العملي، ولكن إذا واجهتك أي صعوبة في أي وقت، يمكنك الرجوع إلى إصدار الدرس العملي المكتمل أيضًا.

ملفات نموذجية للدروس التطبيقية حول الترميز

في ما يلي بنية ملف المجلد codelab-start:

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

يحتوي المجلد العام على صفحات ثابتة من تطبيقنا. firebase.json هي المسؤولة عن توجيه طلبات الويب إلى تطبيقنا. في الإصدار codelab-done، سيظهر لك أيضًا دليل functions يحتوي على منطق خادم البروكسي (express) الذي سيتم نشره على دوال Google Cloud.

نشر عيّنة الدرس التطبيقي حول الترميز

انسخ الملفات من 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) لإعادة التوجيه في ملف النصوص البرمجية، يجب أيضًا إضافته إلى قائمة معرّفات الموارد المنتظمة (URI) المسموح بها لإعادة التوجيه لمعرّف العميل الذي أنشأته لمشروعك. انتقِل إلى صفحة بيانات الاعتماد في Google Cloud Platform، والتي ستعرض جميع بيانات الاعتماد التي تم إنشاؤها لمشروعك:

ضمن قائمة معرّفات عملاء OAuth 2.0، اختَر معرّف العميل الذي أنشأته في خطوة إنشاء المشروع. أضِف عنوان URI لإعادة التوجيه الخاص بتطبيقك إلى قائمة معرّفات الموارد المنتظمة (URI) المعتمَدة لإعادة التوجيه لمشروعك.

جرِّب تسجيل الدخول!

انتقِل إلى عنوان URL للاستضافة الذي أعددته باستخدام Firebase، وأدخِل بيانات اعتماد الشريك، ثم انقر على الزر تسجيل الدخول. معرّف العميل وسر العميل هما بيانات الاعتماد التي حصلت عليها من Google Cloud Platform، ومعرّف المشروع هو من وحدة التحكّم في الوصول إلى الجهاز.

سينقل زر تسجيل الدخول المستخدمين إلى مسار OAuth لمؤسستك، بدءًا من شاشة تسجيل الدخول إلى حساب Google الخاص بهم. بعد تسجيل الدخول، سيُطلب من المستخدمين منح مشروعك أذونات للوصول إلى أجهزة Nest.

بما أنّ هذا التطبيق هو تطبيق تجريبي، ستصدر Google تحذيرًا قبل إعادة التوجيه.

انقر على "خيارات متقدمة"، ثم اختَر "الانتقال إلى تطبيق الويب (غير آمن)" لإكمال عملية إعادة التوجيه إلى تطبيقك.

سيؤدي ذلك إلى توفير رمز OAuth كجزء من طلب استرداد بيانات باستخدام GET الوارد، والذي سيبدّله التطبيق بعد ذلك برمز دخول ورمز مميز لإعادة التحميل.

6. التحكّم في الجهاز

يستخدم نموذج تطبيق الوصول إلى الأجهزة طلبات Smart Device Management REST API للتحكّم في أجهزة Google Nest. تتضمّن هذه الطلبات تمرير رمز الدخول في عنوان طلب GET أو POST، بالإضافة إلى حمولة مطلوبة لأوامر معيّنة.

لقد كتبنا دالة عامة لطلب إذن الوصول من أجل التعامل مع هذه الطلبات. ومع ذلك، عليك تقديم نقطة النهاية الصحيحة، بالإضافة إلى عنصر الحمولة عند الحاجة، إلى هذه الدالة.

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

الطريقة: نوع طلب HTTP (GET أو POST)
call: سلسلة تمثّل طلب البيانات من واجهة برمجة التطبيقات، وتُستخدَم لتوجيه الردود (listDevices وthermostatMode وtemperatureSetpoint)
localpath: نقطة النهاية التي يتم إرسال الطلب إليها، وتحتوي على رقم تعريف المشروع ورقم تعريف الجهاز (يتم إلحاقها بعد https://smartdevicemanagement.googleapis.com/v1)
الحمولة (*) — بيانات إضافية مطلوبة لإجراء طلب بيانات من واجهة برمجة التطبيقات (على سبيل المثال، قيمة رقمية تمثّل درجة الحرارة لنقطة ضبط)

سننشئ عناصر تحكّم نموذجية في واجهة المستخدم (مثل "عرض الأجهزة" و"ضبط الوضع" و"ضبط درجة الحرارة") للتحكّم في Nest Thermostat:

ستطلب عناصر التحكّم في واجهة المستخدم هذه تنفيذ الدوال المقابلة (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. بالنسبة إلى عنصرَي التحكّم التاليَين، علينا تحديد deviceId للجهاز المحدّد الذي نريد التحكّم فيه.

التحكّم في الترموستات

تتوفّر سمتان للتحكّم الأساسي في جهاز Nest Thermostat في واجهة برمجة التطبيقات Smart Device Management API. ThermostatMode وTemperatureSetpoint يضبط ThermostatMode وضع ترموستات Nest على أحد الأوضاع الأربعة الممكنة المختلفة: {إيقاف، تدفئة، تبريد، تدفئة وتبريد}. بعد ذلك، يجب تقديم الوضع المحدّد كجزء من الحمولة.

استبدِل الدالة 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. يمكن ضبط مَعلمتَين في الحمولة، وهما 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 لرصد الأخطاء المحتملة وفرض نمط معيّن؟ — لا
هل تريد تثبيت التبعيات باستخدام npm الآن؟ — نعم

سيؤدي ذلك إلى إنشاء مجلد functions في مشروعك، بالإضافة إلى تثبيت التبعيات اللازمة. ستلاحظ أنّ مجلد مشروعك يحتوي على دليل وظائف، مع ملف index.js لتحديد وظائفنا السحابية، وملف package.json لتحديد الإعدادات، ومجلد node_modules لاحتواء التبعيات.

سنستخدم مكتبتَين npm لإنشاء وظائف من جهة الخادم، وهما express وxmlhttprequest. عليك إضافة الإدخالات التالية إلى قائمة التبعيات في ملف package.json:

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

بعد ذلك، يجب أن يؤدي تنفيذ الأمر npm install من دليل الدوال إلى تثبيت التبعيات لمشروعك:

$ npm install

في حال واجهت npm مشكلة في تنزيل الحِزم، يمكنك محاولة حفظ xmlhttprequest وexpress بشكل صريح باستخدام الأمر التالي:

$ 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، وستستمر بقية العناوين في الانتقال إلى index.html.

طلبات البيانات من واجهة برمجة التطبيقات عبر خادم وكيل

بعد أن أصبح الخادم جاهزًا، لنحدّد معرّف موارد منتظم (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، انتقِل إلى علامة التبويب "وظائف السحابة الإلكترونية" من القائمة، ثم اختَر وظيفة السحابة الإلكترونية:

انقر على الأذونات، ثم على إضافة عضو. اكتب allUsers في حقل العضو الجديد، واختَر Cloud Functions > Cloud Functions Invoker كدور. سيؤدي النقر على "حفظ" إلى عرض رسالة تحذير:

سيؤدي اختيار "السماح بالوصول العلني" إلى تمكين تطبيقك من جهة العميل من استخدام وظيفة السحابة الإلكترونية.

تهانينا، لقد أكملت جميع الخطوات. يمكنك الآن الانتقال إلى تطبيق الويب وتجربة عناصر التحكّم في الأجهزة التي يتم توجيهها من خلال خادمك الوكيل.

الخطوات التالية

هل تبحث عن طرق لتوسيع خبرتك في "الوصول إلى الأجهزة"؟ يمكنك الاطّلاع على المستندات المتعلقة بالسمات لمعرفة المزيد حول التحكّم في أجهزة Nest الأخرى، وعملية شهادة الاعتماد لمعرفة خطوات طرح منتجك في السوق.

يمكنك تطوير مهاراتك من خلال نموذج تطبيق الويب للوصول إلى الأجهزة، حيث يمكنك الاستفادة من تجربة درس تطبيقي حول الترميز ونشر تطبيق ويب يعمل للتحكّم في كاميرات Nest وأجراس الأبواب وأجهزة ترموستات Nest.