mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
Merge latest website changes
This commit is contained in:
Lea Anthony
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Tutorials",
|
||||
"position": 70
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
---
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# Dogs API
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/tutorials/dogsapi/img.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
This tutorial has been kindly provided by [@tatadan](https://twitter.com/tatadan) and forms part of
|
||||
their [Wails Examples Repository](https://github.com/tataDan/wails-v2-examples).
|
||||
|
||||
:::
|
||||
|
||||
In this tutorial we are going to develop an application that retrieves photos of dogs from the web
|
||||
and then displays them.
|
||||
|
||||
### Create the project
|
||||
|
||||
Let's create the application. From a terminal enter:
|
||||
`wails init -n dogs-api -t svelte`
|
||||
|
||||
Note: We could optionally add `-ide vscode` or `-ide goland` to the end of this command if you wanted
|
||||
to add IDE support.
|
||||
|
||||
Now let's `cd dogs-api` and start editing the project files.
|
||||
|
||||
### Remove unused code
|
||||
|
||||
We will start by removing some elements that we know we will not use:
|
||||
|
||||
- Open `app.go` and remove the following lines:
|
||||
|
||||
```go
|
||||
// Greet returns a greeting for the given name
|
||||
func (a *App) Greet(name string) string {
|
||||
return fmt.Sprintf("Hello %s, It's show time!", name)
|
||||
}
|
||||
```
|
||||
|
||||
- Open `frontend/src/App.svelte` and delete all lines.
|
||||
- Delete the `frontend/src/assets/images/logo-universal.png` file
|
||||
|
||||
### Creating our application
|
||||
|
||||
Now let's add our new Go code.
|
||||
|
||||
Add the following struct declarations to `app.go` before the function definitions:
|
||||
|
||||
```go
|
||||
type RandomImage struct {
|
||||
Message string
|
||||
Status string
|
||||
}
|
||||
|
||||
type AllBreeds struct {
|
||||
Message map[string]map[string][]string
|
||||
Status string
|
||||
}
|
||||
|
||||
type ImagesByBreed struct {
|
||||
Message []string
|
||||
Status string
|
||||
}
|
||||
```
|
||||
|
||||
Add the following functions to `app.go` (perhaps after the existing function definitions):
|
||||
|
||||
```go
|
||||
func (a *App) GetRandomImageUrl() string {
|
||||
response, err := http.Get("https://dog.ceo/api/breeds/image/random")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data RandomImage
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
return data.Message
|
||||
}
|
||||
|
||||
func (a *App) GetBreedList() []string {
|
||||
var breeds []string
|
||||
|
||||
response, err := http.Get("https://dog.ceo/api/breeds/list/all")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data AllBreeds
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
for k := range data.Message {
|
||||
breeds = append(breeds, k)
|
||||
}
|
||||
|
||||
sort.Strings(breeds)
|
||||
|
||||
return breeds
|
||||
}
|
||||
|
||||
func (a *App) GetImageUrlsByBreed(breed string) []string {
|
||||
|
||||
url := fmt.Sprintf("%s%s%s%s", "https://dog.ceo/api/", "breed/", breed, "/images")
|
||||
response, err := http.Get(url)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
responseData, err := ioutil.ReadAll(response.Body)
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
var data ImagesByBreed
|
||||
json.Unmarshal(responseData, &data)
|
||||
|
||||
return data.Message
|
||||
}
|
||||
```
|
||||
|
||||
Modify the `import` section of `app.go` to look like this:
|
||||
|
||||
```go
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"encoding/json"
|
||||
"io/ioutil"
|
||||
"log"
|
||||
"net/http"
|
||||
"sort"
|
||||
)
|
||||
```
|
||||
|
||||
Add the following lines to `frontend/src/App.svelte`:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
```html
|
||||
<script>
|
||||
import { GetRandomImageUrl } from "../wailsjs/go/main/App.js";
|
||||
import { GetBreedList } from "../wailsjs/go/main/App.js";
|
||||
import { GetImageUrlsByBreed } from "../wailsjs/go/main/App.js";
|
||||
|
||||
let randomImageUrl = "";
|
||||
let breeds = [];
|
||||
let photos = [];
|
||||
let selectedBreed;
|
||||
let showRandomPhoto = false;
|
||||
let showBreedPhotos = false;
|
||||
|
||||
function init() {
|
||||
getBreedList();
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
function getRandomImageUrl() {
|
||||
showRandomPhoto = false;
|
||||
showBreedPhotos = false;
|
||||
GetRandomImageUrl().then((result) => (randomImageUrl = result));
|
||||
showRandomPhoto = true;
|
||||
}
|
||||
|
||||
function getBreedList() {
|
||||
GetBreedList().then((result) => (breeds = result));
|
||||
}
|
||||
|
||||
function getImageUrlsByBreed() {
|
||||
init();
|
||||
showRandomPhoto = false;
|
||||
showBreedPhotos = false;
|
||||
GetImageUrlsByBreed(selectedBreed).then((result) => (photos = result));
|
||||
showBreedPhotos = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>Dogs API</h3>
|
||||
<div>
|
||||
<button class="btn" on:click={getRandomImageUrl}>
|
||||
Fetch a dog randomly
|
||||
</button>
|
||||
Click on down arrow to select a breed
|
||||
<select bind:value={selectedBreed}>
|
||||
{#each breeds as breed}
|
||||
<option value={breed}>
|
||||
{breed}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button class="btn" on:click={getImageUrlsByBreed}>
|
||||
Fetch by this breed
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
{#if showRandomPhoto}
|
||||
<img id="random-photo" src={randomImageUrl} alt="No dog found" />
|
||||
{/if}
|
||||
{#if showBreedPhotos}
|
||||
{#each photos as photo}
|
||||
<img id="breed-photos" src={photo} alt="No dog found" />
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#random-photo {
|
||||
width: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#breed-photos {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
border-width: 3px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Testing the application
|
||||
|
||||
To generate the bindings and test the application, run `wails dev`.
|
||||
|
||||
### Compiling the application
|
||||
|
||||
To compile the application to a single, production grade binary, run `wails build`.
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
The aim of this tutorial is to get you up and running with the most basic
|
||||
application using Wails. You will be able to:
|
||||
|
||||
- Create a new Wails application
|
||||
- Build the application
|
||||
- Run the application
|
||||
|
||||
:::note
|
||||
|
||||
This tutorial uses Windows as the target platform. Output will vary slightly
|
||||
depending on your operating system.
|
||||
|
||||
:::
|
||||
|
||||
## Create a new Wails application
|
||||
|
||||
To create a new Wails application using the default vanilla JS template,
|
||||
you need to run the following command:
|
||||
|
||||
```bash
|
||||
wails init -n helloworld
|
||||
```
|
||||
|
||||
You should see something similar to the following:
|
||||
|
||||
```
|
||||
Wails CLI v2.0.0
|
||||
|
||||
Initialising Project 'helloworld'
|
||||
---------------------------------
|
||||
|
||||
Project Name: helloworld
|
||||
Project Directory: C:\Users\leaan\tutorial\helloworld
|
||||
Project Template: vanilla
|
||||
Template Support: https://wails.io
|
||||
|
||||
Initialised project 'helloworld' in 232ms.
|
||||
```
|
||||
|
||||
This will create a new directory called `helloworld` in the current directory.
|
||||
In this directory, you will find a number of files:
|
||||
|
||||
```
|
||||
build/ - Contains the build files + compiled application
|
||||
frontend/ - Contains the frontend files
|
||||
app.go - Contains the application code
|
||||
main.go - The main program with the application configuration
|
||||
wails.json - The project configuration file
|
||||
go.mod - The go module file
|
||||
go.sum - The go module checksum file
|
||||
```
|
||||
|
||||
## Build the application
|
||||
|
||||
To build the application, change to the new `helloworld` project directory and run the following command:
|
||||
|
||||
```bash
|
||||
wails build
|
||||
```
|
||||
|
||||
You should see something like the following:
|
||||
|
||||
```
|
||||
Wails CLI v2.0.0
|
||||
|
||||
App Type: desktop
|
||||
Platforms: windows/amd64
|
||||
Compiler: C:\Users\leaan\go\go1.18.3\bin\go.exe
|
||||
Build Mode: Production
|
||||
Devtools: false
|
||||
Skip Frontend: false
|
||||
Compress: false
|
||||
Package: true
|
||||
Clean Build Dir: false
|
||||
LDFlags: ""
|
||||
Tags: []
|
||||
Race Detector: false
|
||||
|
||||
Building target: windows/amd64
|
||||
------------------------------
|
||||
- Installing frontend dependencies: Done.
|
||||
- Compiling frontend: Done.
|
||||
- Generating bundle assets: Done.
|
||||
- Compiling application: Done.
|
||||
Built 'C:\Users\leaan\tutorial\helloworld\build\bin\helloworld.exe' in 10.616s.
|
||||
```
|
||||
|
||||
This has compiled the application and saved it in the `build/bin` directory.
|
||||
|
||||
## Run the application
|
||||
|
||||
If we view the `build/bin` directory in Windows Explorer, we should see our project binary:
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
We can run it by simply double-clicking the `helloworld.exe` file.
|
||||
|
||||
On Mac, Wails generates a `helloworld.app` file which can be run by double-clicking it.
|
||||
|
||||
On Linux, you can run the application using `./helloworld` from the `build/bin` directory.
|
||||
|
||||
You should see the application working as expected:
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/windows-default-app.webp").default}
|
||||
width="50%"
|
||||
className="screenshot"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
Reference in New Issue
Block a user