Votre première application

Nous allons créer une application simple de salutations qui illustre les concepts fondamentaux de Wails :

• Un backend Go qui gère la logique
• Un frontend qui appelle des fonctions Go
• Des liaisons avec sûreté des types
• Le rechargement à chaud pendant le développement

Durée nécessaire : 10 minutes

Créez votre projet

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

Fonctionnement

Examinons le code qui assure ce fonctionnement.

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 structure Go avec des méthodes exportées
2. Méthode exportée – Greet commence par une majuscule, ce qui la rend accessible au frontend
3. Logique simple – Reçoit un nom et renvoie une salutation
4. Sûreté des types – Les types d’entrée et de sortie sont définis

Enregistrement du service

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

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

Cela enregistre votre GreetService auprès de Wails et rend toutes ses méthodes exportées accessibles au 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 le code généré
2. Appels avec sûreté des types – Les noms et signatures des méthodes correspondent à votre code Go
3. Asynchrones par défaut – Tous les appels Go renvoient des promesses
4. Gestion des erreurs – Les erreurs provenant de Go sont interceptées dans un bloc try/catch

Personnalisez votre application

Ajoutons une fonctionnalité pour comprendre le flux de travail.

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

Compilez pour la production

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

wails3 build

Résultat de cette opération :

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

Ce que nous avons appris

Structure du projet

• main.go pour le backend Go
• frontend/ pour le code de l’interface utilisateur
• Taskfile.yml pour les tâches de compilation

Services

• Créez des structures Go avec des méthodes exportées
• Enregistrez-les avec application.NewService()
• Les méthodes sont automatiquement disponibles dans le frontend

Liaisons

• Définitions TypeScript générées automatiquement
• Appels de fonctions avec vérification des types
• Asynchrones par défaut (promesses)

Flux de développement

• wails3 dev pour le rechargement à chaud
• Les modifications du code Go déclenchent automatiquement une nouvelle compilation et un redémarrage
• Les modifications du frontend sont rechargées à chaud instantanément

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