实操上手TinyEngine低代码引擎插件化开发

1.背景介绍

1.1 TinyEngine 低代码引擎简介

低代码开发是近些年非常热门的一种开发方式,用户可以通过可视化的方式,简单拖拽,不写代码或者编写少量代码,类似搭积木一样搭建业务应用。

TinyEngine是一个强大的低代码引擎,可以帮助开发者快速定制自己的低代码设计器或者低代码平台。

在这里插入图片描述

TinyEngine可以作为低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合使用,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发,如:资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。

TinyEngine 由OpenTiny 团队2023年开源,也欢迎大家点 Star 和 提Issue、PR 进行反馈。

  • TinyEngine 官网:https://opentiny.design/tiny-engine#/home
  • TinyEngine 在线demo:https://opentiny.design/tiny-engine#/tiny-engine-editor
  • TinyEngine 代码库:https://github.com/opentiny/tiny-engine

1.2 TinyEngine 插件化构建简介

在这里插入图片描述

TinyEngine引擎使用插件化架构,功能模块都由一个个插件构成,例如图片中页面上方的工具栏、左侧的插件栏、右侧的属性配置栏,以及中间的画布区域,都由一个个插件构成,通过插件化的架构,可以灵活配置、自由组装出个性化的设计器。

1.3 TinyEngine CLI简介

TinyEngine还提供了CLI工具方便用户二次开发,通过CLI,一行命令即可基于TinyEngine创建出全新的低代码项目、低代码插件项目,未来还会陆续增加创建设置器插件,创建新主题,新布局,新物料包等能力。

2. 实验介绍

本实验主要通过体验使用TinyEngine几行命令快速创建一个用户专属低代码设计器,及通过开发一个新的侧边栏插件, 帮助开发者快速了解基于TinyEngine二次开发定制的能力。

2.1 实验目标

  • 使用 TinyEngine CLI,通过一行命令创建全新低代码设计器,了解基于 TinyEngine 创建个性化低代码设计器/平台、二次开发的能力。
  • 体验 TinyEngine 简单拖拽、配置 的开发形式帮助开发者快速了解低代码开发使用流程。
  • 完成开发一个新的基础侧边栏插件,并集成到设计器中,了解基于 TinyEngine 扩展设计器功能的能力。

2.2 实验环境准备

在开始实验步骤之前,先确保我们的开发环境以及工具齐全:

  • Node.js v18+版本、pnpm 包管理工具。
  • vscode 代码编辑器、git 代码版本管理工具。
  • chrome浏览器 110+ 版本。
  • 必要的开发前端开发环境、工具等。

3. 实践步骤

3.1 一行命令创建自己的专属低代码设计器

3.1.1 创建低代码设计器

执行engine-cli create,选择platform以创建一个新的设计器

npx @opentiny/tiny-engine-cli@alpha create

执行后首次会提示是否安装@opentiny/tiny-engine-cli,输入“Y”并回车

之后会提示选择要创建类型,选择platform之后,输入设计器名称,如:lowcode-designer,即可完成新设计器项目的创建。

查看当前文件目录,看发现已经创建出了 lowcode-designer 代码目录。

在这里插入图片描述

3.1.2 启动低代码设计器

执行下面命令安装依赖并启动项目:

# 安装依赖
npm install  # 启动项目
npm run dev  

启动完项目之后,我们应该能看到浏览器打开的默认的低代码设计器:

在这里插入图片描述

3.1.3 体验低代码设计器

之后可以体验下低代码开发方式:

  • 拖拽物料面板中组件到中间画布中
  • 在右侧属性面板中修改属性值观察画布中的变化
  • 在画布中拖拽组件调整组件的布局与位置

在这里插入图片描述

3.2 通过开发插件扩展设计器新功能

3.2.1 一行命令创建新插件

另起一个终端,输入下面命令,选择创建plugin类型,创建一个新的插件

npx @opentiny/tiny-engine-cli@alpha create

在这里插入图片描述

输入插件名称:demo-plugin

之后就可以在demo-plugin目录看到新创建的插件,进去该目录安装依赖:

cd demo-plugin && npm install
3.2.2 将插件接入设计器

使用VS Code打开设计器项目,修改registry.js

import { Breadcrumb, Fullscreen, /* ... */, GenerateCodeService } from '@opentiny/tiny-engine'
import engineConfig from './engine.config'
++ import DemoPlugin from './demo-plugin'export default {// ...
--  plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],
++  plugins: [DemoPlugin, Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, State, Schema, Help, Robot],dsls: [{ id: 'engine.dsls.dslvue' }],settings: [Props, Styles, Events],canvas: Canvas
}
3.2.3 开发调试插件

重新打开项目页面,可以看到侧边栏多了一个新的插件:

在这里插入图片描述

修改插件代码,设计器界面也会实时刷新。

之后可以尝试完成以下功能:

  • 为插件实现一个“添加按钮”,点击按钮展开插件二级页面
  • 在二级面板中添加一个输入框,并实现保存功能,点击保存按钮将输入框内容显示到一级面板中

如此即完成了一个简单的TinyEngine侧边栏插件开发全流程。

4. 总结

本实践活动指导通过使用TinyEngine CLI创建一个全新设计器,上手体验低代码能力,并开发新的侧边栏插件扩展设计器能力,掌握基于TinyEngine定制设计器与插件的方式,了解TinyEngine的插件化架构与插件扩展能力。但实验中的部分只是TinyEngine扩展定制能力的一个缩影,TinyEngine提供了各种灵活的自定义能力,期待您的继续使用。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业博客SEO优化:8个必备工具与资源指南

在当今数字化时代,企业博客已远远超越了传统意义上的信息展示平台。它不仅是企业展示品牌形象、传递品牌价值的重要窗口,更是吸引潜在客户、增强用户粘性、提升网站流量和搜索引擎排名的关键。通过精心策划和高质量的内容创作,企业博客能够建…

ChatGPT4o、o1 谁才是最佳大模型?

如何选择合适的 ChatGPT 模型?OpenAI 更新细节与 GPTs 的深入解析 随着人工智能的发展,ChatGPT 已成为众多用户的强大助手,广泛应用于写作、编程、学习和商业等多个领域。然而,面对 OpenAI 提供的众多模型(如 GPT-4、…

idea中,git提交时忽略某些本地修改.将文件从git暂存区移除

我们有时候在本地调试代码时,某些配置文件需要修改成本地环境中。当改完后,需要提交代码时,这些文件又不能推到git上。如下图: 当出现这种情况,我们每次都需要手动去将不需要提交的文件的对号去掉。文件多了后&#x…

[Redis] 在Linux中安装Redis并连接图形化工具详细过程(附下载链接)

前言 安装Redis之前应该在虚拟机中安装Linux系统,这里使用centos7版本 [linux] 在VMware中安装linux、文件下载及详细安装过程(附下载链接)-CSDN博客 安装Linux后,更换yum源为阿里云并安装gcc依赖 [Linux] CentOS7替换yum源为阿…

Rust 语言持续崛起,即将冲击 TIOBE 指数前十,能否成为编程语言新王者?

Rust 语言持续崛起,即将冲击 TIOBE 指数前十,能否成为编程语言新王者? 2024 年 10 月,全球编程语言 TIOBE 排行榜再次更新,各大编程语言在各自领域中继续发挥着独特的优势。官方的标题是: Rust排名稳步攀升…

【代码随想录Day47】单调栈Part02

42. 接雨水 题目链接/文章讲解:代码随想录 视频讲解:单调栈,经典来袭!LeetCode:42.接雨水_哔哩哔哩_bilibili 思路概述 问题理解:我们需要计算在给定柱子高度之间可以接住的雨水总量。雨水的量取决于柱子的高度和它们…

PP-ChatOCRv3—文档场景信息抽取v3产线使用教程

文档场景信息抽取v3产线使用教程 1. 文档场景信息抽取v3产线介绍 文档场景信息抽取v3(PP-ChatOCRv3)是飞桨特色的文档和图像智能分析解决方案,结合了 LLM 和 OCR 技术,一站式解决版面分析、生僻字、多页 pdf、表格、印章识别等常…

有同学问:拿到大厂JAVA OFFER,但是会不会不稳定,有失业风险?!

昨天在直播里面有一个同学说拿到了大厂的offer,但是最近看了很多很多的报道,说大厂Java会不会也失业? 前两天也有家长私信咨询说孩子去了外企,拿着23K的工资,会不会也不稳定? 现在很多同学看了新闻报道或…

热门解压短视频素材资源网站推荐

解压短视频素材哪里找?今天我们来盘点一些优质的解压短视频素材下载平台。如果你也在寻找热门解压视频素材,这份资源清单一定能帮到你~ 蛙学网 蛙学网是国内领先的视频素材网站,涵盖了各种类型的解压视频资源,如手艺制…

【专题】计算机网络之物理层

计算机网络体系结构: 1. 物理层的基本概念 物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒体。 作用:尽可能屏蔽掉不同传输媒体和通信手段的差异。 用于物理层的协议也常称为物理层规程 (procedu…

【HarmonyOS NEXT】实现保存base64图片到图库

上篇文章介绍了HarmonyOS NEXT如何保存base64文件到download目录下,本次介绍如何保存base64图片到图库,网络图片保存方式大同小异,先下载图片,然后再保存 phAccessHelper.showAssetsCreationDialog参考官方文档’ ohos.file.pho…

利用透视变换实现文档矫正功能

透视变换是将成像投影到一个新的平面上,也称作投影映射。OpenCV通过函数cv2.getPerspectiveTransorm(pos1,pos2)构造矩阵M,其中pos1和pos2分别表示变换前后4个点的对应位置。得到M后再通过函数cv2.warpPerspective(src,M,(cols,rows))进行透视变换。 函数…

Threejs 实现3D 地图(02)创建3d 地图

"d3": "^7.9.0", "three": "^0.169.0", "vue": "^3.5.10" 地图数据来源&#xff1a; DataV.GeoAtlas地理小工具系列 <script setup> import {onMounted, ref} from vue import * as THREE from three im…

空间单细胞转录组cell2location分析流程学习

Cell2location 是一个用于空间转录组学数据分析的工具。它是一个基于贝叶斯统计模型的Python包&#xff0c;旨在利用空间转录组数据和单细胞转录组数据来进行细胞类型的空间解构。通过将单细胞转录组数据中的细胞类型信息投射到空间转录组数据中&#xff0c;Cell2location 可以…

如何应对 Android 面试官 -> ANR 如何优化?线上 ANR 如何监控?

前言 本章主要围绕 ANR 如何监控以及优化&#xff1b; 基本概念 ANR(Android Not Responding) 是指应用程序未响应&#xff0c;Android 系统对于一些事件需要在一定的时间范围内完成&#xff0c;如果超过预订时间未能得到有效响应或者响应时间过长&#xff0c;都会造成 ANR。 …

SAP_MM模块-设置业务合作伙伴类型字段必输(多种方案)

一、业务背景 公司需要把供应商增加一个细分的维度&#xff0c;并且要求该字段设置为必输&#xff0c;防止用户新增供应商时忘记维护。这里给用户找了一个分类的字段&#xff1a;业务合作伙伴类型&#xff0c;本文主要讲解如何设置该字段设置为必填&#xff1b; 注意&#xff…

[笔记] 关于CreateProcessWithLogonW函数创建进程

函数介绍 https://learn.microsoft.com/zh-cn/windows/win32/api/winbase/nf-winbase-createprocesswithlogonw BOOL CreateProcessWithLogonW([in] LPCWSTR lpUsername,[in, optional] LPCWSTR lpDomain,[in] …

【MySQL】表的约束、基本查询、内置函数

目录 1. 表的约束1.1 空属性1.2 默认值1.3 列描述1.4 zerofill1.5 主键1.6 自增长1.7 唯一键1.8 外键 2. 基本查询2.1 表的增删改查2.1.1 插入数据2.1.2 插入否则更新2.1.3 替换插入 2.2 Retrieve2.2.1 select ----- 查询2.2.2 where ----- 筛选2.2.3 order by ----- 结果排序2…

C++11——基础新增特性

目录 C11介绍统一的列表初始化对内置类型initializer_list 声明autodecltypenullptr 范围for容器新增接口emplace容器的新方法 C的前身是“C with Classes”&#xff0c; 最早于 1979年由 祖师爷Bjarne Stroustrup&#xff08;本贾尼斯特劳斯特鲁普&#xff09; 在贝尔实验室…

#HarmonyOS:页面和自定义组件生命周期

页面生命周期 即被Entry装饰的组件生命周期 onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide: 页面每次隐藏时触发一次&#xff0c;包括路由过程、应用进入后台等场景。onBackPress: 当用户点击返回按钮是触发 组件…