はじめに

このガイドでは、最初のアプリケーションをセットアップします。最初に、適切なバージョンの @angular/cli をインストールします。サーバーサイドレンダリング（SSR）およびスタンドアロン API に基づくアプリケーションはサポートされていないため、false に設定します：

npx @angular/cli@19 new --style=less --ssr=false

次に、フォルダに移動し、Angular アプリケーションに @c8y/websdk パッケージを追加します。

ng add @c8y/websdk
備考
node.js のインストールが必要です。インストール済みの node.js のバージョンが間違っている場合は、npm install ステップで必要なバージョン番号が表示されます。

CLI は、バージョンとベーステンプレートの 2 つのステップでプロンプトを表示します。その後、アプリケーションの設定が完了し、ステップ 3 で最初の開発サーバーを起動できます。

ステップ 1： バージョンの選択 

? Which base version do you want to scaffold from? (Use arrow keys)
> 1019.0.X
> 1019.X.0
> other

最初のステップでは、ベースとなるスキャフォールディングのバージョンを選択する必要があります。インターフェースには最新のリリースが表示されます。また、other オプションを選択して手動でバージョンを入力することもできます。どのバージョンを選択すればよいか分からない場合は、最新のバージョンを使用することをお勧めします。

ステップ 2： 開始するベースプロジェクトの選択 

? Which base project do you want to scaffold from?
  administration
  application
  cockpit
  devicemanagement
  hybrid
  login
  tutorial
  sample-plugin
  package-blueprint

ステップ2では、スキャフォールディングの元となるベースプロジェクトを選択する必要があります。Things Cloud のデフォルトアプリケーションのいずれかを選択して、そこで提供される機能を再利用できます。または、「application」プロジェクトを選択して空のアプリケーションを起動することもできます。

スキャフォールディングの代替として、上記リストのアプリケーションを GitHub リポジトリから直接取得できます：

ステップ 3： ローカル開発サーバーの起動

npm start コマンドを実行してアプリケーションを起動できます。デフォルトでは、アプリケーションは Things Cloud クラウドプラットフォームにプロキシしますが、-u フラグを使用して別のアプリケーションにプロキシすることもできます。

例：

npm start -- -u http://mytenant.acme.iot

または

 ng serve <appName> -u http://mytenant.acme.iot

コマンドを実行すると、アプリケーションのコンパイルが開始されます。コンパイルが完了したら、http://localhost:4200/apps/<<your-app-name>>/ にアクセスしてテナントにログインできます。

備考
ログイン時には、テナント名またはテナント ID を指定する必要があります（アプリケーションはローカルホストの URL からテナント名またはテナント ID を取得できません）。テナント名またはテナント ID がわからない場合は、テナントでユーザー名をクリックし、「プラットフォーム情報」セクションから情報を取得できます。
備考
プロジェクトのコンパイルに node.js がより多くのメモリを必要とする場合があります。メモリ不足エラーが発生した場合は、環境変数 NODE_OPTIONS を --max_old_space_size=4096 に設定して、より多くのメモリを割り当ててください。

これで設定は完了です。ローカルファイルに変更を加えると、再コンパイルされます。リフレッシュ後、変更内容が反映されます。

最初のカスタムコンポーネント作成

空のブートストラップ アプリケーションを作成後、コンテンツを作成しましょう。まず、プロジェクトの src/app に新しいコンポーネントを追加し、hello.component.tsとして保存します。

import { Component } from "@angular/core";

@Component({
  selector: "app-hello",
  template: `
    <c8y-title>Hello World</c8y-title>
    <p>My first content.</p>
  `,
  standalone: false
})
export class HelloComponent {}

スタンドアロンとモジュール指向のコンポーネントの両方がサポートされています。後者の場合、Angular 19 以降このプロパティはデフォルトで true となるため、standalone: false を追加する必要があります。

新しいコンポーネントをアプリケーションにフックするには、新しいコンポーネントを宣言し、app.module.ts 内のルートに追加する必要があります。次の例では、application プロジェクトを拡張し、とても明確なアプリケーションフレームを提供します。

import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RouterModule as ngRouterModule } from "@angular/router";
import { CoreModule, BootstrapComponent } from "@c8y/ngx-components";
import { HelloComponent } from "./hello.component";

@NgModule({
  imports: [
    BrowserAnimationsModule,
    ngRouterModule.forRoot(
      [{ path: "", component: HelloComponent }], // hook the route here
      { enableTracing: false, useHash: true }
    ),
    CoreModule.forRoot(),
  ],
  bootstrap: [BootstrapComponent],
  declarations: [HelloComponent], // add deceleration here
})
export class AppModule {}

このアプリケーションを起動してログインすると、次のスクリーンショットと似たアプリケーション画面が表示されます。

Angularベースのアプリケーション

このアプリケーションは、Web SDK のカスタマイズされたルーターと CoreModule を使用しています。CoreModule には、アプリケーションをさらに拡張するために必要なすべてのコンポーネント、ディレクティブ、パイプ、サービスが含まれています。しかし、まずはアプリケーションをリリースしてデプロイします。

アプリケーションのデプロイ

Angular CLI には、アプリケーションをアップロードするためのカスタム deploy コマンドが用意されています。ng deploy コマンドを実行すると、現在のアプリケーションがデプロイされます。

デプロイするには、アプリケーションロール、ユーザー名、パスワード、テナントが必要です。これらの情報をパラメーターとして指定して実行することもできます。プロンプトを表示せずにアプリケーションを構築およびデプロイするには、次のコードを使用します。

ng deploy -u http://yourtenant.cumulocity.com -T t12345 -U acme -P "*******"

この例では、Angular に追加されたカスタム deploy コマンドを使用しています。テナントで認証するには、-T（テナント）、-U（ユーザー）、-P（パスワード）オプションを指定する必要があります。deploy コマンドは、保存したくない環境変数も受け入れます。環境変数には、C8Y_ をプレフィックスとして指定します。例えば、-U フラグの場合は C8Y_USER を指定します。

次のステップ