আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

ওয়েব ব্লুটুথের সাহায্যে PLAYBULB ক্যান্ডেল কন্ট্রোল করা

১. এটি কী সম্পর্কে?

IMG_19700101_023537~2~2.jpg

এই কোডল্যাবে আপনি শিখবেন কীভাবে Web Bluetooth API-এর সাহায্যে শুধু JavaScript ব্যবহার করে PLAYBULB LED ফ্লেমলেস ক্যান্ডেল কন্ট্রোল করা যায়। সেইসাথে, আপনি JavaScript ES2015-এর বিভিন্ন ফিচার যেমন Classes, Arrow functions, Map এবং Promises ব্যবহার করতে পারবেন।

আপনি কী শিখবেন

JavaScript-এ কীভাবে আশেপাশের ব্লুটুথ ডিভাইসের সাথে ইন্টার‌্যাক্ট করতে হয়
ES2015 ক্লাস, অ্যারো ফাংশন, ম্যাপ ও প্রমিস কীভাবে ব্যবহার করবেন

আপনার যা প্রয়োজন হবে

ওয়েব ডেভেলপমেন্ট সম্পর্কে প্রাথমিক ধারণা
ব্লুটুথ লো এনার্জি (BLE) এবং জেনেরিক অ্যাট্রিবিউট প্রোফাইল (GATT) সম্পর্কে প্রাথমিক জ্ঞান
আপনার পছন্দের একটি টেক্সট এডিটর
Chrome ব্রাউজার অ্যাপ এবং USB মাইক্রো থেকে USB কেবেল সহ Mac, Chromebook বা Android M ডিভাইস।

২. প্রথমে চালান

আপনি যে অ্যাপটি তৈরি করতে চলেছেন তার ফাইনাল ভার্সনটি https://googlecodelabs.github.io/candle-bluetooth-এ চেক করে দেখতে পারেন এবং এই কোডল্যাবটি শুরু করার আগে আপনার কাছে থাকা PLAYBULB Candle ব্লুটুথ ডিভাইসটি ব্যবহার করে দেখতে পারেন।

এছাড়াও, আপনি https://www.youtube.com/watch?v=fBCPA9gIxlU লিঙ্কে গিয়ে আমার রঙ পরিবর্তন করার ভিডিও দেখতে পারেন

৩. সেট-আপ করুন

স্যাম্পেল কোড ডাউনলোড করুন

আপনি এই কোডের জন্য স্যাম্পেল কোড পেতে পারেন, হয় এখানে জিপ ফাইল ডাউনলোড করে:

অথবা এই git রেপো ক্লোন করে:

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

আপনি যদি সোর্সটি জিপ ফাইল হিসেবে ডাউনলোড করে থাকেন, তাহলে সেটি আনপ্যাক করলে আপনি একটি রুট ফোল্ডার candle-bluetooth-master পাবেন।

ওয়েব সার্ভার ইনস্টল ও যাচাই করা

আপনি নিজের ওয়েব সার্ভার ব্যবহার করতে পারলেও, এই কোডল্যাব Chrome ওয়েব সার্ভারের সাথে ভালভাবে কাজ করার জন্য ডিজাইন করা হয়েছে। আপনার কাছে এখনও সেই অ্যাপ ইনস্টল করা না থাকলে, আপনি Chrome ওয়েব স্টোর থেকে এটি ইনস্টল করতে পারবেন।

Chrome অ্যাপের জন্য ওয়েব সার্ভার ইনস্টল করার পরে, বুকমার্ক বারে অ্যাপ শর্টকাটে ক্লিক করুন:

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

এর পরে যে উইন্ডো খুলবে, সেখানে ওয়েব সার্ভার আইকনে ক্লিক করুন:

আপনি এর পরে এই ডায়ালগ দেখতে পাবেন, যা আপনাকে লোকাল ওয়েব সার্ভার কনফিগার করতে দেয়:

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

ফোল্ডার বেছে নিন বোতামে ক্লিক করুন এবং ক্লোন করা (বা আনআর্কাইভ করা) রেপোর রুট বেছে নিন। এটি আপনাকে ওয়েব সার্ভার ডায়ালগে (ওয়েব সার্ভার URL বিভাগে) হাইলাইট করা URL-এর মাধ্যমে আপনার প্রোগ্রেসে থাকা কাজ দেখাতে সাহায্য করবে।

বিকল্পের মধ্যে, "অটোমেটিক index.html দেখান" বিকল্পের পাশে থাকা বক্সে টিকচিহ্ন দিন, যেমন নিচে দেখানো হয়েছে:

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

এখন আপনার ওয়েব ব্রাউজারে আপনার সাইট দেখুন (হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) এবং আপনি এমন একটি পৃষ্ঠা দেখতে পাবেন যা দেখতে এইরকম:

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

আপনার Android ফোনে এই অ্যাপটি কেমন দেখায় তা দেখতে চাইলে, আপনাকে Android-এ রিমোট ডিবাগিং চালু করতে হবে এবং পোর্ট ফরওয়ার্ডিং সেট-আপ করতে হবে (ডিফল্ট পোর্ট নম্বর হল 8887)। এর পরে, আপনি Android ফোনে Chrome-এর নতুন ট্যাব খুলে http://localhost:8887 লিঙ্কে যেতে পারবেন।

এর পরে

এই মুহূর্তে এই ওয়েব অ্যাপে বেশি কিছু করা যায় না। ব্লুটুথ সাপোর্ট যোগ করা শুরু করা যাক!

৪. মোমবাতি খুঁজে নিন

আমরা প্রথমে একটি লাইব্রেরি লিখব যা PLAYBULB Candle ব্লুটুথ ডিভাইসের জন্য JavaScript ES2015 ক্লাস ব্যবহার করে।

শান্ত থাকুন। ক্লাস সিনট্যাক্স জাভাস্ক্রিপ্টে নতুন অবজেক্ট-ওরিয়েন্টেড ইনহেরিটেন্স মডেল নিয়ে আসছে না। এটি অবজেক্ট তৈরি করতে এবং ইনহেরিটেন্সের সাথে ডিল করতে অনেক বেশি স্পষ্ট সিনট্যাক্স প্রদান করে, যেমন আপনি নিচে পড়তে পারেন।

প্রথমে, 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);
  });
});

অ্যাপ রান করুন

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) অথবা আগে থেকে থাকা পৃষ্ঠাটি রিফ্রেশ করুন। সবুজ রঙের "কানেক্ট করুন" বোতামে ক্লিক করুন, বেছে নেওয়ার টুল থেকে ডিভাইস বেছে নিন এবং Ctrl + Shift + J কীবোর্ড শর্টকাট ব্যবহার করে আপনার পছন্দের Dev Tools কনসোল খুলুন এবং BluetoothDevice অবজেক্ট লগ করা হয়েছে কিনা তা লক্ষ্য করুন।

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

ব্লুটুথ এবং/অথবা PLAYBULB Candle ব্লুটুথ ডিভাইস বন্ধ থাকলে আপনি কোনও সমস্যা সংক্রান্ত মেসেজ পেতে পারেন। সেক্ষেত্রে, এটি চালু করে আবার এগিয়ে যান।

বাধ্যতামূলক বোনাস

আপনার কথা জানি না, তবে আমি এই কোডে অনেক function() {} দেখতে পাচ্ছি। পরিবর্তে () => {} জাভাস্ক্রিপ্ট 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);
  });
});

এর পরে

- আচ্ছা... আমি কি সত্যিই এই মোমবাতির সাথে কথা বলতে পারি নাকি অন্য কিছু?

- অবশ্যই... পরবর্তী ধাপে যান

প্রায়শই জিজ্ঞাসিত প্রশ্ন

৫. কিছু পড়ুন

তাহলে, 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);
      });
    }

আমরা কানেক্ট হয়ে গেলে এবং ডিভাইসের নাম দেখালে, 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;
}

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) অথবা আগে থেকে থাকা পৃষ্ঠাটি রিফ্রেশ করুন। 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));
    }

এছাড়াও, optionalServices কীতে ব্যাটারি পরিষেবা অন্তর্ভুক্ত করার জন্য আমাদের options জাভাস্ক্রিপ্ট অবজেক্ট আপডেট করতে হবে, কারণ এটি PLAYBULB Candle ব্লুটুথ ডিভাইস দ্বারা বিজ্ঞাপন করা হয় না, তবে এটি অ্যাক্সেস করার জন্য এখনও বাধ্যতামূলক।

playbulbCandle.js

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

আগের মতো, ডিভাইসের নাম ও ব্যাটারি লেভেল দেখানোর পরে playbulbCandle.getBatteryLevel-কে কল করে এটি 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)
    .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 + '%';
}

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে আপনার সাইট দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) অথবা শুধু বর্তমান পৃষ্ঠা রিফ্রেশ করুন.. পৃষ্ঠায় "কানেক্ট করুন" বোতামে ক্লিক করুন এবং আপনি ডিভাইসের নাম ও ব্যাটারি লেভেল দেখতে পাবেন।

এর পরে

- আমি কীভাবে এই বাল্বের রঙ পরিবর্তন করতে পারি? সেই জন্যই তো আমি এখানে আছি!

- আপনি প্রায় শেষ করে ফেলেছেন, আমি কথা দিচ্ছি...

প্রায়শই জিজ্ঞাসিত প্রশ্ন

৬. রঙ পরিবর্তন করুন

রঙ পরিবর্তন করা এতটাই সহজ যে 0xFF02 হিসেবে বিজ্ঞাপন দেওয়া প্রাইমারি GATT পরিষেবায় ব্লুটুথ বৈশিষ্ট্যে (0xFFFC) নির্দিষ্ট কমান্ডের সেট লিখলেই হয়ে যায়। যেমন, আপনার PLAYBULB Candle-এর রঙ লাল করতে হলে, [0x00, 255, 0, 0]-এর সমান ৮-বিট আনসাইনড ইন্টিজারের অ্যারে লিখতে হবে, যেখানে 0x00 হল সাদা রঙের স্যাচুরেশন এবং 255, 0, 0 হল যথাক্রমে লাল, সবুজ ও নীল রঙের ভ্যালু।

PlaybulbCandle ক্লাসের নতুন setColor পাবলিক পদ্ধতিতে ব্লুটুথ বৈশিষ্ট্যে কিছু ডেটা লেখার জন্য আমরা characteristic.writeValue ব্যবহার করব। এবং প্রমিজ পূরণ হলে আমরা আসল লাল, সবুজ এবং নীল রঙের মানও ফিরিয়ে দেব যাতে আমরা পরে সেগুলি 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]);
    }

"কোনও এফেক্ট নেই" রেডিও বোতাম চেক করা হলে playbulbCandle.setColor-কে কল করার জন্য app.js-এ changeColor ফাংশন আপডেট করা যাক। ব্যবহারকারী কালার পিকার ক্যানভাসে ক্লিক করলে গ্লোবাল 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);
  }
}

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) অথবা আগে থেকে থাকা পৃষ্ঠাটি রিফ্রেশ করুন। পৃষ্ঠায় "কানেক্ট করুন" বোতামে ক্লিক করুন এবং রঙ চয়নকারী বিকল্পে ক্লিক করে যতবার খুশি আপনার 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]);
    }

এবং "Candle Effect" রেডিও বোতাম চেক করা হলে playbulbCandle.setCandleEffectColor কল করতে এবং "Flashing" রেডিও বোতাম চেক করা হলে playbulbCandle.setFlashingColor কল করতে app.js-এ changeColor ফাংশন আপডেট করা যাক। এইবার, আপনার কোনও আপত্তি না থাকলে, আমরা 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;
  }
}

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) অথবা আগে থেকে থাকা পৃষ্ঠাটি রিফ্রেশ করুন। পৃষ্ঠায় "কানেক্ট করুন" বোতামে ক্লিক করুন এবং ক্যান্ডেল ও ফ্ল্যাশিং এফেক্ট নিয়ে খেলুন।

এর পরে

- আর কিছু? ৩টি খারাপ মোমবাতি এফেক্ট? এই জন্যই কি আমি এখানে?

- আরও আছে, তবে এইবার আপনাকে নিজেই এটা করতে হবে।

৭. আরও বেশি কিছু করুন

তাহলে, আমরা এখানে আছি! আপনার মনে হতে পারে যে এটি প্রায় শেষ হয়ে গেছে, কিন্তু অ্যাপটি এখনও শেষ হয়নি। এই কোডল্যাবে আপনি যা কপি-পেস্ট করেছেন তা আসলে বুঝেছেন কিনা তা দেখা যাক। এই অ্যাপকে আরও আকর্ষণীয় করে তুলতে এখন আপনাকে যা করতে হবে তা এখানে দেওয়া হল।

বাদ পড়া এফেক্ট যোগ করুন

এখানে অনুপস্থিত এফেক্টের ডেটা দেওয়া হল:

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]।

ডিভাইসের নাম লিখুন

এটি সহজ! কাস্টম ডিভাইসের নাম লেখা, আগের ব্লুটুথ ডিভাইসের নামের বৈশিষ্ট্য লেখার মতোই সহজ। আমি ডিভাইসের নাম সহ Uint8Array পেতে TextEncoder encode পদ্ধতি ব্যবহার করার সাজেশন দেব।

তারপর, আমি document.querySelector('#deviceName')-এ "ইনপুট" eventListener যোগ করব এবং এটিকে সহজ রাখতে playbulbCandle.setDeviceName-এ কল করব।

আমি ব্যক্তিগতভাবে আমারটার নাম দিয়েছি PLAY💡 CANDLE!

৮. ব্যস, এটুকুই যথেষ্ট!

আপনি কী শিখেছেন

JavaScript-এ কীভাবে আশেপাশের ব্লুটুথ ডিভাইসের সাথে ইন্টার‌্যাক্ট করতে হয়
ES2015 ক্লাস, অ্যারো ফাংশন, ম্যাপ ও প্রমিস কীভাবে ব্যবহার করবেন

পরবর্তী ধাপ

ওয়েব ব্লুটুথ API সম্পর্কে আরও জানুন
অফিসিয়াল ওয়েব ব্লুটুথ স্যাম্পেল এবং ডেমো ব্রাউজ করুন
উড়ন্ত বিরক্তিকর বিড়াল দেখুন