初步認(rèn)識(shí) Appsmith

appsmith 是什么

appsmith 是 github 上的一個(gè)開源項(xiàng)目，截至此刻（20220512）有 17.7k Star。

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

使用基于 JavaScript 的可視化開發(fā)平臺(tái)，構(gòu)建 CRUD 應(yīng)用程序、儀表盤、管理面板，而且速度快了 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用于構(gòu)建內(nèi)部工具的強(qiáng)大開源框架Quickly build any custom business software with pre-built UI widgets that connect to any data source. Control everything with JavaScript.使用可連接到任何數(shù)據(jù)源的預(yù)構(gòu)建 ui 小部件快速構(gòu)建任何自定義業(yè)務(wù)軟件。 使用 JavaScript 控制一切

點(diǎn)擊doc或Host it yourself，進(jìn)入文檔：

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

Tip：

• 唯一官方支持的 Appsmith 安裝是基于 Docker 的
• Appsmith 可以在本地部署，也可以使用 Docker 在您的私有實(shí)例上部署 —— docs_Docker
• 倘若不了解 docker，可以查看筆者的 初步認(rèn)識(shí) docker

進(jìn)入 setup/docker 安裝指南：

提供了兩種安裝方式：

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

docker compose 用于構(gòu)建和管理多個(gè)服務(wù)，更復(fù)雜，這里筆者選用更簡(jiǎn)單的方式：without docker-compose。

通過 docker run 下載鏡像并啟動(dòng) 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 查看運(yùn)行中的容器，發(fā)現(xiàn) appsmith 已啟動(dòng)：
已啟動(dòng)：

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，跳轉(zhuǎn)至 Welcome 頁面：

點(diǎn)擊GET STARTED設(shè)置賬戶（即注冊(cè)），進(jìn)入下圖：

輸入信息后，點(diǎn)擊NEXT，進(jìn)入下圖：

點(diǎn)擊MAKE … APP按鈕，進(jìn)入下圖：

點(diǎn)擊BUILD … OWN，進(jìn)入 appsmith，如下圖所示：

整個(gè)界面分左中右三部分：

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

hello world

需求：點(diǎn)擊按鈕，彈出信息。

做法是：

• 左側(cè)拖拽 BUTTON 部件到舞臺(tái)中央
• 點(diǎn)擊舞臺(tái)中央的按鈕
• 在右側(cè)進(jìn)行配置，例如修改Label、添加事件（onClick）等

點(diǎn)擊舞臺(tái)中央的按鈕，或右上角的DEPLOY（部署）進(jìn)行測(cè)試。結(jié)果如下圖所示：

連接本地?cái)?shù)據(jù)庫

筆者的本地?cái)?shù)據(jù)庫采用 Mysql。

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

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

安裝 mysql

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

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

進(jìn)入 MySQL 工作臺(tái)：

注：實(shí)例名稱筆者是 ”MySQL80“

安裝 Navicat for MySQL

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

直接來 這里 下載安裝即可

啟動(dòng)，然后新建 mysql 的連接，輸入相關(guān)信息。如下圖所示：

點(diǎn)擊Test Connection測(cè)試連接

連接成功！

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

Navicat連接Mysql報(bào)錯(cuò)

點(diǎn)擊 Test Connection 測(cè)試連接，報(bào)錯(cuò)如下：

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

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

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

進(jìn)入 ngrok 官網(wǎng)

首先進(jìn)行免費(fèi)注冊(cè)，然后就能獲取授權(quán)碼，用于連接你的賬號(hào)。如下圖所示：

Tip：注冊(cè)好像需要能FQ，筆者使用 github 賬號(hào)授權(quán)完成注冊(cè)。

然后進(jìn)入官網(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，然后輸入授權(quán)碼相關(guān)代碼連接賬號(hào)：

software>ngrok config add-authtoken 28g6uez9gLpfamK1zG6j81SioFY_849x4eb96MNpQLaot5najAuthtoken saved to configuration file: C:Users77714AppDataLocal/ngrok/ngrok.yml

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

software>ngrok tcp 3306

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

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

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

然后輸入相關(guān)信息，點(diǎn)擊Test測(cè)試通過。如下圖所示：

創(chuàng)建成功！

注：倘若重啟 ngrok（例如重啟機(jī)器了），這里的端口（17872）需要重新配置，因?yàn)槎丝谧兞?，否則測(cè)試不會(huì)再通過。

創(chuàng)建查詢

點(diǎn)擊NEW QUERY…新建查詢。如下圖所示：

點(diǎn)擊Select。如下圖所示：

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

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

修改代碼為SELECT * FROM users，用于查詢我們的表。然后點(diǎn)擊右上角的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ù)器

步驟如下：

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

// 在外網(wǎng)環(huán)境中下載鏡像$ docker pull appsmith/appsmith-ce// 導(dǎo)出鏡像$ docker save appsmith/appsmith-ce -o appsmith_appsmith_ce.tar

把導(dǎo)出的 .tar 文件弄到的 ubuntu 服務(wù)器中，然后導(dǎo)入鏡像，最后運(yùn)行即可：

// 導(dǎo)入鏡像$ docker load -i appsmith_appsmith_ce.tar// 運(yùn)行鏡像 appsmith/appsmith-ce$ docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce

瀏覽器訪問 localhost:80，后續(xù)就和上文相同。比如注冊(cè)信息也沒有什么需要注意的。

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