Abstract:

Cloud computing is new technology that has been widely studied in recent years. There
are numerous cloud platforms available in the market today. With the increase in the
number of cloud platforms in IT industry, the issue of understanding and using these
platform has risen steeply. We have tried to cover Appery.io and Meteor, two very
famous platforms for mobile app development. A detailed comparison has been
presented in this paper which is focussed on the aspects such as the architecture,
characteristics, applications, and user friendliness. We have tried to implement two
applications that use Google APIs to communicate with cloud platform and in turn, build
geolocation based application. Before conclusion, we have tried to demonstrate some
convergences and differences between Appery.io and Meteor platforms.

Introduction:
Cloud computing is a buzz word and is applied to several embryonic trends in the field
of information technology. The term computing in cloud implies to some of the
ubiquitous on-demand IT resources available on the internet. Nowadays every new
internet based service is labelled as cloud either officially or externally. Recently cloud
computing has garnered a notable amount of interest and with this; there has been a
growing ambiguity about the term "computing" in cloud paradigm too.
The need for a very clear and unambiguous terminology in cloud computing is felt today
[1] [2].The currently available offerings in cloud computing are not properly standardized
mainly due to the relative infancy of the industry. Thus, neither the service providers nor
the actual consumers know what an "integrated" and "robust cloud computing service
should look like. Due to humongous features, a variety of services and vivid
implementations, cloud services are not easily comparable.
The scopes of various cloud computing product offerings overlaps and differ in many
labyrinthical ways. So there are multiple approaches and ongoing debates about cloud
computing [5] [6]. The goal of this paper is to perform a detailed comparison between
two cloud platforms (Appery.io and Meteor) and clarify the similarities and differences
alongside implementing a geo-location based mobile application. Clarifying the
relationship of technologies used with cloud computing and constraints of cloud
computing while developing a geo-location based mobile applications.

Cloud computing in mobile applications

Mobile devices like Blackberry, iPhone and androids are very popular clients of web
resources. This paper discusses cloud computing as a way to deliver remote mobile
applications to mobile devices. Divya Narain has stated that cloud computing" will soon
be providing multiple ways of developing and using mobile applications [7].

There are two major questions which are normally raised on the implementation of any
application based on the cloud.
1) How the application was implemented
2) What challenges were faced during the implementation of the application?

We targeted cloud computing for mobile applications so the first question about its
implementation can be fragmented in two aspects, one where to build the application
and second how the application will talk to the cloud. So in a whole main objective of the
paper is:
1. To discuss how to implement a mobile application that works with cloud platform as
its base.
2. How to make mobile application built with cloud platform accessible to different
operating systems on mobile phones.
3. What are the major challenges in the implementation of a mobile application based
on the cloud platform?

First, we are going to build a Geo-location based application in Meteor and then in
Appery.io.

Introduction:
Meteor or Meteor JS is a free and open source web framework based on Javascript
which is written using Node.js [9]. Meteor supports rapid prot0yping and can produce
cross-platform code. It collaborates with MongoDB and uses Distributed Data Protocol
and a publish-subscribe pattern to dynamically propagate changes in data to the client.
This dynamic change in data is done automatically by Meteor without requiring the
developer to write any type of synchronization code.

Meteor Architecture:

The above figure [8] shows the architecture of Meteor platform. The main functional
parts of this architecture are as follows:
EJSON: It is an extension of JSON. This imparts support to most data types like date,
Binary and some user defined types too. An example is of Mongo.ObjectID which is
supported by EJSON but not by JSON.
DDP (distributed Data Protocol): It is also referred as Meteors backbone. It is a
communication protocol based on JSON which serves as a link between the client and
the server. This allows Remote procedure calls to execute on Meteor server. This is
quite interesting as it allows non-native Meteor apps to talk to Meteor servers. In other
works, the application is speaking DDP and Meteor server can understand DDP.

MongoDB: Meteor uses Mongo databases for storing and retrieving data. MongoDB is
a cross-platform document-oriented database which is very suitable for JSON
documents.
Meteor Run: The core of Meteor application lies in its robust Javascript library packages
like underscore, HTTP and much more.
Cordova: Javascript library that provides user interface support to the Meteor to run
various mobile platforms.

Implementation:
Meteor is a platform that has been built for building the real-time application. and easy
mobile application with Cordova. So we are going to utilize Meteor as a platform to build
a mobile application.
Libraries used:

Leaflet

The leaflet is an open source Javascript library which can be used for mobile-friendly
interactive maps. It works perfectly across major desktop and mobile platforms. It can
be extended with lots of plugins too.

underscore.js (part of Meteor)

Underscore provides useful functions for programming. we specifically used the map
function to iterate values into arrays.

Ratchet.

This library provides a modular structure for CSS and scripts for Meteor platform

HTTP request

This package helps with simple HTTP calls in the application

Cordova.

Formerly known as PhoneGap, it is a popular mobile application development

framework. The core of Cordova application uses HTML 5 and css3 for rendering and
Javascript for logic.

Goal:
The prominent goal of this application is to use Meteor libraries and mongo DB to
create geo-based urban location mobile application. We will use users locations and
then use Google APIs to make some logical decisions. The information from Googles
APIs would be poured into the database and then suggestions would be shown to a
user on his screen. This application keeps the track of user's location and shows him
nearby food locations. The application also tells if the food place is open or closed,
working hours and type of cuisine served in the food place.

Installing Meteor on OS X, Linux, and Windows

OS X, Windows, and Linux are supported by the Meteor. It is very simple to install. The
command line installer supports Mac OS X 10.7 (Lion) and above, and Linux on x86
and x86_64 architectures. The Windows installer supports Windows 7, Windows 8.1,
Windows 10, Windows Server 2008, and Windows Server 2012.
On OS X or Linux:
Command to fire on terminal
Curl https://install.Meteor.com/
On windows:
Link to download Meteor installer
https://install.Meteor.com/windows

Creating the Application Step by Step [10]

Step 1: creating directory and Meteor application
Navigate to the root folder where Meteor was installed and then fire command:
Meteor create name_of_application.

We have created a new Meteor project called city_vibes

Then we will create directory structure for the application.

I already have my Meteor application named city_app and the directory structure is as
follows:
Public- Code that can run in either client or server environment is placed here
Client- Code that runs on client side
Server- code that runs on server side.(secure code)
Collections- services that we want to use sit here.
Lib- This is the first directory that gets loaded while running the application
.Meteor- automatically provided by Meteor for quick development of the application.

[The libraries, I have created over here are standard libraries and in accordance with
Meteor structure.]
By default Meteor creates city_app.js and city_app.html file that helps in quick
starting of the project.
Installing packages needed for the project:
Atmospherejs.com is the best place to download Javascript packages. It provides
almost most of the packages available for the Meteor.

1)

iron:router :

Meteor add iron:router

The iron:router helps in catching the URL from the browser and will help in routing
the URLs in proper places.
2)

Ratchet:

Meteor add pcjpcj2:ratchet

Ratchet provide basic User interface framework for the mobile application in the
Meteor.

3)

HTTP (core package):

Meteor add HTTP

It allows us to make remote calls to make HTTP calls to remote servers and helps in
fetching remote APIs.
4)

Cordova.js (pugins.cordova.io)

Meteor add Cordova:org.apache.cordova.geolocation@.3.10

Apache Cordova formerly known as phoneGap is a mobile application framework
that helps in creating mobile applications that can run on multiple mobile operating
systems. It detects the right platform in our project and renders the application
perfectly on various mobile platforms.

Step 3:
Preparing client view:
Files: layout.html

Meteor uses <template> to handle HTML files. The same template may occur
multiple times on a page and these occurrences are known as template instances.
Meteor instances are put into documents and destroyed automatically by Meteor.
The use of Leaflet code package can be seen in layout.html. This code helps in
using CSS facility offered by leaflet.
The name of template that will be rendered first by our application is appLayout.
{{> header}} // iron router code to retrieve header view
{{> yield}} // code to render
{{> yield "footer"}} iron router code to retrieve footer
Iron router basically derives its code structure from ruby on rails.

Going ahead we create header.html

<template name="header">
<header class="bar bar-nav">
<h1 class ="title"> CITY_PLACES </h1>
</header>
</template>
Header creates a view using facility from ratchet package. The header tag structure is
provided within ratchet.
Creating Router for the application
We want our router to run every time the application is loaded so we put this file in Lib
directory.
This router is written using Iron:Router
Router.configure({
layoutTemplate: 'appLayout'
})
Router.route('/', {
template: 'home',
waitOn: function() {
return Meteor.subscribe('nearbyPlaces', Session.get('bottomLeft'), //function call
Session.get('topRight'))// session call
},
data: function () { return Places.find() }
})
We configure our router to render our template called appLayout. Then it routes to
home and run the function called nearbyPlaces and returns with data.
Template home is used to show the map (home.html)
<template name="home">
<div class="content">
<div id ="map" style= " height: 100%;"> </div>
</div>
</template>

Step 4:
Configuring the application to work on various mobile platforms using cordova
Meteor.startup(function() {
navigator.geolocation.getCurrentPosition(success); // function call for currentlocation
});
success = function(position) {
Session.set('location', position); // function with return call and location details
Meteor.call('fetchNearbyLocations', position.coords)
}
We make a call to get current location from users browser .This call returns back with
the position coordinates of the user. This location is used while taking any decisions in
the application. Then we use session which is more related to User interface and cant
survive a page reload. This session value is just used for the temporary purpose.
Persistent sessions can be used by session amplify facility. Session sets our location
and position as an object for us.

Step 5:
Places.js
We will make our database and values from the Google Maps in our database.
We have used ROBOMONGO software that allows connecting to local mongo
databases
Places = new Mongo.Collection('places');
Meteor.methods ({
'fetchNearbyLocations': function(coords) {
if (Meteor.isServer) {
results
=
HTTP.get("https://maps.googleapis.com/maps/api/place/nearbysearch/json?
location=" + coords.latitude + "," + coords.longitude&radius=500&types=food&
key=AIzaSy*********************")
console.log(results)
_(results.data.results).each(function(loc) {
_.extend(loc, {loc: {type: "Point", coordinates: [loc.geometry.location.lng,
loc.geometry.location.lat]}})
Places.upsert({id: loc.id}, {$set: loc})
});
}
}
});
First, we created a new mongo collection by the name places and used to store data
from Google Maps. The Meteor Methods are used to define new functions. We define
our core function fetchNearbyLocations to run on server side.
Hereby we make the call to the Google APIs to get locations. I like food so, I used
Googles Food API to get nearby food locations and provided my API key to complete
the call to API
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location="
coords.latitude + "," + coords.longitude&radius=500&types=food&
Then every request returns with information about the nearby food places. This is
inserted in the database by loc.id.

Step 6:
Now we will move to server side implementation of the application.
Index.js
Places._ensureIndex({'loc.coordinates':'2dsphere'});
The server basically creates 2d index using location coordinates and loc.cordinates
would be created in database.
Publication.js
Meteor.publish('nearbyPlaces', function(bottomLeft, topRight) {
if (!bottomLeft && !topRight) {
return [];
}
return Places.find( { loc : { $geoWithin :{ $box : [bottomLeft, topRight]} }})
});
We use Meteor.publish over here and call our function nearbyPlaces. It returns the
geolocation with upper and lower index values.

Step 7:
Finalizing the client side to retrieve values from the session call
Template.home.rendered = function() {
Tracker.autorun(function() {
if (Session.get('location')) {
latitude = Session.get('location').coords.latitude;
longitude = Session.get('location').coords.longitude;
var map = L.map('map').setView([latitude, longitude], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>
contributors'
}).addTo(map);
bounds = map.getBounds();
if (bounds) {
Session.set('bottomLeft', [bounds._southWest.lng, bounds._southWest.lat]);
Session.set('topRight', [bounds._northEast.lng, bounds._northEast.lat]);
}
if (Template.instance().data) {
Template.instance().data.forEach(function(place) {
L.marker([place.geometry.location.lat, place.geometry.location.lng]).addTo(map)
.bindPopup("<strong>" + place.name + "</strong><br />" + place.vicinity);
});
}
map.on('moveend', function(event) {
bounds = event.target.getBounds()
Session.set('bottomLeft', [bounds._southWest.lng, bounds._southWest.lat]);
Session.set('topRight', [bounds._northEast.lng, bounds._northEast.lat]);
coords = {latitude: event.target.getCenter().lat, longitude:
event.target.getCenter().lng}
Session.set('location', {coords: coords})
Meteor.call('fetchNearbyLocations', coords)
});
}
});
}
We first set up client side to run the map on the screen with Tracker.autorun. The
latitude and longitude values are saved in variables.
Then we create map object and L. Map tells leaflet to map our object map and sets
view for the map object. 15 tells the zoom in the value of the map.
var map = L.map('map').setView([latitude, longitude], 15);

Leaflet cant provide tile feature to the application so we created our own tile feature.
The tile feature adds background information in the map.
Then we add marker to the current location of the user.
L.marker([place.geometry.location.lat, place.geometry.location.lng]).addTo(map)
.bindPopup("<strong>" + place.name + "</strong><br />" + place.vicinity);
We call map.getbounds() and gives us the required information in the form of latitudes.
This data is set and allows previewing, the nearby food places stored in the databases.
Implementation Success v/s Failures
1) The biggest issue with using Google APIs in Meteor is the call to Google Map API
itself. The call from the local host made to Google API is denied. The same call
works after deploying the application on cloud.
Application call on local host:

We tested the same call on internet via Postman application.

The same call to Googles API worked perfectly. So testing of application on local host
couldnt be completed.

2) The second problem was connecting MongoDB with database management

software. We utilized ROBOMONGO to access our mongo database. It seems
to be a simple connection procedure but the connection to Database is sluggish
at times.
3) The session cal is not persistent. We are not able to keep the session alive ,
once the user refreshes the page the information gets changed.
4) We successfully deployed the application on the cloud with the connection to
the database.
5)
The application is platform independent and runs perfectly on any mobile
platform
6)
The user of the application gets information about nearby food places
automatically.

Appery.io

1) Introduction
Appery.io is the first rapid development, integration and deployment platform for
delivering cross device apps in the enterprise. Appery.io is 100 percent cloud-based
since there is nothing to install or maintain and you can develop apps from
anywhere.
Appery.io is a cloud-based platform with visual builder and integrated backend
services. It is a powerful tool but what is underlying implementation when you create
the app? The resulting app has

HTML
JavaScript
CSS
jQuery Mobile
Any custom HTML, JavaScript, CSS added by the developer
Apache Cordova for native APIs and hybrid app creation
Any custom Apache Cordova plugins [1]

2) Platform Overview[6]

What kind of applications can you build using Appery.io

The user can build HTML 5 mobile apps which can run on any device, any browser,
and any platform. It provides a cloud build where we can package apps for iOS,
Android, and Windows phone.
App builder is the main core part in Appery.io. It provides visual builder to build the
app UI. So it is a user visual drag-drop UI. At the same time, user do have access to
the source that allows you to customize the app. The user can write any custom
HTML, JavaScript, CSS and can include any third party libraries. So it is very
important to get a visual approach which is fast but at the same time you have
access to the source to customize it. You can create custom components and reuse
in the app. You can also create page templates, plugins. Also, you can import out of
box functionalities, user kind of extensions into your app.
Framework

Under the hoods, its HTML, JavaScript, CSS and right now user use jquery mobile
for the components. Angular, bootstrap are the frameworks on which appear is
working currently. Now every app you create in appery.io bundles the Apache
Cordova or phone gap and allows us to package the app for the native platforms.
There are any third party plugins you can import them and you can use the API
Integrated Backend Services
Hosting Feature user can publish the HTML 5 mobile app to a custom URL or can
use them own domain.
Cloud Database
There is cloud database for storing app data. The user can send push notifications
to the users console the app. Server code allows you to write the custom code on
the server using JavaScript.
Secure Proxy It helps you to close domain calls and also allows you to keep
sensitive data on the server. E.g. API keys usernames, URLs.
API
The platform is very easy to any third party API. So anything available on the internet
from obvious API providers such as Twitter, Facebook, Salesforce ASAP, IBM you
can add any REST APIs[7][8] and use while building a mobile app. It doesnt matter
if it requires any API key or authentication; a user can use the API in the app.
Enterprise Integration Server
One of the main feature that it provides different data sources for e.g. Database,
SDL, LDAP within an enterprise or within your organization. The user can use this
layer to expose the data source using the REST APIs. So any data source which is
exposed via rest API, you can use it in your app. There are also features like
Authentication, Offline, and Social Integration.
When a user builds hybrid app like using the camera, you need to test the app on
the device but installing the app every time on the device is very time-consuming. So
it allows testing native app without having to install the app on the device each time.
Lastly, you can build a team of developers to work on your append then you can
assign different roles and different permissions. This capability is built into the
platform. [1][6]

3) Implementation:
Build a GeoLocation app that includes the following functionalities
-

Show my location on map

Show traffic layer
Show route between two cities
Search different places located on Map
GPS tracking
Clear Map

1) Show my location on map

a) Create UI using Visual builder of Appery.io
The first step in developing the mobile app is building app UI. To build app UI, we
have used Jquery UI components and HTML 5 UI components provided by the
cloud platform.
To start, I selected a theme Twitter Bootstrap for my visual interface from the App
Settings. I am going to build a geolocation app where I will require a google map to
show the location, a panel to select the various features, input fields for the source
and destination address, List items to show the different items for the app.
Start Screen
Control
Panel

Name
nav_menu

List Items

list_features

Button

Open_panel

Input

From, to

Item List

Mapping_list

Description
To select the list
items from the
navigation menu
To list the various
functionalities
present in the app to
navigate to the
selected
functionality
To open the
navigation panel
Text box to enter the
source and
destination address.
To display the

Button

Show_route

values present in
the database
To display the
routing between
cities onto the map

Visual Builder provides drag and drop for different UI components. The above
control types are dragged from the visual builder and dropped onto the mobile
screen. We can use different properties like Placeholder, icons, image etc for each
component.

Fig. Main Page

Fig. Navigation Panel

Functionalities included

My Location: This functionality shows the current location of the user. This
functionality requires the location feature of the device.
Show Traffic: This will show the traffic layer on the map around the location.
Hide Traffic: This will hide the traffic layer.
Show Routing: This will display the routing information between the source
address and the destination address onto the map.
Locate Places: This will locate the location for the places user has entered into
the input textbox.
Clear Map: This will clear the map and no traffic or location will be displayed on
the map.
GPS: This will trigger users current location in the form of latitude and
longitude and store into the database.

b) Create the device service for GeoLocation

Appery.io provides inbuilt GeoLocation service that is integrated into the platform.
So we can use this service easily.

To create GeoLocation service

On the main appery.io editor page, click on the Create new button
Select Services and click the device service as GeoLocation and create the service

Fig. GeoLocation service

c) Create Data Source for the services and provide the mapping for it
Once the service is created, we have to add the services to our page. So we go to
Data and add the services from the list option GeoLocation Service. Now the
service is created, we bind the service to the page. For that, we map the input and
output of the service using Before Send Mapping and Success Mapping
This service does not require any before send mapping i:e mapping before the
service is executed since the service only uses the location service of the device.
The geolocation service when executed provides the following information about
the location
Timestamp
Latitude
Longitude
Altitude
Accuracy
Speed

In this case, we will use the latitude and longitude information from the geolocation
service and then map the values into the local storage variables markerLat and
markerLng. After the geolocation service is executed successfully, we use the
latitude and longitude information present in the markerLat and markerLng
variables to find the location on the map and drop the marker on the current
location.
This is done using the following javascript code
var markerLatLng = new
google.maps.LatLng(localStorage.getItem('markerLat'),
localStorage.getItem('markerLng'));
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: 'My position',
animation: google.maps.Animation.DROP
});
markers.push(marker);
bounds.extend(markerLatLng);
map.fitBounds(bounds);
map.setZoom(10);

In the above code, we are reading the latitude and longitude from the local storage
variables and then using the Google maps API to creating the new marker and
place the marker onto the map.
Before that, we created a javascript file which will initialize() the map with the
default location provided and displays the map when the main page loads.
var directionsDisplay;
var map;
var markers = [];
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();
var trafficLayer = new google.maps.TrafficLayer();
function initialize() {
console.log('Initializing...');
map = Apperyio("google_map").gmap;
if (!map) {
setDelay();
} else {
directionsDisplay = new google.maps.DirectionsRenderer();
}
}
function displayDirections(sourceAddress, destinationAddress, map) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " +
status);
}
});
}
function setDelay() {
setTimeout(initialize, 50);
}

d) Add actions to different events

Lastly, we will invoke the services created when any event occurs. So when the
user clicks on the Show location link in the left panel, invoke the geo location
service to find the current location.

2) Show Traffic
To display the traffic for a particular location, we wrote the following code
trafficLayer.setMap(map);
Apperyio('nav_menu').panel('close');
Here we set the traffic layer onto the map which will use the current location and
then close the navigation panel to display the map page.

3) Routing between two places

Routing between two cities includes a source address field and a destination
address field. The values entered into this fields are passed to a displayDirections()
function when the Show Route button is clicked
var sourceAddress = Apperyio("from").val();
var destinationAddress = Apperyio("to").val();
displayDirections(sourceAddress, destinationAddress, map);
The displayDirections uses the google api to find the directions between two places
with the help of below code
function displayDirections(sourceAddress, destinationAddress, map) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {

directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}

If we see how the map is set right so that we can see the entire route and if we want
to see the traffic then we can click on the show traffic link to show the traffic around.

4) Clear map
Finally the map displayed for current location, traffic or routing can be cleared using
the clear map. On click of the clear map, the map is assigned a null value thus
clearing the map.
for (var i=0; i< markers.length; i++) {
markers[i].setMap(null);
}
directionsDisplay.setMap(null);
trafficLayer.setMap(null);
Apperyio('nav_menu').panel('close');

5) Finding places on the Map

a) Create UI interface for the page
This functionality is added to a new page which will require an input box to enter
a particular place which the user wants to find on the map and a button to find
the location on the google.
b) Create REST service to convert the address

Now we will create a REST service which will use the geocoding API to convert
the location into latitude and longitude information.
Google Maps Geocoding API
Required parameters in a geocoding request:

Address - The street address that you want to geocode, in the format used
by the national postal service of the country concerned. Additional address
elements such as business names and unit, suite or floor numbers should
be avoided.
Key - Your application's API key. This key identifies your application for
purposes of quota management.

Geocoding Responses
Geocoding responses are returned in the format indicated by the output flag
within the URL request's path. In this example, the Google Maps Geocoding API
requests a JSON response for a query on "1600 Amphitheatre Parkway,
Mountain View, CA".
This request demonstrates using the JSON output flag:
https://maps.googleapis.com/maps/api/geocode/json
Sample JSON response
{
"results" : [
{
"address_components" : [
{
"long_name" : "1600",
"short_name" : "1600",
"types" : [ "street_number" ]
},
{
"long_name" : "Amphitheatre Pkwy",
"short_name" : "Amphitheatre Pkwy",
"types" : [ "route" ]
},
{
"long_name" : "Mountain View",
"short_name" : "Mountain View",
"types" : [ "locality", "political" ]
},

{
"long_name" : "Santa Clara County",
"short_name" : "Santa Clara County",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "California",
"short_name" : "CA",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "United States",
"short_name" : "US",
"types" : [ "country", "political" ]
},
{
"long_name" : "94043",
"short_name" : "94043",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "1600 Amphitheatre Parkway, Mountain View, CA
94043, USA",
"geometry" : {
"location" : {
"lat" : 37.4224764,
"lng" : -122.0842499
},
"location_type" : "ROOFTOP",
"viewport" : {
"northeast" : {
"lat" : 37.4238253802915,
"lng" : -122.0829009197085
},
"southwest" : {
"lat" : 37.4211274197085,
"lng" : -122.0855988802915
}
}
},
"place_id" : "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
"types" : [ "street_address" ]
}
],
"status" : "OK"
}

https://developers.google.com/maps/documentation/geocoding/intro#Geocoding
Responses

We have provided the Geocode API URL and in the Request tab of Geocoding
service, we have added the two parameters components
-

address
key.

The API key is generated using the Google Developers Console and is used as a
parameter for geocoding service.

Then we can test the service by providing the address in the address parameter.
The important thing is appery.io provides facility to import the responses from the
service and this response can be used for data mapping and we need not write
the complete response manually.
c) Create Data source for the service and perform data mapping

Once the service is setup, we create the data source for the service so that we
can use the service for data mapping. Before send event, the address entered
into the address field in the UI is mapped to the geocoding service parameter.
After success event, the latitude and longitude details from the service are
mapped to the map latitude and longitude fields and also with the marker latitude
and longitude fields.

d) Add actions to the different events

The last thing in finding locations is to invoke the service when the event is
performed. So on click of Find Location button, the geocoding service is invoked.

6) GPS Tracking
a) This functionality will track the users current location with the help of device GPS
sensor and then insert the location into the database. The GPS location is
tracked every 7 seconds and saved into the platform database. The location is
saved in the form [lng, lat] in the database. The timer can be changed to the limit
as per the user requirement.
b) Create user interface using the visual builder
The following fields are required to implement GPS tracking:
- My location field The longitude and latitude information will be
displayed into this field.
- Update Interval(sec) This will display the tie interval for which the
location is to be tracked. If the field says 7 seconds then after
every 7 seconds the location will be tracked and stored in the
database.
- Location Tracking This is a toggle button that provides the on and
off functionality for the tracking. If the button is turned off, then the
device will no longer track the location
c) Add the Geolocation service to the data source and perform data mapping

We will add the data source for the GeoLocation service for this page and
provide the mapping on the success of the GeoLocation service. The latitude and
longitude values from the service are mapped to the local storage variables
markerLat and markerLng. This means that after the service is executed
successfully, the latitude and longitude values will be stored in the local storage
variables and then these values will be filled into the My location field with the
use of the following code.
Apperyio("my_location").val(localStorage.getItem("markerLat")
+","+localStorage.getItem("markerLng"));
d) Create database service to store the location into the database
Click on the Database link present on the top right of the Appery.io to navigate to
the database page. Click on the Create new database button and create the
database named gps_location_db. Next to create different tables in the existing
database, click on the create new collection Location. So database and table are
ready and now we add different columns.
+Col Add columns
-Col Delete columns
Edit Col Edit column
+Row Add new row
-Row Delete existing row
In our case, we have added Location column with type geopoint.

e) Generate database service

Now every database and every table that we create are instantly exposed via
REST APIs and we can always check Rest API under the Get option. Since
Database is integrated into the Platform, we dont have to create new service by
hand but we can automatically generate services. Now if we are using third party
service, we need to setup the service by hand. To create database service
On the main appery.io editor page, click on the Create new button
Select Database Services and click the database created location and
add the create service since we want to insert the location into the
database.
f) Create the data source for the service and provide the data mapping.
Once the service is created, we have to add the services to our page. So we go
to Data and add the services from the list option Create Service. Now the
services are added, we bind the service to the page. For that, we map the input
and output of the service using Before Send Mapping and Success Mapping.

Create Service This service will take the latitude and longitude and insert into
the database.
g) Add actions for different events
Now we will invoke different services when the user performs a particular event.
After the GeoLocation service is executed, we will invoke the create service. So
after every 7 seconds, the location is tracked and the value is placed into the My
Location field and then the create service is invoked that will store the location
values into the database. Before we load the create service, We need to invoke
the GeoLocation service on the page. So when the Page loads, we will invoke
the geolocation service using the below code
geolocation2.execute({});
gps_interval = setInterval(function(){
geolocation2.execute({});
},
Apperyio('tracking_interval').val() * 1000
);

The location tracking can be stopped by switching off the toggle button. It works
as shown below.

if (gps_interval == null)
{
gps_interval = setInterval(function(){
geolocation2.execute({});
},
Apperyio('tracking_interval').val() * 1000);
} else
{
clearInterval(gps_interval);
gps_interval = null;
}

The above code will check if the toggle button is ON, then it will set the interval to
the value provided in the field. And if the toggle button is OFF, then it will clear
the interval and location will no longer be tracked.

g. Test the mobile app into the in build appery.io tester

User can test the app by launching the appery.io tester. This is done by clicking
the Test link present on the header of every page of appery.io. Also, there is
native appery.io tester app available for android and iOS where we can test the
native device features like GPS, camera etc.

Different libraries used to build the app

Cordova
Apperyio mobile base
Jquerymobile
Jquery-ui-map
customEventHandler

WORKING OF THE PROJECT

Main Page
The Main page consists of the google map, routing functionality, and the left navigation
panel. Click on the panel icon on the top left of the app to open the navigation panel.
Navigation Panel consists of various navigation links.

My Location
Traffic->Show
Traffic->Hide
Locate Placecs->Show
Clear Map
GPS

To find the current location of the user, click on the My Location item under the
navigation panel. If the location service of the device is switched off then it will ask the
user to switch on the device so that the GeoLocation API can access the location of the
device and then the marker will be shown on your current location.

Again open the navigation panel and click on the show traffic item. As per the above
screenshot, you can see the traffic displayed around the current location. We can clear
the map by clicking on the Clear Map link in the navigation panel.

Locate Places Page

On the main page, enter the from

and to destination.
As in diagram, I have entered from
field as Regina and to field as
Moose Jaw.
Cick on Show route button.
The Map will show the routing
between the two places clearly and
it will also the traffic along the way if
the show traffic button is clicked.

GPS Tracking Page

On the main page, click on the

panel icon to open the naviagation
panel.
Now click on the locate places link
to navigate to the new page
On the locate places page, enter
new york into the address field
Cick on Find Location button.
The Map will show the place
entered in the above field

On the main page, click on the

panel icon to open the naviagation
panel.
Now click on the GPS link to
navigate to the new page
On the GPS page, My location
information field will be prefilled by
the GeoLocation service.
How often field shows the time
interval for seconds for which the
location will be tracked.
Since the location tracking button is
in ON status, location will be
tracked in every 7 seconds.
Now click on the button to switched
off. The location tracking will be
disabled.
Please find the below database
screenshot that shows the entry for
the location.

Implementation Success/Failure
Geo location Feature: The core functionality of the system is to access the location of
the user and give him suggestion on the basis of his location. This feature is correctly
implemented in our system.

Routing feature: We are able to route user from one location to other desired location
and traffic conditions in routing too. The routing function can also be cleared from the
map.
Locate place from the database We wanted to add places and its features in the
database. This would have served as various options on the map for the user. We were
able to add places in the database but those places didnt show up on the map. For
example we added food places in the database but this places didnt show up in the
map.
GPS we implemented location tracking of the user. The GPS tracker adds the current
position of the user in the database. The position of the user is added in the system
after every seven seconds.
Real time tracking of the location When a user moves around the continuous location
of the user cant be shown in the map.

Comparison Appery.io vs. Meteor

Language support

Framework

Appery.io
HTML 5
CSS
JS
Ionic
Angular JS
Bootstrap
Jquery Mobile

Meteor
HTML 5
CSS
JS
Angular JS
Bootstrap
React Js
Jquery
React JS
MongoDB
Blaze
React
Angular

Database
User interface

MongoDB
Jquery Mobile
HTML 5
GOOGLE Map
Carousel

Protocols

Database
Integration

LDAP- Lightweight Directory Acess

protocol.
WSDL-Web service Definition Language
SOAP- Simple Object Access protocol
Inbuilt Database panel modeled on
MongoDB.

Integrated APIs

REST APIs

Inbuilt services

Geolocation
Barcode
Camera
Contacts
Cordova
Paypal
Twitter
Service pattern Mobile
Github
facebook
available

MongoDB
Authorization

Available

Not available

In built Project management tool

Github Support

Github support

Pluggin support

GUI interface for

development
Drag and drop
feature
Project
management

DDP- Distributed Data

Protocol

Robomongo
MiniMongo
Meteor SDK
Underscore.js
REST APIs

Leaflet
Cordova
Github
Iron: handler
Ratchet
Not available

Testing
environment
Pricing
Hosting

In built testing module

Local host testing

15 days free trial then charged $30 per

month
Free hosting for 15 days

Development is totally free

No free hosting facility

Critical Analysis
The findings and claims in this section are based upon, our own experience while
developing mobile application on Meteor and Appery.io
1) Meteor has its own packages for everything and one has to figure out which
package should be used for developing the application. Though it supports a rich set of
APIs , a lot of time was spent on figuring out which of the existing NodeJS and browser
packages to be used for development purpose.

Appery.io is the easiest mobile app maker software .Even for starters; you can generate
a complete application in minutes. We were able to figure out the APIs and plugin easily
for our mobile application

2) Meteor has no visual builder facility for mobile application development. This
means everything has to be coded from scratch.

Appery.io provides a visual builder for developing mobile applications. Drag and Drop
facility for UI components makes it really easy to develop a front end. The code for the
application is automatically generated on the back end by Appery.io.
3) Meteor can work very fine with CSS, Cordova and Javascript which makes it
perfect for dynamic web applications. Although to work with the web and mobile (hybrid
web application) it requires lots of overhead coding and embedding numerous APIs.

Appery.io has a built in feature called services implementation, where you can actually
decide which service you want to actually implement in your web application. Once you
choose the service the rest is done by Appery.io

4) Making the call to Google APIs is a herculean task in Meteor. Once you make the
call to Googles API you need to take care of request header and response format. One

has to install HTTP library to even use basic HTTP request call. HTTP packet,
iron:handler and ratchet ,these 3 libraries were required to make a successful call to the
Google API.

Appery.io has in built service called Geolocation which helps in making calls to Googles
API. It is very easy to add Google APIs in Appery.io. Appery.io basically provides a
simple dialogue box to choose various parameters for API call and then generates the
call automatically for the user.

5) The biggest problem is the database management in a Meteor. We used

Robomongo to connect to existing database in Meteor application. An existing database
can't be ported out easily. To access and manipulate data from Meteor console is a
tough job, especially for new developers.

Appery.io also uses Mongo database but it provides an inbuilt integrated front end for
database insertion and manipulation. We can easily map UI component to a local
variable and this would be initialized when the service is executed.

6) Meteor Apps are fully stateful means the connection between the server and the
client is implicitly synchronized .this results into fat connection and poses scalability
problem

Appery.io has a token associated with the session which determines the statefulness
between the server and the client.

7) Developing an application in Meteor is totally free as it is open source and a wide

variety of powerful and robust Javascript APIs make it much stronger in terms of the
development environment. Deployment of the application to the cloud has become paid
from 25th March 2016.

Appery.io allows you only 15 days free trial period to develop the application on it. It
charges whopping $30 per month for even building the Application on its platform. If you

have access to Appery.io account you can host for free within your trial period and there
is no extra charge for deployment once you opt for the basic subscription package.

Contribution of Each Team member:

Name: - Tofiq Maredia
Student id:-200361052
Contributions:Sr.No Designing
1

Implementation

Testing

Home
page
and My
location Appery.io
navigation panel in functionality
in application
Appery.io
Appery.io
testing
on
native
platform
Cordova
Implementing
Testing
implementation
for geolocation and geolocation
cross
platform geocoding APIs
and
compatibility in mobile
geocoding
devices
services
on
mobile
platforms
Core theme and css Core
routing Testing
of
Appery.io
with facility
latitude and
BootStrap
longitude
location
details
with
data provided
by
GPS
tracking.
Database design in Google
map Testing
Appery.io
implementation
Appery.io
application
during cloud
deployment

Analysis
/Research
Bootstrap

Jquery
Mobile

Cordova

Google APIs

Event handling for Hosting

the GPS tracking
all the pages in application on
Appery.io
Cloud
GPS tracking in
Appey.io
Github Repository
for Appery.io

6
7

Contribution of Each Team member:

Name: - Savan Singh
Student id:-200365209
Contributions:Sr.
No

Designing

GUI Ratchet for Underscore

mobile application and Meteor
on Meteor

Leaflet
implementation
Meteor

Cordova
implementation to
support
GUI
in
various
mobile
platforms
User interface for
Locate places and
GPS tracking page
in Appery.io
Database design in
Meteor application

Implementation

Iron router
in Meteor

Testing

Analysis
/Research

js Local host Bootstrap

testing
for
Google APIs
and session
states
in Deployment Cordova
on
cloud
and session
state

Session
state
and
Google
Maps API in
Meteor
application
Implementing
Maps
in
Appery.io

Testing
Ratchet
Appery.io on
android
devices

Testing
Iron:handler
Google APIs
call
on
Postman
Routing Facility
Jquery
implementation
Mobile
in Appery.io

Github
Repository
Meteor

for

Final report
writing
Comparison
between
Meteor and
Appety.io

Major links for the project:

Github repositories:1) https://github.com/singhsavan/cs807.git
2) https://github.com/singhsavan/CS807_Appery.io.git OR
3)https://github.com/TofiqMaredia/CS807_Appery.io.git

Hosted Application links for Appery.io

http://geolocation.app.appery.io (expires on 20th April 2016)
Hosting for Meteor applications is not free now. So there is explicit link for Meteor
application

Conclusion:
In this paper, we tried to compare two cloud platforms that offer mobile web
development. We researched for any previous work done in the area but there is no
substantial research done, which compares two cloud platform that offers development

of mobile application. This comparison was all about using two modern fast developing
and full stack Javascript platform for developing a mobile application on cloud platforms.
Overall we faced two main challenges with Meteor. It supports reactive programming so
the learning curve is very big. Developer spends more time on thinking about the
libraries and collection that are needed to develop the application and where to fit them
in business logic and user interface. The second issue is ,that Meteor is still in beta
state. We had so many instances where we were stuck to find feasible workarounds
and digging the internet for solutions. Although we will like to mention that it is a very
powerful tool to create applications with its expanding Javascript libraries. Meteor is
best if you start thinking reactively.
Appery.io the only drag-and-drop cloud-based mobile application development
platform. While most of other cloud platforms would require you to download and install
some software on your hardware, Appery.io is totally based on the cloud. Support for
cross-platform, interactive GUI builder, Drag, and drop facility makes it the first choice
for novice developers. Although Appry.io provides most of the facility to develop mobile
applications there is a problem of slow response time in the application. The biggest
factor is that even development of the application is not free on Appery.io. This is a
development heaven for novice developers but less chance of developing some new
solutions.
Our references would be mostly from the working and on hands practical experience
with Appery.io and Meteor. We wanted to make a comparison on the basis of user
interpretation of the two technologies . So we choose practical references rather than
going for research papers.
References:
[1] James Urquhart. The need for a standard cloud taxonomy. CNet News, The Wisdom
of Clouds. http://news.cnet.com/8301-19413_3-10148806-240.html.
[2] Gartner Says Contrasting Views on Cloud Computing Are Creating Confusion.
http://www.gartner.com/it/page.jsp?id=766215.
[3] Amazon Elastic Compute Cloud (Amazon EC2). http://aws.amazon.com/ec2/.
[4] Google App Engine. http://code.google.com/appengine/.
[5] S. Xinogalos, K. E. Psannis, and A. Sifaleras, "Recent advancesdelivered by HTML 5
in mobile cloud computing applications: a survey," in Proc. the Fifth Balkan Conference
in Informatics, 2012, pp. 199-204.

[6] Khan, M. Othman, S. Madani, and S. Khan, "A survey of mobile cloud computing
application models," IEEE Communications Surveys & Tutorials, issue 99, 2013.
[7] Divya Narain. March 2009. ABI Research: Mobile Cloud Computing the Next Big
Thing, http://ipcommunications.tmcnet.com/topics/ip-communications/ articles/59519abi-research-mobile-cloud-computing-next-big-thing.htm
[8] "EJSON E DDP - Allan De Queiroz". Allan de Queiroz.
http://allandequeiroz.com/2015/09/27/ejson-e-ddp/
[9] Vanian, Jonathan (27 December 2014). https://gigaom.com/2014/12/27/Meteorwants-to-be-the-warp-drive-for-building-real-time-apps/
[10] "Building A Meteor.Js Mobile App With Cordova, Mongodb, And Ratchet".
https://www.youtube.com/watch?v=7iqdkVwtuvg
[11] Appery.io,. "Enterprise Mobile App Builder & MFbaas | Appery.Io".
https://appery.io/

[12] Appery.io,. "Pricing | Appery.Io".

https://appery.io/pricing/
[13] Comparakeet,. "Appery.Io Review 2016 - Pros, Cons & More | Comparakeet".
https://www.comparakeet.com/best-app-makers/appery-io-review/
[14] Devcenter.appery.io,. "Source Editing Tutorial | Appery.Io Dev Center".
https://devcenter.appery.io/
[15] dzone.com,. "Appery.Io The Mobile App Platform - Dzone Mobile".
https://dzone.com/articles/apperyio
[16] Dr. Dobb's,. "Restful Web Services: A Tutorial".
http://www.drdobbs.com/web-development/restful-web-services-atutorial/240169069
[17] Build Mobile Apps With Google Map And Geolocation". Blog.appery.io.
https://devcenter.appery.io/tutorials/jqm/building-a-mobile-app-with-googlemap-and-geolocation/

[18] "Custom HTML Markers With Google Maps - Websites, Mobile And Ecommerce
Humaan".Websites, Mobile and eCommerce Humaan.
http://humaan.com/custom-html-markers-google-maps/
[19] "Working With The Google Maps API, Location, And Appery.Io (April 17, 2014)".
YouTube.
https://www.youtube.com/watch?v=LZOC_7vkWds

[20] "Get A Key/Authentication". Google Developers.

https://developers.google.com/maps/documentation/geocoding/get-api-key
[21"Simple Markers". Google Developers.
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
[22] "The Google Maps Geocoding API". Google Developers.
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
[23] "The Google Maps Geolocation API". Google Developers.
https://developers.google.com/maps/documentation/geolocation/intro