.svg)
GUIDE
Retoolには、Retoolのテストに使用できるサンプルデータベースとAPIが付属しています。
この5分間のチュートリアルでは、サンプルデータソースを使用して、ユーザーを参照、検索、および承認できるアプリを構築する方法について説明します。
１．https://login.retool.com/⭷( English )アカウントを作成します。
※オンボーディングプロセスを実行するように求められた場合は、スキップして、新規のアプリを作成してください。
２．キャンバスで使用できるコンポーネントのリストは、画面の右側にあります。
テキストコンポーネントをキャンバスにドラッグします。
コンポーネントをキャンバスにドロップすると、そのコンポーネントが自動的に選択されます。
コンポーネントを選択すると、右側のコンポーネントリストが、選択したコンポーネントを編集するためのインターフェイスに置き換えられます。
コンポーネントの選択を解除するには、キャンバス内の空の領域をクリックするか、[ Esc ]キーを押します。
コンポーネントのリストが画面の右側に再表示されます。
３．テキストをより有益なものにカスタマイズしましょう。
値入力ボックスでマークダウン値⭷( English )を使用し、テキストをヘッダーとしてフォーマット化しテキストフィールドの値をテキスト[ #Users ]に変更します。 キャンバス上のテキストは、変更された値を反映し自動的に更新されます。
画面の下部にあるクエリエディタでクエリやAPIリクエストを作成します。サンプルデータベースには、既にデモデータがいくつか含まれています。独自のデータベースを追加する場合は、クエリエディタウィンドウの左上部にあるドロップダウンを使用してデータベースに切り替えることができます。
１．コードエディタで、[ select * from users;] と入力します。
クエリをテストするには、[ プレビュー ]ボタンをクリックします。
これで完了です！このクエリのデータの使用し、アプリ作成を続きから開始する場合は、クエリを保存する必要があります。
[ 保存ボタン ]をクリックしてクエリを保存します。
Retoolはクエリを自動保存ではないため、クエリを編集した後は必ず保存するようにしてください。
テーブルコンポーネントを作成し、ユーザーテキストコンポーネントの下に配置します。デフォルトでは、テーブルには最後に保存されたクエリのデータが表示されます。
クエリを保存するのを忘れた場合、テーブルにはJSONプレースホルダーデータが事前に入力されます。
クエリのデータをテーブルに表示するには、最初にクエリを保存します。
次に、テーブルのDataプロパティをに[ {{query1.data}}]変更します。
テーブルが更新され、[ query1query1.dataquery1.dataquery1.data ]という名前のクエリのデータが表示されます。
これにより、テーブルのデータがにリンクされます。
これで、変更されるたびに、テーブルが自動的に更新され、新しい値が表示されます。
ページをインタラクティブにし、テーブルに検索ボックスを追加しましょう！
１．TextInputコンポーネントをキャンバスにドラッグし、テーブルの上に配置します。
２．クエリエディタで、クエリを以下のテキストに変更し、[ 保存ボタン ]をクリックします。
これにより、入力された値に基づいてクエリが更新されます。[ textinput1, query1 will automatically re-run and update table1. ]にリンクされているため、でテキストが変更されると、自動的に再実行されて更新が行われます。
📘 JavaScript {{}}表記は、[ textinput1 ]の値を取得し、SQL検索のワイルドカードとして機能する[ ％ ]を追加します。
テキスト入力に[ m ]と入力すると、名に文字 "m" が含まれるすべてのユーザーが検索されます。
３．検索ボックスに入力してユーザーを検索できるようになります。
データの表示に加えてデータベースの更新などのアクションをトリガーするフォームとボタンを作成できます。
１．2つのボタンコンポーネントを作成します。1つのボタンラベルをに、もう1つのボタンラベルを[ ApproveReject ]に変更します。ボタンの色をカスタマイズすることもできます。この例では、色を緑と赤に設定しています。
２．これらのボタンに機能を追加させるには[ 承認 ]ボタンを選択し、[ クエリの実行 ]の下のドロップダウンから[ 新しいクエリの作成 ]を選択します。これにより、新しい空のAPIクエリが自動的に作成されます。
３．データベース接続を構成する方法と同様に、APIをRetoolに接続し、認証スキームを指定することもできます。このチュートリアルでは、デフォルトで提供されているサンプルAPIを使用します。サンプルAPIを使用するには、
[ リソース ]をドロップダウンし[ onboarding_api (restapi) ]に変更します。
４．クエリエディタを使用すると、あらゆる種類のAPIリクエストを作成できます。
SQLエディターと同様に、式を使用して、アプリのコンポーネントを使用して動的にリクエストを生成できます。
[ 承認ボタン ]について、以下のスクリーンショットのようなAPIリクエストを作成しましょう。
[ 拒否ボタン ]に対しても同様のAPIプロセスを繰り返します。
ボタンをクリックしてツールをテストし、テーブルのデータが更新されるかどうかを確認します。
正常に動作したら、画面の右上隅にある青い[ 再生ボタン ]をクリックすることで、本番環境でアプリを使用できます。
以上で、SQLリクエストとAPIリクエストの両方を使用してユーザーを承認および拒否できるクイックダッシュボードを作成は完了です。
また、アクセス制御⭷を通じてアプリを使用できるユーザーを制御し、監査ログ使用⭷（ English ）してユーザーがアプリをどのように使用しているかを追跡することもできます。
