튜토리얼: Atlas Triggers 및 Atlas Search를 사용하여 애플리케이션에 역방향 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. 왼쪽 탐색의 Data Access에서 Rules를 클릭합니다.

4. todo 데이터베이스에서 alerts 컬렉션을 클릭합니다.

5. 오른쪽 대화 상자에서 사전 설정된 역할 readAndWriteAll을 선택합니다.

6. Add preset role을 클릭하여 선택을 확인합니다.

7. 기본적으로 애플리케이션에서는 배포 초안을 활성화합니다. 변경 사항을 수동으로 배포하려면 Review Draft & Deploy에 이어서 Deploy를 차례로 클릭합니다.

컬렉션에 쓰기

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() 함수는 문자열 입력을 받고 React Native SDK를 사용하여 Atlas에 연결하고 지정된 경고 용어를 컬렉션에 문서로 삽입합니다.

그런 다음 사용자가 앱에서 알림 용어를 제출할 때 addAlert()를 호출하도록 알림 상자 제출 핸들러에 다음 줄을 추가합니다.

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

앱 실행 및 테스트

이제 앱에서는 사용자가 알림 용어를 한 번에 하나씩 입력하여 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에서 데이터베이스 트리거 구성 페이지를 열려면 다음을 수행합니다.

1. App Services 탭을 클릭하고 앱의 타일을 선택합니다.

2. 왼쪽 탐색 메뉴에서 Triggers을 클릭합니다.

3. Add a Trigger를 클릭하고 Trigger type을 Database로 설정된 상태로 둡니다.

4. 트리거의 이름을 sendAlerts로 지정합니다.

5. todo.Item 컬렉션에 삽입된 새 작업 문서만 수신하도록 트리거를 구성합니다.

   • Cluster Name의 경우 템플릿 앱에 동기화된 배포를 선택합니다.

   • Database Name 및 Collection Name의 경우 todo 데이터베이스와 Item 컬렉션을 선택합니다.

   • Operation Type에서 Insert를 선택합니다.

   • 트리거 함수에 전달된 변경 이벤트에 각각의 새 보고서 문서를 포함하려면 Full Document를 활성화합니다.

Atlas Function 정의

트리거 구성 페이지의 Function 섹션으로 이동하여 드롭다운 메뉴에서 + New Function을 선택합니다. 그런 다음 트리거의 함수를 정의합니다.

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 단계.

   • summary를 제외한 모든 필드를 제외하는 $project 단계.

   참고

   자세한 내용은 Atlas Search 쿼리 만들기 및 실행을 참조하세요.

3. 완료했으면 Save를 클릭하고 트리거를 배포합니다.

앱 실행 및 테스트

이제 Atlas는 사용자가 앱에서 알림 용어가 포함된 작업을 만들 때 알림을 보내도록 설정되었습니다.

앱을 다시 구축하고 실행하여 모든 것이 작동하는지 확인합니다. 이전에 입력한 알림 용어가 포함된 몇 가지 작업을 입력합니다. 그런 다음 로그를 확인하여 트리거의 출력을 확인합니다. 드롭다운 메뉴에서 Triggers 유형을 선택하여 트리거 로그를 필터링할 수 있습니다.

예를 들어 알림 용어 중 하나가 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."}]"
]