Mark Ku's Blog
首頁 關於我
使用 Next js 打造自己的 Low code CMS
Frontend
使用 Next js 打造自己的 Low code CMS
Mark Ku
Mark Ku
July 05, 2024
1 min

時空背景

如今,有越來越多企業將採用用各種開源內容管理系統(CMS)來管理靜態內容,然而,隨著時間一久,這些系統常常帶來整合和客製化的挑戰。

雖然開源的的內容管理機制加速了開發速度,但同時也增加了運營和溝通及效率方面的負擔,這些額外的工作需要在考慮開源的CMS系統選擇時予以特別注意,以確保能夠有效配合公司業務的長期發展。

目的

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

自製低代碼概念

1.設計表單結構

工程師拖拉元件,建立Schema JSON 結構,最後存進資料庫

2. 內容維護

從資料庫取得先前工程師設計的表單 Scehma JSON 結構,依據 JSON 結構渲染結構,渲染先前設計的表單,使用者依據表單輸入相關資料。

3. 頁面渲染

頁面渲染時,則可以直接呼叫這Api來渲染頁面。

需求

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

避免重覆造輪子

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

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

  • Github repo
  • Demo
  • Website Template

流程圖及雛型畫面

學習資源:

開源的 Next js 低代碼程式碼

image 連結

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

表單驗證

採用 react hook form 來驗證表單

定資料結構及前端輸入元件

定義資料型態對相對應的元件

  • text > input (輸入盒)
  • json > json editor (JSON編輯器)
  • html > rich html editor(富文本編輯器)
  • value in array > single selct(單選下拉)
  • array > multi select (多選下拉)
  • date > date picker (日期選擇器)
  • upload image > single upload (單一圖片上傳 )
  • upload images > multi upload (多圖片上傳)
  • model select > model slect (產品型號選擇)
  • true / false > switch (開關選項)

最後

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

Demo 影片


Tags

Mark Ku

Mark Ku

Software Developer

9年以上豐富網站開發經驗,開發過各種網站,電子商務、平台網站、直播系統、POS系統、SEO 優化、金流串接、AI 串接,Infra 出身,帶過幾次團隊,也加入過大團隊一起開發。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

資策會 CECM03 C# 微軟雲端養成開發班 - 10年聚會
資策會 CECM03 C# 微軟雲端養成開發班 - 10年聚會
October 11, 2024
1 min

Quick Links

關於我

Social Media