Italiano

Tutorial WebAssembly

WebAssembly - Lavorare con Go

Ciao a tutti, futuri superstar del programming! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di WebAssembly utilizzando Go. Non preoccupatevi se questi termini vi sembrano lingue aliene ora - alla fine di questo tutorial, li parlerete fluentemente!

WebAssembly - Working with Go

Cos'è WebAssembly?

Prima di immergerci nel codice, capiremo cos'è WebAssembly. Immagina di avere una super-veloce auto da corsa (quella è WebAssembly) che può correre su qualsiasi pista (i browser web) a velocità incredibili. È un modo per eseguire programmi scritti in linguaggi come Go, C++, o Rust direttamente nei browser web, rendendo le applicazioni web più rapide e potenti.

Perché usare WebAssembly con Go?

Go, il nostro linguaggio di scelta oggi, è come un coltello svizzero nel mondo della programmazione. È semplice, efficiente e ora può funzionare nei browser web grazie a WebAssembly. È come dare superpoteri alle tue applicazioni web!

Configurare il Nostro Ambiente Go

Prima di tutto, dobbiamo configurare il nostro ambiente Go. È come preparare la nostra cucina prima di iniziare a cucinare un delizioso pasto.

  1. Installa Go dal sito ufficiale (https://golang.org/)
  2. Configura il tuo GOPATH (Go ti guiderà attraverso questo durante l'installazione)
  3. Installa un editor di codice (ti consiglio Visual Studio Code, ma usa quello con cui sei a tuo agio)

Il Nostro Primo Programma Go WebAssembly

Iniziamo con un semplice programma "Ciao, WebAssembly!". Non preoccuparti se non capisci tutto ancora - lo analizzeremo passo per passo.

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Ciao, 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("Ciao, %s! Benvenuto in WebAssembly.", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

Ecco una spiegazione:

  1. package main: Questo dice a Go che questo è il pacchetto principale del nostro programma.
  2. import: Stiamo importando due pacchetti - fmt per stampare e syscall/js per interagire con JavaScript.
  3. func main(): Questo è il punto di ingresso del nostro programma.
  4. js.Global().Set("greet", js.FuncOf(greet)): Questo rende la nostra funzione greet disponibile per JavaScript.
  5. <-make(chan bool): Questo keeps il nostro programma in esecuzione, in attesa di chiamate JavaScript.
  6. func greet: Questa funzione prende un nome e aggiorna un elemento HTML con un saluto.

Compilare Il Nostro Programma Go in WebAssembly

Ora, trasformiamo il nostro codice Go in WebAssembly. Apri il tuo terminale e esegui:

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

Questo comando dice a Go di compilare il nostro programma per JavaScript (GOOS=js) e WebAssembly (GOARCH=wasm).

Creare una Pagina HTML per Eseguire il Nostro WebAssembly

Abbiamo bisogno di una pagina HTML per caricare ed eseguire il nostro WebAssembly. Ecco una semplice:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Dimostrazione Go WebAssembly</h1>
<input id="name" type="text" placeholder="Inserisci il tuo nome">
<button onclick="greet(document.getElementById('name').value)">Saluta</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>

Questa pagina HTML:

  1. Crea un campo di input per un nome
  2. Ha un pulsante che chiama la nostra funzione greet
  3. Carica il runtime di WebAssembly (wasm_exec.js)
  4. Carica ed esegue il nostro file WebAssembly (main.wasm)

Eseguire la Nostra Applicazione WebAssembly

Per eseguire questo, abbiamo bisogno di un server web. Ecco un semplice comando Python per avviarne uno:

python -m http.server

Ora, apri il tuo browser e vai a http://localhost:8000. Dovresti vedere la nostra pagina!

Comprendere l'Output

Quando inserisci il tuo nome e clicchi su "Saluta", vedrai un saluto personalizzato apparire. Questo è la nostra funzione Go che viene eseguita nel browser, grazie a WebAssembly!

Conclusione

Congratulations! Hai appena creato la tua prima applicazione Go WebAssembly. Abbiamo solo sfiorato la superficie qui, ma spero che questo abbia suscitato la tua curiosità per esplorare di più.

Ricorda, imparare a programmare è come imparare una nuova lingua o uno strumento musicale. Richiede pratica, pazienza e perseveranza. Ma con ogni passo, stai sbloccando nuove possibilità e espandendo il tuo potenziale creativo.

Continua a programmare, continua a esplorare e, soprattutto, divertiti!

Metodo Descrizione
js.Global() Accede all'oggetto JavaScript globale
js.FuncOf() Converte una funzione Go in una funzione JavaScript
js.Value Rappresenta un valore JavaScript
Call() Chiama un metodo JavaScript
Set() Imposta una proprietà JavaScript
Get() Ottiene una proprietà JavaScript
String() Converte un valore JavaScript in una stringa Go

Questa tabella riassume i metodi chiave che abbiamo utilizzato per interagire tra Go e JavaScript. Continuando il tuo viaggio con WebAssembly, troverai questi metodi estremamente utili!

Credits: Image by storyset

Tutorial precedente:
WebAssembly - Lavorare con Rust
Prossimo tutorial:
WebAssembly - Lavorare con Node.js