Ajouter, interroger et muter des données à l'aide de NerdStorage

NerdStorage est une base de données de documents accessible dans New Relic. Il vous permet de modifier, d'enregistrer et de récupérer des documents d'une session à l'autre.

Grâce à NerdStorage, vous pouvez créer des documents individuels d'une taille maximale de 64 Ko, créer différentes collections de documents et stocker des données par entité, compte ou niveau utilisateur.

Ce guide explique comment ajouter des données et des documents à NerdStorage.

Avant de commencer

Ce guide nécessite que vous disposiez d'une clé API et de la CLI New Relic.

Démarrer

Tout d’abord, exécutez correctement l’application NerdStorage dans New Relic.

Cloner les exemples d'applications depuis le référentiel GitHub (repository).

Utilisez l’interface de ligne de commande New Relic pour mettre à jour l’UUID de l’application et exécuter l’application localement.

Dans le terminal, passez au répertoire /nr1-how-to/use-nerdstorage :
bash
```
$cd /nr1-how-to/use-nerdstorage
```
Mettez à jour l'UUID et diffusez l'application :
bash
```
$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve
```

Une fois l'application correctement diffusée, votre terminal renverra l'URL pour afficher votre application en cours d'exécution sur New Relic.

Charger l'URL. Cliquez sur Apps et sous Your apps, vous verrez l'application Use Nerdstorage répertoriée. Cliquez pour lancer l'application.

Ajouter des données à NerdStorage

Une fois l'application opérationnelle sur New Relic, vous pouvez préparer l'application et commencer à ajouter des données.

Sur l'écran How To Use NerdStorage , il y a un volet Saved to NerdStorage avec un champ pour ajouter des données. Cependant, si vous tapez quelque chose, vous obtiendrez un message d'erreur. Cela est dû au fait que vous devez être configuré pour stocker des données au niveau User . Vous pouvez le faire à l’aide du composant UserStorageMutation .

Ouvrez le fichier ./nerdlets/use-nerdstorage-nerdlet/index.js de l'application dans l'éditeur de texte de votre choix et recherchez le code des TextField et Button utilisés pour saisir les données. L'accessoire Button onClick appelle une méthode d'assistance appelée _addToNerdStorage et vous devez la mettre à jour pour ajouter UserStorageMutation

Les composants UserStorage NerdStorage nécessitent un collection et documentId. Dans la méthode constructeur du fichier index.js de l'application, vous pouvez voir les variables fournies. Dans le fichier .js , cela ressemblera à ceci :

constructor(props) {
    super(props)
    this.collectionId = 'mycollection';
    this.documentId = 'learning-nerdstorage';
    this.state = {
        isOpen: true,
        storage: [],
        text: '',
    };
    this._addToNerdStorage = this._addToNerdStorage.bind(this);
    this._removeFromNerdStorage = this._removeFromNerdStorage.bind(this);
    this._deleteDocument = this._deleteDocument.bind(this);
}

Importez le UserStorageMutation en l'ajoutant à votre instruction import en haut du fichier index.js :

import { UserStorageMutation } from 'nr1';

Mettez ensuite à jour l'assistant avec ce code commençant par _addToNerdStorage:

_addToNerdStorage(){
    const { text, storage } = this.state;
    storage.push(text);
    this.setState({storage}, () => {
        UserStorageMutation.mutate({
            actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
            collection: this.collectionId,
            documentId: this.documentId,
            document: { storage },
        })
        .then((res) => {
            this.setState({text: ''});
            Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
        })
        .catch((err) => console.log(err));
    });
}

Revenez à l’écran d’exécution de l’application How To Use NerdStorage dans New Relic et rechargez la page.
Ajoutez du texte dans le champ de saisie de texte et cliquez sur le bouton de vérification. Cela mettra à jour NerdStorage et déclenchera une notification Toast dans l'application. Vous devriez alors voir le texte que vous avez tapé affiché sous forme de ligne de tableau sous le champ de saisie de texte.

requêter les données de NerdStorage

Une fois que le stockage de données fonctionne comme décrit dans la section ci-dessus, vous devez également faire en sorte que l'application lise correctement les données de NerdStorage, sinon l'application se rechargera avec un état vide chaque fois que vous quitterez la page de l'application et y reviendrez. Pour ce faire, ajoutez le composant UserStorageQuery et mettez à jour la méthode componentDidMount .

Importez le UserStorageQuery en l'ajoutant à l'instruction d'importation dans le fichier ./nerdlets/use-nerdstorage-nerdlet/index.js de l'application.

import { UserStorageMutation, UserStorageQuery } from 'nr1';

Ajoutez ensuite la méthode componentDidMount suivante à votre application :

componentDidMount(){
    UserStorageQuery.query({
        collection: this.collectionId,
        documentId: this.documentId,
    })
    .then(({ data }) => {
        if(data !== null) {
            this.setState({storage: data.storage});
        }
    })
    .catch(err => console.log(err));
}

De retour dans l’application NerdStorage, testez vos modifications en ajoutant quelques lignes supplémentaires à l’aide du champ de saisie de texte. Quittez ensuite et relancez l'application. L'application doit charger et afficher toutes les données que vous avez saisies avant de partir.

Muter les données dans NerdStorage

Chaque entrée NerdStorage affichée dans le tableau à l'intérieur de l'application dispose d'un bouton Corbeille qui peut être utilisé pour mettre à jour une entrée spécifique. Le bouton de la corbeille fonctionne en appelant la méthode d'assistance _removeFromNerdStorage .

Pour que ce processus fonctionne, mettez à jour le code dans _removeFromNerdStorage:

_removeFromNerdStorage(index, data){
    const { storage } = this.state;
    storage.pop(data);

    this.setState({storage}, () => {
        UserStorageMutation.mutate({
            actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
            collection: this.collectionId,
            documentId: this.documentId,
            document: { storage },
        })
        .then((res) => {
            Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
        })
        .catch((err) => console.log(err));
    });
}

Une fois cette opération effectuée, cliquez sur le bouton de la corbeille pour supprimer l'élément auquel il est associé et l'application se met à jour pour afficher la modification.

Supprimer la collection de NerdStorage

Bien que le bouton de la corbeille soit une bonne méthode pour supprimer des entrées spécifiques une par une, vous souhaiterez peut-être également pouvoir supprimer un document NerdStorage entier en une seule fois. Vous pouvez le faire en ajoutant le bouton Delete Document à votre application.

Ajoutez un nouveau GridItem à l’application immédiatement avant la tag de fermeture Grid. Dans le nouveau GridItem ajoutez le code suivant pour afficher votre nouveau bouton :

<Button
  onClick={() => this._deleteDocument()}
  type={Button.TYPE.DESTRUCTIVE}
  sizeType={Button.SIZE_TYPE.SMALL}
  iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__TRASH}
>
  Delete Document
</Button>;

Étant donné que le nouveau bouton Delete Document appellera la méthode d'assistance _deleteDocument , vous devrez la mettre à jour à l'aide de ce code :

_deleteDocument(){
    this.setState({storage: []});
    UserStorageMutation.mutate({
        actionType: UserStorageMutation.ACTION_TYPE.DELETE_DOCUMENT,
        collection: this.collectionId,
        documentId: this.documentId,
    });
    Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.CRITICAL });
}

De retour dans l'application, vous devriez maintenant voir les deux boutons de la corbeille individuelle et le bouton Delete Document nouvellement ajouté.

Cette traduction automatique est fournie pour votre commodité.