El SDK de JavaScript de Realm con soporte para WebAssembly le permite crear aplicaciones web en tiempo real para el navegador utilizando la API de base de datos de Realm y Atlas Device Sync.
Importante
El SDK de Realm JS compatible con WebAssembly está en versión preliminar. Actualmente presenta limitaciones significativas en comparación con el SDK de Realm JS para Node.js o React Native. Consulte Sección de limitaciones para obtener más información.
Comience con una aplicación de ejemplo
La forma más rápida de empezar a usar el SDK de WebAssembly de Realm JS es clonar y ejecutar nuestra aplicación de ejemplo de sincronización web prediseñada. La aplicación está escrita en React y utiliza las API de base de datos de Realm y la sincronización de dispositivos Atlas.
Instalar dependencias
Desde el directorio raíz de la aplicación de ejemplo, ejecute el siguiente comando para instalar las dependencias, incluido el SDK de Realm JS con WebAssembly:
npm install
Nota
La aplicación de ejemplo actualmente admite la instalación con npmSi utiliza yarn o pnpm, es posible que deba proporcionar polyfills adicionales.
Crear y conectar una aplicación de servicios de aplicaciones
Para usar la Sincronización de Dispositivos, debe conectarse a una aplicación de Servicios de Aplicaciones que tenga habilitada la Sincronización de Dispositivos. Siga las instrucciones de creación de la aplicación en el archivo README.md del proyecto de ejemplo. Una vez creada y configurada la aplicación, copie su ID de aplicación cliente y péguelo en el archivo src/atlas-app-services/config.json del proyecto de ejemplo:
{ "ATLAS_APP_ID": "myapp-abcde" }
Instalar y configurar manualmente
Puede instalar el SDK de Realm JS con soporte para WebAssembly desde npm:
npm install realm@12.0.0-browser.2
Nota
El SDK de Realm JS compatible con WebAssembly solo está disponible actualmente como una versión etiquetada del paquete realm en npm. Debe especificar el número de versión y la etiqueta exactos al instalar el SDK.
También necesitarás configurar tu proyecto para usar webpack con await de nivel superior habilitado. Por ejemplo, tu configuración debe extender esta configuración base:
module.exports = { experiments: { topLevelAwait: true } };
Usar Realm & Device Sync
Una vez que haya instalado el SDK de Realm JS con soporte para WebAssembly y haya configurado su aplicación, puede usar el SDK para crear aplicaciones web en tiempo real con Realm y Atlas Device Sync.
Los ejemplos de esta sección muestran cómo trabajar con Realm en su aplicación.
Tip
Si estás desarrollando una aplicación React, considera usar el paquete @realm/react. Incluye ganchos y componentes prediseñados que te permiten integrar Realm de forma nativa con aplicaciones React.
Reino de importación
Importa el reino en la parte superior de tus archivos de origen donde interactúas con la base de datos:
import Realm, { App } from "realm";
Inicializar una aplicación
Device Sync utiliza Atlas App Services para gestionar la autenticación y sincronizar datos entre dispositivos. Para usar Device Sync desde tu aplicación web, debes conectarte a una aplicación de App Services que tenga Device Sync habilitado.
Te conectas a una aplicación usando su ID de aplicación cliente. Para saber cómo obtenerlo, consulta "Buscar el ID de tu aplicación".
const app = new App({ id: "<your-app-id>" });
Autenticar un usuario
Para autenticar a un usuario, llama al App.logIn() método en la instancia de tu aplicación. Puedes iniciar sesión con cualquier proveedor de autenticación. Para más ejemplos,consulta "Autenticar un usuario".
const credentials = Realm.Credentials.anonymous(); await app.logIn(credentials);
Define un modelo de objeto
Realm usa objetos nativos de JavaScript para modelar los datos de tu aplicación. Defines tipos de objetos donde todos los objetos de un tipo dado comparten un esquema que controla el contenido del objeto.
Para definir un tipo de objeto de dominio, cree un objeto de esquema que especifique los valores name y properties del tipo. El nombre del tipo debe ser único entre los tipos de objeto de un dominio.
const TaskSchema = { name: "Task", properties: { _id: "int", name: "string", status: "string?", owner_id: "string?", }, primaryKey: "_id", };
Abrir un reino
Para abrir un dominio sincronizado, llame a Realm.open() con un objeto de configuración que especifique el esquema del dominio e incluya un objeto de configuración sync. La configuración de sincronización debe especificar el usuario autenticado y definir las suscripciones iniciales que controlan los datos que se sincronizan:
const realm = await Realm.open({ schema: [TaskSchema], sync: { user: app.currentUser, flexible: true, // Define initial subscriptions to start syncing data as soon as the // realm is opened. initialSubscriptions: { update: (subs, realm) => { subs.add( // Get objects that match your object model, then filter them by // the `owner_id` queryable field realm.objects(Task).filtered(`owner_id == "${anonymousUser.id}"`) ); }, }, }, });
Abre un Realm no sincronizado
Para abrir un reino local en memoria que no se sincroniza, llame a Realm.open() con un objeto de configuración de reino local:
const realm = await Realm.open({ schema: [TaskSchema] });
Crear, modificar y eliminar objetos de Realm
Una vez abierto un dominio, puede crear, modificar y eliminar objetos en él. Todas las operaciones de escritura deben realizarse dentro de un bloque de transacción Realm.write().
const allTasks = realm.objects(Task); // Add a couple of Tasks in a single, atomic transaction. realm.write(() => { realm.create(Task, { _id: 1, name: "go grocery shopping", status: "Open", }); realm.create(Task, { _id: 2, name: "go exercise", status: "Open", }); }); const task1 = allTasks.find((task) => task._id == 1); const task2 = allTasks.find((task) => task._id == 2); realm.write(() => { // Modify an object. task1!.status = "InProgress"; // Delete an object. realm.delete(task2); });
Buscar, ordenar y filtrar objetos
Puedes query objetos en un realm usando el método Realm.objects(). Las consultas deben especificar el tipo de objeto Realm a consultar. Opcionalmente, puedes filtrar y ordenar los resultados de una query utilizando una API de cadena de métodos fluida.
// Query for specific obect using primary key. const specificTask = realm.objectForPrimaryKey(Task, 0); // Query realm for all instances of the "Task" type. const tasks = realm.objects(Task); // Filter for all tasks with a status of "Open". const openTasks = tasks.filtered("status = 'Open'"); // Sort tasks by name in ascending order. const tasksByName = tasks.sorted("name");
Cerrar un reino
Llame al método Realm.close() cuando termine con una instancia de reino para evitar pérdidas de memoria.
// Close the realm. realm.close();
Limitaciones de la sincronización de dispositivos en la Web
La sincronización del dispositivo en el navegador está actualmente sujeta a las siguientes limitaciones:
Sin persistencia: El SDK web de Realm JS no conserva los datos de sincronización de dispositivos en el disco. Todos los datos locales se almacenan en memoria y se perderán al cerrar o actualizar la pestaña del navegador.
Sin subprocesos de trabajo: Debe realizar todas las operaciones de Realm en el subproceso principal. No puede abrir ni trabajar con un dominio en un subproceso de trabajo web.
Sin cifrado en reposo: El SDK web de Realm JS almacena todos los datos locales en reposo sin cifrar en la memoria. Los datos en tránsito entre el navegador y el servidor de sincronización de dispositivos se cifran mediante HTTPS.