環境の準備

  1. 始める前に、 Node.js Web サイトにアクセスして Node.js をインストールする必要があります。 Node.js バージョン 8.0.0 以降をインストールすることを推奨します (ただし、10.12.0 以降のバージョンを推奨します)。
    別のバージョンの Node.js をインストールしていて、それを他の目的に使用したい場合は、Node.js のバージョンを管理するために NVM をインストールすることを推奨します。 NVM を使用すると、既存のものをアンインストールすることなく、新しいバージョンの Node.js をインストールできます。 インストールアドレスは次のとおりです。 GitHub – Node Version Manager - Simple bash script to manage multiple active node.js versions
  2. Node.js をインストールした後、Command Line Interface (CLI) で node -v および npm -v コマンドを実行します。ノードおよび NMP のバージョンを表示します。 (macOS を使用している場合、ターミナルでコマンドを実行します。 Windows を使用している場合は、cmd でコマンドを実行します。)
    node -v
    v10.11.0
    
    npm -v
    6.4.1

SDK のインストール

  1. 次のコマンドを実行して SDK をインストールします。 (macOS を使用している場合は、ターミナルでコマンドを実行します。 Windows を使用している場合は、cmd でコマンドを実行します。)
    npm install --registry=https://registry.npm.taobao.org datav-cli -g
  2. SDK をインストールしたら、datav --version コマンドを実行して、SDK のバージョンを表示します。
    datav --version
    2.0.0

言語の設定

デフォルトの言語が英語ではない場合は、CLI で次のコマンドを実行して言語を英語に設定します。
bash
datav locale
? What is your language? [English\Chinese\Japanese]

アカウントドメインに応じて自動的に言語を切り替えたい場合は、 DataV (Developer Edition) コンソールにログインした後 datav locale-clear | datav lc コマンドを実行してください。

datav locale コマンドを実行して、言語をリセットすることができます。

DataV (Developer Edition) コンソールへのログイン

以下のコマンドを実行して DataV (Developer Edition) コンソールにログインします。 (macOS を使用している場合は、ターミナルでコマンドを実行します。 Windows を使用している場合は、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.
CLI で Configuration has been completed. が表示されている場合、ログインは成功です。
ウィジェットを作成またはプレビューしたい場合は、コンソールにログオンする必要はありません。 ただし、ウィジェットを公開したい場合は、コンソールにログオンする必要があります。

ウィジェットパッケージの生成

次のコマンドを実行してウィジェットパッケージを生成します。 (macOS を使用している場合は、ターミナルでコマンドを実行してください。 Windows を使用している場合は、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)
CLIで、 The widget has been created. が表示されると、次の図に示すように、ウィジェットパッケージは正常に生成されます。

ウィジェットのプレビュー

以下のコマンドを実行してウィジェットをプレビューします。 (macOS を使用している場合は、ターミナルでコマンドを実行してください。 Windows を使用している場合は、cmd でコマンドを実行します。)

cd Widget Name
datav run
CLIで、 The service is enabled. が表示されると、ウィジェットプレビューサービスが開始されます。 次の図に示すように、Google Chrome ブラウザが自動的に開き、ウィジェットのプレビューページに移動します。
  • ブラウザが自動的に開かない場合は、Google Chrome がインストールされているかどうかを確認してください。 Google Chrome をインストールしてから、Chrome ブラウザを使用して手動で "localhost:1111/" を 開くことを推奨します。
  • ポートエラーが表示された場合は、ポート 1111 が他のアプリケーションによって占有されているかどうかを確認してください。 datav run -p 1112 コマンドを実行して、ウィジェットプレビューサービスを開始することができます。
  • ブラウザで localhost:1111/ を開いてもウィジェットプレビューが表示されない場合は、hosts ファイルで "localhost" を 127.0.0.1 に指定したかどうかを確認してください。 また、ブラウザで 127.0.0.1:1111/ にアクセスしてウィジェットをプレビューすることもできます。
Chrome ブラウザが正常に開くと、次のページが表示されます。
プレビューページには、キャンバス、下部にツールバーおよび右側にツールバーがあります。
  • キャンバス:
    • キャンバスはウィジェットの変更を表示するために使用されます。
    • 右側のツールバーの設定とデータの変更はすべてキャンバスのウィジェットにリアルタイムで表示されます。
    • ウィジェットの枠は、ウィジェットコンテナのサイズを示します。 ウィジェットの表示をテストするために枠のサイズを変更できます。
  • 右側のツールバー: 右側のツールバーには 4 つの ウィンドウ があります。 設定データインタラクション公開です。
    • 設定: 設定ウィンドウでは、必要に応じてウィジェットの主要項目を設定できます。 設定はすぐに有効になります。 たとえば、 フォントサイズの右側にあるスライダーをドラッグすると、表示されるテキストのフォントサイズが変わります。 設定を保存するには、右上隅にある [保存] をクリックします。 設定はデフォルト設定として保存されます。
    • データ: データウィンドウでは、ウィジェットのデータ API を設定できます。 データの変更はそれに応じてウィジェットに表示されます。 データの変更を保存するには、 右上隅にある [保存] をクリックします。 データはウィジェットのデフォルトデータとして保存されます。
    • インタラクション: インタラクションウィンドウでは、ウィジェットのインタラクションを設定できます。
    • 公開: 公開ウィンドウには、ウィジェットタイプ、ウィジェットバージョンおよびアイコンの設定が表示されます。 ウィジェットを公開するには、 右上隅にある [公開] をクリックします。

ウィジェットの公開

以下のいずれかの方法でウィジェットを公開できます。
  • 方法 1 (推奨方法)

    ウィジェットのディレクトリアドレスに移動し、datav publish コマンドを実行します。 ウィジェットは自動的に圧縮され、アカウントドメインが配置されているサーバーに公開されます。

  • 方法 2

    ウィジェットのディレクトリアドレスに移動して、datav package コマンドを実行します。 ウィジェットディレクトリの外で widget-version という名前の .tar.gz パッケージを探します。パッケージを datav.aliyun.com のウィジェットページにアップロードします。

  • 方法 3

    プレビューウィジェットの公開ページに移動します。 [公開] をクリックします。