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

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

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

ОПИСАНИЕ ПРОЕКТА

В этом руководстве мы собираемся создать приложение Angular 2 с помощью инструмента Angular CLI, также мы создадим StatModule, используя окончательный 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: @angular / http модуль. Таким образом, вам нужно будет установить его, и сейчас очень хороший момент для этого.

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

УСТАНОВИТЬ SDK BUILDER

Теперь, когда у нас есть набор приложений, мы хотим начать использовать конечные точки, которые мы создали в Части 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.

УСТАНОВИТЬ ANGULAR 2 SDK

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

легко-статистика-приложение / SRC / приложение / 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, для этого нам нужно импортировать модель клиента и службу CustomerApi из SDK.

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

Также вы можете установить правильный тип, он будет содержать схему, которую вы определяете в своих моделях 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, а затем создавать для вас все, что вам нужно, просто соединяя части вместе.

Легко, да? Ну… что это за частный 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, продолжая приложение, которое мы только что разработали.

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

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