私たちはこれまで、Pythonを使って “フロントエンド・コード “のないダッシュボードを作成する方法について記事を書いてきました： Streamlit、Python、GridDBでインタラクティブなダッシュボードを作成する、PythonとGridDBクラウドを使ってインタラクティブなダッシュボードを作成する、また、node.jsとreact.jsを使ってシンプルなダッシュボードを作成する方法の記事にも取り組んできました： MERNスタックの代替： GERN Stackでクエリビルダを作る & GERN StackでCRUD操作。
本記事では、同様のアプローチを取りますが、代わりにbubbleを活用します。bubbleは、ユーザがコードに煩わされることなくWebページを作成できる「コードなし」ソリューションです。GridDB Cloud Web APIを利用することで、Bubbleアプリ・エディタ以外のものを触る必要が完全になくなります。
GridDB Cloud を利用するため、このプロセスを開始する前に準備することは何もありません。また、この記事に関連する唯一の前提条件はBubbleのアカウントであることも意味します。
これから作るもの — Todoアプリケーション
上で説明したように、私たちはバックエンドやフロントエンドのコードに触れることなく、シンプルなTodoアプリを作成します。Todoアプリに期待するのは、trueかfalseのどちらかに設定するアドホックステートメントを書けることで、falseがデフォルトのオプションだ。このことを念頭に置いて、私たちのアプリケーションを始めるには、ユーザーが達成したいタスクを入力するためのテキスト入力が必要です。さらに、ユーザーのTodoリストを表示するためのシンプルなデータテーブルが必要で、その完全性を切り替えられるようにすることが重要です。
このアプリのスキーマはとてもシンプルです。COLLECTIONコンテナに2つのカラム、1つはアイテム名、もう1つは各アイテムの完了度です。
| Item Name | Complete |
|---|---|
| @RowKey Clean house | false |
この大前提をBubble Appエディタを使って作成し、GridDB Cloudインスタンスに直接APIコールを行う。フロントエンド部分（私たちが見るもの）はBubbleエディタによって処理される。クラウドインスタンスから取得するデータは、Bubble API Connector Pluginを使って取得します。
データの送受信 — APIコール
アプリケーションの表示側にアイテムを配置し始める前に、APIコールを整理しておこう。ここではCRUD（Create、Read、Update、Delete）操作の全てを紹介したいので、最低でも4種類のAPIコールが必要になります。また、今回はノーコード環境なので、クラウドベースのGridDBインスタンスへのアクセスにはHTTP Requestsを利用します。注意：GridDBクラウドは現在、日本ユーザーのみ利用可能だ。無料トライアルはこちらから： https://form.ict-toshiba.jp/download_form_griddb_cloud/。それ以外の方は、GridDB Community EditionのWeb APIをご利用ください。GridDB CE のインストール方法はこちらをご覧ください： [また、Web APIについてはYouTube Videoをご参照ください。
最初のステップ
Bubble API Connector Pluginをインストールし、APIコールの作成を開始します。
BubbleエディタのPluginsセクションに移動し、API ConnectorからAPIを作成する。これを GridDB Cloud と呼ぶことにします。
GridDB Cloud への各 HTTP リクエストには HTTP Basic 認証が必要であることが既に分かっているので、それをトップで設定する。Content-Type:application/json “を共有ヘッダとして設定します。
素晴らしいです！これで、すべての呼び出しに認証情報とコンテンツ・タイプが送信されるようになりました。次に、最初のAPIコールを作成しましょう。
READ – APIコール
まずはGETリクエストです。このAPIコールのURLテンプレートは以下のようになる： https://cloud1.griddb.com/$TrialId/griddb/v2/$ClusterName/dbs/$DatabaseName/containers/#ContainerName/rows。では、これをバブルエディタから最初のAPIコールに入力してみましょう。APIコールを作成する際に最初に決定しなければならないのは、Actionとして使用するか、Dataとして使用するかを選択することです。Dataを選択した場合、例えばテーブルのデータソースとしてデータを直接取得することができます。しかし、Actionを選択した場合（ここではActionを選択する）、イベントが発生した後にワークフローを設定することができます（例えば、ユーザがそのボタンをクリックしたらこのACTIONを実行する、など）。GridDB Community Edition を利用している場合は、以下の Web API 仕様を参照してください。https://github.com/griddb/webapi/blob/master/WebAPISpecification.md.
次に、HTTPリクエストのタイプを選択する必要がある。リクエストの本文に、受け取りたい行数の制限を送信するので、POSTを選択します。
bodyセクションで、クエリに制限する行数を追加することができる。私たちのTodoアプリが10行を超えることはないだろうから、100行に設定して終わりにしましょう。
{"limit":100}
情報を入力したら、”initialize call “ボタンをクリックして、扱うデータの種類を選択します。
このプロセスでは、設計プロセスで使用できるように、APIコールも保存します。
CREATE – Todoアイテムの追加
次のAPIコールは、Todo項目を作成するものです。これを処理する最善の方法は、ユーザーが入力ボックスにテキストを入力できるようにし、リクエストのどこかにユーザー入力を入れてHTTPリクエストを送信することです。このAPIコールをActionとして、PUTリクエストに設定してみましょう。
興味深いのはリクエストの本文だ。ユーザー入力を含める必要があるため、項目名をダイナミックに設定する必要がある。これは less than と greater than シンボルを使って変数をカプセル化することで実現できます：
あとは、HTTPリクエストを行うときに動的データを挿入する方法を見つけるだけです。もう1つの注意点は、これらのAPIコールからの値がバブルデザイン要素に見えるようにするには、「private」チェックボックスをオフにする必要があるということです。
DELETE – Todoアイテムの削除
DELETEはCREATEと似ていますが、HTTPメソッド（DELETE）とボディが異なります。リクエストのボディは、削除したい行の行キー、つまりこの場合はTodoアイテムの名前だけを要求します。このAPIコールから受け取るデータは空なので、そのオプションを適宜選択してください。
繰り返しますが、この値は動的である必要があるので、動的な値をリクエストと一緒に送信する方法は後で考えましょう（ヒント：ワークフロー）。
UPDATE – Todoアイテムの更新 (完全性の切り替え)
更新処理も同様にAPIコール（Actionとして使用）になりますが、こちらはより複雑なものになります。というのも、ある行が完了したかどうかを「false」から「true」に更新するには、異なる場所から2つの動的な値を取得する必要があるからです。トグルする項目の正確な行キーが必要で、さらに現在の完全性の値の逆も必要です。この部分の処理方法については、これから説明します。
しかし、その呼び出しは以下のようなものです（以前の取り組みとほぼ同じです）：
右上のデータ型に注目してください：これも空です。
次にデザインパネルを見てみましょう。
Todoアプリのデザイン
デザイン・タブでは、クラウドインスタンスからアプリのビジュアル部分にデータを取り込む方法について説明します。入力部分は、2つのボタンと1つのテキスト入力という要素で処理しました。つのボタンはGET APIコールをトリガーする “get todo items “のために使い、もう1つのボタンはテキスト入力のテキストを基にtodoアイテムを作成するために使います。
これらの要素の下に、実際のTodo項目を表示するデータテーブルを追加します。
こんな感じです：
GridDBコンテナの作成
GridDBでは、テーブルをコンテナと呼びます。アプリの設計を始める前に、GridDB Cloudにコンテナを作成する必要があります。コンテナの作成には、Bubble API Calls を使用する方法と、GridDB Cloud ポータルを使用してコレクション・コンテナを作成する方法があります：
データフォーマットの問題
データ・テーブルには、新しいバブル・データ・テーブル要素を使用できます。1つの問題は、データテーブルのデータソースが特定の種類のソースを必要とすることです。READのAPIコールをActionの代わりにDataとして使用するように変更すれば、ここで使用することができますが、データは役に立ちません。なぜなら、GridDB Cloudから返されるデータは単なる配列 [[take out trash, false], [read book, true]] であり、Bubbleが得意とするのはJSON形式のキーと値のペア [{item: take out trash, complete: false}, {item: read book, complete: true}] であるためです。
そのため、今のところ、ワークフローとプラグインに戻って、GridDB Cloudから戻ってくるデータをBubbleが使いやすいように変更する必要があります。
ツールボックスAPI
GridDBクラウドから受け取ったデータを変更したりマッサージしたりするために、Toolboxと呼ばれるサードパーティプラグインを使用します。このプラグインを使うと、コードなしのソリューションの中でJavaScriptコードを使うことができます。そして、これはNO CODEの精神に反するが、いくつかのコードで少し手を汚すことで、長期的には物事がよりシンプルになる場合があります。
バブルのJavaScript？
プラグインをインストールしたら、今度はクラウドインスタンスから取り込んだデータをBubbleデザインパネルが受け入れられるような構造に変換することに取りかかりましょう。最初は、直感的に上で説明したようにキーと値のペアを与えようと思ったのですが、実装してみると、単純に単数の値を持つ配列で十分すぎることに気づきました（例えば、[[ゴミを出す, 本を読む, ブログを書く], [false, true, false]] の代わりに [[ゴミを出す, false], [本を読む, true]]）。
それでは、APIコールからデータを受け取り、それを変換するワークフローを作ってみましょう。ワークフローは、「Todo項目を取得」ボタンがクリックされたイベントから開始する。ステップ1では、GridDB Cloud – Get All Todo Itemsアクションを呼び出す。そしてステップ2では、新しくインストールしたプラグインの「Javascriptを実行」アクションを使います。
paramlist1`をステップ1の結果として設定することができる。これで、上のjavascriptスニペットでデータセットを操作できるようになりました。
console.log(properties);
var len = properties.paramlist1.length();
var mylist = properties.paramlist1.get(0,len);
var items = [];
var done = [];
console.log(mylist)
for (let i = 0; i < mylist.length; i+=2) {
items.push(mylist[i]);
done.push(mylist[i+1]);
}
bubble_fn_todo({
value_list: items,
outputlist1: done});
基本的にここで行っていることは、2つの新しい配列を作成することです。1つはすべてのTodo項目名を格納する配列、もう1つは各項目の完了を格納する配列です。各行の配列の位置は一致するので、items[0]はdone[0]のboolと一致します。完了したら、bubble_fn_$yournameというToolboxの特別な関数を呼び出します。グローバル変数である todo (つまり bubble_fn_todo) を呼び出し、そのオブジェクトの中に配列の値を格納します。value_listを項目名、outputlist1`を完全配列とします。
これを設定したら、デザイン部分に戻って配列の値を取得します。
JavaScript からバブルへ — デザイン要素
デザイン要素では、JavaScript to Bubbleという要素をフロントエンドのデザインに配置する必要があります。しかし、データテーブルの値を抽出できるように、この要素は必ず見えるようにしなければなりません。
そこでこのエレメントを作成し、編集します（デザインパネルでエレメントをダブルクリックします）。
編集中にbubble_fn_suffixに選んだ接尾辞(todo)を追加し、publish valueを選択します。また、outputlist1をtext型に設定することもできます。
そして、データテーブルのデータソースに戻り、Javascript to Bubble の値リストを選択します。
次に、列と行を設定する。列は列名として設定します。最初の繰り返し行には、テキストボックスを追加しましょう（これらは繰り返し表示される）。これは value_list から値を取得するもので、Todo項目名の配列であることを思い出してください。
The completeness column is a bit more involved.
これを Javascript to Bubble の outputlist1 :item# 現在の行のインデックス に設定する必要があります。4つのアイテムをつなぎ合わせて、結果を得ます（完成した配列の配列位置がアイテム名の配列と一致すると言ったのを覚えていますか？） 基本的には、この配列を使って、その隣の列（Todo項目の現在の行のテキスト）と同じインデックスの位置を、完成した配列のベースとして使用します。ご理解いただけたましたでしょうか。
残りのワークフローアイテム
全てのTodoアイテムを取得し、データテーブルに表示するワークフローアイテムについては既に説明しました。そのスクリーンショットをもう一度見てみましょう：
次に、POSTリクエストでTodoアイテムをサーバーに送信する方法を見てみましょう。
Todoアイテムの投稿
ユーザーが “Post Todo Item “ボタンをクリックするたびに、以下のワークフローが実行されます：
基本的には、ボタンをクリックすると、先ほど作成したPost Todo Item APIアクションが実行されますが、ドロップダウンメニューから動的データを追加する必要があります。スクリーンショットでは Input A's value として表示されています。この値は “ダイナミック・データ “の部分から選択できます。
ダイナミック・バリューを囲むダブルクォーテーションに注意してください。これがないとエラーになります。もう1つの注意点：引用符は、動的な挿入ではなく、APIコールで追加することもできます。ポイントは、データ・テキストをダブルクォーテーションで囲むことです。(例: [“laundry”] vs [laundry])
項目の削除
再度、削除ボタンがクリックされたら、Delete Item API Actionを実行します。ここで、アイコンのstateを “delete “に変更する第2ステップを行い、現在の行がサーバーに対して削除マークが付けられたことをユーザーに示します。
上記と同じ：ダイナミック値をダブルクォーテーションで囲むことに注意してください。省略するとエラーになります。もう1つの注意点：動的挿入ではなく、APIコールで引用符を追加することもできます。ポイントは、データ・テキストをダブルクォーテーションで囲むことです。(例: [“laundry”] vs [laundry])
項目の更新 — ワークフロー状態の操作
上で説明したように、これが一番複雑でした。なぜなら、2つの異なる場所から2つの異なる動的データポイントが必要だからです。また、完全性を反転させる必要があります（つまり、falseからtrue、またはその逆）。そのためにまたjavascriptを使います。
編集ボタンがクリックされると、ワークフローが起動し、javascriptが実行されます：
これがコードだ：
let completed = `js2b todo's outputllist1:item#Current row's index`
completed = Boolean(completed)
completed = !completed
bubble_fn_bool(completed)
基本的にやっていることは、ボタンがクリックされた行のcompletedカラムの現在値を取得し、反転させているだけです。そして、新しく反転した値をcompletedのbubble_fn_suffixに送信しています。
ワークフローのステップ2では、todo_itemというカスタムstateを作成し、行のrowkey（適切な行を更新するためには100%正確である必要があります）に対応する現在の行のテキストを保存します。これは “text” 型です。
基本的に、ここでやっていることは、後で取り出せる値を保存するための変数を作ることです。この場合、「現在の行のテキスト」（別名、Todo項目名）をステートtodo_item（別名、変数）に保存し、後で取り出せるようにしています。HTTPリクエストを行うためにこの値を取り出す必要があり、rowkeyが必要だからです。
And now in the design panel let’s create the Javascript to Bubble design element with the suffix called bool
ここでやりたいことは、trigger eventのチェックボックスを設定することです。つまり、編集ボタンをクリックすると、javascriptが実行され、ステートが設定され、このイベントがトリガーされます。それでは、ワークフローに戻りましょう：
このイベントがトリガーされると、ステップ1では設定した「Update Row」というAPIアクションを呼び出します。このアクションには2つの動的な値が必要なので、上のスクリーンショットのように設定します。Rowkeyは作成したカスタムステートなので、js2b todo's item todo_item（引用符に注目）と設定し、completedの部分はjavascriptで設定した値だが、js2bのboolの値です。ここで注意すべき点は、特別なフォーマットルール（:formatted as text）を設定したことです。Bubbleは真のbool値ではなく「yes/no」を使用するが、GridDB Cloudはbool値を期待します。そのため、Bubbleに “yes “を “true”、”no “を “false “としてフォーマットするように指示することができます。
状態に応じてアイコンを変更する
カスタム状態を使用する際の最後の注意点として、状態に応じてアイコンや色、視覚的な詳細を変更することができます。例えば、”edit doneness “ボタンでは、”complete “カラムの値に基づいてアイコンと色を変更します。その特定の行の値が “true “であれば、”false “に変更可能であることを示す赤の “stop “アイコンに設定します。またその逆もあります。”false “の場合は、”done “に変更できることを示す緑色のチェックマークが表示されます。
結論
これで、永続ストレージを備えた堅牢なGridDBクラウドデータベースに支えられた、（ほぼ）コード不要のTodoアプリが完成しました。
次回は、コードなしでシンプルなIoTダッシュボードを作成する予定です！
If you have any questions about the blog, please create a Stack Overflow post here https://stackoverflow.com/questions/ask?tags=griddb .
Make sure that you use the “griddb” tag so our engineers can quickly reply to your questions.