Panduan Tutorial WebAssembly: Panduan untuk Pemula

Hai sana, para ahli WebAssembly masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia WebAssembly. Sebagai orang yang telah mengajar ilmu komputer lebih banyak tahun daripada yang saya inginkan ( mari katakan saya ingat saat disket masih benar-benar fleksibel), saya di sini untuk membuat petualangan ini semudah dan menyenangkan mogelijk. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu WebAssembly?

Bayangkan Anda sedang membangun benteng pasir. JavaScript seperti menggunakan tangan Anda - fleksibel dan mudah dimulai, tapi mungkin bukan cara tercepat untuk membangun benteng besar. WebAssembly, dari sisi lain, seperti memiliki set alat spesialis - mungkin memerlukan setup lebih banyak, tapi boy, itu bisa membangun hal-hal dengan cepat!

WebAssembly, sering disingkat menjadi Wasm, adalah format instruksi biner yang dirancang untuk eksekusi efisien di browser web. Itu seperti kode rahasia yang browser Anda pahami, memungkinkan program berjalan hampir kecepatan native.

Mengapa Anda Harus Menyukai Ini?

1. Kecepatan: WebAssembly sangat cepat. Itu seperti upgrade dari sepeda ke mobil sport bagi aplikasi web Anda.
2. Bervariasi Bahasa: Anda tidak lagi terbatas pada JavaScript. C, C++, Rust - semuanya datang!
3. Keamanan: WebAssembly berjalan dalam lingkungan sandboxed, menjaga hal-hal aman dan nyaman.

Memulai dengan WebAssembly

Menyiapkan Lingkungan Pengembangan

Sebelum kita mulai mengoding, kita perlu mengatur ruang kerja kita. Itu seperti menyiapkan dapur sebelum memasak makanan khusus. Ini adalah apa yang Anda butuhkan:

1. Browser modern (Chrome, Firefox, Safari, atau Edge)
2. Editor teks (Saya menyarankan Visual Studio Code, tapi gunakan apa yang Anda nyaman)
3. Toolkit Emscripten (kami akan menginstal ini bersama)

mari instal Emscripten:

#克隆 Emscripten repository
git clone https://github.com/emscripten-core/emsdk.git

# Masuk ke direktori yang dikloning
cd emsdk

# Unduh dan instal SDK paling baru
./emsdk install latest

# Aktifkan SDK paling baru
./emsdk activate latest

# Setel variabel lingkungan
source ./emsdk_env.sh

Jangan khawatir jika ini terlihat seperti gobbledygook saat ini. Pahami ini sebagai menyiapkan kanvas dan cat sebelum menciptakan karya kesenian!

Program WebAssembly Pertama Anda

mari mulai dengan program "Hello, World!" sederhana. Kita akan menulisnya dalam C dan kemudian mengkompilasi menjadi WebAssembly.

Langkah 1: Menulis Kode C

Buat file bernama hello.c dan tambahkan kode berikut:

#include <stdio.h>

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

Ini seperti menulis surat yang kita akan terjemahkan menjadi bahasa yang browser pahami.

Langkah 2: Kompilasi ke WebAssembly

Sekarang, mari kita ubah kode C kita menjadi WebAssembly. Jalankan perintah ini di terminal:

emcc hello.c -s WASM=1 -o hello.html

Perintah ini seperti memasukkan surat kita ke mesin terjemahan magis. Ini menciptakan tiga file:

• hello.wasm: biner WebAssembly
• hello.js: kode glue JavaScript
• hello.html: file HTML untuk menjalankan program kita

Langkah 3: Jalankan Program WebAssembly Anda

Buka file hello.html di browser Anda. Anda seharusnya melihat "Hello, WebAssembly World!" dicetak di halaman. Selamat! Anda baru saja menjalankan program WebAssembly pertama Anda!

Memahami Magic

mariuraikan apa yang baru saja terjadi:

1. Kita menulis program C sederhana.
2. Kita menggunakan Emscripten untuk mengkompilasi kode C kita menjadi WebAssembly.
3. Emscripten juga menghasilkan beberapa JavaScript untuk memuat dan menjalankan WebAssembly kita.
4. Browser menjalankan kode WebAssembly kita, mencetak pesan kita.

Itu seperti kita menulis surat dalam Bahasa Inggris (C), menerjemahkan itu ke bahasa universal (WebAssembly), dan kemudian memiliki penerjemah (JavaScript) membacanya keras di depan semua orang (browser).

Lanjutkan: Calculator Sederhana

Sekarang kita sudah mulai, mari kita coba sesuatu yang sedikit lebih interaktif. Kita akan membuat kalkulator sederhana yang menambahkan dua angka.

Langkah 1: Menulis Kode C

Buat file baru bernama calculator.c:

#include <emscripten.h>

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

Di sini, EMSCRIPTEN_KEEPALIVE seperti memberi stampel "IMPORTANT" besar pada fungsi kita. Itu memberitahu Emscripten untuk menjaga fungsi ini tersedia bagi JavaScript untuk dipanggil.

Langkah 2: Kompilasi ke WebAssembly

Kompilasi kalkulator kita:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Perintah ini sedikit lebih kompleks, tapi pahami ini sebagai memberikan instruksi khusus ke mesin terjemahan kita.

Langkah 3: Buat Antarmuka HTML

Buat file bernama calculator.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Calculator</title>
</head>
<body>
<h1>WebAssembly Calculator</h1>
<input type="number" id="num1" placeholder="Masukkan angka pertama">
<input type="number" id="num2" placeholder="Masukkan angka kedua">
<button onclick="calculateSum()">Tambah</button>
<p>Hasil: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

File HTML ini seperti membuat antarmuka pengguna yang ramah bagi kalkulator kita. Itu memiliki kotak input untuk angka kita dan tombol untuk memicu perhitungan.

Langkah 4: Jalankan Kalkulator WebAssembly Anda

Buka calculator.html di browser Anda. Anda seharusnya melihat dua kotak input dan tombol "Tambah". Masukkan dua angka, klik "Tambah", dan voila! Kalkulator WebAssembly Anda dalam aksi!

Kesimpulan

Dan begitu saja, teman-teman! Kita sudah mengambil langkah pertama ke dunia menarik WebAssembly. Kita sudah mengatur lingkungan kita, membuat program "Hello, World!" sederhana, dan bahkan membuat kalkulator sederhana.

Ingat, belajar WebAssembly seperti belajar menunggang sepeda. Mungkin agak wobble pada awalnya, tapi dengan latihan, Anda akan berjalan di seluruh dunia pengembangan web dalam waktu singkat. Tetap mencoba, tetap belajar, dan terutama, bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalami kemampuan WebAssembly dan menjelajahi bagaimana mengoptimalisasi performa. Sampai saat itu, coding yang menyenangkan!

Credits: Image by storyset