opentiny/tiny-engine

✨Q&A：常见问题答疑

Opened this issue · 5 comments

wenmine commented

直播答疑视频链接

基础功能使用类问题

问题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：

  |_ 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 低代码引擎时，组件内的静态资源（图片或者音频）如何引用？

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

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

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

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

问题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 监听

问题10：使用tiny-engine下载源码到本地时，接口报错

答：参照此issue #30 解决

功能增强拓展类问题

问题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 组件库，欢迎大家使用~

Issues-translate-bot commented

Bot detected the issue body's language is not English, translate it automatically.

Title: ✨Q&A: Frequently Asked Questions

What problem does this feature solve

Live Q&A video link

#Basic function usage issues

Question 1: How to use third-party component libraries?

Answer: For details, please see How to introduce third-party component libraries in the designer

Question 2: How to use the slot?

Answer: For details, please see Slot Declaration and Usage

Question 3: When generating code locally through the TinyEngine low-code engine, how to place the generated source code page independently in its own project, provide an example?

Currently, our coding results rely on the official coding template and cannot be placed in our own project to run independently for the time being.

Step 1: Download the https://github.com/opentiny/tiny-engine-generate-preview project and unzip it
Step 2: Download the code into the unzipped folder (when prompted to select a folder, select the folder we unzipped)
Step 3: Open the folder with a code editor, confirm the coding results, install dependencies and run npm run dev to start the service and check the effect.
Follow-up related plans:

  • Support the development of plug-ins to customize the coding results
  • Supports custom project templates, combined with custom coding results, can be seamlessly run in your own projects

Question 4: How to extend the left-hand component in the TinyEngine low-code engine, such as creating users and unit selection. Use it in the form. Drag these two controls and the dialog box will pop up to select the user and unit. Click OK and then backfill it to the input box on the form?

Answer: If you want to build business components from scratch, you can check the official documentation tutorial and try to build it step by step (the current user manual has been updated)
If it is an existing business component, you can try to import it into the material on the left by importing a third-party component library.

Question 5: Analyze the overall coordination of the code for the left component, middle area rendering and right component properties in the TinyEngine low-code engine?

Answer: First, let’s briefly introduce the main packages in our project:

|_ canvas Responsible for intermediate canvas rendering
|_ common public components and metaComponent
|_ controller Public logic control layer
|_ design-core main entrance
|_ http is responsible for http related requests
|_ i18n lowcode-i18n wrapping layer
|_ plugins Related plug-ins on the left panel
|_ Settings Related components of the settings panel on the right
|_ svgs svg package component
|_ theme theme related styles
|_ toolbars Top toolbar related packages
|_ utils public utils
|_ vue-generator coding package
|_ webcomponent webcomponent package

Rough division of responsibilities by region:

  • Scope related to the left panel: Responsible for setting some application status, page status, and logic control and writing
  • Middle canvas: responsible for the arrangement of the view layer
  • Properties panel on the right: Responsible for property control of the view layer, fine arrangement of styles, event binding and other property-related properties

Main function entrance:

  1. Resource request
// packages/design-core/src/App.vue
// It is very important to initiate requests for materials, data sources, pages and other related resource requests here.
useResource().fetchResource()
  1. Entrance related to canvas rendering
packages
|_ canvas
|_ src
|_ components
|_ render
|_ runner.js # Used for canvas-related resource requests, default
                                                                                                                     
|_ render.js # RenderMain.js will call the renderer method of the file to recursively render the schema
  1. After the canvas is selected, how to associate and render the property panel on the right?
//DesignCanvas.vue

// This method will be triggered after the node in the canvas is selected.
const nodeSelected = (node, parent, type) => {
const { toolbars } = useLayout().layoutState
if (type !== 'clickTree') {
UseLayout().closePlugin()
}
// Dynamically calculate the property panel that this method needs to render
useProperties().getProps(node, parent)
//Set the current schema
useCanvas().setCurrentSchema(node)
footData.value = getNodePath(node?.id)
toolbars.visiblePopover = false
}
//settings/props/src/Main.vue
<template>
<!-- Entry to render and set properties in the properties panel -->
<config-render :data="properties">
<template #prefix="{ data }">
<block-link-field v-if="isBlock" :data="data"></block-link-field>
</template>
</config-render>
</template>

<script>
// After selection, after calculation of getProps, we will get the properties and render them in the properties panel
const { properties } = useProperty({ pageState })
</script>

The above are some simple entry introductions. In the future, we will add more detailed documents related to architectural principles and functional design, so stay tuned.

Question 6: Does the TinyEngine low-code engine provide typesetting components? How to achieve flexible typesetting?

Answer: We currently have a built-in layout component-column container, which can achieve easy flex layout through simple cutting.

Question 7: When using the TinyEngine low-code engine, how to reference the static resources (images or audio) in the component?

Answer: This issue needs to be discussed in various situations.

  • Designer development:
    You can pull down the source code, classify it according to the original static resource images, and place the images you want to use, which can be used directly when developing the designer.

  • Page running status:
    You can select the static resource you want through the tag. The logic of this part depends entirely on the user.

  • Page design status:
    The low-code engine had such a function before it was open source, but for the sake of open source compliance, this function was blocked. Because if you want to use static resources in the design state, you need to select the static resources and upload them to the company's file management system. Then the file system returns the static resource address and then displays it in the canvas. If the user wants such a function, they only need to develop a file upload button and place the uploaded content in the user's file management system.

Question 8: After modifying the material description file bundle.json of the TinyEngine low-code engine, why is there no change?

Answer: You can pay attention to whether the settings of the following bundle.json file are correct, especially the widget.component field.
The following is an excerpt from the bundle.json file:

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

Question 9: After using the TinyEngine low-code engine, how should components be linked?

Answer: There are many ways to achieve it.
Method 1: If A (input box) and B (display box) are linked, then you can bind a change event to A, which directly affects the display of B.
Method 2: Bind a value to B and affect the display of B by affecting the value of B.
Method 3: Monitor through watch

What does the proposed API look like

Function enhancement and expansion issues

Question 1: How to integrate the TinyEngine low-code engine project into a .net project?

Answer: The original .net system can continue to run independently when it is necessary to jump to a low-code system. Bring out key parameters from the original .net system. Such as projectId, itemId, processId, etc., through the parameter passing form of URL: https://xxxxxxxxxxx?projectId=1111&itemId=2222222&processId=33333333. After jumping to the low-code system, obtain the parameters of the URL when the code system is initialized, and obtain the corresponding process, page, material and other information through the server API interface. Building a page through a low-code system will generate schema or source code. When you click the save button, you can save the desired product back to the original .net system.

Question 2: What are the plans for open source Java backend?

Answer: Currently, the server has two sets of source codes, one technology stack is node.js, and the other technology stack is Java. Because it needs to be considered from the company process approval, technical evaluation, and subsequent iterative evolution, it is not yet known which technology stack server will eventually be open sourced. Please look forward to the announcement around December 30th

Question 3: Will TinyEngine low-code engine add typescript support?

Answer: It is not supported at the moment. We are planning to add typescript support in the future. Please stay tuned.

Question 4: Does the TinyEngine low-code engine provide a commercial version or commercial technical support?

Answer: Currently there is only one open source version of the code and no commercial version. As for commercial technical support, you can find OpenTiny’s assistant to communicate in detail about the specific commercial support your company needs.

Question 5: Will we continue to iterate on AI capabilities in the future?

Answer: AI capabilities have been deployed on the official website of TinyEngine. The large model currently used is Wen Xinyiyan. Code is generated through AI -> Generate AST -> Page schema -> Display on the page -> Download the source code. It will be switched back to Huawei in the future. The large model of Pangu. Currently, AI capabilities depend on the code generated by Wen Xinyiyan. At the same time, we are also continuing to train our AI capabilities through continuous investment in data and resources. Please look forward to the continued iteration of AI capabilities.

Question 6: Does TinyEngine low-code engine support nuxt.js as back-end development?

Answer: Back-end development has nothing to do with the technology stack, and any technology stack can be used. We provide documentation for all back-end interfaces. You only need to follow the designer's documentation and provide the input and output parameters of the corresponding interface.

Question 7: Will the current material platform of TinyEngine low-code engine be open source?

Answer: TinyEngine currently uses the open source TinyVue component library. Everyone is welcome to use it~

wenmine commented

问题： 本地执行pnpm dev启动，页面一直loading，进不去

答：
使用开发者工具看一下控制台是否产生报错，若报错如下：
GET https://npm.onmicrosoft.cn/@opentiny/vue-theme-3.11/index.css net::ERR ABORTED 403 (URLGolbalBlocked)

Access to script at "https://npm.onmicrosoft.cn/vue@3/dist/vue.runtime.esm-browser.js' from origin "http://127.0.0.1:888 127.0.0.1/:1g’ has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://npm.onmicrosoft.cn/vue@3/dist/vue.runtime.esm-browser.js net: :ERR_FAILED

解决方案：当前使用的cdn地址为："npm.onmicrosoft.cn"，这个地址用户的电脑可能访问不了，导致无法拿到我们依赖的组件库等内容，可尝试将npm.onmicrosoft.cn替换为unpkg.com，替换文件和位置如下：

packages/design-core/.env.development

image

packages/design-core/.env.prod

image

packages/blockToWebComponentTemplate/vite.config.js

image

在tiny-engine项目中，找到以上文件，把对应的字符串npm.onmicrosoft.cn替换为unpkg.com，替换后保存重新启动项目

FairyShuai commented

请问如何在页面中使用路由跳转

Issues-translate-bot commented

Bot detected the issue body's language is not English, translate it automatically.

How to use route jump in the page?

gzhidao1011 commented

关于setup外部变量 GC的问题
image