Adicione descrições de versão

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 títulos de gráfico, antes de iniciar esta.

Com seus gráficos organizados e títulos descritivos acima de cada um, seu aplicativo New Relic está se tornando mais utilizável. Nesta lição, você continuará essa tendência criando descrições para cada versão de design em seu teste A/B.

Mude para o diretório add-version-descrições/ab-test do repositório de cursos:

bash

$cd nru-programmability-course/add-version-descriptions/ab-test

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

bash

$touch description.js

Neste novo arquivo, crie um novo componente React, chamado VersionDescription, que usa um HeadingText e um BlockText para renderizar uma descrição de versão que você passa, usando a propriedade 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>
        )
    }
}

Você usará essa classe para criar uma descrição de versão para cada versão de design em seu teste A/B.

No arquivo index.js do seu Nerdlet, importe VersionDescription, crie descrições para cada versão do design e crie um novo componente GridItem para cada versão do design:

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

Aqui você criou dois componentes VersionDescription. Você passou nos adereços description e version , que correspondem a uma versão de design.

Você também adicionou uma regra horizontal para separar visualmente as descrições dos gráficos no seu aplicativo. Para isso, você adicionou um GridItem com um columnSpan de 12, para esticar a regra por toda a largura da grade.

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-version-descriptions/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.

Agora você adicionou descrições para seus designs concorrentes e seus gráficos. Na próxima lição, você criará uma nova seção do seu aplicativo a partir dos componentes da interface do usuário. Esta seção será usada para encerrar o teste A/B com o clique de um botão.

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: Adicione uma seção para finalizar seu teste.

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

Dica

Curso