新しいオントロジー SDK の TypeScript アプリケーションをセットアップする

このページでは、@osdk/create-app CLI ツールを使い、広く使われている JavaScript フレームワークをベースにフロントエンドアプリケーションを作成する手順を説明します。

既存のアプリケーションにオントロジー SDK のサポートを追加する場合は、既存のアプリケーションにオントロジー SDK を追加するドキュメントを参照してください。

1：前提条件

Developer Console アプリケーションを作成する

新しい Developer Console アプリケーションを作成するページに記載されている手順に沿って進めます。

トークンを設定する

ローカル環境でトークンを環境変数としてエクスポートします。以下はサンプルの個人用アクセストークンを使った例ですが、Developer Console では有効期間がより長いトークンを生成できます。このトークンは個人用アクセストークンなので、ソース管理にチェックインしないでください。

Copied!1
export FOUNDRY_TOKEN=<YOUR-TOKEN-FROM-GETTING-STARTED-PAGE>

Node のバージョンを確認する

TypeScript SDK の動作には Node 18以降が必要です。使用している Node のバージョンを確認するには、以下のコマンドを入力します。

Copied!1
node --version

2. `@osdk/create-app` によるクイックスタート

フロントエンドアプリケーションを作成する

記載されているコマンドを実行し、対話形式のプロンプトに沿って、プロジェクト名やフレームワークの選択など、プロジェクトをカスタマイズします。Developer Console の API ドキュメントセクションにあるはじめにページ、または概要ページでは、アプリケーションに合わせてすべてのパラメーターが入力済みのコマンドを確認できます。以下はこのコードの例で、< > 内のプレースホルダーには実際の値が入ります。

Copied!1
2
3
4
5
6
7
8
npm create @osdk/app@latest -- \
    --application <RID OF YOUR DEVELOPER CONSOLE APPLICATION> \
    --foundryUrl <YOUR FOUNDRY URL> \
    --applicationUrl <SUBDOMAIN OF YOUR FOUNDRY URL USED FOR HOSTING> \
    --clientId <YOUR CLIENT ID> \
    --osdkPackage <YOUR PACKAGE NAME> \
    --osdkRegistryUrl <YOUR PACKAGE HOSTING URL> \
    --corsProxy false

@osdk/create-app CLI は、アプリケーションのオントロジー SDK パッケージのジェネレーターバージョンに対応するクライアントコードを生成します。新しいアプリケーションでは、デフォルトで TypeScript オントロジー SDK v2 ジェネレーターを使って SDK が生成され、createClient と createPublicOauthClient を使用するクライアントコードが生成されます。アプリケーションの SDK がレガシーの TypeScript オントロジー SDK 1.x ジェネレーターで生成されている場合、生成される client.ts では、代わりに非推奨の FoundryClient と PublicClientAuth のインポートが使用されます。この場合は、以下のトラブルシューティングセクションを確認してください。

フロントエンドアプリケーションを開発する

入力したプロジェクト名に基づくディレクトリに、プロジェクトファイルが生成されました。以下のコマンドを実行すると、ローカル開発サーバーを起動できます。

Copied!1
2
3
cd <project-directory>
npm install
npm run dev

オントロジー SDK の React パッケージを使用する（任意）

アプリケーションで React を使用している場合は、以下のライブラリを使用できます。

`@osdk/react`

型付きフック、共有キャッシュ、アクション、関数、カスタムのデータ駆動型インターフェースには、@osdk/react を使用します。

@osdk/react の最新バージョンをインストールします。

Copied!1
npm install @osdk/react@latest

`@osdk/react-components`

事前に作成された、オントロジーに対応するインターフェース要素には、@osdk/react-components を使用します。このライブラリは @osdk/react をベースとしています。

@osdk/react-components の最新バージョンをインストールします。

Copied!1
npm install @osdk/react-components@latest

トラブルシューティング

生成されたコードでレガシーの `FoundryClient` と `PublicClientAuth` のインポートが使用される

@osdk/create-app CLI は、アプリケーションのオントロジー SDK パッケージのジェネレーターバージョンに対応するクライアントコードのひな形を作成します。生成された client.ts ファイルに以下のようなインポートが含まれている場合、アプリケーションの SDK はレガシーの TypeScript オントロジー SDK 1.x ジェネレーターで生成されています。

Copied!1
import { FoundryClient, PublicClientAuth } from "@<application-name>/sdk";

TypeScript オントロジー SDK v2 では、これらのインポートが、@osdk/client パッケージの createClient と @osdk/oauth パッケージの createPublicOauthClient に置き換えられます。新しい方式のクライアントコードを生成するには、TypeScript オントロジー SDK v2 ジェネレーターを使って SDK を再生成します。

Developer Console で、アプリケーションの SDK バージョンタブを開きます。
TypeScript オントロジー SDK v2 ジェネレーターを使って新しいバージョンを生成します。
上記の npm create @osdk/app@latest コマンドを再実行するか、SDK パッケージの依存関係を新しく生成したバージョンに更新します。

2つのバージョンの違いと既存のコードを更新する方法の詳しい説明については、TypeScript オントロジー SDK 移行ガイドを確認してください。

←

PREVIOUS新しいアプリケーションを作成

NEXTPythonアプリケーションをブートストラップ

→