Program WebAssembly Pertama Anda

WebAssembly (Wasm) adalah teknologi canggih yang memungkinkan aplikasi berkinerja tinggi berjalan di browser web. Teknologi ini memungkinkan pengembang untuk menulis kode dalam bahasa seperti C, C++, dan Rust, dan kemudian mengkompilasinya ke dalam format biner yang dieksekusi secara efisien bersama JavaScript. Dalam panduan ini, Anda akan membuat program WebAssembly pertama Anda menggunakan C dan menjalankannya di browser web.

Prasyarat

Pertama, pastikan Anda telah menginstal hal-hal berikut ini di sistem Anda:

Emscripten SDK (emsdk) : Rangkaian alat kompiler untuk WebAssembly.
Node.js dan npm (opsional tetapi disarankan untuk menjalankan server lokal).
Editor teks apa pun, dan peramban web apa pun.

sumber: linkedin.com

Langkah 1: Instal Emscripten

Sekarang setelah Anda memiliki Emscripten SDK, mari kita instal:

1. Kemudian Kloning Repositori Emscripten:

git clone https://github.com/emscripten-core/emsdk.git

2. Arahkan ke direktori Kloning:

cd emsdk

3. Instal dan Aktifkan Versi Terbaru:

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh # On Linux/macOS
emsdk_env.bat # On Windows (use Command Prompt)

Langkah 2: Membuat Aplikasi C Dasar

Langkah pertama adalah membuat file baru bernama hello.c, dan tambahkan kode C berikut ke dalamnya:

#include <stdio.h>

int main() {
printf("Hello, WebAssembly!\n");
return 0;
}

Halo, WebAssembly! Program dasar ini akan dicetak ke konsol.

Langkah 3: Membangun Kode C ke dalam WebAssembly

Kompilasi dengan kompiler Emscripten untuk menghasilkan keluaran WebAssembly:

emcc hello.c -o hello.html

Perintah ini mengkompilasi hello. c menjadi tiga file:

hello. wasm (WebAssembly biner)
hello. js (kode lem JavaScript)
hello. html (halaman web sederhana untuk menjalankan modul Wasm)

Langkah 4: Jalankan Aplikasi WebAssembly

Karena peramban tidak mengizinkan eksekusi berkas lokal untuk kontrol keamanan, berkas yang dihasilkan harus dilayani oleh server lokal. Anda bisa menggunakan Python atau Node.js:

Menggunakan Python:

python3 -m http.server 8000

Menggunakan Node.js:

npx http-server . -p 8000

Terakhir, buka peramban Anda dan buka http://localhost:8000/hello. html. Anda akan melihat tulisan “Hello, WebAssembly!” tercetak pada konsol (untuk melihatnya, buka Developer Tools pada peramban Anda).

Memahami File yang Dihasilkan

halo. wasm: Modul WebAssembly yang telah dikompilasi.
hello. js: Kode JavaScript yang digunakan untuk memuat dan menjalankan modul WebAssembly yang dihasilkan.
hello. Wasmtime: halaman web sederhana yang menginisialisasi modul Wasm dan menjalankannya.

Mengubah Program WebAssembly

Anda dapat mengubah hello untuk berinteraksi dengan JavaScript dengan benar. c untuk mengekspos fungsi:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Kompilasi ulang dengan:

emcc hello.c -o hello.js -sEXPORTED_FUNCTIONS='["_add"]' -sEXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

Kemudian dalam JavaScript, Anda dapat memanggil fungsi tersebut:

const wasmModule = Module();
wasmModule.onRuntimeInitialized = () => {
const add = wasmModule.cwrap('add', 'number', ['number', 'number']);
console.log('Result:', add(5, 10));
};

Kesimpulan

Selamat! Anda baru saja membuat program WebAssembly pertama Anda. WebAssembly membuka kemungkinan baru untuk aplikasi web berkinerja tinggi dan mengintegrasikan bahasa non-JavaScript ke dalam pengembangan web. Teruslah bereksplorasi, dan cobalah program WebAssembly yang lebih kompleks!

Kembali ke>>>> Memulai dengan WebAssembly: Apa yang Perlu Anda Ketahui