Nerdlet에 탐색 추가

팁

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

과정의 각 레슨은 마지막 레슨을 기반으로 하므로 이 레슨을 시작하기 전에 마지막 레슨인 Add PlatformStateContext를 nerdlet에 완료했는지 확인하세요.

지난 강의에서는 New Relic One SDK의 PlatformStateContext 사용하여 사용자가 앱의 타임피커에서 선택한 시간 범위를 조회했습니다. 이제 New Relic 플랫폼과 상호작용하는 또 다른 구성요소인 navigation 에 대해 알아보겠습니다.

navigation 구성요소를 사용하면 엔터티를 열고, 엔터티로 이동하고, Nerdlet에서 엔터티에 대한 위치 개체를 빌드할 수 있습니다. 다른 Nerdlet 및 실행 프로그램에 navigation 사용할 수도 있습니다.

교과 과정 저장소 의 add-navigation/ab-test 디렉터리로 변경합니다.

bash

$cd nru-programmability-course/add-navigation/ab-test

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

newsletter-signups.js 에서 NewsletterSignups.openApmEntity() 이라는 새 메서드를 만듭니다.

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

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

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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 로 바꿔야 합니다.

이 메서드는 navigation.openStackedEntity() 사용하여 데모 애플리케이션의 APM 엔터티를 누적 보기에 표시합니다. 공지사항 openApmEntity() 에는 ENTITY_GUID 이(가) 필요합니다. 해당 ID를 찾아 상수에 저장해야 합니다.

APM 으로 이동합니다.

Newsletter [뉴스레터] 서비스에 대한 메타데이터를 확인하세요.

엔터티의 GUID를 복사합니다.

ENTITY_GUID 상수를 만듭니다.

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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> 및 <YOUR NEW RELIC ENTITY GUID> 각각 실제 New Relic 계정 ID 와 방금 복사한 엔터티 GUID로 바꿔야 합니다.

이제 openApmEntity() (는) 엔터티가 무엇을 보여줄지 알고 있습니다. 다음으로 이 메서드를 호출하는 버튼을 만들어야 합니다.

APM 엔터티를 표시하는 버튼을 만듭니다.

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> 및 <YOUR NEW RELIC ENTITY GUID> 각각 실제 New Relic 계정 ID 및 엔터티 GUID로 바꿔야 합니다.

여기서는 버튼을 만들고 클릭 시 openApmEntity() 호출하도록 구성했습니다.

Stack 및 StackItem 가져오기:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> 및 <YOUR NEW RELIC ENTITY GUID> 각각 실제 New Relic 계정 ID 및 엔터티 GUID로 바꿔야 합니다.

Stack 및 StackItem 사용하여 HeadingText 가 있는 동일한 행의 맨 오른쪽에 버튼을 배치합니다.

Stack 레이아웃:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <Stack fullWidth>
                <StackItem grow={true}>
                    <HeadingText className="chartHeader">
                        Newsletter subscriptions per version
                    </HeadingText>
                </StackItem>
                <StackItem>
                    <Button onClick={this.openAPMEntity}>
                        App performance
                    </Button>
                </StackItem>
            </Stack>
            <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> 및 <YOUR NEW RELIC ENTITY GUID> 각각 실제 New Relic 계정 ID 및 엔터티 GUID로 바꿔야 합니다.

여기서는 행의 레이아웃을 설정하기 위해 전체 너비 Stack 사용했습니다. HeadingText 이 버튼 너비를 제외한 전체 행을 채우도록 하려면 StackItem.grow 소품을 사용했습니다.

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

https://one.newrelic.com?nerdpacks=local 로 이동하여 Apps [앱] > Your apps [클릭하면] 아래에서 애플리케이션을 확인하세요.

App performance [앱 성능 을] 클릭합니다.

이제 누적된 엔터티가 표시됩니다.

팁

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

다음 사항을 확인하세요.

강의에서 코드를 올바르게 복사했습니다.
새로운 UUID를 생성했습니다.
프로젝트의 <YOUR NEW RELIC ACCOUNT ID> 및 <YOUR NEW RELIC ENTITY GUID> 의 모든 lib을 각각 실제 뉴렐릭 계정 ID 및 엔터티 GUID로 교체했습니다.

축하해요! New Relic A/B 테스트에 대해 작성할 모든 코드 작성을 마쳤습니다. 이제 A/B 테스트를 실행하는 데모 서비스의 데이터 보고 New Relic이 생겼습니다. 여러 차트, 버튼, 기타 UI 요소를 만들었습니다. 그리고 읽기 쉽고 사용 가능한 보기로 구성 요소를 구성했습니다.

시각적 요소 외에도 New Relic 내부 및 외부의 여러 데이터 소스에서 차트에 데이터를 제공했습니다. 귀하는 New Relic 자체 데이터 저장소를 활용하는 몇 가지 백앤드 기능을 만들었습니다. 또한 플랫폼 UI와 상호 작용하고 누적 엔터티 보기를 표시하기 위해 플랫폼 API를 활용했습니다.

지금까지 이 과정을 통해 정말 많은 성과를 이루셨습니다. 이제 해야 할 일이 몇 가지밖에 남지 않았습니다! 첫째, 자신의 로컬 서버가 아닌 우리 플랫폼에서 실행할 수 있도록 New Relic 제작을 게시하고 구독하는 방법을 배우는 것입니다. 두 번째는 New Relic 개발에서 볼 수 있는 몇 가지 일반적인 문제를 처리하는 방법을 배우는 것입니다.

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 강의로 계속 진행하세요. 카탈로그용 앱을 설명하세요.

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

팁

중요

중요

중요

중요

중요

팁

팁