1. ভূমিকা
শেষ আপডেট: ২০২০-০৭-২১
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি এমন একটি ওয়েব পৃষ্ঠা তৈরি করবেন যা ওয়েব সিরিয়াল API ব্যবহার করে একটি BBC মাইক্রো:বিট বোর্ডের সাথে ইন্টারঅ্যাক্ট করবে এবং এর 5x5 LED ম্যাট্রিক্সে ছবি দেখাবে। আপনি ওয়েব সিরিয়াল API সম্পর্কে এবং ব্রাউজারের মাধ্যমে সিরিয়াল ডিভাইসের সাথে যোগাযোগ করার জন্য পঠনযোগ্য, লেখাযোগ্য এবং রূপান্তরযোগ্য স্ট্রিমগুলি কীভাবে ব্যবহার করবেন তা শিখবেন।
তুমি কি শিখবে
- কিভাবে একটি ওয়েব সিরিয়াল পোর্ট খুলবেন এবং বন্ধ করবেন
- ইনপুট স্ট্রিম থেকে ডেটা পরিচালনা করার জন্য কীভাবে একটি রিড লুপ ব্যবহার করবেন
- লেখার স্ট্রিম ব্যবহার করে কীভাবে ডেটা পাঠানো যায়
তোমার যা লাগবে
- সর্বশেষ এসপ্রুইনো ফার্মওয়্যার সহ একটি বিবিসি মাইক্রো:বিট বোর্ড
- Chrome এর একটি সাম্প্রতিক সংস্করণ (৮০ বা তার পরবর্তী)
- HTML, CSS, JavaScript এবং Chrome DevTools সম্পর্কে জ্ঞান থাকা।
আমরা এই কোডল্যাবের জন্য মাইক্রো:বিট ব্যবহার করার সিদ্ধান্ত নিয়েছি কারণ এটি সাশ্রয়ী মূল্যের, কয়েকটি ইনপুট (বোতাম) এবং আউটপুট (5x5 LED ডিসপ্লে) অফার করে এবং অতিরিক্ত ইনপুট এবং আউটপুট প্রদান করতে পারে। মাইক্রো:বিট কী করতে সক্ষম তার বিস্তারিত জানার জন্য Espruino সাইটে BBC মাইক্রো:বিট পৃষ্ঠাটি দেখুন।
2. ওয়েব সিরিয়াল API সম্পর্কে
ওয়েব সিরিয়াল এপিআই ওয়েবসাইটগুলিকে স্ক্রিপ্ট সহ একটি সিরিয়াল ডিভাইস থেকে পড়ার এবং লেখার একটি উপায় প্রদান করে। এপিআই ওয়েবসাইটগুলিকে মাইক্রোকন্ট্রোলার এবং 3D প্রিন্টারের মতো সিরিয়াল ডিভাইসগুলির সাথে যোগাযোগ করার অনুমতি দিয়ে ওয়েব এবং ভৌত জগতের মধ্যে সেতুবন্ধন তৈরি করে।
ওয়েব প্রযুক্তি ব্যবহার করে নিয়ন্ত্রণ সফ্টওয়্যার তৈরির অনেক উদাহরণ রয়েছে। উদাহরণস্বরূপ:
কিছু ক্ষেত্রে, এই ওয়েবসাইটগুলি ব্যবহারকারীর দ্বারা ম্যানুয়ালি ইনস্টল করা একটি নেটিভ এজেন্ট অ্যাপ্লিকেশনের মাধ্যমে ডিভাইসের সাথে যোগাযোগ করে। অন্যান্য ক্ষেত্রে, অ্যাপ্লিকেশনটি ইলেক্ট্রনের মতো একটি কাঠামোর মাধ্যমে একটি প্যাকেজড নেটিভ অ্যাপ্লিকেশনে সরবরাহ করা হয়। অন্যান্য ক্ষেত্রে, ব্যবহারকারীকে একটি অতিরিক্ত পদক্ষেপ সম্পাদন করতে হয়, যেমন একটি USB ফ্ল্যাশ ড্রাইভের মাধ্যমে ডিভাইসে একটি সংকলিত অ্যাপ্লিকেশন অনুলিপি করা।
সাইট এবং এটি যে ডিভাইসটি নিয়ন্ত্রণ করছে তার মধ্যে সরাসরি যোগাযোগ প্রদান করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যেতে পারে।
৩. সেট আপ করা
কোডটি পান
এই কোডল্যাবের জন্য আপনার যা যা প্রয়োজন, আমরা একটি গ্লিচ প্রজেক্টে রেখেছি।
- একটি নতুন ব্রাউজার ট্যাব খুলুন এবং https://web-serial-codelab-start.glitch.me/ এ যান।
- স্টার্টার প্রজেক্টের নিজস্ব সংস্করণ তৈরি করতে রিমিক্স গ্লিচ লিঙ্কে ক্লিক করুন।
- "শো" বোতামে ক্লিক করুন, এবং তারপর আপনার কোডটি কার্যকরভাবে দেখতে "একটি নতুন উইন্ডোতে" নির্বাচন করুন।
৪. একটি সিরিয়াল সংযোগ খুলুন
ওয়েব সিরিয়াল API সমর্থিত কিনা তা পরীক্ষা করুন।
প্রথমেই পরীক্ষা করে নিতে হবে যে বর্তমান ব্রাউজারে ওয়েব সিরিয়াল API সমর্থিত কিনা। এটি করার জন্য, serial navigator এ আছে কিনা তা পরীক্ষা করে দেখুন।
DOMContentLoaded ইভেন্টে, আপনার প্রকল্পে নিম্নলিখিত কোডটি যোগ করুন:
script.js - DOMContentLoaded
// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);
এটি ওয়েব সিরিয়াল সমর্থিত কিনা তা পরীক্ষা করে। যদি তা হয়, তাহলে এই কোডটি ব্যানারটি লুকিয়ে রাখে যা বলে যে ওয়েব সিরিয়াল সমর্থিত নয়।
চেষ্টা করে দেখুন
- পৃষ্ঠাটি লোড করুন।
- যাচাই করুন যে পৃষ্ঠাটিতে একটি লাল ব্যানার দেখাচ্ছে না যেখানে লেখা আছে যে ওয়েব সিরিয়াল সমর্থিত নয়।
সিরিয়াল পোর্ট খুলুন
এরপর, আমাদের সিরিয়াল পোর্টটি খুলতে হবে। অন্যান্য আধুনিক API-এর মতো, ওয়েব সিরিয়াল API অ্যাসিঙ্ক্রোনাস। এটি ইনপুট অপেক্ষা করার সময় UI ব্লক করা থেকে বিরত রাখে, তবে এটি আরও গুরুত্বপূর্ণ কারণ সিরিয়াল ডেটা যেকোনো সময় ওয়েব পৃষ্ঠায় গ্রহণ করা যেতে পারে এবং আমাদের এটি শোনার একটি উপায় প্রয়োজন।
যেহেতু একটি কম্পিউটারে একাধিক সিরিয়াল ডিভাইস থাকতে পারে, তাই যখন ব্রাউজার একটি পোর্টের অনুরোধ করার চেষ্টা করে, তখন এটি ব্যবহারকারীকে কোন ডিভাইসের সাথে সংযোগ স্থাপন করতে হবে তা বেছে নিতে অনুরোধ করে।
আপনার প্রকল্পে নিম্নলিখিত কোডটি যুক্ত করুন:
script.js - connect()
// CODELAB: Add code to request & open port here.
// - Request a port and open a connection.
port = await navigator.serial.requestPort();
// - Wait for the port to open.
await port.open({ baudrate: 9600 });
requestPort কল ব্যবহারকারীকে কোন ডিভাইসের সাথে সংযোগ স্থাপন করতে চান তা জিজ্ঞাসা করে। port.open কল করলে পোর্টটি খোলে। সিরিয়াল ডিভাইসের সাথে আমরা যে গতিতে যোগাযোগ করতে চাই তাও আমাদের প্রদান করতে হবে। BBC micro:bit USB-to-serial চিপ এবং প্রধান প্রসেসরের মধ্যে একটি 9600 baud সংযোগ ব্যবহার করে।
আসুন কানেক্ট বোতামটি সংযুক্ত করি এবং ব্যবহারকারী যখন এটিতে ক্লিক করেন তখন এটিকে connect() কল করতে দেই।
আপনার প্রকল্পে নিম্নলিখিত কোডটি যুক্ত করুন:
script.js - clickConnect()
// CODELAB: Add connect code here.
await connect();
চেষ্টা করে দেখুন
আমাদের প্রকল্পটি এখন শুরু করার জন্য ন্যূনতম কিছু বাকি আছে। সংযোগ বোতামে ক্লিক করলে ব্যবহারকারীকে সংযোগ করার জন্য সিরিয়াল ডিভাইসটি নির্বাচন করতে অনুরোধ করা হবে এবং তারপর মাইক্রো:বিটের সাথে সংযোগ স্থাপন করা হবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- ট্যাবে, আপনি একটি আইকন দেখতে পাবেন যা নির্দেশ করে যে আপনি একটি সিরিয়াল ডিভাইসের সাথে সংযুক্ত আছেন:
সিরিয়াল পোর্ট থেকে তথ্য শোনার জন্য একটি ইনপুট স্ট্রিম সেট আপ করুন।
সংযোগ স্থাপনের পর, আমাদের ডিভাইস থেকে ডেটা পড়ার জন্য একটি ইনপুট স্ট্রিম এবং একটি রিডার সেট আপ করতে হবে। প্রথমে, আমরা port.readable কল করে পোর্ট থেকে পঠনযোগ্য স্ট্রিমটি পাব। যেহেতু আমরা জানি যে আমরা ডিভাইস থেকে টেক্সট ফেরত পাব, আমরা এটি একটি টেক্সট ডিকোডারের মাধ্যমে পাইপ করব। এরপর, আমরা একটি রিডার পাব এবং রিড লুপ শুরু করব।
আপনার প্রকল্পে নিম্নলিখিত কোডটি যুক্ত করুন:
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable;
reader = inputStream.getReader();
readLoop();
রিড লুপ হল একটি অ্যাসিনক্রোনাস ফাংশন যা একটি লুপে চলে এবং মূল থ্রেড ব্লক না করেই কন্টেন্টের জন্য অপেক্ষা করে। নতুন ডেটা এলে, রিডার দুটি বৈশিষ্ট্য ফেরত দেয়: value এবং একটি done বুলিয়ান। যদি done সত্য হয়, তাহলে পোর্টটি বন্ধ হয়ে গেছে অথবা আর কোনও ডেটা আসছে না।
আপনার প্রকল্পে নিম্নলিখিত কোডটি যুক্ত করুন:
script.js - readLoop()
// CODELAB: Add read loop here.
while (true) {
const { value, done } = await reader.read();
if (value) {
log.textContent += value + '\n';
}
if (done) {
console.log('[readLoop] DONE', done);
reader.releaseLock();
break;
}
}
চেষ্টা করে দেখুন
আমাদের প্রকল্পটি এখন ডিভাইসের সাথে সংযোগ করতে পারে এবং ডিভাইস থেকে প্রাপ্ত যেকোনো ডেটা লগ উপাদানে যুক্ত করবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- আপনার Espruino লোগোটি দেখা উচিত:
সিরিয়াল পোর্টে ডেটা পাঠানোর জন্য একটি আউটপুট স্ট্রিম সেট আপ করুন।
সিরিয়াল যোগাযোগ সাধারণত দ্বিমুখী হয়। সিরিয়াল পোর্ট থেকে ডেটা গ্রহণের পাশাপাশি, আমরা পোর্টে ডেটা পাঠাতেও চাই। ইনপুট স্ট্রিমের মতো, আমরা কেবল আউটপুট স্ট্রিমের মাধ্যমে মাইক্রো:বিটে টেক্সট পাঠাবো।
প্রথমে, একটি টেক্সট এনকোডার স্ট্রিম তৈরি করুন এবং স্ট্রিমটিকে port.writeable এ পাইপ করুন।
script.js - connect()
// CODELAB: Add code setup the output stream here.
const encoder = new TextEncoderStream();
outputDone = encoder.readable.pipeTo(port.writable);
outputStream = encoder.writable;
Espruino ফার্মওয়্যারের সাথে সিরিয়ালের মাধ্যমে সংযুক্ত হলে, BBC micro:bit বোর্ড JavaScript read-eval-print loop (REPL) হিসেবে কাজ করে, যা আপনি Node.js শেলে যা পান তার অনুরূপ। এরপর, আমাদের স্ট্রিমে ডেটা পাঠানোর জন্য একটি পদ্ধতি প্রদান করতে হবে। নীচের কোডটি আউটপুট স্ট্রিম থেকে একজন লেখককে গ্রহণ করে এবং তারপর প্রতিটি লাইন পাঠাতে write ব্যবহার করে। পাঠানো প্রতিটি লাইনে একটি নতুন-লাইন অক্ষর ( \n ) থাকে, যা micro:bit কে পাঠানো কমান্ড মূল্যায়ন করতে বলে।
script.js - writeToStream()
// CODELAB: Write to output stream
const writer = outputStream.getWriter();
lines.forEach((line) => {
console.log('[SEND]', line);
writer.write(line + '\n');
});
writer.releaseLock();
সিস্টেমটিকে একটি পরিচিত অবস্থায় আনতে এবং আমরা যে অক্ষরগুলি পাঠাই সেগুলি প্রতিধ্বনিত করা থেকে বিরত রাখতে, আমাদের একটি CTRL-C পাঠাতে হবে এবং প্রতিধ্বনি বন্ধ করতে হবে।
script.js - connect()
// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');
চেষ্টা করে দেখুন
আমাদের প্রকল্পটি এখন micro:bit থেকে ডেটা পাঠাতে এবং গ্রহণ করতে পারে। আসুন যাচাই করি যে আমরা সঠিকভাবে একটি কমান্ড পাঠাতে পারি:
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- Chrome DevTools-এ Console ট্যাবটি খুলুন এবং
writeToStream('console.log("yes")');
পৃষ্ঠায় আপনি এরকম কিছু মুদ্রিত দেখতে পাবেন:
৫. LED ম্যাট্রিক্স নিয়ন্ত্রণ করুন
ম্যাট্রিক্স গ্রিড স্ট্রিং তৈরি করুন
micro:bit-এ LED ম্যাট্রিক্স নিয়ন্ত্রণ করতে, আমাদের show() কল করতে হবে। এই পদ্ধতিটি বিল্ট-ইন 5x5 LED স্ক্রিনে গ্রাফিক্স দেখায়। এটি একটি বাইনারি সংখ্যা বা একটি স্ট্রিং নেয়।
আমরা চেকবক্সগুলি পুনরাবৃত্তি করব এবং 1 এবং 0 এর একটি অ্যারে তৈরি করব যা নির্দেশ করবে কোনটি চেক করা হয়েছে এবং কোনটি নয়। এরপর আমাদের অ্যারেটি বিপরীত করতে হবে, কারণ আমাদের চেকবক্সগুলির ক্রম ম্যাট্রিক্সে LED-এর ক্রমের বিপরীত। এরপর, আমরা অ্যারেটিকে একটি স্ট্রিংয়ে রূপান্তর করব এবং মাইক্রো:বিটে পাঠানোর জন্য কমান্ড তৈরি করব।
script.js - sendGrid()
// CODELAB: Generate the grid
const arr = [];
ledCBs.forEach((cb) => {
arr.push(cb.checked === true ? 1 : 0);
});
writeToStream(`show(0b${arr.reverse().join('')})`);
ম্যাট্রিক্স আপডেট করার জন্য চেকবক্সগুলি সংযুক্ত করুন।
এরপর, আমাদের চেকবক্সগুলিতে পরিবর্তনগুলি শুনতে হবে এবং যদি সেগুলি পরিবর্তন হয়, তাহলে সেই তথ্যটি micro:bit-এ পাঠাতে হবে। বৈশিষ্ট্য সনাক্তকরণ কোডে ( // CODELAB: Add feature detection here. ), নিম্নলিখিত লাইনটি যোগ করুন:
script.js - DOMContentLoaded
initCheckboxes();
micro:bit প্রথম সংযুক্ত হওয়ার সময় গ্রিডটি রিসেট করা যাক, যাতে এটি একটি সুখী মুখ দেখায়। drawGrid() ফাংশনটি ইতিমধ্যেই প্রদান করা হয়েছে। এই ফাংশনটি sendGrid() এর মতোই কাজ করে; এটি 1s এবং 0s এর একটি অ্যারে নেয় এবং যথাযথভাবে চেকবক্সগুলি পরীক্ষা করে।
script.js - clickConnect()
// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();
চেষ্টা করে দেখুন
এখন, যখন পৃষ্ঠাটি মাইক্রো:বিটের সাথে একটি সংযোগ খুলবে, তখন এটি একটি খুশির মুখ পাঠাবে। চেকবক্সগুলিতে ক্লিক করলে LED ম্যাট্রিক্সের ডিসপ্লে আপডেট হবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- মাইক্রো:বিট LED ম্যাট্রিক্সে আপনার একটি হাসির আভা দেখা উচিত।
- চেকবক্সগুলি পরিবর্তন করে LED ম্যাট্রিক্সে একটি ভিন্ন প্যাটার্ন আঁকুন।
৬. মাইক্রো:বিট বোতামগুলো সংযুক্ত করুন
মাইক্রো:বিট বোতামগুলিতে একটি ওয়াচ ইভেন্ট যোগ করুন
মাইক্রো:বিটে দুটি বোতাম আছে, LED ম্যাট্রিক্সের উভয় পাশে একটি। Espruino একটি setWatch ফাংশন প্রদান করে যা বোতামটি টিপলে একটি ইভেন্ট/কলব্যাক পাঠায়। যেহেতু আমরা উভয় বোতামই শুনতে চাই, তাই আমরা আমাদের ফাংশনটিকে জেনেরিক করব এবং এটি ইভেন্টের বিবরণ মুদ্রণ করবে।
script.js - watchButton()
// CODELAB: Hook up the micro:bit buttons to print a string.
const cmd = `
setWatch(function(e) {
print('{"button": "${btnId}", "pressed": ' + e.state + '}');
}, ${btnId}, {repeat:true, debounce:20, edge:"both"});
`;
writeToStream(cmd);
এরপর, প্রতিবার যখন সিরিয়াল পোর্ট ডিভাইসের সাথে সংযুক্ত হবে তখন আমাদের উভয় বোতাম (মাইক্রো:বিট বোর্ডে BTN1 এবং BTN2 নামে পরিচিত) সংযুক্ত করতে হবে।
script.js - clickConnect()
// CODELAB: Initialize micro:bit buttons.
watchButton('BTN1');
watchButton('BTN2');
চেষ্টা করে দেখুন
সংযুক্ত থাকাকালীন খুশি মুখ দেখানোর পাশাপাশি, micro:bit-এর যেকোনো একটি বোতাম টিপলে পৃষ্ঠায় কোন বোতাম টিপানো হয়েছে তা নির্দেশ করে লেখা যোগ হবে। সম্ভবত, প্রতিটি অক্ষর তার নিজস্ব লাইনে থাকবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- মাইক্রো:বিটস এলইডি ম্যাট্রিক্সে আপনার একটি হাসির আভা দেখা উচিত।
- মাইক্রো:বিটের বোতামগুলি টিপুন এবং যাচাই করুন যে এটি বোতাম টিপে থাকা বিবরণ সহ পৃষ্ঠায় নতুন লেখা যুক্ত করেছে।
৭. ইনকামিং ডেটা পার্স করার জন্য একটি ট্রান্সফর্ম স্ট্রিম ব্যবহার করুন
বেসিক স্ট্রিম হ্যান্ডলিং
যখন একটি মাইক্রো:বিট বোতাম চাপা হয়, তখন মাইক্রো:বিট একটি স্ট্রিমের মাধ্যমে সিরিয়াল পোর্টে ডেটা পাঠায়। স্ট্রিমগুলি খুবই কার্যকর, তবে এগুলি একটি চ্যালেঞ্জও হতে পারে কারণ আপনি অগত্যা সমস্ত ডেটা একবারে পাবেন না এবং এটি ইচ্ছামত খণ্ডিত হতে পারে।
অ্যাপটি বর্তমানে ইনকামিং স্ট্রিমটি আসার সাথে সাথে প্রিন্ট করে ( readLoop এ)। বেশিরভাগ ক্ষেত্রে, প্রতিটি অক্ষর তার নিজস্ব লাইনে থাকে, তবে এটি খুব একটা সহায়ক নয়। আদর্শভাবে, স্ট্রিমটিকে পৃথক লাইনে পার্স করা উচিত এবং প্রতিটি বার্তাকে তার নিজস্ব লাইন হিসাবে দেখানো উচিত।
TransformStream দিয়ে স্ট্রিম রূপান্তর করা
এটি করার জন্য, আমরা একটি ট্রান্সফর্ম স্ট্রিম ( TransformStream ) ব্যবহার করতে পারি, যা আগত স্ট্রিমকে পার্স করে পার্স করা ডেটা ফেরত পাঠানো সম্ভব করে। একটি ট্রান্সফর্ম স্ট্রিম স্ট্রিম সোর্স (এই ক্ষেত্রে, micro:bit) এবং স্ট্রিমটি গ্রাসকারী যা কিছু (এই ক্ষেত্রে readLoop ) এর মধ্যে বসতে পারে এবং এটি শেষ পর্যন্ত গ্রাস করার আগে একটি ইচ্ছামত ট্রান্সফর্ম প্রয়োগ করতে পারে। এটিকে একটি অ্যাসেম্বলি লাইনের মতো ভাবুন: একটি উইজেট লাইনের নীচে নেমে আসার সাথে সাথে, লাইনের প্রতিটি ধাপ উইজেটটিকে পরিবর্তন করে, যাতে এটি তার চূড়ান্ত গন্তব্যে পৌঁছানোর সময়, এটি একটি সম্পূর্ণরূপে কার্যকরী উইজেট হয়ে ওঠে।
আরও তথ্যের জন্য, MDN এর Streams API ধারণাগুলি দেখুন।
LineBreakTransformer দিয়ে স্ট্রিম রূপান্তর করুন
চলুন একটি LineBreakTransformer ক্লাস তৈরি করি, যা একটি স্ট্রিমকে লাইন ব্রেক ( \r\n ) এর উপর ভিত্তি করে চাঙ্ক করবে। ক্লাসটির জন্য দুটি পদ্ধতি প্রয়োজন, transform এবং flush । স্ট্রিম দ্বারা নতুন ডেটা প্রাপ্ত হওয়ার সময় transform পদ্ধতিটি বলা হয়। এটি হয় ডেটা এনকিউ করতে পারে অথবা পরবর্তী সময়ের জন্য সংরক্ষণ করতে পারে। স্ট্রিমটি বন্ধ হয়ে গেলে flush পদ্ধতিটি বলা হয় এবং এটি এমন কোনও ডেটা পরিচালনা করে যা এখনও প্রক্রিয়া করা হয়নি।
আমাদের transform পদ্ধতিতে, আমরা container এ নতুন ডেটা যোগ করব, এবং তারপর পরীক্ষা করব যে container এ কোন লাইন ব্রেক আছে কিনা। যদি থাকে, তাহলে এটিকে একটি অ্যারেতে বিভক্ত করুন, এবং তারপর লাইনগুলির মধ্য দিয়ে পুনরাবৃত্তি করুন, controller.enqueue() কল করে পার্স করা লাইনগুলি পাঠান।
script.js - LineBreakTransformer.transform()
// CODELAB: Handle incoming chunk
this.container += chunk;
const lines = this.container.split('\r\n');
this.container = lines.pop();
lines.forEach(line => controller.enqueue(line));
স্ট্রিমটি বন্ধ হয়ে গেলে, আমরা কেবল enqueue ব্যবহার করে কন্টেইনারে থাকা অবশিষ্ট ডেটা ফ্লাশ করব।
script.js - LineBreakTransformer.flush()
// CODELAB: Flush the stream.
controller.enqueue(this.container);
অবশেষে, আমাদের নতুন LineBreakTransformer মাধ্যমে ইনকামিং স্ট্রিমটি পাইপ করতে হবে। আমাদের মূল ইনপুট স্ট্রিমটি শুধুমাত্র একটি TextDecoderStream এর মাধ্যমে পাইপ করা হয়েছিল, তাই আমাদের নতুন LineBreakTransformer মাধ্যমে এটি পাইপ করার জন্য একটি অতিরিক্ত pipeThrough যোগ করতে হবে।
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()));
চেষ্টা করে দেখুন
এখন, যখন আপনি micro:bit বোতামগুলির একটিতে চাপ দেবেন, তখন মুদ্রিত ডেটা একটি একক লাইনে ফেরত পাঠানো হবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- মাইক্রো:বিট LED ম্যাট্রিক্সে আপনার একটি হাসির আভা দেখা উচিত।
- মাইক্রো:বিটের বোতাম টিপুন এবং যাচাই করুন যে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাচ্ছেন:
JSONTransformer দিয়ে স্ট্রিম রূপান্তর করুন
আমরা readLoop এ স্ট্রিংটিকে JSON এ পার্স করার চেষ্টা করতে পারি, কিন্তু এর পরিবর্তে, আসুন একটি খুব সহজ JSON ট্রান্সফরমার তৈরি করি যা ডেটাটিকে JSON অবজেক্টে রূপান্তরিত করবে। যদি ডেটাটি বৈধ JSON না হয়, তাহলে যা এসেছে তা ফেরত দিন।
script.js - JSONTransformer.transform
// CODELAB: Attempt to parse JSON content
try {
controller.enqueue(JSON.parse(chunk));
} catch (e) {
controller.enqueue(chunk);
}
এরপর, LineBreakTransformer মধ্য দিয়ে যাওয়ার পর JSONTransformer এর মাধ্যমে স্ট্রিমটি পাইপ করুন। এটি আমাদের JSONTransformer সহজ রাখতে সাহায্য করে, কারণ আমরা জানি যে JSON শুধুমাত্র একটি লাইনেই পাঠানো হবে।
script.js - connect
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()))
.pipeThrough(new TransformStream(new JSONTransformer()));
চেষ্টা করে দেখুন
এখন, যখন আপনি micro:bit বোতামগুলির একটিতে চাপ দেবেন, তখন আপনি পৃষ্ঠায় [object Object] মুদ্রিত দেখতে পাবেন।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- মাইক্রো:বিট LED ম্যাট্রিক্সে আপনার একটি হাসির আভা দেখা উচিত।
- micro:bit এর বোতাম টিপুন এবং যাচাই করুন যে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাচ্ছেন:
বোতাম টিপলে সাড়া দেওয়া
মাইক্রো:বিট বোতাম টিপলে সাড়া দিতে, readLoop আপডেট করে পরীক্ষা করুন যে এটি যে ডেটা পেয়েছে তা button বৈশিষ্ট্যযুক্ত কোনও object কিনা। তারপর, বোতাম চাপা পরিচালনা করতে buttonPushed কল করুন।
script.js - readLoop()
const { value, done } = await reader.read();
if (value && value.button) {
buttonPushed(value);
} else {
log.textContent += value + '\n';
}
যখন একটি মাইক্রো:বিট বোতাম চাপা হবে, তখন LED ম্যাট্রিক্সের ডিসপ্লে পরিবর্তন হওয়া উচিত। ম্যাট্রিক্স সেট করতে নিম্নলিখিত কোডটি ব্যবহার করুন:
script.js - buttonPushed()
// CODELAB: micro:bit button press handler
if (butEvt.button === 'BTN1') {
divLeftBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_HAPPY);
sendGrid();
}
return;
}
if (butEvt.button === 'BTN2') {
divRightBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_SAD);
sendGrid();
}
}
চেষ্টা করে দেখুন
এখন, যখন আপনি মাইক্রো:বিট বোতামগুলির একটিতে চাপ দেবেন, তখন আপনার LED ম্যাট্রিক্সটি হয় খুশির মুখ অথবা দুঃখের মুখে পরিবর্তিত হবে।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন এ ক্লিক করুন।
- মাইক্রো:বিটস এলইডি ম্যাট্রিক্সে আপনার একটি হাসির আভা দেখা উচিত।
- মাইক্রো:বিটের বোতাম টিপুন এবং LED ম্যাট্রিক্স পরিবর্তন হয়েছে কিনা তা যাচাই করুন।
৮. সিরিয়াল পোর্ট বন্ধ করা
শেষ ধাপ হল ব্যবহারকারীর কাজ শেষ হয়ে গেলে পোর্টটি বন্ধ করার জন্য ডিসকানেক্ট কার্যকারিতা সংযুক্ত করা।
ব্যবহারকারী যখন সংযোগ/সংযোগ বিচ্ছিন্ন বোতামে ক্লিক করেন তখন পোর্টটি বন্ধ করুন
যখন ব্যবহারকারী "Connect / Disconnect" বোতামে ক্লিক করেন, তখন আমাদের সংযোগটি বন্ধ করতে হবে। যদি পোর্টটি ইতিমধ্যেই খোলা থাকে, তাহলে disconnect() কল করুন এবং UI আপডেট করুন যাতে বোঝা যায় যে পৃষ্ঠাটি আর সিরিয়াল ডিভাইসের সাথে সংযুক্ত নেই।
script.js - clickConnect()
// CODELAB: Add disconnect code here.
if (port) {
await disconnect();
toggleUIConnected(false);
return;
}
স্ট্রিম এবং পোর্ট বন্ধ করুন
disconnect ফাংশনে, আমাদের ইনপুট স্ট্রিম বন্ধ করতে হবে, আউটপুট স্ট্রিম বন্ধ করতে হবে এবং পোর্ট বন্ধ করতে হবে। ইনপুট স্ট্রিম বন্ধ করতে, reader.cancel() কল করুন। cancel কলটি অ্যাসিঙ্ক্রোনাস, তাই এটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করার জন্য আমাদের await ব্যবহার করতে হবে:
script.js - disconnect()
// CODELAB: Close the input stream (reader).
if (reader) {
await reader.cancel();
await inputDone.catch(() => {});
reader = null;
inputDone = null;
}
আউটপুট স্ট্রিম বন্ধ করতে, একটি writer নিন, close() কল করুন এবং outputDone অবজেক্টটি বন্ধ হওয়ার জন্য অপেক্ষা করুন:
script.js - disconnect()
// CODELAB: Close the output stream.
if (outputStream) {
await outputStream.getWriter().close();
await outputDone;
outputStream = null;
outputDone = null;
}
অবশেষে, সিরিয়াল পোর্টটি বন্ধ করুন এবং এটি বন্ধ হওয়ার জন্য অপেক্ষা করুন:
script.js - disconnect()
// CODELAB: Close the port.
await port.close();
port = null;
চেষ্টা করে দেখুন
এখন, আপনি ইচ্ছামত সিরিয়াল পোর্ট খুলতে এবং বন্ধ করতে পারেন।
- পৃষ্ঠাটি পুনরায় লোড করুন।
- সংযোগ বোতামে ক্লিক করুন।
- সিরিয়াল পোর্ট নির্বাচনকারী ডায়ালগে, BBC মাইক্রো:বিট ডিভাইসটি নির্বাচন করুন এবং সংযোগ করুন ক্লিক করুন।
- মাইক্রো:বিট LED ম্যাট্রিক্সে আপনার একটি হাসি দেখা উচিত।
- সংযোগ বিচ্ছিন্ন বোতাম টিপুন এবং যাচাই করুন যে LED ম্যাট্রিক্স বন্ধ হয়ে গেছে এবং কনসোলে কোনও ত্রুটি নেই।
৯. অভিনন্দন
অভিনন্দন! আপনি সফলভাবে আপনার প্রথম ওয়েব অ্যাপ তৈরি করেছেন যা ওয়েব সিরিয়াল API ব্যবহার করে।
ওয়েব সিরিয়াল এপিআই এবং ক্রোম টিম যে সমস্ত আকর্ষণীয় নতুন ওয়েব সক্ষমতা নিয়ে কাজ করছে তার সর্বশেষ তথ্যের জন্য https://goo.gle/fugu-api-tracker- এ নজর রাখুন।