How to build PhoneGap + StackMob apps without Backbone.js? - html

Question

I want to build a PhoneGap HTML5 app with a StackMob backend. There seems to be a shortage of books, videos, and tutorials on the topic.
Specifically, how can I build a Phonegap + StackMob app without using Require.js and Backbone.js?

Answer 1

I think stackmob developer website: https://developer.stackmob.com/ is the best resource.

Answer 2

Using phoneGap with StackMob is independent of using Backbone.js and Require.js. The StackMob SDK is built using Backbone.js for managing models and collections.
So, if you want to build an app without Backbone.js, you can make bare AJAX calls to StackMob. Here is a JSFiddle showing how.
http://jsfiddle.net/ericktai/mr925/
/*
We want to prepare the Request headers we're going to send to StackMob. It should look like:
{
'Accept': application/vnd.stackmob+json; version=0',
'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace': 1,
'Range': 'objects=0-9' //this is optional, but I did it here to show pagination and extra header fields
}
You can actually have the public key in the header as:
'X-StackMob-API-Key': dc0e228a-ccd3-4799-acd5-819f6c074ace
OR
'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace': 1
The first is our original format. The reason why I chose the latter is because of this specific example. I'm making cross domain requests jsfiddle.net to api.stackmob.com, which the browser doesn't allow UNLESS we use CORS (cross origin resource sharing). StackMob servers support CORS, but it needs the latter header format to do so. (it was introduced later). iOS and Android SDKs use the first format.
Node.js should be able to use the first format because it doesn't restrict cross domain calls.
The "1" value in the latter format is arbitrary. IE just doesn't allow the value of a header to be empty, so we filled it with "1".
*/
var publicKeyHeader = 'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace';
var requestHeaders = {};
requestHeaders['Accept'] = 'application/vnd.stackmob+json; version=0';
requestHeaders[publicKeyHeader] = 1;
requestHeaders['Range'] = 'objects=0-9'; //set pagination to first 10
$.ajax({
url: 'https://api.stackmob.com/item',
headers: requestHeaders, //set the headers
type: 'GET',
success: function(data, textStatus, xhr) {
console.debug(data);
},
error: function(xhr, textStatus, error) {
console.debug(error);
}
});
Regarding phoneGap, you'll want to look at the following docs.
https://developer.stackmob.com/js-sdk/using-the-js-sdk-with-phonegap-guide
I've used Adobe phoneGap build successfully.
Btw- I am the Platform Evangelist at StackMob