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. Abre el código del cliente en tu IDE preferido.

2. In the state/ directory, ppen the item.hpp file.

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. In the state directory, go to home_controller_state.hpp. Add a new int property under the existing newTaskIsComplete property. Then, add a static const int to store the default int value for this property.

   The HomeControllerState struct may now resemble:

   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. In the controllers directory, go to home_controller.hpp. This controller renders the main view of the app.

   Import the string and vector libraries:

   #include <string>
   #include <vector>

   Cree un arreglo de etiquetas de string para el nuevo elemento de Interfaz de Usuario de prioridad:

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

3. Siguiendo en el directorio controllers, vaya a home_controller.cpp. Aquí es donde añadimos un elemento de interfaz de usuario para permitir al usuario establecer la prioridad del elemento. FTXUI ofrece dos elementos de IU que puedes usar para esta funcionalidad: Radiobox o Dropdown. En este tutorial, utilizaremos Dropdown, pero puedes preferir Radiobox si no te agrada cómo la IU renderiza el menú desplegable.

   Agrega esta nueva entrada de elemento de Interfaz de Usuario después de la línea auto newTaskCompletionStatus:

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

   En el cierre de la función auto saveButton, pasa la selección de prioridad de tarea a la llamada de 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;

   Add the dropdown selector to the auto newTaskLayout that sets the layout for the interactive elements in the item row container:

   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.

Guarda 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. Now go to database_manager.cpp, and update the addNew() implementation. Add int newItemProperty to the function arguments:

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

   Add a new line in the function to set the value of the priority property when we save the Item to the database:

   .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, compile y ejecute la aplicación nuevamente. En tu directorio de compilación, recompila 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, regrese a la página de datos del Atlas en su navegador y actualice la Item colección. Debería ver el nuevo elemento con el priority campo agregado y configurado en 1. El elemento existente no tiene el priority campo.

haga clic para ampliar

Update the subscription

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 de Item que creaste inicialmente no aparece en el dispositivo porque no tiene un campo priority. Si deseas que este Item se sincronice con el dispositivo, puedes editar el documento en la interfaz de usuario de Atlas y agregar un valor para el 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.