クイックスタート - 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を選択します。
- テーブルから選択したユーザーに選択した通知の内容で通知が送信されることを確認します。