এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ওয়েব ব্লুটুথ দিয়ে একটি প্লেবাল্ব মোমবাতি নিয়ন্ত্রণ করুন

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

IMG_19700101_023537~2~2.jpg

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

আপনি যা শিখবেন

জাভাস্ক্রিপ্টে কাছাকাছি থাকা ব্লুটুথ ডিভাইসের সাথে কীভাবে যোগাযোগ করবেন
ES2015 ক্লাস, অ্যারো ফাংশন, ম্যাপ এবং প্রমিস কীভাবে ব্যবহার করবেন

আপনার যা যা লাগবে

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

২. প্রথমে খেলুন

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

আপনি আমাকে রং পরিবর্তন করতে এই লিঙ্কেও দেখতে পারেন: https://www.youtube.com/watch?v=fBCPA9gIxlU

৩. প্রস্তুত হন

নমুনা কোড ডাউনলোড করুন

আপনি এখান থেকে জিপ ফাইলটি ডাউনলোড করে এই কোডের নমুনা পেতে পারেন:

অথবা এই গিট রিপোটি ক্লোন করে:

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

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

ওয়েব সার্ভার ইনস্টল এবং যাচাই করুন

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

Web Server for Chrome অ্যাপটি ইনস্টল করার পর, বুকমার্ক বারে থাকা Apps শর্টকাটটিতে ক্লিক করুন:

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

পরবর্তী উইন্ডোতে, ওয়েব সার্ভার আইকনটিতে ক্লিক করুন:

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

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

ফোল্ডার নির্বাচন করুন বোতামে ক্লিক করুন এবং ক্লোন করা (বা আনআর্কাইভ করা) রিপোজিটরির রুটটি নির্বাচন করুন। এর ফলে আপনি ওয়েব সার্ভার ডায়ালগে ( ওয়েব সার্ভার ইউআরএল(সমূহ) বিভাগে) হাইলাইট করা ইউআরএল-এর মাধ্যমে আপনার চলমান কাজটি পরিবেশন করতে পারবেন।

Options-এর অধীনে, নীচে দেখানো অনুযায়ী ' Automatically show index.html'-এর পাশের বক্সে টিক চিহ্ন দিন:

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

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

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

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

এরপরে

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

৪. মোমবাতিটি আবিষ্কার করুন

আমরা প্লেবাল্ব ক্যান্ডেল ব্লুটুথ ডিভাইসের জন্য একটি জাভাস্ক্রিপ্ট 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 মেথডের filters services প্যারামিটারে এটি যোগ করতে পারি।

আমরা BluetoothDevice অবজেক্টটির অভ্যন্তরীণ হিসাবও রাখব, যাতে পরে প্রয়োজনে এটি অ্যাক্সেস করা যায়। যেহেতু navigator.bluetooth.requestDevice একটি জাভাস্ক্রিপ্ট 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" বোতামে ক্লিক করবেন, তখন আমরা connect মেথডটি কল করব:

অ্যাপ.জেএস

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-এ ক্লিক করে) অথবা কেবল বর্তমান পেজটি রিফ্রেশ করুন। সবুজ "Connect" বোতামে ক্লিক করুন, চুজার থেকে ডিভাইসটি বেছে নিন এবং Ctrl + Shift + J কিবোর্ড শর্টকাট ব্যবহার করে আপনার পছন্দের Dev Tools কনসোলটি খুলুন ও লগ হওয়া BluetoothDevice অবজেক্টটি লক্ষ্য করুন।

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

যদি ব্লুটুথ বন্ধ থাকে এবং/অথবা প্লেবাল্ব ক্যান্ডেল ব্লুটুথ ডিভাইসটি বন্ধ থাকে, তাহলে আপনি একটি ত্রুটি বার্তা পেতে পারেন। সেক্ষেত্রে, এটি চালু করুন এবং পুনরায় চেষ্টা করুন।

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

আপনার কথা জানি না, কিন্তু আমি এই কোডে ইতিমধ্যেই অনেক বেশি 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();

})();

অ্যাপ.জেএস

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 রিটার্ন করা আছে? চলুন device.gatt.connect() কল করে ব্লুটুথ রিমোট GATT সার্ভারের সাথে সংযোগ স্থাপন করি, যেখানে ব্লুটুথ সার্ভিস এবং ক্যারেক্টারিস্টিক ডেফিনিশনগুলো রয়েছে:

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();
      });
    }
  }

ডিভাইসের নাম পড়ুন

এখানে আমরা প্লেবাল্ব ক্যান্ডেল ব্লুটুথ ডিভাইসের গ্যাট সার্ভারের সাথে সংযুক্ত আছি। এখন আমরা প্রাইমারি গ্যাট সার্ভিস (যা পূর্বে 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 এ যোগ করি।

অ্যাপ.জেএস

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;
}

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

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 জাভাস্ক্রিপ্ট অবজেক্টটিও আপডেট করতে হবে এবং optionalServices কী-তে ব্যাটারি সার্ভিসটি অন্তর্ভুক্ত করতে হবে, কারণ PLAYBULB Candle ব্লুটুথ ডিভাইসটি এটির বিজ্ঞাপন না দিলেও, এটি অ্যাক্সেস করা বাধ্যতামূলক।

playbulbCandle.js

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

আগের মতোই, ডিভাইসের নাম পাওয়ার পর 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 + '%';
}

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

এরপরে

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

তুমি খুব কাছে আছো, আমি কথা দিচ্ছি...

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

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

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

আমরা PlaybulbCandle ক্লাসের নতুন setColor পাবলিক মেথডে Bluetooth ক্যারেক্টারিস্টিকে কিছু ডেটা লেখার জন্য 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]);
    }

চলুন app.js এর changeColor ফাংশনটি আপডেট করি, যাতে 'No Effect' রেডিও বাটনটি চেক করা হলে playbulbCandle.setColor কল করা হয়। ব্যবহারকারী যখন কালার পিকার ক্যানভাসে ক্লিক করেন, তখন গ্লোবাল r, g, b কালার ভ্যারিয়েবলগুলো ইতিমধ্যেই সেট করা থাকে।

অ্যাপ.জেএস

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

এই পর্যায়ে, আপনার ওয়েব ব্রাউজারে সাইটটি ভিজিট করুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার ইউআরএল-এ ক্লিক করে) অথবা কেবল বর্তমান পেজটি রিফ্রেশ করুন। পেজটিতে থাকা "কানেক্ট" বাটনে ক্লিক করুন এবং কালার পিকার ব্যবহার করে আপনার প্লেবাল্ব ক্যান্ডেলের রঙ যতবার খুশি পরিবর্তন করুন।

আরও মোমবাতির প্রভাব

আপনি যদি আগে কখনো মোমবাতি জ্বালিয়ে থাকেন, তবে আপনি জানেন যে এর আলো স্থির নয়। সৌভাগ্যবশত, প্রাইমারি GATT সার্ভিসে 0xFF02 হিসেবে বিজ্ঞাপিত আরেকটি ব্লুটুথ ক্যারেক্টারিস্টিক ( 0xFFFB ) রয়েছে, যা ব্যবহারকারীকে মোমবাতির কিছু ইফেক্ট সেট করার সুযোগ দেয়।

উদাহরণস্বরূপ, 'ক্যান্ডেল এফেক্ট' সেট করতে [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 ফাংশনটি আপডেট করি, যাতে 'Candle Effect' রেডিও বাটনটি চেক করা হলে playbulbCandle.setCandleEffectColor এবং 'Flashing' রেডিও বাটনটি চেক করা হলে playbulbCandle.setFlashingColor কল হয়। এবার, আপনার সুবিধা থাকলে আমরা switch ব্যবহার করব।

অ্যাপ.জেএস

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;
  }
}

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

এরপরে

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

আরও আছে, কিন্তু এবার তোমাকে একাই সামলাতে হবে।

৭. অতিরিক্ত চেষ্টা করুন

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

অনুপস্থিত প্রভাব যোগ করুন

অনুপস্থিত প্রভাবগুলির তথ্য নিচে দেওয়া হলো:

পালস: [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') -এ একটি "input" eventListener যোগ করব এবং playbulbCandle.setDeviceName কল করব।

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

৮. এই তো!

আপনি যা শিখেছেন

জাভাস্ক্রিপ্টে কাছাকাছি থাকা ব্লুটুথ ডিভাইসের সাথে কীভাবে যোগাযোগ করবেন
ES2015 ক্লাস, অ্যারো ফাংশন, ম্যাপ এবং প্রমিস কীভাবে ব্যবহার করবেন

পরবর্তী পদক্ষেপ

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