1. এটা কি সম্পর্কে?
এই আলোকিত কোডল্যাবে, আপনি ওয়েব ব্লুটুথ এপিআই-কে ধন্যবাদ জাভাস্ক্রিপ্ট ছাড়া আর কিছুই ছাড়া প্লেবুল LED ফ্লেমলেস মোমবাতি নিয়ন্ত্রণ করতে শিখবেন। পাশাপাশি, আপনি JavaScript ES2015 বৈশিষ্ট্য যেমন ক্লাস , অ্যারো ফাংশন , ম্যাপ , এবং প্রতিশ্রুতিগুলির সাথে খেলবেন৷
আপনি কি শিখবেন
- জাভাস্ক্রিপ্টে আশেপাশের ব্লুটুথ ডিভাইসের সাথে কীভাবে ইন্টারঅ্যাক্ট করবেন
- কিভাবে ES2015 ক্লাস, তীর ফাংশন, মানচিত্র এবং প্রতিশ্রুতি ব্যবহার করবেন
আপনি কি প্রয়োজন হবে
- ওয়েব ডেভেলপমেন্টের প্রাথমিক ধারণা
- ব্লুটুথ লো এনার্জি (BLE) এবং জেনেরিক অ্যাট্রিবিউট প্রোফাইল (GATT) এর প্রাথমিক জ্ঞান
- আপনার পছন্দের একটি পাঠ্য সম্পাদক
- একটি Mac, একটি Chromebook, বা Chrome ব্রাউজার অ্যাপ সহ একটি Android M ডিভাইস এবং একটি USB মাইক্রো থেকে USB কেবল৷
2. প্রথমে খেলুন
আপনি https://googlecodelabs.github.io/candle-bluetooth- এ যে অ্যাপটি তৈরি করতে চলেছেন তার চূড়ান্ত সংস্করণটি পরীক্ষা করে দেখতে চাইতে পারেন এবং বাস্তবে এটিতে ডুব দেওয়ার আগে আপনার হাতে থাকা PLAYBULB Candle Bluetooth ডিভাইসটির সাথে খেলতে পারেন কোডল্যাব
এছাড়াও আপনি https://www.youtube.com/watch?v=fBCPA9gIxlU- এ আমাকে রঙ পরিবর্তন করতে দেখতে পারেন
3. সেট আপ করুন
নমুনা কোড ডাউনলোড করুন
আপনি এখানে জিপ ডাউনলোড করে এই কোডের নমুনা কোড পেতে পারেন:
অথবা এই গিট রেপো ক্লোন করে:
git clone https://github.com/googlecodelabs/candle-bluetooth.git
আপনি যদি উৎসটিকে একটি জিপ হিসাবে ডাউনলোড করেন, তাহলে এটিকে আনপ্যাক করলে আপনাকে একটি রুট ফোল্ডার candle-bluetooth-master দেওয়া উচিত।
ওয়েব সার্ভার ইনস্টল করুন এবং যাচাই করুন
আপনি আপনার নিজস্ব ওয়েব সার্ভার ব্যবহার করার জন্য বিনামূল্যে, এই কোডল্যাবটি Chrome ওয়েব সার্ভারের সাথে ভালভাবে কাজ করার জন্য ডিজাইন করা হয়েছে৷ আপনি যদি এখনও সেই অ্যাপটি ইনস্টল না করে থাকেন, তাহলে আপনি Chrome ওয়েব স্টোর থেকে এটি ইনস্টল করতে পারেন।
ক্রোম অ্যাপের জন্য ওয়েব সার্ভার ইনস্টল করার পরে, বুকমার্ক বারে অ্যাপস শর্টকাটে ক্লিক করুন:
পরবর্তী উইন্ডোতে, ওয়েব সার্ভার আইকনে ক্লিক করুন:
আপনি পরবর্তী এই ডায়ালগটি দেখতে পাবেন, যা আপনাকে আপনার স্থানীয় ওয়েব সার্ভার কনফিগার করতে দেয়:
ফোল্ডার নির্বাচন করুন বোতামে ক্লিক করুন এবং ক্লোন করা (বা আনআর্কাইভ করা) রেপোর রুটটি নির্বাচন করুন। এটি আপনাকে ওয়েব সার্ভার ডায়ালগে ( ওয়েব সার্ভার URL(গুলি) বিভাগে) হাইলাইট করা URL-এর মাধ্যমে আপনার কাজকে প্রগতিতে পরিবেশন করতে সক্ষম করবে৷
বিকল্পের অধীনে, " স্বয়ংক্রিয়ভাবে index.html দেখান " এর পাশের বাক্সটি চেক করুন, যেমনটি নীচে দেখানো হয়েছে:
এখন আপনার ওয়েব ব্রাউজারে আপনার সাইটটি দেখুন (হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে) এবং আপনার এমন একটি পৃষ্ঠা দেখতে হবে যা এইরকম দেখাচ্ছে:
আপনার অ্যান্ড্রয়েড ফোনে এই অ্যাপটি কেমন তা আপনি দেখতে চাইলে, আপনাকে অ্যান্ড্রয়েডে রিমোট ডিবাগিং সক্ষম করতে হবে এবং পোর্ট ফরওয়ার্ডিং সেট আপ করতে হবে (ডিফল্টরূপে পোর্ট নম্বর 8887)। এর পরে, আপনি আপনার অ্যান্ড্রয়েড ফোনে http://localhost:8887- এ একটি নতুন Chrome ট্যাব খুলতে পারেন।
পরবর্তী আপ
এই মুহুর্তে এই ওয়েব অ্যাপটি খুব বেশি কিছু করে না। ব্লুটুথ সমর্থন যোগ করা শুরু করা যাক!
4. মোমবাতি আবিষ্কার করুন
আমরা একটি লাইব্রেরি লিখে শুরু করব যা প্লেবুল ক্যান্ডেল ব্লুটুথ ডিভাইসের জন্য জাভাস্ক্রিপ্ট 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 প্রতিশ্রুতি প্রদান করে, তাই আমরা 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);
});
});
অ্যাপটি চালান
এই মুহুর্তে, আপনার ওয়েব ব্রাউজারে আপনার সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL এ ক্লিক করে) অথবা বিদ্যমান পৃষ্ঠাটি রিফ্রেশ করুন। সবুজ "সংযোগ করুন" বোতামে ক্লিক করুন, চয়নকারীতে ডিভাইসটি বাছাই করুন এবং Ctrl + Shift + J কীবোর্ড শর্টকাট দিয়ে আপনার প্রিয় Dev Tools কনসোল খুলুন এবং BluetoothDevice অবজেক্ট লগ করা লক্ষ্য করুন৷
ব্লুটুথ বন্ধ থাকলে এবং/অথবা PLAYBULB ক্যান্ডেল ব্লুটুথ ডিভাইস বন্ধ থাকলে আপনি একটি ত্রুটি পেতে পারেন। সেই ক্ষেত্রে, এটি চালু করুন এবং আবার এগিয়ে যান।
বাধ্যতামূলক বোনাস
আমি আপনার সম্পর্কে জানি না কিন্তু আমি ইতিমধ্যে এই কোডে অনেক 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 Bluetooth ডিভাইসের 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 ক্যান্ডেল ব্লুটুথ ডিভাইসে একটি স্ট্যান্ডার্ড ব্যাটারি স্তরের ব্লুটুথ বৈশিষ্ট্যও উপলব্ধ রয়েছে যা ডিভাইসের ব্যাটারি স্তর ধারণ করে। এর মানে আমরা ব্লুটুথ 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 আপডেট করতে হবে কারণ এটি প্লেবুল ক্যান্ডেল ব্লুটুথ ডিভাইস দ্বারা বিজ্ঞাপিত নয় তবে এটি অ্যাক্সেস করা বাধ্যতামূলক৷
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 এ ক্লিক করে) অথবা বিদ্যমান পৃষ্ঠাটি রিফ্রেশ করুন.. পৃষ্ঠায় "সংযোগ করুন" বোতামটি ক্লিক করুন এবং আপনি ডিভাইসের নাম এবং উভয়ই দেখতে পাবেন ব্যাটারি স্তর।
পরবর্তী আপ
- আমি কিভাবে এই বাল্বের রং পরিবর্তন করতে পারি? আমি এখানে আছি কেন!
- আপনি খুব কাছাকাছি, আমি কথা দিচ্ছি ...
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
6. রঙ পরিবর্তন করুন
রঙ পরিবর্তন করা 0xFF02 হিসাবে বিজ্ঞাপিত প্রাথমিক GATT পরিষেবাতে একটি ব্লুটুথ চরিত্রগত ( 0xFFFC ) কমান্ডের একটি নির্দিষ্ট সেট লেখার মতোই সহজ। উদাহরণস্বরূপ, আপনার প্লেবাল্ব মোমবাতিকে লাল করার অর্থ হল 8-বিট স্বাক্ষরবিহীন পূর্ণসংখ্যার একটি অ্যারে লেখা হবে [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 এ ক্লিক করে) অথবা বিদ্যমান পৃষ্ঠাটি রিফ্রেশ করুন। পৃষ্ঠার "সংযুক্ত করুন" বোতামে ক্লিক করুন এবং আপনার প্লেবুল মোমবাতির রঙ যতবার চান ততবার পরিবর্তন করতে রঙ চয়নকারীতে ক্লিক করুন৷
মোয়ার মোমবাতি প্রভাব
আপনি যদি ইতিমধ্যে একটি মোমবাতি জ্বালিয়ে থাকেন তবে আপনি জানেন যে আলোটি স্থির নয়। সৌভাগ্যবশত আমাদের জন্য, 0xFF02 হিসাবে বিজ্ঞাপিত প্রাথমিক GATT পরিষেবাতে আরেকটি ব্লুটুথ বৈশিষ্ট্য ( 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]);
}
এবং playbulbCandle.setCandleEffectColor কল করার জন্য app.js এ changeColor ফাংশন আপডেট করি যখন "ক্যান্ডেল ইফেক্ট" রেডিও বোতামটি চেক করা হয় এবং 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;
}
}
এই মুহুর্তে, আপনার ওয়েব ব্রাউজারে আপনার সাইটটি দেখুন (ওয়েব সার্ভার অ্যাপে হাইলাইট করা ওয়েব সার্ভার URL এ ক্লিক করে) অথবা বিদ্যমান পৃষ্ঠাটি রিফ্রেশ করুন। পৃষ্ঠার "সংযোগ" বোতামে ক্লিক করুন এবং মোমবাতি এবং ফ্ল্যাশিং প্রভাবগুলির সাথে খেলুন।
পরবর্তী আপ
- এই সব? 3 দরিদ্র মোমবাতি প্রভাব? এই জন্য আমি এখানে আছি?
- আরো আছে কিন্তু এইবার তুমি একা থাকবে।
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] ।
ডিভাইসের নাম লিখুন
এই এক সহজ! একটি কাস্টম ডিভাইসের নাম লেখা আগের ব্লুটুথ ডিভাইসের নাম লেখার মতোই সহজ। আমি ডিভাইসের নাম ধারণকারী Uint8Array পেতে TextEncoder encode পদ্ধতি ব্যবহার করার পরামর্শ দেব।
তারপর, আমি document.querySelector('#deviceName') এ একটি "ইনপুট" eventListener যোগ করব এবং এটিকে সহজ রাখতে playbulbCandle.setDeviceName কল করব।
আমি ব্যক্তিগতভাবে আমার নাম রেখেছি PLAY💡 CANDLE!
8. এটাই!
আপনি কি শিখেছেন
- জাভাস্ক্রিপ্টে আশেপাশের ব্লুটুথ ডিভাইসের সাথে কীভাবে ইন্টারঅ্যাক্ট করবেন
- কিভাবে ES2015 ক্লাস, তীর ফাংশন, মানচিত্র এবং প্রতিশ্রুতি ব্যবহার করবেন
পরবর্তী পদক্ষেপ
- ওয়েব ব্লুটুথ API সম্পর্কে আরও জানুন
- অফিসিয়াল ওয়েব ব্লুটুথ নমুনা এবং ডেমো ব্রাউজ করুন
- উড়ন্ত বিষণ্ণ বিড়াল দেখুন