クイックスタート - REST API
今回は以下の機能を実現する社内向け管理画面を構築して、Querier の基本的な使い方を紹介します。
- ユーザー一覧をテーブルに表示する
- 通知のテンプレートを取得し、リストから選択する
- セレクトで選択したテンプレートのタイトルと通知内容を表示する
- 選択したユーザーに選択したテンプレート通知を送信する
データを連携する
今回はすでに接続されている [Onbording RestAPI] を使用するため、接続の設定などは必要ありません。
ご自身のデータソースを接続する場合は、こちらをご覧ください。
ユーザー一覧をテーブルに表示する
- 右側の [コンポーネント] から [テキスト] をキャンバスにドラッグ&ドロップします。
- 右側の [エディター] の [テキスト] に
ユーザー一覧
と入力します。 - 右側の [コンポーネント] から [テーブル] を 1 で配置した [テキスト] の下にドラッグ&ドロップします。
- [データフローリスト] の [新規作成] をクリックします。
- データフローの名前を
listUsers
という名前に変更します。 - [Onboarding RestAPI] を選択します。
- [Path] に
/v1/users
と入力します。 - [実行する] をクリックします。
- [テーブル] を選択し、[エディター] の [データ] に
{{ listUsers.data.users }}
と入力します。
通知のテンプレートを取得し、リストから選択する
- 右側の [コンポーネント] から [カラム] をキャンバスにドラッグ&ドロップします。
- [カラム] の左側にすでにある [テーブル] を配置し、右側に [セレクト] と [インプット] と [テキストエリア] と [ボタン] を設置します。
- [セレクト] と [インプット] と [テキストエリア] と [ボタン] のそれぞれの [エディター] から [ラベル] にそれぞれ、
テンプレートを選択
、タイトル
、通知内容
、送信する
と入力します。 - [データフローリスト] の [新規作成] をクリックします。
- データフローの名前を
listTemplates
という名前に変更します。 - [Onboarding RestAPI] を選択します。
- [Path] に
/v1/templates
と入力します。 - [実行する] をクリックします。
- [セレクト] の [エディター] をご開き、[Values] と [Labels] にそれぞれ
{{ listTemplates.data.templates.map(d => d.id) }}
、{{ listTemplates.data.templates.map(d => d.name) }}
と入力します。 - [Default value] には
{{ listTemplates.data.templates[0].id }}
と入力します。
セレクトで選択したテンプレートのタイトルと通知内容を表示する
- [データフローリスト] の [新規作成] をクリックします。
- データフローの名前を
getTemplate
という名前に変更します。 - [Onboarding RestAPI] を選択します。
- [Path] に
/v1/templates/{{ select1.value ? select1.value : 1}}
と入力します。 - [実行する] をクリックします。
- [input1] をクリックし、 [エディター] の中の [Default value] に
{{ getTemplate.data.title }}
と入力します。 - [textarea1] をクリックし、 [エディター] の中の [Default value] に
{{ getTemplate.data.body }}
と入力します。 - [getTemplate] の [変更が発生したら自動でクエリを実行] にチェックをつけます。
選択したユーザーに選択したテンプレート通知を送信する
- [データフローリスト] の [新規作成] をクリックします。
- データフローの名前を
sendNotice
という名前に変更します。 - [Onboarding RestAPI] を選択します。
- [メソッド] で
POST
を選択し、 [Path] に/v1/notices/send
と入力します。 - [データ] 内に以下の JSON を記述します。
{
"title": {{ input1.value }},
"body": {{ textarea1.value }},
"userId": {{ table1.selectedRow.data.id }}
}
- [button1] を選択し、[エディター] から [イベントを追加する] をクリックします。
- [データフロー] に
sendNotice
を選択します。 - テーブルから選択したユーザーに選択した通知の内容で通知が送信されることを確認します。