Googleスプレッドシート + Stein を連携したNode-REDでコーディング無しで触ってみよう

Googleスプレッドシート + Stein を連携したNode-REDでコーディング無しで触ってみましょう。

enebular からダッシュボードによる入力部分を作ったり、Google スプレッドシートにデータを保存したりと、ユーザーに端末を渡して使ってもらう際の参考になりそうなTIPSを盛り込んで Discover Flow に公開しました。

Stein の準備

image

まず、Stein https://steinhq.com/ にアクセスしてアカウントを準備しましょう。

image

右上の Sign up free ボタンをクリックします。

image

関連付ける Google アカウント を聞かれるので選択します。

image

「Stein が Google アカウントへのアクセスをリクエストしています」と聞かれるので許可します。

サインアップ完了してアカウント作成完了です。

1つのシートを作成して API URL を発行します

image

このように、1行目に

  • Datetime
  • Q1
  • Q2
  • Q3
  • Q4
  • Q5

という項目が並んでいるスプレッドシートを作ります。

image

シート名は Sheet1 としましょう。こちらのスプレッドシートのURLをコピーしておきます。

image

Stein に戻って Create a new API で先ほどのスプレッドシートのURLを入力して Create API ボタンをクリックして API を作成します。

image

できあがったら Copy API URL をクリックして

image

クリップボードにコピーされるので、テキストエディタにメモしておきましょう。

Discover Flow をインポート

今回の仕組みの Discover Flow はこちらです。

flow-visual-survey-sample

image

こちらをインポートします。

image

するとこのように表示されます。

Stein の設定

image

こちらの stein addrows のノードをクリックします。

image

鉛筆ボタンをクリックして編集します。

image

Stein の設定画面が表示されるので API URL に、先ほどコピーした API URL をペーストして更新をクリックします。

image

完了ボタンをクリックします。

image

デプロイ ボタンをクリックします。

これで設定は完了です。

Stein が動作しているか確認してみる

image

ダミーデータテキストという inject ノードのボタンをクリックしてデータを送ります。

image

inject ノードで送るデータ(ペイロード)は、このようになっています。

image

inject ノードをクリックすると stein addrow ノードが反応します。

image

このように、Google スプレッドシートの設定があっていれば、このようにデータが追加されます。

動かしてみる

先ほどの対応で動作確認ができたので動かしてみましょう。

image

右上の メニュー > 表示 > Dashboard をクリックすると、サイドバーにダッシュボード タブが表示されます。

image
image

をクリックしてダッシュボードを開きます。

image

試しに回答し、「アンケートを送る」をクリックしてデータを送ってみましょう。

image

クーポン券が表示される、送信後ページに移動したらデータが送られているはずです。

image

Google スプレッドシートを確認するとデータが追加されています。

QR コードの変更のやり方

image

送信後ページでクーポンを想定した QR コードがありますが、こちらのフローで変更できます。

image

qrcode-gen のノードをダブルクリックして設定できます。

image

Text or URL の項目を変更して、デプロイすれば変更されます。

今回は、ビジュアル アンケートの仕組みをNode-REDのダッシュボードと、Googleスプレッドシート + Stein で連携して実現してみました。今回の仕組みはサンプルですが、設問を変更したり、クーポンQRコードを調整したりと、いろいろ拡張が可能ですので、ぜひ参考にしてみてください!