WebAssembly - Bekerja dengan C++

Hai, para pemula pemrograman! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik ke dunia WebAssembly dan C++. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa menjamin bahwa meskipun topik ini mungkin tampak menakutkan pada awalnya, kita akan memecahkannya menjadi bagian kecil yang bahkan pemula sepenuhnya dapat mengerti. Jadi, mari kita buang sarung tangan dan masuk ke dalam!

Apa Itu WebAssembly?

Sebelum kita masuk ke kode, mari kita pahami apa itu WebAssembly. Bayangkan Anda mencoba berbicara kepada seseorang yang tidak mengenal bahasa Anda. Anda akan memerlukan seorang penerjemah, kan? WebAssembly seperti penerjemah itu bagi browser Anda. Itu memungkinkan program yang ditulis dalam bahasa seperti C++ dapat berjalan di browser dengan kecepatan mendekati native. Keren, kan?

Mengapa C++ dengan WebAssembly?

Anda mungkin bertanya-tanya, "Mengapa C++?" C++ adalah seperti pisau suisse dalam pemrograman - kuat, fleksibel, dan telah ada sejak lama. Ketika dikombinasikan dengan WebAssembly, itu memungkinkan kita membawa aplikasi tingkat kinerja ke web. Itu seperti menambah mesin turbo ke website Anda!

Menyiapkan Lingkungan Kerja

Sebelum kita menulis baris kode pertama, kita perlu mengatur ruang kerja kita. Jangan khawatir, saya akan memandu Anda langkah demi langkah:

1. Instal Emscripten: Ini adalah tongkat ajaib kita yang mengubah C++ menjadi WebAssembly.
2. Siapkan editor teks: Saya menyarankan Visual Studio Code, tetapi setiap editor teks akan cocok.
3. Buka terminal: Kita akan menggunakan ini untuk mengkompilasi kode kita.

Program WebAssembly Pertama Kita

Mari kita mulai dengan program "Hello, World!" yang sederhana. Ini adalah kode nya:

#include <emscripten/emscripten.h>
#include <stdio.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
void sayHello() {
printf("Hello, WebAssembly World!\n");
}
}

Sekarang, mari kitauraikan ini:

• #include <emscripten/emscripten.h>: Baris ini menyertakan file header Emscripten, memberikan kita akses ke fungsi-fungsi yang berkaitan dengan WebAssembly.
• extern "C": Ini memberitahu compiler untuk menggunakan penamaan gaya C untuk fungsi kita.
• EMSCRIPTEN_KEEPALIVE: Ini seperti menempatkan tanda "Jangan Hapus" pada fungsi kita, memastikan itu tersedia bagi JavaScript.
• void sayHello(): Ini adalah fungsi kita yang mencetak pesan.

Mengkompilasi Kode Kita

Waktu untuk memegang tongkat ajaib kita! Di terminal Anda, jalankan:

emcc hello.cpp -o hello.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

Perintah ini mungkin tampak seperti mantra dari Harry Potter, tetapi mari saya jelaskan:

• emcc: Ini adalah kompilernya.
• hello.cpp: File sumber kita.
• -o hello.html: Ini membuat file HTML yang kita bisa buka di browser.
• Flag lainnya adalah flag khusus untuk membuat WebAssembly bermain bersama JavaScript.

Menjalankan WebAssembly Kita

Buka file hello.html yang dihasilkan di browser Anda, buka konsol, dan ketik:

Module.ccall('sayHello', null, null, null);

Jika Anda melihat "Hello, WebAssembly World!" di konsol, selamat! Anda baru saja menjalankan C++ di browser Anda!

Contoh Lebih Kompleks: Kalkulator Fibonacci

Sekarang kita sudah mulai merasakan air, mari kita coba sesuatu yang lebih menantang - kalkulator nomor Fibonacci.

#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
}

Fungsi ini menghitung nomor Fibonacci ke-n secara rekursif. Ini bukan metode yang paling efisien, tetapi bagus untuk demonstrasi!

Kompilasikan itu seperti sebelumnya, lalu panggilnya dari JavaScript seperti ini:

console.log(Module.ccall('fibonacci', 'number', ['number'], [10]));

Ini seharusnya mencetak nomor Fibonacci ke-10 (yang adalah 55, sebetulnya).

Bekerja dengan Array

Mari kita tingkatkan dan bekerja dengan array. Ini adalah fungsi yang menghitung jumlah array:

#include <emscripten/emscripten.h>

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

Untuk menggunakan ini dari JavaScript, kita perlu melakukan sedikit kerja lebih:

let arr = new Int32Array([1, 2, 3, 4, 5]);
let buffer = Module._malloc(arr.length * arr.BYTES_PER_ELEMENT);
Module.HEAP32.set(arr, buffer >> 2);
let sum = Module.ccall('sumArray', 'number', ['number', 'number'], [buffer, arr.length]);
Module._free(buffer);
console.log(sum);  // Seharusnya mencetak 15

Ini mungkin tampak sulit, tetapi kita secara esensial:

1. Membuat array di JavaScript
2. Mengalokasikan memori di heap WebAssembly
3. Menyalin array kita ke memori itu
4. Memanggil fungsi kita
5. Membebaskan memori yang dialokasikan

Kesimpulan

Selamat! Anda sudah mengambil langkah pertama ke dunia WebAssembly dengan C++. Kita telah meliputi banyak hal, dari "Hello, World!" dasar hingga bekerja dengan array. Ingat, belajar pemrograman adalah seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan mudah kecewa jika Anda tidak mengerti segala sesuatu segera. Terus mencoba, terus mengode, dan terutama, terus bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode	Deskripsi
emcc	Perintah compiler Emscripten
EMSCRIPTEN_KEEPALIVE	Makro untuk mencegah fungsi dipptimalkan keluar
Module.ccall	Metode JavaScript untuk memanggil fungsi C++
Module._malloc	Mengalokasikan memori di heap WebAssembly
Module._free	Bebaskan memori yang dialokasikan di heap WebAssembly
Module.HEAP32	Int32Array pandangan ke memori WebAssembly

Ingat, WebAssembly dan C++ membuka dunia kemungkinan bagi pengembangan web. Langit adalah batas! Terus mengode, terus belajar, dan siapa tahu? Mungkin Anda yang akan menjadi orang yang mengajar kursus ini dalam beberapa tahun mendatang!

Credits: Image by storyset