オープンソース
mayumi
appsmithは内部ツールを構築するためのオープンソースフレームワークです。
One framework for all your internal tools
Appsmith is the open-source framework that lets your team build custom internal applications like dashboards, admin panels, CRUD apps faster, and together
https://www.appsmith.com/product
オープンソースなローコード、ノーコードまとめのリストから気になったものをレビューしています。今回はその2弾です。
特徴
1. D&DでUI作成
画面は用意されたウィジェットを配置するだけです。ウィジェットごとの制御はプロパティから設定します。
見ための変更はもちろん、データソースに対する操作や任意のJavaScriptコードを組み込むこともできます。
https://www.appsmith.com/widgets
2.既存のデータソースが使える
PostgreSQL、MySQL、MongoDB等のDBから、AmazonS3、REST API等たいていのデータソースが使えます。
https://www.appsmith.com/integration
ただし、フレームワーク上でDBそのものやテーブルを作成することはできません。あらかじめ別の手段で用意しておく必要があります。
3. デプロイはワンクリック
appsmith内のアプリは編集モードと表示モードの2つのモードで動作しています。
編集モードで変更した内容は「Deploy」をクリックするだけで、表示モードに反映されます。
https://www.appsmith.com/application-management
4.アプリのアクセス制御
アプリのユーザーの管理機能
ユーザーごとに利用範囲を制限出来ます。アプリ内部のアクセス制御のような細かい制限はできませんが、すべての権限を持つ「管理者」、編集モードと表示モードが使える「デベロッパー」、表示モードのみ使える「アプリビューアー」の3つのロールから選ぶことができます。
https://docs.appsmith.com/core-concepts/access-control
試してみる
手元で環境をセットアップして試してみます。公式にサポートされているセットアップ方法はDockerを使った方法です。導入そのものはDockerの環境が整っていれば難しくはありません。
セットアップ方法は以下のリンクで解説されていますので、そちらをご覧ください。
https://docs.appsmith.com/setup
簡単に使ってみる場合はクラウドサービスも展開されています。
https://app.appsmith.com/user/signup
作ったもの
簡単な商品マスタの管理画面を作ってみました。
作成
作成の流れを簡単にご紹介します。
1.アプリケーションを作成
「+New」をクリックで新しいアプリを作ります。
2.データソースを登録
今回はローカルのpostgresを使用しました。DBとテーブルは事前に作成しておきます。
利用できるデータソースの一覧が表示されます。今回はpostgresを選択します。
PostgreSQLはappsmithから接続できるようngrokで公開しておいたアドレスを指定します。
「HostAddress」「Port」「Database Name」「Autentication」を入力し、Testをクリックします。問題なければSaveで接続情報を保存します。
※自己ホストしたappsmithは同じホストでも別のネットワークで構成されているため、同じホスト内のデータベースですがlocalhostでは接続できません。接続しようとするとngrokを使って接続するよう警告されます。
3.UI作成
左サイドにある「Widgets」から使いたいものをドラッグアンドドロップします。
4.クエリの作成
商品一覧を取得するクエリ
UIのテーブルに表示する商品一覧のクエリを作成します。
サイドの「DATASOURCES」から使用するDBのテーブル名の「Add」ボタンより「SELECT」をクリックすると、簡単なクエリを自動生成してくれます。
SELECT * FROM public."products" LIMIT 10;
5. UIとの関連付け
4.で作成したクエリ名(Query1)を2.で配置したテーブルのデータに関連付けします。クエリのデータは{{Query1.data}}
で取得できます。
3.で作成したウィジェットTable1のTable Dataに{{Query1.data}}
を指定します。
ウィジェットからクエリがアクセスできるように、クエリからウィジェットにアクセスできます。
フォームウィジェットを作り、その中にInput1、Input2の名前でインプットウィジェットを2つ作りました。
クエリからは{{ウィジェット名.text}}でinputウィジェットのテキストをSQLに組み込めます。
INSERT INTO public."products" ("name", "price")
VALUES ('{{Input1.text}}',{{Input2.text}});
Submitのイベント登録
フォーム内のSubmitボタンへのイベントとクエリの関連付けはSubmitボタンのonClickで指定できます。
クエリだけでなく、簡単なウィジェットへの操作やオリジナルjavascriptも指定できます。
ウィジェットによりますが、submitの場合イベントが成功した場合と、失敗した場合それぞれ処理が登録できます。
フォーム内のデータが登録された場合は、テーブル内のデータを更新してほしいので先ほど作成したデータを取得するクエリ(Query1)を登録しておきます。
6.デプロイ
右上の「Deploy」をクリックするとアプリが表示モードになります。
nameとpriceを入れてSubmitをクリックすると、
データが更新されて右のテーブルに反映されます。
総合
使いやすさ | ★★★☆☆ |
技術要素の要求度 | ★★★☆☆ |
カスタマイズ性 | ★★★☆☆ |
分類 | ローコード |
今回はローカルのデータベースを使ったサンプルアプリを作りました。
UI作成、デプロイが簡単で、自分や社内で使うちょっとしたアプリが欲しい時に便利そうです。
公式のブログには
shopfyのAPIとGoogleスプレッドシート連携したアプリの作り方
https://www.appsmith.com/blog/building-a-shopify-admin-panel-a-step-by-step-guide
等、外部APIと連携したアプリの作り方掲載されています。
追記
オープンソースなローコード・ノーコードのサービスをはじめました。
詳細は以下をご覧ください。