Aplikasi Pertama Anda

Kita akan membangun aplikasi sapaan sederhana yang menunjukkan konsep inti Wails:

• Backend Go yang mengelola logika
• Frontend yang memanggil fungsi Go
• Binding yang aman secara tipe
• Hot reload selama pengembangan

Waktu penyelesaian: 10 menit

Buat Proyek Anda

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

Cara Kerjanya

Mari pahami kode yang membuatnya 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. Layanan—Struct Go dengan metode yang diekspor
2. Metode yang diekspor—Greet diawali huruf kapital sehingga tersedia bagi frontend
3. Logika sederhana—Menerima nama dan mengembalikan sapaan
4. Keamanan tipe—Tipe input dan output telah ditentukan

Mendaftarkan Layanan

Buka main.go dan temukan pendaftaran layanan:

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

Tindakan ini mendaftarkan GreetService Anda ke Wails sehingga semua metode yang diekspor tersedia bagi 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 yang dibuat secara otomatis—GreetService diimpor dari kode yang dihasilkan
2. Pemanggilan yang aman secara tipe—Nama dan signature metode sesuai dengan kode Go Anda
3. Asinkron secara bawaan—Semua pemanggilan Go mengembalikan Promise
4. Penanganan kesalahan—Kesalahan dari Go ditangkap dalam try/catch

Sesuaikan Aplikasi Anda

Mari tambahkan fitur baru untuk memahami alur kerjanya.

Tambahkan Fitur “Sapa Banyak Orang”

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

Yang dilakukan proses ini:

• Mengompilasi kode Go dengan pengoptimalan
• Mem-build frontend untuk produksi (diperkecil)
• 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

Layanan

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

Binding

• Definisi TypeScript yang dibuat secara otomatis
• Pemanggilan fungsi yang aman terhadap tipe
• Asinkron secara default (Promise)

Alur Kerja Pengembangan

• wails3 dev untuk hot reload
• Perubahan Go secara otomatis memicu build ulang dan mulai ulang
• Perubahan frontend langsung dimuat ulang dengan hot reload

Ada pertanyaan? Bergabunglah dengan Discord dan tanyakan kepada komunitas.