Tutorial: Compila Búsqueda Inversa en Tu aplicación usando Activadores y Atlas Search

Crea el componente Cuadro de alerta

En el directorio src/ de la aplicación de plantilla, cree un nuevo archivo AlertBox.tsx y agregue el siguiente código. Este archivo contiene el formulario de interfaz de usuario que le permite introducir los términos sobre los que desea recibir alertas.

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

Actualizar la vista principal

En src/ItemListView.tsx, importe el cuadro de alerta que acaba de definir agregando la siguiente línea en la parte superior del archivo:

import {AlertBox} from './AlertBox';

Luego, agregue el siguiente código para renderizar un botón que muestre el cuadro de alerta cuando se hace clic:

• En la parte superior del bloque de funciones ItemListView, agrega un hook useState() para rastrear la vista del cuadro de alerta:

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

• Después del botón Add To-Do en la vista principal, añade un botón Alerts que activa la superposición del cuadro 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 cambiar el tamaño y el color del botón, agregue las siguientes líneas al bloque styles en la parte inferior del archivo:

  src/ItemListView.tsx

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

Crear una nueva colección

En la interfaz de usuario de Atlas, cree una colección para almacenar los términos que los usuarios introducen en la aplicación:

1. Si aún no estás en el Database Deployments página, haga clic en la pestaña Data Services.

2. Para la implementación que está sincronizada con la aplicación de plantilla, haga clic en Browse Collections.

3. En la navegación izquierda, haga clic en el ícono + junto a la base de datos todo para agregar una nueva colección.

4. Nombra la colección alerts y luego haz clic en Create para guardarla.

Habilitar el acceso a la colección

Después de crear la colección, debe dar a su aplicación los permisos necesarios para guardar en la colección todo.alerts:

1. Haz clic en la pestaña App Services.

2. Haga clic en el mosaico de su aplicación.

3. En la navegación izquierda, bajo Data Access, haga clic en Rules.

4. En la base de datos todo, haga clic en la colección alerts.

5. En el cuadro de diálogo de la derecha, seleccione el rol preestablecido readAndWriteAll.

6. Se debe hacer clic en Add preset role para confirmar la selección.

7. De forma predeterminada, la aplicación habilita los borradores de implementación. Para implementar manualmente los cambios, haga clic Review Draft & Deploy Deployen y luego en.

Guarda en la colección

Una vez que haya configurado el acceso de escritura a la colección todo.alerts, regrese al código de su aplicación.

En src/ItemListView.tsx, agregue las siguientes líneas en la parte superior del bloque de funciones para crear una función auxiliar que escriba en la colección:

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

La función addAlert() recibe una entrada de tipo string y utiliza el React Native SDK para conectarse a Atlas e insertar el término de alerta especificado como documento a tu colección.

A continuación, añade la siguiente línea al controlador de envío de la alerta para llamar a addAlert() cuando un usuario envíe un término de alerta en la aplicación:

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

Ejecutar y probar la aplicación

Su aplicación ahora debería permitir a los usuarios ingresar términos de alerta uno a la vez para almacenarlos en Atlas.

Reconstruya la aplicación y ábrala. Introduzca algunos términos para recibir alertas, como important urgento. Luego, revise sus documentos en la todo.alerts colección para confirmar que los términos aparecen en Atlas.

Crear un índice de Atlas Search

In order to run Atlas Search queries on your data, you must first create an Atlas Search index to map the fields in your collection. In the Atlas UI, create a search index on the todo.Item collection:

1. Regrese a la página Database Deployments haciendo clic en la pestaña Data Services.

2. Haz clic en el nombre de la implementación que se ha sincronizado con la aplicación de plantilla y, a continuación, haz clic en la pestaña Search.

3. Para crear su primer índice de búsqueda de Atlas, haga clic en Create Search Index.

4. En la página Configuration Method, seleccione Visual Editor y haga clic en Next.

5. Deja el Index Name configurado en default.

6. En la sección Database and Collection, busque la base de datos todo y seleccione la colección Item.

7. Haga clic en Next y, a continuación, haga clic en Create Search Index después de revisar el índice.

8. Espere a que el índice termine de construirse.

   El índice debería tardar aproximadamente un minuto en compilar. Una vez finalizada la creación, la columna Status muestra Active.

Add a Database Trigger

Para abrir la página de configuración de activadores de base de datos en la Interfaz de usuario Realm:

1. Haz clic en la pestaña App Services y selecciona la viñeta de tu aplicación.

2. En el menú de navegación de la izquierda, haga clic en Triggers.

3. Haga clic en Add a Trigger y deje Trigger type establecido en Database.

4. Nombra el disparador sendAlerts.

5. Configura el activador para que escuche únicamente los nuevos documentos de tareas insertados en la colección todo.Item:

   • Para Cluster Name, seleccione la implementación que está sincronizada con la aplicación de plantilla.

   • Para Database Name y Collection Name, selecciona la base de datos todo y la colección Item.

   • Para el Operation Type, seleccione Insert.

   • Habilite Full Document para incluir cada nuevo documento de informe en el evento de cambio pasado a la función de activación.

Definir una función Atlas

Vaya a la sección Function de la página de configuración del disparador y seleccione + New Function en el menú desplegable. A continuación, defina la función del disparador:

1. Nombra la función triggers/sendAlerts.

2. Copia el siguiente código en el cuerpo de la función:

   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 función de JavaScript devuelve un mensaje en los registros de su aplicación cuando un usuario ingresa a una tarea que contiene un término almacenado en la colección todo.alerts.

   La función también incluye una consulta de búsqueda de Atlas para encontrar otros documentos de tareas en la colección todo.Item que contengan el mismo término de alerta. La consulta utiliza:

   • La etapa de canalización $search para consultar la colección.

   • The following compound operator clauses:

     • La must cláusula y el operador de frase para consultar cualquier tarea con un summary que contenga el término de alerta.

     • La cláusula mustNot y el operador equals para excluir tareas completadas.

   • La etapa $limit para limitar la salida a 5 resultados.

   • La etapa de $project para excluir todos los campos excepto summary.

   Nota

   To learn more, see Create and Run Atlas Search Queries.

3. Cuando haya terminado, haga clic en Save e implemente el disparador.

Ejecutar y probar la aplicación

Atlas ahora está configurado para avisarte cuando un usuario crea una tarea en la aplicación que contiene un término de alerta.

Reconstruya y ejecute la aplicación para asegurarse de que todo funciona correctamente. Introduzca algunas tareas que contengan un término de alerta que haya introducido previamente. A continuación, revise sus registros para ver el resultado del disparador. Puede filtrar los registros del disparador seleccionando el Triggers tipo en el menú desplegable.

Por ejemplo, si uno de sus términos de alerta es important, la salida del registro para una nueva tarea podría parecerse a la siguiente:

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."}]"
]