Ранее в Как создать компонент диаграммы в Angular 2 и D3 (пересмотренная версия) я объяснил, как создать компонент диаграммы с помощью Angular 2 и D3, я знаю, что обещал создать блог для ng2d3 и я сделаю это, но сначала.
Мне нужно объявить кое-что очень важное. Я очень рад опубликовать информацию о том, что в LoopBack SDK Builder добавлена замечательная функция; его название FireLoop !!!!!
[Общественные аплодисменты и ожидания на заднем плане]
ПРЕДСТАВЛЕНИЕ FIRELOOP.IO
FireLoop - это новая платформа реального времени, построенная на основе LoopBack, которая заменяет стандартный REST API и превращает эту замечательную и зрелую структуру в мощный механизм реального времени.
Я хочу, чтобы эта статья оставалась технической и не заостряла внимание на других деталях, если вы хотите прочитать о мотивации, сравнении других фреймворков и т. Д. Пожалуйста, ПРОЧИТАЙТЕ ЗДЕСЬ
ОПИСАНИЕ ПРОЕКТА
Теперь, когда вы имеете представление о том, что такое FireLoop, я хочу показать вам, как создать приложение Todo в реальном времени с использованием этих технологий.
Я всегда решаю использовать приложение Todo, когда технология настолько нова или важна, что на данный момент фактическое приложение результатов не имеет особого значения, это позволит новым разработчикам легко понять, а не использовать более сложные примеры.
ТРЕБОВАНИЯ
Мы собираемся создать приложение реального времени, используя Angular 2, LoopBack и FireLoop, поэтому вам потребуются следующие глобальные пакеты для установки.
$ npm install -g strongloop angular-cli
СОЗДАТЬ API
Сначала мы собираемся создать наш API LoopBack, а затем мы установим FireLoop поверх, чтобы задействовать возможности реального времени.
$ mkdir todo-project && cd todo-project $ mkdir todo-api && cd todo-api $ slc loopback _ — — -_ | | ╭──────────────────────────╮ | — (o) — | │ Let’s create a LoopBack │ ` — — — — -´ │ application! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __’.___.’__ ´ ` |° ´ Y ` ? What’s the name of your application? todo-api ? What kind of application do you have in mind? api-server (A LoopBack API server with local User auth) ? Which version of LoopBack would you like to use? 2.x
УСТАНОВИТЕ МОДУЛИ FIRELOOP
Теперь нам нужно установить и настроить необходимые модули для работы FireLoop.
$ npm install — save @mean-expert/{loopback-sdk-builder,loopback-component-realtime}
Если вы еще не прочитали мотивацию, мне нужно уточнить, что одна из причин, по которой я решил объединить и брендировать FireLoop, заключается в том, что я хочу, чтобы вы избегали всех этих конфигураций, но пока я не буду работать с инструментом командной строки, вы потребуется вручную выполнить следующие настройки:
Но прежде я могу пообещать, что, когда закончу работу с командным инструментом; вам нужно будет установить только 1 пакет с нулевыми конфигурациями. Поэтому я вернусь к этой статье, избегая всего следующего.
НАСТРОЙКА МОДУЛЯ РЕАЛЬНОГО ВРЕМЕНИ
Откройте файл server/server.js и измените метод app.start следующим образом:
app.start = function() {
// start the web server
var server = app.listen(function() {
app.emit(‘started’, server);
var baseUrl = app.get(‘url’).replace(/\/$/, ‘’);
console.log(‘Web server listening at: %s’, baseUrl);
if (app.get(‘loopback-component-explorer’)) {
var explorerPath = app.get(‘loopback-component-explorer’).mountPath;
console.log(‘Browse your REST API at %s%s’, baseUrl, explorerPath);
}
});
return server;
};
Теперь откройте файл server/component-config.json и измените его следующим образом:
{
“loopback-component-explorer”: {
“mountPath”: “/explorer”
},
“@mean-expert/loopback-component-realtime”: {
“auth”: false // For this example, we will see authentication in another post.
}
}
НАСТРОИТЬ SDK BUILDER
Откройте файл package.json и добавьте в раздел скриптов следующее:
{
“name”: “todo-api”,
“version”: “1.0.0”,
“main”: “server/server.js”,
“scripts”: {
…
“build:sdk”: “./node_modules/.bin/lb-sdk server/server ../todo-app/src/app/shared/sdk”
},
…
}
Хорошо, теперь у нас есть конфигурации Back-End, но прежде чем мы перейдем к части Angular 2, давайте просто создадим простую модель Todo.
СОЗДАТЬ МОДЕЛЬ ТОДО
$ slc loopback:model Todo ? Enter the model name: Todo ? Select the data-source to attach Todo to: db (memory) ? Select models base class PersistedModel ? Expose Todo via the REST API? Yes ? Custom plural form (used to build REST URL): todos ? Common model or server only? common Lets add some Todo properties now. Enter an empty property name when done. ? Property name: text ? Property type: string ? Required? Yes ? Default value[leave blank for none]:
СОЗДАТЬ ПРИЛОЖЕНИЕ ANGULAR 2
$ cd ../ $ ng new todo-app Visit http://ember-cli.com/user-guide/#watchman for more info. installing ng2 create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/app/index.ts create src/app/shared/index.ts create src/assets/.gitkeep create src/assets/.npmignore create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.json create src/typings.d.ts create angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tslint.json Successfully initialized git. Installing packages for tooling via npm.
СОЗДАТЬ FIRELOOP SDK
$ cd todo-api $ npm run build:sdk
УСТАНОВИТЕ ЗАВИСИМОСТИ FIRELOOP SDK
$ cd ../todo-app $ npm install — save socket.io-client @types/socket.io-client
Откройте файл todo-app/src/tsconfig.json и добавьте раздел новых типов:
{
“compilerOptions”: {
….
“types”: [
“socket.io-client”
]
}
}
И чтобы завершить все эти конфигурации, давайте просто установим модуль SDK в наше приложение Angular 2, открыв todo-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 { SDKModule } from ‘./shared/sdk’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
SDKModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ
Вау, я знаю, что конфигураций было много… Особенно сложно, если вас привлекает конечный результат, но вы совершенно новичок в LoopBack или даже Angular 2.
Это прекрасный пример того, почему я создаю FireLoop.io (не просто модуль FireLoop, но и Framework), потому что речь идет не о конкуренции с LoopBack; Речь идет скорее о том, чтобы сделать работу с LoopBack удобнее, но также о создании более удобной кривой обучения, предоставляя единую команду, которая настраивает все. Пока этого не произошло, теперь вы знаете, как это настраивается вручную.
Итак ... Если вы дойдете до этого места, я ценю это и обещаю, что в ближайшем будущем я все сделаю проще, чтобы вы могли сосредоточиться на интересной части:
ДОБАВИТЬ ЛОГИКУ ТОДО
Наконец-то пришло время повеселиться !!! Для этого доработаем наш app.component.ts файл, чтобы он был связан с LoopBack и модулем FireLoop, добавив следующие методы:
import { Component } from ‘@angular/core’;
import { Todo, FireLoopRef } from ‘./shared/sdk/models’;
import { RealTime } from ‘./shared/sdk/services’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘TODO Application’;
private todo : Todo = new Todo();
private reference : FireLoopRef<Todo>;
constructor(private rt: RealTime) {
this.reference = this.rt.FireLoop.ref<Todo>(Todo);
}
add(): void {
this.reference.create(this.todo).subscribe(() => this.todo = new Todo());
}
update(todo: Todo): void {
this.reference.upsert(todo).subscribe();
}
remove(todo: Todo): void {
this.reference.remove(todo).subscribe();
}
}
Действительно просто, да? На самом деле я думаю, что это действительно говорит само за себя, но я хочу поговорить о некоторых деталях:
МОДЕЛИ И ССЫЛКИ FIRELOOP - ВСЕ, ЧТО ВАМ НУЖНО
Да!!! Вы правильно прочитали, но ... Что именно это означает? Что ж ... Это означает, что теперь вы можете избежать создания множества ссылок на свойства и методы, как мы привыкли.
Например, вы обычно создаете private todos: Todo[] = new Array<Todo>() список, но теперь в этом нет необходимости.
Созданный нами справочник FireLoop может быть синхронизирован с сервером для любого изменения списка, и с некоторой помощью Angular 2 вы сможете напрямую его визуализировать следующим образом:
ОБНОВИТЬ APP.COMPONENT.HTML
<h1>
{{title}}
</h1>
<form (submit)=”add()”>
<input type=”text” name=”todo” [(ngModel)]=”todo.text” placeholder=”Add Todo” />
<button>Add</button>
</form>
<ul>
<li *ngFor=”let todo of reference.on(‘changes’) | async”>
<input type=”text” name=”todo” [(ngModel)]=”todo.text” />
<button (click)=”update(todo)”>update</button>
<button (click)=”remove(todo)”>remove</button>
</li>
</ul>
Опять же, это действительно простой пример, но я хочу сосредоточиться на одном:
<li *ngFor=”let todo of reference.on(‘changes’) | async”>
Как вы можете видеть, мы используем ссылку FireLoop для прослушивания changes, а с помощью асинхронного канала Angular 2 будет отображать все наши Todos в представлении нашего приложения.
Но ... это не идеал, и есть несколько причин, которые можно перечислить, от производительности до удобства использования.
Так что можно сделать?
Если у вас есть некоторый опыт работы с Angular 2, у вас уже может быть предположение, что reference.on('changes') на самом деле возвращает Observable, что мы можем ссылаться на него и использовать вместо этого.
…
export class AppComponent {
…
private todo : Todo = new Todo();
private todos : Observable<Todo[]>;
private reference : FireLoopRef<Todo>;
constructor(private rt: RealTime) {
this.reference = this.rt.FireLoop.ref<Todo>(Todo);
this.todos = this.reference.on(‘changes’);
}
…
}
<li *ngFor=”let todo of todos | async”>
Это не только улучшает производительность, но и позволяет запрашивать то, что действительно требуется разработчику или конечным пользователям. Что это? Язык запросов.
…
export class AppComponent {
…
constructor(private rt: RealTime) {
this.reference = this.rt.FireLoop.ref<Todo>(Todo);
this.todos = this.reference.on(‘changes’, {
offset: 0,
limit: 10,
order: ‘id DESC’
});
}
…
}
Это открывает новый мир возможностей, потому что теперь вы синхронизированы с сервером, но вы получаете то, что нужно этому конкретному клиенту, что отлично подходит для списков в реальном времени, чатов, отчетов и т. Д.
Опять же, если вы новичок в LoopBack и хотите знать, какие фильтры доступны, проверьте СЛЕДУЮЩУЮ ИНФОРМАЦИЮ и обратите внимание, что вас интересуют фильтры, а не синтаксис методов, помните, что FireLoop - это совершенно новый интерфейс. .
Если вы хотите узнать больше о синтаксисе FireLoop, ПРОЧИТАЙТЕ ЗДЕСЬ.
ИСПРАВИТЬ УГЛОВОЙ CLI REQUIRE ТИП
На момент написания этой статьи инструмент CLI Angular 2 выдает консольную ошибку, если я не буду об этом говорить; может показаться, что в этом примере есть ошибки. Но, правда ошибка отображается из ванильной установки, но как ее исправить?
Если вы получаете Cannot find name 'require' ошибку, вам нужно просто открыть src/typings.d.ts файл и добавить следующую строку:
declare var require: any;
Это все; у вас должна быть возможность протестировать наше приложение Todo в реальном времени без каких-либо ошибок в консоли.
ТЕСТОВОЕ ЗАДАНИЕ
Если вы запустите оба, интерфейсный / внутренний серверы, вы должны увидеть следующий результат:
Запустить сервер
$ cd to/todo-project/todo-api $ node .
Запустить клиент
$ cd to/todo-project/todo-app $ ng serve
Откройте 2 вкладки браузера на http://127.0.0.1:4200 и запустите приложение Todo в реальном времени.
ЧТО СЛЕДУЮЩЕЕ?
Что ж, впереди большой объем работы по созданию фреймворка FireLoop.io, одним из моих приоритетов является интеграция с Angular 2 Universal, так что… Следующими моими шагами будут доставить последнюю статью о ng2d3 и после я представлю улучшения и новые интеграции, чтобы вы могли создавать еще более быстрые и лучшие приложения Angular 2.
Если вам нравится эта серия и вы хотите быть в курсе следующих релизов и новых пакетов, подпишитесь на меня в Twitter @johncasarrubias и, если вы чувствуете это, оставьте здесь комментарий.
Спасибо за прочтение.
