Tiếng Việt

Hướng dẫn WebAssembly

Tiếng Việt (Vietnamese)

WebAssembly - Chuyển đổi từ WAT sang WASM

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của WebAssembly, cụ thể là việc chuyển đổi từ WebAssembly Text (WAT) sang WebAssembly binary (WASM). Đừng lo lắng nếu những thuật ngữ này听起来 xa lạ với bạn - chúng ta sẽ giải thích từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể chuyển đổi WAT sang WASM như một chuyên gia!

WebAssembly - Convert WAT to WASM

WebAssembly là gì?

Trước khi chúng ta nhảy vào quá trình chuyển đổi, hãy dành một chút thời gian để hiểu WebAssembly là gì. Hãy tưởng tượng bạn đang xây dựng một lâu đài cát. WebAssembly giống như một cái thùng ma thuật có thể tạo ra những cấu trúc cát hoàn hảo ngay lập tức, làm cho những tác phẩm bãi biển của bạn nhanh hơn và ấn tượng hơn.

Trong thế giới phát triển web, WebAssembly là một ngôn ngữ cấp thấp cho phép mã được viết trong các ngôn ngữ như C++ hoặc Rust chạy trong các trình duyệt web với tốc độ gần như-native. Nó được thiết kế để làm việc cùng với JavaScript, nâng cao hiệu suất của các ứng dụng web.

WAT vs WASM: Cơ bản

Bây giờ, hãy nói về WAT và WASM. Hãy tưởng tượng WAT là bản vẽ cho lâu đài cát của bạn, được viết bằng một ngôn ngữ mà con người có thể đọc. WASM, mặt khác, giống như lâu đài cát cuối cùng - nó là dạng mà máy tính hiểu và có thể thực thi nhanh chóng.

  • WAT (WebAssembly Text Format): Dễ đọc cho con người, tương tự như ngôn ngữ hợp ngữ
  • WASM (WebAssembly Binary Format): Dễ đọc cho máy, định dạng nhị phân gọn nhẹ

Quá trình chuyển đổi từ WAT sang WASM

Chuyển đổi từ WAT sang WASM giống như dịch bản vẽ lâu đài cát của bạn thành cấu trúc cát thực tế. Hãy cùng qua từng bước.

Bước 1: Viết mã WAT của bạn

Đầu tiên, chúng ta cần tạo mã WAT của mình. Dưới đây là một ví dụ đơn giản:

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

Mã WAT này định nghĩa một module với một hàm cộng hai số nguyên 32-bit. Đừng lo lắng nếu bạn không hiểu từng chi tiết - chúng ta sẽ giải thích:

  1. (module ...): Bao gồm toàn bộ mã WAT của chúng ta.
  2. (func $add ...): Định nghĩa một hàm tên là "add".
  3. (param $a i32) (param $b i32): Xác định hai tham số nguyên 32-bit.
  4. (result i32): Chỉ ra rằng hàm này trả về một số nguyên 32-bit.
  5. local.get $a và local.get $b: Lấy các tham số của hàm.
  6. i32.add: Cộng hai số.
  7. (export "add" (func $add)): Làm cho hàm này có thể truy cập từ bên ngoài module.

Bước 2: Lưu tệp WAT của bạn

Lưu mã này trong một tệp với phần mở rộng .wat, ví dụ: add.wat.

Bước 3: Sử dụng công cụ chuyển đổi WAT sang WASM

Bây giờ đến phần kỳ diệu - chuyển đổi WAT sang WASM. Chúng ta sẽ sử dụng một công cụ叫做 wat2wasm, phần của WebAssembly Binary Toolkit (WABT).

Dưới đây là cách bạn có thể sử dụng nó:

  1. Cài đặt WABT (nếu bạn chưa cài đặt):
  • Trên macOS: brew install wabt
  • Trên Ubuntu: sudo apt-get install wabt
  • Đối với các hệ thống khác, kiểm tra WABT GitHub repository

  1. Mở terminal và điều hướng đến thư mục chứa tệp WAT của bạn.

  2. Chạy lệnh sau:

wat2wasm add.wat -o add.wasm

Lệnh này告诉 wat2wasm chuyển đổi tệp add.wat của chúng ta thành tệp WASM tên là add.wasm.

Bước 4: Kiểm tra tệp WASM của bạn

Chúc mừng! Bạn đã tạo ra tệp WASM đầu tiên của mình. Nhưng làm thế nào chúng ta biết rằng nó đã hoạt động? Hãy sử dụng một công cụ khác của WABT gọi là wasm2wat để chuyển đổi WASM của chúng ta zurück thành WAT và xem liệu nó có khớp với mã gốc của chúng ta hay không:

wasm2wat add.wasm -o add_verified.wat

Bây giờ mở add_verified.wat trong một trình soạn thảo văn bản. Nó nên rất giống với mã WAT gốc của chúng ta, mặc dù có thể có một số khác biệt nhỏ về định dạng.

Sử dụng tệp WASM của bạn

Bây giờ chúng ta có tệp WASM, làm thế nào chúng ta sử dụng nó trong một ứng dụng web? Dưới đây là một ví dụ đơn giản về HTML và JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Kết quả: <span id="result"></span></p>
<script>
(async () => {
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(5, 3);
document.getElementById('result').textContent = result;
})();
</script>
</body>
</html>

Tệp HTML này tải module WASM của chúng ta và gọi hàm add với các tham số 5 và 3. Kết quả (8) sau đó được hiển thị trên trang.

Kết luận

Và thế là xong! Chúng ta đã đi từ việc viết mã WAT đến chuyển đổi nó thành WASM và cuối cùng là sử dụng nó trong một trang web. Nhớ rằng, đây chỉ là phần nổi của tảng băng. WebAssembly mở ra một thế giới của các khả năng cho các ứng dụng web hiệu suất cao.

Khi bạn tiếp tục hành trình lập trình của mình, hãy tiếp tục thử nghiệm với các hàm WAT khác nhau và khám phá các khả năng của WebAssembly. Ai biết được? Bạn có thể tạo ra ứng dụng web đột phá tiếp theo thay đổi thế giới!

Chúc các bạn lập trình vui vẻ, những pháp sư WebAssembly tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
WebAssembly - Định dạng văn bản
Hướng Dẫn Tiếp Theo:
WebAssembly - Liên kết động