WebAssembly - Bekerja dengan C

Pengenalan WebAssembly dan C

Hai teman-teman, para ahli coding masa depan! Hari ini, kita akan mengemban perjalanan yang menarik ke dunia WebAssembly dan C. Sebagai guru ilmu komputer yang ramah di lingkungan tetangga Anda, saya di sini untuk mengorbit Anda dalam perjalanan ini dengan kegembiraan yang sama seperti yang saya miliki saat pertama kali menemukan keajaiban coding. Jadi, pasang sabuk pengaman dan mari kita masuk ke dalam!

WebAssembly - Working with C

Apa Itu WebAssembly?

WebAssembly, atau singkatannya Wasm, seperti bahasa rahasia yang memungkinkan browser web 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 dengan kecepatan hampir native.

Mengapa C dengan WebAssembly?

Sekarang, Anda mungkin bertanya-tanya, "Mengapa C? Bukan itu bahasa yang tua?" Well, para padawan muda, C seperti kakek bijak bahasa pemrograman. Itu telah ada untuk waktu yang lama, dan untuk alasan yang baik! 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 coding, kita perlu mengatur workshop digital kita. Jangan khawatir; itu lebih mudah daripada mengatur furnitur IKEA!

Menginstal Emscripten

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

Buka terminal Anda (jangan takut, itu hanya teman teks)
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 Anda

Ayo mulai dengan program "Hello, World!" yang 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;
}

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

Mengkompilasi ke WebAssembly

Sekarang, mari kita ubah kode C kita menjadi WebAssembly. Di terminal Anda, jalankan:

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

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

Menjalankan Program WebAssembly Anda

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 mengucapkan hallo, mari kita melakukan pekerjaan nyata. Kita akan membuat fungsi untuk menambahkan dua angka.

Membuat Fungsi Penjumlahan 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 memberitahu compiler, "Hey, fungsi ini penting! Jaga dia tetap ada!"

Mengkompilasi Fungsi

Kompilasikan 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 ke level berikutnya dan bekerja dengan memori. Itu seperti memberikan superpower WebAssembly Anda akses ke buku catatan tempat mereka dapat 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);
}

Kompilasikan 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>Jumlah 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 jumlah, dan kemudian membebaskan memori - semua menggunakan fungsi C yang dipanggil dari JavaScript!

Kesimpulan

Selamat, Anda telah mengambil langkah pertama ke dunia WebAssembly dengan C! Kita telah menutupi dasar-dasar, dari mengatur lingkungan Anda sampai bekerja dengan memori. Ingat, belajar coding 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()	Cetak teks ke konsol	printf("Hello, World!");
malloc()	Alokasi memori	int arr = (int)malloc(size * sizeof(int));
free()	Bebaskan memori yang dialokasikan	free(arr);
EMSCRIPTEN_KEEPALIVE	Pencegahan fungsi dari dioptimized	EMSCRIPTEN_KEEPALIVE int add(int a, int b)

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

Credits: Image by storyset

Tutorial Sebelumnya:

WebAssembly - Keselamatan

Tutorial Seterusnya:

WebAssembly - Bekerja dengan C++