mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
New Crowdin updates (#1800)
* New translations markdown-page.md (Acholi) [ci skip] * New translations stats.mdx (Acholi) [ci skip] * New translations code.json (Acholi) [ci skip] * New translations options.json (Acholi) [ci skip] * New translations current.json (Acholi) [ci skip] * New translations version-v2.0.0-beta.43.json (Acholi) [ci skip] * New translations helloworld.mdx (Acholi) [ci skip] * New translations footer.json (Acholi) [ci skip] * New translations navbar.json (Acholi) [ci skip] * New translations emailit.mdx (Acholi) [ci skip] * New translations modalfilemanager.mdx (Acholi) [ci skip] * New translations linux.mdx (Acholi) [ci skip] * New translations scriptbar.mdx (Acholi) [ci skip] * New translations minecraftupdater.mdx (Acholi) [ci skip] * New translations faq.mdx (Acholi) [ci skip] * New translations community-guide.mdx (Acholi) [ci skip] * New translations vscode.mdx (Acholi) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations templates.mdx (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations troubleshooting.mdx (Acholi) [ci skip] * New translations windows-installer.mdx (Acholi) [ci skip] * New translations windows.mdx (Acholi) [ci skip] * New translations howdoesitwork.mdx (Acholi) [ci skip] * New translations introduction.mdx (Acholi) [ci skip] * New translations cli.mdx (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations window.mdx (Acholi) [ci skip] * New translations menus.mdx (Acholi) [ci skip] * New translations options.mdx (Acholi) [ci skip] * New translations project-config.mdx (Acholi) [ci skip] * New translations _category_.json (Acholi) [ci skip] * New translations browser.mdx (Acholi) [ci skip] * New translations dialog.mdx (Acholi) [ci skip] * New translations events.mdx (Acholi) [ci skip] * New translations intro.mdx (Acholi) [ci skip] * New translations log.mdx (Acholi) [ci skip] * New translations menu.mdx (Acholi) [ci skip] * New translations dogsapi.mdx (Acholi) [ci skip] * New translations templates.mdx (Chinese Simplified) [ci skip] * New translations templates.mdx (Russian) [ci skip] * New translations templates.mdx (Japanese) [ci skip] * New translations templates.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations templates.mdx (Acholi) [ci skip] * New translations encrypteasy.mdx (Japanese) [ci skip] * New translations wally.mdx (Korean) [ci skip] * New translations wally.mdx (Japanese) [ci skip] * New translations wally.mdx (Russian) [ci skip] * New translations wally.mdx (Chinese Simplified) [ci skip] * New translations wombat.mdx (Japanese) [ci skip] * New translations wombat.mdx (Korean) [ci skip] * New translations wombat.mdx (Russian) [ci skip] * New translations wombat.mdx (Chinese Simplified) [ci skip] * New translations ytd.mdx (Japanese) [ci skip] * New translations ytd.mdx (Korean) [ci skip] * New translations ytd.mdx (Russian) [ci skip] * New translations ytd.mdx (Chinese Simplified) [ci skip] * New translations encrypteasy.mdx (Korean) [ci skip] * New translations october.mdx (Japanese) [ci skip] * New translations encrypteasy.mdx (Russian) [ci skip] * New translations encrypteasy.mdx (Chinese Simplified) [ci skip] * New translations filehound.mdx (Japanese) [ci skip] * New translations filehound.mdx (Korean) [ci skip] * New translations filehound.mdx (Russian) [ci skip] * New translations filehound.mdx (Chinese Simplified) [ci skip] * New translations mollywallet.mdx (Japanese) [ci skip] * New translations mollywallet.mdx (Korean) [ci skip] * New translations mollywallet.mdx (Russian) [ci skip] * New translations mollywallet.mdx (Chinese Simplified) [ci skip] * New translations october.mdx (Korean) [ci skip] * New translations october.mdx (Russian) [ci skip] * New translations october.mdx (Chinese Simplified) [ci skip] * New translations optimus.mdx (Japanese) [ci skip] * New translations optimus.mdx (Korean) [ci skip] * New translations optimus.mdx (Russian) [ci skip] * New translations optimus.mdx (Chinese Simplified) [ci skip] * New translations portfall.mdx (Japanese) [ci skip] * New translations portfall.mdx (Korean) [ci skip] * New translations portfall.mdx (Russian) [ci skip] * New translations portfall.mdx (Chinese Simplified) [ci skip] * New translations scriptbar.mdx (Russian) [ci skip] * New translations emailit.mdx (Japanese) [ci skip] * New translations emailit.mdx (Korean) [ci skip] * New translations emailit.mdx (Russian) [ci skip] * New translations emailit.mdx (Chinese Simplified) [ci skip] * New translations modalfilemanager.mdx (Japanese) [ci skip] * New translations modalfilemanager.mdx (Korean) [ci skip] * New translations modalfilemanager.mdx (Russian) [ci skip] * New translations modalfilemanager.mdx (Chinese Simplified) [ci skip] * New translations scriptbar.mdx (Japanese) [ci skip] * New translations scriptbar.mdx (Korean) [ci skip] * New translations scriptbar.mdx (Chinese Simplified) [ci skip] * New translations minecraftupdater.mdx (Japanese) [ci skip] * New translations minecraftupdater.mdx (Korean) [ci skip] * New translations minecraftupdater.mdx (Russian) [ci skip] * New translations minecraftupdater.mdx (Chinese Simplified) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations optimus.mdx (Acholi) [ci skip] * New translations portfall.mdx (Acholi) [ci skip] * New translations wally.mdx (Acholi) [ci skip] * New translations october.mdx (Acholi) [ci skip] * New translations mollywallet.mdx (Acholi) [ci skip] * New translations filehound.mdx (Acholi) [ci skip] * New translations encrypteasy.mdx (Acholi) [ci skip] * New translations wombat.mdx (Acholi) [ci skip] * New translations ytd.mdx (Acholi) [ci skip] * New translations scriptbar.mdx (Acholi) [ci skip] * New translations minecraftupdater.mdx (Acholi) [ci skip] * New translations modalfilemanager.mdx (Acholi) [ci skip] * New translations emailit.mdx (Acholi) [ci skip] * New translations troubleshooting.mdx (Japanese) [ci skip] * New translations troubleshooting.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Russian) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations troubleshooting.mdx (Acholi) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations building.mdx (Japanese) [ci skip] * New translations 2021-11-08-v2-beta2-release-notes.mdx (Japanese) [ci skip] * New translations howdoesitwork.mdx (Chinese Simplified) [ci skip] * New translations introduction.mdx (Japanese) [ci skip] * New translations introduction.mdx (Korean) [ci skip] * New translations introduction.mdx (Russian) [ci skip] * New translations introduction.mdx (Chinese Simplified) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Japanese) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Korean) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Russian) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Chinese Simplified) [ci skip] * New translations 2021-11-08-v2-beta2-release-notes.mdx (Korean) [ci skip] * New translations howdoesitwork.mdx (Korean) [ci skip] * New translations 2021-11-08-v2-beta2-release-notes.mdx (Russian) [ci skip] * New translations 2021-11-08-v2-beta2-release-notes.mdx (Chinese Simplified) [ci skip] * New translations 2022-02-22-v2-beta3-release-notes.mdx (Japanese) [ci skip] * New translations 2022-02-22-v2-beta3-release-notes.mdx (Korean) [ci skip] * New translations 2022-02-22-v2-beta3-release-notes.mdx (Russian) [ci skip] * New translations 2022-02-22-v2-beta3-release-notes.mdx (Chinese Simplified) [ci skip] * New translations dogsapi.mdx (Japanese) [ci skip] * New translations dogsapi.mdx (Korean) [ci skip] * New translations dogsapi.mdx (Russian) [ci skip] * New translations dogsapi.mdx (Chinese Simplified) [ci skip] * New translations howdoesitwork.mdx (Russian) [ci skip] * New translations howdoesitwork.mdx (Japanese) [ci skip] * New translations building.mdx (Korean) [ci skip] * New translations ides.mdx (Chinese Simplified) [ci skip] * New translations building.mdx (Russian) [ci skip] * New translations building.mdx (Chinese Simplified) [ci skip] * New translations installation.mdx (Korean) [ci skip] * New translations dynamic-assets.mdx (Japanese) [ci skip] * New translations dynamic-assets.mdx (Korean) [ci skip] * New translations dynamic-assets.mdx (Russian) [ci skip] * New translations dynamic-assets.mdx (Chinese Simplified) [ci skip] * New translations ides.mdx (Japanese) [ci skip] * New translations ides.mdx (Korean) [ci skip] * New translations ides.mdx (Russian) [ci skip] * New translations windows-installer.mdx (Japanese) [ci skip] * New translations helloworld.mdx (Chinese Simplified) [ci skip] * New translations windows-installer.mdx (Korean) [ci skip] * New translations windows-installer.mdx (Russian) [ci skip] * New translations windows-installer.mdx (Chinese Simplified) [ci skip] * New translations options.mdx (Japanese) [ci skip] * New translations options.mdx (Korean) [ci skip] * New translations options.mdx (Russian) [ci skip] * New translations options.mdx (Chinese Simplified) [ci skip] * New translations helloworld.mdx (Japanese) [ci skip] * New translations helloworld.mdx (Korean) [ci skip] * New translations helloworld.mdx (Russian) [ci skip] * New translations building.mdx (Acholi) [ci skip] * New translations dynamic-assets.mdx (Acholi) [ci skip] * New translations ides.mdx (Acholi) [ci skip] * New translations windows-installer.mdx (Acholi) [ci skip] * New translations howdoesitwork.mdx (Acholi) [ci skip] * New translations introduction.mdx (Acholi) [ci skip] * New translations options.mdx (Acholi) [ci skip] * New translations helloworld.mdx (Acholi) [ci skip] * New translations 2021-09-27-v2-beta1-release-notes.mdx (Acholi) [ci skip] * New translations 2021-11-08-v2-beta2-release-notes.mdx (Acholi) [ci skip] * New translations 2022-02-22-v2-beta3-release-notes.mdx (Acholi) [ci skip] * New translations dogsapi.mdx (Acholi) [ci skip] * New translations troubleshooting.mdx (Japanese) [ci skip] * New translations troubleshooting.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Russian) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations window.mdx (Japanese) [ci skip] * New translations window.mdx (Korean) [ci skip] * New translations window.mdx (Russian) [ci skip] * New translations window.mdx (Chinese Simplified) [ci skip] * New translations troubleshooting.mdx (Acholi) [ci skip] * New translations window.mdx (Acholi) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations installation.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Japanese) [ci skip] * New translations troubleshooting.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Russian) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations window.mdx (Japanese) [ci skip] * New translations window.mdx (Korean) [ci skip] * New translations window.mdx (Russian) [ci skip] * New translations window.mdx (Chinese Simplified) [ci skip] * New translations navbar.json (Japanese) [ci skip] * New translations troubleshooting.mdx (Acholi) [ci skip] * New translations navbar.json (Chinese Simplified) [ci skip] * New translations navbar.json (Russian) [ci skip] * New translations navbar.json (Korean) [ci skip] * New translations navbar.json (Acholi) [ci skip] * New translations events.mdx (Japanese) [ci skip] * New translations events.mdx (Korean) [ci skip] * New translations events.mdx (Russian) [ci skip] * New translations events.mdx (Chinese Simplified) [ci skip] * New translations events.mdx (Acholi) [ci skip] * New translations howdoesitwork.mdx (Japanese) [ci skip] * New translations building.mdx (Korean) [ci skip] * New translations development.mdx (Korean) [ci skip] * New translations overscroll.mdx (Japanese) [ci skip] * New translations overscroll.mdx (Korean) [ci skip] * New translations overscroll.mdx (Russian) [ci skip] * New translations overscroll.mdx (Chinese Simplified) [ci skip] * New translations introduction.mdx (Korean) [ci skip] * New translations overscroll.mdx (Acholi) [ci skip] * New translations bleeding-edge.mdx (Japanese) [ci skip] * New translations bleeding-edge.mdx (Korean) [ci skip] * New translations bleeding-edge.mdx (Russian) [ci skip] * New translations bleeding-edge.mdx (Chinese Simplified) [ci skip] * New translations bleeding-edge.mdx (Acholi) [ci skip] * New translations introduction.mdx (Korean) [ci skip] * New translations introduction.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Japanese) [ci skip] * New translations troubleshooting.mdx (Korean) [ci skip] * New translations troubleshooting.mdx (Russian) [ci skip] * New translations troubleshooting.mdx (Chinese Simplified) [ci skip] * New translations howdoesitwork.mdx (Japanese) [ci skip] * New translations troubleshooting.mdx (Acholi) [ci skip] * New translations frameless.mdx (Japanese) [ci skip] * New translations frameless.mdx (Korean) [ci skip] * New translations frameless.mdx (Russian) [ci skip] * New translations frameless.mdx (Chinese Simplified) [ci skip] * New translations options.mdx (Japanese) [ci skip] * New translations options.mdx (Korean) [ci skip] * New translations options.mdx (Russian) [ci skip] * New translations options.mdx (Chinese Simplified) [ci skip] * New translations frameless.mdx (Acholi) [ci skip] * New translations options.mdx (Acholi) [ci skip] * Fix issues again
This commit is contained in:
Lea Anthony
@@ -0,0 +1,243 @@
|
||||
---
|
||||
sidebar_position: 20
|
||||
---
|
||||
|
||||
# Dogs API
|
||||
|
||||
<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`:
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### 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`.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user