ナードパックを作成する

Nerdpack は、New Relic アプリケーションまたは視覚化を構成するすべてのファイルが含まれるパッケージです。 Nerdpacks には、メタデータ、Nerdlet、アセットなどのファイルが含まれています。 Nerdpack を作成するには、New Relic One CLI を使用します。

$
nr1 create --type nerdpack

コンポーネント名をnr1入力するときに、「ab-test」を使用して、ツールが Nerdpack の基礎を作成する様子を確認します。 完了したら、作成されたファイルを調べます。

ルートディレクトリ

ルート レベルには、 ab-testというディレクトリがあります。 このディレクトリ内のすべてのものは Nerdpack の一部です。

$
ls ab-test
README.md         nerdlets          nr1.json          package.json
launchers         node_modules      package-lock.json

Readme.md Nerdpack 要素を作成し、アプリケーションをローカルで提供するための手順を示します。 これとnr1 --help 、コマンドライン ツールを使用して Nerdpack を操作する方法を忘れた場合に役立ちます。

Javascript ファイル

package.json、 package-lock.json 、およびnode_modules は、JavaScript アプリケーションを実行するために重要ですが、Nerdpacks に固有のものではありません。 これらのモジュールを微調整する必要がある場合は、JavaScript コースで学習できます。 とりあえず、このディレクトリ内で最も関連性の高いファイルの 1 つであるnr1.jsonを見てみましょう。

メタデータファイル

nr1.json Nerdpack のメタデータ ファイルで、スキーマ タイプ、一意の識別子、表示名、説明が含まれています。 A/B テストの実行と分析を行うNew Relicアプリケーションを構築しているので、パッケージの displayName を「A/B テスト」に更新し、説明を「 New Relic One を使用してアプリケーションを A/B テストする」に設定します。

fileName=nr1.json
{
    "schemaType": "NERDPACK",
    "id": "311bcd0c-f7eb-4285-afed-4219179bf91d",
    "displayName": "A/B Test",
    "description": "A/B test your application using New Relic One."
}

特に他の人が使用できるようにアプリケーションを公開する場合は、アプリケーションの目的を説明することをお勧めします。

次に、 launchersサブディレクトリとnerdletsサブディレクトリを確認します。

ランチャー

launchers New Relic アプリケーション用に複数のランチャーを作成できるため、これはディレクトリです。 nr1 create Nerdpack 用のランチャーを 1 つだけ作成し、それを「ab-test-launcher」と名付けました。 そのディレクトリ内には 2 つのファイルがあります。

• icon.png アプリケーションを表す画像です
• nr1.json ランチャーのメタデータファイルです

ランチャーのdisplayNameには「A/Bテスト Launcher」を使用し、 nr1.jsonのdescriptionには「A/Bテスト Nerdlet を開く」を使用します。

fileName=launchers/ab-test-launcher/nr1.json
{
    "schemaType": "LAUNCHER",
    "id": "ab-test-launcher",
    "displayName": "A/B Test Launcher",
    "description": "Open the A/B test Nerdlet",
    "rootNerdletId": "ab-test-nerdlet"
}

ランチャーにrootNerdletIdがあることに注意してください。 これは、ランチャーが選択されたときに開く Nerdlet を識別します。 この Nerdpack にはab-test-nerdletという Nerdlet が 1 つだけありますが、一部の Nerdpack には複数の Nerdlet がある場合があります。 ランチャーで開きたい Nerdlet にrootNerdletIdを設定していることを確認してください。

ナードレット

nerdletsディレクトリには、New Relic アプリケーションを構成するすべての Nerdlet が含まれています。 ab-test-nerdletはこの Nerdpack 内の唯一の Nerdlet なので、サブディレクトリは 1 つだけです。 nerdlets/ab-test-nerdletには 3 つのファイルがあります。

• index.js Nerdletコンポーネントを含むJavaScriptファイルです
• styles.scss NerdletのSassスタイルシートを保持します
• nr1.json Nerdletのメタデータが含まれています

Nerdlet のdisplayNameを「A/B テスト」に更新し、 descriptionを「A/B テストの結果の制御と表示」に更新します。

{
  "schemaType": "NERDLET",
  "id": "ab-test-nerdlet",
  "displayName": "A/B Test",
  "description": "Control and view results of your A/B test"
}

これで、Nerdpack、Nerdlet、およびランチャーをわかりやすい表示名と説明でカスタマイズできましたが、アプリケーションは実際には何を行うのでしょうか? デフォルトの Nerdlet がどのように見えるかを確認するには、 index.jsを確認してください。

import React from 'react';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <h1>Hello, ab-test-nerdlet Nerdlet!</h1>;
    }
}

ここでは、 nr1が作成したAbTestNerdletNerdletがあります。 これは、第一レベルのウェルカム見出しをレンダリングする React コンポーネントです。 これはランチャーのnr1.jsonファイルで指定されているルート Nerdlet なので、New Relic プラットフォームでランチャーをクリックすると、ランチャーはこの見出しを表示するビューを開きます。

$
nr1 create --type nerdlet
$
nr1 create --type launcher

$
nr1 create
? What kind of component do you want to create? › - Use arrow-keys. Return to submit.
    nerdpack
❯   nerdlet - create a/an Nerdlet Nerdpack item inside your Nerdpack.
    launcher
    catalog
    visualization

次のレッスンでは、Nerdpack をローカルで提供し、アプリが実際に動作する様子を確認する方法を学びます。