水滴低程式碼搭建——6倍提效,新品首發素材稽核系統實踐之路

語言: CN / TW / HK

新品業務線上化規則化的推進過程中,需要新增首發素材稽核 CMS 並內嵌於營銷中心,提供業務運營更加便捷的打分、評審的體驗。在技術選型的過程中,新品團隊瞭解到水滴低程式碼平臺具備視覺化搭建 CMS 的能力,內建了豐富能力,能夠高效、快速地搭建 CMS,例如表單表格、許可權管控、微前端等。與業務訴求的產品形態契合度高、設計風格一致並且預設支援微前端,在運維部署上幾乎可以做到零成本,非常方便就能將產物嵌在營銷中心內。在技術調研並對比全部開發所需要的40+人日後,團隊選擇了更高效的水滴低程式碼作為 CMS 的實現方式,並在 6 人日內完成了整個共建、搭建流程。

本文將營銷中心-新品首發素材稽核 CMS (下文簡稱新品CMS) 的搭建梳理作為最佳實踐,從 0 開始介紹如何使用水滴低程式碼平臺。

水滴 — CMS 快速解決方案

水滴具有面向程式設計、低程式碼兩個方向的優勢,兩者相輔相成,向開發者提供了涵蓋中後臺管理系統各角度的解決方案,主要亮點功能包括:

水滴功能亮點

下面將帶領大家以開發者的視角,以營銷中心新品 CMS 的搭建,作為最佳實踐,一步步從需求評審,到元件開發,再到頁面搭建,最終將 CMS 釋出上線。

新品 CMS 最終效果

新品 CMS 需求分析

在梳理需求後,對於營銷中心新品 CMS 應用,分析出以下特點:

業務複雜:各個模組間的關聯性強、資料複雜程度較高

互動場景多:頁面間有較多的跳轉、資料傳遞的需求,模組之間有較多的互動需求

高 UI 還原度:需要符合營銷中心設計語言,保持一致設計風格

微前端組合:新品 CMS 並非獨立使用,而是嵌入在營銷中心內作為子應用使用

開發週期短:3 個頁面( 6 個表單、4 個表格),從開發到提測,僅有 6 天的時間

除了特點分析,我們還梳理頁面及元件,由於業務和互動的定製場景,仍有 4 個業務元件需要定製開發,好在水滴具備共建能力,開發者可定製業務元件集並匯入系統。

需求梳理

元件共建開發

需求梳理後,接下來就是定製業務元件的流程。開發者可以在下載自定義元件模版庫後,進行相關定製開發。

模板內包含了元件開發的程式碼模板、常用依賴、除錯工具以及命令,開發完成以後可通過命令釋出至 jnpm 。這樣,就可以在水滴工作臺的外掛管理安裝對應的元件集,安裝完成以後即可在搭建頁使用了。

定製元件開發流程

1、 本地開發時可一邊 coding ,一邊進行表單、表格元件介面除錯。

2、開發完成的定製元件集,成功釋出至 jnpm 倉庫以後,即可在水滴工作臺進行安裝使用。

3、安裝後的元件即可在搭建頁面中進行拖拽使用。

至此,我們頁面中需要的元件就全部開發完成,接下來將進入我們的頁面搭建環節吧〜

頁面視覺化搭建

頁面搭建環節就十分的簡單了,水滴提供了表單表格設計器,只需要拖拖拽拽,就能將元件的佈局和樣式調整為 UI 設計稿中的樣子。

為了減少使用者在調整佈局和修改樣式上的操作次數,水滴團隊聯合基礎業務體驗部 UI 設計團隊制定了中後臺視覺標準,並落地到低程式碼平臺中,使得一次拖拽即可達到理想中的樣式。

水滴表單設計器

除了介面搭建,水滴也支援表單聯動、非同步拉取資料等複雜邏輯方面配置,開發者可以靈活切換到 Schema 介面進行各種邏輯的配置編寫。表單校驗方面則內建了url 、 https 、圖片大小尺寸、 陣列上下限等幾十種常用校驗,不滿足時既可以填寫自定義正則表示式,也可以通過 Schema 配置其他複雜校驗。

水滴表單設計器:JSON編輯能力

前端事件編排

除了介面佈局外,還需要處理業務邏輯和互動跳轉,這裡可以通過水滴工作臺的事件編排功能,編寫 JS 動作並繫結在模組暴露的各個事件上。

在新品的提交表單中,雖然表單元件本身已經提供了基礎校驗能力,但是我們仍需要在表單提交前進行一些個性化的校驗邏輯,這裡便可通過編寫 JS 動作實現了。

此外還需要對錶單收集到的資料進行一些結構上的轉換,以滿足後臺介面文件的定義,可以在事件配置中的「表單提交前」的事件中,繫結相應的 JS 動作來處理資料轉換邏輯。

事件繫結與動作編寫

介面與資料來源

介面搭建和事件邏輯編排都完成以後,便可以和後臺的介面進行聯調,將介面和資料來源進行打通。與常見的低程式碼平臺不同, DripWorks 不僅提供前端維度的搭建,還可以通過 FaaS 串聯資料來源。

介面開發者通過 FaaS 可以免除運維部署細節困擾,並通過預設好的模板,簡單配置就生成想要的函式並連線例如 DUCC 等資料來源。非常快速就能建立包含 NodeJS 、JAVA 等在內的各種增刪改查介面。

而在新品 CMS 的場景中,已經有對應的後臺服務,因此在簡單修改接口出入參後,直接繫結相應的介面 URL 即可。這樣,我們搭建的模組就和我們後臺服務提供的介面繫結成功啦〜

繫結介面服務

許可權管控

當頁面的開發、介面聯調工作完成以後,便要為我們的 CMS 應用進行許可權管控定製。

在許可權管控方面,水滴提供完善的角色許可權管控能力,可以設定不同的角色併為其分配相應選單、頁面及功能許可權。

除了為使用者提供了頁面級檢視許可權控制,此外也提供了後端可呼叫的 API 服務,可呼叫服務進行更精細化的許可權管控。

角色與許可權管控

免運維雲構建部署與版本管理

完成搭建後,就可以點選構建釋出進行上線操作了。水滴會自動生成原始碼,並進行雲構建,最終把構建產物推送到京東前端釋出平臺 Pubfree 進行部署。這樣的優勢便是構建完成的產物會固化下來,不再受到平臺變更的影響,同時也可以拿到原始碼進行二次開發或者私有化部署,對 CMS 這類低變更頻率但業務複雜度高的型別穩定性、靈活性更好。

同時水滴也提供了測試、預發以及生產 3 種環境,開發者可根據情況選擇不同的歷史版本,在 3 種環境下進行秒級切換。

版本管理

點擊發布後的連結地址,即可跳轉到線上應用,這樣我們就拿到了最終產出的 CMS ,並且水滴構建的產物預設符合 Micro-App 微前端子應用規範,可直接與營銷中心等微前端框架結合,這樣整個搭建、開發和部署的流程就已經結束了。

總結

通過新品 CMS 應用的實踐過程,我們可以看到,水滴不僅支援拖拽視覺化搭建 CMS 系統,同時還具備靈活且深度的元件共建、邏輯擴充套件能力,可以滿足不同 CMS 的業務訴求。內建的許可權、元件、選單路由、構建部署也方便並減少了重複開發,對效能有明顯的提升幫助。但是依然有不少有待改進的地方,比如各種功能模組內容的豐富、學習及上手門檻等等,水滴團隊也會本著精益求精的精神,以使用者的需求為導向,持續加強平臺的易用性、擴充套件性。

同時在開源建設上,水滴也把底層的優秀功能進行了開源並持續迭代,包括表單、表格等,歡迎大家體驗並提出寶貴建議~!

相關資源

  • 水滴表單開源能力:

    https://github.com/JDFED/drip-form

  • 水滴表格開源能力:

    https://github.com/JDFED/drip-table