Trang này được dịch bởi Cloud Translation API.

Bắt đầu sử dụng Web Serial API

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 21 tháng 07 năm 2020

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ xây dựng một trang web sử dụng Web Serial API để tương tác với bảng BBC micro:bit để hiển thị hình ảnh trên ma trận LED 5x5. Bạn sẽ tìm hiểu về Web Serial API cũng như cách sử dụng luồng có thể đọc, có thể ghi và biến đổi để giao tiếp với thiết bị nối tiếp thông qua trình duyệt.

81167ab7c01d353d.pngS

Kiến thức bạn sẽ học được

Cách mở và đóng cổng Web Serial
Cách sử dụng vòng lặp đọc để xử lý dữ liệu từ luồng đầu vào
Cách gửi dữ liệu ra ngoài qua luồng ghi

Bạn cần có

Bảng BBC micro:bit với chương trình cơ sở mới nhất của Espruino
Phiên bản Chrome gần đây (80 trở lên)
Có kiến thức về HTML, CSS, JavaScript và Công cụ của Chrome cho nhà phát triển

Chúng tôi đã chọn sử dụng micro:bit cho lớp học lập trình này vì nó có giá cả phải chăng, cung cấp một vài đầu vào (nút) và đầu ra (màn hình LED 5x5), đồng thời có thể cung cấp thêm đầu vào và đầu ra. Hãy xem trang micro:bit củaBBC trên trang web Espruino để biết chi tiết về chức năng của micro:bit.

2. Giới thiệu về Web Serial API

Web Serial API cung cấp một cách để các trang web đọc và ghi vào thiết bị nối tiếp có tập lệnh. API kết nối web và thế giới thực bằng cách cho phép các trang web giao tiếp với thiết bị nối tiếp, chẳng hạn như bộ vi điều khiển và máy in 3D.

Có nhiều ví dụ về phần mềm điều khiển được xây dựng bằng công nghệ web. Ví dụ:

Trong một số trường hợp, các trang web này giao tiếp với thiết bị thông qua một ứng dụng tác nhân gốc do người dùng cài đặt theo cách thủ công. Trong các trường hợp khác, ứng dụng được phân phối trong một ứng dụng gốc đóng gói thông qua một khung như Electron. Trong các trường hợp khác, người dùng bắt buộc phải thực hiện một bước bổ sung, chẳng hạn như sao chép ứng dụng đã biên dịch vào thiết bị có ổ USB flash.

Bạn có thể cải thiện trải nghiệm người dùng bằng cách cung cấp hoạt động giao tiếp trực tiếp giữa trang web và thiết bị mà trang web đang kiểm soát.

3. Thiết lập

Lấy mã

Chúng tôi đã đưa mọi thứ bạn cần cho lớp học lập trình này vào một dự án Glitch.

Mở một thẻ trình duyệt mới rồi truy cập https://web-serial-codelab-start.glitch.me/.
Nhấp vào đường liên kết Phối lại trục trặc để tạo phiên bản dự án khởi đầu của riêng bạn.
Nhấp vào nút Show (Hiển thị), sau đó chọn In a New Window (Trong cửa sổ mới) để xem mã hoạt động.

4. Mở một kết nối nối tiếp

Kiểm tra xem API Web Serial có được hỗ trợ hay không

Việc đầu tiên cần làm là kiểm tra xem Web Serial API có được hỗ trợ trong trình duyệt hiện tại hay không. Để làm việc đó, hãy kiểm tra xem serial có trong navigator hay không.

Trong sự kiện DOMContentLoaded, hãy thêm mã sau vào dự án:

script.js - DOMContentLoaded

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

Thao tác này sẽ kiểm tra xem Serial Web Serial có được hỗ trợ hay không. Nếu đúng như vậy, mã này sẽ ẩn biểu ngữ cho biết rằng Web Serial không được hỗ trợ.

Thử nào

Tải trang.
Xác minh rằng trang không hiển thị biểu ngữ màu đỏ cho biết rằng Web Serial không được hỗ trợ.

Mở cổng nối tiếp

Tiếp theo, chúng ta cần mở cổng nối tiếp. Giống như hầu hết các API hiện đại khác, Web Serial API không đồng bộ. Thao tác này ngăn giao diện người dùng chặn khi chờ dữ liệu đầu vào, nhưng điều này cũng rất quan trọng vì trang web có thể nhận được dữ liệu nối tiếp bất cứ lúc nào và chúng ta cần có một cách để theo dõi dữ liệu đó.

Vì một máy tính có thể có nhiều thiết bị nối tiếp, nên khi trình duyệt cố gắng yêu cầu một cổng, trình duyệt sẽ nhắc người dùng chọn thiết bị cần kết nối.

Thêm mã sau vào dự án của bạn:

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 });

Lệnh gọi requestPort sẽ nhắc người dùng về thiết bị mà họ muốn kết nối. Nếu gọi port.open, cổng sẽ mở ra. Chúng ta cũng cần cung cấp tốc độ mà chúng ta muốn giao tiếp với thiết bị nối tiếp. BBC micro:bit sử dụng kết nối tốc độ 9600 baud giữa chip USB nối tiếp và bộ xử lý chính.

Ngoài ra, hãy kết nối nút kết nối và yêu cầu nút này gọi connect() khi người dùng nhấp vào nút này.

Thêm mã sau vào dự án của bạn:

script.js - clickConnect()

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

Thử nào

Dự án của chúng tôi hiện đã có đủ điều kiện tối thiểu để bắt đầu. Khi nhấp vào nút Connect (Kết nối), người dùng sẽ được nhắc chọn thiết bị nối tiếp để kết nối, sau đó kết nối với micro:bit.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Trên thẻ này, bạn sẽ thấy một biểu tượng cho biết bạn đã kết nối với một thiết bị nối tiếp:

Thiết lập luồng đầu vào để theo dõi dữ liệu từ cổng nối tiếp

Sau khi thiết lập kết nối, chúng ta cần thiết lập luồng đầu vào và trình đọc để đọc dữ liệu qua thiết bị. Trước tiên, chúng ta lấy luồng có thể đọc được từ cổng bằng cách gọi port.readable. Vì biết rằng chúng tôi sẽ nhận lại được văn bản từ thiết bị, nên chúng tôi sẽ truyền văn bản đó qua bộ giải mã văn bản. Tiếp theo, chúng ta sẽ tìm một người đọc và bắt đầu vòng lặp đọc.

Thêm mã sau vào dự án của bạn:

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();

Vòng lặp đọc là một hàm không đồng bộ chạy trong vòng lặp và chờ nội dung mà không chặn luồng chính. Khi có dữ liệu mới, trình đọc sẽ trả về hai thuộc tính: boolean value và done. Nếu giá trị done là true, thì cổng đã đóng hoặc không có thêm dữ liệu nào được chuyển vào.

Thêm mã sau vào dự án của bạn:

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;
  }
}

Thử nào

Dự án của chúng ta hiện có thể kết nối với thiết bị này và sẽ nối mọi dữ liệu nhận được từ thiết bị đó vào phần tử nhật ký.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy biểu trưng của Espruino:

93494fd58ea835eb.png.

Thiết lập luồng đầu ra để gửi dữ liệu đến cổng nối tiếp

Giao tiếp nối tiếp thường có hai chiều. Ngoài việc nhận dữ liệu từ cổng nối tiếp, chúng ta cũng muốn gửi dữ liệu tới cổng. Tương tự như với luồng đầu vào, chúng ta sẽ chỉ gửi văn bản qua luồng đầu ra tới micro:bit.

Trước tiên, hãy tạo một sự kiện phát trực tiếp bộ mã hoá văn bản rồi chuyển sự kiện đó đến 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;

Khi được kết nối nối tiếp với chương trình cơ sở Espruino, bảng điều khiển micro:bit của BBC hoạt động như một vòng lặp đọc-eval-print (repL) JavaScript, tương tự như mã bạn nhận được trong shell Node.js. Tiếp theo, chúng ta cần cung cấp một phương thức để gửi dữ liệu đến luồng. Mã dưới đây lấy một trình ghi từ luồng đầu ra và sau đó sử dụng write để gửi từng dòng. Mỗi dòng được gửi bao gồm một ký tự dòng mới (\n) để cho micro:bit đánh giá lệnh đã gửi.

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();

Để chuyển hệ thống sang trạng thái đã biết và ngăn hệ thống lặp lại các ký tự chúng ta gửi, chúng ta cần gửi Ctrl-C và tắt tiếng vọng.

script.js - connect()

// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');

Thử nào

Dự án của chúng ta hiện có thể gửi và nhận dữ liệu từ micro:bit. Hãy xác minh rằng chúng ta có thể gửi lệnh đúng cách:

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Mở thẻ Bảng điều khiển trong Công cụ của Chrome cho nhà phát triển rồi nhập writeToStream('console.log("yes")');

Bạn sẽ thấy nội dung tương tự như sau được in trên trang:

5. Điều khiển ma trận đèn LED

Tạo chuỗi lưới ma trận

Để điều khiển ma trận LED trên micro:bit, chúng ta cần gọi show(). Phương pháp này hiển thị đồ hoạ trên màn hình LED 5x5 tích hợp. Hàm này sẽ lấy số nhị phân hoặc một chuỗi.

Chúng ta sẽ lặp lại các hộp đánh dấu và tạo một mảng các giá trị 1s và 0s cho biết quảng cáo nào được đánh dấu và ô nào không được đánh dấu. Sau đó, chúng ta cần đảo ngược mảng vì thứ tự của các hộp đánh dấu là ngược lại với thứ tự đèn LED trong ma trận. Tiếp theo, chúng ta chuyển đổi mảng thành một chuỗi và tạo lệnh để gửi đến 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('')})`);

Chọn hộp đánh dấu để cập nhật ma trận

Tiếp theo, chúng ta cần theo dõi các thay đổi trên hộp đánh dấu và nếu các hộp đánh dấu thay đổi, hãy gửi thông tin đó đến micro:bit. Trong mã phát hiện tính năng (// CODELAB: Add feature detection here.), hãy thêm dòng sau:

script.js - DOMContentLoaded

initCheckboxes();

Hãy đặt lại lưới khi micro:bit được kết nối lần đầu tiên để lưới hiển thị khuôn mặt vui vẻ. Hàm drawGrid() đã được cung cấp. Hàm này hoạt động tương tự như sendGrid(); nó sẽ lấy một mảng là 1s và 0s và chọn các hộp đánh dấu nếu phù hợp.

script.js - clickConnect()

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

Thử nào

Giờ đây, khi trang mở một kết nối đến micro:bit, trang sẽ gửi một khuôn mặt vui vẻ. Khi nhấp vào các hộp đánh dấu, màn hình sẽ cập nhật trên ma trận đèn LED.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Vẽ một mẫu khác trên ma trận LED bằng cách thay đổi các hộp đánh dấu.

6. Kết nối các nút micro:bit

Thêm sự kiện xem vào các nút micro:bit

Trên micro:bit có 2 nút, một nút nằm ở hai bên của ma trận LED. Espruino cung cấp hàm setWatch gửi một sự kiện/lệnh gọi lại khi người dùng nhấn nút. Do muốn nghe cả hai nút, chúng ta sẽ tạo hàm chung và in thông tin chi tiết của sự kiện.

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);

Tiếp theo, chúng ta cần nối cả hai nút (có tên là BTN1 và BTN2 trên bảng micro:bit) mỗi khi cổng nối tiếp được kết nối với thiết bị.

script.js - clickConnect()

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

Thử nào

Ngoài việc hiển thị khuôn mặt vui vẻ khi được kết nối, việc nhấn một trong các nút trên micro:bit sẽ thêm văn bản vào trang cho biết nút nào đã được nhấn. Nhiều khả năng nhất là mỗi ký tự sẽ nằm trên một dòng riêng.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và xác minh rằng nút này sẽ thêm văn bản mới vào trang cùng với thông tin chi tiết về nút được nhấn.

7. Sử dụng luồng biến đổi để phân tích cú pháp dữ liệu đến

Xử lý luồng cơ bản

Khi một trong các nút micro:bit được nhấn, micro:bit sẽ gửi dữ liệu đến cổng nối tiếp thông qua một luồng. Luồng rất hữu ích, nhưng cũng có thể là một thách thức vì bạn không nhất thiết phải nhận được tất cả dữ liệu cùng một lúc và có thể được chia nhỏ tuỳ ý.

Ứng dụng hiện in luồng đến khi đến (trong readLoop). Trong hầu hết các trường hợp, mỗi ký tự nằm trên một dòng riêng, nhưng điều này không hữu ích lắm. Tốt nhất là luồng nên được phân tích cú pháp thành từng dòng và mỗi thông báo hiển thị dưới dạng một dòng riêng.

Biến đổi luồng bằng `TransformStream`

Để làm việc đó, chúng ta có thể sử dụng luồng biến đổi ( TransformStream) để có thể phân tích cú pháp luồng đến và trả về dữ liệu đã phân tích cú pháp. Luồng biến đổi có thể nằm giữa nguồn của luồng (trong trường hợp này là micro:bit) và bất kỳ nội dung nào đang sử dụng luồng (trong trường hợp này là readLoop) và có thể áp dụng một biến đổi tuỳ ý trước khi biến đổi được sử dụng. Hãy xem tiện ích này giống như một dây chuyền lắp ráp: Khi một tiện ích xuất hiện trên dòng, mỗi bước trong dòng sẽ sửa đổi tiện ích để khi tới đích cuối cùng, tiện ích đó sẽ hoạt động đầy đủ.

Để biết thêm thông tin, hãy xem bài viết Các khái niệm về API Luồng của MDN.

Biến đổi luồng bằng `LineBreakTransformer`

Hãy tạo một lớp LineBreakTransformer. Lớp này sẽ lấy một luồng vào và phân đoạn dựa trên dấu ngắt dòng (\r\n). Lớp này cần có 2 phương thức, transform và flush. Phương thức transform được gọi mỗi khi luồng nhận được dữ liệu mới. Thao tác này có thể thêm dữ liệu vào hàng đợi hoặc lưu dữ liệu để sử dụng sau. Phương thức flush được gọi khi luồng bị đóng và xử lý mọi dữ liệu chưa được xử lý.

Trong phương thức transform, chúng ta sẽ thêm dữ liệu mới vào container, sau đó kiểm tra xem có dấu ngắt dòng nào trong container hay không. Nếu có, hãy tách thông số này thành một mảng, sau đó lặp lại các dòng, gọi controller.enqueue() để gửi các dòng đã phân tích cú pháp ra ngoài.

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));

Khi luồng bị đóng, chúng ta chỉ cần đẩy mọi dữ liệu còn lại trong vùng chứa ra bằng enqueue.

script.js - LineBreakTransformer.flush()

// CODELAB: Flush the stream.
controller.enqueue(this.container);

Cuối cùng, chúng ta cần chuyển luồng đến thông qua LineBreakTransformer mới. Luồng đầu vào ban đầu của chúng ta chỉ được dẫn qua TextDecoderStream, vì vậy, chúng ta cần thêm pipeThrough bổ sung để dẫn nó qua LineBreakTransformer mới.

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()));

Thử nào

Giờ đây, khi bạn nhấn một trong các nút micro:bit, dữ liệu đã in sẽ được trả về trên một dòng.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và xác minh rằng bạn thấy giống như sau:

6c2193880c748412.pngS

Biến đổi luồng bằng `JSONTransformer`

Chúng ta có thể thử phân tích cú pháp chuỗi thành JSON trong readLoop. Tuy nhiên, hãy tạo một trình biến đổi JSON rất đơn giản để chuyển đổi dữ liệu thành đối tượng JSON. Nếu dữ liệu không phải là JSON hợp lệ, bạn chỉ cần trả về kết quả.

script.js - JSONTransformer.transform

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

Tiếp theo, hãy truyền luồng qua JSONTransformer sau khi đã truyền qua LineBreakTransformer. Điều này cho phép chúng ta đơn giản hoá JSONTransformer vì biết rằng JSON sẽ chỉ được gửi trên một dòng.

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()));

Thử nào

Giờ đây, khi nhấn một trong các nút micro:bit, bạn sẽ thấy [object Object] được in trên trang.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và xác minh rằng bạn thấy giống như sau:

Phản hồi khi nhấn nút

Để phản hồi các lượt nhấn nút micro:bit, hãy cập nhật readLoop để kiểm tra xem dữ liệu đã nhận được có phải là object với thuộc tính button hay không. Sau đó, hãy gọi buttonPushed để xử lý thao tác nhấn nút.

script.js - readLoop()

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

Khi bạn nhấn nút micro:bit, màn hình trên ma trận LED sẽ thay đổi. Sử dụng mã sau để đặt ma trận:

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();
  }
}

Thử nào

Giờ đây, khi nhấn một trong các nút micro:bit, ma trận đèn LED sẽ thay đổi thành mặt vui hoặc mặt buồn.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit.
Nhấn các nút trên micro:bit và kiểm tra để đảm bảo ma trận đèn LED thay đổi.

8. Đóng cổng nối tiếp

Bước cuối cùng là kết nối chức năng ngắt kết nối để đóng cổng khi người dùng hoàn tất.

Đóng cổng khi người dùng nhấp vào nút Kết nối/Ngắt kết nối

Khi người dùng nhấp vào nút Kết nối/Ngắt kết nối, chúng ta cần đóng kết nối. Nếu cổng này đã mở, hãy gọi disconnect() và cập nhật giao diện người dùng để cho biết trang không còn được kết nối với thiết bị nối tiếp nữa.

script.js - clickConnect()

// CODELAB: Add disconnect code here.
if (port) {
  await disconnect();
  toggleUIConnected(false);
  return;
}

Đóng luồng và cổng

Trong hàm disconnect, chúng ta cần đóng luồng đầu vào, đóng luồng đầu ra và đóng cổng. Để đóng luồng dữ liệu đầu vào, hãy gọi reader.cancel(). Lệnh gọi đến cancel không đồng bộ, vì vậy chúng ta cần sử dụng await để chờ lệnh gọi này hoàn tất:

script.js - disconnect()

// CODELAB: Close the input stream (reader).
if (reader) {
  await reader.cancel();
  await inputDone.catch(() => {});
  reader = null;
  inputDone = null;
}

Để đóng luồng đầu ra, hãy lấy writer, gọi close() và chờ đối tượng outputDone đóng:

script.js - disconnect()

// CODELAB: Close the output stream.
if (outputStream) {
  await outputStream.getWriter().close();
  await outputDone;
  outputStream = null;
  outputDone = null;
}

Cuối cùng, hãy đóng cổng nối tiếp và chờ cổng này đóng lại:

script.js - disconnect()

// CODELAB: Close the port.
await port.close();
port = null;

Thử nào

Giờ đây, bạn có thể tuỳ ý mở và đóng cổng nối tiếp.

Tải lại trang.
Nhấp vào nút Kết nối.
Trong hộp thoại trình chọn Cổng nối tiếp, hãy chọn thiết bị BBC micro:bit và nhấp vào Kết nối.
Bạn sẽ thấy một nụ cười xuất hiện trên ma trận LED micro:bit
Nhấn nút Ngắt kết nối và xác minh rằng ma trận LED tắt và không có lỗi trong bảng điều khiển.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã tạo thành công ứng dụng web đầu tiên sử dụng Web Serial API.

Hãy theo dõi https://goo.gle/fugu-api-tracker để biết thông tin mới nhất về Web Serial API cũng như tất cả các tính năng web mới, thú vị khác mà nhóm Chrome đang nghiên cứu.

Bắt đầu sử dụng Web Serial API

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Giới thiệu về Web Serial API

3. Thiết lập

Lấy mã

4. Mở một kết nối nối tiếp

Kiểm tra xem API Web Serial có được hỗ trợ hay không

Thử nào

Mở cổng nối tiếp

Thử nào

Thiết lập luồng đầu vào để theo dõi dữ liệu từ cổng nối tiếp

Thử nào

Thiết lập luồng đầu ra để gửi dữ liệu đến cổng nối tiếp

Thử nào

5. Điều khiển ma trận đèn LED

Tạo chuỗi lưới ma trận

Chọn hộp đánh dấu để cập nhật ma trận

Thử nào

6. Kết nối các nút micro:bit

Thêm sự kiện xem vào các nút micro:bit

Thử nào

7. Sử dụng luồng biến đổi để phân tích cú pháp dữ liệu đến

Xử lý luồng cơ bản

Biến đổi luồng bằng TransformStream

Biến đổi luồng bằng LineBreakTransformer

Thử nào

Biến đổi luồng bằng JSONTransformer

Thử nào

Phản hồi khi nhấn nút

Thử nào

8. Đóng cổng nối tiếp

Đóng cổng khi người dùng nhấp vào nút Kết nối/Ngắt kết nối

Đóng luồng và cổng

Thử nào

9. Xin chúc mừng

Biến đổi luồng bằng `TransformStream`

Biến đổi luồng bằng `LineBreakTransformer`

Biến đổi luồng bằng `JSONTransformer`