Skip to main content

クイックスタート - RestAPI編

今回は以下の機能を実現する社内向け管理画面を構築して、Querierの基本的な使い方を紹介します。

  • ユーザー一覧をテーブルに表示する
  • 通知のテンプレートを取得し、リストから選択する
  • セレクトで選択したテンプレートのタイトルと通知内容を表示する
  • 選択したユーザーに選択したテンプレート通知を送信する

データを連携する

今回はすでに接続されている [Onbording RestAPI] を使用するため、接続の設定などは必要ありません。 ご自身のデータソースを接続する場合は、こちらをご覧ください。

ユーザー一覧をテーブルに表示する

  1. 右側の [コンポーネント] から [テキスト] をドラッグ&ドロップします。
  2. 右側の [エディター][テキスト]ユーザー一覧 と入力します。
  3. 右側の [コンポーネント] から [テーブル] をドラッグ&ドロップします。
  4. [データフローリスト][新規作成] をクリックします。
  5. データフローの名前を ListUsers という名前に変更します。
  6. [Onboarding RestAPI] を選択します。
  7. [オプションの選択] を開き、[ath]/v1/users と入力します。
  8. [実行する] をクリックします。
  9. [テーブル] を選択し、[エディター][データ]{{ ListUsers.data.users }} と入力します。

通知のテンプレートを取得し、リストから選択する

  1. 右側の [コンポーネント] から [カラム] をドラッグ&ドロップします。
  2. [カラム] の左側にすでにある [テーブル] を配置し、右側に [セレクト][インプット][テキストエリア][ボタン] を設置します。
  3. [セレクト][インプット][テキストエリア][ボタン] のそれぞれの [エディター] から [ラベル] にそれぞれ、テンプレートを選択タイトル通知内容送信する と入力します。
  4. [データフローリスト][新規作成] をクリックします。
  5. データフローの名前を ListTemplates という名前に変更します。
  6. [Onboarding RestAPI] を選択します。
  7. [オプションの選択] を開き、[Path]/v1/templates と入力します。
  8. [実行する] をクリックします。
  9. [状態管理] をクリックし、[データフロー] の [ListTemplates]data の中に templates が返ってきていることを確認します。
  10. [セレクト][エディター] をご開き、[Values][Labels] にそれぞれ {{ ListTemplates.data.templates.map(d => d.id) }}{{ ListTemplates.data.templates.map(d => d.name) }} と入力します。
  11. [Default value] には {{ ListTemplates.data.templates[0].id }} と入力します。

セレクトで選択したテンプレートのタイトルと通知内容を表示する

  1. [データフローリスト][新規作成] をクリックします。
  2. データフローの名前を GetTemplate という名前に変更します。
  3. [Onboarding RestAPI] を選択します。
  4. [オプションの選択] を開き、[Path]/v1/templates/{{ select1.value ? select1.value : 1}} と入力します。
  5. [実行する] をクリックします。
  6. [状態管理] をクリックし、[データフロー] の [GetTemplate]data の中に titlebody が返ってきていることを確認します。
  7. [input1] をクリックし、 [エディター] の中の [Default value]{{ GetTemplate.data.title }} と入力します。
  8. [textarea1] をクリックし、 [エディター] の中の [Default value]{{ GetTemplate.data.body }} と入力します。
  9. [GetTemplate] の [変更が発生したら自動でクエリを実行] にチェックをつけます。

選択したユーザーに選択したテンプレート通知を送信する

  1. [データフローリスト][新規作成] をクリックします。
  2. データフローの名前を SendNotice という名前に変更します。
  3. [Onboarding RestAPI] を選択します。
  4. [オプションの選択] を開き、[メソッド]POST を選択し、 [Path]/v1/notices/send と入力します。
  5. [データ] の スクリプト内に以下のJSONを記述します。
{
"title": {{ input1.value }},
"body": {{ textarea1.value }},
"userId": {{ table1.selectedRow.data.id }}
}
  1. [button1] を選択し、[エディター] の中の [データフロー]SendNotice を選択します。
  2. テーブルから選択したユーザーに選択した通知の内容で通知が送信されることを確認します。