Prepare the environment
- Before getting started, you need to install Node.js by visiting the Node.js website. We recommend that you install Node.js version 8.0.0 or later (however, versions
no later than 10.12.0 is recommended).
Note If you have installed Node.js of another version and want to use it for other purposes, we recommend that you install NVM to manage your Node.js versions. With NVM, you can install a new version of Node.js without uninstalling the existing one. The installation address is as follows: GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions.
- After installing Node.js, run the
npm -vcommands in the Command Line Interface (CLI) to view the Node and NMP versions. (If you are using macOS, run the commands in terminal. If you are using Windows, run the commands in cmd.)
Install the SDK
- Run the following command to install the SDK: (If you are using macOS, run the command
in terminal. If you are using Windows, run the command in cmd.)
npm install --registry=https://registry.npm.taobao.org datav-cli -g
- After installing the SDK, run the
datav --versioncommand to view the SDK version.
Set the language
bash datav locale ? What is your language? [English\Chinese\Japanese]
If you want to automatically switch the language according to your account domain,
datav locale-clear | datav lc command after logging on to the DataV (Developer Edition) console.
You can also run the
datav locale command to reset the language.
Log on to the DataV (Developer Edition) console
datav login ? Username: [Enter your user name displayed on the upper-right corner of the DataV console. If you are using a RAM account, enter the user name of your Alibaba Cloud account.] ? Developer Token: [Enter the developer token obtained from the widget page in the DataV console.] ? Do you want to set an alias? (Y/n) ? Alias: [Enter an alias if necessary.] Configuration has been completed.
Generate a widget package
datav init ? Widget Name (It can contain letters, numbers, and hyphens (-). If the widget name you specified does not exist, a folder with the same name is created locally): [A widget name can only contain letters, numbers, and hyphens (-).] ? Widget Display Name: [The display name is the name of your widget in the widget list of a project.] ? Widget Description: ? Select Template from Widget Template List (Use arrow keys)
Preview a widget
cd Widget Name datav run
- If your browser does not open automatically, check whether you have installed Google Chrome. We recommend that you install Google Chrome and then manually open localhost:1111/ using the Chrome browser.
- If a port error is displayed, check whether port 1111 is occupied by other applications.
You can run the
datav run -p 1112command to initiate the widget preview service.
- If you have opened localhost:1111/ in your browser but no widget preview is displayed, check whether you have directed the localhost to 127.0.0.1 in the hosts file. You can also preview a widget by visiting 127.0.0.1:1111/ in your browser.
- The canvas is used to display changes of a widget.
- All the configuration and data modifications on the right-side toolbar are displayed on the widget in the canvas in real time.
- The widget border indicates the size of the widget container. You can resize the border to test the widget display.
- Right-side toolbar:
The right-side toolbar contains four panes: Configuration, Data, Interaction, and Publish.
- Configuration: The configuration pane allows you to configure key items for a widget as needed. The configuration takes effect immediately. For example, if you drag the slider on the right of Font Size, the font size of the displayed text will be changed. To save the configuration, click Save in the upper-right corner. The configuration will be saved as the default configuration.
- Data: The data pane allows you to configure the data APIs for a widget. The data changes will be displayed on the widget accordingly. To save the data changes, click Save in the upper-right corner. The data will be saved as the default data of the widget.
- Interaction: The interaction pane allows you to set the widget interaction.
- Publish: The publish pane displays the configuration of the widget type, the widget version, and icons. To publish a widget, click Publish in the upper-right corner.
Publish a widget
- Method 1 (recommended method)
Go to the directory address of the widget and run the datav publish command. The widget will be automatically compressed and published on the server where your account domain is located.
- Method 2
Go to the directory address of the widget and run the datav package command. Find the .tar.gz package named
widget-versionoutside the widget directory and upload the package to the widget page of datav.aliyun.com.
- Method 3
Go to the publish page of Preview Widget and click Publish.