はじめに

このガイドでは、最初のアプリケーションをセットアップします。最初に、適切なバージョンの @angular/cli をインストールします。

npx @angular/cli@18 new --style=less

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

ng add @c8y/websdk

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
  tutorial
  widget-plugin
  package-blueprint

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

ステップ 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>>/ にアクセスしてテナントにログインできます。

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

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

空のブートストラップ アプリケーションを作成後、コンテンツを作成しましょう。まず、プロジェクトの 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>
  `
})
export class HelloComponent {}

新しいコンポーネントをアプリケーションにフックするには、新しいコンポーネントを宣言し、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 declaration here
})
export class AppModule {}

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

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

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

CLI にはアプリケーションをデプロイするためのコマンドが用意されており、c8ycli deploy コマンドを実行するだけで、現在のアプリケーションがデプロイされます。ただし、アプリケーションをデプロイする前に、c8ycli build を実行して構築する必要があります。

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

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

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

次のステップ

• Things Cloud 環境でのアプリケーション開発の詳細については、Things Cloud Codex を参照してください。また、Cumulocity Tech Community には、さまざまな関連チュートリアルがあります。