ドキュメント
アプリの構築
クイックスタート
MySQL

クイックスタート - MySQL

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

  • ユーザーの一覧を表示する
  • ユーザー名から検索する
  • ユーザーのメールアドレスを変更する

データを連携する

今回はすでに接続されている [Onboading DB] を使用するので、接続の設定などは必要ありません。

ご自身のデータソースを接続した方は、こちらをご覧ください。

管理画面を構築する

画面のラベルを配置する

  1. 右側の [コンポーネント] から [テキスト] をキャンバスにドラッグ&ドロップします。
  2. 右側の [エディター][テキスト]ユーザー一覧 と入力します。
  3. 右側の [エディター][サイズ]large に変更します。

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

  1. 右側の [コンポーネント] から [テーブル] を 1 で配置した [テキスト] の下にドラッグ&ドロップします。
  2. [データフローリスト][新規作成] をクリックします。
  3. [データフロー] の下のテキストインプットにある、データフローの名前を listUsers という名前に変更します。
  4. [Onboarding DB] という MySQL のデータソースを選択します。
  5. [SQL] に、以下の SQL を記述します
SELECT * FROM users LIMIT 20;
  1. listUsers の横の**[実行する]** をクリックします。
  2. 配置された [テーブル] をクリックし、右側の設定項目の データ{{ listUsers.data }} に変更すると、データがマッピングされます。

ユーザー名から検索する

  1. 右側の [コンポーネント] から [インプット][テキスト][テーブル] の間にドラッグ&ドロップします。
  2. 右側の [エディター][ラベル]メールアドレスで検索 と入力します。
  3. 前で作成した listUsers のデータフローを選択し、 [action1] を選択します。
  4. [SQL] を以下に変更します。
SELECT * FROM users WHERE email LIKE '%{{ input1.value }}%' LIMIT 20;
  1. [変更発生時に自動で実行] のチェックをオンにします。

ユーザーのメールアドレスを変更する

  1. 右側の [コンポーネント] から [カラム] をキャンバスにドラッグ&ドロップします。
  2. [カラム] の左側にすでに配置されているテーブルを移動します。
  3. [カラム] の右側に新しく [インプット] を配置します。
  4. 3 で配置したインプットの [エディター][ラベル]メールアドレスを更新 と入力します。
  5. 3 で配置したインプットの [エディター][Default value]{{ table1.selectedRow.data.email }} と入力します。
  6. [ボタン] を 3 で配置したインプットの下に配置します。
  7. 6 で配置したボタンの [エディター][ラベル]更新 と入力します。
  8. [カラム] のアジャスターを動かして、幅を調整します。
  9. [データフローリスト] に戻り、 [新規作成] をクリックします。
  10. [データフロー] の下のテキストインプットにある、データフローの名前を updateUserEmail という名前に変更します。
  11. [Onboarding DB] という MySQL のデータソースを選択します。
  12. [SQL] に、以下の SQL を記述します
UPDATE users
SET email = '{{ input2.value }}'
WHERE id = {{ table1.selectedRow.data.id }};
  1. [成功時に実行するアクション] で、 listUsers データフローを選択します。これをすることによって、 updateUserEmail が実行された後に、 listUsers が実行されるので、テーブル情報が最新の状態に保たれます。
  2. 6 で配置したボタンの [エディター] から [イベントを追加する] をクリックします。
  3. [データフロー]updateUserEmail を選択します。これをすることによって、ボタンが押された直後に updateUserEmail が実行されます。