Small ACE steps - let's start with Bluemix and Cloudant

Just incase you've been living in a cave for the past year, I'll let you read about Bluemix HERE.

So, now that you've not bothered to follow that link, I'll give you a cut&paste snippet here:

What is IBM Bluemix?

IBM's Open Cloud Architecture implementation based on the Cloud Foundry project
IBM Bluemix™ is the newest cloud offering from IBM. Bluemix is a platform as a service (PaaS) offering based on the Cloud Foundry open source project that promises to deliver enterprise-level features and services that are easy to integrate into cloud applications.


That all sounds lovely, but, as a geek who doesn't read instructions...."what does it all mean?".

I was going to build a new Mobile Application for managing Conferences & Events, so, whilst I was on a long train journey into London, I was using MySQL Workbench (only because I had just finished installing Worklight Server using it) and I made about 10 tables and it felt a little odd.  Why? Well, I've been using MongoDB for the past year and it just felt odd doing traditional SQL database tables and queries.
I then decided to investigate using Bluemix and Cloudant (what with Cloudant being a non-SQL database).  Basically, Bluemix gives me the ability to have the environment setup very quickly and hosted live on the internet readily accessible to my variety of mobile devices.
Oh and did I mention that it genuinely only took about 15 minutes to get this working from start to finish.  Now, that's proper PoC timelines.  The foundations have been laid, so I can easily start building upwards afterwards.

So, what did I do?
Well, I had to remember my login details first.  It has a free 30 day trial, I'd exceeded mine.  You can still carry on though, just put credit-card details in and keep an eye on what you're selecting and you can keep it under the "free" radar whilst developing.
I then followed the link to download the "cf" (command line tool).
I already had node.js installed (due to an earlier article on this blog).

I selected 'Catalog' inside Bluemix and selected the 'Node JS Web Starter' boilderplate:

Now, interestingly I followed the instructions to set this up... and then I promptly replaced 99% of it.

As you can see I modified the contents to include jquery.js and bootstrap.js.  Modifying the package.json to include the driver to connect to Cloudant:

From the command line, execute
>npm install

This will then go fetch "express / jade and nano", you can see this under the "node_modules" folder above.

As with node.js apps there is a server-side app.js file and within this it contains what is going to be running and listening on the server on a certain port.  This is the code that is going to be running and executing within Bluemix.

The express REST API is going to be listening for a call to '/myAgenda', when it is called it will connect to the Cloudant database and execute the 'ace_index' function in the 'ace' table.
Oh, you did set up Cloudant didn't you?.....here's some screenshots of doing that.
You may recall earlier that in Bluemix you can click  on the Cloudant NoSQL DB Service to see the connectivity details, you need to cut&paste the "url" into the "app.js" file above.

To actually manage the Cloudant database, press the [Launch] button:

I manually added the "ace" database and added a few Documents, using the "eventName", "speaker" and "title" to contain the data we want to extract:
I also created a secondary index so that we can call this from the JavaScript code and this is the expected JSON that is returned.
You can test the data that is going to be returned by opening a web browser and navigating to: http://firsttestcloudant.mybluemix.net/myAgenda and it should return the following:


The client-side code that is going to execute in the browser is contained in the files "mainpage.jade" and "mainpage.js":

As you can see in the JavaScript file we use jQuery to append the results to the table.  We call the "/myAgenda" function within the app.js file on the server, that calls the Cloudant database and returns the data to this function, we then output the values to a table.
You can build all of this "offline" and test it on your own machine (in my case on my MacBookPro).

You can then use the "cf" tool to upload it to Bluemix and test it from there.  Before you do this though, you will need to create a "manifest.yml" file that will contain the information that is needed by the "cf":


The commands are available in Bluemix by pressing the [View Guide] button, I'll just list them in action here:



Then when you enter the URL to access your app, you are executing the app.js that then executes the mainpage.jade that gets rendered as HTML in the web browser, like so:

yes, it's very basic, but, if you think about what we actually did, how much effort it took and what we actually had to do to get this far, it's pretty impressive....

....hmmmm...funny enough, it took much longer to screenshot and explain this lot than it did to actually make this.

What it has proven though is that the foundations have been laid, my first task is to rip out jQuery and replace it with AngularJS (just because).  I can then start to extend the Cloudant database and start fleshing out my UI to meet what I'm attempting to achieve.  I also want to add socket.io into the mix too for online chat....

No comments:

Post a Comment