[Day2] Device SDK トライアル - MongoDB Atlas

# 概要
(本記事は個人用メモ)
MongoDB Atlas Device SDK (旧Realm)のテンプレートプロジェクトの一つ、GraphQLを使用したWebアプリの動作まで

# 前提・環境

- [前回:クラウド側DBの準備](https://qiita.com/shokkaa/items/93fe2aacd450f7a93bef)
- Ubuntu 22.04

# CLIセットアップ・APIキー生成・Atlas AppServiceログイン
```sh
sudo npm i -g atlas-app-services-cli
```

[Atlas ポータル](https://cloud.mongodb.com/) ➔ プロジェクトメニュー ➔ Project Settings 
➔ Access Manager ➔ API Keys ➔ Create API Key をクリック

Privateキーは再表示されない。コピーし漏洩しない場所に保管
```sh:AppServiceにログイン
APIKEY=xxxtjolj
APIKEY_PRIV=a09253xx-xxxx-xxxx-xxxx-xxxxf42c255f
appservices login --api-key $APIKEY --private-api-key $APIKEY_PRIV
```

# 構成
```plantuml
class 記事の関連部位 #aaffaa

package MongoDB_Atlas {
  class Project{
      apiKeyList: APIKEY<PublicKey,PrivateKey>[]
  }
  class Cluster #ffffaa{
      name=cluster1
  }
  class Database #ffffaa{
      name=todo
  }
  class Collection #ffffaa{
      name=Item
      documents:Object[]
  }

  組織 "1"--"*" Project
  Cluster "1"--"*" Database
  Database "1"--"*" Collection
  Project "1"--"*" Cluster
  class AppService #aaffaa {
      name=GraphQLTrial
      serviceName=mongodb-atlas
      userList:AppUser[]
  }
  class GlaphQL #aaffaa  {
      schema
  }
  Project "1"--"*" AppService
  AppService "1"--"1" GlaphQL
}
package MobileClient{
  object index.js #aaffaa
  GlaphQL <- index.js : GlaphQL
}
GlaphQL --> Collection : MongoQL

```
# [Atlas App Services作成](https://www.mongodb.com/docs/atlas/app-services/apps/create/)とApps ID 取得
```sh:GraphQL用のテンプレートアプリを作成
APP=GraphQLTrial
appservices apps create -n $APP --template web.graphql.todo

appservices apps list  # to confimation
APPID=`appservices apps list -a $APP | tail -n1 | grep -oE '[^ ]*' | head -n1`
SERVICE='mongodb-atlas' # --template web.graphql.todo による初期設定
```
クラウドサーバ上にApps GraphQLTrial が作成される。
同時に `./GraphQLTrial/frontend`にAppsの構成ファイルテンプレート群が作成される。
`--template web.graphql.todo` の場合、下記内容が初期設定されている

```sh
SERVICE='mongodb-atlas'  # AppService.serviceName (Atlas Service Name)
DB='todo'                # Database.name
COLLECTION='Item'        # Collection.name
```

# ユーザ追加
```sh:例: guest@guest 作成
appservices users create --email guest@guest --password guest123 -a "$APPID"
```
[➔匿名認証を有効にする場合](https://www.mongodb.com/docs/atlas/app-services/authentication/anonymous/#std-label-anonymous-authentication)

# [Atlas GraphQL API](https://www.mongodb.com/docs/atlas/app-services/graphql/expose-data/#std-label-graphql-expose-data)
スキーマだけ定義すればMongoDBをGraphQLで参照できる。

#### [スキーマ定義](https://www.mongodb.com/docs/atlas/app-services/schemas/enforce-a-schema/#std-label-enforce-a-schema)
`--template web.graphql.todo`で用意されるスキーマ定義ファイルは `./\\$APP/data_sources/\\$SERVICE/\\$DB/\\$COLLECTION/schema.json`

#### デプロイ
スキーマファイルなどを更新後、デプロイしてサーバに反映
```sh:
appservices push --remote $APPID
```

# MongoDB  AtlasのWebツールでテスト
- Cluter:"cluster1" ➔ "+CREATE DATABASE" ➔ Database name:"todo", Collection name:"Item"
- Collection:"Item" ➔ "INSERT DOCUMENT" ➔ 下記挿入

```json:挿入データ(_idは生成されたものを使用)
{"_id":{"$oid":"659c75ae49234c7adf70858b"},
  "isComplete":true,
  "owner_id":"xxx",
  "summary": "xxx"
}
```
- [GraphQL Web Client](https://realm.mongodb.com/groups/6589e6ddc21c4148bfd84689/apps/659a09c93f5b4bc6abcfc74f/graphql/explore)を開き、Ctrl+ENTER

挿入データが応答される


# クライアントWebアプリ(サンプル)実行
```sh:--template web.graphql.todoで用意されサンプルアプリ
cd ./GraphQLTrial/frontend/web.graphql.todo
npm i
npm run start --host  # http://localhost:3000 を開く
```
ブラウザの開発者モードでGraphQLが呼ばれていることを確認

# クライアント側プロジェクト作成
- [前提:TypeScriptプロジェクト作成](https://qiita.com/shokkaa/items/6f83b3a107006ccc598b)
- [参考:公式文書](https://realm.mongodb.com/groups/6589e6ddc21c4148bfd84689/apps/658a034d5da273413b0a0bed/sdks)

```sh:AppService SDKモジュールをプロジェクトに追加
npm install realm-web
npm install @apollo/client graphql
```

# 参照
- [匿名認証](https://www.mongodb.com/docs/atlas/app-services/authentication/anonymous/#std-label-anonymous-authentication)

- [GraphQL Web Client](https://realm.mongodb.com/groups/6589e6ddc21c4148bfd84689/apps/659a09c93f5b4bc6abcfc74f/graphql/explore)

- [サンプルアプリリスト](https://www.mongodb.com/docs/atlas/app-services/reference/template-apps/)

https://www.mongodb.com/docs/realm/web/atlas-app-services/

https://www.mongodb.com/docs/atlas/app-services/sync/

https://www.mongodb.com/community/forums/t/mongodb-atlas-graphql-api-to-your-mobile-app-tutorial/221676