شروع به کار با Web Serial API

۱. مقدمه

آخرین به‌روزرسانی: 2020-07-21

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک صفحه وب خواهید ساخت که از API سریال وب برای تعامل با یک برد میکروبیت BBC برای نمایش تصاویر روی ماتریس LED 5x5 آن استفاده می‌کند. شما در مورد API سریال وب و نحوه استفاده از جریان‌های قابل خواندن، قابل نوشتن و تبدیل برای ارتباط با دستگاه‌های سریال از طریق مرورگر یاد خواهید گرفت.

آنچه یاد خواهید گرفت

• نحوه باز و بسته کردن پورت سریال وب
• نحوه استفاده از حلقه خواندن برای مدیریت داده‌ها از یک جریان ورودی
• نحوه ارسال داده از طریق یک جریان نوشتن

آنچه نیاز دارید

• یک برد BBC micro:bit با آخرین نسخه فریمور Espruino
• نسخه جدید کروم (۸۰ یا بالاتر)
• آشنایی با HTML، CSS، جاوا اسکریپت و ابزارهای توسعه کروم

ما تصمیم گرفتیم از میکرو:بیت برای این آزمایشگاه کد استفاده کنیم زیرا مقرون به صرفه است، ورودی‌ها (دکمه‌ها) و خروجی‌های کمی (صفحه نمایش LED 5x5) ارائه می‌دهد و می‌تواند ورودی‌ها و خروجی‌های بیشتری را فراهم کند. برای جزئیات بیشتر در مورد قابلیت‌های میکرو:بیت، به صفحه BBC micro:bit در سایت Espruino مراجعه کنید.

۲. درباره API سریال وب

API سریال وب راهی را برای وب‌سایت‌ها فراهم می‌کند تا با استفاده از اسکریپت‌ها، از یک دستگاه سریال بخوانند و در آن بنویسند. این API با فراهم کردن امکان ارتباط وب‌سایت‌ها با دستگاه‌های سریال، مانند میکروکنترلرها و چاپگرهای سه‌بعدی، پلی بین وب و دنیای فیزیکی ایجاد می‌کند.

نمونه‌های زیادی از نرم‌افزارهای کنترلی که با استفاده از فناوری وب ساخته می‌شوند، وجود دارد. برای مثال:

• ایجاد آردوینو
• پیکربندی بتافلایت
• اسپرینو IDE
• میک‌کد

در برخی موارد، این وب‌سایت‌ها از طریق یک برنامه عامل بومی که به صورت دستی توسط کاربر نصب می‌شود، با دستگاه ارتباط برقرار می‌کنند. در موارد دیگر، برنامه در یک برنامه بومی بسته‌بندی شده از طریق چارچوبی مانند Electron ارائه می‌شود. در موارد دیگر، کاربر ملزم به انجام یک مرحله اضافی مانند کپی کردن یک برنامه کامپایل شده به دستگاه با یک فلش درایو USB است.

با فراهم کردن ارتباط مستقیم بین سایت و دستگاهی که آن را کنترل می‌کند، می‌توان تجربه کاربری را بهبود بخشید.

۳. راه‌اندازی

کد را دریافت کنید

ما هر آنچه را که برای این آزمایشگاه کد نیاز دارید، در یک پروژه Glitch قرار داده‌ایم.

1. یک تب جدید در مرورگر باز کنید و به آدرس https://web-serial-codelab-start.glitch.me/ بروید.
2. برای ایجاد نسخه خودتان از پروژه اولیه، روی لینک Remix Glitch کلیک کنید.
3. روی دکمه‌ی «نمایش» کلیک کنید و سپس « در یک پنجره‌ی جدید» را انتخاب کنید تا کد خود را در عمل ببینید.

۴. یک اتصال سریال باز کنید

بررسی کنید که آیا 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);

این کد بررسی می‌کند که آیا سریال وب پشتیبانی می‌شود یا خیر. اگر پشتیبانی شود، این کد بنری را که می‌گوید سریال وب پشتیبانی نمی‌شود، پنهان می‌کند.

امتحانش کن

1. صفحه را بارگذاری کنید.
2. بررسی کنید که صفحه، بنر قرمز رنگی مبنی بر عدم پشتیبانی از سریال وب نشان ندهد.

پورت سریال را باز کنید

در مرحله بعد، باید پورت سریال را باز کنیم. مانند اکثر APIهای مدرن دیگر، API سریال وب ناهمزمان است. این امر مانع از مسدود شدن رابط کاربری هنگام انتظار ورودی می‌شود، اما این نیز مهم است زیرا داده‌های سریال ممکن است در هر زمانی توسط صفحه وب دریافت شوند و ما به راهی برای گوش دادن به آن نیاز داریم.

از آنجا که یک کامپیوتر ممکن است چندین دستگاه سریال داشته باشد، وقتی مرورگر سعی می‌کند یک پورت را درخواست کند، از کاربر می‌خواهد که دستگاه مورد نظر برای اتصال را انتخاب کند.

کد زیر را به پروژه خود اضافه کنید:

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 به سریال و پردازنده اصلی استفاده می‌کند.

همچنین بیایید دکمه اتصال را وصل کنیم و کاری کنیم که وقتی کاربر روی آن کلیک می‌کند، connect() را فراخوانی کند.

کد زیر را به پروژه خود اضافه کنید:

script.js - clickConnect()

// CODELAB: Add connect code here.
await connect();

امتحانش کن

پروژه ما اکنون حداقل امکانات لازم برای شروع را دارد. کلیک بر روی دکمه اتصال، کاربر را وادار می‌کند تا دستگاه سریال مورد نظر برای اتصال را انتخاب کند و سپس به میکروبیت متصل می‌شود.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. در این برگه، باید نمادی را ببینید که نشان می‌دهد به یک دستگاه سریال متصل شده‌اید:

نکته: اگر micro:bit در انتخابگر ظاهر نشد، با فشار دادن دکمه تنظیم مجدد کنار پورت USB در پشت دستگاه، آن را مجدداً تنظیم کنید.

یک جریان ورودی برای دریافت داده‌ها از پورت سریال تنظیم کنید

پس از برقراری اتصال، باید یک جریان ورودی و یک خواننده برای خواندن داده‌ها از دستگاه تنظیم کنیم. ابتدا، جریان قابل خواندن را با فراخوانی 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;
  }
}

امتحانش کن

پروژه ما اکنون می‌تواند به دستگاه متصل شود و هر داده‌ای که از دستگاه دریافت شود را به عنصر گزارش اضافه می‌کند.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. شما باید لوگوی Espruino را ببینید:

نکته: این ممکن است در سیستم‌عامل کروم و لینوکس خراب باشد، زیرا یک سرویس سیستمی وجود دارد که سعی می‌کند با دستگاه ارتباط برقرار کند، زیرا سیستم‌عامل فکر می‌کند دستگاه یک مودم است. می‌توانید این خرابی را نادیده بگیرید، اما ممکن است عجیب به نظر برسد. به همین دلیل است که ارسال Ctrl-C به عنوان اولین کار مهم است.

تنظیم یک جریان خروجی برای ارسال داده به پورت سریال

ارتباط سریال معمولاً دو طرفه است. علاوه بر دریافت داده از پورت سریال، ما همچنین می‌خواهیم داده را به پورت ارسال کنیم. مانند جریان ورودی، ما فقط متن را از طریق جریان خروجی به میکروبیت ارسال خواهیم کرد.

ابتدا، یک جریان رمزگذار متن ایجاد کنید و جریان را به 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;

وقتی برد BBC micro:bit از طریق سریال به فریمور Espruino متصل می‌شود، به عنوان حلقه خواندن-ارزیابی-چاپ جاوااسکریپت (REPL) عمل می‌کند، مشابه آنچه در پوسته Node.js دریافت می‌کنید. در مرحله بعد، باید روشی برای ارسال داده به جریان ارائه دهیم. کد زیر یک تابع writer از جریان خروجی دریافت می‌کند و سپس از 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);');

امتحانش کن

اکنون پروژه ما می‌تواند داده‌ها را از میکروبیت ارسال و دریافت کند. بیایید بررسی کنیم که آیا می‌توانیم به درستی دستور را ارسال کنیم:

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. تب Console را در Chrome DevTools باز کنید و عبارت writeToStream('console.log("yes")');

شما باید چیزی شبیه به این را روی صفحه چاپ شده ببینید:

۵. ماتریس LED را کنترل کنید

رشته شبکه ماتریسی را بسازید

برای کنترل ماتریس LED روی میکروبیت، باید تابع show() را فراخوانی کنیم. این متد، گرافیک را روی صفحه نمایش LED داخلی 5x5 نمایش می‌دهد. این تابع یک عدد دودویی یا یک رشته دریافت می‌کند.

ما روی چک‌باکس‌ها تکرار می‌کنیم و آرایه‌ای از ۱ها و ۰ها ایجاد می‌کنیم که نشان می‌دهد کدام تیک خورده و کدام تیک نخورده است. سپس باید آرایه را معکوس کنیم، زیرا ترتیب چک‌باکس‌های ما برعکس ترتیب 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();

همچنین بیایید وقتی میکرو:بیت برای اولین بار متصل می‌شود، شبکه را مجدداً تنظیم کنیم تا یک چهره شاد نشان دهد. تابع drawGrid() از قبل ارائه شده است. این تابع مشابه sendGrid() عمل می‌کند؛ آرایه‌ای از ۱ها و ۰ها را می‌گیرد و کادرهای انتخاب را به صورت مناسب بررسی می‌کند.

script.js - clickConnect()

// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();

امتحانش کن

حالا، وقتی صفحه اتصالی به micro:bit باز می‌کند، یک چهره شاد ارسال می‌شود. کلیک روی کادرهای انتخاب، نمایش روی ماتریس LED را به‌روزرسانی می‌کند.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. باید لبخندی را روی ماتریس LED میکرو:بیت ببینید.
5. با تغییر دادن کادرهای انتخاب، الگوی متفاوتی روی ماتریس LED رسم کنید.

۶. دکمه‌های میکرو:بیت را وصل کنید

یک رویداد watch روی دکمه‌های micro:bit اضافه کنید

دو دکمه روی میکرو:بیت وجود دارد، یکی در دو طرف ماتریس 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 روی برد micro:bit) را وصل کنیم.

script.js - clickConnect()

// CODELAB: Initialize micro:bit buttons.
watchButton('BTN1');
watchButton('BTN2');

امتحانش کن

علاوه بر نمایش چهره‌ای شاد هنگام اتصال، فشردن هر یک از دکمه‌های روی micro:bit متنی را به صفحه اضافه می‌کند که نشان می‌دهد چه دکمه‌ای فشرده شده است. به احتمال زیاد، هر کاراکتر در خط خودش خواهد بود.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. باید لبخندی روی ماتریس LED میکرو:بیت‌ها ببینید.
5. دکمه‌های روی میکرو:بیت را فشار دهید و تأیید کنید که متن جدید را به صفحه با جزئیات دکمه فشرده شده اضافه می‌کند.

۷. از یک جریان تبدیل برای تجزیه داده‌های ورودی استفاده کنید

نکته: اگر با جریان‌ها (streams) آشنا نیستید، مفاهیم API جریان‌های MDN را بررسی کنید. این آزمایشگاه کد، تنها بخش کوچکی از مفاهیم جریان‌ها و مدیریت جریان‌ها را شرح می‌دهد.

مدیریت اولیه جریان

وقتی یکی از دکمه‌های میکروبیت فشرده می‌شود، میکروبیت داده‌ها را از طریق یک جریان به پورت سریال ارسال می‌کند. جریان‌ها بسیار مفید هستند، اما می‌توانند چالش‌برانگیز نیز باشند زیرا لزوماً همه داده‌ها را یکجا دریافت نخواهید کرد و ممکن است به صورت دلخواه به قطعات کوچک‌تر تقسیم شوند.

برنامه در حال حاضر جریان ورودی را به محض رسیدن (در readLoop ) چاپ می‌کند. در بیشتر موارد، هر کاراکتر در خط خودش است، اما این خیلی مفید نیست. در حالت ایده‌آل، جریان باید به خطوط جداگانه تجزیه شود و هر پیام به عنوان خط خودش نمایش داده شود.

تبدیل جریان‌ها با TransformStream

برای انجام این کار، می‌توانیم از یک جریان تبدیل ( TransformStream ) استفاده کنیم که تجزیه جریان ورودی و بازگرداندن داده‌های تجزیه‌شده را امکان‌پذیر می‌سازد. یک جریان تبدیل می‌تواند بین منبع جریان (در این مورد، micro:bit) و هر چیزی که جریان را مصرف می‌کند (در این مورد readLoop ) قرار گیرد و می‌تواند قبل از مصرف نهایی، یک تبدیل دلخواه اعمال کند. آن را مانند یک خط مونتاژ در نظر بگیرید: با پایین آمدن یک ویجت در خط، هر مرحله در خط، ویجت را تغییر می‌دهد، به طوری که تا زمانی که به مقصد نهایی خود می‌رسد، یک ویجت کاملاً کاربردی است.

برای اطلاعات بیشتر، به مفاهیم API مربوط به Streams در MDN مراجعه کنید.

تبدیل جریان با 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 جدید pipe کنیم. جریان ورودی اصلی ما فقط از طریق TextDecoderStream pipe می‌شد، بنابراین باید یک pipeThrough اضافی اضافه کنیم تا آن را از طریق LineBreakTransformer جدیدمان pipe کنیم.

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 را فشار می‌دهید، داده‌های چاپ شده باید در یک خط نمایش داده شوند.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. باید لبخندی را روی ماتریس LED میکرو:بیت ببینید.
5. دکمه‌های روی میکرو:بیت را فشار دهید و مطمئن شوید که چیزی شبیه به تصویر زیر می‌بینید:

تبدیل جریان با 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] را روی صفحه ببینید.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. باید لبخندی را روی ماتریس LED میکرو:بیت ببینید.
5. دکمه‌های روی میکرو:بیت را فشار دهید و مطمئن شوید که چیزی شبیه به تصویر زیر می‌بینید:

پاسخ به فشردن دکمه‌ها

برای پاسخ به فشردن دکمه‌های میکروبیتی، readLoop را به‌روزرسانی کنید تا بررسی کنید که آیا داده دریافتی، object با ویژگی button است یا خیر. سپس، 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 شما باید به یک چهره شاد یا غمگین تبدیل شود.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. باید لبخندی روی ماتریس LED میکرو:بیت‌ها ببینید.
5. دکمه‌های روی میکروبیت را فشار دهید و مطمئن شوید که ماتریس LED تغییر می‌کند.

۸. بستن پورت سریال

مرحله آخر، اتصال قابلیت قطع ارتباط برای بستن پورت پس از اتمام کار کاربر است.

وقتی کاربر روی دکمه اتصال/قطع اتصال کلیک می‌کند، پورت را ببندد

وقتی کاربر روی دکمه‌ی اتصال / قطع اتصال کلیک می‌کند، باید اتصال را ببندیم. اگر پورت از قبل باز است، disconnect() را فراخوانی کنید و رابط کاربری را به‌روزرسانی کنید تا نشان دهد که صفحه دیگر به دستگاه سریال متصل نیست.

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;

امتحانش کن

حالا می‌توانید پورت سریال را به دلخواه باز و بسته کنید.

1. صفحه را دوباره بارگذاری کنید.
2. روی دکمه اتصال کلیک کنید.
3. در پنجره انتخاب پورت سریال، دستگاه BBC micro:bit را انتخاب کرده و روی Connect کلیک کنید.
4. شما باید لبخندی را که روی ماتریس LED میکرو:بیت نشان داده شده است، ببینید
5. دکمه قطع اتصال را فشار دهید و مطمئن شوید که ماتریس LED خاموش می‌شود و هیچ خطایی در کنسول وجود ندارد.

۹. تبریک

تبریک! شما با موفقیت اولین برنامه وب خود را که از API سریال وب استفاده می‌کند، ساختید.

۳۰۰ نفر اولی که این codelab را در اجلاس توسعه‌دهندگان کروم ۲۰۱۹ به پایان برسانند، یک برد BBC micro:bit دریافت خواهند کرد . برای دریافت برد خود، پروژه خود را با تمام جزئیات، از جمله کادرهای انتخاب، دکمه‌های روی برد و قابلیت اتصال/قطع اتصال، به کارکنان codelab نشان دهید.

برای اطلاع از جدیدترین اخبار مربوط به API سریال وب و سایر قابلیت‌های جدید و هیجان‌انگیز وب که تیم کروم روی آن‌ها کار می‌کند، به آدرس https://goo.gle/fugu-api-tracker مراجعه کنید.