## 時空背景
當今許多公司擁有大量的靜態內容，過去，我們依賴各種開源內容管理系統（CMS）來管理這些內容，然而，隨著時間一久，這些系統常常帶來整合和客製化的挑戰。

雖然現有的內容管理機制加速了開發速度，它們同時也增加了運營和溝通方面的負擔，這些額外的工作需要在考慮系統選擇時予以特別注意，以確保能夠有效支持業務的長期發展。

## 目的
* 降低溝通成本，過去給使用者維護JSON，工程師都要額外撰寫說明文件
* 提供更友善的維護界面
* 採用最新技術低代碼
* 解決檔案上傳和路徑設定要分開設置的工作
* 解決套裝的CMS 不易整合及客製
* 資料希望需要有有排程

## 自製低代碼概念
### 1.設計表單結構
工程師拖拉元件，建立Schema JSON 結構，最後存進資料庫
### 2. 內容維護
從資料庫取得先前工程師設計的表單 Scehma JSON 結構，依據 JSON 結構渲染結構，渲染先前設計的表單，使用者依據表單輸入相關資料。
### 3. 頁面渲染時呼叫這Api，則可以使用。

## 需求
* 需要上傳檔案功能
* 需要有產品下拉選項
* 結構變更，只留最新版
* 需要有排程

## 避免重覆造輪子
隨著拖拉技術的日益成熟，從零開始開發低代碼平台顯得既耗時又不經濟。鑑於此，我們對幾款流行的低代碼編輯器和內容管理系統（CMS）進行了評估。考慮到公司主要使用Next.js技術棧並需要高度客製化，我們最終選擇了基於Next.js的開源低代碼編輯器作為開發基礎。

為進一步節省開發時間，我們選擇購買市面上已開發完成的Next.js模板，包括後台管理系統和各種元件。這讓我們能夠迅速構建出符合業務需求的系統，同時保持了開發流程的靈活性和可擴展性。

* [Github repo](https://github.com/maqi1520/react-antd-low-code)
* [Demo](https://low-code.runjs.cool/editor)
* [Website Template](https://themeforest.net/item/pickbazar-react-graphql-ecommerce-template/25283305)

### 流程圖及雛型畫面
* [流程圖（draw.io）](https://drive.google.com/file/d/1WLiov-NIOVuH3R1OyP9yXCRqppAH5pgn/view)

## 學習資源：
* [拖拉技術](https://zhuanlan.zhihu.com/p/654066892)

### 主要的設計檔
[連結](https://github.com/maqi1520/react-antd-low-code/tree/main/src/components/editor/schema)

preview => 左側導覽清單的設定
edit => 元件編輯時的預設值
fields => 定義元件

### 表單驗證
採用 react hook 來驗證表單

## 定資料結構及前端輸入元件
定義資料型態對相對應的元件
* 1. text > input (輸入盒)
* 2. json > json editor (JSON編輯器)
* 3. html > rich html editor(富文本編輯器)
* 4. value in array > single selct(單選下拉)
* 5. array > multi select (多選下拉)
* 6. date > date picker (日期選擇器)
* 7. upload image > single upload (單一圖片上傳 )
* 8. upload images > multi upload (多圖片上傳)
* 9. model select > model slect (產品型號選擇)
* 10. true / false > switch (開關選項)

## 最後
利用現有技術和資源避免重覆造輪子，可以顯著加速開發進程，降低成本，並提升產品質量。透過選擇合適的工具和技術，公司能夠更有效率地滿足特定的業務需求。

[Demo 影片](https://www.loom.com/share/a6ecf60ae0bd4ba5a164870ca4e23bb5)

## 進階 Low Code 系統
### 建立連線
1. get data base

http://localhost:61354/api/database/getdatabase
2. get db type
http://localhost:61354/api/system/getdbtype
3. save db
http://localhost:61354/api/database/savedatabase

### 導入資料表
4. get table

http://localhost:61354/api/DbTable/GetTableList?dbid=1
5. save
http://localhost:61354/api/codetable/savecodetableimport

### 調整欄位及 UI

5. 儲存程式表create table
http://localhost:61354/api/codetable/savecodetable

6. 更新資料表 update table
http://localhost:61354/api/codetable/CreateTables

7. 儲存表單結構

## Reference
https://low-code.runjs.cool/editor

https://themeforest.net/item/pickbazar-react-graphql-ecommerce-template/25283305

https://juejin.cn/post/7206955531998773309

https://segmentfault.com/a/1190000041929063






id=>







http://www.woshipm.com/active/5524617.html

低代碼流程數據庫設計
https://blog.csdn.net/weixin_33816821/article/details/94085323?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170576079516800185885376%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fvipall.%2522%257D&request_id=170576079516800185885376&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~vipall~first_rank_ecpm_v1~rank_v31_ecpm-1-94085323-null-null&utm_term=%E6%B5%81%E7%A8%8B%20%E6%95%B8%E6%93%9A%E5%BA%AB&spm=1018.2226.3001.4187

1.add section group
2.checkbox ui - support multi and single
3.axios to react query
4.server side to client side
5.verify field
6. reset schema and content

TypeError: Cannot read properties of undefined (reading 'substring')= > 沒給name