Ваше первое приложение

Мы создадим простое приветственное приложение, которое демонстрирует основные концепции Wails:

• Бэкенд на Go, управляющий логикой
• Фронтенд, вызывающий функции Go
• Типобезопасные привязки (bindings)
• Горячая перезагрузка (hot reload) во время разработки

Время на выполнение: 10 минут

Создание вашего проекта

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Точка входа приложения
├── greetservice.go      # Сервис приветствия
├── frontend/            # Код вашего интерфейса
│   ├── index.html       # Точка входа HTML
│   ├── src/
│   │   └── main.js      # JavaScript фронтенда
│   ├── public/
│   │   └── style.css    # Стили
│   ├── package.json     # Зависимости фронтенда
│   └── vite.config.js   # Конфигурация сборщика Vite
├── build/               # Конфигурация сборки
└── Taskfile.yml         # Задачи сборки

wails3 dev

Как это работает

Давайте разберем код, который обеспечивает эту работу.

Бэкенд на Go

Откройте 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)
}

Ключевые концепции:

1. Сервис (Service) — структура Go с экспортируемыми методами
2. Экспортируемый метод — Greet написан с заглавной буквы, что делает его доступным для фронтенда
3. Простая логика — принимает имя и возвращает приветствие
4. Типобезопасность — типы входных и выходных данных определены

Регистрация сервиса

Откройте main.go и найдите регистрацию сервиса:

err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... другие опции
})

Это регистрирует ваш GreetService в Wails, делая все его экспортируемые методы доступными для фронтенда.

Фронтенд

Откройте 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);
    }
};

Ключевые концепции:

1. Автоматически сгенерированные привязки — GreetService импортируется из сгенерированного кода
2. Типобезопасные вызовы — имена методов и сигнатуры соответствуют вашему коду Go
3. Асинхронность по умолчанию — все вызовы Go возвращают Promises
4. Обработка ошибок — ошибки из Go перехватываются в try/catch

Настройка вашего приложения

Давайте добавим новую функцию, чтобы понять рабочий процесс.

Добавьте функцию “Приветствовать многих”

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

Сборка для продакшена

Когда вы будете готовы распространять ваше приложение:

wails3 build

Что это делает:

• Компилирует код Go с оптимизациями
• Собирает фронтенд для продакшена (минифицированный)
• Создает нативный исполняемый файл в build/bin/

Что мы узнали

Структура проекта

• main.go для бэкенда Go
• frontend/ для кода интерфейса
• Taskfile.yml для задач сборки

Сервисы

• Создавайте структуры Go с экспортируемыми методами
• Регистрируйте с помощью application.NewService()
• Методы автоматически становятся доступны во фронтенде

Привязки

• Автоматически сгенерированные определения TypeScript
• Типобезопасные вызовы функций
• Асинхронность по умолчанию (Promises)

Рабочий процесс разработки

• wails3 dev для горячей перезагрузки
• Изменения в Go автоматически пересобираются и перезапускают приложение
• Изменения во фронтенде перезагружаются мгновенно

Вопросы? Присоединяйтесь к Discord и спрашивайте сообщество.