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

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

IMG_19700101_023537~2~2.jpg

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

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

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

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

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

2. पहले चलाओ

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

मुझे रंग बदलते हुए यहां भी देखा जा सकता है: https://www.youtube.com/watch?v=fBCPA9gIxlU

3. सेट अप करें

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

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

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

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

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

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

आपके पास अपने वेब सर्वर का इस्तेमाल करने का विकल्प होता है. हालांकि, यह कोडलैब Chrome Web Server के साथ अच्छी तरह से काम करने के लिए डिज़ाइन किया गया है. अगर आपने अब तक यह ऐप्लिकेशन इंस्टॉल नहीं किया है, तो इसे 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 Bluetooth डिवाइस के लिए, 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 डिवाइस, लगातार विज्ञापन दिखाता है. ऐसा तब होता है, जब उसे पहले से किसी डिवाइस के साथ पेयर न किया गया हो. यह डिवाइस, एक स्थिर Bluetooth 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();

})();

'प्रॉमिस' क्या है?

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

सुरक्षा सुविधा के तौर पर, 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 कीबोर्ड शॉर्टकट का इस्तेमाल करके, अपने पसंदीदा DevTools कंसोल को खोलें और लॉग किए गए BluetoothDevice ऑब्जेक्ट पर ध्यान दें.

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

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

अनिवार्य बोनस

मुझे आपका नहीं पता, लेकिन मुझे इस कोड में पहले से ही बहुत सारे 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 Candle ब्लूटूथ डिवाइस के 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);
      });
    }

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

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 सेवा के UUID के लिए battery_service और ब्लूटूथ GATT की विशेषता के UUID के लिए 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 Bluetooth डिवाइस इसका विज्ञापन नहीं करता है, लेकिन इसे ऐक्सेस करना अब भी ज़रूरी है.

playbulbCandle.js

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

पहले की तरह, डिवाइस का नाम और बैटरी का लेवल मिलने के बाद, app.js को कॉल करके इसे 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 + '%';
}

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

आगे बढ़ें

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

- You're so close I promise...

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

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. अपने चैनल को नई ऊंचाइयों पर ले जाएं

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

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

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

पल्स: [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 क्लास, ऐरो फ़ंक्शन, मैप, और प्रॉमिस इस्तेमाल करने का तरीका

अगले चरण

Web Bluetooth API के बारे में ज़्यादा जानें
आधिकारिक Web Bluetooth Samples और Demos ब्राउज़ करें
उड़ती हुई नाराज़ बिल्ली को देखें