新しいオントロジー SDK Reactアプリケーションのブートストラップ

このページでは、オープンソースのサンプルリポジトリを使用して、初めてのオントロジー SDK Reactアプリケーションをブートストラップするプロセスを説明します。既存のReactアプリケーションにオントロジー SDKのサポートを追加したい場合は、既存のReactアプリケーションにオントロジー SDKを追加するを参照してください。

新しいオントロジー SDKアプリケーションをブートストラップするには、次の手順を完了してください:

1. サンプルリポジトリをクローンします。
2. Developer Consoleを使用してオントロジー SDKパッケージを作成する。
3. サンプルリポジトリでオントロジー SDKパッケージをダウンロードします。
4. リポジトリのクローンでオントロジー SDKを使用します。

1: サンプルリポジトリをクローンする

ローカルマシンでクローンできるGitHubのTypeScriptサンプルリポジトリがあります。このリポジトリのルートフォルダーでnpm installを実行し、お好みの開発環境でリポジトリを開きます。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
# gitを使って、https://github.com/palantir/ontology-starter-react-app.git からリポジトリをクローンします。
git clone https://github.com/palantir/ontology-starter-react-app.git

# ontology-starter-react-app ディレクトリに移動します。
cd ontology-starter-react-app

# npmを使ってパッケージをインストールします。
npm install

# IDEを開きます（例えば、VS Code）。
# '.' は現在のディレクトリを指します。
code .

2: 開発者コンソールを使用してオントロジー SDK パッケージを作成する

リンクされたドキュメンテーションを参照して、新しい OSDK アプリケーションを作成します。

3. オントロジー SDK パッケージをダウンロードする

オントロジー SDK の生成が完了すると、一連のインストール手順がユーザーに提示され、これに従って先ほどクローンしたコードリポジトリに生成した SDK をインストールする方法を指導します。

4: リポジトリのクローンでオントロジー SDK を使用する

この最後のステップでは、作成したばかりのオントロジー SDK パッケージを使用するように、リポジトリのクローンを設定します。

このガイドのステップ 3で package.json ファイルに SDK パッケージを追加したことを覚えておいてください。

サンプルリポジトリの .env.development.sample ファイルの名前を .env.development に変更し、<> の中身をすべて置き換えます。

以下のファイルを、ユーザーのオントロジー SDK パッケージ名と選択したオブジェクトタイプで更新します:

src/utils/client.ts を正しいパッケージ名で更新します。パッケージ名は、私たちの演習での package.json ファイルにあり、"@replace-me/sdk" はユーザーのアプリケーションパッケージの名前（例えば、"@my-first-application/sdk"）に置き換えるべきです。

Copied!
1
2
// "@my-first-application/sdk" から FoundryClient と PublicClientAuth をインポートします
import { FoundryClient, PublicClientAuth } from "@my-first-application/sdk";

src/pages/home.tsx ファイルで、パッケージ名を置き換え、ステップ 2 で選択したオブジェクトの名前を設定します。次に、myProperty を選択したオブジェクトタイプのプロパティに置き換えます。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 日本語のコメントを追加します
import { Country } from "@my-first-application/sdk";
import { ErrorVisitor, ListObjectsError, Result, visitError, isOk, isErr, Page } from "@my-first-application/sdk";


...

// ステータスオブジェクトを定義します
{ status: "loading" } | { status: "loaded"; value: ReplaceMeObject[] } | { status: "failed_loading" }
...

// クライアントからの結果を取得します
const result: Result<Page<ReplaceMeObject>, ListObjectsError> = await client.ontology.objects.ReplaceMeObject.page({
            pageSize: 10,
        });
        // 結果が成功した場合、オブジェクトリストを更新します
        if (isOk(result)) {
            setObjectList({ value: result.value.data, status: "loaded" });

...

// 選択されたオブジェクトタイプのプロパティを表示します
// Replace myProperty with a property from the selected object type
<li key={object.__rid}>{object.myProperty}</li>

ユーザーはちょうどオントロジー SDK を使用するようにサンプルアプリケーションの設定を完了しました。これで、テストする必要があります。

ユーザーのターミナルに以下を入力してください:

Copied!
1
npm run dev # "npm run dev" コマンドを実行し、開発モードでアプリケーションを起動します。

ブラウザで http://localhost:8080 にアクセスしてください。

ログインページが表示され、選択したオブジェクトタイプのプロパティのリストが表示されます。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
    server: useLocalhostInCORS ? "http" : "https",
    proxy: useLocalhostInCORS
        ? []
        : [
                {
                    // これは、ブラウザから設定されたFoundryインスタンスへの呼び出しをプロキシ化します
                    target: process.env.API_PROXY_TARGET_URL,
                    context: ["/multipass/api/**", "/api/**"],
                    changeOrigin: true,
                    secure: true,
                },
            ],