Adicione, consulte e altere dados usando NerdStorage

NerdStorage é um banco de dados de documentos acessível no New Relic. Ele permite modificar, salvar e recuperar documentos de uma sessão para outra.

Usando o NerdStorage, você pode criar documentos individuais de até 64 KB, criar diferentes coleções de documentos e armazenar dados por entidade, conta ou nível de usuário.

Este guia explica como adicionar dados e documentos ao NerdStorage.

Antes de você começar

Este guia requer que você tenha uma chave de API e a CLI do New Relic One.

Iniciar

Primeiro, faça com que o aplicativo NerdStorage seja executado com sucesso no New Relic.

Clone o aplicativo de exemplo do repositório GitHub.

Use a CLI do New Relic One para atualizar o UUID do aplicativo e executar o aplicativo localmente.

No terminal, mude para o diretório /nr1-how-to/use-nerdstorage :
bash
```
$cd /nr1-how-to/use-nerdstorage
```

Atualize o UUID e sirva o aplicativo:

bash

$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve

Assim que o aplicativo for servido com sucesso, seu terminal retornará a URL para visualizar seu aplicativo em execução no New Relic.

Carregue o URL. Clique em Apps e em Your apps você verá o aplicativo Use Nerdstorage listado. Clique para lançar o aplicativo.

Adicione dados ao NerdStorage

Assim que o aplicativo estiver instalado e funcionando no New Relic, você poderá prepará-lo e começar a adicionar dados.

Na tela do aplicativo How To Use NerdStorage , há um painel Saved to NerdStorage com um campo para adicionar dados. No entanto, se você digitar algo, receberá uma mensagem de erro. Isso ocorre porque você precisa estar configurado para armazenar dados no nível User . Você pode fazer isso com a ajuda do componente UserStorageMutation .

Abra o arquivo ./nerdlets/use-nerdstorage-nerdlet/index.js do aplicativo no editor de texto de sua preferência e encontre o código de TextField e Button usado para inserir dados. A propriedade Button onClick faz uma chamada para um método auxiliar chamado _addToNerdStorage e você precisa atualizá-lo para adicionar UserStorageMutation

Os componentes UserStorage NerdStorage requerem collection e documentId. No método construtor do arquivo index.js do aplicativo, você pode ver as variáveis sendo fornecidas. No arquivo .js , será parecido com isto:

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);
}

Importe o UserStorageMutation adicionando-o à instrução import na parte superior do arquivo index.js :

import { UserStorageMutation } from 'nr1';

Em seguida, atualize o auxiliar com este código começando com _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));
    });
}

Retorne à tela do aplicativo How To Use NerdStorage em execução no New Relic e recarregue a página.
Adicione algum texto no campo de entrada de texto e clique no botão de verificação. Isso atualizará o NerdStorage e acionará uma notificação Toast dentro do aplicativo. Você deverá então ver o texto digitado exibido como uma linha da tabela abaixo do campo de entrada de texto.

Consultar dados do NerdStorage

Depois de fazer com que o armazenamento de dados funcione conforme descrito na seção acima, você também precisará fazer com que o aplicativo leia corretamente os dados do NerdStorage, ou o aplicativo será recarregado com um estado vazio sempre que você sair da página do aplicativo e voltar. Para fazer isso, adicione o componente UserStorageQuery e atualize o método componentDidMount .

Importe o UserStorageQuery adicionando-o à instrução de importação no arquivo ./nerdlets/use-nerdstorage-nerdlet/index.js do aplicativo.

import { UserStorageMutation, UserStorageQuery } from 'nr1';

Em seguida, adicione o seguinte método componentDidMount ao seu aplicativo:

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 volta ao aplicativo NerdStorage, teste suas alterações adicionando mais algumas linhas usando o campo de entrada de texto. Em seguida, saia e reinicie o aplicativo. O aplicativo deve carregar e mostrar todos os dados que você inseriu antes de sair.

Alterar dados no NerdStorage

Cada entrada do NerdStorage exibida na tabela dentro do aplicativo possui um botão de lixeira que pode ser usado para atualizar uma entrada específica. O botão de lixeira funciona fazendo uma chamada para o método auxiliar _removeFromNerdStorage .

Para que esse processo funcione, atualize o código em _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));
    });
}

Depois de fazer isso, clicar no botão da lixeira remove o item ao qual está associado e o aplicativo é atualizado para mostrar a alteração.

Excluir coleção do NerdStorage

Embora o botão da lixeira seja um bom método para remover entradas específicas, uma de cada vez, você também pode excluir um documento NerdStorage inteiro de uma vez. Você pode fazer isso adicionando o botão Delete Document ao seu aplicativo.

Adicione um novo GridItem ao aplicativo imediatamente antes da tag de fechamento Grid . No novo GridItem adicione o seguinte código para exibir seu novo botão:

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

Como o novo botão Delete Document chamará o método auxiliar _deleteDocument , você precisará atualizá-lo usando este código:

_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 volta ao aplicativo, você deverá ver os botões de lixeira individuais e o botão Delete Document recém-adicionado.

Esta tradução de máquina é fornecida para sua comodidade.