Adicione uma seção para finalizar seu teste

Dica

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Se ainda não o fez, confira a Visão Geral.

Cada lição do curso se baseia na anterior, portanto, certifique-se de ter concluído a última lição, Adicionar descrições de versão, antes de iniciar esta.

Neste curso, você está construindo um aplicativo de teste A/B no New Relic. O aplicativo apresenta muitos dados, por meio de seus gráficos, sobre a eficácia de cada versão de design que você está testando em seu site de demonstração. Em última análise, você poderá usar esses dados para decidir qual design é mais eficaz e mostrá-lo a todos os usuários que visitarem seu site. Nesta lição, você criará um formulário em seu aplicativo que permite escolher qual design deseja mostrar para cada usuário do seu site.

Esta nova seção tem três componentes principais:

Um título com texto instrutivo: "Escolha uma versão para finalizar o teste"
Um componente que você usa para coroar a versão vencedora do teste A/B
Um botão para confirmar o vencedor que você selecionou

Mude para o diretório add-end-test-section/ab-test do repositório de cursos:

bash

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

Em nerdlets/ab-test-nerdlet, adicione um novo arquivo Javascript chamado end-test.js:

bash

$touch end-test.js

Neste novo arquivo, crie um componente VersionSelector para encapsular um Select e seus componentes filhos SelectItem :

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 renderiza um componente Select com duas opções. Em cada SelectItem, você especifica uma propriedade value. Neste caso, você usa 'A' para representar a versão A e 'B' para representar a versão B.

Crie outro componente para um Button que você usará para concluir seu teste:

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

Isso parece trivial, mas encapsulará a lógica do botão conforme você itera no código do seu aplicativo.

Crie um componente final para toda a seção que você usará para marcar o final do seu teste:

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

Aqui você cria um Grid com três itens. Primeiro, você cria um GridItem que contém um HeadingText e abrange todas as 12 colunas. Na próxima linha, você tem dois itens:

O componente VersionSelector que você criou na etapa anterior
Um Button que diz "Finalizar teste"

Cada um desses itens abrange uma coluna, mas em vez de usar columnSpan, eles usam uma combinação de columnStart e columnEnd para especificar quais colunas cobrem.

No arquivo index.js do seu Nerdlet, adicione EndTestSection ao seu Nerdlet:

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

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-end-test-section/ab-test.

Gere um novo UUID para o seu Nerdpack:

bash

$nr1 nerdpack:uuid -gf

Como você clonou o repositório de cursos que continha um Nerdpack existente, você precisa gerar seu próprio identificador exclusivo. Este UUID mapeia seu Nerdpack para sua conta New Relic.

Sirva seu aplicativo localmente:

bash

$nr1 nerdpack:serve

Acesse https://one.newrelic.com?nerdpacks=local e visualize seu aplicativo em Apps > Your apps.

Quando terminar, pare de servir seu aplicativo New Relic pressionando CTRL+C na janela do terminal do seu servidor local.

No entanto, você precisa fazer algumas melhorias neste código. Ao selecionar uma versão, o valor selecionado no componente não muda. Você deve controlar o valor que Select exibe usando sua propriedade value e o manipulador de eventos onChange. Na próxima lição, você atualizará seu código para persistir sua escolha de versão no componente Select.

Curso

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Continue para a próxima lição: Persista a versão selecionada.

Esta tradução de máquina é fornecida para sua comodidade.

Adicione uma seção para finalizar seu teste

Dica

Curso