Français

Tutoriel WebAssembly

WebAssembly - Travailler avec C

Introduction à WebAssembly et C

Salut à toi, futur magicien du codage ! Aujourd'hui, nous entreprenons un voyage passionnant à travers le monde de WebAssembly et du C. En tant que votre professeur de sciences informatiques du coin, je suis là pour vous guider dans cette aventure avec la même enthousiasme que j'avais lorsque j'ai découvert pour la première fois la magie du codage. Alors, bucklez et plongeons dedans !

WebAssembly - Working with C

Qu'est-ce que WebAssembly ?

WebAssembly, ou Wasm pour faire court, est comme un langage secret qui permet à votre navigateur web de faire tourner du code super-rapide. Imaginez si votre navigateur soudainement obtenait des superpuissances - c'est ce que WebAssembly fait ! Il nous permet d'écrire du code dans des langages comme C et de l'exécuter dans le navigateur à une vitesse quasi-native.

Pourquoi utiliser C avec WebAssembly ?

Vous vous demandez peut-être, "Pourquoi C ? Ce n'est pas un langage ancien ?" Eh bien, mes jeunes padawans, C est comme le sage grand-parent des langages de programmation. Il a été autour depuis des lustres, et pour une bonne raison ! C est rapide, efficace, et il y a une tonne de code existant que nous pouvons utiliser. En utilisant C avec WebAssembly, nous amenons cette puissance sur le web.

Configuration de l'environnement

Avant de commencer à coder, nous devons configurer notre atelier numérique. Ne vous inquiétez pas ; c'est plus simple que monter du mobilier IKEA !

Installation d'Emscripten

Emscripten est notre outil magique qui transformera le code C en WebAssembly. Voici comment l'obtenir :

  1. Ouvrez votre terminal (ne soyez pas effrayé, c'est juste un ami basé sur du texte)
  2. Exécutez les commandes suivantes :
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Félicitations ! Vous venez de configurer votre laboratoire WebAssembly.

Votre Premier Programme WebAssembly

Commençons par un programme "Hello, World !" simple. C'est comme les premiers mots d'un bébé, mais dans le code !

Écrire le Code C

Créez un fichier nommé hello.c et ajoutez ce code :

#include <stdio.h>

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

Ce petit morceau de code dit à l'ordinateur d'afficher notre salutation. C'est comme apprendre à un perroquet à dire "Bonjour", mais bien plus cool !

Compiler en WebAssembly

Maintenant, transformons notre code C en WebAssembly. Dans votre terminal, exécutez :

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

Cette commande est comme passer une baguette magique. Elle crée trois fichiers : hello.html, hello.js, et hello.wasm.

Exécuter Votre Programme WebAssembly

Ouvrez le fichier hello.html dans votre navigateur. Vous devriez voir "Hello, WebAssembly World!" affiché. Félicitations ! Vous venez de faire tourner votre premier programme WebAssembly !

Travailler avec des fonctions

Maintenant que nous avons dit bonjour, penchons-nous sur un travail réel. Nous allons créer une fonction pour additionner deux nombres.

Créer une Fonction d'Addition Simple

Créez un nouveau fichier appelé math.c :

#include <emscripten.h>

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

Le EMSCRIPTEN_KEEPALIVE est comme dire au compilateur, "Hey, cette fonction est importante ! Garde-la !"

Compiler la Fonction

Compilez avec :

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

Cela crée math.js et math.wasm.

Utiliser la Fonction en JavaScript

Maintenant, utilisons notre fonction C en JavaScript. Créez un fichier index.html :

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Math</title>
</head>
<body>
<h1>WebAssembly Math</h1>
<p>Résultat : <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>

Ouvrez ceci dans votre navigateur, et vous verrez le résultat de 5 + 7 !

Travailler avec la mémoire

Maintenant, penchons-nous sur quelque chose de plus avancé et travaillons avec la mémoire. C'est comme donner à vos superpuissances WebAssembly un cahier où elles peuvent écrire des choses.

Allouer et Utiliser la Mémoire

Créez un fichier nommé 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);
}

Compilez avec :

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

Maintenant, utilisons ces fonctions en JavaScript :

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Memory</title>
</head>
<body>
<h1>Gestion de la Mémoire WebAssembly</h1>
<p>Sum of 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>

Cet exemple montre comment nous pouvons allouer de la mémoire, remplir un tableau, calculer une somme, et puis libérer la mémoire - tout en utilisant des fonctions C appelées depuis JavaScript !

Conclusion

Félicitations, vous avez fait vos premiers pas dans le monde de WebAssembly avec C ! Nous avons couvert les bases, de la configuration de votre environnement à la manipulation de la mémoire. Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue - cela nécessite de la pratique et de la patience. Mais avec chaque ligne de code que vous écrivez, vous devenez plus à l'aise dans la langue des ordinateurs.

Pour conclure, voici un tableau récapitulatif des principales fonctions que nous avons apprises :

Fonction Description Exemple
printf() Affiche du texte dans la console printf("Hello, World!");
malloc() Alloue de la mémoire int arr = (int)malloc(size * sizeof(int));
free() Libère la mémoire allouée free(arr);
EMSCRIPTEN_KEEPALIVE Empêche la fonction d'être optimisée EMSCRIPTEN_KEEPALIVE int add(int a, int b)

Continuez à coder, continuez à apprendre, et souvenez-vous - dans le monde de la programmation, la seule limite est votre imagination ! Bon codage, futurs superstars de la technologie !

Credits: Image by storyset

Tutoriel précédent:
WebAssembly - Sécurité
Tutoriel suivant:
WebAssembly - Travailler avec C++