Sử dụng WebAssembly Studio

Trong bài viết Một nhập môn về WebAssembly chúng ta đã làm quen với WebAssembly và đã có một minh họa chuyển đoạn mã C++ đến WebAssembly để có thể sử dụng trong một dự án web cục bộ bằng cách dùng công cụ trực tuyến WebAssembly Explorer.

Bài viết này sẽ giới thiệu một công cụ trực tuyến khác là WebAssembly Studio. Nếu WebAssembly Explorer chỉ hỗ trợ chuyển các ngôn ngữ C và C++ thì WebAssembly Studio còn hỗ trợ thêm ngôn ngữ Rust hay AssemblyScript đồng thời công cụ này còn cho phép chúng ta chia sẻ dự án đến GitHub.

Các chức năng cơ bản

Truy cập đến WebAssembly Studio và chúng ta sẽ trông thấy một giao diện như sau:

Như hình trên, chúng ta có thể tạo các dự án ngôn ngữ C, Rust hay AssemblyScript. Bài viết này minh họa dự án C bằng cách chọn Empty C Project và nhấn nút Create bên dưới. Chúng ta sẽ được chuyển đến một giao diện như sau:

Nếu là người bắt đầu sử dụng công cụ này, bạn cần lưu ý một số chức năng cơ bản được đóng khung và đánh số màu vàng như hình bên dưới:

Vùng 1: Cho phép chúng ta Build, Run và Build & Run dự án
Vùng 2: Rất quan trọng mà những người lần đầu tiên sử dụng hay quên là chức năng Save
Vùng 3: Các tập tin cơ bản trong dự án gồm main.c (chứa mã C và tùy theo ngôn ngữ mà chúng ta sẽ có phần mở rộng khác nhau, ví dùng nếu main.rs với Rust), main.html (chứa mã HTML & CSS) và main.js (chứa mã JavaScript).
Vùng 4: Nội dung khi dự án được biên dịch
Vùng 5: Nội dung tập tin main.html trên các trình duyệt web.

Tạo dự án

Trong Vùng 3, chọn tập tin main.c và viết lại nội dùng như sau:


#define WASM_EXPORT __attribute__((visibility("default")))

WASM_EXPORT
int add(int a, int b) {
  return a + b;
}
WASM_EXPORT
int sub(int a, int b) {
  return a - b;
}

Các hàm add và sub phải được đánh dấu bằng các thuộc tính WASM_EXPORT. Điều này giúp trình biên dịch của WebAssembly Studio có thể chuyển các hàm này sang ngôn ngữ WebAssembly. Nhấn nút Save trong Vùng 2.

Kế tiếp, cũng trong Vùng 3, chọn tập tin main.html và viết lại nội dung như sau:

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <style>
        body {
          background-color: rgb(255, 255, 255);
        }
     </style>
  </head>
  <body>
     <h1 id="add"></h1>
     <h1 id="sub"></h1>
     <script src="./main.js"></script>
  </body>
</html>

Và nhớ nhấn nút Save. Cuối cùng trong tập tin main.js ở Vùng 3 thay đoạn mã mặc định:

document.getElementById("container").textContent = instance.exports.main();

bằng đoạn mã sau:

document.getElementById("add").textContent = "1 + 2 = " + instance.exports.add(1,2);
document.getElementById("sub").textContent = "1 - 2 = " + instance.exports.sub(1,2);

Nhấn nút Save. Bây giời chúng ta có thể thực thi ứng dụng bằng cách nhấn Build & Run trong Vùng 1 và xem kết quả trong Vùng 4 và 5:

Chúng ta cũng để ý bên dưới Vùng 3 sẽ xuất hiện một tập tin mới là main.wasm:

Đây chính là tập tin WebAssembly và chúng ta có thể xem nội dung của nó (định dạng WAT). Chú ý các export “add” và export “sub” là các hàm C của chúng ta.

Tải và chia sẻ

Chúng ta có thể tải dự án đã thực hiện trên WebAssembly Studio đến máy cá nhân bằng cách nhấn Download

Hay có thể chia sẻ đến GitHub bằng cách nhấn Fork.

Lời kết

Các nhà phát triển đang tập trung phát triển công cụ WebAssembly Studio thành công cụ thân thiện như các môi trường phát triển khác như Android Studio hay Visual Studio. Khi mà WebAssembly đóng vai trò ngày càng quan trọng trong việc phát triển web thì việc làm chủ các công cụ về công nghệ này là hết sức cần thiết.

Trần Ngọc Minh Notes

Stay hungry, stay foolish!