バージョンの説明を追加する

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。まだご覧になっていない方は、概要をご覧ください。

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「グラフの見出しの追加」を完了していることを確認してください。

チャートが整理され、それぞれの上にわかりやすい見出しが付けられると、 New Relicアプリケーションはさらに使いやすくなります。このレッスンでは、A/B テストの各デザインバージョンの説明を作成しながら、この傾向を継続します。

コースワークリポジトリの add-version-descriptions/ab-test ディレクトリに変更します。

bash

$cd nru-programmability-course/add-version-descriptions/ab-test

nerdlets/ab-test-nerdletに、 description.jsという名前の新しい Javascript ファイルを追加します。

bash

$touch description.js

この新しいファイルで、 VersionDescriptionという新しい React コンポーネントを作成します。このコンポーネントは、 HeadingTextとBlockTextを使用して、 descriptionプロパティを使用して渡されるバージョンの説明をレンダリングします。

import React from 'react';
import { BlockText, HeadingText } from 'nr1';

export default class VersionDescription extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <HeadingText className="versionHeader">
          Version {this.props.version}
        </HeadingText>
        <BlockText className="versionText">{this.props.description}</BlockText>
      </div>
    );
  }
}

この 1 つのクラスを使用して、A/B テストの各デザインバージョンのバージョン説明を作成します。

Nerdlet のindex.jsファイルで、 VersionDescriptionをインポートし、各デザインバージョンの説明を作成し、各デザインバージョンに新しいGridItemコンポーネントを作成します。

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionDescription from './description';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

const VERSION_A_DESCRIPTION =
  'The newsletter signup message says, "Sign up for our newsletter"';
const VERSION_B_DESCRIPTION =
  'The newsletter signup message says, "Sign up for our newsletter and get a free shirt!"';

export default class AbTestNerdletNerdlet extends React.Component {
  render() {
    return (
      <div>
        <Grid className="wrapper">
          <GridItem columnSpan={6}>
            <VersionDescription
              description={VERSION_A_DESCRIPTION}
              version="A"
            />
          </GridItem>
          <GridItem columnSpan={6}>
            <VersionDescription
              description={VERSION_B_DESCRIPTION}
              version="B"
            />
          </GridItem>
          <GridItem columnSpan={12}>
            <hr />
          </GridItem>
          <GridItem columnSpan={12}>
            <NewsletterSignups />
          </GridItem>
          <GridItem columnSpan={6}>
            <TotalSubscriptions />
          </GridItem>
          <GridItem columnSpan={6}>
            <TotalCancellations />
          </GridItem>
          <GridItem columnSpan={6}>
            <VersionTotals version="a" />
          </GridItem>
          <GridItem columnSpan={6}>
            <VersionTotals version="b" />
          </GridItem>

          <ChartGroup>
            <GridItem columnSpan={6}>
              <VersionPageViews version="a" />
            </GridItem>
            <GridItem columnSpan={6}>
              <VersionPageViews version="b" />
            </GridItem>
          </ChartGroup>

          <GridItem columnSpan={12}>
            <PastTests />
          </GridItem>
        </Grid>
      </div>
    );
  }
}

ここでは、2 つのVersionDescriptionコンポーネントを作成しました。デザインバージョンに対応するdescriptionおよびversionプロパティが渡されました。

また、アプリ内の説明とグラフを視覚的に区別するために、水平線を追加しました。このため、 columnSpanが 12 のGridItemを追加して、ルールをグリッドの全幅に広げました。

nru-programmability-course/add-version-descriptions/ab-testにある Nerdpack のルートに移動します。

Nerdpack の新しい UUID を生成します。

bash

$nr1 nerdpack:uuid -gf

既存の Nerdpack を含むコースワークリポジトリを複製したため、独自の一意の識別子を生成する必要があります。この UUID は Nerdpack を New Relic アカウントにマッピングします。

アプリケーションをローカルで提供します。

bash

$nr1 nerdpack:servesyner

https://one.newrelic.com?nerdpacks=localにアクセスし、 Apps [アプリ] > Your apps [あなたのアプリ]でアプリケーションを表示します。

完了したら、ローカルサーバーのターミナルウィンドウでCTRL+Cを押して、New Relic アプリケーションの提供を停止します。

これで、競合するデザインとチャートの説明が追加されました。次のレッスンでは、ユーザーインターフェースコンポーネントからアプリケーションの新しいセクションを作成します。このセクションは、ボタンをクリックするだけで A/B テストを終了するために使用されます。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスンに進みます: テストを終了するためのセクションを追加します。

この機械翻訳は、参考として提供されています。

バージョンの説明を追加する

ヒント

コース