Ajoutez une section pour terminer votre test

Conseil

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Si vous ne l’avez pas déjà fait, consultez la présentation.

Chaque leçon du cours s'appuie sur la précédente, alors assurez-vous d'avoir terminé la dernière leçon, Ajouter des descriptions de version, avant de commencer celle-ci.

Dans ce cours, vous créez une application de test A/B dans New Relic. L'application présente de nombreuses données, via ses graphiques, sur l'efficacité de chaque version de conception que vous testez sur votre site Web de démonstration. En fin de compte, vous pourrez utiliser ces données pour décider quelle conception est la plus efficace et montrer cette conception à chaque utilisateur qui visite votre site. Dans cette leçon, vous allez créer un formulaire dans votre application qui vous permet de choisir la conception que vous souhaitez afficher à chaque utilisateur de votre site.

Cette nouvelle section comporte trois volets principaux :

Un titre avec un texte pédagogique : « Choisissez une version pour terminer le test »
Un composant que vous utilisez pour couronner la version gagnante du test A/B
Un bouton pour confirmer le gagnant que vous avez sélectionné

Accédez au répertoire add-end-test-section/ab-test du référentiel de cours:

bash

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

Dans nerdlets/ab-test-nerdlet, ajoutez un nouveau fichier Javascript nommé end-test.js:

bash

$touch end-test.js

Dans ce nouveau fichier, créez un composant VersionSelector pour encapsuler un Select et ses SelectItem composants enfants :

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 rend un composant Select avec deux choix. Dans chaque SelectItem, vous spécifiez un accessoire value . Dans ce cas, vous utilisez 'A' pour représenter la version A et 'B' pour représenter la version B.

Créez un autre composant pour un Button que vous utiliserez pour terminer votre test :

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

Cela semble trivial, mais cela encapsulera la logique des boutons au fur et à mesure que vous parcourez le code de votre application.

Créez un composant final pour toute la section que vous utiliserez pour marquer la fin de votre test :

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

Ici, vous créez un Grid avec trois éléments. Tout d’abord, vous créez un GridItem qui contient un HeadingText et s’étend sur les 12 colonnes. Dans la rangée suivante, vous avez deux éléments :

Le composant VersionSelector que vous avez créé à l'étape précédente
Un Button qui dit « Fin du test »

Ces éléments s'étendent chacun sur une colonne, mais au lieu d'utiliser columnSpan, ils utilisent une combinaison de columnStart et columnEnd pour spécifier les colonnes qu'ils couvrent.

Dans le fichier index.js de votre Nerdlet, ajoutez EndTestSection à votre 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>
    }
}

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-end-test-section/ab-test.

Générez un nouvel UUID pour votre Nerdpack :

bash

$nr1 nerdpack:uuid -gf

Étant donné que vous avez cloné le référentiel de cours qui contenait un Nerdpack existant, vous devez générer votre propre identifiant unique. Cet UUID mappe votre Nerdpack à votre compte New Relic.

Présentez votre demande localement :

bash

$nr1 nerdpack:serve

Accédez à https://one.newrelic.com?nerdpacks=local et affichez votre application sous Apps > Your apps.

Une fois que vous avez terminé, arrêtez de diffuser votre application New Relic en appuyant sur CTRL+C dans la fenêtre de terminal de votre serveur local.

Cependant, vous devez apporter quelques améliorations à ce code. Lorsque vous sélectionnez une version, la valeur sélectionnée dans le composant ne change pas. Vous devez contrôler la valeur affichée par Select à l'aide de son accessoire value et de son gestionnaire d'événements onChange . Dans la leçon suivante, vous mettrez à jour votre code pour conserver votre choix de version dans le composant Select .

Cours

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Passez à la leçon suivante : Conservez la version sélectionnée.

Cette traduction automatique est fournie pour votre commodité.

Ajoutez une section pour terminer votre test

Conseil

Cours