This topic describes how to use DataV to develop widgets.
Prepare an environment
- Go to the official website of Node.js and download and install Node.js. We recommend that you install Node.js of a version
that ranges from 8.0.0 to 10.12.0.
Note We recommend that you use Node Version Manager (NVM) to manage multiple Node.js versions. If you use NVM, you can install another version of Node.js without the need to uninstall the existing version. To install NVM, visit GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions.
- After you install NVM, run the
npm -vcommands in the macOS Terminal or Windows Command Prompt to view the Node.js and npm versions.
- Run the following command in the macOS Terminal or Windows Command Prompt to install
npm install datav-cli -g
- After DataV is installed, run the
datav --versioncommand to view the version of DataV.
Set the language
The default language of DataV is
English. You can run the
datav locale command in the macOS Terminal or Windows Command Prompt to change the language.
After you run the command, the following result is returned:
? What is your language? (Use arrow keys) > English Chinese Japanese
Press the ↑ and ↓ arrow keys to select a language and press Enter.
If you want the language to change based on the region of your Alibaba Cloud account,
log on to the DataV developer console and run the
datav locale-clear | datav lc command to clear the language settings. Then, you can set the language again.
Log on to the DataV developer console
datav logincommand in the macOS Terminal or Windows Command Prompt to log on to the DataV developer console. After you run the command, specify the parameters described in the following table.
||Enter your username that is displayed in the upper-right corner of the DataV console. If you are a RAM user, enter the username of the Alibaba Cloud account to which your RAM user belongs.|
||Enter the developer token that is obtained from the Widgets tab in the DataV console.|
||Press Y or N.|
||Enter an alias.|
Generate a widget package
datav initcommand in the macOS Terminal or Windows Command Prompt to generate a widget package. After you run this command, enter the information provided in the following table.
||The name of the widget. It can contain letters, digits, and hyphens (-).|
||The name that you want to display for the widget in the widget list of a project.|
||The description of the widget.|
||The template that you want to use for the widget. Valid values:
Press the ↑ and ↓ arrow keys to select a template and press Enter.
Preview a widget
cd <Widget name> datav run
- If Google Chrome does not open automatically, you may not have installed it. We recommend that you install Google Chrome and manually access localhost:1111/ to preview the widget.
- If a message appears, indicating that a service is activated on port 1111, this port
may be occupied by another application. You can run the
datav run -p 1112command to change the preview service port to 1112.
- If you access localhost:1111/ but the preview of the widget is not displayed, check whether you have mapped localhost to 127.0.0.1 in the hosts file. If the mapping exists, you can access 127.0.0.1:1111/ to preview the widget.
- The canvas displays the widget and all changes to the widget in real time.
- Widget settings and data changes on the right-side panel are shown on the canvas.
- You can drag and drop the borders to resize the widget.
- Bottom toolbar
You can change the language of the widget.
- Right-side panel
The right-side panel consists of four tabs: Settings, Data, Interaction, and Publish.
Tab Description Settings This tab contains the style settings of the widget. If you change the settings, the changes take effect immediately on the canvas. For example, if you adjust the font size slider, the font size of the text in the widget changes immediately. Click Save to save the current settings as default for a widget. Data This tab provides the API data of the widget. If you update the data of a widget on this tab, the widget on the canvas changes immediately. Click Save to save the current data as default for the widget. Interaction This tab provides information related to widget interactions. Publish This tab provides the type, icon, and publish version of the widget. Click Publish in the upper-right corner of this tab to publish the widget.
Publish a widget
- Method 1 (recommended)
Go to the directory of the widget and run the datav publish command. The widget is compressed into a package and published to a server in the same region as your Alibaba Cloud account.
- Method 2
Go to the directory of the widget and run the datav package command. A tar.gz package named in the format of
Widget name-Version numberis generated in the parent directory. Upload the package to datav.aliyun.com to publish the widget.
- Method 3
On the widget preview page, click Publish.