डिवाइस ऐक्सेस वाला वेब ऐप्लिकेशन बनाना

1. शुरुआती जानकारी

Device Access प्रोग्राम, Smart Device Management API उपलब्ध कराता है, जो कि डेवलपर के लिए एक REST API का एपीआई है. इसकी मदद से, वे Google Nest डिवाइसों को अपने ऐप्लिकेशन से कंट्रोल कर सकते हैं. तीसरे पक्ष को अपने Nest डिवाइसों का ऐक्सेस देने के लिए, उपयोगकर्ताओं को सहमति देनी होगी.

52f77aa38cda13a6.png

डिवाइस ऐक्सेस को सफल बनाने के लिए, यहां तीन मुख्य चरण दिए गए हैं:

  1. प्रोजेक्ट बनाना - Google Cloud Platform में प्रोजेक्ट बनाएं और डिवाइस ऐक्सेस कंसोल में डेवलपर के तौर पर साइन अप करें.
  2. खाता लिंक करना - खाता लिंक करने के फ़्लो से उपयोगकर्ता हासिल करें और ऐक्सेस कोड पाएं. ऐक्सेस टोकन के लिए कोड को एक्सचेंज करें.
  3. डिवाइस कंट्रोल - स्मार्ट डिवाइस मैनेजमेंट एपीआई से, ऐक्सेस टोकन से निर्देश भेजकर डिवाइसों को कंट्रोल करने के अनुरोध करें.

इस कोडलैब में, हम इस बारे में गहराई से जानेंगे कि डिवाइस ऐक्सेस कैसे काम करता है. इसके लिए हम, पुष्टि करने की प्रक्रिया को हैंडल करने वाले वेब ऐप्लिकेशन और Smart Device Management API कॉल का इस्तेमाल करेंगे. हम डिवाइस ऐक्सेस के अनुरोधों को रूट करने के लिए, Node.js और एक्सप्रेस का इस्तेमाल करके एक आसान प्रॉक्सी सर्वर डिप्लॉय करने का भी फ़ैसला लेंगे.

शुरू करने से पहले, उन सामान्य वेब टेक्नोलॉजी के बारे में बात करना बेहतर होगा जिनका इस्तेमाल हम इस कोडलैब (कोड बनाना सीखना) में करेंगे. जैसे, OAuth 2.0 की मदद से पुष्टि करना या Node.js की मदद से वेब ऐप्लिकेशन बनाना. हालांकि, ऐसा करने के लिए यह ज़रूरी नहीं है.

आपको इन चीज़ों की ज़रूरत होगी

  • Node.js 8 या उसके बाद का वर्शन
  • Google खाते से जोड़ा गया Nest Thermostat

आपको क्या सीखने को मिलेगा

  • स्टैटिक वेब पेजों और क्लाउड फ़ंक्शन को होस्ट करने वाला Firebase प्रोजेक्ट सेट अप करना
  • ब्राउज़र पर आधारित वेब ऐप्लिकेशन की मदद से, डिवाइस को ऐक्सेस करने के अनुरोध जारी करना
  • अपने अनुरोधों को रूट करने के लिए, Node.js और Express की मदद से प्रॉक्सी सर्वर बनाना

2. प्रोजेक्ट बनाना

डिवाइस ऐक्सेस इंटिग्रेशन को सेट अप करने के लिए, डेवलपर को Google Cloud Platform (GCP) प्रोजेक्ट बनाना होगा. GCP प्रोजेक्ट में जनरेट किए गए क्लाइंट आईडी और क्लाइंट सीक्रेट का इस्तेमाल, डेवलपर के ऐप्लिकेशन और Google Cloud के बीच OAuth फ़्लो के हिस्से के तौर पर किया जाएगा. Smart Device Management API को ऐक्सेस करने के लिए प्रोजेक्ट बनाने के लिए, डेवलपर को Device Access Console पर जाना होगा.

Google Cloud Platform

Google Cloud Platform पर जाएं. 'नया प्रोजेक्ट बनाएं' पर क्लिक करें और प्रोजेक्ट का नाम डालें. Google Cloud के लिए एक प्रोजेक्ट आईडी [GCP-Project-Id] भी दिखाया जाएगा. कृपया उसे रिकॉर्ड करें, क्योंकि Firebase सेटअप करने के दौरान हम इसका इस्तेमाल करेंगे. (इस कोडलैब के दौरान हम इस आईडी को [GCP-Project-Id] के रूप में देखेंगे.)

585e926b21994ac9.png

सबसे पहले, हमारे प्रोजेक्ट के लिए ज़रूरी एपीआई लाइब्रेरी चालू करें. एपीआई और सेवाएं > लाइब्रेरी पर जाएं और स्मार्ट डिवाइस मैनेजमेंट एपीआई खोजें. आपको इस एपीआई को चालू करना होगा, ताकि आपके प्रोजेक्ट को Device Access API कॉल के अनुरोध करने की अनुमति मिल सके.

14e7eabc422c7fda.png

OAuth क्रेडेंशियल बनाने से पहले, हमें अपने प्रोजेक्ट के लिए उस स्क्रीन को कॉन्फ़िगर करना होगा जहां OAuth के लिए सहमति दी जाती है. एपीआई और सेवाएं > ऐसी स्क्रीन पर जाएं जहां OAuth के लिए सहमति दी जाती है. उपयोगकर्ता टाइप के लिए, बाहरी विकल्प चुनें. अपने ऐप्लिकेशन को नाम और सहायता ईमेल के साथ-साथ पहली स्क्रीन पूरी करने के लिए, डेवलपर की संपर्क जानकारी दें. जब टेस्ट उपयोगकर्ता के बारे में पूछा जाए, तो इस चरण में लिंक किए गए डिवाइसों वाला ईमेल पता देना न भूलें.

ऐसी स्क्रीन को कॉन्फ़िगर करने के बाद जहां OAuth के लिए सहमति दी जाती है, एपीआई और सेवाएं > क्रेडेंशियल पर जाएं. +क्रेडेंशियल बनाएं पर क्लिक करें और OAuth क्लाइंट आईडी चुनें. ऐप्लिकेशन के टाइप के लिए, वेब ऐप्लिकेशन चुनें.

5de534212d44fce7.png

अपने क्लाइंट को कोई नाम दें और बनाएं पर क्लिक करें. हम बाद में, अनुमति वाले JavaScript ऑरिजिन और अनुमति वाले रीडायरेक्ट यूआरआई को जोड़ेंगे. इस प्रोसेस को पूरा करने से, इस OAuth 2.0 क्लाइंट से जुड़ा [Client-Id] और [Client-Secret] की वैल्यू जनरेट हो जाएगी.

e6a670da18952f08.png

डिवाइस का ऐक्सेस कंसोल

डिवाइस ऐक्सेस कंसोल पर जाएं. अगर आपने डिवाइस ऐक्सेस कंसोल का इस्तेमाल पहले नहीं किया है, तो आपको सेवा की शर्तों का कानूनी समझौता मिलेगा. साथ ही, रजिस्ट्रेशन के लिए 5 डॉलर का शुल्क लिया जाएगा.

नया प्रोजेक्ट बनाएं और उसे कोई प्रोजेक्ट नाम दें. अगली विंडो में, वह [Client-Id] डालें जो आपको पिछले चरण में GCP से मिला था.

f8a3f27354bc2625.png

इवेंट चालू करने और प्रोजेक्ट बनाने के चरणों को पूरा करने पर, आपको अपने प्रोजेक्ट के होम पेज पर ले जाया जाएगा. आपने अपने प्रोजेक्ट को जो नाम दिया है उसके नीचे आपका [Project-Id] दिखेगा.

db7ba33d8b707148.png

कृपया अपने [Project-Id] का ध्यान रखें, क्योंकि हम Smart Device Management API को अनुरोध भेजते समय इसका इस्तेमाल करेंगे.

3. Firebase सेटअप

Firebase, डेवलपर को वेब ऐप्लिकेशन डिप्लॉय करने का तेज़ और आसान तरीका उपलब्ध कराता है. हम डिवाइस को ऐक्सेस करने के लिए Firebase का इस्तेमाल करके, क्लाइंट साइड वेब ऐप्लिकेशन डेवलप करेंगे.

Firebase प्रोजेक्ट बनाना

Firebase कंसोल पर जाएं. प्रोजेक्ट जोड़ें पर क्लिक करें. इसके बाद, प्रोजेक्ट क्रिएशन चरण में बनाया गया प्रोजेक्ट चुनें. इससे एक Firebase प्रोजेक्ट बन जाएगा, जिसे आपके GCP प्रोजेक्ट [GCP-Project-Id] से लिंक किया जाएगा.

Firebase प्रोजेक्ट बनने के बाद, आपको यह स्क्रीन दिखेगी:

dbb02bbacac093f5.png

Firebase टूल इंस्टॉल करें

आपके ऐप्लिकेशन को बनाने और डिप्लॉय करने के लिए, Firebase आपको सीएलआई टूल का एक सेट उपलब्ध कराता है. इन टूल को इंस्टॉल करने के लिए, एक नई टर्मिनल विंडो खोलें और इस निर्देश को चलाएं. इससे दुनिया भर में Firebase टूल इंस्टॉल हो जाएंगे.

$ npm i -g firebase-tools

यह पक्का करने के लिए कि Firebase टूल सही तरीके से इंस्टॉल हुए हैं या नहीं, वर्शन की जानकारी देखें.

$ firebase --version

लॉगिन कमांड की मदद से, Google खाते से Firebase सीएलआई टूल में लॉग-इन किया जा सकता है.

$ firebase login

होस्टिंग प्रोजेक्ट शुरू करें

लॉग इन करने के बाद, अगला चरण अपने वेब ऐप्लिकेशन के लिए होस्टिंग प्रोजेक्ट शुरू करना है. टर्मिनल से, उस फ़ोल्डर में जाएं जहां आपको प्रोजेक्ट बनाना है और यह निर्देश चलाएं:

$ firebase init hosting

किसी होस्टिंग प्रोजेक्ट को शुरू करने के लिए, Firebase आपसे कुछ सवाल पूछेगा:

  1. कृपया कोई विकल्प चुनें — किसी मौजूदा प्रोजेक्ट का इस्तेमाल करें
  2. इस डायरेक्ट्री के लिए, कोई डिफ़ॉल्ट Firebase प्रोजेक्ट चुनें — चुनें***[GCP-Project-Id]***
  3. आपको अपनी सार्वजनिक डायरेक्ट्री के तौर पर किसका इस्तेमाल करना है? — सार्वजनिक
  4. क्या इसे सिंगल पेज ऐप्लिकेशन के तौर पर कॉन्फ़िगर करना है? — हां
  5. क्या आपको GitHub के साथ ऑटोमैटिक बिल्ड और डिप्लॉय सेट अप करने हैं? — नहीं

प्रोजेक्ट शुरू होने के बाद, इसे इस कमांड की मदद से Firebase में डिप्लॉय किया जा सकता है:

$ firebase deploy

Firebase आपके प्रोजेक्ट को स्कैन करेगा और ज़रूरी फ़ाइलों को क्लाउड होस्टिंग पर डिप्लॉय करेगा.

fe15cf75e985e9a1.png

ब्राउज़र में होस्टिंग यूआरएल को खोलने पर, आपको वह पेज दिखेगा जिसे आपने हाल ही में डिप्लॉय किया है:

e40871238c22ebe2.png

अब, जबकि आपने Firebase की मदद से वेब पेज डिप्लॉय करने के तरीके की बुनियादी बातें जान ली हैं, तो चलिए, कोडलैब (कोड बनाना सीखना) के अपने सैंपल को डिप्लॉय करते हैं!

4. कोडलैब का नमूना

नीचे दिए गए निर्देश का इस्तेमाल करके, GitHub पर होस्ट किए गए कोडलैब डेटा स्टोर करने की जगह का क्लोन बनाया जा सकता है:

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

इस डेटा स्टोर करने की जगह में, हम दो अलग-अलग फ़ोल्डर में सैंपल दे रहे हैं. codelab-start फ़ोल्डर में ज़रूरी फ़ाइलें हैं, ताकि आप इस कोडलैब के मौजूदा पॉइंट से शुरुआत कर सकें. codelab-done फ़ोल्डर में इस कोडलैब का पूरा वर्शन मौजूद है. साथ ही, इसमें पूरी तरह से काम करने वाला क्लाइंट और node.js सर्वर मौजूद है.

हम इस कोडलैब के दौरान codelab-start फ़ोल्डर की फ़ाइलों का इस्तेमाल करेंगे. हालांकि, अगर आपको कोई समस्या आ रही है, तो कोडलैब का पूरा वर्शन इस्तेमाल करने में भी समस्या हो सकती है.

कोडलैब (कोड बनाना सीखना) की सैंपल फ़ाइलें

कोडलैब-स्टार्ट फ़ोल्डर का फ़ाइल स्ट्रक्चर इस तरह है:

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

सार्वजनिक फ़ोल्डर में हमारे ऐप्लिकेशन के स्टैटिक पेज होते हैं. हमारे ऐप्लिकेशन पर वेब अनुरोधों को रूट करने की ज़िम्मेदारी firebase.json की है. codelab-done वर्शन में, आपको एक functions डायरेक्ट्री भी दिखेगी. इसमें हमारे प्रॉक्सी सर्वर (व्यक्त) को Google Cloud फ़ंक्शन पर डिप्लॉय करने का लॉजिक शामिल होगा.

कोडलैब सैंपल डिप्लॉय करें

codelab-start से फ़ाइलों को अपने प्रोजेक्ट की डायरेक्ट्री में कॉपी करें.

$ firebase deploy

Firebase के डिप्लॉयमेंट की प्रोसेस पूरी होने के बाद, आपको कोडलैब (कोड बनाना सीखना) ऐप्लिकेशन दिखेगा:

e84c1049eb4cca92.png

पुष्टि करने की प्रक्रिया शुरू करने के लिए, पार्टनर के क्रेडेंशियल ज़रूरी हैं. इसके बारे में हम अगले सेक्शन में जानकारी देंगे.

5. OAuth हैंडल करना

OAuth, ऐक्सेस देने का वेब स्टैंडर्ड है. आम तौर पर, इसका इस्तेमाल उपयोगकर्ताओं के लिए, पासवर्ड शेयर किए बिना तीसरे पक्ष के ऐप्लिकेशन को उनके खाते की जानकारी का ऐक्सेस देने के लिए किया जाता है. हम OAuth 2.0 का इस्तेमाल करते हैं, ताकि डेवलपर डिवाइस ऐक्सेस के ज़रिए उपयोगकर्ता के डिवाइस ऐक्सेस कर सकें.

7ee31f5d9c37f699.png

रीडायरेक्ट यूआरआई तय करें

OAuth फ़्लो के पहले चरण में, Google OAuth 2.0 एंडपॉइंट पर पैरामीटर का एक सेट पास करना शामिल है. उपयोगकर्ता की सहमति मिलने के बाद, Google के OAuth सर्वर आपके रीडायरेक्ट यूआरआई को एक ऑथराइज़ेशन कोड के साथ अनुरोध भेजेंगे.

scripts.js में अपने होस्टिंग यूआरएल से SERVER_URI कॉन्सटेंट (लाइन 19) को अपडेट करें:

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

इस बदलाव के साथ ऐप्लिकेशन को फिर से डिप्लॉय करने पर, आपके प्रोजेक्ट के लिए इस्तेमाल किया गया रीडायरेक्ट यूआरआई अपडेट हो जाएगा.

$ firebase deploy

रीडायरेक्ट यूआरआई चालू करें

स्क्रिप्ट फ़ाइल में रीडायरेक्ट यूआरआई को अपडेट करने के बाद, आपको इसे अपने प्रोजेक्ट के लिए बनाए गए क्लाइंट आईडी के लिए अनुमति वाले रीडायरेक्ट यूआरआई की सूची में भी जोड़ना होगा. Google Cloud Platform में क्रेडेंशियल पेज पर जाएं. यहां आपके प्रोजेक्ट के लिए बनाए गए सभी क्रेडेंशियल की सूची दिखेगी:

1a07b624b5e548da.png

OAuth 2.0 क्लाइंट आईडी की सूची में जाकर, वह क्लाइंट आईडी चुनें जो आपने प्रोजेक्ट बनाने के चरण में बनाया था. अपने प्रोजेक्ट के अनुमति वाले रीडायरेक्ट यूआरआई की सूची में, अपने ऐप्लिकेशन का रीडायरेक्ट यूआरआई जोड़ें.

6d65b298e1f005e2.png

साइन इन करें!

Firebase के साथ सेट अप किए गए होस्टिंग यूआरएल पर जाएं. इसके बाद, अपने पार्टनर के क्रेडेंशियल डालें और साइन इन करें बटन पर क्लिक करें. क्लाइंट आईडी और क्लाइंट सीक्रेट, Google Cloud Platform से मिले क्रेडेंशियल हैं. प्रोजेक्ट आईडी, डिवाइस ऐक्सेस कंसोल से मिलता है.

78b48906a2dd7c05.png

साइन इन करें बटन आपके उपयोगकर्ताओं को आपके एंटरप्राइज़ के लिए OAuth फ़्लो पर ले जाएगा. इसकी शुरुआत लॉगिन स्क्रीन से होगी और उनके Google खाते पर जाएं. लॉग इन करने के बाद, उपयोगकर्ताओं से आपके प्रोजेक्ट को उनके Nest डिवाइसों को ऐक्सेस करने की अनुमतियां मांगी जाएंगी.

e9b7887c4ca420.png

यह एक मॉक ऐप्लिकेशन है, इसलिए रीडायरेक्ट करने से पहले Google आपको चेतावनी देगा!

b227d510cb1df073.png

अपने ऐप्लिकेशन पर रीडायरेक्ट करने के लिए, "बेहतर" पर क्लिक करें. इसके बाद, "web.app पर जाएं (असुरक्षित)" को चुनें.

673a4fd217e24dad.png

इससे आने वाले जीईटी अनुरोध के हिस्से के तौर पर, OAuth कोड मिलेगा. इसके बाद ऐप्लिकेशन, ऐक्सेस टोकन और रीफ़्रेश टोकन के बदले मिलेगा.

6. डिवाइस कंट्रोल

Device Access के सैंपल ऐप्लिकेशन में, Google Nest डिवाइसों को कंट्रोल करने के लिए, स्मार्ट डिवाइस मैनेजमेंट REST API कॉल का इस्तेमाल किया जाता है. इन कॉल में, कुछ निर्देशों के लिए ज़रूरी पेलोड के साथ-साथ जीईटी या पोस्ट अनुरोध के हेडर में ऐक्सेस टोकन पास करना शामिल होता है.

हमने इन कॉल को हैंडल करने के लिए, एक सामान्य ऐक्सेस अनुरोध फ़ंक्शन लिखा है. हालांकि, इस फ़ंक्शन के लिए, आपको ज़रूरत पड़ने पर सही एंडपॉइंट के साथ-साथ पेलोड ऑब्जेक्ट भी देना होगा!

function deviceAccessRequest(method, call, localpath, payload = null) {...}
  • तरीका — एचटीटीपी अनुरोध का टाइप (GET या POST)
  • कॉल — हमारे एपीआई कॉल को दिखाने वाली स्ट्रिंग, जिसका इस्तेमाल जवाबों को रूट करने के लिए किया जाता है (listDevices, thermostatMode, temperatureSetpoint)
  • localpath — वह एंडपॉइंट जिसके लिए अनुरोध किया जाता है. इसमें प्रोजेक्ट आईडी और डिवाइस आईडी शामिल होते हैं (https://smartdevicemanagement.googleapis.com/v1 के बाद जोड़ा जाता है)
  • पेलोड (*) — एपीआई कॉल के लिए ज़रूरी अतिरिक्त डेटा (उदाहरण के लिए, किसी सेट पॉइंट के लिए तापमान को दिखाने वाला संख्यात्मक मान)

Nest Thermostat को कंट्रोल करने के लिए, हम यूज़र इंटरफ़ेस (यूआई) कंट्रोल के नमूने बनाएंगे. जैसे, डिवाइस की सूची बनाना, मोड सेट करना, तापमान सेट करना:

86f8a193aa397421.png

ये यूज़र इंटरफ़ेस (यूआई) कंट्रोल, scripts.js से मिलते-जुलते फ़ंक्शन (listDevices(), postThermostatMode(), postTemperatureSetpoint()) को कॉल करेंगे. इसे लागू करने के लिए खाली छोड़ दिया जाता है! लक्ष्य सही तरीका/पाथ चुनना और पेलोड को deviceAccessRequest(...) फ़ंक्शन को भेजना है.

डिवाइस की सूची बनाएं

डिवाइस ऐक्सेस करने की सबसे आसान कॉल listDevices है. यह GET अनुरोध का इस्तेमाल करता है और इसके लिए किसी पेलोड की ज़रूरत नहीं होती. एंडपॉइंट को projectId का इस्तेमाल करके स्ट्रक्चर करने की ज़रूरत है. अपने listDevices() फ़ंक्शन को नीचे बताए गए तरीके के मुताबिक पूरा करें:

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

अपने बदलावों को सेव करें और नीचे दिए गए निर्देश की मदद से, अपने Firebase प्रोजेक्ट को फिर से डिप्लॉय करें:

$ firebase deploy

ऐप्लिकेशन का नया वर्शन डिप्लॉय होने के बाद, पेज को फिर से लोड करके देखें और डिवाइसों की सूची बनाएं पर क्लिक करें. इससे डिवाइस कंट्रोल में जानकारी दिखने लगेगी. यहां आपको अपने थर्मोस्टैट का आईडी दिखेगा:

b64a198673ed289f.png

सूची में से डिवाइस चुनने पर, scripts.js फ़ाइल में deviceId फ़ील्ड अपडेट हो जाएगा. अगले दो कंट्रोल के लिए, हमें उस डिवाइस के लिए deviceId तय करना होगा जिसे हम कंट्रोल करना चाहते हैं.

थर्मोस्टैट का कंट्रोल

Smart Device Management API में Nest Thermostat को बुनियादी तौर पर कंट्रोल करने के लिए, दो traits हैं. ThermostatMode और TemperatureSetpoint. ThermostatMode को आपके Nest Thermostat के मोड को, इन चार अलग-अलग मोड में से किसी एक पर सेट करने का विकल्प मिलता है: {off, Heat, Cool, HeatCool}. इसके बाद, हमें चुने गए मोड को पेलोड के हिस्से के तौर पर उपलब्ध कराना होगा.

scripts.js में अपने postThermostatMode() फ़ंक्शन को इनसे बदलें:

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 आपसे कुछ सवाल पूछेगा:

  1. Cloud Functions में लिखने के लिए आपको किस भाषा का इस्तेमाल करना है? — JavaScript
  2. क्या आपको संभावित गड़बड़ियों का पता लगाने और स्टाइल को लागू करने के लिए, ESLint का इस्तेमाल करना है? — नहीं
  3. क्या आपको अभी एनपीएम के साथ डिपेंडेंसी इंस्टॉल करना है? — हां

इससे आपके प्रोजेक्ट में 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 को सेव करने की कोशिश कर सकते हैं और नीचे दिए गए निर्देश से इसे साफ़ तौर पर बता सकते हैं:

$ npm install express xmlhttprequest --save

Blaze प्लान पर अपग्रेड करें

firebase deploy कमांड का इस्तेमाल करने के लिए, आपको Blaze प्लान पर अपग्रेड करना होगा. इसके लिए, आपको अपने खाते में पैसे चुकाने का तरीका जोड़ना होगा. प्रोजेक्ट की खास जानकारी > इस्तेमाल और बिलिंग पर जाएं और अपने प्रोजेक्ट के लिए ब्लेज़ प्लान चुनें.

c6a5e5a21397bef6.png

एक्सप्रेस सर्वर बनाएं

मिलने वाले GET और POST अनुरोधों का जवाब देने के लिए, एक्सप्रेस सर्वर एक आसान फ़्रेमवर्क को फ़ॉलो करता है. हमने एक ऐसा सर्वलेट बनाया है जो POST अनुरोधों पर ध्यान देता है, उन्हें पेलोड में बताए गए डेस्टिनेशन यूआरएल (विज्ञापन के लैंडिंग पेज का यूआरएल) पर भेजता है, और ट्रांसफ़र से मिले जवाब के साथ जवाब देता है.

फ़ंक्शन डायरेक्ट्री में अपनी 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"
      }
    ]
  }
}

यह /proxy से शुरू होने वाले यूआरएल को हमारे एक्सप्रेस सर्वर पर रूट करेगा और बाकी हमारे index.html पर जाता रहेगा.

प्रॉक्सी एपीआई कॉल

अब हमारा सर्वर तैयार हो गया है, इसलिए इस पते पर अनुरोध भेजने के लिए हमारे ब्राउज़र के लिए scripts.js में प्रॉक्सी यूआरआई तय करें:

const PROXY_URI = SERVER_URI + "/proxy";

इसके बाद, सीधे तौर पर डिवाइस ऐक्सेस वाले कॉल के लिए, scripts.js proxyRequest फ़ंक्शन जोड़ें. इसका सिग्नेचर, 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();
}

आखिरी चरण, scripts.js में postThermostatMode() और postTemperatureSetpoint() फ़ंक्शन में deviceAccessRequest(...) कॉल को proxyRequest(...) फ़ंक्शन से बदलना है.

ऐप्लिकेशन अपडेट करने के लिए, firebase deploy चलाएं.

$ firebase deploy

इसके साथ, अब आपके पास Cloud Functions पर एक्सप्रेस का इस्तेमाल करने वाला एक Node.js प्रॉक्सी सर्वर है.

Cloud फ़ंक्शन की अनुमतियां दें

आखिरी चरण, अपने क्लाउड फ़ंक्शन के लिए ऐक्सेस अनुमतियों की समीक्षा करना और यह पक्का करना है कि आपका क्लाइंट साइड ऐप्लिकेशन उन्हें कॉल कर सकेगा.

Google Cloud Platform में, मेन्यू से Cloud Functions टैब पर जाएं. इसके बाद, अपना क्लाउड फ़ंक्शन चुनें:

461e9bae74227fc1.png

अनुमतियां पर क्लिक करें. इसके बाद, सदस्य जोड़ें पर क्लिक करें. सभी उपयोगकर्ताओं को नए सदस्य फ़ील्ड में लिखें और भूमिका के तौर पर Cloud Functions > Cloud Functions Invoker चुनें. 'सेव करें' पर क्लिक करने पर एक चेतावनी मैसेज दिखेगा:

3adb01644217578c.png

'सार्वजनिक ऐक्सेस की अनुमति दें' को चुनने से, आपका क्लाइंट साइड ऐप्लिकेशन आपके क्लाउड फ़ंक्शन का इस्तेमाल कर पाएगा.

बधाई हो – आपने सभी चरण पूरे कर लिए हैं. अब अपने वेब ऐप्लिकेशन पर जाकर, अपने प्रॉक्सी सर्वर के ज़रिए रूट किए गए डिवाइस कंट्रोल को इस्तेमाल किया जा सकता है!

अगले चरण

क्या डिवाइस ऐक्सेस के क्षेत्र में अपनी विशेषज्ञता बढ़ाने के तरीके ढूंढ रहे हैं? दूसरे Nest डिवाइसों को कंट्रोल करने के बारे में ज़्यादा जानने के लिए, traits से जुड़े दस्तावेज़ देखें. साथ ही, अपने प्रॉडक्ट को दुनिया भर में लॉन्च करने के तरीके के बारे में जानने के लिए, सर्टिफ़िकेशन की प्रोसेस देखें!

डिवाइस ऐक्सेस वाले वेब ऐप्लिकेशन सैंपल ऐप्लिकेशन की मदद से, अपने हुनर को और बेहतर बनाएं. इस ऐप्लिकेशन की मदद से, कोडलैब का मॉड्यूल इंस्टॉल किया जा सकता है. साथ ही, Nest कैमरे, दरवाज़े की घंटी, और थर्मोस्टैट को कंट्रोल करने के लिए, काम करने वाला वेब ऐप्लिकेशन डिप्लॉय किया जा सकता है.