Googleスプレッドシート + Stein を連携したNode-REDでコーディング無しで触ってみましょう。
enebular からダッシュボードによる入力部分を作ったり、Google スプレッドシートにデータを保存したりと、ユーザーに端末を渡して使ってもらう際の参考になりそうなTIPSを盛り込んで Discover Flow に公開しました。
Stein の準備
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_01.png)
まず、Stein https://steinhq.com/ にアクセスしてアカウントを準備しましょう。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_02.png)
右上の Sign up free ボタンをクリックします。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_03.png)
関連付ける Google アカウント を聞かれるので選択します。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_04.png)
「Stein が Google アカウントへのアクセスをリクエストしています」と聞かれるので許可します。
サインアップ完了してアカウント作成完了です。
1つのシートを作成して API URL を発行します
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_05.png)
このように、1行目に
- Datetime
- Q1
- Q2
- Q3
- Q4
- Q5
という項目が並んでいるスプレッドシートを作ります。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_06.png)
シート名は Sheet1
としましょう。こちらのスプレッドシートのURLをコピーしておきます。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_07.png)
Stein に戻って Create a new API で先ほどのスプレッドシートのURLを入力して Create API ボタンをクリックして API を作成します。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_08.png)
できあがったら Copy API URL をクリックして
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_09.png)
クリップボードにコピーされるので、テキストエディタにメモしておきましょう。
Discover Flow をインポート
今回の仕組みの Discover Flow はこちらです。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_10.png)
こちらをインポートします。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_11.png)
するとこのように表示されます。
Stein の設定
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_12.png)
こちらの stein addrows のノードをクリックします。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_13.png)
鉛筆ボタンをクリックして編集します。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_14.png)
Stein の設定画面が表示されるので API URL に、先ほどコピーした API URL をペーストして更新をクリックします。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_15.png)
完了ボタンをクリックします。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_16.png)
デプロイ ボタンをクリックします。
これで設定は完了です。
Stein が動作しているか確認してみる
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_17.png)
ダミーデータテキストという inject ノードのボタンをクリックしてデータを送ります。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_18.png)
inject ノードで送るデータ(ペイロード)は、このようになっています。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_19.png)
inject ノードをクリックすると stein addrow ノードが反応します。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_20.png)
このように、Google スプレッドシートの設定があっていれば、このようにデータが追加されます。
動かしてみる
先ほどの対応で動作確認ができたので動かしてみましょう。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_21.png)
右上の メニュー > 表示 > Dashboard をクリックすると、サイドバーにダッシュボード タブが表示されます。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_22.png)
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_23.png)
をクリックしてダッシュボードを開きます。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_24.png)
試しに回答し、「アンケートを送る」をクリックしてデータを送ってみましょう。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_25.png)
クーポン券が表示される、送信後ページに移動したらデータが送られているはずです。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_26.png)
Google スプレッドシートを確認するとデータが追加されています。
QR コードの変更のやり方
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_27.png)
送信後ページでクーポンを想定した QR コードがありますが、こちらのフローで変更できます。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_28.png)
qrcode-gen のノードをダブルクリックして設定できます。
![image](/wp-content/uploads/2021/03/enebular-non-coding-visual-form-with-stein_29.png)
Text or URL の項目を変更して、デプロイすれば変更されます。
今回は、ビジュアル アンケートの仕組みをNode-REDのダッシュボードと、Googleスプレッドシート + Stein で連携して実現してみました。今回の仕組みはサンプルですが、設問を変更したり、クーポンQRコードを調整したりと、いろいろ拡張が可能ですので、ぜひ参考にしてみてください!