チュートリアル: 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 にGoします。 既存のnewTaskIsCompleteプロパティの下に新しいintプロパティを追加します。 次に、このプロパティのデフォルトの int 値を保存するためにstatic const 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 にGoします。 このコントローラーは、アプリのメインビューをレンダリングします。

   string ライブラリとベクトル ライブラリをインポートします。

   #include <string>
   #include <vector>

   新しい優先順位 UI 要素のstringラベルの配列を作成します。

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

3. まだ controllers ディレクトリにある場合は、home_controller.cpp にGoします。 ここで、ユーザーがアイテムの優先順位を設定できるように UI 要素を追加します。 FTXUI は、この機能に使用できる 2 つの UI 要素を提供しています（ RadioboxまたはDropdown 。 このチュートリアルでは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ファイルのさらに下にあるセカンダリの UI 要素をauto itemListRendererに追加します。

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

   これにより、UI の 保存 ボタンの直前に新しい要素がレンダリングされます。

新しいプロパティをデータベースに保存する

1. managers ディレクトリで、database_manager.hpp にGoします。 addNew()関数のシグネチャを更新して、 home_controller.cppから渡すint newItemPriorityを含めます。

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

2. 次に database_manager.cpp にGoし、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

このチュートリアルの前半で作成したアカウントを使用してログインします。 過去に作成した 1 つのアイテムが表示されます。新しいアイテムを追加すると、優先順位を設定できるようになります。優先順位を High にし、アイテムを保存します。

ブラウザで Atlas データページに切り替え、 Itemコレクションを更新します。 これでpriorityフィールドが追加され、 1に設定された新しいアイテムが表示されます。 既存のアイテムにはpriorityフィールドはありません。

クリックして拡大します

サブスクライブを更新する

サブスクリプションを変更するには、managers ディレクトリにGoし、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 はアイテムをローカルに作成し、バックエンドと同期した後、サブスクライブ ルールを満たしていないため書き込みを元に戻します。