Buscar dados de um serviço de terceiros

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, Acesse o NerdStorageVault do seu nerdlet, antes de iniciar esta.

Nas lições anteriores, você conheceu um serviço de terceiros que pode ser usado para buscar dados simulados de cancelamento para o gráfico Total cancellations per version em seu aplicativo New Relic. Embora os dados deste serviço sejam falsos, o valor real desta lição é aprender como você pode usar serviços de terceiros para fornecer dados ao seu aplicativo New Relic.

Se você fizer uma solicitação ao serviço simulado com dados de cancelamento (https://api.nerdsletter.net/cancellations) você verá uma resposta rejeitando sua solicitação com uma mensagem que diz "Não autorizado":

bash

$curl https://api.nerdsletter.net/cancellations
Unauthorized

Isso ocorre porque a API Nerdsletter requer um cabeçalho Authorization. Mais especificamente, você deve passar um token de portador de ABC123 para obter acesso autorizado aos seus dados. Se você fizer uma solicitação ao serviço com o cabeçalho Authorization: Bearer ABC123, obterá uma resposta bem-sucedida com os dados de cancelamento simulados:

bash

$curl https://api.nerdsletter.net/cancellations -H 'Authorization: Bearer ABC123'
{"a": 15, "b": 78}

Na última lição, você usou NerdGraph para armazenar esse token de API no armazenamento de dados NerdStorageVault do seu aplicativo New Relic. Você também passou o token para o componente TotalCancellations e registrou seu uso no console do seu navegador. Nesta lição, você acompanha essa instrução de log com uma solicitação real à API Nerdsletter usando seu token de autorização. Em seguida, você fornece os dados desse recurso externo para o gráfico Total cancellations per version.

Mude para o diretório third-party-services/ab-test do repositório de cursos:

bash

$cd nru-programmability-course/third-party-services/ab-test

Este diretório contém o código que esperamos que seu aplicativo tenha neste ponto do curso. Ao navegar para o diretório correto no início de cada lição, você deixa seu código personalizado para trás, protegendo-se assim de carregar código incorreto de uma lição para outra.

Em nerdlets/ab-test-nerdlet/total-cancellations.js, faça uma solicitação para api.nerdsletter.net com seu token de API. Salve os resultados no estado e use esse estado em render():

import React from 'react';
import { HeadingText, PieChart } from 'nr1';

export default class TotalCancellations extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            cancellations: [],
            lastToken: null
        }
    }

    generateChartData(data) {
        const cancellationsA = data ? data.a : 0;
        const cancellationsB = data ? data.b : 0;

        return [
            {
                metadata: {
                    id: 'cancellations-A',
                    name: 'Version A',
                    viz: 'main',
                    color: 'blue',
                },
                data: [
                    { y: cancellationsA },
                ],
            },
            {
                metadata: {
                    id: 'cancellations-B',
                    name: 'Version B',
                    viz: 'main',
                    color: 'green',
                },
                data: [
                    { y: cancellationsB },
                ],
            },
        ]
    }

    componentDidUpdate() {
        if (this.props.token && this.props.token != this.state.lastToken) {
            console.log(`Requesting data with api token ${this.props.token}`)

            fetch(
                "https://api.nerdsletter.net/cancellations",
                {headers: {"Authorization": `Bearer ${this.props.token}`}}
            ).then(
                (response) => {
                    if (response.status == 200) {
                        return response.json()
                    } else if (response.status == 401) {
                        console.error("Incorrect auth header")
                    } else {
                        console.error(response.text())
                    }
                }
            ).then(
                (data) => {
                    if (data) {
                        this.setState({
                            cancellations: this.generateChartData(data),
                            lastToken: this.props.token
                        })
                    }
                }
            )
        }
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Total cancellations per version
            </HeadingText>
            <PieChart data={this.state.cancellations} fullWidth />
        </div>
    }
}

Neste código, você inicializa TotalCancellations.state.cancellations com zero para o valor y em cada série, em vez dos valores codificados anteriormente. Isso ajuda a representar de forma mais realista o que o gráfico deve mostrar se o seu aplicativo New Relic não tiver solicitado dados da API Nerdsletter com êxito. A seguir, você usa a função fetch() do Javascript para fazer uma solicitação HTTP para a API Nerdsletter. Em seguida, você passa seu token no cabeçalho Authorization da solicitação. Se a solicitação for bem-sucedida, atualize os dados de cancelamento em TotalCancellations.state para que esses dados sejam refletidos no método de renderização do componente.

Navegue até a raiz do seu Nerdpack em nru-programmability-course/third-party-service/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. Também permite que seu aplicativo faça solicitações Nerdgraph em nome de sua conta.

Sirva seu aplicativo localmente:

bash

$nr1 nerdpack:serve

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

Se o seu token em NerdStorageVault não for "ABC123", seu console mostrará um erro que diz "Cabeçalho de autenticação incorreto".

Se você definir o token como "ABC123", Total cancellations per version será atualizado para mostrar os valores do serviço de terceiros.

Dica

Se algo não funcionar, use as ferramentas de depuração do seu navegador para tentar identificar o problema.

Assegure-se de que você:

Copiou o código corretamente da lição
Gerou um novo UUID
Substituiu todas as instâncias de <YOUR NEW RELIC ACCOUNT ID> no seu projeto pelo seu New Relic ID de conta real

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

Bom trabalho! Você percorreu um longo caminho desde a execução nr1 nerdpack:create pela primeira vez.

Você criou oito gráficos com estilos variados e forneceu a eles dados dinâmicos de diversas fontes. Você aprendeu sobre o SDK do New Relic One e usou muitos de seus componentes. Você até coletou dados de um serviço de terceiros e os misturou perfeitamente com os dados do New Relic para fornecer uma visão completa do desempenho das versões concorrentes em seu teste A/B.

A partir daqui, há apenas mais um conjunto de API no SDK do New Relic One que você ainda não possui: plataforma API. Eles serão úteis para melhorar a usabilidade do seu aplicativo New Relic.

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: Adicione PlatformStateContext ao seu nerdlet.

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

Buscar dados de um serviço de terceiros

Dica

Dica

Dica