Nerdlet에 PlatformStateContext 추가

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 아직 확인하지 않았다면 개요를 확인하세요.

과정의 각 단원은 마지막 단원을 바탕으로 구성되므로 이 단원을 시작하기 전에 마지막 단원인 타사 서비스에서 데이터 가져오기를 완료했는지 확인하세요.

이 과정에서는 New Relic 피규어를 구축하게 됩니다. 이 차트는 대시보드와 같은 차트에 해당 데이터를 표시할 수 있도록 A/B 테스트를 실행하는 데모 서비스의 텔레메트리 데이터를 보여줍니다. 하지만 귀하의 New Relic 피규어는 대시보드와는 다릅니다. New Relic 데이터를 표시하는 것 이상의 기능을 수행하기 때문입니다. 외부 데이터를 가져오고 UI 구성 요소와 기능을 제공하며 자체적인 작은 데이터 저장소도 있습니다. 이 New Relic 계약의 목적은 A/B 테스트 결과와 해당 결과가 비즈니스 목표와 어떻게 연결되는지 더 잘 이해할 수 있도록 컨텍스트를 제시하는 것입니다.

지금까지 모든 차트를 작성하고, 유용성을 향상하도록 구성하고, 실제 데이터를 제공하는 등의 작업을 수행했습니다. 플랫폼 API 구성요소를 사용하여 최종적으로 개선할 수 있는 사항이 몇 가지 있습니다. 이 단원에서는 New Relic 플랫폼 상태의 값을 사용하는 방법을 알아봅니다.

해당 과정 의 add-플랫폼-state-context/ab-test 디렉토리로 변경하십시오.

bash

$cd nru-programmability-course/add-platform-state-context/ab-test

이 디렉토리에는 과정의 이 시점에서 귀하의 애플리케이션이 가질 것으로 예상되는 코드가 포함되어 있습니다. 각 레슨을 시작할 때 올바른 디렉토리로 이동하면 사용자 정의 코드를 남겨두어 한 레슨에서 다음 레슨으로 잘못된 코드가 전달되는 것을 방지할 수 있습니다.

nerdlets/ab-test-nerdlet/newsletter-signups.js 에서 NewsletterSignups 구성요소의 render() 메서드에 PlatformStateContext.Consumer 를 추가합니다.

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>

export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

중요

<YOUR NEW RELIC ACCOUNT ID> 실제 New Relic 계정 ID 로 바꿔야 합니다.

NrqlQuery 은 ACCOUNT_ID 이라는 상수를 사용합니다. Nerdlet에서 계정 식별자를 하드코딩하는 대신 플랫폼 URL 상태에서 accountIds 사용할 수 있습니다.

PlatformStateContext.Consumer 플랫폼의 URL 상태에 대한 액세스를 제공합니다. 이 컨텍스트에는 앱에서 사용할 중요한 값인 timeRange 이 포함되어 있습니다.

NrqlQuery 는 쿼리가 데이터를 가져와야 하는 과거 기간을 식별하는 SINCE 절을 사용합니다. 현재 해당 SINCE 절은 30 MINUTES AGO 으로 설정되어 있습니다. timeRange 사용하면 플랫폼의 타임 피커를 사용하여 이 기간을 조정 가능하게 만들 수 있습니다.

플랫폼 상태의 timeRange 를 활용합니다.

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>

export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
                            timeRange={platformState.timeRange}
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

중요

<YOUR NEW RELIC ACCOUNT ID> 실제 New Relic 계정 ID 로 바꿔야 합니다.

이제 NewsletterSignups 하드코딩된 SINCE 절 대신 platformState.timeRange 사용합니다.

NrqlQuery 구성요소는 편리한 timeRange 속성을 허용하지만 모든 구성요소가 허용하는 것은 아닙니다. duration, begin_time 또는 end_time 에 액세스하여 다른 컨텍스트에서 계속 timeRange 사용할 수 있습니다.

<PlatformStateContext.Consumer>
  {(platformState) => {
    console.log(platformState.timeRange.duration);
  }}
</PlatformStateContext.Consumer>;

nru-programmability-course/add-platform-state-context/ab-test 에서 Nerdpack의 루트로 이동합니다.

Nerdpack에 대한 새 UUID를 생성하십시오.

bash

$nr1 nerdpack:uuid -gf

기존 Nerdpack이 포함된 교과 과정 저장소를 복제했으므로 고유한 식별자를 생성해야 합니다. 이 UUID는 Nerdpack을 New Relic 계정에 매핑합니다. 또한 앱이 귀하의 계정을 대신하여 Nerdgraph 요청을 할 수 있도록 허용합니다.

애플리케이션을 로컬로 제공합니다.

bash

$nr1 nerdpack:serve

귀하의 제작을 확인하세요.

이제 NrqlQuery 이 플랫폼 상태의 timeRange 사용하지만 차트에는 여전히 지난 30분이 표시됩니다. 왜? 플랫폼 상태의 timeRange 어디에서 왔나요?

타임 피커는 기능 네비게이션 바 오른쪽에 있습니다.

이 값을 변경하고 차트 업데이트를 확인하세요.

팁

문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.

다음 사항을 확인하세요.

강의에서 코드를 올바르게 복사했습니다.
새로운 UUID를 생성했습니다.
프로젝트에 있는 모든 <YOUR NEW RELIC ACCOUNT ID> 을(를) 실제 New Relic 계정 ID로 대체했습니다.

업데이트 VersionPageViews :

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>

export default class VersionPageViews extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query={`SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' TIMESERIES`}
                            timeRange={platformState.timeRange}
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

중요

<YOUR NEW RELIC ACCOUNT ID> 실제 New Relic 계정 ID 로 바꿔야 합니다.

New Relic의 모든 차트 중에서 이 세 가지 차트가 타임 피커로 업데이트되어야 하는 차트입니다. 기타 Total subscriptions per version [버전별 총 구독 수], Total cancellations per version [버전별 총 취소 수], Version A - Page views vs. subscriptions [버전 A - 페이지 조회수 및 구독 수], ersion B - Page views vs. subscriptions [버전 B - 페이지 조회수 및 구독 수는] 시간 경과에 따른 총 값을 표시합니다. 따라서 SINCE 절을 7 DAYS AGO 로 하드코딩하는 것이 이 과정의 목적에 적합한 기간이기 때문에 의미가 있습니다.

Nerdpack을 로컬로 제공하는 동안 NR1 앱을 보고 선택한 시간 범위에 따라 차트가 업데이트되는지 확인하세요.

팁

문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.

다음 사항을 확인하세요.

강의에서 코드를 올바르게 복사했습니다.
새로운 UUID를 생성했습니다.
프로젝트에 있는 모든 <YOUR NEW RELIC ACCOUNT ID> 을(를) 실제 New Relic 계정 ID로 대체했습니다.

작업이 끝나면 로컬 서버의 터미널 창에서 CTRL+C 눌러 New Relic 피규어 제공을 중지하세요.

이제 플랫폼 상태를 기준으로 쿼리를 기반으로 하므로 일부 차트는 해당 시간 범위에서 동적입니다. 이는 특정 시점의 데이터를 표시하도록 차트를 조정할 수 있기 때문에 크게 개선되었으며, 이는 데이터를 파이낸셜 성과에 연결하는 데 유용합니다.

플랫폼 API 구성 요소는 사용자를 New Relic의 다른 위치로 안내하는 기능을 포함하여 훨씬 더 많은 기능도 제공합니다. 다음 단원에서 이 작업을 수행하는 방법을 배우게 됩니다.

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 강의로 계속 진행하세요. nerdlet에 탐색 기능을 추가하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

팁

중요

중요

팁

중요

팁

팁