日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
低代碼開發(fā)平臺核心功能設(shè)計——組件自定義交互實現(xiàn)

 前言

筆者最近一直在研究Lowcode(低代碼)平臺, 也做了非常多的實踐, 對于頁面可視化搭建平臺有了基本的研發(fā)方向和解決方案, 后期會陸續(xù)分享我對低代碼平臺的一些理解和解決方案, 并在企業(yè)應(yīng)用層做一些探索.

正文

1. 什么是低代碼以及低代碼的意義

最近筆者在outsystems網(wǎng)站上看了一篇比較好的闡述低代碼平臺的文章, 這里筆者特意做一個簡單的定義:

  • 低代碼 是一系列工具，可幫助我們使用拖放界面直觀地創(chuàng)建完整的應(yīng)用程序。低代碼平臺無需編寫數(shù)千行復(fù)雜的代碼和語法，而是使用戶能夠快速，直觀地構(gòu)建具有現(xiàn)代用戶界面，集成，數(shù)據(jù)和邏輯的完整應(yīng)用程序。

低代碼 是一種軟件開發(fā)方法，可以更快地以最少的手工編碼交付應(yīng)用程序。通過在圖形界面中使用可視化建模來組裝和配置應(yīng)用程序，開發(fā)人員可以跳過所有基礎(chǔ)架構(gòu)，并重新實現(xiàn)以往很難解決的場景，讓開發(fā)人員聚焦于自身業(yè)務(wù)獨特性的打造。

打個比方，想象一下你開的一家口罩制造廠：涉及自動化的機器并不能決定口罩的外觀，但它們確實會加快口罩的組裝和交付過程。這就是低代碼的作用。

低代碼對軟件來說就像裝配線對口罩制造廠一樣：都使困難且耗時的手動任務(wù)自動化，從而使人們騰出更多的時間去做更重要的事情。

我們市面上比較常見的低代碼開發(fā)平臺有:

  1. 可視化IDE：一種用于可視化定義應(yīng)用程序的UI，工作流和數(shù)據(jù)模型，并在必要時添加手寫代碼的環(huán)境。
  2. 與各種后端或服務(wù)的連接器：自動處理數(shù)據(jù)結(jié)構(gòu)，存儲和檢索。
  3. 應(yīng)用程序生命周期管理器：用于在測試，登臺和生產(chǎn)中構(gòu)建，調(diào)試，部署和維護(hù)應(yīng)用程序的自動化工具。

比較先進(jìn)的系統(tǒng)(例如OutSystems)為我們提供了創(chuàng)建現(xiàn)代，跨平臺的企業(yè)移動和Web應(yīng)用程序所需的一切，并具有補充現(xiàn)有團(tuán)隊結(jié)構(gòu)的功能。如下圖流程所示:

 

2. 低代碼開發(fā)流程

我們傳統(tǒng)的軟件開發(fā)過程往往都會經(jīng)過如下所示流程:

也就是從基本的需求設(shè)計, 產(chǎn)品規(guī)劃到前后端應(yīng)用開發(fā), 最后到測試, 部署上線.

使用低代碼, 他的開發(fā)流程看起來像:

每一個步驟都能通過非常簡單的拖拽去實現(xiàn), 大大降低的開發(fā)成本, 使得開發(fā)人員和產(chǎn)品工作者能更專注的聚焦于核心業(yè)務(wù)的打磨和快速試錯, 更為敏捷開發(fā)提供了有力支撐.

3. 如何實現(xiàn)低代碼體系下的內(nèi)外部系統(tǒng)交互

在介紹完低代碼平臺之后, 我們開始聚焦于實際業(yè)務(wù)場景, 來實現(xiàn)低代碼開發(fā)平臺中遇到的核心問題以及解決方案. 這里筆者拿H5-Dooring來舉個例子, 先看看dooring的操作界面:

我們在使用可視化平臺時除了需要滿足對展示型頁面的設(shè)計需求外, 我們更多的是要和企業(yè)自身業(yè)務(wù)打通,比如如何實現(xiàn)跨系統(tǒng)間的交互, 如何實現(xiàn)基本元素的交互能力, 如何植入外部API使得數(shù)據(jù)流向企業(yè)內(nèi)部等. 這些需求對應(yīng)的實際場景如下: 

  1. 網(wǎng)頁嵌入App內(nèi)部需要和app端通信, 而不是單純的展示
  2. 網(wǎng)頁需要對用戶的操作實現(xiàn)基本的交互能力, 比如跳轉(zhuǎn)鏈接, 打開彈窗等
  3. 企業(yè)配置好的表單, 對外收集數(shù)據(jù)時希望流入自己內(nèi)部系統(tǒng)做數(shù)據(jù)收集和分析

筆者將針對以上場景, 在H5-dooring中給出相應(yīng)的解決方案.

3.1 網(wǎng)頁嵌入App內(nèi)部和app端通信實現(xiàn)

要實現(xiàn)和外部容器通信,必須具備的就是自定義編碼能力, 也就是筆者采用LowCode而不是noCode的原因, 具體實現(xiàn)方式有很多, 比如采用比較流行的代碼編輯插件react-codemirror2或者 react-monaco-editor. 其次要解決的就是哪些組件需要具備這種交互能力, 這里很明顯是我們的Button組件. 效果如下:

 

這樣我們就能實現(xiàn)真正的代碼自治和跨容器通信了. 至于react-codemirror2的使用方式,筆者簡單寫個demo供大家參考: 

 
 
 
 
    
  
  
  
  
  1. import {Controlled as CodeMirror} from 'react-codemirror2'; 
    2.   
  
  
  
  2. require('codemirror/mode/javascript/javascript'); 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   
  
  
  
  5.   value={this.state.value} 
    6.   
  
  
  
  6.   options={options} 
    7.   
  
  
  
  7.   onBeforeChange={(editor, data, value) => { 
    8.   
  
  
  
  8.     this.setState({value}); 
    9.   
  
  
  
  9.   }} 
    10.   
  
  
  
  10.   onChange={(editor, data, value) => { 
    11.   
  
  
  
  11.   }} 
    12.   
  
  
  
  12. /> 
    13.

當(dāng)然其內(nèi)部支持更多的語言擴展, 感興趣的可以研究一下, 筆者也基于它實現(xiàn)了一個簡單的代碼編輯器, 可以研究一下.

3.2 頁面元素對用戶的操作實現(xiàn)基本的交互能力, 比如跳轉(zhuǎn)鏈接, 打開彈窗等

基本上任何可視化搭建平臺都會提供一定程度上的交互能力, 這些交互往往和交互組件所綁定, 比如按鈕, 鏈接, 這里筆者給大家展示在Button(按鈕)組件中的應(yīng)用:

以上為3中常見的交互模式, 即:

  1. 跳轉(zhuǎn)鏈接
  2. 打開彈窗, 并自定義彈窗內(nèi)容
  3. 自定義交互能力

因為第三種方式筆者已經(jīng)在上面介紹了, 這里重點介紹彈窗交互. 一般的彈窗交互可能會支持的彈窗內(nèi)容如下:

  1. 圖片
  2. 文字提示
  3. 圖文提示
  4. 表格

還有很多形式, 如果我們的實現(xiàn)中要一次實現(xiàn)這些組件, 那將是非常大的工作量, 所以筆者這里設(shè)計了一種一勞永逸的方式——富文本編輯器. 筆者提供富文本編輯器來實現(xiàn)用戶定義任何內(nèi)容形態(tài)的能力, 如下圖所示:

在手機端的效果如下:

要實現(xiàn)該交互需要定義交互的json-schema, 這里筆者在之前的文章中也解剖過H5-dooring的具體實現(xiàn), 這里不一一介紹了, 我們主要來看看富文本編輯器, 這里筆者推薦兩款:

  • react-quill
  • braft-editor

3.3 企業(yè)配置好的表單, 對外收集數(shù)據(jù)時希望流入自己內(nèi)部系統(tǒng)做數(shù)據(jù)收集和分析

對于交互型應(yīng)用來說, 數(shù)據(jù)追蹤和分析能力是比較重要的一環(huán), 目前也有很多表單問卷工具, 同樣H5-Dooring也提供了表單問卷一體化解決方案, 用戶可以在平臺內(nèi)搭建自定義的問卷并進(jìn)行數(shù)據(jù)收集, 分析. 對于有私域需求的用戶來說, 他們希望表單的數(shù)據(jù)流向自己內(nèi)部系統(tǒng), 自己進(jìn)行分析, 所以我們理論上也應(yīng)該提供這種開發(fā)接口供用戶使用, 在表單設(shè)計中, 筆者暴露了api接口來實現(xiàn)這一需求:

如果用戶提供了api接口, 頁面會自動提交到api指定的地址, 筆者對該接口做了跨域處理, 用戶只需要提供對應(yīng)的跨域接口即可. 代碼實現(xiàn)如下:

 
 
 
 
    
  
  
  
  
  1. if (api) { 
    2.   
  
  
  
  2.     fetch(api, { 
    3.   
  
  
  
  3.       body: JSON.stringify(formData), 
    4.   
  
  
  
  4.       cache: 'no-cache', 
    5.   
  
  
  
  5.       headers: { 
    6.   
  
  
  
  6.         'content-type': 'application/json', 
    7.   
  
  
  
  7.       }, 
    8.   
  
  
  
  8.       method: 'POST', 
    9.   
  
  
  
  9.       mode: 'cors', 
    10.   
  
  
  
  10.     }); 
    11.   
  
  
  
  11.   }else { 
    12.   
  
  
  
  12.     req.post(`xxx/xxx`, formData) 
    13.   
  
  
  
  13. } 
    14.

所以, 今天你又博學(xué)了嗎?

最后

以上教程筆者已經(jīng)集成到H5-Dooring中，對于一些更復(fù)雜的交互功能，通過合理的設(shè)計也是可以實現(xiàn)的，大家可以自行探索研究。

github地址：H5編輯器H5-Dooring

 


當(dāng)前標(biāo)題：低代碼開發(fā)平臺核心功能設(shè)計——組件自定義交互實現(xiàn)
文章起源：http://www.5511xx.com/article/dhcghso.html