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

Generate proyek
Terminal window
```
wails3 init -n myapp
cd myapp
```
Ini membuat proyek baru dengan template default Vanilla + Vite (HTML/CSS/TypeScript dengan bundler Vite).

Coba -t react, -t vue, atau -t svelte untuk framework pilihan Anda. Template ini menggunakan TypeScript secara default; untuk JavaScript biasa gunakan -t vanilla-js atau -t react-js. Jalankan wails3 init -l untuk melihat semua template yang tersedia, atau bawa framework frontend Anda sendiri.

Pahami struktur proyek

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

Jalankan aplikasi
Terminal window
```
wails3 dev
```
Jalankan pertama mungkin membutuhkan waktu lebih lama dari yang diharapkan karena menginstal dependensi frontend, menghasilkan binding, dll. Jalankan berikutnya jauh lebih cepat.

Aplikasi terbuka menampilkan antarmuka sapa. Masukkan nama Anda dan klik “Greet” — backend Go memproses input Anda dan mengembalikan sapaan.

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:

Service — Struct Go dengan method yang diekspor
Method yang diekspor — Greet diawali huruf kapital, sehingga tersedia untuk frontend
Logika sederhana — Menerima nama, mengembalikan sapaan
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:

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

Kustomisasi Aplikasi Anda

Mari tambahkan fitur baru untuk memahami alur kerjanya.

Tambahkan Fitur “Greet Many”

Tambahkan method ke GreetService

Tambahkan ini ke 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
}

Aplikasi akan rebuild otomatis

Simpan file dan wails3 dev akan otomatis rebuild kode Go Anda dan me-restart aplikasi.

Perubahan kode Go memicu rebuild otomatis dan restart. Perubahan frontend hot-reload tanpa restart.

Gunakan di frontend

Tambahkan ini ke frontend/src/main.js:

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

Buka konsol browser dan panggil greetMany() — Anda akan melihat array sapaan.

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/

Output: bin/myapp.exe

Double-click untuk menjalankan. Tidak ada dependensi yang diperlukan (WebView2 sudah bagian dari Windows).

Output: bin/myapp.app

Seret ke folder Applications atau double-click untuk menjalankan.

Output: bin/myapp

Jalankan dengan ./bin/myapp atau buat file .desktop untuk launcher Anda.

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.