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

Gere o projeto
Terminal window
```
wails3 init -n myapp
cd myapp
```
Isso cria um novo projeto com o modelo padrão Vanilla + Vite (HTML/CSS/JS puro com o bundler Vite).

Experimente -t react, -t vue ou -t svelte para seu framework preferido. Execute wails3 init -l para ver todos os modelos disponíveis.

Entenda a estrutura do projeto

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

Execute o app
Terminal window
```
wails3 dev
```
A primeira execução pode demorar mais do que o esperado, pois instala dependências do frontend, gera bindings, etc. As execuções subsequentes são muito mais rápidas.

O app abre mostrando uma interface de saudação. Digite seu nome e clique em “Greet” - o backend Go processa sua entrada e retorna uma saudação.

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:

Service - Uma struct Go com métodos exportados
Método exportado - Greet está em maiúsculas, tornando-o disponível para o frontend
Lógica simples - Recebe um nome e retorna uma saudação
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:

Bindings gerados automaticamente - GreetService é importado do código gerado
Chamadas com tipagem segura - Os nomes dos métodos e suas assinaturas correspondem ao seu código Go
Assíncrono por padrão - Todas as chamadas Go retornam Promises
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”

Adicione o método ao GreetService

Adicione isto ao 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
}

O app será reconstruído automaticamente

Salve o arquivo e o wails3 dev reconstruirá automaticamente seu código Go e reiniciará o app.

Alterações no código Go acionam uma reconstrução automática e reinício. Alterações no frontend têm hot reload sem reinício.

Use-o no frontend

Adicione isto ao frontend/src/main.js:

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

Abra o console do navegador e chame greetMany() - você verá o array de saudações.

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/

Saída: build/bin/myapp.exe

Clique duas vezes para executar. Nenhuma dependência necessária (WebView2 faz parte do Windows).

Saída: build/bin/myapp.app

Arraste para a pasta Applications ou clique duas vezes para executar.

Saída: build/bin/myapp

Execute com ./build/bin/myapp ou crie um arquivo .desktop para seu lançador.

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.