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

Pour construire l'ensemble du projet dans un seul binaire, nous devons exécuter

, 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

Testons si cela fonctionne en affichant simplement la valeur d'utilisation du processeur à l'écran.

wails build -d
./cpustats

Événements

Nous utilisons la liaison pour envoyer la valeur d'utilisation du processeur au frontend, essayons maintenant une approche différente, créons une minuterie en arrière-plan qui sera utilisée en arrière-plan en utilisant la méthode d'événement Envoyer la valeur d'utilisation du processeur. On peut alors s'abonner à l'événement en Javascript.

Dans Go, on peut faire ça dans la fonction

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

Dans Vue.js, on peut s'abonner à cet événement lorsque le composant est monté (ou n'importe où ailleurs) :

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

Barre de mesure

Ce serait bien d'avoir une barre de mesure pour montrer l'utilisation du processeur, nous allons donc inclure une dépendance tierce, utilisez simplement

:npm

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

puis importez le fichier

 : main.js

import VueApexCharts from 'vue-apexcharts'

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

Nous pouvons maintenant utiliser apexccharts pour afficher l'utilisation du processeur et mettre à jour la valeur du composant en recevant des événements du backend :

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

Pour changer de style , on peut modifier

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

Enfin, créez et exécutez

wails build -d
./cpustats

Tutoriel recommandé : "

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!