mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
v2.7.0
This commit is contained in:
Lea Anthony
@@ -0,0 +1,245 @@
|
||||
---
|
||||
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
|
||||
|
||||
이 튜토리얼은 [@tatadan](https://twitter.com/tatadan)에 의해 제공되었습니다. 그리고 [ Wails 예시 리포지토리](https://github.com/tataDan/wails-v2-examples)에서 예시를 확인할 수 있습니다.
|
||||
|
||||
:::
|
||||
|
||||
이 튜토리얼에서는 웹에서 개 사진을 검색한 다음 표시하는 애플리케이션을 개발할 것입니다.
|
||||
|
||||
### 프로젝트 생성
|
||||
|
||||
애플리케이션을 생성합니다. 터미널에 다음과 같이 입력합니다: `wails init -n dogs-api -t svelte`
|
||||
|
||||
참고: 원하는 경우 선택적으로 이 명령의 끝에 `-ide vscode` 또는 `-ide goland`를 추가할 수 있습니다. IDE 지원을 추가합니다.
|
||||
|
||||
이제 `cd dogs-api`를 만들고 프로젝트 파일 편집을 시작합니다.
|
||||
|
||||
### 사용하지 않는 코드 제거
|
||||
|
||||
사용하지 않는 몇가지 요소를 제거합니다.
|
||||
|
||||
- `app.go`를 열고 다음 줄을 제거합니다.
|
||||
|
||||
```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)
|
||||
}
|
||||
```
|
||||
|
||||
- `frontend/src/App.svelte`를 열고 모든 줄을 삭제합니다.
|
||||
- `frontend/src/assets/images/logo-universal.png` 파일을 삭제합니다.
|
||||
|
||||
### 우리만의 애플리케이션 생성하기
|
||||
|
||||
이제 새로운 Go 코드를 추가합니다.
|
||||
|
||||
함수 정의 앞에 다음 구조체 선언을 `app.go`에 추가합니다.
|
||||
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
`app.go`에 다음 함수를 추가합니다(함수 정의 뒤쪽에 존재):
|
||||
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
`app.go`의 `import` 섹션을 다음과 같이 수정합니다.
|
||||
|
||||
```go
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"encoding/json"
|
||||
"io/ioutil"
|
||||
"log"
|
||||
"net/http"
|
||||
"sort"
|
||||
)
|
||||
```
|
||||
|
||||
`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 -->
|
||||
|
||||
### 애플리케이션 테스트하기
|
||||
|
||||
바인딩을 생성하고 애플리케이션을 테스트하려면 `wails dev`를 실행합니다.
|
||||
|
||||
### 애플리케이션 컴파일하기
|
||||
|
||||
응용 프로그램을 단일 바이너리로 컴파일하려면 `wails build`를 실행합니다.
|
||||
+123
@@ -0,0 +1,123 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Hello World
|
||||
|
||||
이 튜토리얼의 목표는 Wails를 사용하여 가장 기본적인 애플리케이션을 시작하고 실행하는 것입니다. 튜토리얼을 통해 다음과 같은 것들을 할 수있습니다.
|
||||
|
||||
- 새로운 Wails 애플리케이션 생성
|
||||
- 애플리케이션 빌드
|
||||
- 애플리케이션 실행
|
||||
|
||||
:::note
|
||||
|
||||
이 튜토리얼에서는 Windows를 대상 플랫폼으로 사용합니다. 출력이 약간 다를 수 있습니다. 운영체제에 따라 다릅니다.
|
||||
|
||||
:::
|
||||
|
||||
## 새로운 Wails 애플리케이션 생성
|
||||
|
||||
기본 바닐라 JS 템플릿을 사용하여 새 Wails 애플리케이션을 만들려면, 다음 명령을 실행해야 합니다:
|
||||
|
||||
```bash
|
||||
wails init -n helloworld
|
||||
```
|
||||
|
||||
실행 결과로 다음과 유사한 결과가 반환됩니다.
|
||||
|
||||
```
|
||||
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.
|
||||
```
|
||||
|
||||
이렇게 하면 현재 디렉터리에 `helloworld`라는 새 디렉터리가 생성됩니다. 이 디렉토리에는 여러 파일이 있습니다:
|
||||
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
## 애플리케이션 빌드
|
||||
|
||||
애플리케이션을 빌드하려면 새 `helloworld` 프로젝트 디렉토리로 변경하고 다음 명령을 실행하십시오.
|
||||
|
||||
```bash
|
||||
wails build
|
||||
```
|
||||
|
||||
다음과 같은 내용이 표시되어야 합니다:
|
||||
|
||||
```
|
||||
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.
|
||||
```
|
||||
|
||||
이것은 애플리케이션을 컴파일하고 `build/bin` 디렉토리에 결과 실행파일을 저장합니다.
|
||||
|
||||
## 애플리케이션 실행
|
||||
|
||||
Windows 탐색기에서 `build/bin` 디렉토리를 보면 프로젝트 바이너리가 표시되어야 합니다.
|
||||
|
||||
```mdx-code-block
|
||||
<div class="text--center">
|
||||
<img
|
||||
src={require("@site/static/img/helloworld-app-icon.webp").default}
|
||||
width="134px"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
```
|
||||
|
||||
`helloworld.exe` 파일을 두 번 클릭하면 실행됩니다.
|
||||
|
||||
Mac에서 Wails는 두 번 클릭하여 실행할 수 있는 `helloworld.app` 파일을 생성합니다.
|
||||
|
||||
Linux에서는 `build/bin` 디렉토리에서 `./helloworld`를 사용하여 애플리케이션을 실행할 수 있습니다.
|
||||
|
||||
애플리케이션이 예상대로 동작하는지 확인해야 합니다.
|
||||
|
||||
```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