Go Wails フレームワークを使用したデスクトップ アプリケーションの構築例

                                                       

#ご存知のとおり、Go は主に API、Web バックエンド、CLI ツールの構築に使用されます。しかし興味深いのは、Go が予想外の場所でも使用できることです。 たとえば、Wails フレームワークを使用して Go と Vue.js でデスクトップ アプリケーションを構築できます。

これはまだベータ版の新しいフレームワークですが、アプリケーションの開発と構築が非常に簡単であることに驚きました。 Wails は、Go コードと Web フロントエンドを単一のバイナリにパッケージ化する機能を提供します。 Wails CLI を使用すると、プロジェクトの作成、コンパイル、パッケージ化を処理できるため、これが簡単になります。

アプリケーションマシンの 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 が含まれています。

コンセプト

バックエンドとフロントエンドの間でデータを共有するために使用される主なコンポーネントは、バインディングとイベントの 2 つです。 バインディングは、Go コードをフロントエンドに公開 (バインド) できる単一のメソッドです。

さらに、Wails は、JavaScript のローカル イベント システムと同様の、統合イベント システムも提供します。これは、Go または JavaScript から送信されたイベントはどちらの側でも受信できることを意味します。データはあらゆるイベントとともに渡すことができます。これにより、Go でバックグラウンド プロセスを実行したり、更新をフロントエンドに通知したりするなど、エレガントな操作が可能になります。 バックエンドまず、CPU 使用率を取得し、それを bind メソッドを使用してフロントエンドに送信するバックエンド部分を開発しましょう。

新しいパッケージを作成し、フロントエンドに公開 (バインド) するタイプを定義します。

pkg/sys/sys.go:<pre class="brush:php;toolbar:false">package sys import (     &quot;math&quot;     &quot;time&quot;     &quot;github.com/shirou/gopsutil/cpu&quot;     &quot;github.com/wailsapp/wails&quot; ) // Stats . type Stats struct {     log *wails.CustomLogger } // CPUUsage . type CPUUsage struct {     Average int `json:&quot;avg&quot;` } // WailsInit . func (s *Stats) WailsInit(runtime *wails.Runtime) error {     s.log = runtime.Log.New(&quot;Stats&quot;)     return nil } // GetCPUUsage . func (s *Stats) GetCPUUsage() *CPUUsage {     percent, err := cpu.Percent(1*time.Second, false)     if err != nil {         s.log.Errorf(&quot;unable to get cpu stats: %s&quot;, err.Error())         return nil     }     return &amp;CPUUsage{         Average: int(math.Round(percent[0])),     } }</pre>構造体に WailsInit メソッドがある場合、Wails は起動時にそれを呼び出します。これにより、メイン アプリケーションが開始する前に初期化を行うことができます。

main.go

に sys パッケージを導入し、Stats インスタンスをバインドしてフロントエンドに返します:

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 から

stats

インスタンスをバインドしました。これは、フロントエンドで

window.backend.Stats

と呼び出すことができます。 GetCPUUsage() 関数を呼び出したい場合は、応答が返されます。

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

プロジェクト全体を単一のバイナリにビルドするには、

wails build

を実行する必要があります。これを実行するには、

-d

フラグを追加してデバッグ可能なバージョンをビルドします。プロジェクト名と一致する名前のバイナリ ファイルが作成されます。 CPU 使用率の値を画面に表示するだけで、機能するかどうかをテストしてみましょう。

wails build -d
./cpustats

Event バインディングを使用して CPU 使用率の値をフロントエンドに送信しています。今度は別のアプローチを試してみましょう。バックグラウンドで使用されるタイマーを作成しましょう。イベントメソッド CPU使用率値を送信します。その後、JavaScript でイベントをサブスクライブできます。

Go では、

WailsInit

関数で実行できます。 <pre class="brush:php;toolbar:false">func (s *Stats) WailsInit(runtime *wails.Runtime) error {     s.log = runtime.Log.New(&quot;Stats&quot;)     go func() {         for {             runtime.Events.Emit(&quot;cpu_usage&quot;, s.GetCPUUsage())             time.Sleep(1 * time.Second)         }     }()     return nil }</pre>Vue.js では、コンポーネントのマウント時 (または他の場所) で実行できます。このイベントを購読します:

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

測定バー

CPU使用率を表示するために測定バーを使用すると便利なので、サードパーティの依存関係を含めて、 npm#を使用します。 ## 以上です:

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

次に、main.js ファイルをインポートします:

import VueApexCharts from 'vue-apexcharts'

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

###これで、apexccharts を使用して CPU 使用率を表示し、それをバックエンド Receive から渡すことができます。コンポーネントの値を更新するイベント: ###

<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>

###スタイルを変更するには、###src/assets/css/main### を直接変更するか、コンポーネント内でスタイルを定義します。 ######最後に、ビルドして実行します###

wails build -d
./cpustats

############推奨チュートリアル: "###Go Tutorial###"###

以上がGo Wails フレームワークを使用したデスクトップ アプリケーションの構築例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。