테스트를 종료하려면 섹션을 추가하세요.

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 아직 확인하지 않았다면 개요를 확인하세요.

과정의 각 단원은 마지막 단원을 기반으로 하므로 이 단원을 시작하기 전에 마지막 단원인 버전 설명 추가를 완료했는지 확인하세요.

이 과정에서는 New Relic에서 A/B 테스트를 구축합니다. 이 애플리케이션은 차트를 통해 데모 웹 사이트에서 테스트 중인 각 디자인 버전의 효율성에 대한 많은 데이터를 제공합니다. 궁극적으로 해당 데이터를 사용하여 어떤 디자인이 가장 효과적인지 결정하고 해당 디자인을 사이트를 방문하는 모든 사용자에게 보여줄 수 있습니다. 이 단원에서는 사이트의 모든 사용자에게 표시할 디자인을 선택할 수 있는 양식을 애플리케이션에 작성합니다.

이 새로운 섹션에는 세 가지 주요 구성 요소가 있습니다.

지침 문구가 포함된 제목: "테스트를 종료하려면 버전을 선택하세요."
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 이라는 새 자바스크립트 파일을 추가합니다.

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 두 가지 선택 사항으로 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>
    }
}

여기서는 세 가지 항목이 포함된 Grid 만듭니다. 먼저, HeadingText 를 포함하고 12개 열 모두에 걸쳐 있는 GridItem 을 생성합니다. 다음 행에는 두 가지 항목이 있습니다.

이전 단계에서 생성한 VersionSelector 구성요소
'테스트 종료'라고 표시된 Button

이러한 항목은 각각 하나의 열에 걸쳐 있지만 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 피규어 제공을 중지하세요.

그러나 이 코드를 몇 가지 개선해야 합니다. 버전을 선택해도 구성 요소에서 선택한 값은 변경되지 않습니다. value 속성과 onChange 이벤트 핸들러를 사용하여 Select 가 표시하는 값을 제어해야 합니다. 다음 과정에서는 Select 구성요소에서 버전 선택을 유지하도록 코드를 업데이트합니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 단원으로 계속 진행하세요. 선택한 버전을 유지하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

테스트를 종료하려면 섹션을 추가하세요.

팁

코스