Exemple de création d'une application de bureau à l'aide du framework Go Wails

Comme nous le savons tous, Go est principalement utilisé pour créer des API, des backends Web et des outils CLI. Mais ce qui est intéressant, c’est que Go peut être utilisé dans des endroits auxquels on ne s’attendait pas.

Par exemple, nous pouvons créer une application de bureau avec Go et Vue.js en utilisant le framework Wails.

Il s'agit d'un nouveau framework, encore en version bêta, mais j'ai été surpris de voir à quel point il est facile de développer et de créer des applications.

Wails offre la possibilité de regrouper le code Go et l'interface Web dans un seul binaire. Wails CLI vous facilite la tâche en gérant la création, la compilation et l'empaquetage de projets.

Application

Nous allons créer une application très simple pour afficher l'utilisation du processeur de ma machine en temps réel. Si vous avez le temps et que vous aimez Wails, vous pouvez proposer quelque chose de plus créatif et complexe.

Installation

La CLI Wails peut être installée à l'aide de go get. Après l'installation, vous devez utiliser la commande wails setup pour le configurer.

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

Alors commençons notre projet avec cpustats:

wails init
cd cpustats

Notre projet comprend un backend Go et un frontend Vue.js. main.go sera notre point d'entrée où nous pourrons inclure toutes les autres dépendances, ainsi que go.mod fichiers pour les gérer. Le dossier frontend contient les composants Vue.js, le webpack et le CSS.

Concepts

Il existe deux composants principaux pour le partage de données entre le backend et le frontend : les liaisons et les événements.

La liaison est une méthode unique qui vous permet d'exposer (lier) votre code Go au front-end.

De plus, Wails fournit également un système d'événements unifié, similaire au système d'événements locaux de Javascript. Cela signifie que tout événement envoyé depuis Go ou Javascript peut être reçu par l'une ou l'autre partie. Les données peuvent être transmises avec n'importe quel événement. Cela vous permet de faire des choses élégantes, comme exécuter un processus en arrière-plan dans Go et informer le frontend de toute mise à jour.

Backend

Développons d'abord une partie backend qui récupère l'utilisation du processeur, puis l'envoie au frontend à l'aide de la méthode bind.

Nous allons créer un nouveau package et définir un type que j'exposerai (lierai) au frontend.

pkg/sys/sys.go:

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])),
    }
}

Si votre structure a une méthode WailsInit, Wails l'appellera au démarrage. Cela vous permet d'effectuer une initialisation avant le démarrage de l'application principale.

Introduisez le package main.go dans sys et liez l'instance Stats au front-end :

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()
}

Front-end

Nous avons lié , qui peut être appelée stats sur le frontend. Si nous voulons appeler la fonction window.backend.Stats, elle nous renverra une réponse. GetCPUUsage()

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

, ce qui peut être fait en ajoutant l'indicateur wails build pour créer une version déboguable. Cela créera un fichier binaire avec un nom qui correspond au nom du projet. -d

wails build -d
./cpustats

: WailsInit

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
}

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

:npm

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

 : main.js

import VueApexCharts from 'vue-apexcharts'

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

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

directement, ou les définir en composants. src/assets/css/main

wails build -d
./cpustats

Copier après la connexion

Copier après la connexion

Go Tutorial"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!