Malay

Tutorial WebAssembly

WebAssembly - Konversi WAT ke WASM

Hai, para pemrogram yang sedang berkembang! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia WebAssembly, khususnya fokus pada konversi WebAssembly Text (WAT) ke WebAssembly binary (WASM). Jangan khawatir jika istilah ini terdengar asing bagi Anda - kita akan membongkar segala sesuatu secara langkah demi langkah. Pada akhir panduan ini, Anda akan dapat mengkonversi WAT ke WASM seperti seorang ahli!

WebAssembly - Convert WAT to WASM

Apa Itu WebAssembly?

Sebelum kita masuk ke proses konversi, mari kitaambil sedikit waktu untuk memahami apa itu WebAssembly. Bayangkan Anda sedang membangun benteng pasir. WebAssembly seperti memiliki bak mandiri yang dapat menciptakan struktur pasir yang sempurna secara instan, membuat kreasimu di pantai menjadi lebih cepat dan menarik.

Dalam dunia pengembangan web, WebAssembly adalah bahasa tingkat rendah yang memungkinkan kode yang ditulis dalam bahasa seperti C++ atau Rust dapat berjalan di browser web dengan kecepatan mendekati native. Itu dirancang untuk bekerja bersama JavaScript, meningkatkan performa aplikasi web.

WAT vs WASM: Dasar-Dasar

Sekarang, mari kita bicarakan tentang WAT dan WASM. Bayangkan WAT sebagai rancangan benteng pasir Anda, ditulis dalam bahasa yang manusia dapat membaca. Sedangkan WASM, adalah seperti benteng pasir akhir - itu adalah bentuk yang komputer dapat memahami dan menjalankan secara cepat.

  • WAT (WebAssembly Text Format): Dapat dibaca oleh manusia, mirip dengan bahasa assembly
  • WASM (WebAssembly Binary Format): Dapat dibaca oleh mesin, format biner kompak

Konversi WAT ke WASM: Prosesnya

Mengkonversi WAT ke WASM seperti menerjemahkan rancangan benteng pasir kita menjadi struktur pasir nyata. Mari kita jelajahi proses ini langkah demi langkah.

Langkah 1: Tulis Kode WAT Anda

Pertama, kita perlu menciptakan kode WAT kita. Berikut adalah contoh sederhana:

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

Kode WAT ini mendefinisikan sebuah modul dengan fungsi yang menambahkan dua integer 32-bit. Jangan khawatir jika Anda tidak mengerti setiap detail - kita akan membongkar itu:

  1. (module ...): Ini membungkus seluruh kode WAT kita.
  2. (func $add ...): Mendefinisikan sebuah fungsi bernama "add".
  3. (param $a i32) (param $b i32): Menentukan dua parameter integer 32-bit.
  4. (result i32): Menandai bahwa fungsi ini mengembalikan integer 32-bit.
  5. local.get $a dan local.get $b: Mengambil parameter fungsi.
  6. i32.add: Menambahkan dua angka.
  7. (export "add" (func $add)): Menjadikan fungsi ini dapat diakses dari luar modul.

Langkah 2: Simpan File WAT Anda

Simpan kode ini dalam sebuah file dengan ekstensi .wat, misalnya add.wat.

Langkah 3: Gunakan Konverter WAT ke WASM

Sekarang datang bagian magis - mengkonversi WAT ke WASM. Kita akan menggunakan sebuah alat yang disebut wat2wasm, yang merupakan bagian dari WebAssembly Binary Toolkit (WABT).

Berikut cara Anda menggunakannya:

  1. Install WABT (jika Anda belum melakukannya):
  • Pada macOS: brew install wabt
  • Pada Ubuntu: sudo apt-get install wabt
  • Untuk sistem lainnya, periksa repositori WABT GitHub

  1. Buka terminal dan navigasikan ke direktori yang mengandung file WAT Anda.

  2. Jalankan perintah berikut:

wat2wasm add.wat -o add.wasm

Perintah ini memberitahu wat2wasm untuk mengkonversi file add.wat kita menjadi file WASM bernama add.wasm.

Langkah 4: Verifikasi File WASM

Selamat! Anda baru saja menciptakan file WASM pertama Anda. Tetapi bagaimana kita tahu itu berhasil? Mari kita gunakan alat lain dari WABT yang disebut wasm2wat untuk mengkonversi WASM kita kembali ke WAT dan lihat apakah itu sama dengan kode asli kita:

wasm2wat add.wasm -o add_verified.wat

Sekarang buka add_verified.wat di editor teks. Itu seharusnya tampak mirip dengan kode WAT asli kita, meskipun mungkin ada beberapa perbedaan format minor.

Menggunakan File WASM Anda

Sekarang kita memiliki file WASM, bagaimana kita menggunakannya dalam sebuah aplikasi web? Berikut adalah contoh sederhana HTML dan JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Hasil: <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>

File HTML ini memuat modul WASM kita dan memanggil fungsi add dengan argumen 5 dan 3. Hasilnya (8) kemudian ditampilkan di halaman.

Kesimpulan

Dan begitu saja! Kita telah berpergian dari menulis kode WAT ke mengkonversi itu ke WASM dan akhirnya menggunakannya di halaman web. Ingat, ini hanya permulaan. WebAssembly membuka dunia kemungkinan bagi aplikasi web tingkat tinggi performa.

Sebagai Anda terus menjalani perjalanan pemrograman Anda, terus mencoba fungsi WAT yang berbeda dan mengeksplorasi kemampuan WebAssembly. Siapa tahu? Anda mungkin menciptakan aplikasi web berikutnya yang mengubah dunia!

Selamat coding, para ahli WebAssembly masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
WebAssembly - Format Teks
Tutorial Seterusnya:
WebAssembly - Pautan Dinamik