PRESENTING: THE LOOPBACK SDK BUILDER

Hey Guys… Guess who’s back!!! The MEAN Expert site has new fresh design with new content and new tools related to our favorite technology stack.

Today I’m very pleased to start by announcing that after several months of hard work, the Amazing LoopBack SDK Builder for IBM’s StrongLoop LoopBack Framework, Google’s Angular 2 Framework, Telerik’s NativeScript 2 and Ionic 2 is finally in STABLE RELEASE!!!!!

[Crowd Cheering and Standing Ovation in the Background]

Important Message

First of all, I want to truly apologize with all of my readers for the time I didn’t publish new articles.

The reason is that after I realized the Angular 2 team does not have a good sense of what a Release Candidate version means and after all of my articles were suddenly deprecated by Release Candidate 4, I had to make the hard decision to stop writing articles for a while until the final API is ready which just happened today!!!!.

If you have been using Angular 2 during 2016 I’m pretty sure you know what I’m talking about, RIGHT?.

But hey!!! don’t take me wrong, I didn’t forget about you all… I have been working in something really special that will make your life easier while working with Angular 2 and I’m pretty sure that you will definitely love it.

PRESENTING: LOOPBACK SDK BUILDER

The LoopBack SDK Builder is a NodeJS module that seamlessly integrates any RESTful API Application built in the IBM’s StrongLoop LoopBack Framework with one or multiple client applications built in Google’s Angular 2 Framework, Telerik’s NativeScript 2 and Ionic 2.

Actually… Any application built in Angular 2 in any of its flavours can take advantage of this amazing module. Anybody said IoT?

But… How does it look like? Well, lets take the following diagram as reference:

As you can see LoopBack SDK Builder is not a Framework, but an intelligent tool that will analyze your RESTful API and will automatically create everything you need to interact from any Angular 2 Application either through HTTP, WebSockets or Server Sent Events.

What Is Included

The LoopBack SDK Builder provides you with so many things that can be difficult to get it at the very beginning, since it looks like but it is not a framework; But a smart tool that analyzes any LoopBack REST API and then automatically creates from it everything you need to start writing one or multiple client applications built in Angular 2 right away.

But, what exactly that does it mean? This means that you can actually forget about building client services that connects and interacts with your API, but also it will create all the Interfaces, Models, WebSocket Connections, Server Sent Events that any modern application must need.

That is all? Well… Aside the rest of the amazing features the LoopBack SDK Builder provides to you, I need to make you understand the following:

Now you can build Web Applications, Native Mobile Applications, Real-time Applications and even IoT Applications all by using the same base code!!!.

So… This is a BIG DEAL!!!!

When generating your SDK; The LoopBack SDK Builder will create a SIM set for each Model you have defined in your LoopBack Application.

Services

Services are regular Angular 2 @Injectable() Services that allows you to interact with your API either through standard RESTful communication, WebSockets or even Server Sent Events (SSE).

Interfaces

Will declare all of the model properties defined in your LoopBack Application, it will even set these as optional or required according your model configuration.

Models

Models are regular classes that will implement the model Interface and a constructor that allows to extend models to provide custom functionality.

Models and Interfaces are a set of TypeScript Declaration Files.

Naming Convention

While generating your SDK; the LoopBack SDK Builder will create each of these components for each Model you have defined in your LoopBack Application.

  • Services.- Adds an Api postfix to the Model name.
  • Interfaces.- Adds an Interface postfix to the Model name.
  • Model.- Is just the Model name.

How Can I Immediatly Have Access To It?

The LoopBack SDK Builder can be installed using NPM as follows:

1
2
$ cd to/loopback/project
$ npm install --save-dev @mean-expert/loopback-sdk-builder

Generate SDK

Add a script within your LoopBack API package.json

1
2
3
4
5
{
"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:

1
2
$ cd to/loopback/project
$ npm run build:sdk

How to setup the SDK

The LoopBack SDK Builder has been around for many versions of Angular 2 and this is not trivial, anyone who has been using this framework before its stable release may know the API has changed multiple times.

Even-though the @mean-expert/loopback-sdk-builder supports the latests Angular 2 APIs it also maintain backwards compatibility for those applications below RC5.

Install Dependencies

You will always need to have the @angular/http module available in your application, since it is not a core module you will need to install it.

1
2
$ cd /to/ng2-app
$ npm install --save @angular/http

If you have enabled real-time functionality you will also need to install one of the following libraries according your application environment.

When using the SDK for Web and/or Progressive Apps

1
$ npm install --save socket.io-client

When using the SDK for NativeScript

1
$ npm install --save nativescript-socket.io

Setup using NgModule (>= RC5)

Make sure you Install and Configure the LoopBack SDK Builder prior this setup process.

NOTE: It is recommended to follow the Angular 2 Style Guide and build your sdk within the shared directory. e.g. app/shared/sdk.

  1. Open your RootModule file. e.g app/app.module.ts
  2. Import the SDKModule from ./shared/sdk
  3. Add SDKModule within the imports array.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SDKModule } from './shared/sdk/index';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
SDKModule.forRoot()
],
providers : [ ],
entryComponents : [ AppComponent ],
bootstrap : [ AppComponent ]
})

export class AppModule {

}

You will need to execute the SDKModule method forRoot() which will allow to use the SDK app wide using singleton instances.

If you want to know more about this amazing NodeJS Module please visit the official documentation.

What is next?

Thanks to comments from incredible readers I will start from the very beginning… I will start explaining in more detail how to start building applications using the MEAN Stack from scratch.

If you like this series and want be aware of next releases and new packages, follow me on Twitter @johncasarrubias and if you feel it leave a comment here.

Thanks for reading.


Comments:

...