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

1. परिचय

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

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

प्रोजेक्ट बनाना - Google Cloud Platform में एक प्रोजेक्ट बनाएं और Device Access Console में डेवलपर के तौर पर साइन अप करें.
खाता लिंक करना - खाता लिंक करने के फ़्लो के ज़रिए उपयोगकर्ताओं को पाएं और ऐक्सेस कोड पाएं. कोड को ऐक्सेस टोकन के लिए बदलें.
डिवाइस कंट्रोल - ऐक्सेस टोकन की मदद से कमांड भेजकर, डिवाइसों को कंट्रोल करने के लिए Smart Device Management API के अनुरोध करें.

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

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

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

Node.js 8 या इसके बाद का वर्शन
Nest Thermostat से लिंक किया गया Google खाता

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

स्टैटिक वेब पेजों और क्लाउड फ़ंक्शन को होस्ट करने के लिए 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] के तौर पर इस्तेमाल करेंगे.)

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

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

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

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

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

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

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

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

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

3. Firebase सेटअप करना

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

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

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

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

Firebase Tools इंस्टॉल करना

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

$ npm i -g firebase-tools

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

$ firebase --version

लॉगिन कमांड का इस्तेमाल करके, अपने Google खाते से Firebase CLI टूल में लॉग-इन किया जा सकता है.

$ firebase login

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

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

$ firebase init hosting

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

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

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

$ firebase deploy

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

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

अब आपको Firebase की मदद से वेब पेज को डिप्लॉय करने के बारे में बुनियादी जानकारी मिल गई है. इसलिए, अब हम कोडलैब के सैंपल को डिप्लॉय करते हैं!

4. कोडलैब का सैंपल

GitHub पर होस्ट की गई codelab repository को क्लोन किया जा सकता है. इसके लिए, यहां दिया गया निर्देश इस्तेमाल करें:

$ 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

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

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

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

$ firebase deploy

Firebase के डिप्लॉय होने के बाद, आपको Codelab ऐप्लिकेशन दिखेगा:

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

5. OAuth को मैनेज करना

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

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

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 में क्रेडेंशियल पेज पर जाएं. यहां आपके प्रोजेक्ट के लिए बनाए गए सभी क्रेडेंशियल की सूची दिखेगी:

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

साइन इन करके देखें!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने बदलावों को सेव करें. इसके बाद, यहां दिए गए कमांड का इस्तेमाल करके, अपने Firebase प्रोजेक्ट को फिर से डिप्लॉय करें:

$ firebase deploy

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

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

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

Smart Device Management API में, Nest Thermostat को बुनियादी तौर पर कंट्रोल करने के लिए दो ट्रेट हैं. 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 Cloud Functions, Node.js, और Express का इस्तेमाल करेंगे.

Cloud Functions को शुरू करना

एक नई टर्मिनल विंडो खोलें. इसके बाद, अपनी प्रोजेक्ट डायरेक्ट्री पर जाएं और यह कमांड चलाएं:

$ firebase init functions

Firebase, Cloud Functions को शुरू करने के लिए आपसे कुछ सवाल पूछेगा:

आपको 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

ब्लेज़ प्लान पर अपग्रेड करना

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

Express सर्वर बनाना

Express सर्वर, आने वाले 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 से शुरू होने वाले यूआरएल, हमारे Express सर्वर पर रूट हो जाएंगे. बाकी यूआरएल, हमारे index.html पर रूट होते रहेंगे.

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

अब हमारा सर्वर तैयार है. इसलिए, आइए हम अपने ब्राउज़र के लिए 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();
}

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

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

$ firebase deploy

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

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

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

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

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

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

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

अगले चरण

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

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