クイックスタート

5分間のチュートリアル

Retoolには、テストに使用できるサンプルのデータベースとAPIが付属しています。この5分間のチュートリアルで、サンプルのデータソースを使用して、ユーザーを参照、検索および承認するアプリを作成する方法を紹介します。

はじめに

1. https://login.retool.com/で新しいアカウントを作成します。オンボード・プロセスを実行するようにプロンプトが表示されたら、これをスキップして、ブランクの新規アプリを作成します。

2. キャンバスで使用可能なコンポーネントのリストは、画面の右側にあります。Textコンポーネントをキャンバスにドラッグします。

📘

注意

コンポーネントは、キャンバスにドロップしたときに、自動的に選択されます。コンポーネントを選択すると、右側にあるコンポーネント・リストが選択したコンポーネントを編集するインターフェイスに置き換わります。

コンポーネントの選択を解除するには、キャンバス内の空白の領域をクリックするか、Escキーを押します。コンポーネントのリストが画面の右側に再度表示されます。

3. テキストを、情報を表す言葉にカスタマイズします。値入力ボックスでマークダウンを使用して、テキストをヘッダーとして書式設定し、Textフィールドの値を# Usersに変更します。キャンバス上のテキストは自動的に更新され、変更した値が反映されます。

クエリーの作成

画面の下部にあるクエリー・エディターで、クエリーの作成またはAPIリクエストの作成を行うことができます。サンプル・データベースは、事前にデモ・データが入力されて提供されています。独自のデータベースを追加した場合、クエリー・エディター・ウィンドウの左上隅にあるドロップダウンを使用して、切り替えることができます。

1. コード・エディターで、select * from users;と入力します。

クエリーをテストするには、Previewボタンをクリックします。

アプリの残りの部分でこのクエリーからデータの使用を開始するには、クエリーを保存する必要があります。Saveをクリックして、クエリーを保存します。

🚧

クエリーを保存する際の注意事項

Retoolでは自動的にクエリーが保存されないため、クエリーの編集後は常にクエリーを保存することを忘れないでください。

データの表示

テーブル・コンポーネントを作成して、Usersテキスト・コンポーネントの下に配置します。デフォルトで、テーブルには最近保存したクエリーのデータが表示されます。アプリは次のようになります。

前のステップでクエリーの保存を忘れた場合、テーブルにはJSONプレースホルダー・データが事前に入力されます。テーブルのクエリーからデータを表示するには、まずクエリーを保存します。次に、テーブルのDataプロパティを{{query1.data}}に変更します。

テーブルでは、query1という名前のクエリーのデータが更新され、表示されます。これにより、テーブルのデータがquery1.dataにリンクされます。これで、query1.dataが変更されるたびに、テーブルが自動的に更新され、query1.dataの新しい値が表示されるようになります。

検索の追加

このページをインタラクティブにして、検索ボックスをテーブルに追加しましょう。

1. TextInputコンポーネントをキャンバス上にドラッグして、テーブルの上に配置します。

2. クエリー・エディターで、クエリーを次のテキストに変更してSaveを押します。これにより、textinput1に入力した値に基づいてクエリーが更新されます。table1がquery1.dataにリンクしているため、textinput1でテキストが変更されると、query1が自動的に再実行され、table1が更新されます。

select * from users where first_name ILIKE {{'%' + textinput1.value + '%'}};

📘

JavaScriptの{{}}を表記すると、textinput1の値を受け取ります。%を追加すると、SQL検索のワイルドカードとして機能します。テキスト入力でmと入力すると、名前にmの文字が含まれているすべてのユーザーが検索されます。

3. これで、検索ボックスに入力して、ユーザーを検索できるようになりました。mを入力してみてください。

ユーザーの承認と否認

データの表示のほかに、データベースの更新のようなアクションをトリガーするフォームやボタンを作成できます。

1. 2つのButtonコンポーネントを作成します。一方のボタンのラベルをApproveに変更し、もう一方のボタンのラベルをRejectに変更します。ボタンの色をカスタマイズすることもできます。この例では、色が緑色と赤色に設定されています。

2. このボタンを機能させてみましょう。Approveボタンを選択して、Run a queryの下にあるドロップダウンでCreate a new queryを選択します。これによって、自動的に空の新規APIクエリーが作成されます。

3. APIをRetoolに接続して、データベース接続を構成する方法と同様な認証スキームを指定します。このチュートリアルでは、デフォルトで適用されているサンプルAPIを使用します。サンプルAPIを使用するには、Resourceドロップダウンをonboarding_api (restapi)に変更します。

4. クエリー・エディターを使用すると、すべての種類のAPIリクエストを作成することができます。SQLエディターと同様に、{{}}式を使用すると、アプリのコンポーネントで動的にリクエストを生成できます。

Approveボタン用に、次のスクリーンショットのようなAPIリクエストを作成しましょう。

• APIのURLをテーブルの選択した行にリンクします。これにより、APIリクエストがテーブル内の選択したユーザーに接続されます。
• 選択したユーザーを承認するAPIペイロードを追加します。
• APIコールが成功した場合にSQLクエリーquery1をリフレッシュするようにRetoolを構成します。

Rejectボタン用にAPIプロセスを繰り返します。

ツールのテスト

ボタンをクリックしてツールをテストし、テーブルのリフレッシュでデータを確認します。期待どおりに機能したら、画面の右上隅にある青色のPlayボタンをクリックして、本番設定でアプリを使用します。

これで終了です。クイック・ダッシュボードが作成されました。これで、SQLとAPIリクエストを使用して、ユーザーを承認および否認できるようになりました。

アクセス制御でアプリを使用できるユーザーを制御したり、監査ログでユーザーによるアプリの使用を追跡したりすることもできます。ホーム・ページに戻り、Retoolを調べることで、これらの機能を確認することができます。