チュートリアル:Atlas Search Atlas Triggersと を使用したアプリケーションへのリバース のビルドAtlas Search

アラート ボックス コンポーネントの作成

テンプレート アプリのsrc/ディレクトリに新しいAlertBox.tsxファイルを作成し、次のコードを追加します。 このファイルには、アラートを発行するタームを入力できる UI フォームが含まれています。

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

メインビューを更新

src/ItemListView.tsxでは、ファイルの先頭に次の行を追加して、先ほど定義したアラート ボックスをインポートします。

import {AlertBox} from './AlertBox';

次に、次のコードを追加して、クリック時にアラート ボックスを表示するボタンをレンダリングします。

• ItemListView関数ブロックの上部に、アラート ボックス ビューを追跡するためのuseState()フックを追加します。

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

• メインビューの [ Add To-Doボタンの後に、アラート ボックスのオーバーレイを切り替えるAlertsボタンを追加します。

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

• ボタンのサイズと色を変更するには、 ファイルの下部にあるstylesブロックに次の行を追加します。

  src/ItemListView.tsx

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

新しいコレクションの作成

Atlas UI で、ユーザーがアプリに入力するタームを保存するための コレクションを作成します。

1. まだ Database Deploymentsページに到達していない場合は、 Data Servicesタブをクリックします。

2. テンプレート アプリに同期されている配置で [] Browse Collectionsをクリックします。

3. 左側のナビゲーションで、 todoデータベースの横にある+アイコンをクリックして、新しいコレクションを追加します。

4. コレクションにalertsと名付け、 Createをクリックしてコレクションを保存します。

コレクションへのアクセスを有効にする

コレクションを作成したら、 todo.alertsコレクションへの書き込みに必要な権限をアプリに付与する必要があります。

1. [App Services] タブをクリックします。

2. アプリのタイルをクリックします。

3. 左側のナビゲーションで [ Rules Data Access ] の下の [] をクリックします。

4. todoデータベースで、 alertsコレクションをクリックします。

5. 右側のダイアログボックスで、 readAndWriteAll事前設定されたロールを選択します。

6. [Add preset role] をクリックして選択を確定します。

7. デフォルトでは、アプリケーションは配置案を有効にします。 変更を手動で配置するには、 Review Draft & Deployをクリックし、 Deployをクリックします。

コレクションへの書込み (write)

todo.alertsコレクションへの書込みアクセスを設定したら、アプリケーション コードに戻ります。

src/ItemListView.tsxでは、関数ブロックの先頭に次の行を追加して、 コレクションに書込むヘルパー関数を作成します。

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

addAlert()関数は string 入力を受け取り、 React Native SDKを使用して Atlas に接続し、指定されたアラート タームをドキュメントとしてコレクションに挿入します。

次に、ユーザーがアプリでアラートタームを送信したときにaddAlert()を呼び出すように、アラートボックス送信ハンドラーに次の行を追加します。

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

アプリを実行・テストする

これで、ユーザーが一度に 1 つずつアラート タームを入力して Atlas に保存できるようになります。

アプリを再ビルドして開きます。 importantやurgentなど、アラートが発行されるいくつかのタームを入力します。 次に、 todo.alertsコレクション内のドキュメントを表示して、タームが Atlas に表示されることを確認します。

Atlas Search インデックスの作成

データに対して Atlas Search クエリを実行するには、まずコレクション内のフィールドをマッピングするためのAtlas Search インデックスを作成する必要があります。 Atlas UI で、 todo.Itemコレクションに検索インデックスを作成します。

1. [ Data Services ] タブをクリックしてDatabase Deploymentsページに戻ります。

2. テンプレート アプリに同期されている配置の名前をクリックし、 Searchタブをクリックします。

3. 最初の Atlas Search インデックスを作成するには、 Create Search Indexをクリックします。

4. Configuration Methodページで、 Visual Editorを選択し、 Nextをクリックします。

5. Index Nameをdefaultに設定したままにします。

6. Database and Collectionセクションで、 todoデータベースを検索し、 Itemコレクションを選択します。

7. [ Next ] をクリックし、インデックスを確認した後 [ Create Search Index ] をクリックします。

8. インデックスの作成が完了するまで待ちます。

   インデックスの構築には約 1 分かかります。 作成が完了すると、 Status列にはActiveと表示されます。

Add a Database Trigger

App Services UI でデータベースtrigger設定ページを開くには、次の手順に従います。

1. [ App Services ] タブをクリックし、アプリのタイルを選択します。

2. 左側のナビゲーション メニューで、[ Triggers ] をクリックします。

3. Add a Triggerをクリックし、 Trigger typeをDatabaseに設定したままにします。

4. trigger をsendAlertsと名付けます。

5. todo.Itemコレクションに挿入された新しいタスク ドキュメントのみをリッスンするように trigger を設定します。

   • Cluster Nameには、テンプレート アプリに同期されている配置を選択します。

   • Database NameとCollection Nameには、 todoデータベースとItemコレクションを選択します。

   • Operation TypeでInsertを選択します。

   • 新しい各レポート ドキュメントを trigger 関数に渡される変更イベントに含めるには、 Full Documentを有効にします。

Atlas Functionの定義

trigger 構成ページの [ Function ] セクションに移動し、ドロップダウン メニューから [ + New Function ] を選択します。 次に、trigger の関数を定義します。

1. 関数をtriggers/sendAlertsます。

2. 次のコードを関数本体にコピーします。

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

   この JavaScript 関数は、 todo.alertsコレクションに保存されているタームを含むタスクをユーザーが入力したときに、アプリケーション ログにメッセージを返します。

   この関数には、同じアラートタームを含むtodo.Itemコレクション内の他のタスク ドキュメントを検索するための Atlas Search クエリも含まれています。 クエリでは以下を使用します。

   • コレクションをクエリするための$searchパイプライン ステージ。

   • 次の複合演算子句。

     • アラート タームを含むsummaryを持つタスクをクエリするmust句とフレーズ演算子。

     • 完了したタスクを除外するには、 mustNot句と は 演算子と等しくなります。

   • 出力を5の結果に制限する$limitステージ。

   • $projectステージでは、 summaryを除くすべてのフィールドが除外されます。

   注意

   詳しくは、「 Atlas Search クエリの作成と実行 」を参照してください。

3. それが完了したら、[ Save ] をクリックして trigger を配置します。

アプリを実行・テストする

Atlas は、ユーザーがアラート期間を含むタスクをアプリ内で作成したときにアラートを発行するように設定されるようになりました。

アプリを再構築して実行し、すべてが動作することを確認します。 以前に入力したアラート タームを含むタスクをいくつか入力します。 次に、ログを表示して、trigger からの出力を確認します。 ドロップダウン メニューからTriggersタイプを選択すると、 trigger ログをフィルタリングできます。

たとえば、アラート タームの 1 つがimportantの場合、新しいタスクのログ出力は次のようになります。

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