Tiếng Việt

Hướng dẫn WebAssembly

WebAssembly - Làm việc với Go

Xin chào các siêu sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của WebAssembly bằng Go. Đừng lo lắng nếu những thuật ngữ này听起来 như những ngôn ngữ từ hành tinh khác - đến cuối bài hướng dẫn này, bạn sẽ có thể sử dụng chúng một cách lưu loát!

WebAssembly - Working with Go

WebAssembly là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu qua về WebAssembly. Hãy tưởng tượng bạn có một siêu xe đua (đó là WebAssembly) có thể chạy trên bất kỳ đường đua nào (trình duyệt web) với tốc độ kinh ngạc. Nó là cách để chạy các chương trình được viết bằng các ngôn ngữ như Go, C++, hoặc Rust trực tiếp trong trình duyệt web, giúp các ứng dụng web trở nên nhanh hơn và mạnh mẽ hơn.

Tại sao chọn WebAssembly với Go?

Go, ngôn ngữ chúng ta sẽ sử dụng hôm nay, giống như một cây kéo đa năng trong thế giới lập trình. Nó đơn giản, hiệu quả và giờ đây có thể chạy trong trình duyệt web nhờ WebAssembly. Đó như thể ban tặng siêu năng lực cho ứng dụng web của bạn!

Thiết lập Môi trường Go

Trước tiên, chúng ta cần thiết lập môi trường Go. Điều này giống như chuẩn bị nhà bếp trước khi chúng ta bắt đầu nấu một bữa ăn ngon.

  1. Cài đặt Go từ trang web chính thức (https://golang.org/)
  2. Thiết lậpGOPATH (Go sẽ hướng dẫn bạn trong quá trình cài đặt)
  3. Cài đặt một trình chỉnh sửa mã (Tôi khuyên dùng Visual Studio Code, nhưng bạn có thể sử dụng bất kỳ trình chỉnh sửa nào bạn thoải mái)

Chương Trình WebAssembly Go Đầu Tiên

Hãy bắt đầu với một chương trình đơn giản "Hello, WebAssembly!". Đừng lo lắng nếu bạn chưa hiểu hết mọi thứ ngay bây giờ - chúng ta sẽ phân tích từng bước.

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
}

Hãy phân tích này:

  1. package main: Điều này cho Go biết rằng đây là gói chính của chương trình của chúng ta.
  2. import: Chúng ta đang nhập hai gói - fmt để in và syscall/js để tương tác với JavaScript.
  3. func main(): Đây là điểm vào của chương trình của chúng ta.
  4. js.Global().Set("greet", js.FuncOf(greet)): Điều này làm cho hàm greet của chúng ta khả dụng cho JavaScript.
  5. <-make(chan bool): Điều này giữ cho chương trình của chúng ta chạy, chờ đợi các cuộc gọi từ JavaScript.
  6. func greet: Hàm này nhận một tên và cập nhật một phần tử HTML với lời chào.

Biên Dịch Chương Trình Go của Chúng Ta thành WebAssembly

Bây giờ, hãy biến mã Go của chúng ta thành WebAssembly. Mở terminal của bạn và chạy:

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

Lệnh này cho Go biết biên dịch chương trình của chúng ta cho JavaScript (GOOS=js) và WebAssembly (GOARCH=wasm).

Tạo Trang HTML để Chạy WebAssembly

Chúng ta cần một trang HTML để tải và chạy WebAssembly. Dưới đây là một trang đơn giản:

<!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>

Trang HTML này:

  1. Tạo một trường nhập cho tên
  2. Có một nút để gọi hàm greet
  3. Tải runtime WebAssembly (wasm_exec.js)
  4. Tải và chạy tệp WebAssembly của chúng ta (main.wasm)

Chạy Ứng dụng WebAssembly của Chúng Ta

Để chạy ứng dụng này, chúng ta cần một máy chủ web. Dưới đây là lệnh đơn giản để khởi động một máy chủ Python:

python -m http.server

Bây giờ, mở trình duyệt của bạn và truy cập http://localhost:8000. Bạn nên thấy trang của chúng ta!

Hiểu Đúng Đầu ra

Khi bạn nhập tên và nhấp vào "Greet", bạn sẽ thấy một lời chào cá nhân hóa xuất hiện. Đây là hàm Go của chúng ta đang chạy trong trình duyệt, nhờ vào WebAssembly!

Kết Luận

Chúc mừng! Bạn vừa tạo xong ứng dụng WebAssembly Go đầu tiên của mình. Chúng ta chỉ mới chạm đến bề mặt, nhưng tôi hy vọng rằng điều này đã khơi dậy sự tò mò của bạn để khám phá thêm.

Nhớ rằng, học lập trình giống như học một ngôn ngữ mới hoặc một nhạc cụ mới. Nó đòi hỏi sự luyện tập, kiên nhẫn và kiên trì. Nhưng với mỗi bước, bạn đang mở khóa những khả năng mới và mở rộng tiềm năng sáng tạo của mình.

Tiếp tục lập trình, tiếp tục khám phá, và quan trọng nhất, hãy vui vẻ!

Phương pháp Mô tả
js.Global() Truy cập đối tượng JavaScript toàn cục
js.FuncOf() Chuyển đổi một hàm Go thành một hàm JavaScript
js.Value Đại diện cho một giá trị JavaScript
Call() Gọi một phương thức JavaScript
Set() Đặt một thuộc tính JavaScript
Get() Lấy một thuộc tính JavaScript
String() Chuyển đổi một giá trị JavaScript thành chuỗi Go

Bảng này tóm tắt các phương thức chính chúng ta đã sử dụng để tương tác giữa Go và JavaScript. Khi bạn tiếp tục hành trình WebAssembly của mình, bạn sẽ thấy rằng các phương thức này rất hữu ích!

Credits: Image by storyset

Hướng Dẫn Trước:
WebAssembly - Làm việc với Rust
Hướng Dẫn Tiếp Theo:
WebAssembly - Làm việc với Node.js