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

1. مقدمة

تاريخ آخر تعديل: 21/7/2020

ما الذي ستنشئه

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

المعلومات التي ستطّلع عليها

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

المتطلبات

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

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

2. لمحة عن Web Serial API

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

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

• Arduino Create
• الإصدار التجريبي من Configurator
• Espruino IDE
• MakeCode

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

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

3- بدء الإعداد

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

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

1. افتح علامة تبويب متصفِّح جديدة وانتقِل إلى https://web-serial-codelab-start.glitch.me/.
2. انقر على رابط رمز خلل في إنشاء الريمكس لإنشاء نسختك الخاصة من مشروع المبتدئين.
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);

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

التجربة الآن

1. حمِّل الصفحة.
2. تحقَّق من أنّ الصفحة لا تعرض بانر أحمر يذكر أنّ "سلسلة الويب" غير متاحة.

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

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

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

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

script.js - clickConnect()

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

التجربة الآن

يمتلك مشروعنا الآن الحد الأدنى من الحد الأدنى للبدء. يطلب النقر على الزر اتصال من المستخدم اختيار الجهاز التسلسلي للاتصال به، ثم الاتصال بوحدة الماكرو:بت.

1. إعادة تحميل الصفحة
2. انقر على الزر ربط.
3. في مربع حوار منتقي المنافذ التسلسلية، اختَر جهاز BBC Micro:bit وانقر على Connect (ربط).
4. في علامة التبويب، من المفترض أن يظهر لك رمز يشير إلى اتصالك بجهاز تسلسلي:

نصيحة: إذا لم يظهر ميكرو:بت في أداة الاختيار، جرِّب إعادة ضبط الجهاز عن طريق الضغط على زر إعادة الضبط بجانب منفذ 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:

ملاحظة: قد يكون هذا تالفًا على نظامَي التشغيل Chrome و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 كحلقة قراءة-eval-print لـ 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);');

التجربة الآن

يستطيع مشروعنا الآن إرسال البيانات واستلامها من وحدات بت الصغيرة. بعد ذلك، سنتحقّق من إمكانية إرسال الأمر بشكل صحيح:

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

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

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

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

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

سنكرّر مربّعات الاختيار وننشئ مصفوفة من 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()؛ يستغرق صفيفًا من 1s و0s، ويحدد مربعات الاختيار حسب الحاجة.

script.js - clickConnect()

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

التجربة الآن

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

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

6- ربط أزرار الميكرو:بت

إضافة حدث مشاهدة على أزرار 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');

التجربة الآن

بالإضافة إلى إظهار وجه مبتسم عند الاتصال، سيؤدي الضغط على أي من الزرّين في الجزء الصغير:بت إلى إضافة نص إلى الصفحة يشير إلى الزر الذي تم الضغط عليه. على الأرجح، سيكون كل حرف في سطر منفصل.

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

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

نصيحة: إذا كانت أحداث البث جديدة بالنسبة إليك، اطّلِع على مفاهيم Streams API من MDN. يساعد هذا الدرس التطبيقي في الترميز قسم "أحداث البث" وكيفية معالجته.

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

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

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

تغيير أحداث البث باستخدام TransformStream

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

لمزيد من المعلومات، يُرجى الاطّلاع على مفاهيم Streams API من 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 الجديد. تم توجيه مصدر البيانات الأصلي المُدخَل في 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 وانقر على Connect (ربط).
4. من المفترض أن تظهر الابتسامة على مصفوفة LED في وحدات صغيرة:بت.
5. اضغط على الأزرار على وحدة الماكرو (ميكرو:بت) وتأكد من أنك ترى شيئًا كالتالي:

تحويل ساحة المشاركات باستخدام 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 وانقر على Connect (ربط).
4. من المفترض أن تظهر الابتسامة على مصفوفة LED في وحدات صغيرة:بت.
5. اضغط على الأزرار على الجزء المصغر، وتأكد من أنك ترى شيئًا كالتالي:

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

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

9. تهانينا

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

سيحصل أول 300 شخص يكملون هذا الدرس التطبيقي في Chrome Dev Summit في 2019 على لوحة وحدات بت صغيرة من BBC ليأخذونها في منازلهم. للحصول على اللوحة، عليك أن تُظهر لموظفي الدرس التطبيقي حول الترميز مشروعك مع كل شيء يعمل، بما في ذلك مربّعات الاختيار والأزرار الداخلية ووظيفة الاتصال/قطع الاتصال.

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