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

تاريخ آخر تعديل: 2019-11-08

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

العناصر التي سيتم إنشاؤها

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

تنبيه: واجهة برمجة تطبيقات المنافذ التسلسلية قيد التطوير حاليًا وغير متاحة بشكل عام بعد. قد تتغيّر واجهة برمجة التطبيقات قبل توفّر واجهة برمجة التطبيقات بشكل عام.

ما ستتعرّف عليه

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

المتطلبات اللازمة

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

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

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

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

• Arduino Create
• أداة إعداد الإصدار التجريبي
• Espruino IDE
• MakeCode

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

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

تفعيل واجهة برمجة تطبيقات المنافذ التسلسلية على الويب

واجهة برمجة تطبيقات Web Serial API قيد التطوير حاليًا وتتوفّر فقط خلف علامة. يجب تفعيل العلامة #enable-experimental-web-platform-features في chrome://flags.

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

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

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

التحقّق مما إذا كانت واجهة برمجة تطبيقات Web Serial API متوافقة أم لا

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

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

script.js - DOMContentLoaded

// CODELAB: Add feature detection here.
if ('serial' in navigator) {
  const notSupported = document.getElementById('notSupported');
  notSupported.classList.add('hidden');
}

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

التجربة الآن

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

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

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

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

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

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 إلى فتح المنفذ. يلزمنا أيضًا توفير السرعة التي يمكننا من خلالها الاتصال بالجهاز التسلسلي. يستخدم جهاز Micro bit:BBC اتصال 9600 baud بين شريحة USB-serial والمعالج الرئيسي.

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

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

script.js - clickConnect()

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

التجربة الآن

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

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

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

من المفترض أن تظهر على صفحتك شيئًا مماثلاً لما يلي:

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

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

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

التجربة الآن

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

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

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

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

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

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

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

تحويل ساحات المشاركات باستخدام TransformStream

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

لمزيد من المعلومات، راجع مفاهيم واجهة برمجة تطبيقات MDN's.

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

تهانينا. لقد أنشأت بنجاح أول تطبيق ويب يستخدم واجهة برمجة تطبيقات المنافذ التسلسلية على الويب.

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

يمكنك مراقبة https://goo.gle/fugu-api-tracker على أحدث واجهة برمجة تطبيقات تسلسل الويب، وجميع إمكانات الويب الجديدة والمثيرة التي يعمل عليها فريق Chrome.