Indonesia

Tutorial WebAssembly

Panduan Tutorial WebAssembly: panduan untuk pemula

Halo sana, para ahli WebAssembly masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia WebAssembly. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun-tahun yang lebih banyak dari yang saya inginkan ( mari katakan saja saya ingat saat cakram lembut benar-benar lembut), saya di sini untuk membuat petualangan ini sebisa mungkin menyenangkan dan mudah diakses. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!

WebAssembly - Home

Apa Itu WebAssembly?

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

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

Mengapa Anda Harus Menyukai Ini?

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

Memulai dengan WebAssembly

Menyiapkan Lingkungan Pengembangan

Sebelum kita mulai mengoding, kita perlu menyiapkan ruang kerja kami. Itu seperti mempersiapkan dapur Anda sebelum memasak makanan kelas dunia. Berikut adalah apa yang Anda butuhkan:

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

Mari kita instal Emscripten:

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

# Masuk ke direktori yang diklon
cd emsdk

# Unduh dan instal tools SDK terbaru
./emsdk install latest

# Aktifkan tools SDK terbaru
./emsdk activate latest

# Setel variabel lingkungan
source ./emsdk_env.sh

Jangan khawatir jika ini terlihat sepertiongkos-ongkos saat ini. Pikirkan itu sebagai menyiapkan kanvas dan cat Anda sebelum menciptakan karya kesenian!

Program WebAssembly Pertama Anda

Mari kita mulai dengan program "Hello, World!" sederhana. Kita akan menulisnya dalam C dan kemudian kompailnya ke 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 ke bahasa yang browser Anda pahami.

Langkah 2: Kompail ke WebAssembly

Sekarang, biarkan kitaubah kode C kita menjadi WebAssembly. Jalankan perintah ini di terminal Anda:

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

Perintah ini seperti memasukkan surat kita ke mesin terjemahan ajaib. Itu menciptakan tiga file:

  • hello.wasm: Binari 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

Mari kitauraikan apa yang baru saja terjadi:

  1. Kita menulis program C sederhana.
  2. Kita menggunakan Emscripten untuk mengkompail kode C kita ke WebAssembly.
  3. Emscripten juga menghasilkan sedikit kode 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 luar dalam cara yang dapat dipahami oleh semua (browser).

Lanjutkan: Kalkulator Sederhana

Sekarang kita sudah mulai, mari kita coba sesuatu yang sedikit lebih interaktif. Kita akan menciptakan 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;
}

Disini, EMSCRIPTEN_KEEPALIVE seperti memberi stempel "PENTING" besar pada fungsi kita. Itu memberitahu Emscripten untuk menjaga fungsi ini tersedia untuk JavaScript untuk dipanggil.

Langkah 2: Kompail ke WebAssembly

Kompail 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 pikirkan itu 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 untuk kalkulator kita. Itu memiliki kotak masukan untuk angka-angka kita dan tombol untuk memicu perhitungan.

Langkah 4: Jalankan Kalkulator WebAssembly Anda

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

Kesimpulan

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

Ingat, belajar WebAssembly seperti belajar menunggang sepeda. Mungkin terlihat wobble-wobble saat awal, tapi dengan latihan, Anda akan berjalan di dunia pengembangan web dalam waktu singkat. Tetap mencoba, tetap belajar, dan yang paling penting, bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalami kemampuan WebAssembly dan mengeksplor bagaimana mengoptimalisasi kinerja. Sampai saat itu, selamat berkoding!

Credits: Image by storyset

 
Tutorial Selanjutnya:
WebAssembly - Ikhtisar