This get started tutorial takes users through the creation of a simple FourSquare clone using the MoSync Reload SDK and cloudbase.io as a backend platform http://cloudbase.io http://www.mosync.com

1. YOUR APP. OUR CLOUD.

2. THE PROBLEM
2
Vast amounts of time and money is
spent
building a backend infrastructure
The mobile developers business
is mobile development
1 Have an idea
2 Define a backend
infrastructure
Pick a hosting provider
3 Develop your backend
software
Test the infrastructure
4 Build your mobile application
5 Maintain your infrastructure

3. WHAT IS CLOUDBASE.IO
3
cloudbase.io is the entire
backend stack of your
mobile application
Leaving you free to do
what you do best…
Build mobile applications
 CloudBase
Online data storage
 CloudFunctions
Your code, our hardware
 Push Notifications
One call – push to all
 Analytics
Improve by understanding your
users
 Multi Platform
All of the mobile platforms in one
place

4. A PRACTICAL EXAMPLE
4
$39.99
Per month
A small virtual server to
begin
$12,000 2 web developers building
your backend in 3 weeks
$2,000 Adjustments to your backend
$150
Per month
A more powerful production
server
$5,000
Per month
Hire a system administrator
$ ∞ Scale your infrastructure
FREE Sign up with cloudbase.io
$ ? Build your application
$11.99
Per month
Start with a cloudbase.io
basic account

5. JavaScript - a bit of history
5
1995 Used to be a dirty word
2005 jQuery changed the
game
2011 HTML5/CSS3 go mainstream, responsive web design is
here
2013 10 of the top 20 most popular projects on GitHub are JS

6. JavaScript goes mobile
6
Modern smartphones include HTML5
and CSS3 compatible browsers
A number of popular web development
framework go mobile and building UI
becomes incredibly simple
We have UI covered – what’s missing?

7. What’s missing?
7
• Access to the native
APIs
• A real backend

8. Let’s build an application
8
What we want to try and build is a clone of FourSquare.
It will require:
• Access to the native API for location
• A database to store its data
• Push notifications to share it

9. The Cloud Database
9
The cloudbase.io Cloud Database is an in-memory object-
oriented NoSql database.
• Store and retrieve complex objects
• Searchable like an SQL database
• Advanced geo-location search
• Files, such as images, can be attached to all documents
SQL Cloud Database
Table Collection
Row Document

10. The JavaScript helper class
10
• The JavaScript helper class does not depend on any framework
• A number of includes make the various components available
• XMLHttpRequest
• Md5
• Platform specific helper
• CBHelper – the main helper class object
• Data is received through callback methods in the form of a
CBHelperResponseInfo object
• Location data can be sent with each request in the form of a
CBHelperCurrentLocation object
• Files can be attached to cloud database documents and downloaded
as Blob data

11. User interaction flow
11
1 A user registers or logs in with an existing account
2 The user is presented with a map of other users’ current location
3
The user decides to “check-in” at a location – The current
location is converted to an address and saved in the cloud
4 Nearby users are sent a push notification with the updated location

12. 1 - Login
12
1. Declare and initialize
the cloudbase.io
helper class
2. Do we know the user?
3. Login
var helper;
$(function() {
helper = new CBHelper('app-code', 'app-unique');
helper.setPassword(hex_md5('my-app-password'));
if ( localStorage && localStorage.CloudSquareUser ) {
// we know the user. Load the data and set
// it in the helper class
} else {
// load the login/registration form
}
});
var loginCondition = {
"username" : username.toLowerCase(),
"password" : password
};
helper.searchDocuments(loginCondition, "users", function(resp) {
if ( resp.outputData.length > 0 ) {
document.location.href = 'home.html';
}
});

13. 1.1 - Registration
13
1. Is the username
taken?
1. Create the user
1. Redirect to the main
page
helper.searchDocuments(
{ "username" : username.toLowerCase() },
"users", function(resp) {
if ( resp.callStatus && resp.outputData.length == 0 ) {
var user = {
"username" : username.toLowerCase(),
"password" : hex_md5(password)
};
helper.insertDocument("users", user, null, function(resp) {
if ( resp.callStatus &&
resp.outputData == "Inserted") {
document.location.href = 'home.html';
}
});
}
});

14. 2 - Find other users
14
1. Get the current
position
1. Find users nearby
5KMs in radians
1. Add the user as a pin
on the map
var currentPosition = null;
navigator.geolocation.getCurrentPosition(
function (position) {
currentPosition = new CBHelperCurrentLocation(
position.coords.latitude,
position.coords.longitude,
position.coords.altitude);
});
var search = {
'cb_location' : {
'$near' : [ currentPosition.lat, currentPosition.lng ],
'$maxDistance' : (5000/1000)/111.12
}
};
helper.searchDocuments(search, "latest_position", function(resp) {
if ( resp.callStatus ) {
for ( index in resp.outputData ) {
var user = resp.outputData[index];
var userPos = new google.maps.LatLng(
user.cb_location.lat, user.cb_location.lng);
}
}
});

15. 3 - Checkin
15
1. Get the address from
the position using a
cloudbase.io applet
2. Read the current
address
1. Create the new
checkin object and add
it to the history
1. The helper class will
send the current
position automatically
so long as the
currentLocation
property is set
helper.executeApplet("cb_get_address_from_coordinates",
{ "lat" : currentPosition.lat,
"lng" : currentPosition.lng }, function(resp) {
var address = resp.outputData["return"].formatted_address;
var newCheckin = {
"user" : user,
"address" : address,
"time" : new Date().getTime()
}
helper.insertDocument(
"checkins", newCheckin, null, function(resp) {
});
});

16. 3.1 – Checkin, latest position
16
1. Check if we already
have a record of the
user’s position
2. If we already have a
latest position update
the existing record
1. Insert a new record for
the user
helper.searchDocuments(
{ "user" : user },
"latest_position",
function(searchResp) {
if ( searchResp.outputData.length > 0 ) {
helper.updateDocument(
newCheckin, { "user" : user }, "latest_position", null,
function(updateResp) {
mosync.rlog(updateResp.outputString);
});
} else {
helper.insertDocument(
"latest_position",
newCheckin, null,
function(insertResp) {
mosync.rload(insertResp.outputString);
});
}
});

17. 4 – Push notifications
17
1. When the application
starts the device
registers for push
notifications
2. Once we have the
address of the current
location create a
channel for the city
1. Notify all other users in
the same city
var pushManager = new PushNotificationManager();
pushManager.register(function(token) {
// subscribe the current device to the push notification channel
pushToken = token;
},
function(error) {
mosync.rlog("Error " + JSON.stringify(error));
});
if ( curComponent.types && curComponent.types.length > 0 &&
curComponent.types[0] == "administrative_area_level_2" ) {
city = curComponent.short_name;
helper.registerDeviceForNotifications(
pushToken, city,
function(registrationOutcome) {
mosync.rlog(”Registered”);
});
}
if ( city != "" && pushToken ) {
// the last parameter is the iOS certificate type
helper.sendNotification("I'm in " + city, city, "development");
}

18. 4.1 – Automated push notifications
18
An alternative to the method described in slide 4 is to send
push notifications through a Cloud Function attached to the
latest_position collection as a trigger

19. What next?
19
• Social aspect
• Login with facebook – Social Media Applets cb_facebook_get_profile
• Adding friends to make social groups – Cloud Database
• Comments on checkins – Cloud Database / Push Notifications
• Send direct messages – Cloud Database / Push Notifications
• Invite friends – Cloud Database / Push Notifications
• Media
• Attach photos to checkins – Cloud database
• Additional information
• Create venues instead of address – Cloud Functions / Cloud Database
• Full profile – Cloud Database