Skip to main content

Development

Overview​

After creating the plugin project, you also need to specify a debugging environment to host your plugin. At this point, you need to log in to ONES to debug the plugin code.

When using the ONES CLI to create a feature, the tool automatically includes the plugin development scaffolding tool op. This tool can guide you through logging into the ONES system, selecting a team, and starting the local front-end and back-end services for the plugin.

Please upgrade to the latest version of the scaffolding tool op as much as possible to ensure the best experience.

Debugging Principle The essence of debugging is to start the front-end service (webpack-dev-server) and back-end service (node-host) on the local machine to load and run the front-end and back-end code of the plugin. After starting, you need to use the credentials obtained from logging into ONES in advance to communicate with the ONES system.

Front-end service webpack-dev-server: A tool for rapid application development that provides a basic web server, supporting live reloading and Hot Module Replacement (HMR). Back-end service node-host: A Node.js-based host program provided by the ONES open platform.

Usage​

Step 1: Log in debugging environment​

Execute the npx op login command in the root directory of the plugin project to log in, and enter the debugging environment information according to the prompts.

note

Glossary

  • base URL: The URL of the ONES debugging environment, which starts with http:// or https://. This address is the same as the one used to access ONES in the browser.
  • host URL: The debugging address of the open platform, which starts with tcp:// and has a default port of 30002. The middle part of the address depends on the network settings of the corresponding ONES deployment environment; it is recommended to use the IP address of the ONES server as the input address.
    • In the latest version, the input for this address has been removed; please follow the prompts from the op tool. :::
➜ npx op login
? Please enter the environment base URL: http://172.16.80.211:30011
? Username: test1@ones.com
? Password: [hidden]
? Please enter the environment host URL: tcp://172.16.80.211:30002
  ✔ Converting inputted answers to login params
  ✔ Fetching user profile
  ✔ Updating configuration into config/local.yaml
  ✔ Updating scope info into /Users/username/.ones/cli-plugin.yaml
✔ Login successful
? Do you want to execute 'npx op pickteam' for update team information into config file? (Y/n)

After the login operation is completed, the [user credentials] will be written to the config/local.yaml file under the project.

If you create a team level plugin, you will also be asked whether you need to execute the pickteam command for team selection. Of course, you can also manually execute npx op pickteam local after the login operation to make team selection.

note
  • After the team selection is completed, the platform will help you install a "under development" plugin under the corresponding team of the corresponding remote debugging environment.
  • If it is an organization level plugin, the platform installs the plugin in [Organization settings]-[Plugin management], which means that the plugin works for every team.

Step 2: Start local debugging​

After logging in and selecting the team, you can execute npx op invoke run under the project root directory to start local debugging.

➜ npx op invoke run
  ✔ Validating command options
  ✔ Validating config/local.yaml fields
  ✔ Checking ability relate module
  ✔ Updating min_system_version in plugin.yaml
  ✔ Building plugin project Back-End dist files
  ✔ Initializing the plugin project front-end development server
  ✔ Initializing the node-host params and invoke arguments
✔ Local debug parameters successfully initialized with target lifecycle: 'run'
Now starting dev server and node-host...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.15.3.38:3000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:3000/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/dev/ONES/open-platform/public' directory
Start the connection!
{
  action: 'run',
  email: 'test1@ones.com',
  password: '********',
  reinstall: false,
  webIp: '10.15.3.38',
  webPort: '3000',
  orgUUID: 'KuLvwHJz',
  teamUUID: 'RWqwp2L8',
  user_uuid: 'SFBs7BHh',
  webServiceUrl: '10.15.3.38:3000'
}
Local debug return value: {"instance_uuid":"1d99926e"}
[Plugin] Install
The plugin Install hook function runs successfully!
[Plugin] Enable
The plugin Enable hook function runs successfully!
Receive a message:  all done

Tunnel Exceptions​

In some cases, you may encounter output similar to the following:

Checking node-host available with request: https://all-emus-fix.loca.lt/healthz
Node-host available check failed, retry after 3s
Checking node-host available with request: https://all-emus-fix.loca.lt/healthz
Node-host available check failed, retry after 3s
Checking node-host available with request: https://all-emus-fix.loca.lt/healthz
Node-host available check failed, retry after 3s
Checking node-host available with request: https://all-emus-fix.loca.lt/healthz
Node-host available check failed, retry after 3s
  Host are not ready with url https://all-emus-fix.loca.lt, you can try to rerun the command:
    1.after a while
    2.use your self-defined tunnel url with option '--self-tunnel <endpoint>' provided by other tools

This is because the built-in open-source free tool localtunnel may have unstable network conditions. In this case, it is recommended to select a stable tunnel tool and use npx op invoke run --self-tunnel to set the tunnelURL provided by that tool.

Debugging Methods​

When your interface debugging shows unexpected results, you can refer to our provided Debugging method for single-step debugging to further locate the problem.

Interface Registration and instance_uuid​

The instance_uuid is a unique identifier for the plugin instance in the debugging ONES system, generated by the ONES system. It is not a fixed value.

In the interface registration scenario, the instance_uuid should be used to access the plugin interface. For details, see Interface Registration。.

Headers
{
  "Ones-Plugin-Id": "1d99926e", // instance_uuid
  "Ones-Check-Point": "team"
}
tip
  • **Ones-Plugin-Id：**the value of the corresponding instance_uuid in the "Local Debug return value" printed on the console after starting the debug environment
  • Ones-Check-Point：
    team level plugin：team
    organization level plugin：organization

Step 3: Clear debugging status​

Modify the configuration file​

If you modify the configuration file config/plugin.yaml of the plugin, you can run npx op invoke Clear and then rerun the npx op invoke run directive, so that the configuration will take effect.

Remove plugin in debugging​

If you want to remove the plugin displayed as "in debugging" in the remote debugging environment, you can run npx op invoke clear, and after seeing messages like Receive msg: all done, interrupt the current process (e.g., command + C). This will uninstall the debugging plugin from the remote debugging environment.

Last updated on by ones-dev-jenkins