Docs Menu
Docs Home
/ /
Atlas Device SDK

Realm Web & Atlas Device Sync を使い始める(プレビュー)

項目一覧

  • サンプル アプリを使い始める
  • コードを取得する
  • 依存関係のインストール
  • App Services Appの作成と接続
  • サンプル アプリの実行
  • 手動インストールと設定
  • Realm & Device Sync の使用
  • Realm のインポート
  • アプリを初期化する
  • ユーザーの認証
  • オブジェクトモデルを定義する
  • Realm を開く
  • 同期されていない Realm のオープン
  • Realm オブジェクトの作成、変更、削除
  • オブジェクトの検索、ソート、フィルタリング
  • Realm を閉じる
  • Web 上の Device Sync の制限事項

WebAssumely をサポートする Realm JavaScript SDK を使用すると、Realm Database API と Atlas Device Sync を使用してブラウザ用にリアルタイム Web アプリケーションを構築できます。

重要

WebAssumely をサポートするRealm JavaScript SDK はプレビューです。 現在、RealmJavaScript Node.js または の SDK に関連して大きな制限があります。React Native詳細については、「 制限」セクションを参照してください。

Realm JavaScript WebAssumely SDK の使用を開始する最も簡単な方法は、事前に構築された Web Sync サンプル アプリをクローンして実行することです。 このアプリは React で記述され、Realm Database API と Atlas Device Sync を使用します。

1

開始するには、サンプル アプリのリポジトリをクローンし、サンプル アプリのブランチをチェックアウトして、サンプル プロジェクトに移動します。

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

サンプル アプリのルート ディレクトリから次のコマンドを実行して、WebAssumely とRealm JavaScript SDK などの依存関係をインストールします。

npm install

注意

サンプルアプリは現在、 npmを使用したインストールをサポートしています。 yarnまたはpnpmを使用する場合は、追加のポリゴンを提供する必要がある場合があります。

3

Device Sync を使用するには、Device Sync が有効になっている App Services App に接続する必要があります。 サンプル プロジェクトのREADME.mdファイルにあるアプリ作成手順に従います。 アプリを作成して構成が完了したら、そのクライアント アプリ ID をコピーし、サンプル プロジェクトのsrc/atlas-app-services/config.jsonファイルに貼り付けます。

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

依存関係をインストールし、アプリへの接続を定義したので、サンプル アプリを実行できます。

npm start

から WebAssumely をサポートする SDK をインストールできます。RealmJavaScriptnpm

npm install realm@12.0.0-browser.2

注意

WebAssumely をサポートするRealm JavaScript SDK は現在、 npmの realm パッケージのタグ付きリリースとしてのみ利用可能です。 SDK をインストールするときは、正確なバージョン番号とタグを指定する必要があります。

また、最上位の await が有効になっている Webhook を使用するようにプロジェクトを構成する必要があります。 例として、 構成では、次の基本構成を拡張する必要があります。

module.exports = {
experiments: {
topLevelAwait: true
}
};

WebAssumely をサポートするRealm JavaScript SDK をインストールし、アプリケーションを構成したら、SDK を使用してRealmとAtlas Device Syncでリアルタイム Web アプリケーションを構築できます。

このセクションの例は、アプリ内で Realm を操作する方法を示しています。

Tip

Reactアプリケーションを作成している場合は、 @realm/ Reactパッケージの使用を検討してください 。 この機能には、事前に構築されたフックとコンポーネントが含まれており、Realm を React アプリケーションとネイティブに統合できます。

データベースを操作するソースファイルの先頭にRealmをインポートします。

import Realm, { App } from "realm";

Device Syncは Atlas App Services を使用して認証を管理し、デバイス間でデータを同期します。 Web アプリから Device Sync を使用するには、Device Sync が有効になっている App Services App に接続する必要があります。

アプリには、クライアントのクライアント App ID を使用して接続します。 取得方法については、「アプリ ID の検索 」を参照してください。

const app = new App({ id: "<your-app-id>" });

ユーザーを認証するには、アプリ インスタンスでApp.logIn()メソッドを呼び出します。 任意の認証プロバイダーを使用してログインできます。 その他の例については、「ユーザーの認証 」を参照してください。

const credentials = Realm.Credentials.anonymous();
await app.logIn(credentials);

Realm はネイティブ JavaScript オブジェクトを使用してアプリケーション データをモデル化します。 特定のタイプのすべてのオブジェクトが、オブジェクトの内容を制御するスキーマを共有するオブジェクトタイプを定義します。

Realm オブジェクトタイプを定義するには、タイプのnamepropertiesを指定する スキーマ オブジェクト を作成します。 タイプ名は、Realm 内のオブジェクトタイプ間で一意である必要があります。

const TaskSchema = {
name: "Task",
properties: {
_id: "int",
name: "string",
status: "string?",
owner_id: "string?",
},
primaryKey: "_id",
};

同期された Realm を開くには、Realm のスキーマを指定し、 sync構成オブジェクトを含む構成オブジェクトを使用してRealm.open()を呼び出します。 同期構成では、認証されたユーザーを指定し、同期されるデータを制御する 初期サブスクリプション を定義する必要があります。

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

同期されていないローカルのメモリ内Realmを開くには、ローカル Realm 構成オブジェクトを指定してRealm.open()を呼び出します。

const realm = await Realm.open({
schema: [TaskSchema]
});

Realm を開くと、その中のオブジェクトを作成、変更、および削除できます。 すべての書き込み操作は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);
});

Realm.objects()メソッドを使用して、Realm 内のオブジェクトをクエリできます。 クエリでは、クエリのオブジェクトタイプを指定する必要があります。 オプションで、fluent メソッドチェーン API を使用してクエリの結果をフィルタリングおよびソートすることができます。

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

メモリリークを回避するために、Realm インスタンスで実行する場合はRealm.close()メソッドを呼び出します。

// Close the realm.
realm.close();

ブラウザ上の Device Sync には現在、次の制限が適用されています。

  • 永続性なし: Realm JavaScript Web SDKはDevice Syncデータをディスクに永続化しません。 すべてのローカル データはメモリに保存され、ブラウザ タブが閉じられ、または更新されると失われます。

  • ワーカー スレッドなし: すべての Realm 操作はメイン スレッドで実行する必要があります。 ウェブ ワーカー スレッドでは、Realm を開いて操作します。

  • 保管時の暗号化なし: Realm JavaScript Web SDKは、暗号化されていないすべてのローカル データをメモリに保存します。 ブラウザと Device Sync サーバー間で転送されるデータは HTTPS 経由で暗号化されます。

次へ

Atlas Device SDK Docsへようこそ