kodeabc.xyz logo
Cara Membuat Aplikasi WebAssembly Pertama Anda, Langsung dari Browser

Cara Membuat Aplikasi WebAssembly Pertama Anda, Langsung dari Browser

By Reggi, 14 May 2026

WebAssembly (WASM) mengubah paradigma pengembangan web. Browser yang tadinya hanya menjadi lapisan presentasi, kini bertransformasi menjadi platform komputasi sesungguhnya. Dulu, tugas-tugas berat atau beban kerja komputasi kompleks seringkali membutuhkan aplikasi native, lingkungan Python khusus, atau server jarak jauh.

Kini, WebAssembly mengubah semua itu. Teknologi ini memungkinkan developer mengompilasi kode berperforma tinggi yang sudah ada ke format biner ringkas yang dapat dieksekusi oleh browser secara efisien. Artinya, Anda tidak perlu lagi menulis ulang logika kritis kinerja dalam JavaScript. Anda bisa memanfaatkan puluhan tahun optimasi kode sistem, lalu mendistribusikan aplikasi sebagai halaman web sederhana. Hasilnya adalah perangkat lunak yang lebih cepat, lebih portabel, dan jauh lebih mudah dibagikan.

Pergeseran ini bukan hanya tentang performa. WebAssembly menjembatani kesenjangan antara aksesibilitas web dan kekuatan perangkat lunak native. Ini memungkinkan pengembangan alat berbasis browser yang responsif untuk simulasi, analisis data, pemrosesan media, komputasi ilmiah, dan visualisasi interaktif. JavaScript terus menangani antarmuka dan interaksi pengguna, sementara WASM berfungsi sebagai mesin komputasinya. Pemisahan ini membentuk kembali kemampuan aplikasi web modern. Bahkan jika Anda tidak menyadarinya, WASM adalah hal yang lumrah dalam pengembangan web modern. Artikel ini akan memandu Anda dalam membuat Your First WebAssembly Program and Web App, menuliskannya, mengujinya, dan menyebarkannya sepenuhnya di dalam browser.

Mengapa WebAssembly Penting untuk Developer Data dan Ilmiah?

Secara praktis, kehadiran WebAssembly berarti kita bisa:

  • Mengompilasi kode native ke format biner yang portabel.
  • Memuatnya langsung ke halaman web.
  • Mengeksekusinya dengan kecepatan mendekati native tepat di dalam browser.

Bagi data scientist dan developer ilmiah, ini membuka peluang menarik. Perangkat lunak ilmiah kini dapat berjalan langsung di dalam browser tanpa mengharuskan pengguna menginstal apa pun. Cukup dengan halaman web, alat Anda tersedia hanya dengan sebuah URL.

Alat yang Kita Gunakan

Dalam tutorial ini, kita akan membangun aplikasi WebAssembly terkecil yang akan mencetak "Hello WASM!" di halaman web, berbasis kode C. Yang paling penting, semua proses akan terjadi secara online. Kita akan tetap berada di dalam browser sampai semuanya berjalan.

Kita akan menggunakan:

  • GitHub: Untuk manajemen repositori dan kolaborasi.
  • GitHub Codespaces: Lingkungan pengembangan berbasis browser (mirip Visual Studio Code online) untuk penulisan dan pengujian kode.
  • Emscripten: Toolset inti dalam ekosistem WebAssembly untuk mengompilasi kode C ke format WebAssembly.
  • Python Simple HTTP Server: Server web sederhana yang sudah ada di dalam GitHub Codespaces, kita gunakan untuk menjalankan aplikasi web yang dihasilkan.

Tutorial Langkah Demi Langkah: Membangun Aplikasi "Hello WASM!"

Secara konseptual, alur kerja kita mengikuti langkah-langkah berikut:

  1. Buat Repositori GitHub.
  2. Luncurkan GitHub Codespaces.
  3. Buat program C.
  4. Sediakan Emscripten.
  5. Kompilasi program ke WebAssembly.
  6. Uji dengan server web lokal.
  7. Unduh file dan sebarkan ke server Anda.

Mari kita ikuti setiap langkahnya.

Langkah 1: Buat Repositori GitHub

Pertama, masuk ke GitHub dan buat repositori baru. Berikan nama yang jelas, lalu klik "Create repository" dengan semua bidang lain dibiarkan sebagai default.

Repositori yang baru dibuat mungkin tampak kosong. Untuk menginisialisasinya, buat file README.md. Isi dengan beberapa teks minimal, lalu picu "Commit changes" dan konfirmasi.

Langkah 2: Luncurkan GitHub Codespaces

Setelah repositori siap, kita bisa meluncurkan Codespaces. Klik tombol <> Code di halaman repositori, lalu pilih "Create codespace on main".

Dalam beberapa detik, Anda akan mendapatkan aplikasi Visual Studio Code online. Lingkungan ini memiliki nama unik. Periksa URL Anda, nama lingkungan juga akan muncul di sana.

Langkah 3: Buat Program C

Di jendela Explorer (panel kiri), Anda akan melihat file yang ada. Sekarang, klik "New file" dan beri nama file dengan ekstensi .c, misalnya hello-wasm-tutorial.c. File ini akan berisi kode aplikasi kita.

Setelah file dibuat, ketik kode C berikut di editor kanan:

c
#include <stdio.h>

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

Simpan file (Ctrl+S atau Cmd+S di Mac). Kode C kini siap dikompilasi.

Langkah 4: Sediakan Emscripten di Codespaces

Untuk mengompilasi kode C menjadi WebAssembly, kita memerlukan Emscripten. Emscripten adalah salah satu alat inti dalam ekosistem WebAssembly. Ini mengompilasi kode C dan C++ ke file .wasm yang disertai dengan file runtime yang kompatibel dengan browser, berfungsi sebagai antarmuka antara HTML+JS aplikasi dan file WASM itu sendiri.

Buka terminal di Codespaces. Untuk "menginstal" Emscripten (tidak ada yang benar-benar terinstal di komputer Anda, karena ini semua terjadi di cloud), ketik perintah berikut:

Pertama, kloning versi Emscripten saat ini dari repositori GitHub-nya:

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

Outputnya akan menunjukkan bahwa repositori telah dikloning. Selanjutnya, masuk ke folder emsdk:

bash
cd emsdk

Kemudian jalankan perintah untuk menginstalnya:

bash
./emsdk install latest

Proses ini akan memakan waktu. Jika berhasil, Anda akan melihat pesan keberhasilan di akhir. Setelah instalasi selesai, kita perlu mengaktifkan Emscripten:

bash
./emsdk activate latest

Terakhir, muat variabel lingkungan:

bash
source ./emsdk_env.sh

Untuk memverifikasi instalasi, ketik:

bash
emcc --version

Anda akan melihat informasi versi untuk kompiler Emscripten.

Langkah 5: Kompilasi Program ke WebAssembly!

Tetap di terminal, kembali ke satu level di struktur folder untuk keluar dari emsdk:

bash
cd ..

Kemudian jalankan perintah kompilasi:

bash
emcc hello-wasm-tutorial.c -o hello-wasm-tutorial.html

Anda akan melihat beberapa file baru muncul di Explorer di kiri atas. File-file tersebut adalah README.md dan kode C yang sudah kita buat, ditambah file .wasm, .html, dan .js yang dibuat oleh Emscripten. Ini sangat sederhana.

Apa saja file-file ini dan apa fungsinya?

  • hello-wasm-tutorial.wasm: Ini adalah biner WebAssembly yang telah dikompilasi, yaitu logika eksekusi inti yang berasal dari program C.
  • hello-wasm-tutorial.js: Ini adalah kode "lem" JavaScript yang memungkinkan antarmuka file WASM ke sisa kode JavaScript, dan dengan demikian ke aplikasi web itu sendiri. File ini memuat modul WASM, menginisialisasi memori runtime, dan mengelola komunikasi antara browser dan modul WebAssembly.
  • hello-wasm-tutorial.html: Ini adalah halaman web minimal yang dihasilkan secara otomatis oleh Emscripten. Membuka halaman ini akan menjalankan aplikasi yang telah dikompilasi.

Sekarang, mari kita uji!

Langkah 6: Menguji Aplikasi WebAssembly

Untuk menguji aplikasi WASM kita di dalam halaman web yang dibuat oleh Emscripten, kita perlu memulai server web "lokal". "Lokal" di sini berarti di dalam lingkungan Codespaces.

Kita membutuhkan ini karena aplikasi dirancang untuk disajikan melalui server web. Untungnya, Python (yang sudah ada di lingkungan cloud) menyediakan server HTTP bawaan yang kecil. Kita bisa mengaktifkan server ini dengan menjalankan perintah berikut di terminal:

bash
python3 -m http.server

Output dari perintah ini akan mencakup tombol yang akan meluncurkan aplikasi web di jendela baru. Saat Anda mengkliknya, Anda akan melihat daftar direktori yang berisi semua file yang kita miliki sejauh ini.

Akhirnya, keajaiban terjadi. Ketika Anda mengklik hello-wasm-tutorial.html, Anda akan melihat halaman ini dimuat. Halaman tersebut kemudian memanggil program WASM dan menampilkan outputnya di konsol browser.

Menyederhanakan HTML Anda

Seperti yang Anda lihat pada contoh di atas, ketika Emscripten mengompilasi kode kita, ia menghasilkan halaman HTML yang besar dengan CSS, seluruh UI termasuk pesan loading dan status lainnya, tombol, dan sebagainya. Ini mungkin bagus untuk demo, tetapi justru mempersulit pembelajaran.

Apa yang bisa kita lakukan adalah mendapatkan kode HTML minimal yang akan menjalankan kode WASM. Ternyata, Anda hanya membutuhkan sedikit. Cukup buat file HTML baru di explorer, misalnya simple.html:

html
<!DOCTYPE html>
<html>
<body>
    <script src="hello-wasm-tutorial.js"></script>
</body>
</html>

Simpan file ini, kembali ke halaman daftar direktori di mini server Python, refresh untuk melihat file baru, dan buka. Sekarang akan terlihat seperti ini. String output dari program WASM ditampilkan di konsol karena itulah yang kita panggil dalam kode JS.

Anda sekarang dapat menjelajahi file-file yang berbeda (pada dasarnya HTML sederhana ini ditambah file JS yang dibuat oleh Emscripten, karena kode C Anda tulis sendiri sehingga Anda sudah tahu apa yang dilakukannya) untuk memahami lebih lanjut.

Mengontrol Fungsi C dari Antarmuka HTML+JS

Mari kita lihat bagaimana kita bisa membuat aplikasi web dengan tombol yang akan memanggil fungsi dari program WASM yang dikompilasi Emscripten dari kode C, dan menerapkan hasilnya ke dokumen HTML itu sendiri.

Hal utama di sini adalah kita harus membuat fungsi C yang terpisah dari main() dan mengekspornya. Kemudian, kita kompilasi ulang program untuk menghasilkan file WASM baru bersama dengan file "lem" JS baru yang akan berinteraksi dengan HTML untuk menangani pemanggilan fungsi.

Misalkan kita memodifikasi kode C menjadi seperti berikut, yang mempertahankan fungsi main() sebelumnya dan menambahkan satu fungsi yang akan kita panggil dari tombol di HTML:

c
#include <stdio.h>
#include <emscripten/emscripten.h> // Diperlukan untuk EMSCRIPTEN_KEEPALIVE

int main() {
    printf("Hello from main (WASM)!\n"); // Pesan dimodifikasi
    return 0;
}

EMSCRIPTEN_KEEPALIVE
void button_message() {
    printf("Hello from button (WASM)!\n");
}

Perhatikan bahwa di fungsi main, kita telah memodifikasi output dari printf(); ini untuk memastikan kita tahu dari mana teks itu berasal.

Sekarang, kita kompilasi dengan perintah berikut:

bash
emcc hello-wasm-tutorial.c -o hello-wasm-tutorial.js -s EXPORTED_FUNCTIONS="['_main', '_button_message']"

Perhatikan tiga hal: (i) Kita tidak memintanya untuk membangun kembali seluruh aplikasi web, tetapi hanya file "lem" JS (selain file WASM, tentu saja); (ii) Kita menandai fungsi mana yang ingin kita ekspor (dalam kasus ini keduanya); (iii) Fungsi-fungsi tersebut dipanggil dengan garis bawah di depannya.

Anda bisa kembali ke HTML yang dihasilkan Emscripten di server Python, dan Anda akan melihatnya masih berjalan seperti biasa, sekarang hanya dengan teks yang sedikit dimodifikasi karena kita mengubah argumen printf() di fungsi main. Tentu saja, karena halaman HTML minimalis yang kita tulis memanggil file JS lem yang sama dan WASM yang sama, maka perubahan yang kita perkenalkan dalam panggilan printf() di dalam main() juga memengaruhinya, terlihat di log konsol.

Sekarang, kita bisa membuat halaman web baru yang diturunkan dari yang minimalis, tempat kita menambahkan tombol yang akan memanggil fungsi button_message() yang sudah dikompilasi ke dalam file WASM. Kode HTML ini masih memanggil file JS lem yang sama, dan ia memiliki beberapa kode JS tambahan di dalam tag <script> untuk mengontrol cara kerja tombol dan juga cara fungsi main() dipanggil saat dimuat:

html
<!DOCTYPE html>
<html>
<body>
    <script src="hello-wasm-tutorial.js"></script>
    <button onclick="Module._button_message()">Tekan Aku!</button>
    <script>
        Module.onRuntimeInitialized = () => {
            console.log("Modul WASM diinisialisasi.");
            Module._main(); // Panggil main() saat dimuat
        };
    </script>
</body>
</html>

Kode ini sedikit rumit karena masalah dalam program C kita yang sangat sederhana, tidak mengembalikan apa pun seperti string yang dapat diambil oleh aplikasi web. Jadi, kita menggunakan trik untuk mengambil teks yang dicetak oleh printf() dan menaruhnya di variabel JS yang kemudian dapat kita gunakan sesuka hati. Cara yang benar untuk menangani penerusan variabel akan dibahas di postingan terpisah.

Untuk saat ini, tetaplah dengan ini. Saat Anda memuat halaman sederhana baru ini dengan panggilan fungsi yang dikendalikan tombol, Anda akan melihat output awal, dan kemudian output setelah Anda mengklik tombol, keduanya muncul di konsol.

Langkah 7: Unduh File dan Unggah ke Server Anda

Karena tidak ada backend, prosedur ini sangat mudah. Unduh tiga file utama (HTML, WASM, JS) dari Codespaces ke komputer lokal Anda. Selanjutnya, unggah ketiga file tersebut ke folder yang tepat di situs web Anda. Pastikan semuanya berada dalam folder yang sama.

Akhirnya, kita hanya perlu membuka file HTML, dan voilĂ , semuanya berjalan!

Apa yang Akan Datang Berikutnya?

Saya harap Anda bersenang-senang seperti saya saat mempelajari dunia ini. Di postingan berikutnya, saya akan mencoba membahas hal-hal berikut:

  • Mengembalikan nilai dari C/WASM daripada hanya mengandalkan printf().
  • Meneruskan argumen dari JS ke WASM.
  • Keadaan WASM yang persisten antar panggilan.
  • Variabel global/statis di WASM.
  • Model modul WASM yang tetap "hidup" selama sesi.
  • Arsitektur interaksi antara browser dan program WASM.
  • Memahami bagaimana main() berfungsi seperti inisialisasi.

Semua ini, sambil membangun contoh interaktif stateful kecil seperti dalam tutorial ini. Dan tentu saja, lagi-lagi semuanya berbasis web menggunakan GitHub Codespaces.

Sampai jumpa lagi!

Referensi

https://towardsdatascience.com/your-first-webassembly-program-and-web-app-written-tested-and-deployed-entirely-in-the-web-browser/

Tags :

Client-side app
Web development
C programming
Emscripten
GitHub Codespaces
WASM
WebAssembly

đŸ”„ Sedang Ramai Dibaca