Getting started-DataV(DataV)-阿里云帮助中心

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 node -v and npm -v commands in the macOS Terminal or Windows Command Prompt to view the Node.js and npm versions.

Install DataV

Run the following command in the macOS Terminal or Windows Command Prompt to install DataV:
```
npm install datav-cli -g
```
After DataV is installed, run the datav --version command to view the version of DataV.

Set the language

DataV defaults to English. Run the datav locale command in the macOS Terminal or Windows Command Prompt to change the language.

The command returns the following prompt:

? What is your language? (Use arrow keys)
> English
  Chinese
  Japanese

Press the ↑ and ↓ arrow keys to select a language and press Enter.

To match the language to your Alibaba Cloud account region, log on to the DataV developer console and run the datav locale-clear | datav lc command to clear the language settings. Then, set the language again.

Log on to the DataV developer console

Run the datav login command in the macOS Terminal or Windows Command Prompt to log on to the DataV developer console. Specify the following parameters when prompted.

Parameter	Description
`Username`	The username 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.
`Developer Token`	The developer token obtained from the Widgets tab in the DataV console.
`Do you want to set an alias?`	Press `Y` or `N`.
`Alias Name`	Enter an alias.

If the message the configuration is successful appears, you have logged on to the DataV developer console.

Note Logging on to the DataV developer console is required only for publishing widgets. You can create and preview widgets without logging on.

Generate a widget package

Run the datav init command in the macOS Terminal or Windows Command Prompt to generate a widget package. Enter the following information when prompted.

Widget information	Description
`? Widget Name`	The widget name. It can contain letters, digits, and hyphens (-).
`? Widget Display Name`	The display name shown in the widget list of a project.
`? Widget Description`	The description of the widget.
`? Select Template from Template List` `Basic text` `Basic text (international edition)`	The widget template. Valid values: `Basic text` and `Basic text (international edition)`. Press the ↑ and ↓ arrow keys to select a template and press Enter.

When the message "The widget has been created." appears, the widget package is ready. Widget created

Preview a widget

Run the following commands in the macOS Terminal or Windows Command Prompt to preview a widget:

cd <Widget name>
datav run

When the message the service has started appears, Google Chrome opens to display the widget preview. Service started

Note

If Google Chrome does not open automatically, it may not be installed. Install Google Chrome and manually access localhost:1111/ to preview the widget.
If port 1111 is already in use, run the datav run -p 1112 command to use a different port.
If localhost:1111/ does not display the widget, check whether localhost is mapped to 127.0.0.1 in your hosts file. If so, access 127.0.0.1:1111/ instead.

The following figure shows a widget preview.

The preview page consists of a canvas, a bottom toolbar, and a right-side panel.

Canvas
- Displays the widget and reflects all changes in real time.
- Shows updates from the right-side panel settings and data changes.
- Drag the borders to resize the widget.
Bottom toolbar
Switch the widget language.

Right-side panel

Contains four tabs: Settings, Data, Interaction, and Publish.

Tab	Description
Settings	Configure the widget styles. Changes take effect immediately on the canvas. For example, adjusting the font size slider updates the text size in real time. Click Save to save the current settings as default for a widget.
Data	View and edit the widget API data. Changes are reflected on the canvas immediately. Click Save to save the current data as default for the widget.
Interaction	Configure widget interaction events.
Publish	View the widget type, icon, and version. Click Publish in the upper-right corner to publish the widget.

Publish a widget

Publish a widget by using one of the following methods:

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 number is 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.