Votre première application

Nous allons construire une simple application de salutation qui démontre les concepts clés de Wails :

• Backend Go gérant la logique
• Frontend appelant les fonctions Go
• Liaisons typées (bindings)
• Rechargement à chaud (hot reload) pendant le développement

Temps nécessaire pour compléter : 10 minutes

Créer votre projet

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Point d'entrée de l'application
├── greetservice.go      # Service de salutation
├── frontend/            # Votre code UI
│   ├── index.html       # Point d'entrée HTML
│   ├── src/
│   │   └── main.js      # JavaScript du frontend
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Dépendances du frontend
│   └── vite.config.js   # Configuration du bundler Vite
├── build/               # Configuration de la compilation
└── Taskfile.yml         # Tâches de compilation

wails3 dev

Comment cela fonctionne

Comprendre le code qui rend cela possible.

Le backend Go

Ouvrez 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)
}

Concepts clés :

1. Service - Une struct Go avec des méthodes exportées
2. Méthode exportée - Greet est en majuscule, ce qui la rend disponible pour le frontend
3. Logique simple - Prend un nom, renvoie une salutation
4. Sécurité des types - Les types d’entrée et de sortie sont définis

Enregistrer le Service

Ouvrez main.go et trouvez l’enregistrement du service :

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

Cela enregistre votre GreetService avec Wails, rendant toutes ses méthodes exportées disponibles pour le frontend.

Le Frontend

Ouvrez 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);
    }
};

Concepts clés :

1. Liaisons générées automatiquement - GreetService est importé depuis du code généré
2. Appels typés - Les noms de méthodes et les signatures correspondent à votre code Go
3. Asynchrone par défaut - Tous les appels Go retournent des Promises
4. Gestion des erreurs - Les erreurs de Go sont capturées dans try/catch

Personnaliser votre application

Ajoutons une nouvelle fonctionnalité pour comprendre le flux de travail.

Ajouter une fonctionnalité “Saluer plusieurs personnes”

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);
};

Compiler pour la production

Lorsque vous êtes prêt à distribuer votre application :

wails3 build

Ce que cela fait :

• Compile le code Go avec des optimisations
• Compile le frontend pour la production (minifié)
• Crée un exécutable natif dans build/bin/

Ce que nous avons appris

Structure du projet

• main.go pour le backend Go
• frontend/ pour le code UI
• Taskfile.yml pour les tâches de compilation

Services

• Créer des structs Go avec des méthodes exportées
• Enregistrer avec application.NewService()
• Les méthodes sont automatiquement disponibles dans le frontend

Liaisons

• Définitions TypeScript générées automatiquement
• Appels de fonctions typés
• Asynchrone par défaut (Promises)

Flux de développement

• wails3 dev pour le rechargement à chaud
• Les modifications Go reconstruisent et redémarrent automatiquement
• Les modifications du frontend se rechargent à chaud instantanément

Des questions ? Rejoignez Discord et posez vos questions à la communauté.