Go로 GUI 앱을 만들 수있는 gotron을 만져 보았습니다.

13208 단어 5GUIgotron

먼저



Go API for Electron 같다, gotron를 우연히 찾아 만져 보았을 때의 비망록을 씁니다.

github



나 자신은 너무 Go에 익숙하지 않기 때문에 여기에 나열된 코드는 Go로 미묘한 쓰기를 할 수 있습니다.
크로스 컴파일해 각 플랫폼마다의 데스크탑 앱 만들면 편리하다-라고 하는 푹신한 동기로, 조금 만져 보는가 하는 가벼운 기분으로 만지고 있습니다.
결론 : 그다지 도움이되지 않는 것이 좋습니다.

Getting started


go get github.com/Equanox/gotron

README에 쓰여진 대로 실시해 본다.
package main

import (
    "github.com/Equanox/gotron"
)

func main() {
    // browser window instanceを生成する
    window, err := gotron.New()
    if err != nil {
        panic(err)
    }

    // デフォルトのwindowサイズとタイトルを変更する
    window.WindowOptions.Width = 1200
    window.WindowOptions.Height = 980
    window.WindowOptions.Title = "Gotron"

    // browser window を起動
    // window objectを使ってElectronBrowserWindow をコントロールするために
    // websocketを使って go と nodejsのブリッジを確立するよう
    done, err := window.Start()
    if err != nil {
        panic(err)
    }

    // dev toolsを使う場合は下記をコメントアウトする(せっかくなのでdevtools使ってみる)
    window.OpenDevTools()

    // アプリケーションがcloseするのを待つ
    <-done
}
<-done 의 쓰는 방법이 ? 라고 일순간 생각했지만 이것은 channel 이었다.
실로 초보적이고 미안하다.

부팅
go run main.go


dev tools 가 열린 상태에서 앱이 표시됨

WebUI 사용


gotron.New 때 인수에 index.html을 포함하는 디렉토리에 대한 경로를 지정하여 웹 UI를 사용할 수 있습니다.
mkdir webapp
touch webapp/index.html

샘플로 양식 화면 만들기
<!DOCTYPE html>
<html>
<head>
  <title>form example</title>
</head>

<body>

<form name="login">
  <input name="email" type="email">
  <input name="password" type="password">
  <button type="submit">ログイン</button>
</form>

</body>
</html>

go 코드를 다시 씁니다.
    window, err := gotron.New("webapp")
    if err != nil {
        panic(err)
    }

이것으로 기동하면, webui(폼 화면)가 표시된다.
go run main.go



WebSocket을 사용하여 Backend와 상호 작용



github의 README를 참조하면서 재 작성
package main

import (
    "bytes"
    "fmt"

    "github.com/Equanox/gotron"
)

func main() {
    // browser window instanceを生成する
    window, err := gotron.New("webapp")
    if err != nil {
        panic(err)
    }

    // デフォルトのwindowサイズとタイトルを変更する
    window.WindowOptions.Width = 1200
    window.WindowOptions.Height = 980
    window.WindowOptions.Title = "Gotron"

    // browser window を起動
    // window objectを使ってElectronBrowserWindow をコントロールするために
    // websocketを使って go と nodejsのブリッジを確立するよう
    done, err := window.Start()
    if err != nil {
        panic(err)
    }

    // dev toolsを使う場合は下記をコメントアウトする
    // window.OpenDevTools()

    window.On(&gotron.Event{Event: "event-name"}, func(bin []byte) {
        // ここに処理を書いていく
        // fmt.Println(bin)
        b := []byte(bin)
        buf := bytes.NewBuffer(b)
        fmt.Println(buf)
    })

    // アプリケーションがcloseするのを待つ
    <-done
}
webapp/index.html 역시 아래와 같이 다시 쓴
<!DOCTYPE html>
<html>
<head>
  <title>websocket example</title>
</head>

<body>

<div>
  <button>イベントボタン</button>
</div>
<script>
  const ws = new WebSocket("ws://localhost:" + global.backendPort + "/web/app/events");
  console.log("Setup web socket:", ws);

  const button = document.querySelector("button");
  button.addEventListener("click", event => {
    ws.send(JSON.stringify({
    "event": "event-name",
        "AtrNameInFrontend": "Hello World!",
    }))
    console.log("Send success!!");
  });
</script>

</body>
</html>

앱을 실행하고 イベントボタン를 누르면 아래와 같은 로그가 서버 측 콘솔에 표시됩니다.
{"event":"event-name","AtrNameInFrontend":"Hello World!"}

마지막으로



아직 만지기 시작했을 뿐이므로, 그 중 실제로 크로스 컴파일 해 보고, 실행 파일 두드리는 것만으로 기동할 수 있는 데스크탑 앱을 각 플랫폼용으로 만들거나 해 보고 싶다.
【Python】Tkinter를 사용한 병아리(클래스화 기법)
Rust에서 GUI ~gtk편~

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage