WIP

Requirements:

• a Bluemix.net account
• a Github account
• Git on localhost, install Git
• your favorite code editor, e.g. Sublime 3,

Overview:

1. Setup
2. Setup Details
3. Add Watson AlchemyAPI
4. Add Cloudant DB

Setup

1. Login to Bluemix, in a separate tab login to Github,
2. In Bluemix open Catalog->Boilerplates and create a ‘Node.js Cloudant DB Web Starter’ Boilerplate, named ‘<username>-nodejs-app1’, click CREATE
3. Go to ‘Overview’, scroll down to ‘Continuous delivery’ and click ‘Enable’
4. In the ‘Toolchain Settings’, change the name of the Toolchain to ‘<username>-nodejs-app1’, and click Create,
5. If the Github THINK or CODE icon displays a configuration error, from the block’s dropdown icon in the topright, click the ‘Configure’ link to correct the configuration of your Github account,
6. Go to your Github account and make sure that the repository for the new Bluemix app is created successfully,
7. Copy the Git URL, on localhost open a commandline terminal, change to your development directory and clone the new repository,
   cd ~/dev/src/bluemix
git clone https://github.com/remkohdev/remkohdev-nodejs-app1.git
cd remkohdev-nodejs-app1
8. Open the project directory in your favorite editor,
9. Open the ‘package.json’ file and change the ‘name’ property to ‘<username>-nodejs-app1’,
10. From the commandline, in your project directory,
    git status
git add .
commit -m "change package.json name property"

1. Before pushing the staged changes to the remote master directory, first go back to the Toolchain of your application, and click the ‘DELIVER’ window or ‘Delivery pipeline’,
2. Now from the commandline push changes to the remote repository, this should trigger the ‘Build Stage’ automically, as it is by default configured to trigger after code changes are detected in the source code repository, i.e. on Github,
3. You should see that your Github repository is updated, and almost instantly see the Build Stage being triggered, upon successful build, the Deploy Stage’ is triggered,
4. If there is an issue, you have several options to see the logs:
   1. In the Build or Deploy stage, click the ‘View logs and history’,
   2. In the Application details page, go to ‘Logs’,
   3. Go to ‘Getting Started’, and follow the instructions to install the CloudFoundry commandline ‘cf’, and from the commandline, go to your project directory:
      cd ~/dev/src/bluemix/remkohdev-nodejs-app1
cf login
cf logs remkohdev-nodejs-app1 --recent
   4. Go to the Toolchains Overview page, open the ‘Eclipse Orion Web IDE’, and click the ‘Open the Logs’ icon from the top menu,
5. You now have a very simple but quick cloud application running. Open the URL of your application http://<username>-nodejs-app1.mybluemix.net.
   

Setup Details

Bluemix Architecture

Bluemix is the product name for the IaaS, PaaS and SaaS layers of IBM cloud. The IaaS of Bluemix is built on SoftLayer physical infrastructure and OpenStack. The PaaS of Bluemix is built with CloudFoundry, which supports Docker containers. The SaaS of Bluemix offers among other the IBM Watson APIs and direct integration with IBM Watson IoT platform and the IBM MobileFirst Platform.

CloundFoundry CommandLine Interface (CLI)

Documentation of the CF CLI can be viewed here.

Above I already used the CF cli to view a more detailed logs history of your application. There is also a Bluemix cli, which is an extension of the CF cli. Almost everything you do in Bluemix via the web UI, you can also do using the Bluemix or CF cli tool.

Just a small selection of CF cli commands:

cf api

Change the endpoint to change regions.

cf apps

List all apps in your current space.

cf bind-service

Bind a service to your application.

cf create-service

Create a service instance.

cf login

Login to your Bluemix environment.

cf marketplace

List all services from the Bluemix marketplace.

For a complete overview, see the CF cli documentation.

In addition, to the default Bluemix or CF cli commands, you can add cli plugins to your cli environment, for instance the ‘IBM-Containers‘ plugin to use native Docker cli commands.

Toolchain

Step through the Toolchain.
IBM Toolchain

Eclipse Orion Web IDE

Step through the Web IDE.
IBM Eclipse Orion Web IDE

Add Watson AlchemyAPI

Let’s change the default application by adding a news search form to the home page, a Watson AlchemyAPI NewsData API and a news results page.

1. Go to the application detail page, click on the ‘Connections’ link,
2. By default, 1 connections or services is added already, the Cloudant DB connection. Click the ‘Connect New’ button to add a new service,
3. Filter by ‘Watson’, select the AlchemyAPI, click Create, and Restage the application,
4. You can view the connection credentials in the Connections page and by clicking the ‘View Credentials’ button on the service icon, or go to Runtime->’Environment Variables’ and browse the ‘VCAP_SERVICES’ environment variable. This ‘VCAP_SERVICES’ variable is available to your application by loading the system environment variables. In Node.js,
   if (process.env.VCAP_SERVICES) {
var vcapServices = JSON.parse(process.env.VCAP_SERVICES);

Create a News Search and Route

1. Go to the ‘Eclipse Orion Web IDE’ and open the file ‘~/views/index.html’,
2. Replace the current code in the ‘~/views/index.html’ with the following code,
   
3. Press the ‘Deploy the App from the Workspace’ button, when the app is ready deploying, check the new home page,
4. Open the file ‘~/app.js’ and add the following route,
   

Implement the News Search

There are several ways to add an http request:

• Nodejs includes an http server and client,
• JQuery AJAX.get() shorthand,
• NPM package XMLHttpRequest,
• NPM package Request,

Add one of the following examples to the file ‘~/app.js’.

Nodejs https.request Example

The https class and the https.request method is the SSL variation of the HTTP class and the http.request method.

AJAX.Get Example

TBD

XMLHttpRequest Example

Request Example

TBD

Push Changes to Github

Though you worked ‘inside’ Bluemix, the Web IDE is also still an online client. Making changes on the Web IDE, still requires us to add, commit and push changes to the ‘remote’ repository on Github.

1. In the Web IDE, click on the Git icon in the left sidebar,
2. Add a commit message in the right pane, and click ‘Commit’,
3. The changes are added and committed to the Outgoing changes in the left,
4. To finalize the staged changes, click the Push button,
5. Click the back arrow to go back the to Toolchain overview, and go to the Delivery Pipeline,
6. Make sure the Build and Deploy stages pass successfully.

Alchemy API Details

Step through the details of the Alchemy API

Add Cloudant DB

1. Go to the Connections page of the application, and click the ‘Cloudant NoSQL DB’ pane,
2. In the Service Detail page, click the LAUNCH button,
3. In the Cloudant admin page, click the Databases link,
4. Click the ‘Create Database’ button in the top bar, enter ‘newssearch_results’ and click the ‘Create’ button,
5. Go to the Web IDE and open the file ‘app.js’, change the database name in the dbCredentials configuration\ to the new database you just created,
   var dbCredentials = {
//dbName: 'my_sample_db'
dbName: 'newssearch_results'
};

Save Search Results

The StarterApplication already by default included implementations of calls to the ‘cloudant‘ package.

1. Look for the definition of the ‘saveDocument’ function,
   var saveDocument = function(id, name, value, response) {
2. To save a news search result document to the ‘newssearch_results’ database, we must call the saveDocument function as follows,
   var newssearch_name = startdate+"_"+enddate+"_"+searchterm+"_"+count;
saveDocument(null, newssearch_name, resp, response);
3. Add the ‘saveDocument’ call to the newssearch method,
   
4. Try out the news search and verify that the news search results were saved to the new database in Cloudant DB.