Seu Primeiro App

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

• Backend em Go gerenciando a lógica
• Frontend chamando funções do Go
• Bindings com tipagem segura
• Hot reload durante o desenvolvimento

Tempo para concluir: 10 minutos

Crie Seu Projeto

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Ponto de entrada da aplicação
├── greetservice.go      # Serviço de saudação
├── frontend/            # Seu código de UI
│   ├── index.html       # Ponto de entrada HTML
│   ├── src/
│   │   └── main.js      # JavaScript do frontend
│   ├── public/
│   │   └── style.css    # Estilos
│   ├── package.json     # Dependências do frontend
│   └── vite.config.js   # Configuração do bundler Vite
├── build/               # Configuração de build
└── Taskfile.yml         # Tarefas de build

wails3 dev

Como Funciona

Vamos entender o código que faz isso funcionar.

O Backend 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)
}

Conceitos principais:

1. Service - Uma struct Go com métodos exportados
2. Método exportado - Greet está em maiúsculas, tornando-o disponível para o frontend
3. Lógica simples - Recebe um nome e retorna uma saudação
4. Tipagem segura - Os tipos de entrada e saída são definidos

Registrando o Service

Abra main.go e encontre o registro do service:

err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... outras opções
})

Isso registra seu GreetService com o Wails, tornando todos os seus métodos exportados disponíveis para o 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);
    }
};

Conceitos principais:

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

Personalize Seu App

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

Adicione um Recurso “Greet Many”

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 app:

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 build/bin/

O que aprendemos

Estrutura do Projeto

• main.go para o backend Go
• frontend/ para o código da UI
• Taskfile.yml para tarefas de build

Services

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

Bindings

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

Fluxo de Trabalho de Desenvolvimento

• wails3 dev para hot reload
• Alterações no Go reconstruem e reiniciam automaticamente
• Alterações no frontend têm hot reload instantâneo

Perguntas? Junte-se ao Discord e pergunte à comunidade.