These days MVC is the most popular architectural pattern for Javascript  and HTML5 applications. Backbone.js is also based on the same pattern and a lot of web applications are being designed using this. It supports every browser which is supported by jQuery.

Any Backbone App requires a backend or cloud storage for hosting and saving its App data in JSON or binary (e.g. image/audio/video file)  format. App42 JS framework is equipped to deal with all of your data storage requirements including JSON data and binary data like file upload, image upload in your backbone.js app.

Follow these few steps to get started with App42 Javascript Backend

1. Register with App42 platform.
   
2. Go to the dashboard and click on the Create App button.
3. Fill all the mandatory fields and get your APIKey and SecretKey.
4. Download App42 JS framework and unzip it on your machine .

Add These scripts in your HTML file

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js
http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js
App42-all-1.1.1.min.js // downloded from step #4

Creating a Backbone View

FileRow = Backbone.View.extend({
		initialize: function() {
			_.bindAll(this, "render");
			this.template = _.template($("#rank-row").html());
			this.model.bind('unrender', this.unrender,this);
			this.model.bind('remove', this.remove,this);
		},
		unrender: function(){
			$(this.el).remove();
		},
		remove: function(){
			this.model.destroy();
		},
			//every backbone view has a tagName. the default tagName is 'div'
			//we're changing it to a table row
			tagName: 'tr',
		render: function() {
			$(this.el).html(this.template(this.model.toJSON()));
			return this;
		}
})

Backbone Model Bind With Key-Value Pair

File = Backbone.Model.extend({
	defaults: {
		name: "",
		tinyUrl: ""
	}
});

Add Backbone Collection With Model

Files = Backbone.Collection.extend({
	 model: File
});

Saving Your JSON App Data

var dbName = "Your DB Name";//It will auto create in your app if not exists.
var collectionName = "Collection Name Of Your DB";// That also auto creates and binds with your DB.
var json = {name:"Nick",usaerName:"nick@",age:28};
	new App42Storage().insertJSONDocument(dbName, collectionName, json,{
		success: function(object) {
			var storageObj = JSON.parse(object)
			var docId = storageObj.app42.response.storage.jsonDoc._id.$oid // uniuqe Id for every inserted json data
		},
		error: function(error) {
		}
});

Querying Your JSON App Data 

var key = "name";
var value = "Nick"
new App42Storage().findDocumentByKeyValue("Your DB Name", "Your Collection Name",key,value,{
	success: function(object) {
		var storageObj = JSON.parse(object)
	},
	error: function(error) {
	}
});

Upload file From Backbone App

var name = "Smiley face";
var filePath = document.getElementById("img");
var file = filePath.files[0];
var type = "IMAGE";
var description = "App42 Sample Upload";
new App42Upload().uploadFile(name, file,type ,description ,{
	success: function(object) {
		var fileObj = JSON.parse(object)
		$("body").append(view.render().el);
		var file = fileObj.app42.response.upload.files.file
		files.add(new File().set(file));
		console.log(files)
	},
	error: function(error) {
		var errorObj = JSON.parse(error),
		errorMessage = errorObj.app42Fault.details;
		alert(errorMessage);
		console.log(error)
	}
});

Stream Files From App42 CDN Network

new App42Upload().getAllFiles({
	success: function(object) {
		var fileObj = JSON.parse(object)
		console.log(object)
		var file = fileObj.app42.response.upload.files.file
		$("body").append(view.render().el);
		for (var i=0; i < file.length; i++){
			files.add(new File().set(file[i]));
		}
	},
	error: function(error) {
		var errorObj = JSON.parse(error),
		errorMessage = errorObj.app42Fault.details;
		alert(errorMessage);
	}
});

Adding your JSON data in your backbone model like this

var jsonData = "return from App42 success object";
youeBackboneModel.add(new yourCollection.set(jsonData))

Download full sample of App42 – Backend as a Service Backbone.js file upload and unzip in to your local.Edit index.html file and put your API_KEY and SECRET_KEY here getting from above steps.

App42.initialize("API_KEY","SECRET_KEY");

If you have any questions or need any further assistance to integrate this in your App, please feel free to write us at support@shephertz.com