Hello Guiチュートリアル

Hello Gui

最初のGUIチュートリアルへようこそ！

これまで、curlまたはhc testを使用してZomeとやり取りをしていましたが、GUIを使用すればもっと簡単になります。今回は、非常にシンプルなWebページを使用してHolochainアプリを操作する方法を学びましょう。

HTMLページを生成しましょう

まずは、すべてのGUIコードを格納する場所が必要です。これは、Holochainのzomeコードとは異なるソフトウェアになります。したがって、格納にはHolochainアプリケーション外の場所を選択しましょう。

まずはGUIが存在するフォルダを作成しましょう。

cd holochain/coreconcepts
mkdir gui
cd gui

さあ、お気に入りのエディターでindex.htmlという名前の新しいファイルを上記の場所で作成しましょう。 gui / index.htmlとなるはずです。次にindex.htmlに単純なHTMLテンプレートを追加しましょう。

このモダンなテンプレートを追加しましょう。インデントがついていないので気を付けてください。

<!DOCTYPE html>

<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>Hello GUI</title>
<meta name=“description” content=“GUI for a Holochain app” />
</head>

<body>タグの中にボタンを付け足しましょう。

<button type=“button”>Say Hello</button>

ちょっと見た目を優しいものにするために、water.cssスタイルシートを追加しましょう。

次のwater.cssリンクを<head>タグ内に追加してください。

これで、index.htmlがこのようになるはずです。

コードのチェック

<!DOCTYPE html>

<title>Hello GUI</title>
<meta name=“description” content=“GUI for a Holochain app” />
<link
rel=“stylesheet”
href=“https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css”
/>
</head>

<body>
<button type=“button”>Say Hello</button>
</body>
</html>

シンプルなサーバを実行しよう

nix-shellに入って、使用可能なすべての依存関係があることをまず確認してください。

nix-shell https://github.com/holochain/holonix/archive/v0.0.31.tar.gz

すべて稼働したら、簡単なサーバを起動しましょう。

<code>nix-shell</code>で実行

python -m SimpleHTTPServer

そして、ブラウザのhttp://0.0.0.0:8000/をご覧ください。次のようなものが表示されるはずです。

hc-web-client

前回のチュートリアルで作成したアプリと通信するときが来ました！この通信を簡単にするために、hc-web-clientが用意されています。これは HolochainのJavaScriptライブラリであり、アプリへのWebSocket接続を簡単にセットアップするために作られました。

なぜHTTPじゃなくてWebSocketなのか？

WebSocket接続を開いておくと、HolochainアプリからGUIにメッセージを送信できるようになります。今回のチュートリアルではまだ実装していませんが、このプロセスに慣れておくのは将来的に良いことです。

Hc-web-clientの使用を簡単にするために、hc-web-clientのあるバージョンをコンパイルしたものを用意しています。
ここからダウンロードしてから、解凍してGUIディレクトリのルートに貼り付けましょう。

unzip hc-web-client.zip

ファイルは次の場所に格納してください。

gui/hc-web-client/hc-web-client-0.5.1.browser.min.js
gui/hc-web-client/hc-web-client-0.5.1.browser.min.js.map

終わりましたら、次のscriptタグをbodyタグ内に追加することで、コンパイル済みのjsファイルに簡単にリンクできます。

Zome関数を呼び出そう！

hc-web-client.jsライブラリをリンクしたので、バニラJavaScriptを使用して簡単なZome関数の呼び出しを行うことができます。 <body>タグ内にこの関数を追加してください。

ポート3401でHolochainへのWebSocket接続を次のように作成してください。

var holochain_connection = holochainclient.connect({
url: ‘ws://localhost:3401’,
});

次に、hello()JavaScript関数を追加して、HTMLから呼び出すことができるようにします。

function hello() {

.thenを使ってHolochainが接続するのを待ってから、Zome関数の呼び出しを行います。

holochain_connection.then(({callZome, close}) => {

次の行でtest-instanceで稼働しているhelloという名前のzome内のhello_holo zome関数を呼び出します。

callZome(‘test-instance’, ‘hello’, ‘hello_holo’)({args: {}})

そして、次の行で関数の結果をブラウザのコンソールに出力してください。

.then((result) => console.log(result))
})
}

最後に<script>タグを閉じましょう。

</script>

このhello関数は、ポート3401でWebSocketを介してアプリに接続し、hello_holo zome関数を呼び出し、結果をブラウザのコンソールに出力します。さて、次にonclickイベントハンドラーを追加して、ボタンでこの関数を呼び出すようにしましょう。このボタンを<body>タグ内に追加してください。

~~– <button type=”button”>Say Hello</button>~~
+ <button onclick=”hello()” type=”button”>Say Hello</button>

今のところこのようなコードになっているはずです。

コードのチェック

<!DOCTYPE html>

<body>
<button onclick=“hello()” type=“button”>Say Hello</button>
<script
type=“text/javascript”
src=“hc-web-client/hc-web-client-0.5.1.browser.min.js”
></script>
<script type=“text/javascript”>
var holochain_connection = holochainclient.connect({
url: ‘ws://localhost:3401’,
});
function hello() {
holochain_connection.then(({callZome, close}) => {
callZome(‘test-instance’, ‘hello’, ‘hello_holo’)({args: {}}).then(result => console.log(result))
})
}
</script>
</body>
</html>

アプリを起動しよう

GUIから関数を呼び出すには、Holochainアプリが稼働している必要があります。そして新しいターミナルウィンドウを開き、前回のチュートリアルで作成したアプリのディレクトリに移動して、nix-shellに入ってください。

cd holochain/core_concepts/cc_tuts
nix-shell https://github.com/holochain/holonix/archive/v0.0.31.tar.gz

その後、アプリを実行してください。

<code>nix-shell</code>で実行

アプリをコンパイル

hc package

サーバをポート3401で実行

hc run -p 3401

Zomeを呼び出そう

もう一方のターミナルウィンドウ（GUIコードがあるウィンドウ）で、まだSimpleHTTPServerが実行されていない場合はSimpleHTTPServerを起動します。

<code>nix-shell</code>で実行

python -m SimpleHTTPServer

ブラウザを開き、0.0.0.0:8000を開いてください。（既に開いている場合はページを更新してください）。ページは同じように見えているはずです。次に、ブラウザの開発者コンソールを開き、ページのボタンをクリックしてみましょう。次のようなものが表示されるはずです。

注:このチュートリアルではFirefoxを使用しているので、これはブラウザによって少し違って見えるかもしれません

やりました！ GUIを使用してHolochainアプリを呼び出すことに成功しました！

出力値をレンダリングしよう！

htmlページでhello_holoを呼び出した時の結果を見えるようにしましょう。

まずは、ボタンの下に次のHTMLを追加しましょう。

<div>Response: <span id=“output”></span></div>

id="output"は、このelementをJavaScript関数から更新するために使用するものです。

hello関数の下に次の行を今度は追加します。
結果値を取得するshow_output関数の追加です。

function show_output(result) {

次の行で出力を挿入するelementを取得します。

var span = document.getElementById(‘output’);

次の行でzome関数の結果をJSONとしてパースします。

var output = JSON.parse(result);

elementの内容をZome関数の結果に設定します。

span.textContent = ‘ ‘ + output.Ok;
}

最後に、hello関数を更新して、console.log（）の代わりに新しいshow_output関数を呼び出しましょう。

– result => console.log(result),
+ result => show_output(result),

これでコードはこのようになっているはずです。

コードのチェック

<!DOCTYPE html>

<body>
<button onclick=“hello()” type=“button”>Say Hello</button>
<div>Response: <span id=“output”></span></div>
<script
type=“text/javascript”
src=“hc-web-client/hc-web-client-0.5.1.browser.min.js”
></script>
<script type=“text/javascript”>
var holochain_connection = holochainclient.connect({
url: ‘ws://localhost:3401’,
});
function hello() {

holochain_connection.then(({callZome, close}) => {

callZome(‘test-instance’, ‘hello’, ‘hello_holo’)({args: {}}).then(result => show_output(result))

})
}

function show_output(result) {

var span = document.getElementById(‘output’);

var output = JSON.parse(result);

span.textContent = ‘ ‘ + output.Ok;

}
</script>
</body>
</html>

出力が上手く動いていることを確認しよう

Webブラウザで0.0.0.0:8000に移動（既に開いている場合は更新してください）すると、次のように表示されるはずです。

次に、Say Helloボタンを押すと、responseが次のように得られます。

おめでとうございます！ Holochainアプリと通信できる機能的なGUIが完成しました！