튜토리얼: FTXUI를 사용한 C++용 Atlas Device Sync

모델에 속성 추가

이제 모든 것이 예상대로 작동하는지 확인했으므로 변경 사항을 추가할 수 있습니다. 이 튜토리얼에서는 우선 순위에 따라 항목을 필터링할 수 있도록 각 Item에 priority 속성을 추가합니다.

프로덕션 앱에서는 PriorityLevel 열거형을 추가하여 사용 가능한 값을 제한할 수 있습니다. 이 튜토리얼에서는 숫자 속성을 사용하여 UI 프레임워크 작업을 간소화하겠습니다.

이렇게 하려면 다음 단계를 따라 진행합니다.

1. 원하는 IDE에서 클라이언트 코드를 엽니다.

2. state/ 디렉터리에서 item.hpp 파일을 엽니다.

3. Item 구조체에 다음 속성을 추가합니다.

   int64_t priority;

4. 새 priority 속성을 REALM_SCHEMA()에 추가합니다.

   REALM_SCHEMA(Item, _id, isComplete, summary, owner_id, priority)

   이제 Item 모델이 다음과 유사하게 표시되어야 합니다.

   namespace realm {
   struct Item {
     realm::primary_key<realm::object_id> _id{realm::object_id::generate()};
     bool isComplete;
     std::string summary;
     std::string owner_id;
     int64_t priority;
   };
   REALM_SCHEMA(Item, _id, isComplete, summary, owner_id, priority)
   }  // namespace realm

UI에 요소를 추가하여 우선 순위 설정

1. state 디렉토리에서 home_controller_state.hpp(으)로 이동합니다. 기존 newTaskIsComplete 속성 아래에 새 int 속성을 추가합니다. 그런 다음 static const int(을)를 추가하여 이 속성의 int 기본값을 저장합니다.

   이제 HomeControllerState 구조체는 다음과 비슷할 수 있습니다.

   struct HomeControllerState {
     static const int DEFAULT_TASK_PRIORITY = 3;
     // Used for creating a new task.
     std::string newTaskSummary;
     bool newTaskIsComplete{false};
     int newTaskPriority{DEFAULT_TASK_PRIORITY};
     ...more code here...
   };

2. controllers 디렉토리에서 home_controller.hpp로 이동합니다. 이 컨트롤러는 앱의 기본 보기를 렌더링합니다.

   문자열 및 벡터 라이브러리를 가져옵니다.

   #include <string>
   #include <vector>

   새 우선 순위 UI 요소에 대한 문자열 레이블의 배열을 만듭니다.

   std::vector<std::string> priorityLevelLabels = {
     "Severe", "High", "Medium", "Low"
   };

3. 여전히 controllers 디렉토리에서 home_controller.cpp (으)로 이동합니다. 여기에 사용자가 항목의 우선순위를 설정할 수 있는 UI 요소를 추가합니다. FTXUI는 이 기능에 사용할 수 있는 Radiobox 또는 Dropdown 의 두 가지 UI 요소를 제공합니다. 이 튜토리얼에서는 Dropdown (을)를 사용하지만, UI가 드롭다운을 렌더링하기 위해 리플로우되는 방식이 마음에 들지 않는다면 Radiobox(을)를 선호할 수 있습니다.

   이 새 UI 요소 입력을 auto newTaskCompletionStatus 줄 뒤에 추가합니다.

   auto newTaskPriorityDropdown = ftxui::Dropdown(
     &priorityLevelLabels,
     &_homeControllerState.newTaskPriority
   );

   auto saveButton 함수 클로저에서 작업 우선 순위 선택을 _dbManager.addNew() 함수 호출에 전달합니다.

   _dbManager.addNew(
     _homeControllerState.newTaskIsComplete,
     _homeControllerState.newTaskSummary,
     _homeControllerState.newTaskPriority);

   그다음, 우선 순위 선택 항목을 기본값으로 재설정하는 줄을 추가합니다.

   _homeControllerState.newTaskPriority = HomeControllerState::DEFAULT_TASK_PRIORITY;

   항목 행 컨테이너의 대화형 요소 레이아웃을 설정하는 auto newTaskLayout 항목에 드롭다운 선택기를 추가합니다.

   auto newTaskLayout = ftxui::Container::Horizontal(
     {inputNewTaskSummary, newTaskCompletionStatus, newTaskPriorityDropdown, saveButton});

   이제 코드의 이 섹션이 다음과 유사하게 표시되어야 합니다.

   auto newTaskCompletionStatus = ftxui::Checkbox("Complete", &_homeControllerState.newTaskIsComplete);
   auto newTaskPriorityDropdown = ftxui::Dropdown(
     &priorityLevelLabels,
     &_homeControllerState.newTaskPriority);
   auto saveButton = ftxui::Button("Save", [this] {
     _dbManager.addNew(
       _homeControllerState.newTaskIsComplete,
       _homeControllerState.newTaskSummary,
       _homeControllerState.newTaskPriority);
     _homeControllerState.newTaskSummary = "";
     _homeControllerState.newTaskIsComplete = false;
     _homeControllerState.newTaskPriority = HomeControllerState::DEFAULT_TASK_PRIORITY;
   });
   auto newTaskLayout = ftxui::Container::Horizontal(
     {inputNewTaskSummary, newTaskCompletionStatus, newTaskPriorityDropdown, saveButton});

4. 마지막으로 home_controller.cpp 파일의 아래쪽에 있는 auto itemListRenderer에 새 UI 요소를 추가합니다.

   inputNewTaskSummary->Render() | ftxui::flex,
   newTaskCompletionStatus->Render() | ftxui::center,
   newTaskPriorityDropdown->Render(),
   saveButton->Render(),

   그러면 UI의 저장 버튼 바로 앞에 새 요소가 렌더링됩니다.

데이터베이스에 새 속성 저장

1. managers 디렉토리에서 database_manager.hpp로 이동합니다. addNew() 함수 시그니처를 업데이트하여 home_controller.cpp에서 전달한 int newItemPriority를 포함하도록 합니다.

   void addNew(
     bool newItemIsComplete,
     std::string newItemSummary,
     int newItemPriority);

2. 이제 database_manager.cpp로 이동하여 addNew() 구현을 업데이트합니다. 함수 인수에 int newItemProperty 추가:

   void DatabaseManager::addNew(
     bool newItemIsComplete,
     std::string newItemSummary,
     int newItemPriority) {
     ...implementation...
     }

   Item을 데이터베이스에 저장할 때 priority 속성 값을 설정하기 위해 함수에 새 줄을 추가합니다.

   .priority = newItemPriority

   addNew() 구현은 이제 다음과 같아야 합니다.

   void DatabaseManager::addNew(bool newItemIsComplete, std::string newItemSummary, int newItemPriority) {
     auto item = realm::Item {
       .isComplete = newItemIsComplete,
       .summary = std::move(newItemSummary),
       .owner_id = _userId,
       .priority = newItemPriority
     };
     _database->write([&]{
       _database->add(std::move(item));
     });
   }

실행 및 테스트

이 시점에서 애플리케이션을 다시 빌드하고 실행합니다. 빌드 디렉토리에서 변경한 내용을 적용하여 실행 파일을 다시 빌드합니다:

cmake --build .

그리고 다음과 같이 앱을 실행하세요.

./sync_todo /path-to-file/atlasConfig.json

이 튜토리얼의 앞부분에서 생성한 계정을 사용하여 로그인합니다. 이전에 생성한 하나의 항목이 표시됩니다. 새 항목을 추가하면 이제 우선 순위를 설정할 수 있는 것을 볼 수 있습니다. 우선 순위로 High를 선택하고 항목을 저장합니다.

이제 브라우저에서 Atlas 데이터 페이지로 다시 전환하고 Item 컬렉션을 새로 고침 하십시오. 그러면 priority 필드가 추가되고 1로 설정된 새 항목이 표시됩니다. 기존 항목에는 priority 필드가 없습니다.

클릭하여 확대

구독 업데이트

구독을 변경하려면 managers 디렉토리로 이동하여 database_manager.cpp 파일을 엽니다. 우선 순위가 1과 같거나 작은 같은 문서를 포함하도록 쿼리 문을 업데이트합니다. 여기에는 '심각'(0) 또는 '높음'(1) 우선 순위의 항목만 포함되어야 합니다.

if (!subs.find(_myItemSubscriptionName)) {
  subs.add<realm::Item>(
    _myItemSubscriptionName,
    [&](auto &item){
      return item.owner_id == _userId && item.priority <= 1;
    }
  );
}

실행 및 테스트

애플리케이션을 다시 실행합니다. 이 튜토리얼의 앞부분에서 생성한 계정을 사용하여 로그인합니다. Subscription 상자에서 Switch to Mine 버튼을 누릅니다. SDK에서 문서 컬렉션을 다시 동기화하는 초기 시점 이후에는 사용자가 만든 새로운 높음 우선 순위 항목만 볼 수 있습니다. 마우스를 움직이거나 화살표 키를 사용하여 UI가 백그라운드에서 동기화된 새 항목으로 다시 렌더링되도록 해야 할 수도 있습니다.

처음에 생성한 항목 문서에는 priority 필드가 없기 때문에 장치에 표시되지 않습니다. 이 항목을 장치와 동기화하려면 Atlas UI에서 문서를 편집하고 priority 필드에 값을 추가할 수 있습니다.

기능을 추가로 테스트하려면 다양한 우선 순위의 항목을 생성할 수 있습니다. 우선 순위가 낮은 새 항목이 항목 목록에 잠시 나타났다가 사라지는 것을 볼 수 있습니다. 동기화 오류 처리기는 이 동작을 설명하는 메시지를 유용하게 제공합니다.

A sync error occurred. Message:
"Client attempted a write that is not allowed; it has been reverted"

이 시나리오에서 SDK는 항목을 로컬에서 생성하고 백엔드와 동기화한 후 쓰기를 되돌립니다(구독 규칙을 충족하지 않기 때문).