Docs Menu

Atlas Device SDK for the Web

Atlas Device SDK for the Web を使用すると、ブラウザベースのアプリケーションは Atlas に保存されているデータにアクセスし、関数や認証などの App Services サービスと交流できます。 Web SDKはJavaScriptとTypescriptの両方をサポートしています。

SDK でビルドされたウェブ アプリは、次の方法を使用して Atlas をクエリできます。

他の SDK と違い、Web SDK はインメモリ データベースの作成のみをサポートしており、ディスクに保存されたデータベースの作成はサポートしていません。

ラーニング パス
関数アイコン

クイック スタート

Web SDK の操作方法を示す最小限の説明コード例。

コード例 を参照

Atlas Device SDK モバイル アイコン

動作するサンプルアプリ

Web SDK と Atlas GraphQL API を使用する動作する React アプリを切断することで、例えを示します。

サンプルアプリを調べる

実現できること

Atlas App Services で Web SDK を使用して、MongoDB を直接クエリしたり、GraphQL API をクエリしたり、サーバーレス関数を呼び出したり、ユーザー認証を管理したりできます。

1

Web SDK を使用して、ブラウザから MongoDB Atlas データを直接クエリできます。 CRUD、集計を実行し、データベースの変更をリッスンします。

まず、 App Services App を作成し、データベース ルールを設定して、 ユーザー認証を有効にする必要があります。

2

ブラウザから App Services App にアクセスするには、App クライアントを初期化します。

3

ユーザーを認証するには、 App Services 認証プロバイダのいずれかを使用します。 アプリサービスには、カスタムJSON web token 、 Facebook 、Google、Apple、匿名、および組み込みのメール/パスワード認証プロバイダが含まれます。

4

認証されたユーザーを使用して、ブラウザから直接 MongoDB をクエリします。 ユーザーは、アクセスできるデータにのみアクセスできます。

詳細については、「 MongoDB のクエリ 」を参照してください。

MongoDB のクエリの図
1

Atlas GraphQL APIは、データベース内のドキュメントの JSON スキーマに基づいて、GraphQL クエリとミューテーションを含むホストされたエンドポイントを自動的に生成します。

データアクセス ルールで App Services 認証を構成し、どのユーザーがどのデータにアクセスするかを制御します。 Atlas App Services で GraphQL API を構成します。

2

ブラウザから App Services App にアクセスするには、App クライアントを初期化します。

3

ユーザーを認証するには、 App Services 認証プロバイダのいずれかを使用します。 アプリサービスには、カスタムJSON web token 、 Facebook 、Google、Apple、匿名、および組み込みのメール/パスワード認証プロバイダが含まれます。

4

ブラウザから GraphQL クライアントを使用して GraphQL API をクエリします。 ユーザー認証情報を使用してリクエストを認証します。

Apollo Client を使用して GraphQL API をクエリする方法を学びます。

API 統合のイメージ

App Services バックエンドで実行されるクライアント アプリケーションからサーバーレス関数を呼び出すことができます。

組み込み認証プロバイダーとサードパーティ認証プロバイダーを使用してユーザーを認証します。 認証されたユーザーを使用して App Services にアクセスします。

App Services のイラスト
必須ドキュメント
参照アイコン

JavaScript API リファレンス

DocsJavaScriptSDK の参照 を参照してください。

JavaScript API リファレンス

React ロゴ アイコン

React でクイック スタート

React アプリケーションに Web SDK を追加する方法を学習します。

React プロジェクトへの Realm の追加

Next.js ロゴ アイコン

Next.js 統合ガイド

Next.js アプリケーションで Web SDK を使用できるすべての方法を学びます。

Next.js との統合

エンジニアリング プロジェクトと専門家が提供するサンプルプロジェクトを探索して、Web SDK を使用してベストプラクティスと一般的な開発パターンを学びます。 その他のサンプル アプリについては、「 サンプルプロジェクト」ページをご覧ください。

Atlas Device SDK オフライン アイコン

オフライン ログインとデータベース アクセス

Device Sync ユーザーとしてログインし、同期されたデータベースをオフラインで開きます。

サンプル プロジェクト

ユーザー アイコン

ユーザーのオンライン状態

ユーザーとデバイスの接続とアクティビティを検出します。

サンプル プロジェクト