Persistir a versão selecionada

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. Adicione uma seção para encerrar seu teste antes de iniciar este.

Na lição anterior, você criou uma seção do seu aplicativo que permite escolher o design mais eficaz do seu teste A/B. O objetivo desta seção é encerrar o teste depois de selecionar um vencedor.

Ao selecionar uma versão neste formulário, a seleção não persiste no componente Select. Agora é hora de implementar esse comportamento.

Mude para o diretório persist-selected-version/ab-test do repositório de cursos:

bash

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

Em end-test.js, inicialize EndTestSection.state com um campo selectedVersion padrão:

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

Passe o selectedVersion, como suporte, para 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>
    );
  }
}

Forneça o selectedVersion ao seu componente Select em 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',
    };
  }

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

Crie um método, selectVersion(), que atualize EndTestSection.state:

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

Você deve vincular selectVersion ao componente EndTestSection para que ele possa acessar state.

Passe o método para VersionSelector como suporte:

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

Defina selectVersion como o retorno de chamada onChange em 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
        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>
    );
  }
}

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

Voilá! Quando você seleciona uma nova versão como vencedora do teste A/B, essa versão é refletida no menu. No entanto, quando você pressiona End test, nada acontece. Na próxima lição, você criará uma caixa de diálogo de confirmação para se proteger contra o encerramento prematuro do seu teste A/B.

Dica

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: Apresente um modal de confirmação de teste final.

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

Dica

Dica