テストを終了するセクションを追加します

ヒント

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

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

このコースでは、 New Relicで A/B テストアプリケーションを構築します。このアプリケーションは、デモ Web サイトでテストしている各デザインバージョンの有効性に関する大量のデータをグラフを通じて表示します。最終的には、そのデータを活用してどのデザインが最も効果的かを決定し、サイトにアクセスするすべてのユーザーにそのデザインを表示できるようになります。このレッスンでは、サイトのすべてのユーザーに表示するデザインを選択できるフォームをアプリケーションに構築します。

この新しいセクションには、3 つの主要なコンポーネントがあります。

説明文付きの見出し: 「テストを終了するにはバージョンを選択してください」
A/Bテストの勝者を決定するために使用するコンポーネント
選択した勝者を確認するボタン

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

bash

$cd nru-programmability-course/add-end-test-section/ab-test

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

bash

$touch end-test.js

この新しいファイルで、 SelectとそのSelectItem子コンポーネントをカプセル化するVersionSelectorコンポーネントを作成します。

import React from 'react';
import { Select, SelectItem } from 'nr1';

class VersionSelector extends React.Component {
  render() {
    return (
      <Select>
        <SelectItem value={'A'}>Version A</SelectItem>
        <SelectItem value={'B'}>Version B</SelectItem>
      </Select>
    );
  }
}

VersionSelector 2 つの選択肢を持つSelectコンポーネントをレンダリングします。各SelectItemで、 valueプロパティを指定します。この場合、バージョン A を表すために'A'を使用し、バージョン B を表すために'B'使用します。

テストを終了するために使用するButtonの別のコンポーネントを作成します。

import React from 'react';
import { Button, Select, SelectItem } from 'nr1';

class VersionSelector extends React.Component {
  render() {
    return (
      <Select>
        <SelectItem value={'A'}>Version A</SelectItem>
        <SelectItem value={'B'}>Version B</SelectItem>
      </Select>
    );
  }
}

class EndTestButton extends React.Component {
  render() {
    return (
      <div>
        <Button>End test</Button>
      </div>
    );
  }
}

これは些細なことのように見えますが、アプリコードを反復処理するときにボタンロジックをカプセル化します。

テストの終了を示すために使用するセクション全体の最終コンポーネントを作成します。

import React from 'react';
import { Button, Grid, GridItem, HeadingText, Select, SelectItem } from 'nr1';

class VersionSelector extends React.Component {
  render() {
    return (
      <Select>
        <SelectItem value={'A'}>Version A</SelectItem>
        <SelectItem value={'B'}>Version B</SelectItem>
      </Select>
    );
  }
}

class EndTestButton extends React.Component {
  render() {
    return (
      <div>
        <Button>End test</Button>
      </div>
    );
  }
}

export default class EndTestSection extends React.Component {
  render() {
    return (
      <Grid className="endTestSection">
        <GridItem columnSpan={12}>
          <HeadingText className="endTestHeader">
            Pick the winner of your A/B test:
          </HeadingText>
        </GridItem>
        <GridItem columnStart={5} columnEnd={6} className="versionSelector">
          <VersionSelector />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

ここでは、3 つの項目を含むGridを作成します。まず、 HeadingTextを含み、12 列すべてにまたがるGridItemを作成します。次の行には、2 つの項目があります。

前の手順で作成したVersionSelectorコンポーネント
「テスト終了」と書かれたButton

これらの項目はそれぞれ 1 つの列にまたがりますが、 columnSpanを使用する代わりに、 columnStartとcolumnEndの組み合わせを使用して、どの列をカバーするかを指定します。

Nerdlet のindex.jsファイルで、Nerdlet にEndTestSectionを追加します。

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import EndTestSection from './end-test';
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}>
            <EndTestSection />
          </GridItem>
          <GridItem columnSpan={12}>
            <PastTests />
          </GridItem>
        </Grid>
      </div>
    );
  }
}

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

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

ただし、このコードにはいくつかの改良を加える必要があります。バージョンを選択しても、コンポーネントで選択された値は変更されません。 Selectが表示する値は、 valueプロパティとonChangeイベントハンドラーを使用して制御する必要があります。次のレッスンでは、コードを更新して、 Selectコンポーネントでバージョンの選択を永続化します。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスンに進みます: 選択したバージョンを永続化します。

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

テストを終了するセクションを追加します

ヒント

コース