選択したバージョンを永続化

ヒント

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

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスンを完了し、テストを終了するセクションを追加してください。

前のレッスンでは、A/B テストから最も効果的なデザインを選択できるアプリケーションのセクションを作成しました。このセクションの目標は、勝者を選択したらテストを終了することです。

このフォームからバージョンを選択すると、選択内容はSelectコンポーネントに保持されません。さて、その動作を実装する時が来ました。

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

bash

$cd nru-programmability-course/persist-selected-version/ab-test

end-test.jsで、デフォルトのselectedVersionフィールドを使用してEndTestSection.stateを初期化します。

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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };
  }

  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>
    );
  }
}

selectedVersionをプロパティとしてVersionSelectorに渡します:

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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };
  }

  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 selectedVersion={this.state.selectedVersion} />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

VersionSelectorのSelectコンポーネントにselectedVersionを指定します。

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

class VersionSelector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Select value={this.props.selectedVersion}>
        <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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };
  }

  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 selectedVersion={this.state.selectedVersion} />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

EndTestSection.stateを更新するメソッドselectVersion()を作成します。

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

class VersionSelector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Select value={this.props.selectedVersion}>
        <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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };

    this.selectVersion = this.selectVersion.bind(this);
  }

  selectVersion(event, value) {
    this.setState({ selectedVersion: value });
  }

  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 selectedVersion={this.state.selectedVersion} />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

stateにアクセスできるように、 selectVersionをEndTestSectionコンポーネントにバインドする必要があります。

メソッドをプロパティとしてVersionSelectorに渡します:

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

class VersionSelector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Select value={this.props.selectedVersion}>
        <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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };

    this.selectVersion = this.selectVersion.bind(this);
  }

  selectVersion(event, value) {
    this.setState({ selectedVersion: value });
  }

  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
            selectedVersion={this.state.selectedVersion}
            selectVersion={this.selectVersion}
          />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

VersionSelectorでselectVersionをonChangeコールバックとして設定します:

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

class VersionSelector extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Select
        onChange={this.props.selectVersion}
        value={this.props.selectedVersion}
      >
        <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 {
  constructor() {
    super(...arguments);

    this.state = {
      selectedVersion: 'A',
    };

    this.selectVersion = this.selectVersion.bind(this);
  }

  selectVersion(event, value) {
    this.setState({ selectedVersion: value });
  }

  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
            selectedVersion={this.state.selectedVersion}
            selectVersion={this.selectVersion}
          />
        </GridItem>
        <GridItem columnStart={7} columnEnd={8}>
          <EndTestButton>End test</EndTestButton>
        </GridItem>
      </Grid>
    );
  }
}

nru-programmability-course/persist-selected-version/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テストの勝者として新しいバージョンを選択すると、そのバージョンがメニューに反映されます。ただし、 End test [テスト終了]を押しても何も起こりません。次のレッスンでは、A/B テストが途中で終了しないようにするための確認ダイアログを作成します。

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスンに進みます: テスト終了確認モーダルを表示します。

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

選択したバージョンを永続化

ヒント

ヒント