Как создать приложение в реальном времени с Angular 2, Loopback и Fireloop.io

Создание приложений в реальном времени с помощью Angular 2, LoopBack и FireLoop.io

Мне нужно объявить кое-что очень важное. Я очень рад опубликовать информацию о том, что в LoopBack SDK Builder добавлена ​​замечательная функция; его имя FireLoop !!!

Общественные аплодисменты и ожидания на заднем плане

Представляем FireLoop.io

FireLoop - это новая платформа реального времени, построенная на основе LoopBack, которая заменяет стандартный REST API и превращает эту замечательную и зрелую платформу в мощный движок реального времени.

Я хочу, чтобы эта статья оставалась технической и не заостряла внимание на других деталях, если вы хотите прочитать о мотивации, сравнении других фреймворков и т. Д.

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

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

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

Требования

Мы собираемся создать приложение реального времени с использованием Angular 2, LoopBack и FireLoop, поэтому вам потребуются следующие глобальные пакеты для установки.

$ npm install -g strongloop angular-cli

Создать API

Сначала мы собираемся создать наш LoopBack API, а затем мы установим 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

Читать дальше:
Как создать приложение в реальном времени с Angular 2, Loopback и Fireloop.io