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

Início rápido com o Electron

Visão geral

Esta página contém informações para integrar o Realm ao seu aplicação de eletrônica rapidamente. Para saber como configurar um aplicação Electron com o Realm sem usar nenhum framework adicional, consulte as instruçõesde configuração do Electron. Se você já criou um aplicação usando Criar um React App ou está interessado em integrar um aplicativo React com o Realm usando o Electron, confira as instruções de configuração do Electron com React .

Antes de começar, verifique se tem:

Observação

Requisito de versão

Realm funciona com qualquer uma das versões elétricas oficialmente suportadas. Recomendamos usar a versão estável mais recente. Para ver as versões eletrônicas oficialmente compatíveis, consulte o documento Lançamentos eletrônicos.

Configurar

1

Configurar seus arquivos de aplicativos

Para começar a desenvolver seu aplicativo, crie um diretório de aplicativo:

mkdir myElectronApplication

Crie um arquivo index.html, main.js e renderer.js no diretório raiz do seu aplicativo.

touch index.html main.js renderer.js

O main.js arquivo é o ponto de entrada no seu aplicação e é executado no processo principal. Ele é responsável por carregar seu index.html arquivo na API BrowserWindow do Electron. Quaisquer arquivos de roteiro necessários neste arquivo HTML serão executados em um processo de renderização. Adicione o seguinte ao seu index.html arquivo :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="renderer.js"></script>
  </body>
</html>

Adicione o seguinte código ao arquivo renderer.js:

const Realm = require("realm");

Observação

Cada aplicação Electron pode ter apenas main process um. O processo principal cria páginas da web. Cada página da web executa em seu próprio processo, conhecido como renderer process um. Para saber mais sobre isso, leia o documento oficial Modelo de processo Electron.

2

Criar o Arquivo de Roteiro Principal

O arquivo main.js é o ponto de entrada do seu aplicativo. Crie uma Electron BrowserWindow nela e carregue seu arquivo index.html para exibir seu HTML aos usuários:

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  // to prevent the Sync Connection from ending prematurely, start reading from stdin so we don't exit
  process.stdin.resume();
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)
3

Configure um package.json

Inicialize um package.json para começar a instalar pacotes e utilizá-los em seu projeto. Execute o seguinte comando no seu terminal:

npm init -y

A estrutura do arquivo do aplicativo deve se assemelhar ao seguinte:

.
|-- package.json
|-- package-lock.lock
|-- index.html
|-- main.js // runs on the main process
|-- renderer.js // runs on a renderer process

O arquivo main.js executa no processo do main. O arquivo renderer.js e quaisquer outros arquivos exigidos por ele, ou por index.html, são executados em um processo renderer.

4

Instale as dependências do seu projeto

Instale as dependências necessárias para começar a desenvolver sua aplicação eletrônica usando o Realm.

npm install electron --save-dev
npm install realm@12 --save
5

Crie um roteiro para executar seu aplicativo

Adicione um roteiro ao seu arquivo package.json para iniciar seu aplicativo com o comando npm start.

"scripts": {
 "start": "electron ."
}
6

Execute seu aplicativo

Inicie seu aplicativo no terminal:

npm start

Você deve ver o seguinte:

Aplicativo de desktop eletrônico

Abrir um Realm

Autentique um usuário, defina um esquema e habilite a sincronização com o Device Sync e, em seguida, chame Realm.open() no arquivo renderer.js.

Depois de abrir o domínio, você pode escrever no domínio.

const app = new Realm.App({ id: "<Your App ID>" }); // create a new instance of the Realm.App
async function run() {
  // login with an anonymous credential
  await app.logIn(Realm.Credentials.anonymous());
  const DogSchema = {
      name: "Dog",
      properties: {
        _id: 'int',
        name: "string",
        age: "int",
      },
      primaryKey: '_id'
  };
  const realm = await Realm.open({
    schema: [DogSchema],
    sync: {
      user: app.currentUser,
      partitionValue: "myPartition",
    },
  });
  // The myPartition realm is now synced to the device. You can
  // access it through the `realm` object returned by `Realm.open()`
  // write to the realm
}
run().catch(err => {
  console.error("Failed to open realm:", err)
});

Observação

Para obter um exemplo de gravação em um domínio a partir dos processos renderer e main , confira o repositório domínio-electron-advanced-quickstart .

Observação

Os binários nativos de reação atuais estão incluídos no pacote realm. Você pode remover os binários e o diretório react-native da construção. Em seu arquivo package.json, adicione uma entrada build.files e defina seu valor para !**/node_modules/realm/react-native.

Dica

Próximo

Bem-vindo aos Docs do Atlas Device SDK

Nesta página