AppsmithでシンプルなCRUDアプリを構築する方法

社内ツールをゼロから構築することは、あなたが持っていない時間を浪費します。必要なのは、3ヶ月の開発プロジェクトではなく、迅速な管理パネルやデータ管理インターフェースです。Appsmithを使用すれば、データソースを接続し、ウィジェットをドラッグし、作成、読み取り、更新、削除の操作を1時間以内に配線できます。

このチュートリアルでは、標準的なAppsmith CRUDアプリのワークフローを説明します:データベースの接続、Tableウィジェットでのデータ表示、フォームによるレコードの作成と更新の処理、そしてデータ変更後のリフレッシュです。

データソースの接続

Appsmithで新しいアプリケーションを作成することから始めます。左サイドバーから、Datasourcesの横にある**+**をクリックし、データベースタイプ(PostgreSQL、MySQL、またはREST API)を選択します。

SQLデータベースの場合、接続認証情報を入力します:ホスト、ポート、データベース名、ユーザー名、パスワード。クエリやウィジェットにハードコーディングするのではなく、Appsmithの暗号化されたデータソース設定と環境設定に機密値を保存してください。クエリはサーバー側で実行されるため、認証情報がブラウザに公開されることはありません。

サポートされているデータベースの完全なリストと設定オプションは、公式のデータソースドキュメントで確認できます。

保存する前に接続をテストしてください。失敗した場合は、ファイアウォールルール、SSL要件、認証情報の正確性を確認してください。

クエリでデータを読み取る

レコードを取得するための最初のクエリを作成します。Queries/JSの横にある**+**をクリックし、データソースを選択して、SELECT文を記述します:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

このクエリにgetUsersという名前を付け、実行してレスポンスを確認します。

大規模なデータセットの場合は、サーバー側のページネーションを実装してください。AppsmithのTableウィジェットはこれをネイティブにサポートしています。テーブルのページネーション状態に基づいて、オフセットとリミットパラメータをクエリに渡します。

Tableウィジェットでデータを表示する

Tableウィジェットをキャンバスにドラッグします。ウィジェットのプロパティで、Table dataプロパティを次のように設定します:

{{getUsers.data}}

テーブルは、クエリレスポンスから自動的に列を生成します。必要に応じて、列名を変更し、幅を調整し、内部IDなどのフィールドを非表示にします。

このAppsmithデータベース統合パターン(クエリからウィジェットへのバインディング)は、構築するすべてのローコードCRUDフロントエンドの基礎を形成します。Tableウィジェットの完全な設定オプションは、Tableウィジェットドキュメントで説明されています。

フォームまたはModalでレコードを作成する

「新規追加」というラベルのButtonウィジェットを追加し、そのonClickアクションをModalを開くように設定します。Modal内に、各フィールド用のInputウィジェットを追加します:nameInput、emailInput。

createUserという名前のINSERTクエリを作成します:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Modalの送信ボタンをcreateUserを実行するように配線します。成功時に、getUsers.run()をトリガーしてテーブルをリフレッシュし、その後Modalを閉じます。

検証には、Inputウィジェットの組み込み検証プロパティを使用するか、送信前にフィールド値をチェックするJSObjectを記述します。

選択された行を使用してレコードを更新する

Tableウィジェットで行選択を有効にします。ユーザーが行をクリックすると、Table1.selectedRowがそのレコードのデータを公開します。

updateUserという名前のUPDATEクエリを作成します:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

デフォルト値としてTable1.selectedRow.nameを使用して入力を事前入力することで、編集用に同じModalを再利用できます。JSObject変数を使用して「作成」モードと「編集」モードを切り替えます。

更新が正常に実行された後、getUsers.run()を呼び出して表示をリフレッシュします。

確認付きでレコードを削除する

削除アクション用のButton列をテーブルに追加します。列タイプをButtonに設定し、onClickをDELETEクエリを実行するように設定します:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

違いに注意してください:triggeredRowはボタンがクリックされた行をキャプチャし、selectedRowはハイライトされた行をキャプチャします。

誤った削除を防ぐために、クエリ設定でRequest confirmation before runningを有効にします。成功時に、テーブルデータをリフレッシュします。

Appsmith TableとFormのワークフロー

構築したパターン(クエリ結果を表示するTableウィジェット、入力を処理するFormまたはModal、変更用のパラメータ化されたクエリ、成功時のデータリフレッシュ)は、あらゆるCRUDユースケースに対応できます。このAppsmith tableとformのワークフローは、ユーザー、在庫、サポートチケット、その他のレコードを管理する場合でも適用されます。

本番アプリケーションでは、以下を検討してください:

• ロールベースアクセス: Appsmithは、アプリケーション、ページ、データソースレベルでの詳細な権限をサポート
• 環境と認証情報: 開発、ステージング、本番環境全体でデータベースパスワードとAPIキーを安全に保存
• パッケージ: Appsmith Packagesを使用して、複数のアプリケーション間で再利用可能なクエリとJSObjectを共有
• サーバー側ページネーション: 数千のレコードを持つテーブルには不可欠

まとめ

これで、機能的なCRUDインターフェースが完成しました:テーブルに表示されるデータ、レコードの作成と編集用のフォーム、確認付きの削除機能、そしてすべての変更後の自動データリフレッシュです。

ここから、検索フィルター、追加ページでアプリを拡張したり、バックエンド自動化のためにAppsmith Workflowsに接続したりできます。構築したローコードCRUDフロントエンドは、UIとデータレイヤーをゼロから記述することなく、より複雑な社内ツールの基盤として機能します。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.