Cloud Connected



"I have been searching for a product like Cloud CMS for over 10 years.

After false starts with some typical content management solutions, we were finally able to design the content repository that our business required."
James Baddiley
James Baddiley, CEO
ChilliSauce

Powering Your PhoneGap Application with 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.

Step 1 : Sign up an account with Cloud CMS

To get your project started, you need to get a subscription to Cloud CMS which gives you your own platform, storage space and services for your projects and applications. To try out for free, you can either request a free trial or use Cloud CMS free sandbox account (demo/demo).

Since Cloud CMS supports OAuth2 for platform authorization, you will need both client credential and user credential for your application.

To locate your client credential, sign in your Cloud CMS console and browse to Clients page and then select a client for authentication. From client dashboard page, you will find its key/secret pair.

For user credential, you can either use its username/password pair or any authentication grant that you have setup for that user.

Step 2 : Download Cloud CMS JavaScript driver

Cloud CMS JavaScript driver handles all 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, you can visit its hosting site and download either its minified version or uncompressed version.

Step 3 : Build Cloud CMS powered PhoneGap applications

Android Application


Let us first build a simple Hello World application (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.



iOS

Let us first 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

Share this post

comments powered by Disqus