Prepare the environment

  1. 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.
  2. After installing Node.js, run the node -v and npm -v commands 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.)
    node -v
    v10.11.0
    
    npm -v
    6.4.1

Install the SDK

  1. 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
  2. After installing the SDK, run the datav --version command to view the SDK version.
    datav --version
    2.0.0

Set the language

If your default language is not English, run the following command in the CLI to set the language to English:
bash
datav locale
? What is your language? [English\Chinese\Japanese]
				

If you want to automatically switch the language according to your account domain, run the 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

Run the following command to log on to the DataV (Developer Edition) console: (If you are using macOS, run the command in terminal. If you are using Windows, run the command in cmd.)

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.
In the CLI, if Configuration has been completed. is displayed, the logon is successful.
Note You do not need to log on to the console if you want to create or preview a widget. However, you must log on to the console if you want to publish a widget.

Generate a widget package

Run the following command to generate a widget package: (If you are using macOS, run the command in terminal. If you are using Windows, run the command in cmd.)

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)
In the CLI, if The widget has been created. is displayed, the widget package is generated successfully, as shown in the following figure.

Preview a widget

Run the following command to preview a widget: (If you are using macOS, run the command in terminal. If you are using Windows, run the command in cmd.)

cd Widget Name
datav run
In the CLI, if The service is enabled. is displayed, the widget preview service is initiated. Your Google Chrome browser will automatically open and navigate to the widget preview page, as shown in the following figure.

Note
  • 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 1112 command 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.
If the Chrome browser opens successfully, the following page is displayed.

The preview page contains a canvas, a toolbar at the bottom, and a toolbar on the right.
  • Canvas:
    • 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

You can publish a widget using one of the following methods:
  • 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-version outside 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.