Italiano

Tutorial WebAssembly

WebAssembly - Lavorare con C

Introduzione a WebAssembly e C

Ciao a tutti, futuri maghi della programmazione! Oggi ci imbarciamo in un viaggio entusiasmante nel mondo di WebAssembly e C. Come il vostro amico del quartiere insegnante di scienze informatiche, sono qui per guidarvi in questa avventura con la stessa entusiasmo che avevo quando ho scoperto per la prima volta la magia della programmazione. Allora, mettetevi comodi e tuffiamoci!

WebAssembly - Working with C

Cos'è WebAssembly?

WebAssembly, o Wasm per brevità, è come una lingua segreta che permette al vostro browser web di eseguire codice super-veloce. Immagina se il tuo browser suddenemente assumesse superpoteri - questo è esattamente ciò che fa WebAssembly! Ci permette di scrivere codice in linguaggi come C e eseguirlo nel browser a velocità quasi nativa.

Perché C con WebAssembly?

Ora, potreste chiedervi, "Perché C? Non è un linguaggio vecchio?" Beh, miei giovani padawan, C è come il saggio nonno dei linguaggi di programmazione. È stato intorno da anni, e per un buon motivo! C è veloce, efficiente e ha una montagna di codice esistente che possiamo utilizzare. Utilizzando C con WebAssembly, stiamo portando questa potenza sul web.

Configurazione dell'Ambiente

Prima di iniziare a programmare, dobbiamo allestire il nostro laboratorio digitale. Non preoccupatevi; è più facile dell'assemblare mobili IKEA!

Installazione di Emscripten

Emscripten è il nostro strumento magico che trasformerà il codice C in WebAssembly. Ecco come ottenerlo:

  1. Apri il terminale (non aver paura, è solo un amico testuale)
  2. Esegui i seguenti comandi:
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Congratulazioni! Hai appena allestito il tuo laboratorio WebAssembly.

Il Tuo Primo Programma WebAssembly

Iniziamo con un semplice programma "Ciao, Mondo!". È come le prime parole di un bambino, ma in codice!

Scrivere il Codice C

Crea un file chiamato hello.c e aggiungi questo codice:

#include <stdio.h>

int main() {
printf("Ciao, Mondo WebAssembly!\n");
return 0;
}

Questo piccolo frammento sta dicendo al computer di stampare il nostro saluto. È come insegnare a un pappagallo a dire "Ciao", ma molto più cool!

Compilare in WebAssembly

Ora, trasformiamo il nostro codice C in WebAssembly.Nel terminale, esegui:

emcc hello.c -s WASM=1 -o hello.html

Questo comando è come scoccare una magia. Crea tre file: hello.html, hello.js, e hello.wasm.

Eseguire il Programma WebAssembly

Apri il file hello.html nel tuo browser. Dovresti vedere "Ciao, Mondo WebAssembly!" stampato. Congratulazioni! Hai appena eseguito il tuo primo programma WebAssembly!

Lavorare con le Funzioni

Ora che abbiamo detto ciao, facciamo un po' di lavoro vero. Creeremo una funzione per sommare due numeri.

Creare una Funzione di Somma Semplice

Crea un nuovo file chiamato math.c:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

EMSCRIPTEN_KEEPALIVE è come dire al compilatore, "Ehi, questa funzione è importante! Tienila lì!"

Compilare la Funzione

Compilala con:

emcc math.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o math.js

Questo crea math.js e math.wasm.

Utilizzare la Funzione in JavaScript

Ora, utilizziamo la nostra funzione C in JavaScript. Crea un file index.html:

<!DOCTYPE html>
<html>
<head>
<title>Matematica WebAssembly</title>
</head>
<body>
<h1>Matematica WebAssembly</h1>
<p>Risultato: <span id="result"></span></p>
<script src="math.js"></script>
<script>
Module.onRuntimeInitialized = function() {
var result = Module._add(5, 7);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Apri questo nel tuo browser, e vedrai il risultato di 5 + 7!

Lavorare con la Memoria

Ora, diventiamo un po' più avanzati e lavoriamo con la memoria. È come dare ai superpoteri del WebAssembly un quaderno dove possono scrivere cose.

Allocare e Utilizzare Memoria

Crea un file chiamato memory.c:

#include <emscripten.h>
#include <stdlib.h>

EMSCRIPTEN_KEEPALIVE
int* create_array(int size) {
return (int*)malloc(size * sizeof(int));
}

EMSCRIPTEN_KEEPALIVE
void fill_array(int* arr, int size) {
for (int i = 0; i < size; i++) {
arr[i] = i * 2;
}
}

EMSCRIPTEN_KEEPALIVE
int sum_array(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}

EMSCRIPTEN_KEEPALIVE
void free_array(int* arr) {
free(arr);
}

Compilalo con:

emcc memory.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_create_array", "_fill_array", "_sum_array", "_free_array"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o memory.js

Ora, utilizziamo queste funzioni in JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>Gestione Memoria WebAssembly</title>
</head>
<body>
<h1>Gestione Memoria WebAssembly</h1>
<p>Suma dell'array: <span id="result"></span></p>
<script src="memory.js"></script>
<script>
Module.onRuntimeInitialized = function() {
const create_array = Module.cwrap('create_array', 'number', ['number']);
const fill_array = Module.cwrap('fill_array', null, ['number', 'number']);
const sum_array = Module.cwrap('sum_array', 'number', ['number', 'number']);
const free_array = Module.cwrap('free_array', null, ['number']);

const size = 10;
const ptr = create_array(size);
fill_array(ptr, size);
const sum = sum_array(ptr, size);
free_array(ptr);

document.getElementById('result').textContent = sum;
};
</script>
</body>
</html>

Questo esempio mostra come possiamo allocare memoria, riempire un array, calcolare la somma e poi liberare la memoria - tutto utilizzando funzioni C chiamate da JavaScript!

Conclusione

Congratulazioni, hai fatto i tuoi primi passi nel mondo di WebAssembly con C! Abbiamo coperto le basi, dalla configurazione dell'ambiente al lavoro con la memoria. Ricorda, imparare a programmare è come imparare una nuova lingua - richiede pratica e pazienza. Ma con ogni riga di codice che scrivi, diventi sempre più fluente nella lingua dei computer.

Mentre chiudiamo, ecco una tabella che riassume le funzioni chiave che abbiamo imparato:

Funzione Descrizione Esempio
printf() Stampa testo nella console printf("Ciao, Mondo!");
malloc() Alloca memoria int arr = (int)malloc(size * sizeof(int));
free() Libera memoria allocata free(arr);
EMSCRIPTEN_KEEPALIVE Impedisce che la funzione venga ottimizzata via EMSCRIPTEN_KEEPALIVE int add(int a, int b)

Continua a programmare, continua ad imparare, e ricorda - nel mondo della programmazione, l'unica limitazione è la tua immaginazione! Buon codice, futuri supereroi della tecnologia!

Credits: Image by storyset

Tutorial precedente:
WebAssembly - Sicurezza
Prossimo tutorial:
WebAssembly - Lavorare con C++