低程式碼 —— 初步認識 Appsmith

彭加李發表於2022-05-12
APPMIT

初步認識 Appsmith

appsmith 是什麼

appsmith 是 github 上的一個開源專案，截至此刻（20220512）有 17.7k Star。

Appsmith 是一個低程式碼、開源的框架，用於構建內部應用程式。

使用基於 JavaScript 的視覺化開發平臺，構建 CRUD 應用程式、儀表盤、管理皮膚，而且速度快了 10 倍。

Tip：With our JavaScript-based visual development platform, build CRUD apps, Dashboards, Admin Panels, and many more 10x faster. —— docs_Introduction

安裝 appsmith

注：筆者使用的 win10

開啟官網，有兩段醒目的文字：

A powerful open source framework to build internal tools
用於構建內部工具的強大開源框架

Quickly build any custom business software with pre-built UI widgets that connect to any data source. Control everything with JavaScript.
使用可連線到任何資料來源的預構建 UI 小部件快速構建任何自定義業務軟體。 使用 JavaScript 控制一切

點選doc或Host it yourself，進入文件：

appsmith100.png

Appsmith 提供了多種技術部署。筆者選用 Docker。

Tip：

  • 唯一官方支援的 Appsmith 安裝是基於 Docker 的
  • Appsmith 可以在本地部署，也可以使用 Docker 在您的私有例項上部署 —— docs_Docker
  • 倘若不瞭解 docker，可以檢視筆者的 初步認識 docker

進入 setup/docker 安裝指南：

提供了兩種安裝方式：

  • Quick Start (with docker-compose) - 使用 docker-compose。
  • Explore Appsmith (without docker-compose) - 不使用 docker-compose。

docker compose 用於構建和管理多個服務，更復雜，這裡筆者選用更簡單的方式：without docker-compose。

通過 docker run 下載映象並啟動 Appsmith：

// 約1.2G
202205-later> docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce
Unable to find image 'appsmith/appsmith-ce:latest' locally
latest: Pulling from appsmith/appsmith-ce
8e5c1b329fe3: Pull complete
c086a11e6410: Pull complete
77fbce06aba6: Pull complete
01e01a36d9f0: Pull complete
525e27e69b74: Pull complete
f23d2a639a69: Pull complete
39c9347cc360: Pull complete
cfdc8301afe2: Pull complete
f496d56b0e53: Pull complete
45e7897ce8f4: Pull complete
e4fa2a7eeac0: Pull complete
1ece9193ec88: Pull complete
2b90261d42de: Pull complete
72ad69fc9113: Pull complete
84c90c9c8dfc: Pull complete
60270c8d4298: Pull complete
df215547aa3b: Pull complete
0d8252e94cfe: Pull complete
c1494763999c: Pull complete
367d490330fe: Pull complete
4f4fb700ef54: Pull complete
755c6060309a: Pull complete
79f8c7decfae: Pull complete
Digest: sha256:e34adcdf4fade53440d8406753078d6b0a7cbd7ef73d73747e4bf0274b34fc6f
Status: Downloaded newer image for appsmith/appsmith-ce:latest
0018628962f2a8df3068b6597a91a9529cdcf39cd0497309698fc176ced5fb6f

通過 docker ps 檢視執行中的容器，發現 appsmith 已啟動：
已啟動：

202205-later> docker ps
CONTAINER ID   IMAGE                  COMMAND                  CREATED         STATUS         PORTS                                                 NAMES
0018628962f2   appsmith/appsmith-ce   "/opt/appsmith/entry…"   2 minutes ago   Up 2 minutes   0.0.0.0:80->80/tcp, 0.0.0.0:9001->9001/tcp, 443/tcp   appsmith

瀏覽器訪問 localhost:80，跳轉至 Welcome 頁面：

appsmith1.png

點選GET STARTED設定賬戶（即註冊），進入下圖：

appsmith2.png

輸入資訊後，點選NEXT，進入下圖：

appsmith3.png

點選MAKE ... APP按鈕，進入下圖：

appsmith4.png

點選BUILD ... OWN，進入 appsmith，如下圖所示：

appsmith6.png

整個介面分左中右三部分：

  • 左側，有專案的頁面（pages）；部件（widgets），例如按鈕、表格；查詢（queries），例如重新整理表格資料、資料庫相關（datasources）
  • 中央，專案的ui
  • 右側，配置，例如配置按鈕的顏色、顯示文字、事件等

hello world

需求：點選按鈕，彈出資訊。

做法是：

  • 左側拖拽 BUTTON 部件到舞臺中央
  • 點選舞臺中央的按鈕
  • 在右側進行配置，例如修改Label、新增事件（onClick）等

appsmith-btn1.png

點選舞臺中央的按鈕，或右上角的DEPLOY（部署）進行測試。結果如下圖所示：

appsmith-btn2.png

連線本地資料庫

筆者的本地資料庫採用 mysql。

據官網介紹，在 appsmith 中使用本地 api，需要使用 ngrok —— 如何在 Appsmith 上使用本地 API

Tip：ngrok 是將您的應用程式放到網際網路上的最快方式。

安裝 mysql

首先下載 mysql。筆者進入這裡，直接點選No thanks, just start my download.下載 .msi 版本。如下圖所示：

mysql0.png

雙擊 .msi 版本安裝，未做特殊配置，安裝過程需要等待一些時間下載（筆者花了20來分鐘）：

mysql.png

進入 mysql 工作臺：

mysql2.png

注：例項名稱筆者是 ”MySQL80“

安裝 Navicat for MySQL

Navicat for MySQL 為資料庫管理供了直觀而強大的圖形介面。

直接來 這裡 下載安裝即可

啟動，然後新建 mysql 的連線，輸入相關資訊。如下圖所示：
mysql3.png

點選Test Connection測試連線

mysql4.png

連線成功！

新建一個資料庫 test-database，再建立一個表 users，定義4個欄位。如下圖所示：

mysql5.png

點選 Test Connection 測試連線，報錯如下：

client does not support authentication protocol requested by server; consider upgrading MySQL client

筆者依次輸入下面三個命令，再次測試即可通過：

mysql> use mysql;

mysql> alter user 'root'@'localhost' identified with mysql_native_password by '你的密碼';
Query OK, 0 rows affected, 1 warning (0.02 sec)

mysql> flush privileges;
Query OK, 0 rows affected (0.01 sec)

安裝 ngrok

進入 ngrok 官網

首先進行免費註冊，然後就能獲取授權碼，用於連線你的賬號。如下圖所示：

ngrok.png

Tip：註冊好像需要能FQ，筆者使用 github 賬號授權完成註冊。

然後進入官網的 Download 模組下載 wins 版本，解壓即可：

D:\software
// 下載的原始檔
2022/05/03  23:00         7,261,772 ngrok-v3-stable-windows-amd64.zip
// 解壓
2022/04/27  07:02        17,821,696 ngrok.exe

雙擊 ngrok.exe，然後輸入授權碼相關程式碼連線賬號：

software>ngrok config add-authtoken 28g6uez9gLpfamK1zG6j81SioFY_849x4eb96MNpQLaot5naj
Authtoken saved to configuration file: C:\Users\77714\AppData\Local/ngrok/ngrok.yml

最後提供本地網路應用程式：

software>ngrok tcp 3306

ngrok2.png

注：兩處紅框的資訊稍後會在 appsmith 連線資料來源時使用。重啟後，埠 17872 也會改變。

建立資料來源

Appsmith 選擇 mysql 資料來源。如下圖所示：

mysql6.png

然後輸入相關資訊，點選Test測試通過。如下圖所示：

appsmith7.png

建立成功！

注：倘若重啟 ngrok（例如重啟機器了），這裡的埠（17872）需要重新配置，因為埠變了，否則測試不會再通過。

建立查詢

點選NEW QUERY...新建查詢。如下圖所示：

appsmith8.png

點選Select。如下圖所示：

appsmith9.png

Tip：上圖的 Create、Select、Update、Delete 是否就是對應官網描述的 CURD？

With our JavaScript-based visual development platform, build CRUD apps, Dashboards, Admin Panels, and many more 10x faster.

使用我們基於 JavaScript 的視覺化開發平臺，構建 CRUD 應用程式、儀表板、管理皮膚等的速度提高 10 倍。

修改程式碼為SELECT * FROM users，用於查詢我們的表。然後點選右上角的RUN，資料即可同步過來。如下圖所示：

appsmith10.png

Tip：筆者先前已在資料庫中插入了這條記錄

Table Widgets

拖拽表格部件，輸入{{}}根據提示配置表格資料。如下圖所示：

appsmith11.png

重新整理表格

appsmith12.png

內網部署 Appsmith

需求：將 Appsmit 部署到內網的 ubuntu 20.04 伺服器

步驟如下：

在外網環境中下載映象並匯出 .tar 檔案：

// 在外網環境中下載映象
$ docker pull appsmith/appsmith-ce

// 匯出映象
$ docker save appsmith/appsmith-ce -o appsmith_appsmith_ce.tar

把匯出的 .tar 檔案弄到的 ubuntu 伺服器中，然後匯入映象，最後執行即可：

// 匯入映象
$ docker load -i appsmith_appsmith_ce.tar

// 執行映象 appsmith/appsmith-ce
$ docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce

瀏覽器訪問 localhost:80，後續就和上文相同。比如註冊資訊也沒有什麼需要注意的。

相關文章