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

ヒント

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

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

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

ヒント

コース