Deutsch

WebAssembly Tutorial

WebAssembly - Arbeit mit C

Einführung in WebAssembly und C

Hallo da draußen, zukünftige Codewizarden! Heute begeben wir uns auf eine aufregende Reise in die Welt von WebAssembly und C. Als dein freundlicherNachbarchaftsinformatiklehrer stehe ich hier, um dich mit der gleichen Begeisterung zu führen, die ich hatte, als ich zum ersten Mal die Magie des Codens entdeckte. Also, anschnallen und tauchen wir ein!

WebAssembly - Working with C

Was ist WebAssembly?

WebAssembly, kurz Wasm, ist wie eine geheime Sprache, die es deinem Webbrowser ermöglicht, superschnellen Code auszuführen. Stell dir vor, dein Browser würde plötzlich Superkräfte bekommen - das ist, was WebAssembly macht! Es lässt uns in Sprachen wie C codieren und im Browser nahezu nativ schnell ausführen.

Warum C mit WebAssembly?

Du fragst dich vielleicht, "Warum C? Ist das nicht eine alte Sprache?" Nun, meine jungen Padawans, C ist wie der weise Großvater der Programmiersprachen. Es ist seit Jahrzehnten im Umlauf und das aus gutem Grund! C ist schnell, effizient und wir haben eine Menge bestehenden Codes, auf den wir zurückgreifen können. Durch die Verwendung von C mit WebAssembly holen wir diese Kraftmaschine ins Web.

Einrichten der Umgebung

Bevor wir anfangen zu codieren, müssen wir unsere digitale Werkstatt einrichten. Keine Sorge; es ist einfacher als IKEA-Möbel zusammenzubauen!

Installation von Emscripten

Emscripten ist unser magisches Werkzeug, das C-Code in WebAssembly verwandelt. Hier ist, wie man es bekommt:

  1. Öffne dein Terminal (keine Angst, es ist nur ein textbasiertes Freund)
  2. Führe die folgenden Befehle aus:
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Glückwunsch! Du hast gerade dein WebAssembly-Labor eingerichtet.

Dein erstes WebAssembly-Programm

Lassen wir mit einem einfachen "Hallo, Welt!"-Programm beginnen. Es ist wie die ersten Worte eines Babys, aber in Code!

Schreiben des C-Codes

Erstelle eine Datei namens hello.c und füge diesen Code hinzu:

#include <stdio.h>

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

Dieser kleine Schnipsel sagt dem Computer, dass er unsere Begrüßung ausgeben soll. Es ist wie das Teaching eines Papageis, "Hallo" zu sagen, aber viel cooler!

Kompilieren in WebAssembly

Nun, lassen wir unseren C-Code in WebAssembly verwandeln. Im Terminal führtst du aus:

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

Dieser Befehl ist wie das Wedeln eines magischen Stocks. Es erstellt drei Dateien: hello.html, hello.js und hello.wasm.

Ausführen deines WebAssembly-Programms

Öffne die Datei hello.html in deinem Browser. Du solltest "Hello, WebAssembly World!" sehen. Gratulation! Du hast gerade dein erstes WebAssembly-Programm ausgeführt!

Arbeiten mit Funktionen

Jetzt, da wir "Hallo" gesagt haben, lassen wir uns an die Arbeit machen. Wir werden eine Funktion erstellen, um zwei Zahlen zu addieren.

Erstellen einer einfachen Addierfunktion

Erstelle eine neue Datei namens math.c:

#include <emscripten.h>

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

Das EMSCRIPTEN_KEEPALIVE ist wie das Sagen ans Compiler, "Hey, diese Funktion ist wichtig! Halte sie bei!".

Kompilieren der Funktion

Kompiliere sie mit:

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

Dies erstellt math.js und math.wasm.

Verwenden der Funktion in JavaScript

Nun verwenden wir unsere C-Funktion in JavaScript. Erstelle eine index.html Datei:

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

Öffne dies in deinem Browser, und du wirst das Ergebnis von 5 + 7 sehen!

Arbeiten mit Speicher

Nun werden wir ein bisschen fortgeschrittener und arbeiten mit Speicher. Das ist wie das Geben von Notizen an deine WebAssembly-Superkräfte, auf die sie Dinge schreiben können.

Allokieren und Verwenden von Speicher

Erstelle eine Datei namens 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);
}

Kompiliere es mit:

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

Nun verwenden wir diese Funktionen in JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Memory</title>
</head>
<body>
    <h1>WebAssembly Speicher-Management</h1>
    <p>Summe des Arrays: <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>

Dieses Beispiel zeigt, wie wir Speicher allokieren, ein Array füllen, eine Summe berechnen und dann den Speicher freigeben können - alles mit aus JavaScript aufgerufenen C-Funktionen!

Schlussfolgerung

Glückwunsch, du hast deine ersten Schritte in die Welt von WebAssembly mit C gewagt! Wir haben die Grundlagen abgedeckt, von der Einrichtung deiner Umgebung bis hin zum Arbeiten mit Speicher. Denke daran, das Lernen zu programmieren ist wie das Lernen einer neuen Sprache - es erfordert Übung und Geduld. Aber mit jeder Zeile Code, die du schreibst, wirst du fließender in der Sprache der Computer.

Als wir uns verabschieden, hier ist eine Tabelle, die die wichtigsten Funktionen zusammenfasst, die wir gelernt haben:

Funktion Beschreibung Beispiel
printf() Gibt Text in die Konsole aus printf("Hello, World!");
malloc() Allokiert Speicher int arr = (int)malloc(size * sizeof(int));
free() Freigibt allokierten Speicher free(arr);
EMSCRIPTEN_KEEPALIVE Verhindert, dass die Funktion optimiert wird EMSCRIPTEN_KEEPALIVE int add(int a, int b)

Weiter codieren, weiter lernen und denken Sie daran - in der Welt der Programmierung ist die einzige Grenze Ihre Vorstellungskraft! Frohes Coden, zukünftige Tech-Superstars!

Credits: Image by storyset

Vorheriges Tutorial:
WebAssembly - Sicherheit
Nächstes Tutorial:
WebAssembly - Arbeit mit C++