Menu Docs
Página inicial do Docs
/ /
Atlas Device SDKs

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.

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.

1

Para começar, clone o repositório de aplicativos de exemplo, faça o checkout da ramificação do aplicativo de exemplo e navegue até o projeto de exemplo:

git clone https://github.com/realm/realm-js.git
cd realm-js
git checkout nh/wasm/emscripten_target
cd examples/example-react-task
2

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.

3

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:

src/atlas-app-services/config.json
{
"ATLAS_APP_ID": "myapp-abcde"
}
4

Agora que instalou as dependências e definiu a conexão com sua aplicação, você pode executar o aplicativo de exemplo:

npm start

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

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.

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";

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

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

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",
};

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}"`)
);
},
},
},
});

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

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

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

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

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.

Próximo

Bem-vindo aos Docs do Atlas Device SDK