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とデータレイヤーをゼロから記述することなく、より複雑な社内ツールの基盤として機能します。

よくある質問

AppsmithにおけるtriggeredRowとselectedRowの違いは何ですか?

selectedRowは、ユーザーがクリックしてハイライトした行を指し、triggeredRowは、ボタンまたはアクションがクリックされた特定の行を指します。テーブルのボタン列にはtriggeredRowを使用して、アクションが正しいレコードをターゲットにするようにし、編集または表示目的で現在ハイライトされている行を参照する場合はselectedRowを使用してください。

AppsmithクエリでSQLインジェクションをどのように処理しますか?

Appsmithは、{{inputWidget.text}}のようなmustacheバインディングを使用する場合、多くのSQLデータソースに対してパラメータ化されたクエリをサポートしますが、正確な動作はデータベースドライバーに依存します。SQLでの手動文字列連結を避け、ウィジェット検証プロパティを使用して入力を検証し、可能な限りサーバー側の制約を適用してください。

レコードの作成と編集の両方に同じModalを使用できますか?

はい。現在のモードを追跡するためのJSObject変数を作成します。たとえば、formModeをcreateまたはeditに設定します。新しいレコード用にModalを開く場合は、formModeをcreateに設定し、入力フィールドをクリアします。編集時には、formModeをeditに設定し、Table1.selectedRow値で入力を事前入力します。その後、送信ボタンは、モードに基づいてcreateUserまたはupdateUserのいずれかを条件付きで実行できます。

Appsmithテーブルでサーバー側ページネーションをどのように実装しますか?

Tableウィジェットのプロパティでサーバー側ページネーションを有効にします。次に、テーブルウィジェットからのページネーション値(ページサイズとオフセット)を受け入れるようにクエリを変更し、LIMITとOFFSETを使用してSQLに適用します。テーブルは自動的にページナビゲーションを処理し、ユーザーがページを変更するとクエリの再実行をトリガーします。