Environment Setup and Project Scaffolding

Plugins for the Android platform consist of two parts: the frontend and the backend. The frontend is responsible for page rendering and interaction, while the backend handles data storage and script generation.

Technology Stack

Frontend

• TypeScript / JavaScript
• Vue 2.6
• SCSS / CSS
• AUBO Design component library

Backend

• TypeScript
• Node.js

Development Environment

• Install Node.js with version >= 14.17.3 && <=24.19.0
• Any IDE that supports Node.js development, such as Visual Studio Code or WebStorm

Creating a Plugin

Make sure you have a compatible version of Node.js installed, then run the following command in the command line:

npm i -g @aubo/wcaps-builder

This globally installs a plugin builder on your computer. You can use this builder to create a plugin project, compile and package it. For example, use this command to create a plugin project. Before running it, make sure your current working directory is the directory where you intend to create the project.

wcaps-builder create

The creation process will ask:

Plugin name (kebab-case, e.g. my-plugin): <your-project-name>
Display name (default <your-project-name>):
Plugin description (default empty):
Author (default empty):
Email (default empty):
Website URL (default empty):
Version (default 0.1.0):
Single node / exclusive mode? (y/n):
Target directory (default ./example):
Auto install dependencies? (y/n):

The plugin name is used as a unique identifier and only supports English letters and non-special characters. A name that duplicates another plugin or a built-in node will cause loading errors. It is recommended to use the your-project-name format and name it based on the plugin's functionality. The display name can use any language and any characters. All of the above items can also be modified in package.json after the project is created.

The basic file structure of a plugin project is as follows:

├─ backend/
│  ├─ main.ts                     Fixed export file
│  ├─ webscope_cap.impl.ts        Entry file, backend implementation class
│  ├─ installation/               Configuration node class
│  └─ program/                    Program node class
├─ frontend/
│  ├─ public/                     Static files copied at build time
│  └─ src/
│     ├─ index.ts                 Entry file, frontend implementation class
│     ├─ installModules/          Configuration node pages
│     ├─ programModules/          Program node pages
│     ├─ globalModules/           Global components
│     ├─ assets/                  Resources such as images
│     └─ utils/globalConfig.ts    Plugin runtime information
├── babel.config.json
├── package.json
├── README.md
├── tsconfig.backend.json
├── tsconfig.frontend.json
└── vue.config.js

Install dependencies and complete the build and packaging with the following steps:

cd <your-project-name>
npm install
wcaps-builder build

This command creates an installation package <name>-<version>.zip for your plugin in the project root directory. For the steps to install the package into ARCS and run it, please refer to Plugin Loading and Unloading.

At this point you have completed the project scaffolding and can develop the plugin's specific logic next based on your requirements.

Modifying Plugin Information

The package.json in the plugin source serves both as the npm project configuration and as the source of plugin metadata:

{
  "name": "<your-project-name>",
  "displayName": "<any-word>",
  "version": "x.x.x",
  "description": "this is an example",
  "author": {
    "name": "Your Name",
    "email": "you@example.com"
  },
  "license": "aubo",
  "exclusive_mode": false,
  "dependencies": {},
  "devDependencies": {
    "@aubo/wcaps": "~0.4.0",
    "@aubo/wcaps-builder": "~0.4.0"
  }
}

Field descriptions:

Field	Description
name	Unique plugin identifier, recommended to use kebab-case format
displayName	Name displayed in the AuboStudio page
version	The plugin's own version, recommended to follow SemVer
exclusive_mode	When true, represents single-node mode
dependencies	Backend runtime dependencies, packaged into the install package at build time
devDependencies	Compilation, type and frontend dev dependencies, not packaged into the runtime dependency directory

Development rules to follow:

• Put purely build and type dependencies into devDependencies.
• Put third-party packages that the backend actually needs at runtime into dependencies.

Version Rules

• The builder generates the install package's api_version based on the versions of @aubo/wcaps and @aubo/aubo_design in devDependencies. AuboStudio performs compatibility checks during both installation and loading.
• The builder uses the version field in the plugin source's package.json as the version number of the install package. You can manage versions by updating this field.

Q&A

Q: What is single-node / exclusive mode?

A: It applies to scenarios where you do not use any built-in program nodes in AuboStudio to generate Lua scripts. A single-node plugin must have exactly one program node. After loading a "single-node" plugin, AuboStudio hides the "Program" page and replaces it with the plugin's program node page.