Tutorial: Crie um Atlas Search reverso em seu aplicativo usando o Atlas Triggers e o Atlas Search

Crie o componente da caixa de alerta

No diretório src/ do modelo do aplicativo, crie um novo arquivo denominado AlertBox.tsx e insira o seguinte código. Este arquivo inclui o formulário da IU para configurar alertas com base em termos específicos.

import React, {useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {Text, Input, Button} from 'react-native-elements';
import {COLORS} from './Colors';
type Props = {
  onSubmit: ({term}: {term: string}) => void;
};
export function AlertBox(props: Props): React.ReactElement<Props> {
  const {onSubmit} = props;
  const [term, setTerm] = useState('');
  return (
    <View style={styles.modalWrapper}>
      <Text h4 style={styles.addItemTitle}>
        Add Alert Term
      </Text>
      <Input
        placeholder="Enter term"
        onChangeText={(text: string) => setTerm(text)}
        autoCompleteType={undefined}
      />
       <Button
        title="Submit"
        buttonStyle={styles.saveButton}
        onPress={() => onSubmit({term})}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  modalWrapper: {
    width: 300,
    minHeight: 200,
    borderRadius: 4,
    alignItems: 'center',
  },
  addItemTitle: {
    margin: 20,
  },
  saveButton: {
    width: 280,
    backgroundColor: COLORS.primary,
  },
});

Atualize a visualização principal

No src/ItemListView.tsx, importe a caixa de alerta que você acabou de criar, adicionando a linha a seguir no início do arquivo:

import {AlertBox} from './AlertBox';

Em seguida, adicione o código abaixo para renderizar um botão que, ao ser clicado, mostrará uma caixa de alerta:

• No início do bloco da função ItemListView, insira um hook useState() para acompanhar quando a caixa de alerta é exibida:

  src/ItemListView.tsx

  export function ItemListView() {
    const realm = useRealm();
    const items = useQuery(Item).sorted('_id');
    const user = useUser();
    const [showNewItemOverlay, setShowNewItemOverlay] = useState(false);	
    const [showAlertBox, setShowAlertBox] = useState(false);

• Na tela principal, após o botão Add To-Do, adicione um botão Alerts para ativar ou desativar a sobreposição da caixa de alerta:

  src/ItemListView.tsx

  return (
    <SafeAreaProvider>
      <View style={styles.viewWrapper}>
        ...
        <Button
          title="Add To-Do"
          buttonStyle={styles.addToDoButton}
          onPress={() => setShowNewItemOverlay(true)}
          icon={
            <Icon
              type="material"
              name={'playlist-add'}
              style={styles.showCompletedIcon}
              color="#fff"
              tvParallaxProperties={undefined}
            />
          }
        />
        <Button
          title="Alerts"
          buttonStyle={styles.alertButton}
          onPress={() => setShowAlertBox(true)}
          icon={
            <Icon
              type="material"
              name={'add-alert'}
              style={styles.showCompletedIcon}
              color="#fff"
              tvParallaxProperties={undefined}
            />
          }
        />
        <Overlay
          isVisible={showAlertBox}
          onBackdropPress={() => setShowAlertBox(false)}>
          <AlertBox
            onSubmit={({term}) => {
              setShowAlertBox(false);
            }}
          />
        </Overlay>
      </View>
    </SafeAreaProvider>
  );

• Para modificar o tamanho e a cor do botão, insira estas linhas de código no bloco styles localizadas no final do arquivo:

  src/ItemListView.tsx

  const styles = StyleSheet.create({
    ... 
    toggleText: {
      flex: 1,
      fontSize: 16,
    },
    alertButton: {
      backgroundColor: '#808080',
      borderRadius: 4,
      margin: 5,
    }
  });

Criar uma nova coleção

Na IU do Atlas, crie uma coleção para armazenar os termos inseridos pelos usuários no aplicativo:

1. Se você ainda não estiver na página Database Deployments , clique na aba Data Services .

2. Para sincronizar a implantação com o aplicativo modelo, clique em Browse Collections.

3. No menu de navegação à esquerda, selecione o ícone + próximo ao banco de dados todo para criar uma nova coleção.

4. Nomeie a coleção como alerts e clique em Create para salvá-la.

Habilite acesso à coleção

Após criar a coleção, conceda ao seu aplicativo as permissões necessárias para gravar na coleção todo.alerts:

1. Clique na aba App Services.

2. Clique no bloco do seu aplicativo.

3. No menu à esquerda em Data Access, clique em Rules.

4. No banco de dados todo, clique na coleção alerts.

5. Na caixa de diálogo à direita, selecione a função pré-definida readAndWriteAll.

6. Clique em Add preset role para confirmar sua seleção.

7. Por padrão, seu aplicativo habilita esquemas de implantação. Para implantar manualmente suas alterações, clique em Review Draft & Deploy e depois em Deploy.

Grave na coleção

Após definir o acesso de gravação para a coleção todo.alerts, volte ao código do aplicativo.

No início do bloco de função em src/ItemListView.tsx, insira as linhas a seguir para definir uma função assistente que grava dados na coleção:

export function ItemListView() {
  const realm = useRealm();
  const items = useQuery(Item).sorted('_id');
  const user = useUser();
  // addAlert() takes a string input and inserts it as a document in the todo.alerts collection
  const addAlert = async (text: string) => {
    const mongodb = user?.mongoClient("mongodb-atlas");
    const alertTerms = mongodb?.db("todo").collection("alerts");
    await alertTerms?.insertOne({ term: text.toLowerCase() });
  };

A função addAlert() aceita uma string como entrada e utiliza o React Native SDK para se conectar ao Atlas e adicionar um documento com o termo de alerta especificado à coleção no Atlas.

Em seguida, adicione a linha abaixo no controlador do envio da caixa de alerta para chamar addAlert() toda vez que um usuário enviar um termo de alerta no aplicativo:

<Overlay
  isVisible={showAlertBox}
  onBackdropPress={() => setShowAlertBox(false)}>
  <AlertBox
    onSubmit={({term}) => {
      setShowAlertBox(false);
      addAlert(term);
    }}
  />
</Overlay>

Executar e Testar o Aplicativo

Seu aplicativo agora deve permitir que os usuários insiram termos de alerta individualmente para serem armazenados no Atlas.

Recrie o aplicativo e abra-o. Envie alguns termos como important ou urgent para receber alertas. Em seguida, exiba seus documentos na coleção todo.alerts para confirmar se os termos aparecem no Atlas.

criar um índice do atlas search

Para executar queries de pesquisa do Atlas em seus dados, você deve primeiro criar um índice do Atlas Search para mapear os campos em sua coleção. Na IU do Atlas, crie um índice de pesquisa na coleção todo.Item:

1. Retorne à página Database Deployments clicando na aba Data Services .

2. Clique no nome da implantação sincronizada com o aplicativo modelo e, depois, na aba Search.

3. Para criar seu primeiro índice do Atlas Search, clique em Create Search Index.

4. Na página Configuration Method, selecione Visual Editor e clique em Next.

5. Deixe o Index Name definido como default.

6. Na seção Database and Collection, localize o banco de dados todo e selecione a coleção Item.

7. Clique em Next e, em seguida, clique em Create Search Index após revisar o índice.

8. Aguarde o índice para concluir a formação.

   O índice deve levar cerca de um minuto para ser criado. Quando a criação se encerrar, a coluna Status mostrará Active.

Adicione um trigger de banco de dados

Para abrir a página de configuração do trigger de banco de dados na IU do App Services:

1. Clique na aba App Services e selecione o bloco do seu aplicativo.

2. No menu de navegação esquerdo, clique em Triggers.

3. Clique em Add a Trigger e deixe o Trigger type definido como Database.

4. Nomeie o trigger como sendAlerts.

5. Configure o trigger para ouvir somente os novos documentos de tarefas inseridos na coleção todo.Item:

   • Para o Cluster Name, selecione a implantação sincronizada com o aplicativo modelo.

   • Para o Database Name e Collection Name, selecione o banco de dados todo e a coleção Item.

   • Para o Operation Type, selecione Insert.

   • Habilite Full Document para incluir cada novo documento de relatório nos eventos de alteração enviados para a função trigger.

Defina uma função do Atlas

Vá para a seção Function na página de configurações do trigger e escolha + New Function no menu suspenso. Em seguida, defina a função do trigger:

1. Nomeie a função como triggers/sendAlerts.

2. Copie o seguinte código no corpo da função:

   functions/triggers/sendAlerts.js

   exports = async function(changeEvent) {
     
     // Read the summary field from the latest inserted document
     const fullDocument = changeEvent.fullDocument;
     const summary = fullDocument.summary;
     // Connect to your Atlas deployment    
     const mongodb = context.services.get("mongodb-atlas");
     // Read task and alert data from collections in the todo database
     const tasks = mongodb.db("todo").collection("Item");
     const alerts = mongodb.db("todo").collection("alerts");
     const terms = await alerts.distinct("term");
     
     // Check if the task summary matches any of the terms in the alerts collection
     for (let i = 0; i < terms.length ; i++) {
       if (summary.toLowerCase().includes(terms[i])) {
         console.log("The following task has been added to a to-do list: " + summary +
           ". You've been alerted because it contains the term, " + terms[i] + ".");
         // Aggregates any tasks that also contain the term by using an Atlas Search query
         const query = await tasks
         .aggregate([
           {
             $search: {
               compound: {
                 must: [{
                   phrase: {
                     query: terms[i],
                     path: "summary",
                   },
                 }], 
                 mustNot: [{
                   equals: {
                   path: "isComplete",
                   value: true,
                   },
                 }],
               },
             },
           },
           {
             $limit: 5,
           },
           {
             $project: {
               _id: 0,
               summary: 1,
             },
           },
         ])
         .toArray();
         
         relatedTerms = JSON.stringify(query);
         if (relatedTerms != '[]') {
           console.log("Related incomplete tasks: " + relatedTerms);
         }
       }
     }
   };

   Esta função JavaScript retorna uma mensagem nos registros do aplicativo quando o usuário adiciona uma tarefa que contém um termo armazenado na coleção todo.alerts.

   A função executa uma consulta do Atlas Search para localizar outros documentos de tarefa na coleção todo.Item com o mesmo termo de alerta. A consulta usa:

   • O estágio $search do pipeline para executar uma consulta na coleção.

   • As seguintes cláusulas do operador composto:

     • A cláusula must e o operador de frase para executar query para quaisquer tarefas com um campo summary que inclua o termo de alerta.

     • A cláusula mustNot e o operador de igualdade para excluir tarefas já finalizadas.

   • O estágio $limit para limitar a saída a 5 resultados.

   • O estágio $project para excluir todos os campos, exceto summary.

   Observação

   Para mais informações, consulte Crie e execute consultas no Atlas Search.

3. Ao concluir, clique em Save para implantar o trigger.

Executar e Testar o Aplicativo

O Atlas agora notifica quando um usuário cria uma tarefa no aplicativo que contém um termo de alerta.

Reconstrua e execute o aplicativo para garantir que tudo funcione. Insira algumas tarefas que contenham um termo de alerta que você inseriu anteriormente. Em seguida, verifique os logs para visualizar a saída do trigger. No menu suspenso, selecione o tipo Triggers para filtrar os seus registros de trigger.

Por exemplo, ao detectar o termo de alerta important, o log de uma nova tarefa poderia ser assim:

Logs:
[
   "The following task has been added to a to-do list: Complete important tutorial.
   You've been alerted because it contains the term, important.",
   "Related incomplete tasks: [
   {"summary": "Important: Create template app"},
   {"summary": "Add important tasks"},
   {"summary": "Make sure to read the documentation. This is important."}]"
]