Deine erste App

Wir bauen eine einfache Begrüßungsanwendung, die die Kernkonzepte von Wails demonstriert:

• Go-Backend zur Verwaltung der Logik
• Frontend, das Go-Funktionen aufruft
• Typsichere Bindings
• Hot Reload während der Entwicklung

Zeit bis zur Fertigstellung: 10 Minuten

Erstelle dein Projekt

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Anwendungseinstiegspunkt
├── greetservice.go      # Begrüßungsdienst
├── frontend/            # Dein UI-Code
│   ├── index.html       # HTML-Einstiegspunkt
│   ├── src/
│   │   └── main.js      # Frontend-JavaScript
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Frontend-Abhängigkeiten
│   └── vite.config.js   # Vite-Bundler-Konfiguration
├── build/               # Build-Konfiguration
└── Taskfile.yml         # Build-Aufgaben

wails3 dev

Wie es funktioniert

Lass uns den Code verstehen, der dies ermöglicht.

Das Go-Backend

Öffne greetservice.go:

package main

import (
	"fmt"
)

type GreetService struct{}

func (g *GreetService) Greet(name string) string {
	return fmt.Sprintf("Hello %s, It's show time!", name)
}

Wichtige Konzepte:

1. Service – Ein Go-Struct mit exportierten Methoden
2. Exportierte Methode – Greet ist großgeschrieben, wodurch sie für das Frontend verfügbar wird
3. Einfache Logik – Nimmt einen Namen entgegen und gibt eine Begrüßung zurück
4. Typsicherheit – Eingabe- und Ausgabetypen sind definiert

Registrieren des Services

Öffne main.go und finde die Service-Registrierung:

err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... other options
})

Dies registriert deinen GreetService bei Wails und macht alle seine exportierten Methoden für das Frontend verfügbar.

Das Frontend

Öffne frontend/src/main.js:

import {GreetService} from "../bindings/changeme";

window.greet = async () => {
    const nameElement = document.getElementById('name');
    const resultElement = document.getElementById('result');

    const name = nameElement.value;
    if (!name) {
        return;
    }

    try {
        const result = await GreetService.Greet(name);
        resultElement.innerText = result;
    } catch (err) {
        console.error(err);
    }
};

Wichtige Konzepte:

1. Automatisch generierte Bindings – GreetService wird aus dem generierten Code importiert
2. Typsichere Aufrufe – Methodennamen und Signaturen entsprechen deinem Go-Code
3. Standardmäßig asynchron – Alle Go-Aufrufe geben Promises zurück
4. Fehlerbehandlung – Fehler aus Go werden in try/catch abgefangen

Passe deine App an

Lass uns eine neue Funktion hinzufügen, um den Workflow zu verstehen.

Füge eine “Viele Begrüßungen”-Funktion hinzu

func (g *GreetService) GreetMany(names []string) []string {
    greetings := make([]string, len(names))
    for i, name := range names {
        greetings[i] = fmt.Sprintf("Hello %s!", name)
    }
    return greetings
}

window.greetMany = async () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    const greetings = await GreetService.GreetMany(names);
    console.log(greetings);
};

Für die Produktion bauen

Wenn du bereit bist, deine App zu verteilen:

wails3 build

Was dies tut:

• Kompiliert Go-Code mit Optimierungen
• Baut das Frontend für die Produktion (minifiziert)
• Erstellt eine native ausführbare Datei in build/bin/

Was wir gelernt haben

Projektstruktur

• main.go für das Go-Backend
• frontend/ für UI-Code
• Taskfile.yml für Build-Aufgaben

Services

• Erstelle Go-Schnittstellen mit exportierten Methoden
• Registriere mit application.NewService()
• Methoden sind automatisch im Frontend verfügbar

Bindings

• Automatisch generierte TypeScript-Definitionen
• Typsichere Funktionsaufrufe
• Standardmäßig asynchron (Promises)

Entwicklungsworkflow

• wails3 dev für Hot Reload
• Go-Änderungen lösen automatisches Rebuild und Neustart aus
• Frontend-Änderungen werden sofort hot-reloaded

Fragen? Tritt Discord bei und frage die Community.