データベースへのCSVの挿入

私たちはエンジニアで、アップロードしたCSVを使用したデータベースへの行の一括追加などのCRUD関連のタスクで同僚から面倒な作業を頼まれているとしましょう。CSVからデータを選択してAPIにアップロードするツールを、5分で作成します。

1. ファイルのアップロード

最初に、右側からFilePickerコンポーネントをドラッグしましょう。

このボタンによって、CSVおよびJSONが自動的に解析されるため、すぐにファイルをアップロードできます。CSVが準備できていない場合、ここからダウンロードできます。

CSVをアップロードした後、FilePickerの.parsedValueに9行移入されていることが分かります。

いいですね。

2. アップロードした行のレンダリング

CSVはRetool内にあるので、この行をTableでレンダリングする必要があります。右側からこれをドラッグしましょう。(デフォルトで、プレースホルダーのデータが表示されますが、これはすぐに新しいユーザー・データに置き換わります。)

プレースホルダー・データからではなく、FilePickerからデータを取得するように、Tableを変更しましょう。
テーブル・データのプロパティを{{ filepicker1.parsedValue }}に変更します。

テーブルには、以前にダウンロードした本のデータが表示されています。

3. サンプルAPIへの行のPOST

もう少しです。更新する行を選択できるように、各行にアクション・ボタンを追加しましょう。

Tableをクリックし、右側のパネルで、Actionが見えるまでスクロールしましょう。ここで、アクション・ボタンを追加できます。これを有効にし、テキストUploadを入力して新規クエリーを作成します。

「create a new query」を押すと、下部でエディターが開き、バックエンドAPIエンドポイントにPOSTリクエストを作成できます。APIコールで、email、first_name、last_nameなどのパラメーターをJSON本文に渡すことができます。問題がなければ(ステージングAPIの場合など)、クエリーを実行して、正常に動作するかどうかを確認します。準備できたら、「Save」を押します。次のステップに移る準備ができています。

🚧

サンプルのオンボーディングAPI

ここでの「API」とは、サンプルのオンボーディングREST APIのことで、すべてのRetoolアプリに含まれています。データ永続専用のRetool APIはありません。

4. 動作の確認

最後のステップです。データベースからデータを実際に取得するSQLクエリーを作成して、この下にあるTableにデータをレンダリングします。SQLクエリーを作成するには、クエリー・エディターで「New Query」ボタンを押して、onboarding_dbリソースを選択しましょう。

サンプル・データベースのSQLは次のとおりです。

select * from users order by id desc;

これをプレビューして、問題がなければ保存します。Tableでレンダリングするには、まず、右側からテーブルをドラッグしましょう。デフォルトで、最後に保存したクエリーに取得されます。これを使用しない場合、{{ query3.data }}と入力して、Tableをクエリーに接続します。これで、実際のユーザーが取得されました。

ツールが動作するかどうかをテストするには、ユーザーをアップロードするたびに、query3をリフレッシュする必要があります(挿入するたびにページをリフレッシュする必要はありません)。 table1actionbuttonQueryTrigger(名前を変更していない場合)をクリックして、「After this query runs」セクションにスクロールしましょう。query3を追加する必要があります。ユーザーを追加するたびに、ツールでデータベースから新規ユーザーが取得されます。

**これで終了です。最初のTableでアクション・ボタンを押して、POSTリクエストをAPIに実行します。成功したら、データベースからユーザーを取得するクエリーがリフレッシュし、追加したすべてのユーザーを表示できるようになります。**数分で、完全なツールが作成できました。

このツールの本番での稼働の準備が完了しました。再度CRUDタスクで同僚に面倒な作業を頼まれたくない場合、同僚が自分で使用できるように、このツールへのリンクを同僚に送信することができます。同僚に特定の権限を付与している場合、同僚はツールの編集やクエリーの変更を行うことはできません。実行できるのは、作成したツールを使用することだけです。