低代码开发平台核心功能设计——组件自定义交互实现

前言笔者最近在研究Lowcode（低代码）平台，做了很多实践。解决方案，后期会分享一些自己在低代码平台上的理解和解决方案，在企业应用层做一些探索。正文1.什么是低代码以及低代码的含义？最近笔者在outsystems网站上看到一篇比较好的解释low-codeplatforms的文章，这里我特意做一个简单的定义：Low-code是一系列的工具，帮助我们通过拖拽的方式直观地创建完整的应用程序界面。无需编写数千行复杂的代码和语法，低代码平台使用户能够使用现代用户界面、集成、数据和逻辑快速、直观地构建完整的应用程序。低代码是一种软件开发方法，可以通过最少的手工编码更快地交付应用程序。通过在图形界面中使用可视化建模来组装和配置应用程序，开发人员可以跳过所有基础架构并重新实现以前难以解决的场景，让开发人员专注于构建自己的业务独特性。打个比方，假设您经营一家口罩制造厂：自动化所涉及的机器不会决定口罩的外观，但它们确实会加快口罩的组装和交付过程。这就是低代码的作用。低代码之于软件就像流水线之于口罩制造厂：将困难且耗时的手动任务自动化，让人们腾出时间去做更重要的事情。市场上比较常见的低代码开发平台有：VisualIDE：可视化定义应用程序的UI、工作流和数据模型，并在必要时添加手写代码的环境。各种后端或服务的连接器：自动处理数据结构、存储和检索。ApplicationLifecycleManager：用于在测试、暂存和生产中构建、调试、部署和维护应用程序的自动化工具。OutSystems等更高级的系统为我们提供了创建现代跨平台企业移动和Web应用程序所需的一切，并具有补充现有团队结构的功能。如下图所示：2.低代码开发流程我们传统的软件开发流程往往会经历以下流程：从基础需求设计，产品规划，到前后端应用开发，最后到测试和开发。部署。使用Low-code，它的开发流程是这样的：每一步都可以通过非常简单的拖放实现，大大降低开发成本，让开发人员和产品工作者更专注于核心业务的打磨和快速试错，为更多产品提供强有力的支持敏捷开发。3、低代码系统下如何实现内外系统交互引入低代码平台后，我们开始着眼于实际业务场景，实现低代码开发平台。核心问题和解决方案。这里笔者以H5-Dooring为例，先来看Dooring的操作界面：我们在使用可视化平台的时候，除了要满足展示页面的设计需求外，还需要和企业自身的业务进行对接，比如比如如何实现跨系统交互，如何实现基础元素的交互能力，如何植入外部API让数据流向企业等。这些需求对应的实际场景如下：app需要与app集成端到端的通信，而不是简单的展示网页，需要实现用户操作的基本交互能力，如跳转链接、打开弹窗等由服务端配置的形式企业。在外部收集数据的时候，我希望流入我内部的系统进行数据收集和分析。针对以上场景，H5-dooring中会给出相应的解决方案。3.1网页嵌入app与app端通信要实现与外部容器的通信，必须要有自定义编码的能力，即作者使用LowCode而不是noCode的原因有很多具体的实现方式，比如就像使用流行的代码编辑插件react-codemirror2或react-monaco-editor一样。其次要解决的是哪些组件需要具备这种交互能力，显然是我们的Button组件效果如下：这样我们就可以实现真正的代码自治和跨容器通信。至于react-codemirror2的使用，笔者简单写了一个demo供大家参考：import{ControlledasCodeMirror}from'react-codemirror2';require('codemirror/mode/javascript/javascript');{this.setState({value});}}onChange={(editor,data,value)=>{}}/>当然，它的内部支持比较多，有兴趣的可以研究一下。作者还基于它实现了一个简单的代码编辑器。你可以研究它。3.2页面元素实现用户操作的基本交互能力，如跳转链接、打开弹窗基本上，任何可视化平台都会提供一定程度的交互能力。这些交互通常绑定到交互式组件，例如按钮和链接。在这里，笔者给大家展示一下在Button（按钮）组件中的应用：以上是3种常见的交互方式，即：跳转链接打开弹窗，自定义弹窗内容。自定义交互功能。因为上面笔者已经介绍了第三种方式，这里重点介绍弹窗交互。一般的弹窗交互可能是支持的弹窗内容如下：图片文字提示的形式有很多种图片文字提示形式。如果我们在实现中需要一次性实现这些组件，工作量会非常大，所以作者在这里设计了一种一劳永逸的方法——富文本编辑器。作者提供了一个富文本编辑器，可以让用户自定义任意内容形式，如下图：手机端效果如下：要实现这个交互，需要定义交互的json-schema，这里是笔者在之前的文章中也对H5-dooring的具体实现进行了剖析。这里就不一一介绍了。我们主要看富文本编辑器。这里我推荐两个：在收集数据的时候，希望能流入到我内部的系统中，进行数据收集和分析。对于交互式应用程序，数据跟踪和分析能力是一个比较重要的部分。还有很多表单问卷工具，H5-Dooring也提供了表单问卷整合。解决方案，用户可以在平台上构建自定义问卷，收集和分析数据。对于有私域需求的用户，他们希望表单中的数据能够流到他们的内部系统，自己去分析，所以理论上我们也应该提供这种开发接口给用户使用。在表单设计中，作者暴露了api接口来实现这个需求：如果用户提供了api接口，页面会自动提交到api指定的地址。处理，用户只需提供相应的跨域接口即可。代码实现如下：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)}那么，今天又涨知识了吗？最后上面的教程作者已经集成到H5-Dooring中了。对于一些比较复杂的交互功能，也可以通过合理的设计来实现。可以自行探索研究github地址：H5编辑器H5-Dooring