TinyEngine 开源低代码引擎首次直播答疑QA合集

前言

10月27日晚8点，OpenTiny 社区开启了 TinyEngine 开源低代码引擎首次答疑直播，本次直播我们通过收集开发者诉求，精心策划和组织了内容，希望提供给大家最明确和清晰的答疑方式。这是 TinyEngine 低代码引擎直播计划的开端，也是打开了 TinyEngine 低代码引擎与开发者沟通交流的新途径。

在本次直播活动中，我们为大家介绍了 TinyEngine 低代码引擎——使能开发者定制低代码平台。并就其基础功能类、代码原理解读类、功能增强类等问题都进入了深入的探讨和答疑。现在，我们梳理了本次直播的关键内容。

TinyEngine 简介

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过下载源码进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。

核心亮点：

  • 可以定制开发低代码平台: 支持在线实时构建,支持二次开发或被集成
  • 支持生成源码部署: 直接生成可部署的源码,运行时无需引擎支撑
  • 开放协议接口：允许接入第三方组件，允许定制扩展插件
  • 支持高低混合开发：支持高代码与低代码，混合开发部署应用
  • 支持 AI 辅助开发：平台接入AI 大模型能力，辅助开发者构建应用

Q&A合集

基础功能使用类：

问题1：如何使用第三方组件库？

答：详情可以查看官网使用手册

问题2：如何使用插槽？

答：详情可以查看官网使用手册

问题3：通过 TinyEngine 低代码引擎生成代码到本地时，如何将生成的源码页面独立放置在自己的项目中，提供example?

当前我们的出码结果依赖官方出码模板，暂时无法放置在自己项目中独立运行

第一步：下载 https://github.com/opentiny/tiny-engine-generate-preview 工程，解压

第二步：将代码下载到解压好的文件夹中（提示选择文件夹的时候，选择我们解压出来的文件夹）

第三步：用代码编辑器打开文件夹，确认出码结果，安装依赖并运行 npm run dev 启动服务，查看效果

后续相关的规划：

  • 支持开发插件，自定义出码结果
  • 支持自定义工程模板，结合自定义出码结果，可以无缝在自身项目中运行

问题4：怎样在 TinyEngine 低代码引擎中扩展左侧组件，比如创建用户、单位选择。在 form 表单里面使用，拖入这2个控件，可以弹出 dialog 框选择用户和单位，点击确定后回填到表单上 input 框上？

答：如果是想从零搭建业务组件，可以查看官方的文档教程尝试一步一步搭建（目前使用手册已更新）

如果是已有的业务组件，可以尝试通过导入第三方组件库的方式导入到左侧物料中。

问题5：分析下 TinyEngine 低代码引擎中左侧组件、中间区域渲染和右侧组件属性的代码在整体上协调一致的思路？

答：先简要介绍一下我们工程中主要的 package：

packages
  |_ canvas  负责中间画布渲染
  |_ common  公共的组件以及 metaComponent 
  |_ controller  公共逻辑控制层
  |_ design-core 总入口
  |_ http  负责 http 相关请求
  |_ i18n lowcode-i18n 包裹层
  |_ plugins  左侧面板相关插件
  |_ settings 右侧设置面板相关组件
  |_ svgs svg 封装组件
  |_ theme  主题相关样式
  |_ toolbars 顶部工具栏相关 package
  |_ utils 公共utils
  |_ vue-generator 出码package
  |_ webcomponent webcomponent 封装

区域大致职责划分：

  • 左侧面板相关的范围：负责设置一些应用状态、页面状态、以及逻辑的控制、编写
  • 中间画布：负责视图层的编排
  • 右侧属性面板：负责视图层的属性控制、样式精细编排、事件绑定等属性相关

主要的功能入口：

1、资源请求

// packages/design-core/src/App.vue
// 这里发起请求物料、请求数据源、请求页面等相关资源请求，很关键
useResource().fetchResource()

2、画布渲染相关入口

packages
  |_ canvas
    |_ src
      |_ components
        |_ render
          |_ runner.js # 用于画布相关的资源请求，预设
          |_ RenderMain.js # 画布渲染的入口，同时也暴露了许多 api 供修改 schema
          |_ render.js # RenderMain.js 会调用该文件的 renderer 方法，递归渲染 schema

3、画布选中后，如何关联渲染右侧属性面板？

// DesignCanvas.vue

// 画布中节点选中后，会触发该方法
const nodeSelected = (node, parent, type) => {
  const { toolbars } = useLayout().layoutState
  if (type !== 'clickTree') {
    useLayout().closePlugin()
  }
  // 动态计算该方法需要渲染的 属性面板
  useProperties().getProps(node, parent)
  // 设置当前 schema
  useCanvas().setCurrentSchema(node)
  footData.value = getNodePath(node?.id)
  toolbars.visiblePopover = false
}

// settings/props/src/Main.vue
<template>
<!-- 在属性面板渲染设置属性的入口 -->>
<config-render :data="properties">
  <template #prefix="{ data }">
    <block-link-field v-if="isBlock" :data="data"></block-link-field>
  </template>
</config-render>
</template>

<script>
// 选中之后，经过 getProps 的计算，我们会得到 properties，渲染在属性面板
const { properties } = useProperty({ pageState })
</script>

上面就是一些简单的入口简介，后续，我们会增加更多详细的架构原理、功能设计相关的文档，敬请期待

问题6：TinyEngine 低代码引擎是否提供排版组件，怎么实现灵活排版？

答：我们目前有内置的排版组件——行列容器，可以通过简单的剪切方式实现轻松的 flex 布局。

问题7：在使用 TinyEngine 低代码引擎时，组件内的静态资源（图片或者音频）如何引用？

答：这个问题要分多种情况讨论，

设计器开发： 可以拉下来源代码，按照原来静态资源图片等分类，放置进去要用的图片，在开发设计器的时候可以直接使用。

页面运行态： 可以通过 标签选中你要的静态资源，这部分的逻辑完全取决于用户

页面设计态： 低代码引擎在开源之前是有这样的功能的，但是为了开源的合规，屏蔽了该功能。因为在设计态想用到静态资源的话，要选中静态资源，并上传到公司的文件管理系统，然后文件系统返回静态资源地址，然后再展示在画布中。如果用户想要这样的功能，只需要开发一个文件上传按钮，并把上传的内容放置用户的文件管理系统。

问题8：修改 TinyEngine 低代码引擎的物料描述文件 bundle.json 之后，无变化是什么原因？

答：可以关注一下以下 bundle.json 这个文件的设置是否正确，尤其是 widget.component 这个字段

以下为 bundle.json 这个文件的节选：

{ "property": "text",
    "label": {
      "text": {
        "zh_CN": "按钮名称",
        "en_US": "Button Name"
       }
    },
    "required": true,
     "readOnly": false,
     "disabled": false,
     "cols": 12,
     "widget": {
       "component": "MetaBindI18n",
       "props": {}
      },
     "description": {
         "zh_CN": "按钮名称",
         "en_US": "Name of the button."
       }
   }

问题9：在使用 TinyEngine 低代码引擎后，组件之间应该如何联动？

答：实现的方式是多种的，

方式一：假如 A（输入框）与 B（显示框）联动，那么可以给 A 绑定一个 change 事件，直接影响 B的显示

方式二：给 B 绑定一个值，通过影响 B 的值，从而影响 B 的显示。

方式三：通过 watch 监听

除了以上基础功能及代码原理分析的解答，部分开发者对于功能增强拓展这部分的内容也是十分关注

问题1：如何将 TinyEngine 低代码引擎项目集成到 .net 项目中？

答：原来的.net 系统可以继续独立运行，当需要跳转到低代码系统时候。从原来的.net系统带出关键参数。如 projectId, itemId, processId 等，通过URL的传参形式：https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333。 跳转到低代码系统后，在代码系统初始化时候获取URL的参数，通过服务端API接口获取到相应的流程、页面、物料等等信息。通过低代码系统搭建页面会产生schema或者源代码，在点击保存按钮的时候可以把想要的产物保存回来原来的.net系统中。

问题2：Java 后端开源的规划？

答：目前服务端有两套源代码，一套技术栈是 node.js ，一套技术栈是 Java。因为要从公司流程流程审批、技术评估还有后面的迭代演进等维度考虑，目前还不知最终会开源哪种技术栈的服务端。大家敬请期待12月30号左右的公告

问题3：TinyEngine 低代码引擎是否会增加 typescript 支持？

答：目前暂不支持，后续有在规划增加 typescript 的支持，大家敬请期待

问题4：TinyEngine 低代码引擎是否提供商业版本或者商业上的技术支持？

答：目前只有一个开源版本的代码，没有商业版本。至于商业技术上的支持，可以找到 OpenTiny 的小助手沟通，详细沟通一下贵司具体需要的商业支持。

问题5：后续是否会继续迭代 AI 能力？

答：AI 能力目前已经在 TinyEngine 官网部署，当前采用的大模型是文心一言，通过 AI生成代码->生成 AST->页面 schema->展示在页面->下载源代码 ，后续会切回华为的盘古大模型。现在 AI 能力的取决于文心一言生成的代码。同时我们也通过数据和资源的不断投入在持续训练我们的 AI 能力，大家敬请期待 AI 能力的持续迭代。

问题6：TinyEngine 低代码引擎是否支持 nuxt.js 作为后端的开发？

答：后端的开发与技术栈无关，是可以采用任意的技术栈的。我们提供了所有后端接口的文档，只需要按照设计器的文档来，给出对应接口的出入参即可。

问题7：目前 TinyEngine 低代码引擎的物料平台是否会开源？

答：TinyEngine 目前是用到的物料是已开源的 TinyVue 组件库，欢迎大家使用~

关于 OpenTiny

图片

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架的UI组件库，适配 PC 端 / 移动端等多端，支持 Vue2 / Vue3 / Angular 多技术栈，拥有灵活扩展的低代码引擎，包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：https://opentiny.design/

OpenTiny 代码仓库：https://github.com/opentiny/

TinyVue 源码：https://github.com/opentiny/tiny-vue

TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/126431.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【大模型-第一篇】在阿里云上部署ChatGLM3

【大模型-第一篇】在阿里云上部署ChatGLM3

前言 好久没写博客了&#xff0c;最近大模型盛行&#xff0c;尤其是ChatGLM3上线&#xff0c;所以想部署试验一下。 本篇只是第一篇&#xff0c;仅仅只是部署而已&#xff0c;没有FINETUNE、没有Langchain更没有外挂知识库&#xff0c;所以从申请资源——>开通虚机——>…
阅读更多...
【中国知名企业高管团队】系列63：青岛啤酒

【中国知名企业高管团队】系列63：青岛啤酒

前两天介绍了总部位于青岛的中国以家电起家的两个巨头——海尔、海信。今天介绍总部位于青岛的另一个知名企业&#xff0c;而且最近被“一泡尿”送上风口浪尖带来巨大损失的青岛啤酒。 一、认识青岛啤酒 爱喝酒的读者朋友&#xff1f;说到全国性的啤酒品牌你会想到哪个&#…
阅读更多...
使用VSCODE链接Anaconda

使用VSCODE链接Anaconda

打代码还是在VSCODE里得劲 所以得想个办法在VSCODE里运行py文件 一开始在插件商店寻找插件 但是没有发现什么有效果的 幸运的是VSCODE支持自己选择Python的解释器 打开VSCODE 按住CtrlShiftP 输入Select Interpreter 如果电脑已经安装上了Python的环境 VSCODE会默认选择普通…
阅读更多...
算法之路（一）

算法之路（一）

&#x1f58a;作者 : D. Star. &#x1f4d8;专栏 :算法小能手 &#x1f606;今日分享 : 如何学习&#xff1f; 在学习的过程中&#xff0c;不仅要知道如何学习&#xff0c;还要知道避免学习的陷阱。1. 睡眠不足&#xff1b;2. 被动学习和重读&#xff1b;3. 强调标记或画线&am…
阅读更多...
基于讯飞星火大语言模型开发的智能插件：小策问答

基于讯飞星火大语言模型开发的智能插件：小策问答

星火大语言模型是一种基于深度学习的自然语言处理技术&#xff0c;它能够理解和生成人类语言。这种模型的训练过程涉及到大量的数据和复杂的算法&#xff0c;但最终的目标是让机器能够像人一样理解和使用语言。 小策问答是一款基于星火大语言模型的定制化GPT插件小工具。它的主…
阅读更多...
电脑硬盘数据恢复哪个好？值得考虑的 8 个硬盘恢复软件解决方案

电脑硬盘数据恢复哪个好？值得考虑的 8 个硬盘恢复软件解决方案

借助硬盘恢复软件&#xff0c;任何人都可以在家中恢复丢失的文件&#xff0c;而无需任何特殊技能。事实上&#xff0c;最困难的一步是选择最佳解决方案&#xff0c;因为可用选项的数量可能有点多。幸运的是&#xff0c;这篇文章可以为您提供帮助。 8 款顶级硬盘数据恢复软件解决…
阅读更多...
Spring Cloud和Kubernetes + Spring Boot 用哪个？

Spring Cloud和Kubernetes + Spring Boot 用哪个？

Spring Cloud和Kubernetes Spring Boot都是用于构建微服务架构的解决方案&#xff0c;它们各有优势和不足&#xff0c;选择哪个更好取决于你的具体需求和上下文。 Spring Cloud是一个基于Spring Boot的微服务开发框架&#xff0c;它提供了一套完整的微服务解决方案&#xff0…
阅读更多...
【Java】I/O流—缓冲流的基础入门和文件拷贝的实战应用

【Java】I/O流—缓冲流的基础入门和文件拷贝的实战应用

&#x1f33a;个人主页&#xff1a;Dawn黎明开始 &#x1f380;系列专栏&#xff1a;Java ⭐每日一句&#xff1a;你能坚持到什么程度&#xff0c;决定你能达到什么高度 &#x1f4e2;欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 文章目录 一.&…
阅读更多...
2023.11.7 Spring 依赖注入的三大方式

2023.11.7 Spring 依赖注入的三大方式

目录 前言 属性注入&#xff08;Autowired&#xff09; Setter 注入 构造方法注入 Resource Autowired 和 Resource 的区别 Autowired 和 Resource 查找 Bean 对象的区别 前言 配置文件 ​ <?xml version"1.0" encoding"UTF-8"?> <beans …
阅读更多...
kafka微服务学习

kafka微服务学习

消息中间件对比&#xff1a; 1、吞吐、可靠性、性能 Kafka安装 Kafka对于zookeeper是强依赖&#xff0c;保存kafka相关的节点数据&#xff0c;所以安装Kafka之前必须先安装zookeeper Docker安装zookeeper 下载镜像&#xff1a; docker pull zookeeper:3.4.14创建容器 do…
阅读更多...
【Redis缓存架构实战常见问题剖析】

【Redis缓存架构实战常见问题剖析】

文章目录 一、Redis缓存架构实战剖析1.1、大规模的商品缓存数据冷热分离机制1.2、缓存击穿导致线上数据压力暴增解决方案1.3、缓存穿透及其解决方案剖析1.4、突发性的热点缓存数重建导致系统压力暴增问题分析1.5、Redis分布式锁解决缓存与数据库双写不一致问题剖析1.6、利用多级…
阅读更多...
Python机器学习算法入门教程（第四部分）

Python机器学习算法入门教程（第四部分）

接着Python机器学习算法入门教程&#xff08;第三部分&#xff09;&#xff0c;继续展开描述。 十九、信息熵是什么 通过前两节的学习&#xff0c;我们对于决策树算法有了大体的认识&#xff0c;本节我们将从数学角度解析如何选择合适的“特征做为判别条件”&#xff0c;这里…
阅读更多...
微服务 Spring Cloud 5，一图说透Spring Cloud微服务架构

微服务 Spring Cloud 5，一图说透Spring Cloud微服务架构

目录 一、域名系统DNS二、LVS&#xff08;Linux Virtual Server&#xff09;,Linux虚拟服务器三、CDN静态资源四、Nginx反向代理服务器1、Nginx的主要作用体现在以下几个方面&#xff1a;2、Nginx静态资源服务和CDN静态资源服务&#xff0c;如何选择&#xff1f; 五、Gateway网…
阅读更多...
C#上位机序列10: Winform上位机通用框架

C#上位机序列10: Winform上位机通用框架

C#上位机序列1: 多线程&#xff08;线程同步&#xff0c;事件触发&#xff0c;信号量&#xff0c;互斥锁&#xff0c;共享内存&#xff0c;消息队列&#xff09; C#上位机序列2: 同步异步(async、await) C#上位机序列3: 流程控制&#xff08;串行&#xff0c;并行&#xff0c…
阅读更多...
Panorama SCADA平台的警报通知功能配置详解

Panorama SCADA平台的警报通知功能配置详解

1. 前言 SCADA系统的主要目标是采集与监控工业过程数据&#xff0c;以确保工业生产正常运行。通过实时警报通知功能&#xff0c;操作人员可以立即获取有关潜在问题的信息&#xff0c;从而能够快速采取行动解决问题&#xff0c;防止进一步的损害或生产中断。因此&#xff0c;及…
阅读更多...
三相电机的某些实测特性曲线

三相电机的某些实测特性曲线

三相电机参数&#xff1a; 0.75KW&#xff0c;额定电流是2A&#xff0c;功率因数0.71&#xff0c;效率78.9%。制式S1. 1.负载不变时的线电压与线电流的关系 1.1相关数据与python代码&#xff1a; 这里记录了一系列的实验&#xff1a; 第一组实验&#xff1a;近乎空载&#xf…
阅读更多...
企业微信开启接收消息+验证URL有效性

企业微信开启接收消息+验证URL有效性

企业微信开启接收消息验证URL有效性 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对…
阅读更多...
[Framework] Android Handler 工作原理

[Framework] Android Handler 工作原理

作者&#xff1a;Tans5 Android 中的 Handler 都被人说烂了&#xff0c;但是还是想多说一次&#xff0c;因为在 Android 的系统中它真的非常重要而且它的机制并没有很复杂&#xff0c;无论是新手和老手都可以好好学习下&#xff0c;这对理解 Android 系统很重要&#xff0c;所以…
阅读更多...
如何进行网站测试

如何进行网站测试

随着市场和技术的快速发展&#xff0c;产品需要不断更新和改进以保持竞争力&#xff0c;如果产品停滞不前&#xff0c;很可能会被市场淘汰。通过持续发展&#xff0c;企业可以不断优化产品&#xff0c;提高用户体验&#xff0c;从而赢得市场份额和客户忠诚度。而数通在激烈的市…
阅读更多...
计算机毕业设计项目选题推荐（免费领源码）Java+springboot+Mysql停车微信小程序小程序92714

计算机毕业设计项目选题推荐（免费领源码）Java+springboot+Mysql停车微信小程序小程序92714

摘 要 在信息飞速发展的今天&#xff0c;网络已成为人们重要的信息交流平台。每天都有大量的农产品需要通过网络发布&#xff0c;为此&#xff0c;本人开发了一个基于springboot停车微信小程序小程序。 对于本停车微信小程序的设计来说&#xff0c;它主要是采用后台采用java语…
阅读更多...
最新文章

Copyright @ 2022~2023