ID (Indonesia) Translation

Selamat pagi, para pemrogram yang bersemangat! Saya sangat gembira menjadi panduan Anda dalam perjalanan 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 terlihat menakutkan pada awalnya, kita akan memecahkannya menjadi bagian kecil yang bahkan pemula sepenuhnya dapat mengerti. mari kita lipatkan lengan dan masuk ke dalam!

Apa Itu WebAssembly?

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

Mengapa C++ dengan WebAssembly?

Anda mungkin bertanya-tanya, "Mengapa C++?" C++ seperti pisau Swiss Army dalam dunia pemrograman - kuat, fleksibel, dan telah ada sejak lama. Ketika digabungkan dengan WebAssembly, itu memungkinkan kita membawa aplikasi tingkat kinerja tinggi ke web. Itu seperti menurbocharge website Anda!

Menyiapkan Lingkungan Kerja

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

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

Program WebAssembly Pertama Kita

Ayo mulai dengan program "Hello, World!" 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 terkait WebAssembly.
• extern "C": Ini memberitahu compiler untuk menggunakan penamaan gaya C untuk fungsi kita.
• EMSCRIPTEN_KEEPALIVE: Ini seperti memberi tanda "Jangan Hapus" pada fungsi kita, memastikan itu tersedia bagi JavaScript.
• void sayHello(): Ini adalah fungsi kita yang mencetak salam.

Mengkompilasi Kode Kita

Waktu untuk mengayunkan 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 terlihat seperti mantra dari Harry Potter, tapi biarkan saya menjelaskan:

• emcc: Ini adalah compiler kita.
• hello.cpp: File sumber kita.
• -o hello.html: Ini membuat file HTML yang kita dapat buka di browser.
• Sisa nya adalah flag spesial untuk membuat WebAssembly kita bermain rapih dengan JavaScript.

Menjalankan WebAssembly Kita

Buka 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 telah menjalankan C++ di browser Anda!

Contoh Lebih Kompleks: Kalkulator Fibonacci

Sekarang kita sudah mulai merasakan air, mari kita coba sesuatu yang sedikit 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. Itu bukan metode yang paling efisien, tapi itu 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, sebenarnya).

Menggunakan Array

Ayo naik tingkat dan kerjakan 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 terlihat sulit, tapi 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 telah mengambil langkah pertama ke dunia WebAssembly dengan C++. Kita telah menempuh jarak yang cukup jauh, dari "Hello, World!" sederhana hingga bekerja dengan array. Ingat, belajar pemrograman seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum mengerti segala sesuatu segera. Tetap mencoba, tetap mengode, dan terutama, tetap bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

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

Ingat, WebAssembly dan C++ membuka dunia kemungkinan bagi pengembangan web. Langit adalah batas! Tetap mengode, tetap belajar, dan siapa tahu, mungkin Anda yang akan mengajar kursus ini dalam beberapa tahun mendatang!

Credits: Image by storyset