85 lines
3.1 KiB
Text
85 lines
3.1 KiB
Text
|
---
|
||
|
|
title: Tutorials
|
||
|
|
description: Learn Wails by building applications
|
||
|
|
sidebar:
|
||
|
|
label: Overview
|
||
|
|
order: 0
|
||
|
|
---
|
||
|
|
|
||
|
|
import { LinkButton } from '@astrojs/starlight/components';
|
||
|
|
import { Image } from 'astro:assets';
|
||
|
|
import qr1 from "../../../assets/qr1.png";
|
||
|
|
import todoApp from "../../../assets/todo-app.png";
|
||
|
|
import notesApp from "../../../assets/notes-app.png";
|
||
|
|
|
||
|
|
Step-by-step tutorials that teach Wails concepts by building complete applications. Each tutorial includes working code, explanations, and practical patterns.
|
||
|
|
|
||
|
|
:::tip[New to Go?]
|
||
|
|
Complete the [Go Tour](https://go.dev/tour/) before starting tutorials.
|
||
|
|
:::
|
||
|
|
|
||
|
|
### QR Code Service
|
||
|
|
|
||
|
|
<Image src={qr1} alt="QR Code Example" style="max-width: 400px; margin: 1rem auto; display: block;" />
|
||
|
|
|
||
|
|
Learn the fundamentals of Wails services by building a QR code generator. This tutorial introduces you to the core concepts of organizing your application logic into reusable services.
|
||
|
|
|
||
|
|
**What you'll learn:**
|
||
|
|
- How to create and structure a Wails service
|
||
|
|
- Managing external Go dependencies
|
||
|
|
- Binding Go methods to your frontend
|
||
|
|
- Passing data between Go and JavaScript
|
||
|
|
- Organizing code for maintainability
|
||
|
|
|
||
|
|
**Best for:** First-time Wails users who want to understand the service architecture
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 1rem;">
|
||
|
|
<LinkButton href="/tutorials/01-creating-a-service" variant="secondary" icon="right-arrow">Get Started</LinkButton>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### TODO List
|
||
|
|
|
||
|
|
<Image src={todoApp} alt="TODO List Application" style="max-width: 400px; margin: 1rem auto; display: block;" />
|
||
|
|
|
||
|
|
Build a complete TODO list application with a beautiful, modern interface. This hands-on tutorial teaches you core Wails patterns through a practical, real-world application using vanilla JavaScript.
|
||
|
|
|
||
|
|
**What you'll learn:**
|
||
|
|
- Service-based architecture with thread-safe state management
|
||
|
|
- CRUD operations (Create, Read, Update, Delete)
|
||
|
|
- Type-safe bindings between Go and JavaScript
|
||
|
|
- Building modern UIs without framework complexity
|
||
|
|
- Proper error handling and validation patterns
|
||
|
|
|
||
|
|
**Time to complete:** ~20 minutes
|
||
|
|
|
||
|
|
**Best for:** Your first complete Wails application - perfect for understanding the fundamentals before adding framework complexity
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 1rem;">
|
||
|
|
<LinkButton href="/tutorials/02-todo-vanilla" variant="secondary" icon="right-arrow">Get Started</LinkButton>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### Notes
|
||
|
|
|
||
|
|
<Image src={notesApp} alt="Notes Application" style="max-width: 600px; margin: 1rem auto; display: block;" />
|
||
|
|
|
||
|
|
Build an Apple Notes-style application with native file dialogs and auto-save functionality. This tutorial demonstrates desktop-specific features like file operations, native dialogs, and professional UI patterns.
|
||
|
|
|
||
|
|
**What you'll learn:**
|
||
|
|
- Native file dialogs (Save, Open, Info)
|
||
|
|
- JSON-based data persistence
|
||
|
|
- Debounced auto-save patterns
|
||
|
|
- Professional two-column desktop layouts
|
||
|
|
- Working with file system operations in Go
|
||
|
|
|
||
|
|
**Time to complete:** ~30 minutes
|
||
|
|
|
||
|
|
**Best for:** Learning desktop-specific features like file operations and native OS dialogs
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 1rem;">
|
||
|
|
<LinkButton href="/tutorials/03-notes-vanilla" variant="secondary" icon="right-arrow">Get Started</LinkButton>
|
||
|
|
</div>
|