PhoneGap Developer Guide

JSON fueled, delivered by Cloud CMS





PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS. For content rich or content driven PhoneGap applications, Cloud CMS will be a desirable platform since it provides cloud based services for features such as data modeling, traversals, query and full-text search, mimetype transformations, data extractors, email, auditing, etc.

For mobile app developers, it only requires a few simple steps to setup their PhoneGap project to use Cloud CMS as its content platform.

Sign up for Cloud CMS

If you already have a Cloud CMS subscription, you can skip ahead.
Otherwise, be sure to sign up for a trial account first, in order to use Cloud CMS.

API Keys

Every mobile app or web site that you build will need to have a set of API Keys that it will use to connect to your Cloud CMS platform on behalf of your code. These API keys consist of client and user key/secret pairs. You can generate a set of keys using the following steps:

  1. Log in to your Cloud CMS tenant at https://<yourdomain>.cloudcms.net
  2. Click on Developers

You will now see your API Keys for all of your platform's Application instances.
You can create as many Application instances as you'd like and each will have their own set of API Keys.

For more information, visit Configuring your API Keys.

Getting Started

Step 1: Download the Cloud CMS JavaScript driver

The Cloud CMS JavaScript driver handles all of the HTTPS calls, data conversions, OAuth2 authorization handshakes and any and all interaction with the Cloud CMS platform in a secure manner.

To get the latest version of the driver, please visit the JavaScript Driver for Cloud CMS page.

The driver comes as a single JS file that you can drop into your project. You can use either the minified or the uncompressed version (which is better, if you're debugging). It's up to you.


Step 2: Hello World for Android

Let's build a simple Hello World application that runs on Google Android (click here to download the full project).

1) Follow instructions in PhoneGap’s Getting Started with Android Guide to setup a simple Android application.

2) Create a cloudcms sub directory under the assets/www directory and then place the Cloud CMS JavaScript driver under it.

3) Edit index.html (which is under assets/wwwdirectory) and include the cloud CMS JavaScript driver in the head section.

<!DOCTYPE HTML>
<html>
<head>
<title>Cloud CMS - PhoneGap - Hello World</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="cloudcms/gitana.js">
</script>
<script type="text/javascript" charset="utf-8" src="js/index.js">
</script>
<script type="text/javascript">
app.initialize();
</script>
</head>
<body>
<h1 id="cloudcms-welcome"></h1>
</body>
</html>

4) Edit index.js (which is under assets/js directory) and add the code that connects the app to Cloud CMS. This example will first create an instance of Cloud CMS driver which makes connection to to your Cloud CMS platform using the provided credentials. Once the connection is made, it will then print out the name of the authenticated user.

var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
app.helloWorld();
},
helloWorld: function() {
new Gitana({
"baseURL" : 'http://api.cloudcms.com:80',
"clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
"clientSecret" : "......"
}).authenticate({
"username" : "demo",
"password" : "demo"
}).then(function() {
var authInfo = this.getDriver().getAuthInfo();
var name = authInfo.getPrincipalName();
var welcomeElem = document.querySelector('#cloudcms-welcome');
console.log("Cloud CMS User: " + name);
welcomeElem.innerHTML = 'Hello ' + name + '! Welcome to Cloud CMS!';
});
}
};

5) Run the application using Android simulator and we should have a screen which looks like this.


Step 3: Hello World for iOS

Let's build a simple Hello World application (click here to download the full project).

1) Follow instructions in PhoneGap’s Getting Started with iOS Guide to setup a simple iOS application.

2) Create a cloudcms sub directory under the www directory and then place the Cloud CMS JavaScript driver under it.

3) Edit index.html (which is under wwwdirectory) and include the cloud CMS JavaScript driver.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no,
initial-scale=1,maximum-scale=1,
minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cloud CMS</title>
</head>
<body>
<h1 id="cloudcms-welcome"></h1>
<div class="app">
<h1>Apache Cordova™</h1>
<div id="deviceready">
<p class="status pending blink">Connecting to Device</p>
<p class="status complete blink hide">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="cloudcms/gitana.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>

4) Edit index.js (which is under jsdirectory) and add the code that connects the app to Cloud CMS. This example will first create an instance of Cloud CMS driver which makes connection to to your Cloud CMS platform using the provided credentials. Once the connection is made, it will then print out the name of the authenticated user.

var app = {
initialize: function() {
this.bind();
},
bind: function() {
document.addEventListener('deviceready', this.deviceready, false);
},
deviceready: function() {
app.report('deviceready');
app.helloWorld();
},
report: function(id) {
......
},
helloWorld: function() {
new Gitana({
"baseURL" : 'http://api.cloudcms.com:80',
"clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
"clientSecret" : "......"
}).authenticate({
"username" : "demo",
"password" : "demo"
}).then(function() {
var authInfo = this.getDriver().getAuthInfo();
var name = authInfo.getPrincipalName();
var welcomeElem = document.querySelector('#cloudcms-welcome');
console.log("Cloud CMS User: " + name);
welcomeElem.innerHTML = 'Hello ' + name + '! Welcome to Cloud CMS!';
});
}
};

5) Edit Cordova.plist (which is under Resources directory) and add a new entry for EnternalHosts field. Set the new entry value as api.cloudcms.com


6) Run the application using iPad simulator and we should have a screen which looks like this.


Related Resources