ハードウェアからサーバ・アプリまでワンストップで開発

appsmith

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

公式サイト 
クラウドサービス
GitHub

オープンソースなローコード、ノーコードまとめのリストから気になったものをレビューしています。今回はその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と連携したアプリの作り方掲載されています。

https://www.appsmith.com/blog