Créer un Nerdpack

Un Nerdpack est un package qui contient tous les fichiers qui composent une application ou une visualisation New Relic. Les Nerdpacks incluent des fichiers pour les métadonnées, les Nerdlets, les ressources et plus encore. Pour créer un Nerdpack, utilisez la CLI New Relic :

$
nr1 create --type nerdpack

Lorsque nr1 vous demande un nom de composant, utilisez « ab-test » et regardez l'outil créer les fondations de votre Nerdpack. Une fois terminé, explorez les fichiers qu'il a créés pour vous.

répertoire racine

Au niveau racine, vous avez un répertoire appelé ab-test. Tout ce qui se trouve dans ce répertoire fait partie du Nerdpack :

$
ls ab-test
README.md         nerdlets          nr1.json          package.json
launchers         node_modules      package-lock.json

Readme.md fournit des instructions pour créer des éléments Nerdpack et servir votre application localement. Ceci et nr1 --help sont utiles si vous oubliez comment interagir avec votre Nerdpack à l'aide de l'outil de ligne de commande.

Fichiers Javascript

package.json, package-lock.json et node_modules sont importants pour l'exécution de votre application JavaScript, mais ne sont pas propres à Nerdpacks. Vous pouvez en apprendre davantage sur ces modules à partir de cours JavaScript si vous avez besoin de les peaufiner. Pour l’instant, jetez un œil à nr1.json, l’un des fichiers les plus pertinents de ce répertoire.

Fichier de métadonnées

nr1.json est le fichier de métadonnées du Nerdpack, contenant un type de schéma, un identifiant unique, un nom d'affichage et une description. Étant donné que vous créez une application New Relic pour exécuter et analyser les tests A/B, mettez à jour le displayName du package sur « test A/B » et définissez la description sur « test A/B de votre application à l'aide de New Relic » :

fileName=nr1.json
{
    "schemaType": "NERDPACK",
    "id": "311bcd0c-f7eb-4285-afed-4219179bf91d",
    "displayName": "A/B Test",
    "description": "A/B test your application using New Relic."
}

Il est bon de décrire l’objectif de votre application, surtout si vous envisagez de la publier pour que d’autres puissent l’utiliser.

Ensuite, regardez les sous-répertoires launchers et nerdlets .

Lanceurs

launchers est un répertoire car vous pouvez créer plusieurs lanceurs pour votre application New Relic. nr1 create n'a créé qu'un seul lanceur pour votre Nerdpack et l'a appelé « ab-test-launcher ». Dans son répertoire, il y a deux fichiers :

• icon.png est une image qui représente l'application
• nr1.json est le fichier de métadonnées du lanceur

Utilisez « test A/B Launcher » pour le displayName du lanceur et « Open the test A/B Nerdlet » pour le description dans nr1.json:

fileName=launchers/ab-test-launcher/nr1.json
{
    "schemaType": "LAUNCHER",
    "id": "ab-test-launcher",
    "displayName": "A/B Test Launcher",
    "description": "Open the A/B test Nerdlet",
    "rootNerdletId": "ab-test-nerdlet"
}

Notez que le lanceur a un rootNerdletId. Ceci identifie le Nerdlet que le lanceur ouvre lorsqu'il est sélectionné. Ce Nerdpack n'a qu'un seul Nerdlet, appelé ab-test-nerdlet, mais certains Nerdpacks peuvent en avoir plusieurs. Assurez-vous de définir le rootNerdletId sur le Nerdlet que vous souhaitez que le lanceur ouvre.

Nerdlets

Le répertoire nerdlets contient tous les Nerdlets qui composent votre application New Relic. Étant donné que ab-test-nerdlet est le seul Nerdlet dans ce Nerdpack, il n'y a qu'un seul sous-répertoire. Dans nerdlets/ab-test-nerdlet, il y a trois fichiers :

• index.js est le fichier JavaScript qui contient votre composant Nerdlet
• styles.scss contient la feuille de style Sass pour votre Nerdlet
• nr1.json contient les métadonnées du Nerdlet

Mettez à jour displayName de votre Nerdlet pour « test A/B » et description pour « contrôler et afficher les résultats de votre test A/B » :

{
  "schemaType": "NERDLET",
  "id": "ab-test-nerdlet",
  "displayName": "A/B Test",
  "description": "Control and view results of your A/B test"
}

Vous avez maintenant personnalisé votre Nerdpack, Nerdlet et lanceur avec des noms d’affichage et des descriptions informatifs, mais que fait réellement votre application ? Consultez index.js pour voir à quoi ressemble votre Nerdlet par défaut :

import React from 'react';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <h1>Hello, ab-test-nerdlet Nerdlet!</h1>;
    }
}

Ici, vous avez AbTestNerdletNerdlet, que nr1 a créé pour vous. Il s'agit d'un composant React qui restitue un titre de bienvenue de premier niveau. Comme il s'agit du Nerdlet racine, comme spécifié dans le fichier nr1.json de votre lanceur, lorsque vous cliquez sur votre lanceur dans la plateforme New Relic, le lanceur ouvrira une vue qui affiche cet en-tête.

$
nr1 create --type nerdlet
$
nr1 create --type launcher

$
nr1 create
? What kind of component do you want to create? › - Use arrow-keys. Return to submit.
    nerdpack
❯   nerdlet - create a/an Nerdlet Nerdpack item inside your Nerdpack.
    launcher
    catalog
    visualization

Dans la prochaine leçon, vous apprendrez à servir votre Nerdpack localement et à voir votre application en action !