Introdução ao Realm Web e Atlas Device Sync (visualização)
Nesta página
- Comece com um aplicativo de exemplo
- Obter o código
- Instalar dependências
- Criar e conectar um App Services App
- Executar o aplicativo de exemplo
- Instalar e configurar manualmente
- Use Realm & Realm Mobile Sync
- Importar Realm
- Inicializar um aplicativo
- Autenticar um usuário
- Definir um modelo de objeto
- Abrir um Realm
- Abra um domínio não sincronizado
- Criar, modificar e excluir Objeto de Realm
- Encontrar, classificar e filtrar objetos
- Fechar um Realm
- Limitações do Realm Mobile Sync na web
O Realm JavaScript SDK com suporte a WebAssemby permite que você crie aplicação da web em tempo real para o navegador usando a API do reconhecimento de data center e o Atlas Device Sync.
Importante
O Realm JavaScript SDK com suporte do WebAssembling está em modo de pré-visualização. Atualmente, ele tem limitações significativas em relação ao Realm JavaScript SDK para Node.js ou React Native. Consulte a seçãolimitações do para mais informações.
Comece com um aplicativo de exemplo
A maneira mais rápida de começar a usar o Realm JavaScript WebAssemby SDK é clonar e executar nosso aplicativo de exemplo de sincronização da web pré-criado. O aplicativo foi escrito no React e utiliza API do reconhecimento de data center Realm e Atlas Device Sync.
Instalar dependências
No diretório raiz do aplicativo de exemplo, execute o seguinte comando para instalar as dependências, incluindo o Realm JavaScript SDK com WebAssemby:
npm install
Observação
O aplicativo de exemplo suporta atualmente a instalação com npm
. Se você usar yarn
ou pnpm
, talvez seja necessário fornecer polyfills adicionais.
Criar e conectar um App Services App
Para usar o Realm Mobile Sync, você deve se conectar a um aplicativo do App Services que tenha o Realm Mobile Sync habilitado. Siga as instruções de criação de aplicativo no arquivo README.md
do projeto de exemplo. Depois de criar e configurar o aplicativo, copie o ID do aplicativo do cliente e cole-o no arquivo src/atlas-app-services/config.json
no projeto de exemplo:
{ "ATLAS_APP_ID": "myapp-abcde" }
Instalar e configurar manualmente
Você pode instalar o Realm JavaScript SDK com suporte à WebAssemby da npm:
npm install realm@12.0.0-browser.2
Observação
O Realm JavaScript SDK com suporte ao WebAssemby está disponível atualmente apenas como uma versão marcada do pacote realm
no npm. Você deve especificar o número exato da versão e a marcação ao instalar o SDK.
Você também precisará configurar seu projeto para usar o webpack com a espera de nível superior habilitada. Por exemplo, sua configuração deve estender esta configuração básica:
module.exports = { experiments: { topLevelAwait: true } };
Use Realm & Realm Mobile Sync
Depois de instalar o Realm JavaScript SDK com suporte ao WebAssemby e configurar sua aplicação, você poderá usar o SDK para construir aplicações web em tempo real com o Realm e o Atlas Device Sync.
Os exemplos nesta seção mostram como trabalhar com o Realm em seu aplicativo.
Dica
Se você estiver escrevendo um aplicativo React, considere usar o pacote @realm/react . Inclui ganchos e componentes pré-construídos que permitem integrar nativamente os aplicativos Realm com React.
Importar Realm
Importe o Realm na parte superior dos seus arquivos de origem, onde você interage com o reconhecimento de data center:
import Realm, { App } from "realm";
Inicializar um aplicativo
O Device Sync usa o Atlas App Services para gerenciar a autenticação e sincronizar dados entre dispositivos. Para usar o Realm Mobile Sync a partir de sua aplicação na web, você deve se conectar a um App Services App que tenha o Realm Mobile Sync habilitado.
Você se conecta a um aplicativo usando o ID do aplicativo cliente. Para saber como obtê-lo, consulte Encontrar ID do seu aplicativo.
const app = new App({ id: "<your-app-id>" });
Autenticar um usuário
Para autenticar um usuário, chame o método App.logIn()
na instância do seu aplicativo. Você pode se conectar com qualquer provedor de autenticação. Para obter mais exemplos, consulte Autenticar um usuário.
const credentials = Realm.Credentials.anonymous(); await app.logIn(credentials);
Definir um modelo de objeto
O Realm usa objetos JavaScript nativos para modelar os dados do aplicativo. Você define Tipo de objeto de Realm em que todos os objeto de um determinado tipo compartilham um esquema que controla o conteúdo do objeto.
Para definir um tipo de objeto de Realm, crie um objeto de esquema que especifique o name
e properties
do tipo. O nome do tipo deve ser exclusivo entre os tipos de objetos em um domínio.
const TaskSchema = { name: "Task", properties: { _id: "int", name: "string", status: "string?", owner_id: "string?", }, primaryKey: "_id", };
Abrir um Realm
Para abrir um Realm sincronizado, chame o Realm.open()
com um objeto de configuração que especifique o esquema do Realm e inclua um objeto de configuração sync
. A configuração de sincronização deve especificar o usuário autenticado e definir assinaturas iniciais que controlam quais dados são sincronizados:
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}"`) ); }, }, }, });
Abra um domínio não sincronizado
Para abrir um Realm local na memória que não sincroniza, chame Realm.open()
com um objeto de configuração de Realm local:
const realm = await Realm.open({ schema: [TaskSchema] });
Criar, modificar e excluir Objeto de Realm
Após abrir um Realm, você pode criar, modificar e excluir objeto nele. Todas as operações de gravação devem ocorrer dentro de um bloco de transação 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); });
Encontrar, classificar e filtrar objetos
Você pode consultar objetos em um domínio usando o método Realm.objects()
. A query deve especificar o Tipo de objeto de Realm a ser consultado. Opcionalmente, você pode filtrar e classificar os resultados de uma query usando uma API de encadeamento de método fluente.
// 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");
Fechar um Realm
Chame o método Realm.close()
quando terminar com uma instância de realm para evitar vazamentos de memória.
// Close the realm. realm.close();
Limitações do Realm Mobile Sync na web
Realm Mobile Sync no navegador está atualmente sujeita às seguintes limitações:
Sem persistência: o Realm JavaScript Web SDK não persiste os dados do Realm Mobile Sync no disco. Todos os dados locais são armazenados na memória e serão perdidos quando a guia do navegador for fechada ou atualizada.
Sem threads de trabalho: você deve executar todas as operações do Realm na thread principal. Você não pode abrir ou trabalhar com um realm em uma thread de web work.
Sem criptografia em repouso: o Realm JavaScript Web SDK armazena todos os dados locais em repouso não criptografados na memória. Os dados em trânsito entre o navegador e o servidor do Device Sync são criptografados por HTTPS.