Indonesia

Tutorial WebAssembly

WebAssembly - Bekerja dengan Go

Hai teman-teman, bakal bintang coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia WebAssembly menggunakan Go. Jangan khawatir jika istilah ini terdengar seperti bahasa asing saat ini - pada akhir panduan ini, Anda akan bisa mengucapkannya 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 mana saja (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, seperti pisau瑞士 Army di dunia pemrograman. Itu sederhana, efisien, dan sekarang bisa berjalan di peramban web karena WebAssembly. Itu seperti memberikan kekuatan super ke 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 merekomendasikan Visual Studio Code, tapi gunakan apa yang Anda nyaman)

Program Go WebAssembly Pertama Kita

Ayo mulai dengan program sederhana "Hello, WebAssembly!". Jangan khawatir jika Anda belum mengerti semua - kita akan membongkar itu langkah demi langkah.

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 mengatakan ke 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 mengatakan ke Go untuk mengkompilasi program kita untuk JavaScript (GOOS=js) dan WebAssembly (GOARCH=wasm).

Membuat Halaman HTML untuk Menjalankan WebAssembly Kita

Kita perlu halaman HTML untuk memuat dan menjalankan WebAssembly kita. Ini adalah 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 kita (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 kunjungi http://localhost:8000. Anda seharusnya melihat halaman kita!

Memahami Output

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

Kesimpulan

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

Ingat, belajar pemrograman 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 menjelajahi, dan yang paling penting, bersenang-senang!

Metode Deskripsi
js.Global() Mengakses objek JavaScript global
js.FuncOf() Mengonversi fungsi Go menjadi fungsi JavaScript
js.Value Menresentasikan nilai JavaScript
Call() Memanggil metode JavaScript
Set() Mengatur properti JavaScript
Get() Mengambil properti JavaScript
String() Mengonversi nilai JavaScript menjadi string

Tabel ini menggabungkan metode utama yang kita gunakan untuk berinteraksi antara Go dan JavaScript. Ketika Anda terus melanjutkan perjalanan WebAssembly Anda, Anda akan menemukan metode ini sangat berguna!

Credits: Image by storyset

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