Tutorial: Atlas Device Sync para C++ con FTXUI

Agregar una propiedad al modelo

Ahora que ha confirmado que todo funciona correctamente, puede añadir cambios. En este tutorial, añadirá una propiedad priority a cada Item para poder filtrar los elementos por prioridad.

En una aplicación de producción, podrías añadir una enumeración PriorityLevel para restringir los valores posibles. En este tutorial, usaremos una propiedad numérica para agilizar el trabajo con el framework de la interfaz de usuario.

Para ello siga estos pasos:

1. Abra el código del cliente en su IDE preferido.

2. En el directorio state/, abra el archivo item.hpp.

3. Agregue la siguiente propiedad a la estructura Item:

   int64_t priority;

4. Agregue la nueva propiedad priority a REALM_SCHEMA():

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

   El modelo Item ahora debería parecerse a:

   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

Agregar un elemento a la interfaz de usuario para establecer la prioridad

1. En el directorio state, vaya a home_controller_state.hpp. Añada una nueva propiedad int bajo la propiedad newTaskIsComplete existente. Luego, añada un static const int para almacenar el valor int predeterminado de esta propiedad.

   La estructura HomeControllerState ahora podría parecerse a:

   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. En el directorio controllers, vaya a home_controller.hpp. Este controlador representa la vista principal de la aplicación.

   Importar las bibliotecas de cadenas y vectores:

   #include <string>
   #include <vector>

   Cree una matriz de etiquetas de cadena para el nuevo elemento de interfaz de usuario prioritario:

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

3. Aún en el directorio controllers, ve a home_controller.cpp. Aquí añadimos un elemento de la interfaz de usuario para que el usuario pueda establecer la prioridad del elemento. FTXUI ofrece dos elementos de la interfaz de usuario que puedes usar para esta función: Radiobox o Dropdown. En este tutorial, usaremos Dropdown, pero quizás prefieras Radiobox si no te gusta cómo se redistribuye la interfaz de usuario para mostrar el menú desplegable.

   Agregue esta nueva entrada de elemento de UI después de la línea auto newTaskCompletionStatus:

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

   En el cierre de la función auto saveButton, pase la selección de prioridad de la tarea a la llamada de la función _dbManager.addNew():

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

   Y luego agregue una línea para restablecer la selección de prioridad al valor predeterminado:

   _homeControllerState.newTaskPriority = HomeControllerState::DEFAULT_TASK_PRIORITY;

   Agregue el selector desplegable a auto newTaskLayout que establece el diseño de los elementos interactivos en el contenedor de filas de elementos:

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

   Esta sección de su código deberá ahora parecerse a:

   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. Finalmente, más abajo en el archivo home_controller.cpp, agregue el nuevo elemento UI al auto itemListRenderer:

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

   Esto representa el nuevo elemento justo antes del botón Guardar en la interfaz de usuario.

Guardar la nueva propiedad en la base de datos

1. En el directorio managers, vaya a database_manager.hpp. Actualice la firma de la función addNew() para incluir el int newItemPriority que pasamos desde home_controller.cpp:

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

2. Ahora vaya a database_manager.cpp y actualice la implementación de addNew(). Agregue int newItemProperty a los argumentos de la función:

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

   Agregue una nueva línea en la función para establecer el valor de la propiedad priority cuando guardamos Item en la base de datos:

   .priority = newItemPriority

   Su implementación addNew() ahora debería parecerse a:

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

Ejecutar y probar

En este punto, vuelva a compilar y ejecutar la aplicación. En el directorio de compilación, reconstruya el ejecutable con los cambios realizados:

cmake --build .

Y ejecuta la aplicación:

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

Inicia sesión con la cuenta que creaste anteriormente en este tutorial. Verás el elemento que creaste. Agrega un nuevo elemento y verás que ahora puedes establecer la prioridad. Selecciona High como prioridad y guarda el elemento.

Ahora, regresa a la página de datos del Atlas en tu navegador y actualiza la Item colección. Deberías ver el nuevo elemento con el priority campo añadido y configurado como. El elemento existente no tiene 1 el priority campo.

haga clic para ampliar

Actualizar la suscripción

Para cambiar la suscripción, vaya al managers directorio y abra el database_manager.cpp archivo. Actualice la consulta para incluir los documentos con prioridad igual o inferior 1 a. Esto solo debe incluir elementos con prioridad "Severa" ()0 o "Alta" ().1

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

Ejecutar y probar

Ejecute la aplicación de nuevo. Inicie sesión con la cuenta que creó anteriormente en este tutorial. En el cuadro Subscription, pulse el botón Switch to Mine. Tras un momento inicial, cuando el SDK vuelva a sincronizar la colección de documentos, solo verá el nuevo elemento de alta prioridad que creó. Es posible que tenga que mover el ratón o usar las teclas de flecha para que la interfaz de usuario se vuelva a mostrar con los nuevos elementos sincronizados en segundo plano.

El documento del elemento que creó inicialmente no se muestra en el dispositivo porque no tiene el campo priority. Si desea que este elemento se sincronice con el dispositivo, puede editarlo en la interfaz de usuario de Atlas y agregar un valor al campo priority.

Si desea probar la funcionalidad con más detalle, puede crear elementos con diferentes prioridades. Verá que un nuevo elemento con menor prioridad aparece brevemente en la lista de elementos y luego desaparece. El gestor de errores de sincronización proporciona un mensaje que describe este comportamiento:

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

En este escenario, el SDK crea el elemento localmente, lo sincroniza con el backend y luego revierte la escritura porque no cumple con las reglas de suscripción.