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

ヒント

このレッスンは、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:serve

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

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

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

コース

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

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

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

ヒント

コース