{"id":21371533,"url":"https://github.com/carreraprogrammer/rxdb-frontend","last_synced_at":"2025-03-16T08:42:21.794Z","repository":{"id":214199144,"uuid":"735723204","full_name":"carreraprogrammer/rxdb-frontend","owner":"carreraprogrammer","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-03T03:32:17.000Z","size":505,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T20:51:51.778Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carreraprogrammer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-26T00:43:11.000Z","updated_at":"2023-12-26T14:24:42.000Z","dependencies_parsed_at":"2024-01-03T03:30:50.742Z","dependency_job_id":"c25bc32c-212a-4b0a-9d89-da696e4b3e2f","html_url":"https://github.com/carreraprogrammer/rxdb-frontend","commit_stats":null,"previous_names":["carreraprogrammer/rxdb-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Frxdb-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Frxdb-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Frxdb-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carreraprogrammer%2Frxdb-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carreraprogrammer","download_url":"https://codeload.github.com/carreraprogrammer/rxdb-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846982,"owners_count":20357297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T08:13:57.840Z","updated_at":"2025-03-16T08:42:21.770Z","avatar_url":"https://github.com/carreraprogrammer.png","language":"TypeScript","readme":"\u003c!-- PROJECT DESCRIPTION --\u003e\n\n# RXDB TODO\n\nRXDB TODO es una aplicación de lista de tareas (TODO list) offlinefirst que integra RXDB con un backend de GraphQL en Rails. Desarrollada con Ionic en el frontend, esta aplicación permite operaciones CRUD directas con RXDB, que a su vez sincroniza con la base de datos de Rails.\n\nEste proyecto se concibió como un piloto para probar un concepto, sirviendo como un punto de referencia y aprendizaje para el desarrollo de aplicaciones más complejas en el futuro. El presente README proporciona una guía detallada sobre cómo se maneja la sincronización entre RXDB y Rails, asegurando una comprensión clara de su funcionalidad y arquitectura.\n\nEl backend del proyecto se puede encontrar en el siguiente repositorio: [RXDB Backend](https://github.com/carreraprogrammer/rxdb-backend)\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Tabla de Contenidos\n\n- [Pila Tecnológica](#tech-stack) 🛠️\n- [Características Principales](#key-features) ✨\n- [Comenzando](#getting-started) 🚀\n  - [Configuración](#setup) 🔧\n  - [Instalación](#installation) ⚙️\n  - [Uso](#usage) 🧰\n  - [Pruebas](#testing) :nut_and_bolt:\n- [Autores](#authors) 🖋️\n- [Funciones Futuras](#future-features) 🌟\n- [Contribuyendo](#contributing) 🤝\n- [Tablero Kanban](#kanban) :orange_book:\n- [Soporte](#support) 🆘\n- [Agradecimientos](#acknowledgments) 🌲\n- [Licencia](#license) 📄\n\n\u003c!-- TECH STACK --\u003e\n\n## Pila Tecnológica 🛠️ \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n  - Ionic\n  - RXDB\n  - GraphQL\n  - Rails\n  - Otras dependencias y herramientas relevantes\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- KEY FEATURES --\u003e\n\n## ✨ Características Principales\u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n - **Sincronización con RXDB**: La aplicación utiliza RXDB para realizar operaciones CRUD en la lista de tareas, sincronizándose con el backend de Rails.\n - **Operación de Pull**: Mediante GraphQL, la aplicación implementa una operación de pull para sincronizar los datos desde el backend de Rails hacia RXDB.\n - **Operación de Push**: Se implementa una operación de push para enviar cambios desde RXDB al backend de Rails.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LIVE DEMO --\u003e\n\n[No Aplica]\n\n\u003c!-- GETTING STARTED --\u003e\n\n## 🚀 Comenzando\u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\n### Configuración 🔧\u003ca name=\"setup\"\u003e\u003c/a\u003e\n\nPara obtener una copia local y ejecutarla, sigue estos pasos. Elige el directorio en tu máquina local donde quieras copiar el proyecto. Por ejemplo:\n\n```cd /home/user/nombre-de-tu-directorio```\n\nClona el proyecto utilizando una de las opciones.\n\nUsando clave SSH:\n\nPara el backend: \n\n```git clone git@github.com:carreraprogrammer/rxdb-backend.git```\n\nPara el frontend:\n\n```git clone git@github.com:carreraprogrammer/rxdb-frontend.git```\n\n### Instalación ⚙️\u003ca name=\"installation\"\u003e\u003c/a\u003e\n\nPara ejecutar este proyecto localmente, sigue estos pasos:\n\n1. Abre tu terminal o línea de comandos.\n\n2. Navega al directorio donde has clonado o descargado el repositorio de RXDB TODO.\n\n3. Ejecuta los siguientes comandos para instalar las dependencias requeridas:\n\nPara el frontend:\n\n```npm install```\n\nPara el backend:\n\n```bundle install```\n\n\n### Uso 🧰\u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n1. Completar la Configuración: Asegúrate de haber completado el proceso de configuración mencionado anteriormente.\n\n2. Verificación del Servidor Backend: Asegúrate de que tu backend en Rails esté funcionando. Puedes verificar su accesibilidad abriendo tu navegador web y navegando a la siguiente URL:\n\n```http://localhost:3000/graphql```\n\nEsta URL debería mostrar la respuesta del backend.\n\nPara iniciar el servidor backend en Rails, usa:\n\n```rails s ```\n\n3. Una vez que hayas confirmado que tu servidor está funcionando, puedes iniciar el servidor de desarrollo para tu aplicación Ionic. Para evitar conflictos con la aplicación Rails (que usa el puerto 3000), elige un puerto diferente para tu aplicación Ionic. Actualmente, estamos usando el puerto 8100, lo que no provocará errores en este momento.\n\nEjecuta el siguiente comando para ver la versión en el navegador:\n\n```ionic serve --port 8100```\n\nO usa este comando para ver la versión en Android Studio:\n\n```npx cap open android --port 8100```\n\n\n\n#### Sincronización Pull\n\nLa sincronización Pull es esencial para mantener actualizado el estado local de la base de datos RXDB con los últimos cambios del backend en Rails. Este proceso se inicia con una consulta GraphQL que solicita los datos más recientes desde el backend. Si no existe un checkpoint, la funcion genera uno inicializado en 0. La consulta se estructura de la siguiente manera:\n\n```javascript\nconst pullQueryBuilder = (checkpoint, limit) =\u003e {\n  if (!checkpoint || checkpoint === null) {\n    checkpoint = {\n      id: \"0\",\n      updatedAt: \"1970-01-01T00:00:00Z\"\n    };\n  }\n  \n  const query = `query SyncTodos($checkpoint: CheckpointInput, $limit: Int) {\n    syncTodos(checkpoint: $checkpoint, limit: $limit) {\n      documents {\n        id\n        text\n        isCompleted\n        deleted\n        createdAt\n        updatedAt\n      }\n      checkpoint {\n        id\n        updatedAt\n      }\n    }\n  }`;\n  \n  return {\n    query,\n    operationName: 'SyncTodos',\n    variables: {\n      checkpoint,\n      limit\n    }\n  };\n};\n```\n\nEn el backend de Rails, esta consulta es procesada para retornar los todos que han sido modificados desde el último checkpoint. Además, se genera un nuevo checkpoint basado en el último todo actualizado.\n\n\n```module Types\n  class QueryType \u003c Types::BaseObject\n    # Definición de campos y argumentos para GraphQL\n    field :sync_todos, SyncTodosReturnType, null: false do\n      argument :checkpoint, Types::CheckpointInputType, required: false\n      argument :limit, Integer, required: false\n    end\n\n    # Otros campos y métodos...\n\n    # Método para la sincronización de todos\n    def sync_todos(checkpoint: nil, limit: nil)\n      # Lógica para construir la consulta en función del checkpoint\n      # y devolver los datos junto con un nuevo checkpoint\n      # ...\n    end\n\n    # Método para obtener el último checkpoint\n    def current_checkpoint\n      # Lógica para determinar el último checkpoint\n      # ...\n    end\n  end\nend\n```\n\n\n### Sincronización Push en RXDB\n\nLa operación de Push en RXDB envía cambios locales al backend de Rails. La estructura de la consulta GraphQL incluye un arreglo de rows, donde cada row representa un todo con su estado actual y, si es aplicable, el estado anterior (assumedMasterState).\n\n\n```const pushQueryBuilder = (rows) =\u003e {\n  // Construcción de la consulta GraphQL para el Push\n  const query = `\n  mutation PushTodo($input: PushTodoInput!) {\n    pushTodo(input: $input) {\n      todos {\n        id\n        text\n        isCompleted\n        createdAt\n        updatedAt\n        deleted\n      }\n    }\n  }`;\n\n  // Estructura de los datos enviados en la consulta\n  const variables = {\n    input: {\n        writeRows: rows\n    }\n  };\n\n  return {\n    query,\n    operationName: 'PushTodo',\n    variables\n  };\n};\n```\n\nCada row contiene un objeto con dos llaves assumedMasterState (el estado anterior del todo) y newDocumentState (el estado actualizado del todo). El backend de Rails utiliza esta información para determinar si hay un conflicto (por ejemplo, si el todo ha sido modificado simultáneamente en otra instancia) y, en base a esto, actualiza la base de datos.\n\n\n```module Mutations\n  class PushTodo \u003c BaseMutation\n    # Definición de argumentos para la mutación\n    argument :write_rows, [Types::TodoInputPushType], required: true\n    field :todos, [Types::TodoType], null: false\n\n    def resolve(write_rows:)\n      # Lógica para procesar cada row y realizar actualizaciones o inserciones\n      # ...\n    end\n\n    # Métodos privados para detectar conflictos y actualizar atributos\n    # ...\n  end\nend\n```\n\nCon estas operaciones de Pull y Push, RXDB TODO asegura una sincronización efectiva entre el estado local de la aplicación y la base de datos en el backend de Rails, manejando eficientemente tanto la obtención de nuevos datos como la actualización de los mismos.\n\n## 🖋️ Authors \u0026 Contributors\u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Daniel Carrera**\n\n- GitHub: [@carreraprogrammer](https://github.com/carreraprogrammer)\n- Twitter: [@carreraprogrammer](https://twitter.com/carreraprog)\n- LinkedIn: [Daniel Carrera](https://www.linkedin.com/in/carreraprogrammer/)\n\n\n## 🌟 Funciones Futuras \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n- **Sincronización en Tiempo Real con WebSockets (WS)**: Para mejorar aún más la sincronización entre el cliente y el servidor, se planea implementar WebSockets. Esto permitirá una actualización inmediata de los datos en todos los clientes conectados tan pronto como se realice un cambio en la base de datos.\n\n- **Autenticación de Usuarios**: A fin de proporcionar una experiencia de usuario se implementará en el piloto un sistema de autenticación.\n\nEstas mejoras están diseñadas para hacer de RXDB TODO una herramienta de prueba de concepto más robusta y funcional, que pueda ser utilizada como base para el desarrollo de aplicaciones más complejas.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🆘 Soporte \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nSi encuentras algún problema o tienes preguntas o sugerencias, por favor abre un issue en el [Issues](https://github.com/carreraprogrammer/rxdb-backend/issues).\n\nAdemás, si deseas ponerte en contacto conmigo, puedes encontrar mi información de contacto en la sección de \u003ca href=\"#authors\"\u003eAutores\u003c/a\u003e.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003evolver arriba\u003c/a\u003e)\u003c/p\u003e\n\n## 🌲 Agradecimientos \u003ca name=\"acknowledgments\"\u003e\u003c/a\u003e\n\n- **Cincoventicinco**: Por su confianza y oportunidades brindadas, facilitando un entorno propicio para el desarrollo y la innovación.\n- **Pablo Aguero y Carlos Vargas**: Por su guía técnica, consejos prácticos y recursos contribuyendo significativamente al entendimiento de las tecnologias.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 📄 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](LICENSE) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Frxdb-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarreraprogrammer%2Frxdb-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarreraprogrammer%2Frxdb-frontend/lists"}