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

Crear 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 función ItemListView, agregue un gancho useState() para realizar un seguimiento de 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, agregue un botón Alerts que alterna 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 ingresan 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.

Escribe a 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

Para ejecutar consultas de Atlas Search en sus datos, primero debe crear un índice de Atlas Search para mapear los campos de su colección. En la interfaz de usuario de Atlas, cree un índice de búsqueda en la todo.Item colección:

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

2. Haga clic en el nombre de la implementación que está sincronizada con la aplicación de plantilla y luego haga 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. Deje el Index Name establecido 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 luego en Create Search Index después de revisar su índice.

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

   El índice debería tardar aproximadamente un minuto en generarse. Al finalizar, la columna Status mostrará Active.

Add a Database Trigger

Para abrir la página de configuración del activador de la base de datos en la interfaz de usuario de App Services:

1. Haga clic en la pestaña App Services y seleccione el mosaico para su 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. Configure el disparador para escuchar solo los nuevos documentos de tarea 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. Copie el siguiente código en el cuerpo de la función:

   funciones/disparadores/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 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.

   • Las siguientes cláusulas de operador compuesto:

     • 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

   Para obtener más información,consulte Crear y ejecutar consultas de búsqueda de Atlas.

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