Ihre erste App

Wir erstellen eine einfache Begrüßungsanwendung, die die grundlegenden Konzepte von Wails veranschaulicht:

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

Benötigte Zeit: 10 Minuten

Projekt erstellen

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Application entry point
├── greetservice.go      # Greet service
├── frontend/            # Your UI code
│   ├── index.html       # HTML entry point
│   ├── src/
│   │   └── main.ts      # Frontend TypeScript
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Frontend dependencies
│   ├── tsconfig.json    # TypeScript configuration
│   └── vite.config.ts   # Vite bundler config
├── build/               # Build configuration
└── Taskfile.yml         # Build tasks

wails3 dev

Funktionsweise

Sehen wir uns den Code an, der diese Funktion ermöglicht.

Das Go-Backend

Öffnen Sie 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 – eine Go-Struktur mit exportierten Methoden
2. Exportierte Methode – Greet beginnt mit einem Großbuchstaben und ist dadurch für das Frontend verfügbar
3. Einfache Logik – nimmt einen Namen entgegen und gibt eine Begrüßung zurück
4. Typsicherheit – Ein- und Ausgabetypen sind definiert

Service registrieren

Öffnen Sie main.go und suchen Sie die Service-Registrierung:

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

Dadurch wird GreetService bei Wails registriert, sodass alle exportierten Methoden für das Frontend verfügbar sind.

Das Frontend

Öffnen Sie 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 Ihrem Go-Code
3. Standardmäßig asynchron – alle Go-Aufrufe geben Promises zurück
4. Fehlerbehandlung – Fehler aus Go werden mit try/catch abgefangen

App anpassen

Fügen wir eine neue Funktion hinzu, um den Arbeitsablauf nachzuvollziehen.

Funktion „Greet Many“ hinzufügen

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 den Produktiveinsatz bauen

Wenn Sie Ihre App verteilen möchten:

wails3 build

Das geschieht dabei:

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

Was wir gelernt haben

Projektstruktur

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

Services

• Go-Structs mit exportierten Methoden erstellen
• Mit application.NewService() registrieren
• 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 automatisch einen neuen Build und Neustart aus
• Frontend-Änderungen werden sofort per Hot Reload übernommen

Fragen? Treten Sie Discord bei und fragen Sie die Community.