程序員革命--低代碼實戰初體驗

爲了豐富TO B 解決方案中低代碼方案的內容,近期着重研究了國內外低代碼平臺的適用性和易用性。幾年前,初次聽到低代碼的時候憑直覺覺得只不是一個技術噱頭,沒有什麼實質性的東西,一個通用性的工具能做到面面俱到?今天,在深入研究了國內外低代碼平臺後,不禁發出感嘆,程序員要革程序員的命了,當前GPT橫空出世讓程序員瑟瑟發抖,今天低代碼/無代碼大行其道,今後程序員的路在何方?未來對程序員的要求會越來越高,程序員越來越難了...

言歸正傳,本次主題主要聚焦在開源低代碼平臺的研究:

 最終將目光聚焦在Appsmith 和ToolJet,對比了GitHub上熱度,結果如下:

最終選擇目前最火熱的Appsmith作爲研究對象。

 下面重點介紹Appsmith:

1.    Appsmith介紹

Appsmith是一個開源開發工具,可以幫助快速創建儀表板、數據庫GUI、管理面板、審批應用程序、客戶支持工具等,以幫助其團隊執行特定任務。可以拖放預先構建的小部件,以便在網格樣式的畫布上構建UI。Appsmith簡化了UI和數據源之間的前端和後端集成,以優化構建應用程序。它還支持小部件、查詢和幾乎任何其他組件中的JavaScript,以添加邏輯、轉換數據和定義複雜的工作流。

Appsmith使得構建一個可以與任何數據源對話的UI變得容易。可以通過以下簡單步驟創建簡單的CRUD應用程序和複雜的多步驟工作流:

(1).連接數據源:與數據庫或API等數據源集成。Appsmith對許多數據庫和RESTful API接口提供了即插即用支持,可以與大多數工具無縫連接。

(2).構建UI:使用可自定義的內置小部件來構建應用程序佈局。

(3).訪問數據:通過編寫查詢並將數據綁定到小部件,將UI連接到數據源。使用JavaScript控制一切。

(4).協作、部署、共享:Appsmith支持使用Git進行版本控制,以使用分支跟蹤和回滾更改來協作構建應用程序。部署應用程序並與其他用戶共享。

2.    安裝部署

(1).安裝Docker (version 20.10.7 or later), Docker-Compose (version 1.29.2 or later)

 (2).Docker 下安裝appsmith:

創建docker-compose.yml

version: "3"

services:

  appsmith:

    image: index.docker.io/appsmith/appsmith-ce

    container_name: appsmith

    ports:

      - "80:80"

      - "443:443"

    volumes:

      - ./stacks:/appsmith-stacks

    restart: unless-stopped

     # Uncomment the lines below to enable auto-update

    #labels:

    #  com.centurylinklabs.watchtower.enable: "true"

  #auto_update:

  #  image: containrrr/watchtower

  #  volumes:

  #    - /var/run/docker.sock:/var/run/docker.sock

  #  # Update check interval in seconds.

  #  command: --schedule "0 0 * ? * *" --label-enable --cleanup

  #  restart: unless-stopped

  #  depends_on:

  #    - appsmith

  #  environment:

  #    - WATCHTOWER_LIFECYCLE_HOOKS=true

  radarsmartcustoms-postgresql:

    image: 'postgres:12.3'

    ports:

      - 5433:5432

    volumes:

      - ~/Appsmith/postgresql/:/var/lib/postgresql/data/

    environment:

      - POSTGRES_USER=appsmith

      - POSTGRES_PASSWORD=

      - POSTGRES_HOST_AUTH_METHOD=trust
View Code

(3). 服務啓動:docker-compose up -d,通過localhost即可訪問webUI

3.    代碼管理

Appsmith提供與GitHub, GitLab, Bitbucket等代碼管理工具的集成。下面以連接gitlab 爲例進行說明:

(1)  .進入appsmith web頁面,點擊右下角連接git, 顯示彈窗,輸入git 的ssh地址

 

(2).copy ssh key,進入gitlab頁面,repository 側欄,setting-Repository ,選中Deploy keys選項.

(3).點擊 add key ,粘貼key, 選中Grant write permissions to this key

(4).進入上面第一步彈窗,點擊connect完成連接。

(5).當修改頁面,點擊deploy選項卡提交代碼,另外可以同過merge選項卡完成代碼分支的合併操作。

 

4.    應用開發

以開發used car valuation頁面爲例來說明頁面開發的步驟。

最終頁面效果如下:

 

(1)    頁面佈局

通過web ide進行頁面佈局(類似div+css佈局),拖拽container進行頁面佈局,形成頁面的整體結構:

 

(2)    定義數據源

 

選擇所需的數據庫類型,填寫鏈接信息。

(3).創建Queries

 

該接口根據傳入的id查詢該id對應的數據,給頁面展示

(4).頁面數據綁定,顯示

在頁面上創建一個text widgets,選中該控件,右側設置數據綁定和顯示樣式

 

在text中設置上面配置的數據查詢結果的字段。

在style中設置字體,字體大小,顏色等

(5).通過JavaScripts控制控制的顯示樣式,本實例演示當前數據是否落在列表項的數據區間,如果在該範圍內顯示爲綠色,不在該範圍內顯示爲黃色。

 

選中RangeSlider控件,在右側設置屬性:

 

選中fill color,寫入上面js,實現如果數值落在區間則顯示綠色,超出區間範圍顯示黃色的邏輯。

 以上是Appsmith簡單的使用指南,appsmith使用簡單,操作方便,比較適合小團隊低成本引入低代碼平臺。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章