低代碼開發(fā)平臺(tái)核心功能設(shè)計(jì)——組件自定義交互實(shí)現(xiàn)
前言
筆者最近一直在研究Lowcode(低代碼)平臺(tái), 也做了非常多的實(shí)踐, 對(duì)于頁(yè)面可視化搭建平臺(tái)有了基本的研發(fā)方向和解決方案, 后期會(huì)陸續(xù)分享我對(duì)低代碼平臺(tái)的一些理解和解決方案, 并在企業(yè)應(yīng)用層做一些探索.
正文
1. 什么是低代碼以及低代碼的意義
最近筆者在outsystems網(wǎng)站上看了一篇比較好的闡述低代碼平臺(tái)的文章, 這里筆者特意做一個(gè)簡(jiǎn)單的定義:
- 低代碼 是一系列工具，可幫助我們使用拖放界面直觀地創(chuàng)建完整的應(yīng)用程序。低代碼平臺(tái)無(wú)需編寫數(shù)千行復(fù)雜的代碼和語(yǔ)法，而是使用戶能夠快速，直觀地構(gòu)建具有現(xiàn)代用戶界面，集成，數(shù)據(jù)和邏輯的完整應(yīng)用程序。
低代碼 是一種軟件開發(fā)方法，可以更快地以最少的手工編碼交付應(yīng)用程序。通過(guò)在圖形界面中使用可視化建模來(lái)組裝和配置應(yīng)用程序，開發(fā)人員可以跳過(guò)所有基礎(chǔ)架構(gòu)，并重新實(shí)現(xiàn)以往很難解決的場(chǎng)景，讓開發(fā)人員聚焦于自身業(yè)務(wù)獨(dú)特性的打造。
打個(gè)比方，想象一下你開的一家口罩制造廠：涉及自動(dòng)化的機(jī)器并不能決定口罩的外觀，但它們確實(shí)會(huì)加快口罩的組裝和交付過(guò)程。這就是低代碼的作用。
低代碼對(duì)軟件來(lái)說(shuō)就像裝配線對(duì)口罩制造廠一樣：都使困難且耗時(shí)的手動(dòng)任務(wù)自動(dòng)化，從而使人們騰出更多的時(shí)間去做更重要的事情。
我們市面上比較常見的低代碼開發(fā)平臺(tái)有:
- 可視化IDE：一種用于可視化定義應(yīng)用程序的UI，工作流和數(shù)據(jù)模型，并在必要時(shí)添加手寫代碼的環(huán)境。
- 與各種后端或服務(wù)的連接器：自動(dòng)處理數(shù)據(jù)結(jié)構(gòu)，存儲(chǔ)和檢索。
- 應(yīng)用程序生命周期管理器：用于在測(cè)試，登臺(tái)和生產(chǎn)中構(gòu)建，調(diào)試，部署和維護(hù)應(yīng)用程序的自動(dòng)化工具。
比較先進(jìn)的系統(tǒng)(例如OutSystems)為我們提供了創(chuàng)建現(xiàn)代，跨平臺(tái)的企業(yè)移動(dòng)和Web應(yīng)用程序所需的一切，并具有補(bǔ)充現(xiàn)有團(tuán)隊(duì)結(jié)構(gòu)的功能。如下圖流程所示:
2. 低代碼開發(fā)流程
我們傳統(tǒng)的軟件開發(fā)過(guò)程往往都會(huì)經(jīng)過(guò)如下所示流程:
也就是從基本的需求設(shè)計(jì), 產(chǎn)品規(guī)劃到前后端應(yīng)用開發(fā), 最后到測(cè)試, 部署上線.
使用低代碼, 他的開發(fā)流程看起來(lái)像:
每一個(gè)步驟都能通過(guò)非常簡(jiǎn)單的拖拽去實(shí)現(xiàn), 大大降低的開發(fā)成本, 使得開發(fā)人員和產(chǎn)品工作者能更專注的聚焦于核心業(yè)務(wù)的打磨和快速試錯(cuò), 更為敏捷開發(fā)提供了有力支撐.
3. 如何實(shí)現(xiàn)低代碼體系下的內(nèi)外部系統(tǒng)交互
在介紹完低代碼平臺(tái)之后, 我們開始聚焦于實(shí)際業(yè)務(wù)場(chǎng)景, 來(lái)實(shí)現(xiàn)低代碼開發(fā)平臺(tái)中遇到的核心問(wèn)題以及解決方案. 這里筆者拿H5-Dooring來(lái)舉個(gè)例子, 先看看dooring的操作界面:
我們?cè)谑褂每梢暬脚_(tái)時(shí)除了需要滿足對(duì)展示型頁(yè)面的設(shè)計(jì)需求外, 我們更多的是要和企業(yè)自身業(yè)務(wù)打通,比如如何實(shí)現(xiàn)跨系統(tǒng)間的交互, 如何實(shí)現(xiàn)基本元素的交互能力, 如何植入外部API使得數(shù)據(jù)流向企業(yè)內(nèi)部等. 這些需求對(duì)應(yīng)的實(shí)際場(chǎng)景如下:
- 網(wǎng)頁(yè)嵌入App內(nèi)部需要和app端通信, 而不是單純的展示
- 網(wǎng)頁(yè)需要對(duì)用戶的操作實(shí)現(xiàn)基本的交互能力, 比如跳轉(zhuǎn)鏈接, 打開彈窗等
- 企業(yè)配置好的表單, 對(duì)外收集數(shù)據(jù)時(shí)希望流入自己內(nèi)部系統(tǒng)做數(shù)據(jù)收集和分析
筆者將針對(duì)以上場(chǎng)景, 在H5-dooring中給出相應(yīng)的解決方案.
3.1 網(wǎng)頁(yè)嵌入App內(nèi)部和app端通信實(shí)現(xiàn)
要實(shí)現(xiàn)和外部容器通信,必須具備的就是自定義編碼能力, 也就是筆者采用LowCode而不是noCode的原因, 具體實(shí)現(xiàn)方式有很多, 比如采用比較流行的代碼編輯插件react-codemirror2或者 react-monaco-editor. 其次要解決的就是哪些組件需要具備這種交互能力, 這里很明顯是我們的Button組件. 效果如下:
這樣我們就能實(shí)現(xiàn)真正的代碼自治和跨容器通信了. 至于react-codemirror2的使用方式,筆者簡(jiǎn)單寫個(gè)demo供大家參考:
- import {Controlled as CodeMirror} from 'react-codemirror2';
- require('codemirror/mode/javascript/javascript');
- <CodeMirror
- value={this.state.value}
- options={options}
- onBeforeChange={(editor, data, value) => {
- this.setState({value});
- }}
- onChange={(editor, data, value) => {
- }}
- />
當(dāng)然其內(nèi)部支持更多的語(yǔ)言擴(kuò)展, 感興趣的可以研究一下, 筆者也基于它實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的代碼編輯器, 可以研究一下.
3.2 頁(yè)面元素對(duì)用戶的操作實(shí)現(xiàn)基本的交互能力, 比如跳轉(zhuǎn)鏈接, 打開彈窗等
基本上任何可視化搭建平臺(tái)都會(huì)提供一定程度上的交互能力, 這些交互往往和交互組件所綁定, 比如按鈕, 鏈接, 這里筆者給大家展示在Button(按鈕)組件中的應(yīng)用:
以上為3中常見的交互模式, 即:
- 跳轉(zhuǎn)鏈接
- 打開彈窗, 并自定義彈窗內(nèi)容
- 自定義交互能力
因?yàn)榈谌N方式筆者已經(jīng)在上面介紹了, 這里重點(diǎn)介紹彈窗交互. 一般的彈窗交互可能會(huì)支持的彈窗內(nèi)容如下:
- 圖片
- 文字提示
- 圖文提示
- 表格
還有很多形式, 如果我們的實(shí)現(xiàn)中要一次實(shí)現(xiàn)這些組件, 那將是非常大的工作量, 所以筆者這里設(shè)計(jì)了一種一勞永逸的方式——富文本編輯器. 筆者提供富文本編輯器來(lái)實(shí)現(xiàn)用戶定義任何內(nèi)容形態(tài)的能力, 如下圖所示:
在手機(jī)端的效果如下:
要實(shí)現(xiàn)該交互需要定義交互的json-schema, 這里筆者在之前的文章中也解剖過(guò)H5-dooring的具體實(shí)現(xiàn), 這里不一一介紹了, 我們主要來(lái)看看富文本編輯器, 這里筆者推薦兩款:
- react-quill
- braft-editor
3.3 企業(yè)配置好的表單, 對(duì)外收集數(shù)據(jù)時(shí)希望流入自己內(nèi)部系統(tǒng)做數(shù)據(jù)收集和分析
對(duì)于交互型應(yīng)用來(lái)說(shuō), 數(shù)據(jù)追蹤和分析能力是比較重要的一環(huán), 目前也有很多表單問(wèn)卷工具, 同樣H5-Dooring也提供了表單問(wèn)卷一體化解決方案, 用戶可以在平臺(tái)內(nèi)搭建自定義的問(wèn)卷并進(jìn)行數(shù)據(jù)收集, 分析. 對(duì)于有私域需求的用戶來(lái)說(shuō), 他們希望表單的數(shù)據(jù)流向自己內(nèi)部系統(tǒng), 自己進(jìn)行分析, 所以我們理論上也應(yīng)該提供這種開發(fā)接口供用戶使用, 在表單設(shè)計(jì)中, 筆者暴露了api接口來(lái)實(shí)現(xiàn)這一需求:
如果用戶提供了api接口, 頁(yè)面會(huì)自動(dòng)提交到api指定的地址, 筆者對(duì)該接口做了跨域處理, 用戶只需要提供對(duì)應(yīng)的跨域接口即可. 代碼實(shí)現(xiàn)如下:
- if (api) {
- fetch(api, {
- body: JSON.stringify(formData),
- cache: 'no-cache',
- headers: {
- 'content-type': 'application/json',
- },
- method: 'POST',
- mode: 'cors',
- });
- }else {
- req.post(`xxx/xxx`, formData)
- }
所以, 今天你又博學(xué)了嗎?
最后
以上教程筆者已經(jīng)集成到H5-Dooring中，對(duì)于一些更復(fù)雜的交互功能，通過(guò)合理的設(shè)計(jì)也是可以實(shí)現(xiàn)的，大家可以自行探索研究。
github地址：H5編輯器H5-Dooring
