Aplikasi Pertama Anda

Kita akan membangun aplikasi sapa sederhana yang mendemonstrasikan konsep inti Wails:

• Backend Go yang mengelola logika
• Frontend yang memanggil fungsi Go
• Binding type-safe
• Hot reload selama pengembangan

Waktu penyelesaian: 10 menit

Buat Proyek Anda

wails3 init -n myapp
cd myapp

myapp/
├── main.go              # Titik masuk aplikasi
├── greetservice.go      # Layanan Greet
├── frontend/            # Kode UI Anda
│   ├── index.html       # Titik masuk HTML
│   ├── src/
│   │   └── main.ts      # TypeScript frontend
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Dependensi frontend
│   ├── tsconfig.json    # Konfigurasi TypeScript
│   └── vite.config.ts   # Konfigurasi bundler Vite
├── build/               # Konfigurasi build
└── Taskfile.yml         # Tugas build

wails3 dev

Cara Kerjanya

Mari pahami kode yang membuat ini berfungsi.

Backend Go

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

Konsep utama:

1. Service — Struct Go dengan method yang diekspor
2. Method yang diekspor — Greet diawali huruf kapital, sehingga tersedia untuk frontend
3. Logika sederhana — Menerima nama, mengembalikan sapaan
4. Type safety — Tipe input dan output didefinisikan

Mendaftarkan Service

Buka main.go dan temukan pendaftaran service:

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

Ini mendaftarkan GreetService Anda ke Wails, sehingga semua method yang diekspor tersedia untuk frontend.

Frontend

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

Konsep utama:

1. Binding otomatis — GreetService diimpor dari kode yang dihasilkan
2. Panggilan type-safe — Nama method dan signature cocok dengan kode Go Anda
3. Async secara default — Semua panggilan Go mengembalikan Promise
4. Penanganan error — Error dari Go ditangkap di try/catch

Kustomisasi Aplikasi Anda

Mari tambahkan fitur baru untuk memahami alur kerjanya.

Tambahkan Fitur “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);
};

Build untuk Produksi

Saat Anda siap mendistribusikan aplikasi:

wails3 build

Apa yang dilakukan ini:

• Mengompilasi kode Go dengan optimasi
• Build frontend untuk produksi (minified)
• Membuat executable native di bin/

Yang telah kita pelajari

Struktur Proyek

• main.go untuk backend Go
• frontend/ untuk kode UI
• Taskfile.yml untuk tugas build

Service

• Buat struct Go dengan method yang diekspor
• Daftarkan dengan application.NewService()
• Method otomatis tersedia di frontend

Binding

• Definisi TypeScript otomatis
• Panggilan fungsi type-safe
• Async secara default (Promise)

Alur Kerja Pengembangan

• wails3 dev untuk hot reload
• Perubahan Go otomatis rebuild dan restart
• Perubahan frontend hot-reload secara instan

Ada pertanyaan? Bergabunglah dengan Discord dan tanyakan ke komunitas.