Indonesia

Tutorial WebAssembly

WebAssembly - Bekerja dengan C

Pengenalan WebAssembly dan C

Hai teman-teman, para ahli coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia WebAssembly dan C. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menghidahkan Anda dalam petualangan ini dengan kegembiraan yang sama seperti yang saya alami saat pertama kali menemukan keajaiban coding. Jadi, sabikan dan mari kita masuk ke dalam!

WebAssembly - Working with C

Apa Itu WebAssembly?

WebAssembly, atau disingkat Wasm, adalah seperti bahasa rahasia yang memungkinkan browser Anda menjalankan kode super cepat. Bayangkan jika browser Anda tiba-tiba mendapat superpower - itu apa yang WebAssembly lakukan! Itu memungkinkan kita menulis kode dalam bahasa seperti C dan menjalankannya di browser hampir dengan kecepatan native.

Mengapa C dengan WebAssembly?

Sekarang, Anda mungkin bertanya-tanya, "Mengapa C? Bukan itu bahasa yang tua?" Well, para padowan kecil, C adalah seperti kakek bijak dari bahasa pemrograman. Itu telah ada untuk waktu yang lama, dan untuk alasan yang kuat! C cepat, efisien, dan memiliki banyak kode yang sudah ada yang kita bisa gunakan. Dengan menggunakan C dengan WebAssembly, kita membawa kekuatan ini ke web.

Menyiapkan Lingkungan

Sebelum kita mulai mengoding, kita perlu mengatur tempat kerja digital kita. Jangan khawatir; itu lebih mudah daripada mengatur furnitur IKEA!

Menginstal Emscripten

Emscripten adalah alat ajaib kita yang akan mengubah kode C menjadi WebAssembly. Berikut cara mendapatkannya:

  1. Buka terminal Anda (jangan khawatir, itu hanya teman teks)
  2. Jalankan perintah berikut:
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Selamat! Anda baru saja mengatur laboratorium WebAssembly Anda.

Program WebAssembly Pertama

Ayo mulai dengan program "Hello, World!" sederhana. Itu seperti kata pertama bayi, tapi dalam kode!

Menulis Kode C

Buat file bernama hello.c dan tambahkan kode ini:

#include <stdio.h>

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

Snipet kecil ini memberitahu komputer untuk mencetak salam kita. Itu seperti mengajarkan burung untuk mengatakan "Hello" tapi jauh lebih keren!

Mengkompilasi ke WebAssembly

Sekarang, mari kitaubah kode C kita menjadi WebAssembly. Dalam terminal Anda, jalankan:

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

Perintah ini seperti mengayunkan tongkat ajaib. Itu menciptakan tiga file: hello.html, hello.js, dan hello.wasm.

Menjalankan Program WebAssembly

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

Bekerja dengan Fungsi

Sekarang kita sudah mengenal hallo, mari kita lakukan pekerjaan nyata. Kita akan membuat fungsi untuk menambahkan dua angka.

Membuat Fungsi Tambah Sederhana

Buat file baru bernama math.c:

#include <emscripten.h>

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

EMSCRIPTEN_KEEPALIVE adalah seperti mengatakan ke kompiler, "Hey, fungsi ini penting! Jaga dia!"

Mengkompilasi Fungsi

Kompilasi dengan:

emcc math.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o math.js

Ini menciptakan math.js dan math.wasm.

Menggunakan Fungsi di JavaScript

Sekarang, mari kita gunakan fungsi C ini di JavaScript. Buat file index.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Math</title>
</head>
<body>
<h1>WebAssembly Math</h1>
<p>Hasil: <span id="result"></span></p>
<script src="math.js"></script>
<script>
Module.onRuntimeInitialized = function() {
var result = Module._add(5, 7);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Buka ini di browser Anda, dan Anda akan melihat hasil penjumlahan 5 + 7!

Bekerja dengan Memori

Sekarang, mari kita maju sedikit dan bekerja dengan memori. Itu seperti memberikan superpower WebAssembly Anda akses ke buku catatan tempatnya bisa menulis hal-hal.

Mengalokasikan dan Menggunakan Memori

Buat file bernama memory.c:

#include <emscripten.h>
#include <stdlib.h>

EMSCRIPTEN_KEEPALIVE
int* create_array(int size) {
return (int*)malloc(size * sizeof(int));
}

EMSCRIPTEN_KEEPALIVE
void fill_array(int* arr, int size) {
for (int i = 0; i < size; i++) {
arr[i] = i * 2;
}
}

EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}

EMSCRIPTEN_KEEPALIVE
void free_array(int* arr) {
free(arr);
}

Kompilasi dengan:

emcc memory.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_create_array", "_fill_array", "_sum_array", "_free_array"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o memory.js

Sekarang, mari kita gunakan fungsi ini di JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Memory</title>
</head>
<body>
<h1>WebAssembly Memory Management</h1>
<p>Penjumlahan array: <span id="result"></span></p>
<script src="memory.js"></script>
<script>
Module.onRuntimeInitialized = function() {
const create_array = Module.cwrap('create_array', 'number', ['number']);
const fill_array = Module.cwrap('fill_array', null, ['number', 'number']);
const sum_array = Module.cwrap('sum_array', 'number', ['number', 'number']);
const free_array = Module.cwrap('free_array', null, ['number']);

const size = 10;
const ptr = create_array(size);
fill_array(ptr, size);
const sum = sum_array(ptr, size);
free_array(ptr);

document.getElementById('result').textContent = sum;
};
</script>
</body>
</html>

Contoh ini menunjukkan bagaimana kita dapat mengalokasikan memori, mengisi array, menghitung penjumlahannya, dan kemudian membebaskan memori - semua menggunakan fungsi C yang dipanggil dari JavaScript!

Kesimpulan

Selamat, Anda sudah mengambil langkah pertama ke dunia WebAssembly dengan C! Kita telah menutupi dasar-dasar, dari mengatur lingkungan Anda hingga bekerja dengan memori. Ingat, belajar mengoding adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Tetapi dengan setiap baris kode yang Anda tulis, Anda menjadi semakin mahir dalam bahasa komputer.

Sekarang, mari kita rangkum fungsi kunci yang kita pelajari:

Fungsi Deskripsi Contoh
printf() Mencetak teks ke konsol printf("Hello, World!");
malloc() Mengalokasikan memori int arr = (int)malloc(size * sizeof(int));
free() Membebaskan memori yang dialokasikan free(arr);
EMSCRIPTEN_KEEPALIVE Menghindari fungsi dari pengecilan EMSCRIPTEN_KEEPALIVE int add(int a, int b)

Tetap coding, tetap belajar, dan ingat - di dunia pemrograman, batasnya hanya imajinasi Anda! Selamat coding, para bintang teknologi masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
WebAssembly - Keamanan
Tutorial Selanjutnya:
WebAssembly - Bekerja dengan C++