بدء استخدام Web Serial API

1. مقدمة

تاريخ آخر تعديل: 2020-07-21

ما ستنشئه

في هذا الدرس العملي، ستنشئ صفحة ويب تستخدم Web Serial API للتفاعل مع لوحة BBC micro:bit لعرض الصور على مصفوفة LED بحجم 5x5. ستتعرّف على Web Serial API وكيفية استخدام عمليات القراءة والكتابة والتحويل للتواصل مع الأجهزة التسلسلية من خلال المتصفّح.

ما ستتعلمه

• كيفية فتح منفذ Web Serial وإغلاقه
• كيفية استخدام حلقة قراءة للتعامل مع البيانات من مصدر إدخال
• كيفية إرسال البيانات عبر مصدر كتابة

المتطلبات

• لوحة BBC micro:bit مزوّدة بأحدث إصدار من البرامج الثابتة Espruino
• إصدار حديث من Chrome (الإصدار 80 أو الإصدارات الأحدث)
• معرفة بلغات HTML وCSS وJavaScript و"أدوات مطوّري البرامج في Chrome"

اخترنا استخدام micro:bit في هذا الدرس التطبيقي حول الترميز لأنّه ميسور التكلفة، ويتضمّن بعض المدخلات (أزرار) والمخرجات (شاشة LED بحجم 5x5)، ويمكنه توفير مدخلات ومخرجات إضافية. يمكنك الاطّلاع على صفحة BBC micro:bit على موقع Espruino الإلكتروني لمعرفة تفاصيل حول إمكانات micro:bit.

2. لمحة عن Web Serial API

توفّر Web Serial API طريقة للمواقع الإلكترونية للقراءة من جهاز تسلسلي والكتابة إليه باستخدام النصوص البرمجية. تتيح واجهة برمجة التطبيقات هذه التواصل بين الويب والعالم المادي من خلال السماح للمواقع الإلكترونية بالتواصل مع الأجهزة التسلسلية، مثل وحدات التحكّم الدقيقة وطابعات ثلاثية الأبعاد.

هناك العديد من الأمثلة على برامج التحكّم التي تم إنشاؤها باستخدام تكنولوجيا الويب. على سبيل المثال:

• Arduino Create
• Betaflight Configurator
• Espruino IDE
• MakeCode

في بعض الحالات، تتواصل هذه المواقع الإلكترونية مع الجهاز من خلال تطبيق وكيل أصلي يثبّته المستخدم يدويًا. في حالات أخرى، يتم توفير التطبيق في شكل تطبيق أصلي مجمَّع من خلال إطار عمل مثل Electron. في حالات أخرى، يُطلب من المستخدم تنفيذ خطوة إضافية، مثل نسخ تطبيق مجمَّع إلى الجهاز باستخدام محرك أقراص USB خارجي.

يمكن تحسين تجربة المستخدم من خلال توفير اتصال مباشر بين الموقع الإلكتروني والجهاز الذي يتحكّم فيه.

3- الإعداد

الحصول على الرمز

لقد وضعنا كل ما تحتاج إليه لهذا الدرس التطبيقي في مشروع Glitch.

1. افتح علامة تبويب متصفّح جديدة وانتقِل إلى https://web-serial-codelab-start.glitch.me/.
2. انقر على الرابط Remix Glitch لإنشاء نسختك الخاصة من المشروع الأوّلي.
3. انقر على الزر عرض، ثم اختَر في نافذة جديدة لمشاهدة الرمز أثناء العمل.

4. فتح اتصال تسلسلي

التحقّق مما إذا كانت Web Serial API متوافقة

أول ما عليك فعله هو التحقّق مما إذا كانت Web Serial API متوافقة مع المتصفّح الحالي. لإجراء ذلك، تحقَّق مما إذا كان serial يقع ضمن navigator.

في حدث DOMContentLoaded، أضِف الرمز التالي إلى مشروعك:

script.js - DOMContentLoaded

// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);

يتحقّق هذا الاختبار مما إذا كان Web Serial متاحًا. إذا كان الأمر كذلك، يخفي هذا الرمز الإعلان البانر الذي يشير إلى أنّ Web Serial غير متوافق.

جرِّبه

1. حمِّل الصفحة.
2. تأكَّد من أنّ الصفحة لا تعرض بانر أحمر يشير إلى أنّ Web Serial غير متوافق.

فتح المنفذ التسلسلي

بعد ذلك، علينا فتح المنفذ التسلسلي. مثل معظم واجهات برمجة التطبيقات الحديثة الأخرى، فإنّ Web Serial 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 اتصالاً بسرعة 9600 باود بين شريحة USB-to-serial والمعالج الرئيسي.

لنربط أيضًا زر الاتصال ونطلب connect() عندما ينقر المستخدم عليه.

أضِف الرمز التالي إلى مشروعك:

script.js - clickConnect()

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

جرِّبه

يتضمّن مشروعنا الآن الحد الأدنى المطلوب للبدء. يؤدي النقر على الزر ربط إلى مطالبة المستخدم باختيار الجهاز التسلسلي الذي يريد ربطه، ثم يتم ربط الجهاز بجهاز micro:bit.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربّع الحوار "أداة اختيار المنفذ التسلسلي"، اختَر جهاز BBC micro:bit وانقر على ربط.
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 وانقر على ربط.
4. من المفترض أن يظهر لك شعار Espruino:

ملاحظة: قد يكون هذا الملف تالفًا على ChromeOS وLinux لأنّ هناك خدمة تابعة لنظام التشغيل تحاول التواصل مع الجهاز لأنّ نظام التشغيل يعتقد أنّ الجهاز هو مودم. يمكنك تجاهل هذا التلف، ولكن قد يبدو غريبًا. وهذا أحد الأسباب التي تجعل من المهم إرسال Ctrl-C كأول إجراء.

إعداد مصدر بيانات لإرسال البيانات إلى المنفذ التسلسلي

عادةً ما يكون الاتصال التسلسلي ثنائي الاتجاه. بالإضافة إلى تلقّي البيانات من المنفذ التسلسلي، نريد أيضًا إرسال البيانات إلى المنفذ. وكما هو الحال مع دفق الإدخال، سنرسل النص فقط عبر دفق الإخراج إلى micro:bit.

أولاً، أنشئ بثًا مباشرًا باستخدام برنامج ترميز نصي وأرسِل البث إلى 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 كـ حلقة قراءة-تقييم-طباعة (REPL) في JavaScript، على غرار ما تحصل عليه في واجهة 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. لنتأكّد من إمكانية إرسال أمر بشكل صحيح:

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربّع الحوار "أداة اختيار المنفذ التسلسلي"، اختَر جهاز BBC micro:bit وانقر على ربط.
4. افتح علامة التبويب وحدة التحكّم في "أدوات مطوّري البرامج في Chrome"، واكتب writeToStream('console.log("yes")');

من المفترض أن يظهر لك ما يلي على الصفحة:

5- التحكّم في مصفوفة LED

إنشاء سلسلة شبكة المصفوفة

للتحكّم في مصفوفة LED على micro:bit، علينا استدعاء show(). تعرض هذه الطريقة الرسومات على شاشة LED المدمجة بحجم 5×5. تأخذ هذه السمة رقمًا ثنائيًا أو سلسلة.

سنكرّر مربّعات الاختيار وننشئ مصفوفة من الرقمين 1 و0 للإشارة إلى المربّعات المحدّدة وغير المحدّدة. بعد ذلك، علينا عكس ترتيب المصفوفة لأنّ ترتيب مربّعات الاختيار هو عكس ترتيب مصابيح LED في المصفوفة. بعد ذلك، نحول المصفوفة إلى سلسلة وننشئ الأمر لإرساله إلى micro:bit.

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()، فهي تأخذ صفيفًا من 1 و0، وتضع علامات في مربّعات الاختيار حسب الاقتضاء.

script.js - clickConnect()

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

جرِّبه

الآن، عندما تفتح الصفحة اتصالاً بجهاز micro:bit، سترسل رمز وجه مبتسم. سيؤدي النقر على مربّعات الاختيار إلى تعديل العرض على مصفوفة LED.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربّع الحوار "أداة اختيار المنفذ التسلسلي"، اختَر جهاز BBC micro:bit وانقر على ربط.
4. من المفترض أن تظهر ابتسامة على مصفوفة مصابيح LED في micro:bit.
5. ارسم نمطًا مختلفًا على مصفوفة LED من خلال تغيير مربّعات الاختيار.

6. ربط أزرار micro:bit

إضافة حدث مراقبة على أزرار micro:bit

يحتوي جهاز 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 وانقر على ربط.
4. من المفترض أن ترى ابتسامة معروضة على مصفوفة مصابيح LED في micro:bit.
5. اضغط على الأزرار في micro:bit وتأكَّد من أنّه يتم إلحاق نص جديد بالصفحة يتضمّن تفاصيل الزر الذي تم الضغط عليه.

7. استخدام مصدر تحويل لتحليل البيانات الواردة

ملاحظة: إذا كانت البثوث جديدة عليك، يمكنك الاطّلاع على مفاهيم واجهة برمجة التطبيقات الخاصة بالبثوث في شبكة مطوّلي Mozilla. لا يتناول هذا الدرس التطبيقي حول الترميز سوى أساسيات التعامل مع عمليات البث.

التعامل الأساسي مع البث

عند الضغط على أحد أزرار micro:bit، يرسل الجهاز البيانات إلى المنفذ التسلسلي من خلال مصدر بيانات. تُعدّ عمليات البث مفيدة جدًا، ولكن يمكن أن تشكّل تحديًا أيضًا لأنّك لن تحصل بالضرورة على جميع البيانات في وقت واحد، وقد يتم تقسيمها بشكل عشوائي.

يطبع التطبيق حاليًا البيانات الواردة كما تصل (في readLoop). وفي معظم الحالات، يكون كل حرف في سطر منفصل، ولكن هذا ليس مفيدًا جدًا. يُفضّل أن يتم تحليل البث إلى أسطر فردية، وأن يتم عرض كل رسالة في سطر خاص بها.

تحويل الفيديوهات باستخدام TransformStream

لإجراء ذلك، يمكننا استخدام دفق تحويل ( TransformStream)، ما يتيح تحليل الدفق الوارد وعرض البيانات التي تم تحليلها. يمكن أن يكون هناك بث تحويل بين مصدر البث (في هذه الحالة، micro:bit) وأي شيء يستهلك البث (في هذه الحالة readLoop)، ويمكنه تطبيق عملية تحويل عشوائية قبل أن يتم استهلاكه نهائيًا. يمكنك التفكير في الأمر على أنّه خط تجميع: عندما يصل عنصر واجهة مستخدم إلى نهاية الخط، يكون قد تم تعديله في كل خطوة من خطوات الخط، وبالتالي يكون عنصر واجهة مستخدم يعمل بكامل طاقته.

لمزيد من المعلومات، يُرجى الاطّلاع على مفاهيم واجهة برمجة التطبيقات Streams في شبكة مطوّلي Mozilla.

تحويل البث باستخدام 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 فقط، لذا علينا إضافة pipeThrough أخرى لمعالجته من خلال LineBreakTransformer الجديدة.

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 وانقر على ربط.
4. من المفترض أن تظهر ابتسامة على مصفوفة مصابيح LED في micro:bit.
5. اضغط على الأزرار في micro:bit وتأكَّد من ظهور شيء مشابه لما يلي:

تحويل البث باستخدام JSONTransformer

يمكننا محاولة تحليل السلسلة إلى JSON في readLoop، ولكن بدلاً من ذلك، لننشئ محوّلاً بسيطًا جدًا لتنسيق JSON يحوّل البيانات إلى عنصر JSON. إذا لم تكن البيانات بتنسيق JSON صالح، ما عليك سوى عرض البيانات الواردة.

script.js - JSONTransformer.transform

// CODELAB: Attempt to parse JSON content
try {
  controller.enqueue(JSON.parse(chunk));
} catch (e) {
  controller.enqueue(chunk);
}

بعد ذلك، مرِّر البث عبر JSONTransformer بعد أن يمر عبر LineBreakTransformer. يتيح لنا ذلك إبقاء 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 وانقر على ربط.
4. من المفترض أن تظهر ابتسامة على مصفوفة مصابيح LED في micro:bit.
5. اضغط على الأزرار في micro:bit، وتأكَّد من ظهور شيء مشابه لما يلي:

الاستجابة للضغطات على الأزرار

للردّ على ضغطات أزرار micro:bit، عدِّل readLoop للتحقّق مما إذا كانت البيانات التي تلقّاها هي object تتضمّن السمة button. بعد ذلك، استدعِ الدالة buttonPushed للتعامل مع الضغط على الزر.

script.js - readLoop()

const { value, done } = await reader.read();
if (value && value.button) {
  buttonPushed(value);
} else {
  log.textContent += value + '\n';
}

عند الضغط على أحد أزرار micro:bit، يجب أن يتغيّر العرض على مصفوفة 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();
  }
}

جرِّبه

الآن، عند الضغط على أحد أزرار micro:bit، من المفترض أن تتغيّر مصفوفة LED إلى وجه سعيد أو وجه حزين.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربّع الحوار "أداة اختيار المنفذ التسلسلي"، اختَر جهاز BBC micro:bit وانقر على ربط.
4. من المفترض أن ترى ابتسامة معروضة على مصفوفة مصابيح LED في micro:bit.
5. اضغط على الأزرار في micro:bit، وتأكَّد من تغيُّر مصفوفة LED.

8. إغلاق المنفذ التسلسلي

الخطوة الأخيرة هي ربط وظيفة قطع الاتصال لإغلاق المنفذ عند انتهاء المستخدم من استخدامه.

إغلاق المنفذ عندما ينقر المستخدم على الزر "ربط/قطع الاتصال"

عندما ينقر المستخدم على الزر ربط/إلغاء الربط، علينا إغلاق الاتصال. إذا كان المنفذ مفتوحًا، استدعِ 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 وانقر على ربط.
4. من المفترض أن ترى ابتسامة معروضة على مصفوفة مصابيح LED في micro:bit
5. انقر على الزر قطع الاتصال وتأكَّد من إيقاف مصفوفة LED ومن عدم ظهور أي أخطاء في وحدة التحكّم.

9- تهانينا

تهانينا! لقد أنشأت بنجاح أول تطبيق ويب يستخدم Web Serial API.

سيحصل أول 300 شخص ينهون هذا الدرس التطبيقي حول الترميز في "قمة مطوّري البرامج من Chrome" لعام 2019 على لوحة BBC micro:bit ليأخذوها معهم إلى المنزل. للحصول على لوحة، عليك عرض مشروعك على موظفي Codelab مع التأكّد من أنّ كل شيء يعمل، بما في ذلك مربّعات الاختيار وأزرار الإعداد ووظيفة الربط/إلغاء الربط.

يمكنك متابعة https://goo.gle/fugu-api-tracker للاطّلاع على آخر الأخبار حول Web Serial API وجميع إمكانات الويب الجديدة الرائعة الأخرى التي يعمل عليها فريق Chrome.