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

Cloud CMS - The Content Platform for Your Sencha Touch Applications

If you are a Sencha developer and need a CMS for your project, Cloud CMS can be an ideal cloud based content platform that you are looking for.

This blog provides details about how you can easily plug Cloud CMS into your new or existing Sencha Touch applications.

To build a Sencha Touch application that uses Cloud CMS as its content platform, all you need to do is to take a few simple steps:

Step 1 : Sign up with Cloud CMS

Cloud CMS offers a free sandbox account that you can use to play around with Cloud CMS at no cost. For the purposes of this guide, we’ll use this free sandbox account to connect and work with the APIs.

On the other hand, for your own private projects, you’ll want to first sign up with Cloud CMS for a free trial or a subscription account. If you have already signed up, then you can just substitute your own account details in the appropriate places.

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 HTTP/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 : Setup web server proxy

If we want to run our Cloud CMS powered Sancha Touch app as a pure HTML5/JavaScript application, we will need to place it under a web server such as Apache web server.

Due to the cross domain limitation of ajax calls, we will need to setup a reverse proxy that forwards HTTP/HTTPS request “/proxy/*” to “http://api.cloudcms.com:80/*”.

Here is a sample Apache configuration file (replace server name, server alias and other
directories with your own settings).

<VirtualHost *:80>

ServerName YOUR.SERVER.NAME
ServerAlias YOUR.SERVER.ALIAS

DocumentRoot YOUR_DOCUMENT_ROOT_DIRECTORY
ErrorLog YOUR_ERROR_LOG_DIRECTORY
CustomLog YOUR_CUSTOM_LOG_DIRECTORY common

RewriteEngine On
RewriteRule .* - [E=host:%{HTTP_HOST}]

ProxyRequests Off

ProxyPassInterpolateEnv On
ProxyPass /proxy http://api.cloudcms.com interpolate
ProxyPassReverse /proxy http://api.cloudcms.com interpolate
ProxyPassReverseCookieDomain api.cloudcms.com ${host} interpolate

<Directory />
Options -Indexes
AllowOverride All
</Directory>

</VirtualHost>

Place the above custom configuration file in your Apache conf directory and restart the
Apache server.

Step 4 : Build Cloud CMS powered Sencha Touch applications

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

1) If you haven’t already installed Sencha Touch, we recommend you visit Sencha’s web site to download their framework and check out their documentation.

2) Follow instructions in Sencha Touch’s Getting Started Guide to setup a simple “Getting Started” application.

3) Create a cloudcms sub directory under the project root directory and then place the Cloud CMS JavaScript driver under it.



4) Edit app.json (which is under root directory) and add the Cloud CMS JavaScript Driver to the list of JavaScript assets.

    .....
   
    "js": [
        {
            "path": "sdk/sencha-touch.js"
        },
        {
            "path": "app.js",
            "bundle": true, 
            "update": "delta"
        },
        {
            "path": "cloudcms/gitana.js"
        }
    ],
   
    ....



5) Edit Main.js ( which is under app/view directory). Register a custom listener and add the code for connecting to Cloud CMS using the provided credentials. Once the connection is made, it will then print out a Hello World message with the name of the authenticated user.

Ext.define("GS.view.Main", {
    ......
    config: {

        listeners: {
            activate: 'onActivate'
        },

        ......
    },

    onActivate: function(me, container) {
        new Gitana({
            "clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
            "clientSecret" : "......"
        }).authenticate({
            "username" : "demo",
            "password" : "demo"
        }).then(function() {
            var authInfo = this.getDriver().getAuthInfo();
            var name = authInfo.getPrincipalName();
            me.innerItems[0].setHtml('Hello ' + name + '! Welcome to Cloud CMS!');
        });
    }
});




6) Open the application with your browser (Safari or Chrome) and we should have a screen which looks like this.



All source code of the examples can be downloaded from

GitHub Project for Cloud CMS Sencha Examples

To learn more about using Cloud CMS JavaScript driver, you can also check out our documentation site and hosted online samples.

Cloud CMS + jQuery Mobile in Five Minutes

Cloud CMS is an ideal cloud based content platform for jQuery Mobile framework. This blog provides details about how jQuery Mobile developers can easily plug Cloud CMS into their new or existing jQuery Mobile applications.

If you haven’t already installed jQuery Mobile, we recommend you visit jQuery framework’s web site to download their framework and check out their documentation.

To build a jQuery Mobile application that uses Cloud CMS as its content platform, all you need to do is to take a few simple steps:

Step 1 : Sign up with Cloud CMS

Cloud CMS offers a free sandbox account that you can use to play around with Cloud CMS at no cost. For the purposes of this guide, we’ll use this free sandbox account to connect and work with the APIs.

On the other hand, for your own private projects, you’ll want to first sign up with Cloud CMS for a free trial or a subscription account. If you have already signed up, then you can just substitute your own account details in the appropriate places.

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 HTTP/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 : Setup web server proxy

If we want to run our Cloud CMS powered jQuery Mobile app as a pure HTML5/JavaScript application, we will need to place it under a web server such as Apache web server.

Due to the cross domain limitation of ajax calls, we will need to setup a reverse proxy that forwards HTTP/HTTPS request “/proxy/*” to “http://api.cloudcms.com:80/*”.

Here is a sample Apache configuration file (replace server name, server alias and other
directories with your own settings).

<VirtualHost *:80>

    ServerName YOUR.SERVER.NAME
    ServerAlias YOUR.SERVER.ALIAS

    DocumentRoot YOUR_DOCUMENT_ROOT_DIRECTORY
    ErrorLog YOUR_ERROR_LOG_DIRECTORY
    CustomLog YOUR_CUSTOM_LOG_DIRECTORY common

    RewriteEngine On
    RewriteRule .* - [E=host:%{HTTP_HOST}]

    ProxyRequests Off

    ProxyPassInterpolateEnv On
    ProxyPass /proxy http://api.cloudcms.com interpolate
    ProxyPassReverse /proxy http://api.cloudcms.com interpolate
    ProxyPassReverseCookieDomain api.cloudcms.com ${host} interpolate

<Directory />
    Options -Indexes
    AllowOverride All
</Directory>

</VirtualHost>



Place the above custom configuration file in your Apache conf directory and restart the
Apache server.

Step 4 : Build Cloud CMS powered jQuery Mobile applications

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

1) Create a simple HTML5/JavaScript project with the Cloud CMS JavaScript driver and all required jQuery Mobile library files.



2) Create a HelloWorld.js file. It will first create an instance of Cloud CMS driver that 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.

$(document).bind('pageinit', function() {
  new Gitana({
    "clientId" : "676e3450-6131-46c2-99cc-496aa2ad80fa",
    "clientSecret" : "......"
  }).authenticate({
    "username" : "demo",
    "password" : "demo"
  }).then(function() {
    var authInfo = this.getDriver().getAuthInfo();
    var name = authInfo.getPrincipalName();
    $('.content-primary h1').html('Hello '+name+'! Welcome to Cloud CMS!');
  });
});

3) Create a hello-world.html file with links to the Cloud CMS JavaScript driver, jQuery Mobile library and the HelloWorld.js file.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Hello world example that shows
how to connect to Cloud CMS using Cloud CMS JavaScript driver and
jQuery Mobile framework.">
  <title>Cloud CMS - jQuery UI Mobile Framework - Hello World</title>
  <link rel="stylesheet"
href="../css/themes/default/jquery.mobile-1.1.1.css"/>
  <link rel="stylesheet"  href="../css/cloudcms.css" />
  <script src="../lib/thirdparty/jquery/jquery.js"></script>
  <script src="../lib/thirdparty/jquery/jquery.mobile-1.1.1.js">
</script>
  <script src="../lib/cloudcms/js/gitana.js"></script>
  <script src="../js/basic/HelloWorld.js"></script>
</head>
<body>
<div data-role="page" class="type-index">
  <div data-role="header" data-theme="a">
    <h1>Cloud CMS jQuery Mobile Examples - Hello World</h1>
    <a href="../index.html" data-icon="home" data-iconpos="notext"
        data-direction="reverse">Home</a>
  </div>
  <div data-role="content">
    <div class="content-primary">
      <h1></h1>
    </div>
  </div>
  <div data-role="footer" class="footer-examples" data-theme="c">
    <p>Copyright &copy; 2012 Gitana Software | All Rights Reserved</p>
  </div>
</div>
</body>
</html>

4) Open the hello-world.html with your browser and we should have a screen which looks like this.


You can find more advanced examples from here. All source code of the examples can be downloaded from

GitHub Project for Cloud CMS jQuery Mobile Examples

To learn more about using Cloud CMS JavaScript driver, you can also check out our documentation site and hosted online samples.

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