WebAssembly - "Hello World" (ID)

Halo, para programer yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia WebAssembly. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - kita akan mulai dari awal dan langkah per langkah. Pada akhir panduan ini, Anda akan membuat program WebAssembly pertama Anda yang menampilkan pesan "Hello World" klasik. mari kita mulai!

Apa Itu WebAssembly?

Sebelum kita mulai mengoding, mari kita pahami apa itu WebAssembly. WebAssembly, sering disingkat menjadi Wasm, adalah format instruksi biner untuk mesin virtual berbasis stack. Itu dirancang sebagai target portabel untuk kompilasi bahasa tingkat tinggi seperti C, C++, dan Rust, memungkinkan penggunaan di web untuk aplikasi klien dan server.

Pertimbangkan WebAssembly sebagai cara untuk menjalankan kode tingkat kinerja tinggi di browser web. Itu seperti memberikan superpower ke aplikasi web Anda!

Menyiapkan Lingkungan Kerja

Untuk memulai dengan WebAssembly, kita perlu mengatur lingkungan pengembangan kita. Untuk panduan ini, kita akan menggunakan alat online sederhana yang disebut WasmFiddle (https://wasmldedle.net/). Itu memungkinkan kita menulis, mengkompilasi, dan menjalankan kode WebAssembly langsung di browser kita.

Program WebAssembly Pertama Kita

Langkah 1: Menulis Kode C

mari kita mulai dengan menulis program C sederhana yang mencetak "Hello World". Jangan khawatir jika Anda tidak familiar dengan C - saya akan menjelaskan setiap baris.

#include <stdio.h>

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

mari kitauraikan ini:

1. #include <stdio.h>: Baris ini memberitahu compiler untuk menyertakan pustaka input/output standar, yang mengandung fungsi printf yang kita akan gunakan.
2. int main(): Ini adalah fungsi utama tempat eksekusi program kita dimulai.
3. printf("Hello World!\n");: Baris ini mencetak "Hello World!" ke konsol. \n di akhir menambah baris baru.
4. return 0;: Ini menunjukkan bahwa program kita telah selesai secara sukses.

Langkah 2: Mengkompilasi ke WebAssembly

Sekarang, mari kita kompilasi kode C ini ke WebAssembly. Di WasmFiddle, Anda dapat menempelkan kode C ke panel kiri dan klik "Build". Kode WebAssembly akan muncul di panel tengah.

Langkah 3: Menjalankan WebAssembly

Untuk menjalankan kode WebAssembly kita, WasmFiddle menyediakan panel JavaScript di sebelah kanan. Berikut adalah kode untuk menjalankan WebAssembly kita:

Module.onRuntimeInitialized = function() {
Module._main();
};

Kode ini memberitahu browser untuk menjalankan fungsi main kita saat modul WebAssembly siap.

Output

Ketika Anda klik "Run" di WasmFiddle, Anda seharusnya melihat "Hello World!" muncul di output konsol di bagian bawah halaman. Selamat! Anda baru saja menjalankan program WebAssembly pertama Anda!

Mengerti apa yang Terjadi

mari kitaambil sedikit waktu untuk mengerti apa yang terjadi:

1. Kita menulis program C sederhana.
2. Program C kita dikompilasi menjadi WebAssembly, sebuah bahasa tingkat rendah yang dapat dijalankan di browser.
3. Kita menggunakan JavaScript untuk memuat dan menjalankan kode WebAssembly kita.
4. Kode WebAssembly menjalankan fungsi printf kita, yang menampilkan "Hello World!" di konsol.

Itu seperti kita telah mengajarkan browser kita bahasa baru dan kemudian menggunakan bahasa itu untuk menyapa dunia!

Mengapa Menggunakan WebAssembly?

Anda mungkin berpikir, "Mengapa harus mengalami kesulitan ini saat kita bisa menggunakan JavaScript saja?" Pertanyaan yang bagus! WebAssembly memiliki beberapa keuntungan:

1. Kinerja: WebAssembly dapat menjalankan di kecepatan mendekati native, membuatnya jauh lebih cepat daripada JavaScript untuk tugas yang memerlukan komputasi intens.
2. Pilihan Bahasa: Anda dapat menulis kode dalam bahasa seperti C, C++, atau Rust, yang mungkin lebih cocok untuk tugas tertentu atau lebih familiar bagi beberapa pengembang.
3. Keamanan: WebAssembly menjalankan di lingkungan sandboxed, memberikan lapisan keamanan ekstra.

Kesimpulan

Selamat atas menulis dan menjalankan program WebAssembly pertama Anda! Kita baru saja menggores permukaan dari apa yang mungkin dilakukan dengan WebAssembly, tapi saya harap panduan ini telah memicu minat Anda terhadap teknologi ini.

Ingat, setiap ahli pernah menjadi pemula. Teruslatihan, tetap curiga, dan jangan takut untuk mencoba. Siapa tahu? Aplikasi web revolusioner berikutnya mungkin akan dibangun dengan keterampilan WebAssembly yang Anda kembangkan saat ini!

Dalam pelajaran berikutnya, kita akan jelajahi contoh WebAssembly yang lebih kompleks dan belajar bagaimana mengintegrasikan WebAssembly dengan HTML dan CSS untuk membuat halaman web interaktif. Sampaijumpa!

Metode	Deskripsi
#include <stdio.h>	Menyertakan pustaka input/output standar
int main()	Menentukan fungsi utama dimana eksekusi program dimulai
printf()	Mencetak output format ke konsol
return 0;	Menunjukkan penyelesaian program yang sukses
Module.onRuntimeInitialized	Metode JavaScript untuk menjalankan kode saat modul WebAssembly siap
Module._main()	Memanggil fungsi main di modul WebAssembly

Credits: Image by storyset