Создание простой статистики с помощью Angular 2, D3 и LoopBack

Создание простой статистики с помощью Angular 2, D3 и LoopBack (пересмотренная версия)

Ранее в ПРЕЗЕНТАЦИИ: LoopBack SDK Builder V2 я представил первый стабильный выпуск SDK Builder, который плавно и красиво интегрирует IBM StrongLoop LoopBack Framework с Google Angular 2 Framework, которые вместе позволяют создавать не только веб- Страницы, но настольные, собственные мобильные, прогрессивные и IoT-приложения.

Сегодня я публикую исправленную версию предыдущей статьи Building Easy Stats with Angular 2, D3 и LoopBack, в которой за 5 месяцев многое изменилось в мире Angular 2 и определенно требует пересмотра.

Описание Проекта

В этом уроке мы собираемся создать приложение Angular 2 с помощью инструмента Angular CLI, также мы создадим aStatModule, используя окончательный API Angular 2.

Мы также получим наборы данных из API, который мы создали в Часть 1 и Часть 2.

Позже мы будем использовать D3 для создания компонента диаграммы, который поможет нам представить данные, которые мы создали в моих предыдущих постах.

Требования

Настроить угловой проект

Мы можем начать с установки инструмента Angular CLI, который может помочь вам создать каркас вашего приложения, создав для вас необходимую конфигурацию.

$ npm install -g angular-cli
$ cd /to/project/root
$ ng new easy-stats-app

Приведенная выше команда создаст новую папку с новым приложением Angular 2, но всегда требуется зависимость, когда вы собираетесь использовать удаленный API, не включенный в ядро Angular 2: модуль The@angular/http. Таким образом, вам нужно будет установить его, и это очень хороший момент, чтобы сделать это.

$ cd easy-stats-app
$ npm install --save @angular/http

Установить сборщик SDK

Теперь, когда у нас есть набор приложений, мы хотим начать использовать конечные точки, которые мы создали в части 1 и части 2, но на этот раз мы будем использовать эти конечные точки с помощью автоматически созданного комплекта разработки программного обеспечения.

$ cd ../easy-stats-api/
$ npm install --save-dev @mean-expert/loopback-sdk-builder

Создать SDK

LoopBack SDK Builder может анализировать ваш API и автоматически создавать полностью рабочий SDK, что позволяет вам не тратить время на создание интерфейсов, классов и сервисов Angular 2 TypeScript; позволяет сразу приступить к написанию приложения.

Для этого вам необходимо создать новую команду сценария NPM следующим образом:

easy-stats-api/package.json

{
  ...
  "scripts": {
    ...
    "build:sdk": "./node_modules/.bin/lb-sdk server/server.js ../easy-stats-app/src/app/shared/sdk"
  }
  ...
}

Сохраните файл, а затем из терминала просто выполните следующую команду:

$ npm run build:sdk

Через пару секунд вы увидите список сгенерированных файлов в вашем приложении Angular 2. Если вы хотите более подробно узнать о библиотеках, которые только что создал LoopBack SDK Builder, вы можете увидеть следующую Ссылку на компоненты SDK.

Установите SDK Angular 2

К этому моменту у вас уже должен быть каталог приложений Angular 2; все файлы, относящиеся к вашему Angular 2 SDK, но вам все равно нужно сообщить Angular, что есть модуль, который вы хотите использовать.

easy-stats-app/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// Import the SDK Module
import { SDKModule } from './shared/sdk'; 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    // Tell Angular we want the SDKModule to be available app wide
    SDKModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Для тех, кто использует WebPack, вам может потребоваться импортировать модуль непосредственно из индекса в каталоге SDK следующим образом:

import { SDKModule } from './shared/sdk/index';

Вот и все; теперь вы можете начать использовать свой API и начать писать модули Angular 2. Итак, давайте создадим его.

Создать модуль статистики

Отличительной особенностью Angular CLI является то, что вам не нужно вручную создавать модули и компоненты, а использовать команды для их автоматического создания.

$ ng generate module Stat
installing module
  create src/app/stat/stat.module.ts
installing component
  create src/app/stat/stat.component.css
  create src/app/stat/stat.component.html
  create src/app/stat/stat.component.spec.ts
  create src/app/stat/stat.component.ts

Обновить статкомпонент

Нам нужно обновить наш StatComponent, который будет получать наборы данных из нашего приложения LoopBack, для этого нам нужно импортировать Customer Model и CustomerApi Service из SDK.

Затем вы можете приступить к созданию Customer экземпляров модели, привязанных к области компонента. Это означает, что после определения свойства клиента вы также получите доступ к шаблону компонента и сможете использовать одностороннюю или двустороннюю привязку данных по мере необходимости.

Также вы можете установить правильный тип, он будет содержать схему, которую вы определяете в своих моделях API, тогда вам просто нужно внедрить службу CustomerApi и начать соединять все вместе.

import { Component, OnInit } from '@angular/core';
import { Customer } from '../shared/sdk/models';
import { CustomerApi } from '../shared/sdk/services';
@Component({
  selector: 'app-stat',
  templateUrl: './stat.component.html',
  styleUrls: ['./stat.component.css']
})
export class StatComponent implements OnInit {
  private customer: Customer = new Customer();
  private range: string = 'weekly';
  constructor(private customerApi: CustomerApi) { }
  ngOnInit() {
  }
  getStats() {
    this.customerApi.customerStatsWrapper(this.customer.id, this.range)
                    .subscribe((stats: any[]) => console.log(stats));
  }
}

Итак, я знаю, что в данный момент это кажется черной магией, и вы можете спросить, откуда берутся эти услуги и почему мы звоним только сейчас?

Это почти волшебство, но правда в том, что LoopBack SDK Builder может перемещаться по всем вашим моделям и службам REST, которые вы определили в LoopBack, а затем создавать для вас все, что вам нужно, просто чтобы связать части вместе.

Легко, да? Ну… что это за private customerApi: CustomerApi в конце концов? Если вы новичок в мире Angular 2, то вы должны знать, что фреймворк будет внедрять каждый экземпляр зависимости, который вам нужен, когда он определен в конструкторе компонента… Другими словами, это все равно, что сказать Angular 2, что вы хотите использовать CustomerApi, полученный из SDK, и вам нужна структура, чтобы создать экземпляр для этой зависимости, а затем внедрить его в свой компонент. Этот шаблон проектирования называется Внедрение зависимостей.

Обновление представления

Измените файл stat.component.html, добавив следующую разметку:

<h1>Easy Stats</h1>
<label for="customerId">Customer Id:</label>
<input name="customerId" type="text" [(ngModel)]="customer.id" placeholder="customerId" />
<label for="range">Range:</label>
<input name="range" type="text" [(ngModel)]="range" placeholder="range" />
<button (click)="getStats()">Get Stats</button>

Обновить app.component.html

Сейчас мы будем вызывать наш StatComponent непосредственно из app.component.html.

<h1>
  {{title}}
</h1>
<app-stat></app-stat>

Перед тестом

Прежде чем тестировать приложение, вам нужно убедиться, что ваш API работает, и вы установили количество клиентов и заказов.

Кроме того, мы не настроили какой-либо источник данных для нашего API, если вы остановите процесс, вы потеряете свои данные, поэтому вы не сможете протестировать это приложение.

Чтобы избежать такого поведения, вам необходимо Настроить источник данных в LoopBack.

Контрольная работа

Если вы снова запустите сервер $ ng serve, вы сможете увидеть форму, которая поможет вам получить информацию из созданного нами API.

На данный момент мы можем проверить информацию в консоли браузера.

Что следующее?

В моем следующем сообщении в блоге я опубликую исправленную версию моей предыдущей статьи Как создать компонент диаграммы в Angular 2 и D3, продолжая приложение, которое мы только что разработали.

Если вам нравится эта серия и вы хотите быть в курсе следующих выпусков и новых пакетов, подписывайтесь на меня в Твиттере @johncasarrubias и, если вам так хочется, оставьте комментарий здесь.

Спасибо за чтение.