Loopback: An Easy and Robust Mobile Backend - Michael Hantler & Aviv Callander, Hitech Consulting

LoopBack: An Easy and

Robust Mobile BackendAviv Callander and Michael Hantler

www.hi-techconsulting.net

PERFECTED TECHMobile App Development Perfected Inside And Out

Aviv Callander

CEO of a software development firm in Jerusalem Israel with focus on mobile

and web. With over 10 years of high-tech experience Aviv has managed,

designed and developed full software cycles for successful high-tech

companies globally.

Michael Hantler

Michael started developing for mobile platforms (Android, iOS, BlackBerry,

mobile web) in 2010 with a focus on developing applications for the Android

operating system. His specialties include UX design and integration,

application architecture, hybrid app development, secure enterprise

development, data security, cloud-based-data integration, and robust POC

implementations.

The Need for Cloud on Mobile

What is LoopBack?

Open Source API Framework

Node.js

Mobile SDKs

Model Driven Development

Server Setup

Custom Server Setup

Server Complete!

LoopBack Client SDKs

SDKs, We don’t need no stinking SDKs

A Look at the Client SDKs

iOS

Android

Android Deeper Look

Browser Javascript (Angular)

Client example

All information available through LoopBack documentation and LoopBacks open source GitHub

Repos.

iOS SDK

AFNetworking

Open source on GitHub

iOS SDK

AFNetworking

Open source on GitHub

Notes

@interface WidgetRepository : LBModelRepository

@interface Widget : LBModel

iOS Sample Code

NSURL serverURL = [NSURL URLWithString:@"http://example.com"];

LBRESTAdapter *adapter = [LBRESTAdapter adapterWithURL:serverURL];

Connect Adapter to LoopBack Node.js instance

WidgetRepository *repository = (WidgetRepository *)[adapter repositoryWithModelClass:[WidgetRepository

class]];

Widget *pencil = (Widget *)[repository modelWithDictionary:@{ @"name": @"Pencil", @"price": @1.50 }];

Create repository instance and a new instance of a pencil

iOS Sample Code cont

[pencil saveWithSuccess:^{// Pencil now exists on the server!

}failure:^(NSError *error) {

NSLog("An error occurred: %@", error);}];

Now save that pencil instance to the server

Android SDK

loopj/Asynchronous Http Client

min-sdk 8

Open source on github

Notes

public class WidgetRepository extends ModelRepository<Widget>

public class Widget extends Model

Android Sample Code

Connect Adapter to LoopBack node.js Instance

RestAdapter adapter = new RestAdapter(getApplicationContext(), "http://example.com");

WidgetRepository repository = adapter.createRepository(WidgetRepository.class);

Create repository instance

Android Sample Code Cont

repository.findById(1, new ModelRepository.FindCallback<Widget>() {@Overridepublic void onSuccess(Widget widget) {

// found my iPencil!}

public void onError(Throwable t) {// handle the error

}});

Now to grab our pencil from the server (lets assume it had an id of 1)

Android SDK: Deeper Look

import java.math.BigDecimal;import com.strongloop.android.loopback.Model;

/*** A widget for sale.*/public class Widget extends Model {

private String name;private BigDecimal price;

public void setName(String name) {this.name = name;

}

public String getName() {return name;

}

public void setPrice(BigDecimal price) {this.price = price;

}

public BigDecimal getPrice() {return price;

}}

Android SDK: Deeper Look cont.

public class WidgetRepository extends ModelRepository<Widget> {public WidgetRepository() {

super("widget", Widget.class);}

}

Build the AngularJS module lbServices VIA SDK

lb-ng route/to/loopbackjs/startfile/app.js route/to/create/lbservices.js

If your solution hosting and running the AngularJS app is elsewhere?

Browser JavaScript (Angular)

Register the AngularJS module lbServices

angular.module('my-app-module',['ngRoute' /* etc */, 'lbServices', 'my-app.controllers'])

Create a User from controller

module.controller('RegisterCtrl', function($scope, User, $location) {var creatingUser = {

firstName: $scope.profile.firstName,lastName: $scope.profile.lastName// etc ...

};

User.create(creatingUser).$promise.then(function(createdUser){if(createdUser){

// continue to something great...}

});});

Browser JavaScript (Angular)

Angular example

User.login({include: 'user', rememberMe: false }, credentials, function(data) {

console.log('Successful Login');$location.path('/dashboard');

}else{

console.log('Failed Login');$location.path('/notification/failedLogin');

}

}, function(response) {

console.log('Failed Login');$location.path('/notification/failedLogin');

});

Todo.find({ filter: { where: { or: [{isActive: true }, {randomFakeParam: true }] } } }).$promise.then(function(data){

});

Todo.find({ filter: { limit: 10 } }).$promise.then(function(data) {

});

Todo.find().$promise.then(function(data){

});

User.findOne({filter: {where: {email: '[email protected]'}}).$promise.then(function(data) {

});

Angular example

Questions?