This article was shared from Huawei Cloud CommunityHands-on TinyEngine low-code engine plug-in development., by OpenTiny.
1. Background
1.1 Introduction to TinyEngine low-code engine
Low-code development is a very popular development method in recent years, users can visualize the way, simple drag and drop, do not write code or write a small amount of code, similar to building blocks to build business applications.
TinyEngine is a powerful low-code engine that helps developers quickly customize their own low-code designer or low-code platform.
TinyEngine can be used as a base for low-code platforms, providing basic capabilities such as visualization to build pages, which can be used in combination with online, or through cli to create personal projects for secondary development, real-time customization of their own low-code platforms. It is suitable for multi-scenario low-code platform development, such as: resource orchestration, server-side rendering, model-driven, mobile, big screen, page orchestration and so on.
TinyEngine is open sourced by the OpenTiny team in 2023, and you are welcome to point Star and mention Issue, PR for feedback.
TinyEngine official website: /tiny-engine#/home
TinyEngine online demo: /tiny-engine#/tiny-engine-editor
TinyEngine code base:/opentiny/tiny-engine
1.2 Introduction to TinyEngine Pluginized Builds
TinyEngine engine using plug-in architecture , functional modules are composed of a plug-in , such as the picture of the page above the toolbar , the left side of the plug-in bar , the right side of the attribute configuration bar , as well as the middle of the canvas area , are composed of a plug-in , through the plug-in architecture , you can flexibly configure and freely assemble a personalized designer .
1.3 Introduction to the TinyEngine CLI
TinyEngine also provides a CLI tool to facilitate the secondary development of users , through the CLI, a line of command can be based on TinyEngine to create a new low-code project , low-code plug-in projects , the future will continue to increase the creation of the setter plug-ins , the creation of a new theme , a new layout , new material packages and other capabilities .
2. Introduction to the experiment
This experiment is mainly through the experience of using TinyEngine a few lines of command to quickly create a user-specific low-code designer, and through the development of a new sidebar plugin, to help developers quickly understand the ability to customize based on the secondary development of TinyEngine.
2.1 Experimental objectives
Use the TinyEngine CLI to create a new low-code designer with a single line of command, and learn about the ability to create personalized low-code designers/platforms and secondary development based on TinyEngine.
Experience TinyEngine's simple drag-and-drop, configurable development format that helps developers quickly understand the low-code development process.
Complete the development of a new base sidebar plugin to be integrated into the designer and learn about the ability to extend the functionality of the designer based on TinyEngine.
2.2 Preparation of experimental environment
Before starting the experimental steps, make sure we have a complete development environment as well as tools:
v18+ version, pnpm package management tool.
vscode code editor, git code versioning tool.
chrome version 110+.
Necessary development front-end development environment, tools, etc.
3. Practical steps
3.1 Create Your Own Low-Code Designer with One Line of Command
3.1.1 Creating a Low-Code Designer
Execute engine-cli create and select platform to create a new designer
npx @opentiny/tiny-engine-cli@alpha createAfter execution, you will be prompted for the first time whether to install@opentiny/tiny-engine-cliEnter "Y" and press ENTER.
After that, you will be prompted to select the type to be created, after selecting platform, enter the designer name, such as: lowcode-designer, you can complete the creation of the new designer project.
Check the current file directory to see that the lowcode-designer code directory has been created.
3.1.2 Starting the Low-Code Designer
Execute the following command to install the dependencies and start the project:
# Install dependencies
npm install
# Start the project
npm run devAfter starting the project, we should see the default low-code designer open in the browser:
3.1.3 Experience the Low-Code Designer
After that you can experience the low-code development approach:
Drag and drop components from the material panel to the center canvas.
Modify the property values in the right-hand properties panel to observe the changes in the canvas
Drag and drop components in the canvas to adjust the layout and position of the components.
3.2 Extending the designer with new features by developing plug-ins
3.2.1 Creating a new plug-in with one line of command
Start another terminal, enter the following command and select the create plugin type to create a new plugin
npx @opentiny/tiny-engine-cli@alpha create
Input plugin name: demo-plugin
After that you can see the newly created plugin in the demo-plugin directory, go in that directory and install the dependencies:
cd demo-plugin && npm install3.2.2 Plug-ins into the Designer
Open the designer project using VS Code and modify the
import { Breadcrumb, Fullscreen, /* ... */, GenerateCodeService } from '@opentiny/tiny-engine'
import engineConfig from './'
++ 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: '' }],
settings: [Props, Styles, Events],
canvas: Canvas
}3.2.3 Developing debugging plug-ins
Reopen the project page to see a new plugin in the sidebar:
Modify the plugin code and the designer interface will also be refreshed in real time.
After that you can try to complete the following functions:
Implement an "Add Button" for the plugin, click the button to expand the plugin's secondary page.
Add an input box in the secondary panel and implement the save function, click the save button to display the content of the input box to the primary panel
This completes the entire process of developing a simple TinyEngine sidebar plugin.
4. Summary
This hands-on activity guides the creation of a brand new designer through the use of TinyEngine CLI, hands-on experience of low-code capabilities, and the development of a new sidebar plugin to extend the designer capabilities, to master the way to customize the designer and plugin based on TinyEngine, and to understand the pluginization architecture and plugin extension capabilities of TinyEngine. But the part of the experiment is just a microcosm of TinyEngine extended customization capabilities, TinyEngine provides a variety of flexible customization capabilities, looking forward to your continued use.
5. About OpenTiny
OpenTiny official website: source code:/opentiny/tiny-vue (welcome) Star ⭐) TinyEngine source code:/opentiny/tiny-engine (welcome) Star ⭐) B station: /15284299 Welcome to join the OpenTiny open source community. Add wechat small assistant opentiny-official together to participate in the exchange of front-end technology ~!
Huawei Developer Space, which gathers development resources and tools from various root technologies such as Hongmeng, Rise, Kunpeng, GaussDB, and Euler, is committed to providing each developer with a cloud host, a set of development tools, and storage space on the cloud, so that developers can innovate based on Huawei's root ecosystem.
Click on the link to get your exclusive cloud hosting for free!