LoopBack SDK Builder

The LoopBack SDK Builder is a community driven module forked from the official loopback-sdk-angular and maintained by @johncasarrubias.

Fork Reasons

Since the launch of Angular 2 - Beta (now RC) the community has been requesting support for this version of the framework with a really slow response from the StrongLoop Team with many doubts if they will continue supporting the generator.

Read Here The GitHub Thread

Also, the official proposed solution does not seems to be fully compatible with todays needs. For instance, the "same" Angular 2 SDK won't work the same depending on the environment you are running (NativeScript, Web, AngularUniversal).

Since Angular 2 does not rely on a browser DOM, the SDK implementations may be different according the environment.

Read about the New Angular 2 Ecosystem

Disclaimer

I really don't have any plan to support Angular 1, I'm not trying to compete with the official module.

If you want to build a SDK for Angular 1 please use the official.

loopback-sdk-angular

Coincidences

The client is dynamic, in other words it automatically includes all the LoopBack models and methods you've defined on your server. You don't have to manually write any static code.

Features

• Built in LoopBack Authentication.
• Built in Support for LoopBack Query Language Querying Data
• Built in Interfaces and Models.
• Built in API Calls.
• Built in PubSub support for the loopback-component-pubsub.
• Built in Platform Specific Drivers (Angular2 for web, NativeScript2, Angular Universal).
• Built in CLI Tool for builder.
• Built in Logger Service.
• Ability to select which models or methods to generate.
• Ability to point models to different url domains (not global baseUrl)
• IO Heartbeating to avoid disconnections.
• Fully Typed (TypeScript).
• Small foot print 100k per generated SDK (Will increase depending on number of models).

Installation

$ cd to/api/project
$ npm install --save-dev [email protected]

LoopBack SDK CLI Options

Options:
  -l, --library  Client's library (angular2, react <todo>, ...)                          [default: "angular2"]
  -d, --driver   Platform specific drivers (ng4web, nativescript2, ng2universal <todo>)  [default: "ng4web"]
  -i, --io       Enable PubSub functionality for loopback-component-pubsub               [default: "disabled"]

Client Requirements

The following package needs to be installed in your client application.

• @angular/http

Generate Angular 2 SDK for Web

The default options will create an Angular 2 SDK for Web.

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk

Is equivalent to

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk -l angular2 -d ng4web -i disabled

Generate NativeScript 2 SDK

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk -d nativescript2

Is equivalent to

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk -l angular2 -d nativescript2 -i disabled

Enable Real Time Communication

The Angular2 and NativeScript generators currently implement socket connectivity when using loopback-component-pubsub.

This version of the SDK Builder works with LoopBack Component PubSub Version 1.0.17 or above.

Requirements

The following package needs to be installed in your client application.

• nativescript-socket.io when using the NativeScript2 version
• socket.io-client when using the Angular 2 for Web version

To enable you will need to add the --io enabled or -i enabled flag.

Angular 2 for Web

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk -d ng4web -i enabled

NativeScript 2

$ ./node_modules/.bin/lb-sdk server/server.js /path/to/client/sdk -d nativescript2 -i enabled

Recomended Use

Add a script within package.json

{
  "scripts": {
    "build:sdk": "./node_modules/.bin/lb-sdk server/server path/to/ng2-app/src/app/shared/sdk -d [ng4web | nativescript2] -i [enabled | disabled]"
  }
}

then:

$ cd to/api/project
$ npm run build:sdk

Awesome you now can build SDK for different platforms!!!

Disable Models or Methods

In order to disable a full model add the following configuration

{
  "name": "Message",
  "plural": "messages",
  "base": "PersistedModel",
  "sdk": {
    "enabled": false // default is true
  }
}

If you want to disable specific methods only

{
  "name": "Message",
  "plural": "messages",
  "base": "PersistedModel",
  "sdk": {
    "enabled": true,
    "blacklist": {
      "findOne": true // won't generate the findOne method
    }
  }
}

Next Steps

Now that you have built your SDK, you need to understand how to use it within your Angular 2 Applications

Angular 2 SDK Documentation

TODO

• Start working in version valid for Angular Universal
• Redux and ngrx support
• React Support

Tutorials

• The Ultimate Guide for Building Real Time Applications
• The Ultimate Guide for Building Native Apps

Contact

Discuss features and ask questions on Twitter.