Go Wails 프레임워크를 사용하여 데스크톱 애플리케이션을 구축하는 예

                                                        우리가 아는 한, Go는 주로 API, 웹 백엔드 및 CLI 도구를 구축하는 데 사용됩니다. 그런데 흥미로운 점은 Go가 우리가 예상하지 못한 곳에서도 사용될 수 있다는 것입니다.

예를 들어, Wails 프레임워크를 사용하여 Go 및 Vue.js로 데스크톱 애플리케이션을 구축할 수 있습니다.

이것은 아직 베타 버전인 새로운 프레임워크이지만 애플리케이션을 개발하고 구축하는 것이 얼마나 쉬운지 놀랐습니다.

Wails는 Go 코드와 웹 프런트엔드를 단일 바이너리로 패키징하는 기능을 제공합니다. Wails CLI를 사용하면 프로젝트 생성, 컴파일 및 패키징을 처리하여 이를 쉽게 수행할 수 있습니다.

App

우리는 내 컴퓨터의 CPU 사용량을 실시간으로 표시하는 매우 간단한 앱을 만들 예정입니다. 시간이 있고 Wails를 좋아한다면 더 창의적이고 복잡한 것을 생각해 낼 수 있습니다.

설치

Wails CLI는 go get을 사용하여 설치할 수 있습니다. 설치 후에는 wails setup 명령을 사용하여 설정해야 합니다.

go get github.com/wailsapp/wails/cmd/wails
wails setup

그런 다음 cpustats를 사용하여 프로젝트를 시작하겠습니다.

wails init
cd cpustats

우리 프로젝트에는 Go 백엔드와 Vue.js 프런트엔드가 포함되어 있습니다. main.go는 go.mod 파일과 함께 다른 종속성을 포함하여 이를 관리할 수 있는 진입점이 됩니다. frontend 폴더에는 Vue.js 구성 요소, webpack 및 CSS가 포함되어 있습니다.

go get 安装。安装之后，你应该使用 wails setup 命令进行设置。

package sys

import (
    "math"
    "time"

    "github.com/shirou/gopsutil/cpu"
    "github.com/wailsapp/wails"
)

// Stats .
type Stats struct {
    log *wails.CustomLogger
}

// CPUUsage .
type CPUUsage struct {
    Average int `json:"avg"`
}

// WailsInit .
func (s *Stats) WailsInit(runtime *wails.Runtime) error {
    s.log = runtime.Log.New("Stats")
    return nil
}

// GetCPUUsage .
func (s *Stats) GetCPUUsage() *CPUUsage {
    percent, err := cpu.Percent(1*time.Second, false)
    if err != nil {
        s.log.Errorf("unable to get cpu stats: %s", err.Error())
        return nil
    }

    return &CPUUsage{
        Average: int(math.Round(percent[0])),
    }
}

然后让我们用 cpustats 来启动我们的项目:

package main

import (
    "github.com/leaanthony/mewn"
    "github.com/plutov/packagemain/cpustats/pkg/sys"
    "github.com/wailsapp/wails"
)

func main() {
    js := mewn.String("./frontend/dist/app.js")
    css := mewn.String("./frontend/dist/app.css")

    stats := &sys.Stats{}

    app := wails.CreateApp(&wails.AppConfig{
        Width:  512,
        Height: 512,
        Title:  "CPU Usage",
        JS:     js,
        CSS:    css,
        Colour: "#131313",
    })
    app.Bind(stats)
    app.Run()
}

我们的项目包括 Go 后端和 Vue.js 前端。main.go 将是我们的入口点，我们可以在其中包含任何其他依赖项，还有 go.mod 文件来管理它们。frontend 文件夹包含 Vue.js 组件，webpack 和 CSS。

概念

有两个主要组件用于在后端和前端之间共享数据：绑定和事件。

绑定是一个单一的方法，它允许你向前端公开(绑定)你的 Go 代码。

此外，Wails 还提供了一个统一的事件系统，类似于 Javascript 的本地事件系统。这意味着从 Go 或 Javascript 发送的任何事件都可以由任何一方接收。数据可以随任何事件一起传递。这允许你做一些优雅的事情，比如让后台进程在 Go 中运行，并通知前端任何更新。

后端

让我们先开发一个后端部分，获取 CPU 使用情况，然后使用 bind 方法将其发送到前端。

我们将创建一个新的包，并定义一个类型，我将公开(绑定)到前端。

pkg/sys/sys.go:

window.backend.Stats.GetCPUUsage().then(cpu_usage => {
    console.log(cpu_usage);
})

如果你的结构体有一个 WailsInit 方法，Wails 将在启动时调用它。这允许您在主应用程序启动之前进行一些初始化。

在 main.go 中引入 sys 这个包，绑定 Stats 实例返回给前端：

wails build -d
./cpustats

前端

我们从 Go 绑定了 stats 实例，它可以在前端被 window.backend.Stats 调用。如果我们想调用 GetCPUUsage() 函数 ，它会给我们返回一个应答。

func (s *Stats) WailsInit(runtime *wails.Runtime) error {
    s.log = runtime.Log.New("Stats")

    go func() {
        for {
            runtime.Events.Emit("cpu_usage", s.GetCPUUsage())
            time.Sleep(1 * time.Second)
        }
    }()

    return nil
}

要将整个项目构建成单一的二进制文件，我们应该运行 wails build，可以添加 -d 标志来构建一个可调试的版本。它将创建一个名称与项目名称匹配的二进制文件。

让我们通过简单地在屏幕上显示 CPU 使用值来测试它是否工作。

mounted: function() {
    wails.events.on("cpu_usage", cpu_usage => {
        if (cpu_usage) {
            console.log(cpu_usage.avg);
        }
    });
}

事件

我们使用绑定将 CPU 使用值发送到前端，现在让我们尝试不同的方法，让我们在后台创建一个计时器，它将使用事件方法在后台发送 CPU 使用值。然后我们可以订阅 Javascript 中的事件。

在 Go 中，我们可以在 WailsInit 函数中实现：

npm install --save apexcharts
npm install --save vue-apexcharts

在 Vue.js 中，我们可以在组件挂载(或任何其他地方)时订阅此事件：

import VueApexCharts from 'vue-apexcharts'

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)

测量条

如果使用一个测量条来显示 CPU 的使用情况就好了，因此我们将包含一个第三方依赖项，只需使用 npm 即可：

<template>
  <apexchart></apexchart>
</template>

<script>
export default {
  data() {
    return {
      series: [0],
      options: {
        labels: [&#39;CPU Usage&#39;]
      }
    };
  },
  mounted: function() {
    wails.events.on("cpu_usage", cpu_usage => {
      if (cpu_usage) {
        this.series = [ cpu_usage.avg ];
      }
    });
  }
};
</script>

然后导入 main.js 文件:

wails build -d
./cpustats

现在，我们可以使用 apexcharts 显示 CPU 使用情况，并通过从后端接收事件来更新组件的值:

rrreee

要更改样式，我们可以直接修改 src/assets/css/main 개념

백엔드와 프런트엔드 간에 데이터를 공유하는 두 가지 주요 구성 요소는 바인딩과 이벤트입니다.

바인딩은 Go 코드를 프런트 엔드에 노출(바인딩)할 수 있는 단일 방법입니다.

또한 Wails는 Javascript의 로컬 이벤트 시스템과 유사한 통합 이벤트 시스템도 제공합니다. 이는 Go 또는 Javascript에서 전송된 모든 이벤트를 어느 쪽에서든 수신할 수 있음을 의미합니다. 데이터는 모든 이벤트와 함께 전달될 수 있습니다. 이를 통해 Go에서 백그라운드 프로세스를 실행하고 업데이트를 프런트엔드에 알리는 등 우아한 작업을 수행할 수 있습니다.

Backend

먼저 CPU 사용량을 가져온 다음 bind 메서드를 사용하여 이를 프런트엔드로 보내는 백엔드 부분을 개발해 보겠습니다. 🎜🎜새 패키지를 만들고 프런트엔드에 노출(바인딩)할 유형을 정의하겠습니다. 🎜🎜pkg/sys/sys.go:🎜rrreee🎜구조물에 WailsInit 메서드가 있는 경우 Wails는 시작 시 이를 호출합니다. 이를 통해 기본 애플리케이션이 시작되기 전에 일부 초기화를 수행할 수 있습니다. 🎜🎜main.go에 sys 패키지를 도입하고 Stats 인스턴스를 바인딩하여 프런트 엔드로 반환합니다: 🎜rrreee🎜Front end🎜 🎜프론트 엔드에서 window.backend.Stats에 의해 호출될 수 있는 stats 인스턴스를 Go Binds에서 시작합니다. GetCPUUsage() 함수를 호출하려는 경우 응답이 반환됩니다. 🎜rrreee🎜전체 프로젝트를 단일 바이너리로 빌드하려면 wails 빌드를 실행해야 합니다. 이는 디버그 가능한 버전을 빌드하기 위해 -d 플래그를 추가하여 수행할 수 있습니다. 프로젝트 이름과 일치하는 이름의 바이너리 파일이 생성됩니다. 🎜🎜CPU 사용량 값을 화면에 간단히 표시하여 작동하는지 테스트해 보겠습니다. 🎜rrreee🎜Events🎜🎜우리는 바인딩을 사용하여 CPU 사용량 값을 프런트엔드로 보내고 있습니다. 이제 다른 접근 방식을 시도해 보겠습니다. 백그라운드에서 이벤트 메서드를 사용하여 CPU 사용량 값을 보내는 타이머를 백그라운드에 만들어 보겠습니다. 그런 다음 Javascript에서 이벤트를 구독할 수 있습니다. 🎜🎜Go에서는 WailsInit 함수에서 이 작업을 수행할 수 있습니다. 🎜rrreee🎜Vue.js에서는 구성 요소가 마운트될 때(또는 다른 곳에서) 이 이벤트를 구독할 수 있습니다. 🎜rrreee🎜 측정 Bar 🎜🎜 CPU 사용량을 표시하는 측정 막대가 있으면 좋을 것이므로 타사 종속성을 포함하겠습니다. npm을 사용하세요. 🎜rrreee🎜 그런 다음 main.js를 가져옵니다. code> 파일: 🎜rrreee🎜 이제 apexccharts를 사용하여 CPU 사용량을 표시하고 백엔드에서 이벤트를 수신하여 구성 요소의 값을 업데이트할 수 있습니다. 🎜rrreee🎜스타일을 변경하려면 <code>src/assets/css/main을 직접 수정할 수 있습니다. 를 사용하거나 구성요소에서 정의하세요. 🎜🎜마지막으로 빌드하고 실행합니다. 🎜rrreee🎜🎜🎜🎜추천 튜토리얼: "🎜Go Tutorial🎜"🎜

위 내용은 Go Wails 프레임워크를 사용하여 데스크톱 애플리케이션을 구축하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!