WaveMaker, acquired by VMware in March 2011, is a free, open source rapid application development environment for building, maintaining and modernizing business-critical Web 2.0 applications.

PubNub, a privately held company, is a fast real-time Infrastructure-as-a-Service for building real-time web and mobile apps.

Cloud Foundry is an open Platform-as-a-Service, providing a choice of clouds, developer frameworks and application services. Initiated by VMware, with broad industry support, Cloud Foundry makes it faster and easier to build, test, deploy and scale applications. It is an open source project and is available through a variety of private cloud distributions and public cloud instances, including CloudFoundry.com.

Introduction
I've been using WaveMaker since I started working at the startup in 2008 and it has been a great IDE for quickly creating robust enterprise AJAX Web applications integrating SQL databases, and SOAP/REST Web Services. Along came Cloud Foundry and deploying those applications on a scalable platform became just as quick and easy as WaveMaker made it to build them. Add PubNub to the equation and you get the power of real time messaging in an instant. No complicated servers to configure and no expertise required to start using the service - just a few lines of code to start sending and receiving messages.

In this tutorial I will walk you through how to build and deploy a basic chat room application in under 15 minutes using PubNub, WaveMaker, and Cloud Foundry. You can deploy to whatever application server platform you like, however, in this tutorial, we are going full-cloud so there will be no installation required. WaveMaker Studio runs in Cloud Foundry, PubNub's messaging service is cloud-hosted, and we'll be deploying to Cloud Foundry, so no need to install an app server either.

Here is what you will need:

A Free Cloud Foundry account: https://my.cloudfoundry.com/signup
At the link above, you can request a new Cloud Foundry account and confirmation email is sent. Remember your account login because you will need it when you deploy your app to Cloud Foundry from WaveMaker.

WaveMaker 6.5 Installed: http://wavemaker.com/downloads/
The latest version of WaveMaker installer is available at the the above link.

A Free PubNub account: http://www.pubnub.com/
Note: you actually don't need this because we will just be using the demo keys, but you will want one by the time you finish this tutorial.

Let's get started - hit the start button on your stopwatch...

Project Setup
1. Create a new project in WaveMaker named quickchat

2. In a text editor, open the index.html file of your project
(look in <wavemaker_install_dir>/projects/quickchat/webapproot)
and add the following div and script elements immediately following the the script tag containing "project.a.js" (if you use your own keys, just replace demo with your "pub" and "sub" keys provided to you):
<div pub-key="demo" sub-key="demo" ssl="off" origin="pubsub.pubnub.com" id="pubnub"></div>
<script src="http://pubnub.s3.amazonaws.com/pubnub-3.3.min.js"></script>

3. Save the file and close.

Create the User Interface
Back in WaveMaker, add UI widgets (DnD from the palette to the canvas) to your Main page and configure as follows (expand the "Editors" node on the palette):

1. Text Area
name: taChat
caption: Chat Messages
readonly: checked

2. Text
name: tfMessage
caption: Message

3. Button (top of the palette)
name: btSend
caption: Send

Feel free to make this UI as pretty as you like, but hit the pause button on your stop watch - this is not part of the "get 'er done in under 15 minutes" promise I made. The focus is on a basic chat app - nothing fancy.

Add a Dash of PubNub
Now it's time to write a little code - and I mean a little.

1. Select the btSend button
2. Open the "Events" section of the property panel
3. To send (publish) messages to a channel, we need to add the PUBNUB.publish method in the btSelect button's onclick event. Select "JavaScript Event" for the "onclick" event:

... this will open the page's source editor with the cursor ready to add some code in the btSendClick event. Now add the following code:

PUBNUB.publish({
channel: "quickchat",
message: main.tfMessage.getDataValue()
});

4. To receive messages (yours and other subscribers), we need to subscribe to messages on the channel those message are being published to. Just above that click event you just added code to, there is a "start" function. Add the following code in there:

PUBNUB.subscribe({
channel: "quickchat",
callback: function(message) {
var data = main.taChat.getDataValue();
main.taChat.setDataValue(
message + (data ? "<br>" +data : ""));
}
});

Quick Test Run
Before deploying to Cloud Foundry, let's do a quick test run locally to see if all in in working order. As long as you can hit www.PubNub.com from your system, then it should work. From WaveMaker:

1. Click the Run (or Test) button - if no errors, the app will be loaded in another browser window or tab.
2. Once launched, enter some text in the Message text field and click the Send button - you should see the message quickly appear in the Chat Messages text area.
3. Send a few more messages - the new messages should be inserted at the top of the Chat Messages text area.
4. Open another browser window (preferably another brand of browser to demonstrate separate/unique client access to the app) and copy/paste the URL from your first test run window to the new browser window and launch a second instance of the app. Now send some new messages from there - you should see the messages appear in both browser windows relatively at the same time.

Note: Now remember that you are sending (publishing) messages to the PubNub server (somewhere in the cloud) using your PubNub account on the "quickchat" channel and those messages are being sent to all subscribers on that channel in your account (back to the the two browsers you have open on your system).

Deploy to Cloud Foundry
If the test run went well, then it is time to deploy the app to Cloud Foundry.

1. Select WaveMaker menu option: File > Deploy Project > New Deployment
2. The Deployment Type dialog is displayed: select the Cloud Foundry option and click OK
3. The Cloud Foundry Account Info dialog is displayed: enter your CF username and password and click OK.
4. The Settings form is displayed: change the Application Name to something that will be unique across all of the Cloud Foundry (quickchat is already taken by me). Try using your initials as a prefix to the app name: cvcquickchat, for example. Or use the Generate URL button to create a random URL that should be unique.

5. Click the Deploy Now button and wait for it to finish.
NOTE: This will take a few minutes, especially the first time you deploy because it has to generate the WAR file with all the jar files (minimal size around 25 MB) and then upload, stage and start the app in your Cloud Foundry account. Fortunately, many of the jar files in your app already exist in Cloud Foundry which maintains a repository of all these resources (from all apps in all CF accounts) so the entire app doesn't have be uploaded with every deployment.

6. When WaveMaker finishes deploying to Cloud Foundry, it will display a dialog with the URL to your app. Click it and test it as before, but this time, invite someone else from somewhere else (or a few others if you like) to join your chat room. They will probably tell you it is the biggest POS chat room they've ever seen, but just tell them it took you less than 15 minutes to create it - then send them a message with your POS chat room app telling them how you really feel about their feedback ;)

Summary
Who would have thought that creating a scalable, real time messaging Web app could be that simple.

• Web Apps made easy - by WaveMaker
• Real-Time Messaging made easy - by PubNub
• Deployment made easy - by Cloud Foundry

Stay tuned to here for new installments of this series where I will provide details on how to make this chat room app more robust with a cleaner, more robust UI, using more features of the PubNub messaging service and the WaveMaker Studio as well as developing your WaveMaker apps directly in Cloud Foundry (WaveMaker Studio hosted in Cloud Foundry).