跳至正文
首页 » 博客 » How to Build a Crypto Portfolio App with Ignite UI for Angular

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

，我想与大家分享如何轻松地创建角度应用程序与我们的点燃UI的角度的工具集。

这个应用程序的目的是什么？第一最重要的是，展示我们的Angular组件。第二,这是为了演示一个真实的用例，我想创建一个系统，该系统将跟踪我的加密货币投资组合，以便检查我的每日收益和损失。至于第三个原因,以演示不同的常规技术的使用，例如将guard，Pipes和自定义模板与我们的组件一起使用，当然，使用Firebase用于数据存储和身份验证。

该主题将涵盖:

  1. 的使用Ignite UI Angular CLI
  2. 数据服务、路由、模板、管道等。
  3. 使用Firebase数据存储、身份验证和CRUD操作
  4. Coinmarketcap API检索实时和历史价格信息

Ignite UI CLI

好，我们开始吧!那么，你听说过Ignite UI CLI?是的，这是我们开发的一个真实的东西，可以帮助您创建具有预定义组件集的Angular应用程序，只执行几个命令。它需要不到三分钟的时间来安装所有必要的软件包，并在我们的CLI的帮助下运行项目，只需按照我们的官方入门页面。

在应用程序的构建以及所有必要软件包的安装完成后，您会注意到导航抽屉和网格组件已添加并已配置。这同样适用于不同的响应视图、路由、样式、模块导入等。-太棒了，对吧？

导出const路由: 路由 = [{path: '', redirectTo: '/home', pathMatch: 'full' },{路径: 'home'，组件: HomeComponent}，...];

好吧，下一步是什么？我们希望我们的应用程序显示各种各样的东西: 我们希望有用户身份验证，跟踪加密数据的变化，并存储我们的加密货币组合的地方。为此，Ignite UI For Angular提供了所有合适的组件。我们将使用图表对于历史数据更改和网格要显示我们的加密产品组合并提供添加/更新/删除加密货币的功能，还列表和卡片。

对于所有的上述要求，我们需要得到的数据从某处，这是在min-api. cryptocompare的步骤-这是一个免费的服务，提供信息的所有活动的加密货币在一个调用。

导出类BlockGridComponent实现OnInit，AfterViewInit {公共remoteData: CoinItem[]；...
ngAfterViewInit() {此.dataService.getData().subscribe(res => {此.remoteData = res；});...}

应用程序身份验证

下面我强调了我为了设置加密应用程序的Firebase身份验证而采取的一些步骤。AngularFireAuth将用于用户身份验证和所有相关操作，如登录和注销。此firebase服务提供了使用电子邮件和密码、Google身份验证提供程序和Facebook身份验证提供程序登录的方法。对于更详细的解释，我建议检查官方Angular firebase存储库和文档。

  1. 设置一个firebase 项目。
  2. 转到身份验证选项卡，然后启用Google、Facebook和电子邮件/密码登录提供商。
  3. 基于这些方法，生成Facebook ID和更高版本的OAuth重定向URI。
  4. 添加规则并发布更改。
  5. 将firebaseConfig添加到Angular项目。
  6. 创建登录、注册和电子邮件组件。(全部代码)
  7. 创建将处理已注册和未注册用户的重定向的auth.service(路线守卫)。从代码中可以看到 (添加代码)，只有授权用户才能访问公文包页面。

@ Injectable()导出类AuthGuard实现CanActivate {
构造函数 (私有auth: AngularFireAuth，私有路由器: 路由器，私有路由: ActivatedRoute) {}
canActivate (路由: ActivatedRouteSnapshot，routerState: RouterStateSnapshot): Observable<boolean> {返回Observable.F自 (thhs.auth.authState).取 (1)。地图 (状态 => !!州)。do (已验证 => {如果 (!已验证) {此.router.navigate([ '/login']，{queryParams: {返回: routerState.url}});}});}
}

有关更多详细信息，请查看官方firebase身份验证入门主题 ，我可以保证您不会感到任何困难。

数据存储和CRUD操作的

对于数据存储和数据更新，我们的应用程序使用Firebase实时数据库这是一个云托管的数据库，存储为JSON并实时同步到每个连接的用户。所有用户共享实时数据库实例，并自动接收最新数据的更新。

读取和写入数据很容易，下面是步骤，你可以遵循以实现CRUD操作:

  • 创建一个单独的服务进行数据操作
  • 定义 ‘BlockItem’ 类，用于数据获取，添加，更新和删除记录。
  • 创建一个列表绑定/检索，将返回可观察到的数据作为JSON对象的同步数组。与元数据 (基础DBReference和快照键)

有关更多信息，请查看官方的firestore文档。

什么是Grid CRUD？是的，在Firebase数据存储和我们伟大的帮助下，这是可能的api。检查此文件以获取有关如何设置Firebase平台的更多信息，该平台可以为您提供数据存储，身份验证等功能。

公共deleteRow (单元格) {让blockItem = cell.row.rowData；
// 来自AngularFireList的detee项目this.de leteItem(blockItem);
// 为 “restore” Snackbar逻辑存储已删除的项目This.Deleteditem = 新的BlockItem()Object.assign(this.de letedItem, blockItem);...这。小吃。显示 ()；}
公共updateRow(evt) {const rowItem = evt.rowID;rowItem.holdings = evt.newValue;
此。updateItem(rowItem)；}

完整代码这里。

配置所有组件将用于应用程序

获取的数据来自图表、网格、列表和卡组件 (提供代码)。

用于示例,卡组件正在使用过滤管道和对数据进行排序。

导出类HomeComponent实现OnInit {cryptos: CoinItem[];public searchValue: string;
构造函数 (私有数据: DataService，私有路由器: router) { }
ngOnInit() {此.loadData()；}
private loadData() {此.data.getData()。订阅 (res => {this.cryptos = sortDataByKey(res, 'rank');});}
获取filterOptions() {const fo = 新IgxFilterOptions()；fo.key = 'fullName';fo.inputValue = this.searchValue?this.searchValue : '';返回fo；}...

检查代码以查看每个组件是如何绑定的。

网格

这是将用于数据操作和跟踪价格变化的主页。我们将定义一个有五列的网格 (计数取决于屏幕大小)，每列都有自己的数据表示ng模板。这包括图像、价格变动的图标以及使用十进制管道。

网格上方的操作按钮将处理手动数据刷新和添加新硬币。igxDialog 将被用于这个目的。应用硬币的最小验证。例如，您将无法添加现有的硬币或coinmarketcap api中不存在的硬币。每个通知消息将通过igxSnackBar。

对于持有硬币的更新，我们将处理 (onEditDone)，并从那里使用我们在BlockItemService。同样适用于’删除‘和’添加‘硬币按钮。

<igx-grid # grid1 [data]= "blockItems" width = "100%" height = "500px" toolbarTitle = "我的投资组合"(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">${{ calculatewoldings (cell.row.rowData.holdings，cell.row.rowData.price) | 编号: '0.2-2'}<br /><b >{{ cell.row.rowData.holdings | 编号: '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 (单击) = 'deleteRow()'><igx-icon>highlight_off</igx-icon></span></ng-template></igx-column></igx-grid>

图表

该组件将用于每天硬币价格变化的可视化表示。我们的igxFinancialChart 很容易配置，因为您只需将获取的数据传递给 “dataSource”，瞧，其他所有内容都将由图表处理。此外，该图表符合一般的财务数据结构。

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

这里应该提到的一个有趣的项目是使用路由在视图之间传递数据。统计页面可通过几个视图访问，这些视图传递要加载到图表中的不同硬币名称。

列表和卡片

IgxList和IgxCard的组件是用来显示不同的可视化表示的所有属性关联的返回项目。

综上所述，一切都有可能与正确的工具，并说，你一定要考虑使用我们的点燃UI角的组件为你的下一个web/移动应用程序。

在本系列的下一篇文章中，您将详细了解如何实现Firebase配置。

GitHub存储库和托管应用程序。

</p

标签: