Seu primeiro aplicativo

Vamos criar um aplicativo simples de saudação que demonstra os principais conceitos do Wails:

• Backend em Go gerenciando a lógica
• Frontend chamando funções Go
• Bindings com segurança de tipos
• Hot reload durante o desenvolvimento

Tempo para concluir: 10 minutos

Crie seu projeto

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

Como funciona

Vamos entender o código que faz isso funcionar.

O backend em Go

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

Principais conceitos:

1. Serviço — Uma struct Go com métodos exportados
2. Método exportado — Greet começa com letra maiúscula, o que o disponibiliza ao frontend
3. Lógica simples — Recebe um nome e retorna uma saudação
4. Segurança de tipos — Os tipos de entrada e saída são definidos

Registro do serviço

Abra main.go e localize o registro do serviço:

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

Isso registra seu GreetService no Wails, disponibilizando todos os seus métodos exportados ao frontend.

O frontend

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

Principais conceitos:

1. Bindings gerados automaticamente — GreetService é importado do código gerado
2. Chamadas com segurança de tipos — Os nomes e as assinaturas dos métodos correspondem ao seu código Go
3. Assíncrono por padrão — Todas as chamadas Go retornam Promises
4. Tratamento de erros — Os erros do Go são capturados em try/catch

Personalize seu aplicativo

Vamos adicionar um novo recurso para entender o fluxo de trabalho.

Adicione o recurso “Saudar vários”

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

Compile para produção

Quando estiver pronto para distribuir seu aplicativo:

wails3 build

O que isso faz:

• Compila o código Go com otimizações
• Compila o frontend para produção (minificado)
• Cria um executável nativo em bin/

O que aprendemos

Estrutura do projeto

• main.go para o backend em Go
• frontend/ para o código da interface do usuário
• Taskfile.yml para tarefas de compilação

Serviços

• Crie structs em Go com métodos exportados
• Registre com application.NewService()
• Os métodos ficam automaticamente disponíveis no frontend

Bindings

• Definições TypeScript geradas automaticamente
• Chamadas de função com segurança de tipos
• Assíncrono por padrão (Promises)

Fluxo de trabalho de desenvolvimento

• wails3 dev para recarregamento automático
• Alterações no código Go recompilam e reiniciam o aplicativo automaticamente
• Alterações no frontend são recarregadas instantaneamente

Tem alguma dúvida? Entre no Discord e pergunte à comunidade.