How to Build a Crypto Portfolio App with Ignite UI for Angular

このシリーズの次の記事では、Firebase構成を実装する方法を詳しく説明します。

Zdravko Kolev Last Updated Feb 26, 2025 8min read

私たちのIgnite UI for Angularツールセットでアプリケーションを作るのがいかに簡単かAngular皆さんにお伝えしたいと思います。

この申請の目的は何ですか?まずは、Angularコンポーネントの実演です。次に、実際のユースケースを示すためで、日々の増減を確認するために暗号通貨のポートフォリオを追跡するシステムを作りたいと思っています。三つ目の理由としては、ガード、パイプ、カスタムテンプレートをコンポーネントで活用し、もちろんFirebaseを使ってデータ保存や認証を行うなど、さまざまなアンギュラー技術の活用を示すことです。

Guards、Pipes、Custom Templatesの活用など、さまざまなAngular技術の活用や、もちろんFirebaseによるデータ保存や認証の活用を実証するために

このトピックは以下の内容を扱います:

The use of Ignite UI Angular CLI
データサービス、ルーティング、テンプレート、パイプなどです。
Firebaseのデータストレージ、認証、CRUD操作の利用
CoinMarketcap APIによるリアルタイムおよび過去の価格情報取得

Ignite UI CLI

よし、始めよう!では、Ignite UI CLIについて聞いたことがありますか?はい、これは私たちが開発した実際のもので、あらかじめ定義されたコンポーネントセットでAngularアプリケーションを作成し、数コマンドを実行するだけで役立ちます。必要なパッケージをすべてインストールし、CLIの助けを借りてプロジェクトを実行するまで3分未満で完了します。公式の「はじめに」ページに従うだけです。

アプリの構築と必要なパッケージのインストールが完了すると、ナビゲーションドロワーとグリッドコンポーネントが追加され、すでに設定されていることに気づくでしょう。レスポンシブビュー、ルーティング、スタイル、モジュールインポートなども同様で、素晴らしいですよね?

export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

さて、次は何だ?アプリにはさまざまな表示が欲しいです。ユーザー認証、暗号資産データの変更追跡、そして暗号通貨のポートフォリオをどこかに保存したいのです。そのため、Ignite UI for Angularは箱から出して必要なすべてのコンポーネントを提供しています。私たちは使いますチャート過去のデータ変更およびグリッド暗号通貨のポートフォリオを表示し、暗号通貨の追加・更新・削除機能も提供するために一覧およびカード.

上記のすべての要件に対して、どこかからデータを入手する必要がある場合、min-api.cryptocompareが役立ちます。これはすべてのアクティブな暗号通貨の情報を1回の通話で提供する無料サービスです。

export class BlockGridComponent implements OnInit, AfterViewInit{
  public remoteData: CoinItem[];
  ...

  ngAfterViewInit() {
    this.dataService.getData().subscribe(res => {
      this.remoteData = res;
    });
  ...
}

App Authentication

以下に、Crypto アプリのFirebase認証を設定するために私が取ったいくつかのステップをハイライトします。AngularFireAuthはユーザー認証やログイン・ログアウトなどの関連操作に使用されます。このFirebaseサービスは、メールとパスワードでのサインイン方法、Google認証プロバイダー、Facebook認証プロバイダーを提供します。より詳しい説明は、公式のAngular Firebaseリポジトリとドキュメントを確認することをお勧めします。

Set up a firebase project.
認証タブに行き、Google、Facebook、メール/パスワードサインインプロバイダーを有効にしてください。
これらの手法に基づいて、Facebook IDを生成し、後にOAuthでURIリダイレクトを行います。
ルールを追加し、変更を公開します。
AngularプロジェクトにfirebaseConfigを追加してください。
ログイン、サインアップ、メールのコンポーネントを作成しましょう。(コード・フォー・オール)
登録ユーザーと未登録ユーザーのリダイレクト(ルートガード)を処理するauth.serviceを作成します。コード(追加コード)からもわかるように、ポートフォリオページは認可ユーザーのみがアクセス可能です。

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {
      return Observable.from(this.auth.authState)
        .take(1)
        .map(state => !!state)
        .do(authenticated => {
          if (!authenticated) {
            this.router.navigate([ '/login' ], {
              queryParams: {
                return: routerState.url
              }
            });
          }
      });
    }

}

詳細については、公式のFirebase認証開始トピックをご覧ください。設定時に特に困難を感じることはないと保証します。

データストレージとCRUD操作

データの保存や更新には、アプリケーションはFirebase Realtime Databaseを使用しています。これはクラウドホスト型データベースで、JSONとして保存され、接続されたすべてのユーザーにリアルタイムで同期されます。すべてのユーザーはリアルタイムデータベースインスタンスを共有し、最新のデータを自動的に更新します。

データの読み書きは簡単で、CRUD操作を達成するために従うべき手順は以下の通りです。

データ操作用の別のサービスを作成する
データ取得、レコードの追加、更新、削除に使う「BlockItem」クラスを定義します。
JSONオブジェクトの同期配列としてデータの観測値を返すリストのバインディング/取得を作成します。メタデータ(基盤となるDBReferenceとスナップショットキー)

詳細は公式のファイヤーストアのドキュメントをご覧ください。

グリッドCRUDはどうですか?はい、これはFirebaseのデータストレージと私たちの優れたAPIの助けを借りて実現可能です。Firebaseプラットフォームの設定方法については、データ保存や認証などの機能を提供する詳細情報はこのファイルをご覧ください。

public deleteRow(cell) {
  let blockItem = cell.row.rowData;

  // Detele item from AngularFireList
  this.deleteItem(blockItem);

  // Stores deleted item for the 'Restore' Snackbar logic 
  this.deletedItem = new BlockItem()
  Object.assign(this.deletedItem, blockItem);
  ...
  this.snack.show();
}

public updateRow(evt) {
  const rowItem = evt.rowID;
  rowItem.holdings = evt.newValue;

  this.updateItem(rowItem);
}

Full code here.

アプリケーションで使用されるすべてのコンポーネントを設定する

フェッチされたデータはチャート,グリッド,一覧およびカードコンポーネント(それぞれにコードを提供)。

例えば、Cardコンポーネントはフィルタリングパイプやデータのソートを使います。

export class HomeComponent implements OnInit {
   cryptos: CoinItem[];
   public searchValue: string;

   constructor(private data: DataService, private router: Router) { }

   ngOnInit() {
      this.loadData();
   }

   private loadData() {
      this.data.getData()
         .subscribe(res => {
            this.cryptos = sortDataByKey(res, 'rank');
         });
   }

   get filterOptions() {
      const fo = new IgxFilterOptions();
      fo.key = 'fullName';
      fo.inputValue = this.searchValue ? this.searchValue : '';
      return fo;
   }
...

各コンポーネントがどのようにバインドされているかを確認するためにコードを確認してください。

グリッド

これは価格変動のデータを操作・追跡するために使われるメインページです。5列のグリッドを定義します(数は画面サイズによります)。各列にはデータ表現用のngテンプレートがあります。これには画像、価格変動のアイコン、そして10進数のパイプの使用が含まれます。

グリッド上のアクションボタンは手動でデータの更新や新しいコインの追加を行います。igxDialog はその目的で使われます。コインの検証は最小限に抑えられています。例えば、既存のコインやCoinMarketCapのAPIに存在しないコインを追加することはできません。各通知メッセージはigxSnackBarを通じて表示されます。

コイン保持の更新については(onEditDone)を処理し、そこからBlockItemServiceで定義したメソッドを使用します。コインの「削除」や「追加」ボタンも同様でした。

<igx-grid #grid1 [data]="blockItems" width="100%" height="500px" toolbarTitle="My portfolio"
   (onCellEdit)="updateRow($event)" (onSelection)="selectCell($event)" [showToolbar]="true" 
   [columnHiding]="true" [columnPinning]="true">
   ...
   <igx-column field="holdings" header="Holdings" editable="true" sortable="true">
      <ng-template igxCell let-cell="cell" let-ri="rowIndex" let-column="column">
         <div class="positionTop">
            ${{ calculateHoldings(cell.row.rowData.holdings, cell.row.rowData.price) | number:'0.2-2' }}
            <br />
            <b>{{ cell.row.rowData.holdings | number:'1.0-7' }}</b>
         </div>
      </ng-template>
   </igx-column>
   ...
   <igx-column header="Actions">
      <ng-template igxCell let-ri="rowIndex" let-column="column">
         <span igxButton="icon" igxRipple (click)='deleteRow()'>
            <igx-icon>highlight_off</igx-icon>
         </span>
      </ng-template>
   </igx-column>
</igx-grid>

チャート

このコンポーネントは、1日ごとのコイン価格変動を視覚的に表示するために使われます。私たちのigxFinancialChart は簡単に設定でき、取得したデータを「dataSource」に渡すだけで、その他すべてがチャートで処理されます。さらに、チャートは一般的な財務データ構造を尊重しています。

     <igx-financial-chart [dataSource]="data" height="400px" width="100%" style="margin-top: 20px;" isToolbarVisible="false" chartType="candle">
      </igx-financial-

ここで注目すべき点の一つは、ビュー間でデータを渡すルートの利用です。統計ページは、チャートに読み込むための異なるコイン名を渡すいくつかのビューからアクセスできます。

リストとカード

IgxList およびIgxCard コンポーネントは、返送されたアイテムに関連するすべてのプロパティの異なる視覚的表現を示すために使用されます。

まとめると、適切な工具があれば何でも可能です。とはいえ、ぜひ私たちの利用を検討してくださいIgnite UI for Angular次のウェブ/モバイルアプリケーション用のコンポーネント。

GitHubリポジトリおよびホスティングアプリケーション。

Angular