之前一直在做 lowcode 和可視化相關的項目,也圍繞可視化技術輸出了一系列技術文章,今天我繼續和大家來聊聊可視化平臺相關的話題——組件商店。這個需求其實很早在我開源 H5-Dooring 之后就有網友提出過 issue ,如下:
正好最近也做了一系列的重構和優化,覺得是時侯著手組件商店了,所以借此機會和大家詳細聊聊如何設計可視化搭建平臺的組件商店。
按照我一向的寫作風格,我會在下面列出文章的大綱,以便大家有選擇且高效率的閱讀和學習:
文章視圖如下,大家在平時在工作中也可以通過思維導圖的方式來整理思路。
“商店”大家也許并不陌生,對用戶而言,其基本用途是滿足正常的消費需求;對供應商而言,商店提供了一種銷售自身產品的營銷推廣渠道;對商店自身而言,一方面獲得了客流和利潤,另一方面還能提供自身價值在空間上的延伸。
通過以上的圖例說明,我們很容易想到一個詞——生態。因為每一個環節都在相互促進,相互影響。那么對于商店這個實體有了具象的認知之后,我們再來看看技術領域的“組件商店”。
對于可視化搭建平臺而言,其中一個核心的環節就是組件資產。用戶在設計搭建頁面時會消費各種各樣的組件,但是對于不同的用戶而言,組件的需求往往是不一樣的,大部分的 lowcode 或者 nocode 平臺都不能很好的解決用戶這些定制化的組件需求,所以為了解決這一問題,組件商店就孕育而生。
我們需要在平臺中提供一種機制,支撐生產者生產組件,定義組件,同時管理者可以對生產者生產的組件進行分類管理(比如上架/下架/刪除/排序等)。做過電商系統的朋友可能會發現,它和電商平臺的商品發布上線是一個邏輯流程:
那么接下來我就帶大家一起設計一個這樣的流程,供大家參考。
根據上面的介紹和分析,我們要想實現完整的組件商店工作流,需要滿足以下幾點:
有了以上4塊的支持,基本的組件商店就可以 work 了。具體流程如下:
在有了具體的規劃和設計之后,我們就可以一步步來實現了。
在線代碼編輯器目前市面上有幾種成熟的方案,比如:
大家可以選擇以上任意一種方案,這里筆者采用 react-codemirror2 來實現。實現后的效果如下:
由上圖可以看到我們可以在線編寫React,Css,Js 代碼,并且可以配置組件信息。首先我們來安轉一下插件:
yarn add react-codemirror2 codemirror2
codemirror 給我們提供了很多語言支持和不同風格的代碼主題,我們可以很輕松的制作不同語言的編輯面板。接下來我帶大家實現一個React代碼編輯器:
import {UnControlled as CodeMirror} from 'react-codemirror2';require('codemirror/mode/jsx/jsx');const react_code = `import styles from './index.less';import React, { memo, useState } from 'react';import ReactDOM from 'react-dom';const MenuCp = memo((props) => { const { visible, list, bgColor, top } = props; return ReactDOM.createPortal( <div className={styles.menuWrap} style={{display: visible ? 'block' : 'none', backgroundColor: bgColor, top: (top + 6) + 'px'}}> H5-Dooring </div>, (document as any).querySelector('.react-grid-layout').parentNode, )})`const ReactEditPanel = () => { const codeEditorChange = ( _editor: CodeMirror.Editor, _data: CodeMirror.EditorChange, value: string, type: string ) => { console.log(_data, value, type) } return <CodeMirror value={react_code} className={styles.codeWrap} optinotallow={{ mode: 'jsx', theme: 'material', lineNumbers: true }} notallow={(editor, data, value) => codeEditorChange(editor, data, value, 'react')} />}
以上就實現了一個簡單的React代碼編輯器,是不是很簡單呢? 同理對于 css ,js 代碼編輯器,也是同樣的方式,我們只需要定義 CodeMirror 屬性的mode 為 css ,javascript 即可。我們還可以設置 theme 來切換到我們喜歡的代碼主題,這里筆者使用的material風格。
單純實現在線代碼編輯器還不夠,我們還需要對代碼進行處理,保存,對組件進行定義,接下來我們就來看看組件是如何提交的。
當“ 生產者 ”編寫好組件代碼之后,需要對組件自身進行定義。因為可視化平臺組件物料很依賴平臺的組件開發協議,我們需要按照平臺的規范去上傳規范的自定義組件,這樣平臺才能更好的理解應用組件,保持用戶認知的一致性。
組件描述信息筆者這里設計了如下字段:
大家也可以根據自己的平臺特性來定義和規范,這樣我們就可以提交一個完整的組件數據了。
目前我的做法是將用戶提交的完整的組件數據存在庫中,以便審核轉化為可視化平臺可以消費的組件,當然大家也可以用更智能的方式,自動對組件代碼信息進行提取轉化,其缺點就是誤差率無法控制,以及無法對組件進行準確的描述。以下是我提交的效果:
組件提交邏輯也很簡單:
form.validateFields().then(values => { codeRef.current['form'] = { ...values, icon: values.icon[0].url }; req.post('/visible/cp/save', codeRef.current).then(res => { setIsModalVisible(false); })}).catch(errorInfo => { console.log(errorInfo) setCurTab("4")})
我們只需要用 antd 的Form 將用戶填寫的數據收集起來提交給后臺接口即可。由于我的后臺采用 nodejs 實現,上傳接口無非就是保存組件數據,實現比較簡單,這里就不一一介紹了。對 nodejs 感興趣的朋友可以參考我之前的開源項目從零搭建全棧CMS系統。
組件審批主要由網站管理人員來操作,當用戶組件提交成功之后,客戶端會通過消息信令通知管理員,管理員收到消息后會審核組件。那么整個過程也很簡單,我們可以使用 websocket 來實現消息雙向通信,完整流程如下:
我們先來實現 socket 通信,這里我就采用市面比較成熟的 socket.io,來簡單打通一個客戶端, 服務端的雙向通信流程。
首先我們先按照一下依賴:
# 服務端yarn add socket.io# 客戶端yarn add socket.io-client
對于服務端,我們需要進行如下改寫:
import koa from 'koa';import http from 'http';const app = new koa();const server = http.createServer(app.callback());const io = require('socket.io')(server);// 一些業務邏輯...// socket通信io.on('connection', (socket) => { console.log('a user connected'); socket.on('component upload success', (msg) => { // 通知審批 io.emit('component review', msg) }) });server.listen(config.serverPort, () => { console.log(`服務器地址:xxx.xxx.xxx`)});
對于客戶端,邏輯如下:
import io from 'socket.io-client'import { serverUrl } from '@/utils/tool'const socket = io(serverUrl);// ... 一些邏輯useEffect(() => { socket.on('connect', function(){ console.log('connect') }); socket.on('htmlWorked', function(data){ const { result, message } = data if(result !== 'error') { // ... }else { // ... } }); socket.on('disconnect', function(e){ console.log('disconnect', e) }); }, [])
通過以上的實現方式客戶端和服務端就可以隨時進行通信了。接下來我們看看審批的效果:
用戶在 H5-Dooring 平臺提交的組件都會流入管理后臺,管理員可以對組件進行審查以及下載源碼等操作。審批同樣會用到 codemirror 這個庫,主要是將存到數據庫的字符串代碼進行回顯。當然還可以實現線上預覽組件上線后的效果,這塊大家感興趣的可以自己嘗試一下實現方案,原理也很簡單。我們來看看審批的演示:
組件上架的方案也有很多,比如可以手動上架更新,也可以用程序自動化的完成。那么這里我介紹一下我的線上自動化上架的方案,這里還是需要借助上面介紹的 socket.io 和 nodejs。原理大致如下:
完整的流程就是平臺管理員對組件審批通過之后,會自動用 socket 向服務端發送審批通過信號,服務器會對組件數據進行解析,寫入對應類別下的組件庫里(也就是組件入庫),并將組件信息元寫入到編輯器基座,此時為了更新基座拿到最新的效果,需要 nodejs 解析構建指令線上打包基座,基座更新完之后會用 socket 發送消息給 H5-Dooring,通知用戶組件庫已更新,提示用戶是否刷新組件列表,至此,一個完整的組件上架更新流程就完成了。這里我們實現一下如何線上打包編輯器基座。
首先我們需要對 nodejs 的父子進程有一定的了解,比如 child_process。我會使用child_process 的 exec 實現解析并執行命令行指令,如果大家對 nodejs 的父子進程不太熟悉,也可以參考我之前的文章 基于NodeJS從零構建線上自動化打包工作流。
因為整個過程需要自動化的去處理,不能像我們之前打包項目一樣,手動執行 npm run build 或者 yarn build 。我們需要程序自動幫我們執行這個命令行指令,具體方案如下:
import { exec } from 'child_process'const outWorkDir = resolve(__dirname, '../h5_base_frame')const fid = uuid(8, 16)const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`router.post(api.generalConfig, auth, ctx => { // ... exec(cmdStr, function(err, stdout, stderr){ if(err) { console.log('api error:'+stderr); io.emit('htmlWorked', { result: 'error', message: stderr }) } else { io.emit('component update success', { result: 'success', message: 'xxxx' }) } }) // ... });
通過以上的方式,我們就可以線上打包更新我們的項目基座,并植入任何參數,如果需要動態寫入文件,我們只需要用 fs 模塊處理即可,通過這樣的線上工作流,我們還可以實現更復雜的邏輯,甚至實現一個小型的前端CI工作流。那么大家如果有更優雅更好的方案,也是可以隨時在評論區交流。
以上所有的設計方案實現都是基于實際需求來設計的,當然還有很多細節需要處理和優化,隨著需求和,業務的復雜,后期還會做組件統計,組件數據分析,組件監控等能力,大家也可以參考以上的設計方案,設計自己的組件商店。
本文鏈接:http://www.www897cc.com/showinfo-26-78497-0.html復盤!如何設計可視化搭建平臺的組件商店?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com