Zum Inhalt springen
Wails Blog

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

Abschnitt betitelt „Erstelle dein Projekt“

  1. Generiere das Projekt

    Terminal-Fenster
    wails3 init -n myapp
    cd myapp

    Dies erstellt ein neues Projekt mit der Standard-Vanilla-Vite-Vorlage (reines HTML/CSS/JS mit Vite-Bundler).

  2. Verstehe die Projektstruktur

    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

  3. Führe die App aus

    Terminal-Fenster
    wails3 dev

    Die App öffnet sich und zeigt eine Begrüßungsschnittstelle. Gib deinen Namen ein und klicke auf “Begrüßen” – das Go-Backend verarbeitet deine Eingabe und gibt eine Begrüßung zurück.

Wie es funktioniert

Abschnitt betitelt „Wie es funktioniert“

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

Das Go-Backend

Abschnitt betitelt „Das Go-Backend“

Öffne greetservice.go:

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

Abschnitt betitelt „Registrieren des Services“

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

main.go
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

Abschnitt betitelt „Das Frontend“

Öffne frontend/src/main.js:

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

Abschnitt betitelt „Passe deine App an“

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

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

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

  1. Füge die Methode zu GreetService hinzu

    Füge dies zu greetservice.go hinzu:

    greetservice.go
    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
    }

  2. Die App wird automatisch neu gebaut

    Speichere die Datei und wails3 dev wird deinen Go-Code automatisch neu bauen und die App neu starten.

  3. Verwende es im Frontend

    Füge dies zu frontend/src/main.js hinzu:

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

    Öffne die Browserkonsole und rufe greetMany() auf – du siehst das Array der Begrüßungen.

Für die Produktion bauen

Abschnitt betitelt „Für die Produktion bauen“

Wenn du bereit bist, deine App zu verteilen:

Terminal-Fenster
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/

Ausgabe: build/bin/myapp.exe

Doppelklick zum Ausführen. Keine Abhängigkeiten erforderlich (WebView2 ist Teil von Windows).

Was wir gelernt haben

Abschnitt betitelt „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.