はじめに

最初に、アプリケーションのブートストラップをサポートするコマンドラインインターフェース（CLI）をインストールします。

$ npm install -g @c8y/cli

次に、newコマンドで新しい空のアプリケーションをブートストラップします。

$ c8ycli new myApp

備考

Web SDKの可能性や実装の詳細を見たい場合は、チュートリアルアプリケーションを試してみて下さい。c8ycli new <<your-app-name>> tutorialを実行することでインストールできます。

CLIのインストールが完了したら、新しく作成したフォルダに移動して、npm installを実行します。

$ cd myapp
$ npm install

すべてのパッケージがインストールされた後、以下を実行することでアプリケーションを起動できます。

$ npm start

ブラウザでhttp://localhost:9000/apps/myapp/にアクセスすると、startスクリプトで定義したテナントにプロキシするログイン画面を表示します。ログインできない場合は、指定しているインスタンスが誤っている可能性があります。テナントURLへのプロキシを変更するには、新しく作成されたpackage.jsonの script セクションにある start スクリプトを変更してください。

{
  "start": "c8ycli server -u http://your-tenant.my-provider.com"
}

ログインすると、ほとんど空のスターターアプリケーションが確認できるでしょう。より複雑な例に取り組みたい場合、@c8y/appsについてのドキュメントをご覧ください。アプリケーションをビルドしてデプロイしたい場合、デプロイしたい場合の必要なコマンドの詳細をご覧ください。

備考

コックピットのような既存のアプリケーションを拡張したい場合、ハイブリッドアプリケーションを使用できます。これにより、新しいWeb SDK内に既存のAngularJSのプラグインを結合できます。詳しくはアプリケーションの移行をご覧ください。

備考

ログイン時にテナント名またはテナントIDを指定する必要があります（アプリケーションはlocalhostのURLからテナント名など辿ることができないため）。テナント名やテナントIDがわからない場合は、REST API を利用して取得できます。

最初のルートとコンポーネント

空のブートストラップアプリケーションを作成後、コンテンツを作成しましょう。まず、プロジェクトに新しいコンポーネントを追加し 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 {
  constructor() {}
}

新しいコンポーネントをアプリケーションにフックするには、新しいコンポーネントを宣言して app.module.ts 内のルートに追加する必要があります。

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule as ngRouterModule } from '@angular/router';
import { CoreModule, BootstrapComponent, RouterModule } from '@c8y/ngx-components';
import { HelloComponent } from './hello.component'  // don't forget to import the new component

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

このアプリケーションを起動してログインすると、以下のスクリーンショットと似たアプリケーション画面が現れます。このアプリケーションを拡張するには、Angular Router と @c8y/ngx-components を組み合わせて使用することができます。

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