初步認識 Appsmith

appsmith 是什么

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

Appsmith 是一個低代碼、開源的框架，用于構建內(nèi)部應用程序。

使用基于 JavaScript 的可視化開發(fā)平臺，構建 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

打開官網(wǎng)，有兩段醒目的文字：

A powerful open source framework to build internal tools用于構建內(nèi)部工具的強大開源框架Quickly build any custom business software with pre-built UI widgets that connect to any data source. Control everything with JavaScript.使用可連接到任何數(shù)據(jù)源的預構建 ui 小部件快速構建任何自定義業(yè)務軟件。 使用 JavaScript 控制一切

點擊doc或Host it yourself，進入文檔：

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.2G202205-later> docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ceUnable to find image 'appsmith/appsmith-ce:latest' locallylatest: Pulling from appsmith/appsmith-ce8e5c1b329fe3: Pull completec086a11e6410: Pull complete77fbce06aba6: Pull complete01e01a36d9f0: Pull complete525e27e69b74: Pull completef23d2a639a69: Pull complete39c9347cc360: Pull completecfdc8301afe2: Pull completef496d56b0e53: Pull complete45e7897ce8f4: Pull completee4fa2a7eeac0: Pull complete1ece9193ec88: Pull complete2b90261d42de: Pull complete72ad69fc9113: Pull complete84c90c9c8dfc: Pull complete60270c8d4298: Pull completedf215547aa3b: Pull complete0d8252e94cfe: Pull completec1494763999c: Pull complete367d490330fe: Pull complete4f4fb700ef54: Pull complete755c6060309a: Pull complete79f8c7decfae: Pull completeDigest: sha256:e34adcdf4fade53440d8406753078d6b0a7cbd7ef73d73747e4bf0274b34fc6fStatus: Downloaded newer image for appsmith/appsmith-ce:latest0018628962f2a8df3068b6597a91a9529cdcf39cd0497309698fc176ced5fb6f

通過 docker ps 查看運行中的容器，發(fā)現(xiàn) appsmith 已啟動：
已啟動：

202205-later> docker psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES0018628962f2 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 頁面：

點擊GET STARTED設置賬戶（即注冊），進入下圖：

輸入信息后，點擊NEXT，進入下圖：

點擊MAKE … APP按鈕，進入下圖：

點擊BUILD … OWN，進入 appsmith，如下圖所示：

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

• 左側，有項目的頁面（pages）；部件（widgets），例如按鈕、表格；查詢（queries），例如刷新表格數(shù)據(jù)、數(shù)據(jù)庫相關（datasources）
• 中央，項目的ui
• 右側，配置，例如配置按鈕的顏色、顯示文字、事件等

hello world

需求：點擊按鈕，彈出信息。

做法是：

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

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

連接本地數(shù)據(jù)庫

筆者的本地數(shù)據(jù)庫采用 Mysql。

據(jù)官網(wǎng)介紹，在 appsmith 中使用本地 api，需要使用 ngrok —— 如何在 Appsmith 上使用本地 API

Tip：ngrok 是將您的應用程序放到互聯(lián)網(wǎng)上的最快方式。

安裝 mysql

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

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

進入 MySQL 工作臺：

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

安裝 Navicat for MySQL

Navicat for MySQL 為數(shù)據(jù)庫管理供了直觀而強大的圖形界面。

直接來 這里 下載安裝即可

啟動，然后新建 mysql 的連接，輸入相關信息。如下圖所示：

點擊Test Connection測試連接

連接成功！

新建一個數(shù)據(jù)庫 test-database，再創(chuàng)建一個表 users，定義4個字段。如下圖所示：

Navicat連接Mysql報錯

點擊 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 官網(wǎng)

首先進行免費注冊，然后就能獲取授權碼，用于連接你的賬號。如下圖所示：

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

然后進入官網(wǎng)的 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_849x4eb96MNpQLaot5najAuthtoken saved to configuration file: C:Users77714AppDataLocal/ngrok/ngrok.yml

最后提供本地網(wǎng)絡應用程序：

software>ngrok tcp 3306

注：兩處紅框的信息稍后會在 appsmith 連接數(shù)據(jù)源時使用。重啟后，端口 17872 也會改變。

創(chuàng)建數(shù)據(jù)源

Appsmith 選擇 mysql 數(shù)據(jù)源。如下圖所示：

然后輸入相關信息，點擊Test測試通過。如下圖所示：

創(chuàng)建成功！

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

創(chuàng)建查詢

點擊NEW QUERY…新建查詢。如下圖所示：

點擊Select。如下圖所示：

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

With our JavaScript-based visual development platform, build CRUD apps, Dashboards, Admin Panels, and many more 10x faster.使用我們基于 JavaScript 的可視化開發(fā)平臺，構建 CRUD 應用程序、儀表板、管理面板等的速度提高 10 倍。

修改代碼為SELECT * FROM users，用于查詢我們的表。然后點擊右上角的RUN，數(shù)據(jù)即可同步過來。如下圖所示：

Tip：筆者先前已在數(shù)據(jù)庫中插入了這條記錄

Table Widgets

拖拽表格部件，輸入{{}}根據(jù)提示配置表格數(shù)據(jù)。如下圖所示：

刷新表格

內(nèi)網(wǎng)部署 Appsmith

需求：將 Appsmit 部署到內(nèi)網(wǎng)的 ubuntu 20.04 服務器

步驟如下：

在外網(wǎng)環(huán)境中下載鏡像并導出 .tar 文件：

// 在外網(wǎng)環(huán)境中下載鏡像$ 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，后續(xù)就和上文相同。比如注冊信息也沒有什么需要注意的。

文章來自https://www.cnblogs.com/pengjiali/p/16260008.html