Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

वेब ब्लूटूथ से PLAYBULB कैंडल को कंट्रोल करें

1. यह किस बारे में है?

IMG_19700101_023537~2~2.jpg

इस कोडलैब में, आपको PLAYBULB एलईडी फ़्लेमलेस कैंडल को कंट्रोल करने का तरीका बताया जाएगा. इसके लिए, आपको सिर्फ़ JavaScript का इस्तेमाल करना होगा. ऐसा Web Bluetooth API की मदद से किया जा सकता है. इस दौरान, आपको JavaScript ES2015 की सुविधाओं के साथ काम करने का मौका भी मिलेगा. जैसे, क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस.

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

JavaScript में आस-पास मौजूद ब्लूटूथ डिवाइस से इंटरैक्ट करने का तरीका
ES2015 क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस इस्तेमाल करने का तरीका

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

वेब डेवलपमेंट की बुनियादी जानकारी
ब्लूटूथ लो एनर्जी (बीएलई) और जेनेरिक एट्रिब्यूट प्रोफ़ाइल (जीएटीटी) की बुनियादी जानकारी
आपकी पसंद का टेक्स्ट एडिटर
एक Mac, Chromebook या Android M डिवाइस, जिसमें Chrome ब्राउज़र ऐप्लिकेशन और यूएसबी माइक्रो से यूएसबी केबल हो.

2. सबसे पहले चलाएं

इस कोडलैब को शुरू करने से पहले, आपको https://googlecodelabs.github.io/candle-bluetooth पर जाकर, उस ऐप्लिकेशन का फ़ाइनल वर्शन देखना चाहिए जिसे आपको बनाना है. साथ ही, आपके पास मौजूद PLAYBULB Candle ब्लूटूथ डिवाइस का इस्तेमाल करके देखना चाहिए.

मुझे रंग बदलते हुए देखने के लिए, https://www.youtube.com/watch?v=fBCPA9gIxlU पर जाएं

3. सेट अप करें

सैंपल कोड डाउनलोड करना

इस कोड का सैंपल कोड पाने के लिए, यहां से zip फ़ाइल डाउनलोड करें:

या इस git रेपो को क्लोन करके:

git clone https://github.com/googlecodelabs/candle-bluetooth.git

अगर आपने सोर्स को zip फ़ाइल के तौर पर डाउनलोड किया है, तो उसे अनपैक करने पर आपको रूट फ़ोल्डर candle-bluetooth-master मिलेगा.

वेब सर्वर इंस्टॉल करना और उसकी पुष्टि करना

आपके पास अपने वेब सर्वर का इस्तेमाल करने का विकल्प है. हालांकि, यह कोडलैब Chrome वेब सर्वर के साथ अच्छी तरह से काम करने के लिए डिज़ाइन किया गया है. अगर आपने अब तक वह ऐप्लिकेशन इंस्टॉल नहीं किया है, तो उसे Chrome Web Store से इंस्टॉल किया जा सकता है.

Web Server for Chrome ऐप्लिकेशन इंस्टॉल करने के बाद, बुकमार्क बार में मौजूद ऐप्लिकेशन के शॉर्टकट पर क्लिक करें:

Screen Shot 2016-11-16 at 4.10.42 PM.png

इसके बाद, जो विंडो खुलेगी उसमें वेब सर्वर आइकॉन पर क्लिक करें:

इसके बाद, आपको यह डायलॉग बॉक्स दिखेगा. इससे आपको अपने लोकल वेब सर्वर को कॉन्फ़िगर करने की सुविधा मिलती है:

Screen Shot 2016-11-16 at 3.40.47 PM.png

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

विकल्प में जाकर, "index.html अपने-आप दिखाएं" के बगल में मौजूद बॉक्स को चुनें, जैसा कि यहां दिखाया गया है:

Screen Shot 2016-11-16 at 3.40.56 PM.png

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

Screen Shot 2016-11-16 at 3.20.22 PM.png

अगर आपको देखना है कि यह ऐप्लिकेशन आपके Android फ़ोन पर कैसा दिखता है, तो आपको Android पर रिमोट डीबगिंग की सुविधा चालू करनी होगी. साथ ही, पोर्ट फ़ॉरवर्डिंग सेट अप करना होगा. डिफ़ॉल्ट रूप से, पोर्ट नंबर 8887 होता है. इसके बाद, अपने Android फ़ोन पर http://localhost:8887 पर जाकर, Chrome का नया टैब खोलें.

अगला

फ़िलहाल, इस वेब ऐप्लिकेशन में ज़्यादा सुविधाएं नहीं हैं. ब्लूटूथ की सुविधा जोड़ना शुरू करें!

4. मोमबत्ती के बारे में जानें

हम PLAYBULB Candle ब्लूटूथ डिवाइस के लिए, JavaScript ES2015 क्लास का इस्तेमाल करने वाली लाइब्रेरी लिखकर शुरुआत करेंगे.

शांत रहें. क्लास सिंटैक्स, JavaScript में ऑब्जेक्ट-ओरिएंटेड इनहेरिटेंस का नया मॉडल नहीं जोड़ता है. यह ऑब्जेक्ट बनाने और इनहेरिटेंस को मैनेज करने के लिए, ज़्यादा साफ़ सिंटैक्स उपलब्ध कराता है. इसके बारे में यहां पढ़ा जा सकता है.

सबसे पहले, playbulbCandle.js में PlaybulbCandle क्लास तय करें और playbulbCandle इंस्टेंस बनाएं. यह इंस्टेंस, बाद में app.js फ़ाइल में उपलब्ध होगा.

playbulbCandle.js

(function() {
  'use strict';

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

आस-पास मौजूद किसी ब्लूटूथ डिवाइस को ऐक्सेस करने का अनुरोध करने के लिए, हमें navigator.bluetooth.requestDevice को कॉल करना होगा. PLAYBULB Candle डिवाइस लगातार विज्ञापन दिखाता है (अगर पहले से जुड़ा नहीं है), तो ब्लूटूथ GATT सेवा UUID को इसके छोटे रूप में 0xFF02 के रूप में जाना जाता है. हम बस एक कॉन्सटेंट को परिभाषित कर सकते हैं और इसे PlaybulbCandle क्लास के नए सार्वजनिक connect तरीके में फ़िल्टर सेवा पैरामीटर में जोड़ सकते हैं.

हम BluetoothDevice ऑब्जेक्ट को इंटरनल तौर पर भी ट्रैक करेंगे, ताकि ज़रूरत पड़ने पर हम उसे बाद में ऐक्सेस कर सकें. navigator.bluetooth.requestDevice, JavaScript ES2015 Promise दिखाता है. इसलिए, हम इसे then तरीके से करेंगे.

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(function(device) {
        this.device = device;
      }.bind(this)); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

Promise क्या है?

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

सुरक्षा से जुड़ी सुविधा के तौर पर, navigator.bluetooth.requestDevice की मदद से आस-पास मौजूद ब्लूटूथ डिवाइसों का पता लगाने के लिए, उपयोगकर्ता के जेस्चर का इस्तेमाल किया जाना चाहिए. जैसे, टच या माउस क्लिक. इसलिए, जब उपयोगकर्ता app.js फ़ाइल में "कनेक्ट करें" बटन पर क्लिक करेगा, तब हम connect तरीके को कॉल करेंगे:

app.js

document.querySelector('#connect').addEventListener('click', function(event) {
  document.querySelector('#state').classList.add('connecting');
  playbulbCandle.connect()
  .then(function() {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(function(error) {
    console.error('Argh!', error);
  });
});

ऐप्लिकेशन चलाना

इसके बाद, अपने वेब ब्राउज़र में अपनी साइट पर जाएं. इसके लिए, वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करें या मौजूदा पेज को रीफ़्रेश करें. हरे रंग के "कनेक्ट करें" बटन पर क्लिक करें. इसके बाद, सूची में से डिवाइस चुनें और Ctrl + Shift + J कीबोर्ड शॉर्टकट का इस्तेमाल करके, अपना पसंदीदा Dev Tools कंसोल खोलें. इसके बाद, लॉग किए गए BluetoothDevice ऑब्जेक्ट को देखें.

Screen Shot 2016-11-16 at 3.27.12 PM.png

अगर ब्लूटूथ और/या PLAYBULB Candle ब्लूटूथ डिवाइस बंद है, तो आपको गड़बड़ी का मैसेज मिल सकता है. ऐसे में, इसे चालू करें और फिर से कोशिश करें.

Mandatory Bonus

मुझे नहीं पता कि आपको क्या लगता है, लेकिन मुझे इस कोड में पहले से ही बहुत सारे function() {} दिख रहे हैं. इसके बजाय, () => {} JavaScript ES2015 ऐरो फ़ंक्शन पर स्विच करें. ये बहुत काम के होते हैं: इनमें बिना नाम वाले फ़ंक्शन की सभी खूबियां होती हैं, लेकिन बाइंडिंग की कोई परेशानी नहीं होती.

playbulbCandle.js

(function() {
  'use strict';

  const CANDLE_SERVICE_UUID = 0xFF02;

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
      }); 
    }
  }

  window.playbulbCandle = new PlaybulbCandle();

})();

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

अगला

- ठीक है... क्या मैं इस मोमबत्ती से बात कर सकती हूँ?

- ज़रूर... अगले चरण पर जाएं

अक्सर पूछे जाने वाले सवाल

5. कुछ पढ़ें

अब जब आपके पास navigator.bluetooth.requestDevice के वादे से मिला BluetoothDevice है, तो आपको क्या करना चाहिए? आइए, ब्लूटूथ रिमोट GATT सर्वर से कनेक्ट करें. इसमें ब्लूटूथ सेवा और विशेषताओं की परिभाषाएं होती हैं. इसके लिए, device.gatt.connect() को कॉल करें:

playbulbCandle.js

  class PlaybulbCandle {
    constructor() {
      this.device = null;
    }
    connect() {
      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}]};
      return navigator.bluetooth.requestDevice(options)
      .then(device => {
        this.device = device;
        return device.gatt.connect();
      });
    }
  }

डिवाइस का नाम देखना

यहां हम PLAYBULB कैंडल ब्लूटूथ डिवाइस के GATT सर्वर से कनेक्ट हैं. अब हमें प्राइमरी GATT सेवा (पहले 0xFF02 के तौर पर विज्ञापन दिखाया गया था) को ऐक्सेस करना है. साथ ही, इस सेवा से जुड़ी डिवाइस के नाम की विशेषता (0xFFFF) को पढ़ना है. इसके लिए, PlaybulbCandle क्लास में नया तरीका getDeviceName जोड़ें. साथ ही, device.gatt.getPrimaryService और service.getCharacteristic का इस्तेमाल करें. characteristic.readValue मेथड, असल में DataView रिटर्न करेगा. हम इसे TextDecoder की मदद से डिकोड करेंगे.

playbulbCandle.js

  const CANDLE_DEVICE_NAME_UUID = 0xFFFF;

  ...

    getDeviceName() {
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_DEVICE_NAME_UUID))
      .then(characteristic => characteristic.readValue())
      .then(data => {
        let decoder = new TextDecoder('utf-8');
        return decoder.decode(data);
      });
    }

चलिए, इसे app.js में जोड़ते हैं. इसके लिए, कनेक्ट होने के बाद playbulbCandle.getDeviceName को कॉल करें और डिवाइस का नाम दिखाएं.

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName);
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

इसके बाद, अपने वेब ब्राउज़र में अपनी साइट पर जाएं. इसके लिए, वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करें या मौजूदा पेज को रीफ़्रेश करें. पक्का करें कि PLAYBULB Candle चालू हो. इसके बाद, पेज पर मौजूद "कनेक्ट करें" बटन पर क्लिक करें. आपको कलर पिकर के नीचे डिवाइस का नाम दिखेगा.

Screen Shot 2016-11-16 at 3.29.21 PM.png

बैटरी लेवल देखना

PLAYBULB Candle ब्लूटूथ डिवाइस में, स्टैंडर्ड बैटरी लेवल ब्लूटूथ की विशेषता भी उपलब्ध है. इसमें डिवाइस का बैटरी लेवल शामिल होता है. इसका मतलब है कि हम ब्लूटूथ GATT सेवा के यूयूआईडी के लिए battery_service और ब्लूटूथ GATT विशेषता के यूयूआईडी के लिए battery_level जैसे स्टैंडर्ड नामों का इस्तेमाल कर सकते हैं.

चलिए, PlaybulbCandle क्लास में एक नया getBatteryLevel तरीका जोड़ते हैं और बैटरी लेवल को प्रतिशत में पढ़ते हैं.

playbulbCandle.js

    getBatteryLevel() {
      return this.device.gatt.getPrimaryService('battery_service')
      .then(service => service.getCharacteristic('battery_level'))
      .then(characteristic => characteristic.readValue())
      .then(data => data.getUint8(0));
    }

हमें options JavaScript ऑब्जेक्ट को भी अपडेट करना होगा, ताकि optionalServices कुंजी में बैटरी सेवा को शामिल किया जा सके. ऐसा इसलिए, क्योंकि PLAYBULB Candle ब्लूटूथ डिवाइस इसका विज्ञापन नहीं दिखाता है. हालांकि, इसे ऐक्सेस करने के लिए यह अब भी ज़रूरी है.

playbulbCandle.js

      let options = {filters:[{services:[ CANDLE_SERVICE_UUID ]}],
                     optionalServices: ['battery_service']};
      return navigator.bluetooth.requestDevice(options)

पहले की तरह, डिवाइस का नाम मिलने के बाद, app.js में playbulbCandle.getBatteryLevel को कॉल करके इसे प्लग इन करें और बैटरी लेवल दिखाएं.

app.js

document.querySelector('#connect').addEventListener('click', event => {
  playbulbCandle.connect()
  .then(() => {
    console.log(playbulbCandle.device);
    document.querySelector('#state').classList.remove('connecting');
    document.querySelector('#state').classList.add('connected');
    return playbulbCandle.getDeviceName().then(handleDeviceName)
    .then(() => playbulbCandle.getBatteryLevel().then(handleBatteryLevel));
  })
  .catch(error => {
    console.error('Argh!', error);
  });
});

function handleDeviceName(deviceName) {
  document.querySelector('#deviceName').value = deviceName;
}

function handleBatteryLevel(batteryLevel) {
  document.querySelector('#batteryLevel').textContent = batteryLevel + '%';
}

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

अगला

- मैं इस बल्ब का रंग कैसे बदलूँ? इसलिए, मैं यहां हूं!

- मैं वादा करता हूं कि आप बहुत करीब हैं...

अक्सर पूछे जाने वाले सवाल

6. रंग बदलना

रंग बदलना बहुत आसान है. इसके लिए, 0xFF02 के तौर पर विज्ञापन में दिखाई गई प्राइमरी GATT सेवा में, ब्लूटूथ की विशेषता (0xFFFC) के लिए निर्देशों का एक खास सेट लिखना होता है. उदाहरण के लिए, PLAYBULB Candle को लाल रंग में बदलने के लिए, 8-बिट वाले अनसाइंड पूर्णांकों की एक कलेक्शन लिखना होगा, जो [0x00, 255, 0, 0] के बराबर हो. इसमें 0x00 सफ़ेद रंग का सैचुरेशन है और 255, 0, 0 लाल, हरे, और नीले रंग की वैल्यू हैं.

हम characteristic.writeValue का इस्तेमाल करके, PlaybulbCandle क्लास के नए setColor पब्लिक मेथड में ब्लूटूथ की विशेषता के लिए कुछ डेटा लिखेंगे. प्रॉमिस पूरा होने पर, हम लाल, हरे, और नीले रंग की असल वैल्यू भी दिखाएंगे, ताकि हम बाद में उन्हें app.js में इस्तेमाल कर सकें:

playbulbCandle.js

  const CANDLE_COLOR_UUID = 0xFFFC;

  ...

    setColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_COLOR_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

आइए, app.js में changeColor फ़ंक्शन को अपडेट करें, ताकि "कोई असर नहीं" रेडियो बटन को चुने जाने पर playbulbCandle.setColor को कॉल किया जा सके. जब उपयोगकर्ता कलर पिकर कैनवस पर क्लिक करता है, तो ग्लोबल r, g, b कलर वैरिएबल पहले से सेट होते हैं.

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  if (effect === 'noEffect') {
    playbulbCandle.setColor(r, g, b).then(onColorChanged);
  }
}

इसके बाद, अपने वेब ब्राउज़र में अपनी साइट पर जाएं. इसके लिए, वेब सर्वर ऐप्लिकेशन में हाइलाइट किए गए वेब सर्वर यूआरएल पर क्लिक करें या मौजूदा पेज को रीफ़्रेश करें. पेज पर मौजूद "कनेक्ट करें" बटन पर क्लिक करें. इसके बाद, कलर पिकर पर क्लिक करके, PLAYBULB Candle का रंग जितनी बार चाहें उतनी बार बदलें.

मोअर कैंडल इफ़ेक्ट

अगर आपने पहले कभी मोमबत्ती जलाई है, तो आपको पता होगा कि उसकी रोशनी स्थिर नहीं होती. खुशकिस्मती से, प्राइमरी GATT सर्विस में एक और ब्लूटूथ विशेषता (0xFFFB) है. इसे 0xFF02 के तौर पर दिखाया गया है. इससे उपयोगकर्ता, मोमबत्ती के कुछ इफ़ेक्ट सेट कर सकता है.

उदाहरण के लिए, "कैंडल इफ़ेक्ट" सेट करने के लिए, [0x00, r, g, b, 0x04, 0x00, 0x01, 0x00] लिखें. [0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00] की मदद से, "फ़्लैशिंग इफ़ेक्ट" भी सेट किया जा सकता है.

चलिए, PlaybulbCandle क्लास में setCandleEffectColor और setFlashingColor मेथड जोड़ते हैं.

playbulbCandle.js

  const CANDLE_EFFECT_UUID = 0xFFFB;

  ...

    setCandleEffectColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x04, 0x00, 0x01, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }
    setFlashingColor(r, g, b) {
      let data = new Uint8Array([0x00, r, g, b, 0x00, 0x00, 0x1F, 0x00]);
      return this.device.gatt.getPrimaryService(CANDLE_SERVICE_UUID)
      .then(service => service.getCharacteristic(CANDLE_EFFECT_UUID))
      .then(characteristic => characteristic.writeValue(data))
      .then(() => [r,g,b]);
    }

साथ ही, app.js में changeColor फ़ंक्शन को अपडेट करें, ताकि "कैंडल इफ़ेक्ट" रेडियो बटन पर सही का निशान लगाने पर playbulbCandle.setCandleEffectColor को कॉल किया जा सके और "फ़्लैशिंग" रेडियो बटन पर सही का निशान लगाने पर playbulbCandle.setFlashingColor को कॉल किया जा सके. इस बार, हम switch का इस्तेमाल करेंगे. अगर आपको इससे कोई समस्या नहीं है.

app.js

function changeColor() {
  var effect = document.querySelector('[name="effectSwitch"]:checked').id;
  switch(effect) {
    case 'noEffect':
      playbulbCandle.setColor(r, g, b).then(onColorChanged);
      break;
    case 'candleEffect':
      playbulbCandle.setCandleEffectColor(r, g, b).then(onColorChanged);
      break;
    case 'flashing':
      playbulbCandle.setFlashingColor(r, g, b).then(onColorChanged);
      break;
  }
}

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

अगला

- बस इतना ही? क्या आपको मोमबत्ती के तीन खराब इफ़ेक्ट मिले? क्या मुझे इसलिए यहां बुलाया गया है?

- और भी हैं, लेकिन इस बार आपको खुद ही ढूंढने होंगे.

7. अपने चैनल को नई ऊंचाइयों पर ले जाएं

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

इफ़ेक्ट जोड़ना

यहां उन इफ़ेक्ट का डेटा दिया गया है जो मौजूद नहीं हैं:

Pulse: [0x00, r, g, b, 0x01, 0x00, 0x09, 0x00] (आपको वहां r, g, b वैल्यू में बदलाव करना पड़ सकता है)
रेनबो: [0x01, 0x00, 0x00, 0x00, 0x02, 0x00, 0x01, 0x00] (मिर्गी से पीड़ित लोगों को इससे बचना चाहिए)
रेनबो फ़ेड: [0x01, 0x00, 0x00, 0x00, 0x03, 0x00, 0x26, 0x00]

इसका मतलब है कि PlaybulbCandle क्लास में नए setPulseColor, setRainbow, और setRainbowFade तरीके जोड़ना और उन्हें changeColor में कॉल करना.

"कोई असर नहीं" वाली समस्या को ठीक करना

आपने देखा होगा कि "कोई इफ़ेक्ट नहीं" विकल्प, लागू किए जा रहे किसी भी इफ़ेक्ट को रीसेट नहीं करता. यह एक छोटी सी समस्या है, लेकिन फिर भी इसे ठीक करना ज़रूरी है. चलिए, इसे ठीक करते हैं. setColor तरीके में, आपको सबसे पहले यह देखना होगा कि कोई इफ़ेक्ट लागू है या नहीं. इसके लिए, नए क्लास वैरिएबल _isEffectSet का इस्तेमाल करें. अगर true है, तो इस डेटा के साथ नया रंग सेट करने से पहले इफ़ेक्ट को बंद करें: [0x00, r, g, b, 0x05, 0x00, 0x01, 0x00].

डिवाइस का नाम लिखें

यह तो बहुत आसान है! डिवाइस का कस्टम नाम लिखना उतना ही आसान है जितना कि ब्लूटूथ डिवाइस के नाम की पिछली विशेषता को लिखना. हमारा सुझाव है कि आप TextEncoder encode तरीके का इस्तेमाल करें, ताकि आपको डिवाइस के नाम वाला Uint8Array मिल सके.

इसके बाद, मैं document.querySelector('#deviceName') में "इनपुट" eventListener जोड़ूंगा और इसे आसान बनाए रखने के लिए playbulbCandle.setDeviceName को कॉल करूंगा.

मैंने अपने चैनल का नाम PLAY💡 CANDLE रखा है!

8. हो गया!

आपने क्या सीखा

JavaScript में आस-पास मौजूद ब्लूटूथ डिवाइस से इंटरैक्ट करने का तरीका
ES2015 क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस इस्तेमाल करने का तरीका

अगले चरण

वेब ब्लूटूथ एपीआई के बारे में ज़्यादा जानें
आधिकारिक वेब ब्लूटूथ सैंपल और डेमो ब्राउज़ करें
उड़ने वाली गुस्से में दिखने वाली बिल्ली को देखें