Malay

Tutorial WebAssembly

WebAssembly - Bekerja dengan Go

Hai teman-teman, para bintang coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia WebAssembly menggunakan Go. Jangan khawatir jika istilah-istilah ini terdengar seperti bahasa asing saat ini - pada akhir panduan ini, Anda akan bisa mengucapkan mereka dengan lancar!

WebAssembly - Working with Go

Apa Itu WebAssembly?

Sebelum kita masuk ke kode, mari kita pahami apa itu WebAssembly. Bayangkan Anda memiliki mobil balap super cepat (itu WebAssembly) yang dapat berlari di setiap lintasan (peramban web) dengan kecepatan yang menakjubkan. Itu adalah cara untuk menjalankan program yang ditulis dalam bahasa seperti Go, C++, atau Rust langsung di peramban web, membuat aplikasi web lebih cepat dan lebih kuat.

Mengapa Memilih WebAssembly dengan Go?

Go, bahasa pilihan kita hari ini, adalah seperti pisau瑞士 Army di dunia pemrograman. Itu sederhana, efisien, dan sekarang bisa berjalan di peramban web berkat WebAssembly. Itu seperti memberikan kekuatan super pada aplikasi web Anda!

Menyiapkan Lingkungan Go

Pertama-tama, kita perlu mengatur lingkungan Go kita. Itu seperti menyiapkan dapur sebelum kita mulai memasak makanan lezat.

  1. Instal Go dari situs resmi (https://golang.org/)
  2. Setel GOPATH (Go akan memandu Anda melalui ini saat instalasi)
  3. Instal editor kode (Saya menyarankan Visual Studio Code, tetapi gunakan apa yang Anda nyaman)

Program WebAssembly Go Pertama Kita

Ayo mulai dengan program sederhana "Hello, WebAssembly!". Jangan khawatir jika Anda belum mengerti segalanya - kita akan memecahnya secara berangsur-angsur.

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("Hello, %s! Welcome to WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

Mari kitauraikan ini:

  1. package main: Ini memberitahu Go bahwa ini adalah paket utama program kita.
  2. import: Kita mengimpor dua paket - fmt untuk mencetak dan syscall/js untuk berinteraksi dengan JavaScript.
  3. func main(): Ini adalah titik masuk program kita.
  4. js.Global().Set("greet", js.FuncOf(greet)): Ini membuat fungsi greet kita tersedia untuk JavaScript.
  5. <-make(chan bool): Ini menjaga program kita berjalan, menunggu panggilan JavaScript.
  6. func greet: Fungsi ini mengambil nama dan memperbarui elemen HTML dengan salam.

Kompilasi Program Go Kita ke WebAssembly

Sekarang, mari kitaubah kode Go kita menjadi WebAssembly. Buka terminal Anda dan jalankan:

GOOS=js GOARCH=wasm go build -o main.wasm

Perintah ini memberitahu Go untuk mengkompilasi program kita untuk JavaScript (GOOS=js) dan WebAssembly (GOARCH=wasm).

Membuat Halaman HTML untuk Menjalankan WebAssembly

Kita perlu halaman HTML untuk memuat dan menjalankan WebAssembly. Ini adalah salah satu yang sederhana:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly Demo</h1>
<input id="name" type="text" placeholder="Enter your name">
<button onclick="greet(document.getElementById('name').value)">Greet</button>
<p id="greeting"></p>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</body>
</html>

Halaman HTML ini:

  1. Membuat field input untuk nama
  2. Memiliki tombol yang memanggil fungsi greet
  3. Memuat runtime WebAssembly (wasm_exec.js)
  4. Memuat dan menjalankan file WebAssembly (main.wasm)

Menjalankan Aplikasi WebAssembly Kita

Untuk menjalankan ini, kita perlu server web. Ini adalah perintah Python sederhana untuk memulainya:

python -m http.server

Sekarang, buka browser Anda dan buka http://localhost:8000. Anda seharusnya melihat halaman kita!

Mengerti Output

Ketika Anda memasukkan nama Anda dan mengklik "Greet", Anda akan melihat salam pribadi muncul. Ini adalah fungsi Go kita yang berjalan di peramban, berkat WebAssembly!

Kesimpulan

Selamat! Anda baru saja menciptakan aplikasi WebAssembly Go pertama Anda. Kita baru saja menggesek permukaan saja, tapi saya harap ini telah memicu kecurigaan Anda untuk mengembangkan lebih banyak.

Ingat, belajar pemrograman adalah seperti belajar bahasa baru atau alat musik. Itu memerlukan latihan, kesabaran, dan kekerasan. Tetapi dengan setiap langkah, Anda membuka kemungkinan baru dan memperluas potensi kreatif Anda.

Terus coding, terus eksplorasi, dan yang paling penting, bersenang-senang!

Credits: Image by storyset

Tutorial Sebelumnya:
WebAssembly - Bekerja dengan Rust
Tutorial Seterusnya:
WebAssembly - Bekerja dengan Node.js