Obtener datos de un servicio de terceros

Sugerencia

Esta lección es parte de un curso que le muestra cómo crear una aplicación New Relic desde cero. Si aún no lo hiciste, consulta la descripción general.

Cada lección del curso se basa en la anterior, así que cerciorar de completar la última lección, Acceda a NerdStorageVault desde su nerdlet, antes de comenzar esta.

En lecciones anteriores, conoció un servicio de terceros que puede emplear para obtener datos de cancelaciones simuladas para el gráfico Total cancellations per version en su aplicación New Relic. Aunque los datos de este servicio son falsos, el valor real de esta lección es aprender cómo puede emplear servicios de terceros para suministrar datos a su aplicación New Relic.

Si realiza una solicitud al servicio simulado con datos de cancelación (https://api.nerdsletter.net/cancellations) Verá una respuesta rechazando su solicitud con un mensaje que dice "No autorizado":

bash

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

Esto se debe a que la API de Nerdsletter requiere un encabezado Authorization. Más específicamente, debe pasar un token de portador de ABC123 para obtener acceso autorizado a sus datos. Si realiza una solicitud al servicio con el encabezado Authorization: Bearer ABC123, obtendrá una respuesta exitosa con los datos de cancelación simulados:

bash

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

En la última lección, empleó NerdGraph para almacenar este token de API en el almacén de datos NerdStorageVault de su aplicación New Relic. También pasó el token a su componente TotalCancellations y registró su uso en la consola de su browser. En esta lección, realizará un seguimiento de esa declaración log con una solicitud real a la API de Nerdsletter empleando su token de autorización. Luego, proporciona los datos de ese recurso externo a su gráfico Total cancellations per version.

Cambie al directorio de servicios de terceros/ab-test del repositorio de trabajos del curso:

bash

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

Este directorio contiene el código que esperamos que tenga su aplicación en este punto del curso. Al navegar al directorio correcto al comienzo de cada lección, deja atrás su código personalizado, proteger así de llevar código incorrecto de una lección a la siguiente.

En nerdlets/ab-test-nerdlet/total-cancellations.js, realiza una solicitud a api.nerdsletter.net con tu token de API. Almacene los resultados en estado y use ese estado en 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>
    }
}

En este código, inicializa TotalCancellations.state.cancellations con cero para el valor y en cada serial en lugar de los valores previamente codificados. Esto ayuda a representar de manera más realista lo que debería mostrar el gráfico si su aplicación New Relic no aplicar correctamente datos de la API de Nerdsletter. A continuación, emplea la función fetch() de Javascript para realizar una solicitud HTTP a la API de Nerdsletter. Luego pasa su token en el encabezado Authorization de la solicitud. Si la solicitud tiene éxito, actualiza los datos de cancelación en TotalCancellations.state para que esos datos se reflejen en el método de representación del componente.

Navega hasta la raíz de tu Nerdpack en nru-programmability-course/third-party-service/ab-test.

Genera un nuevo UUID para tu Nerdpack:

bash

$nr1 nerdpack:uuid -gf

Debido a que clonaste el repositorio de trabajos del curso que contenía un Nerdpack existente, necesitas generar tu propio identificador único. Este UUID asigna su Nerdpack a su cuenta New Relic. También permite que su aplicación realice solicitudes de Nerdgraph en nombre de su cuenta.

Entregue su aplicación localmente:

bash

$nr1 nerdpack:serve

Vaya a https://one.newrelic.com?nerdpacks=local y vea su aplicación en Apps > Your apps.

Si su token en NerdStorageVault no es "ABC123", su consola mostrará un error que dice "Encabezado de autenticación incorrecto".

Si configura el token en "ABC123", Total cancellations per version se actualiza para mostrar los valores del servicio de terceros.

Sugerencia

Si algo no funciona, emplee las herramientas de depuración de su browser para intentar identificar el problema.

Cerciorar:

Copié el código correctamente de la lección.
Generó un nuevo UUID
Reemplazó todas las instancias de <YOUR NEW RELIC ACCOUNT ID> en su proyecto con su New Relic ID de cuenta real

Cuando terminó, deje de servir su aplicación New Relic presionando CTRL+C en la ventana de terminal de su servidor local.

¡Gran trabajo! Recorriste un largo camino desde que ejecutaste nr1 nerdpack:create por primera vez.

Creó ocho gráficos con diferentes estilos y les proporcionó datos dinámicos de múltiples fuentes. Aprendió sobre el SDK de New Relic One y empleó muchos de sus componentes. Incluso recopiló datos de un servicio de terceros y los mezcló sin problemas con sus datos de New Relic para brindar una visión completa de cómo se desempeñan entre sí las versiones competidoras en su Prueba A/B.

A partir de aquí, solo hay un conjunto más de API en el SDK de New Relic One que aún no tienes en tus manos: API de plataforma. Estos serán útiles para mejorar la usabilidad de su aplicación New Relic.

Sugerencia

Esta lección es parte de un curso que le muestra cómo crear una aplicación New Relic desde cero. Continúe con la siguiente lección: agregue PlatformStateContext a su nerdlet.

Te ofrecemos esta traducción automática para facilitar la lectura.

Obtener datos de un servicio de terceros

Sugerencia

Sugerencia

Sugerencia