Mobile and Cloud enablement in Nigeria

nigerian-flag-waving
I just came back from a Mobile and Cloud enablement lectures that I conducted in Lagos, Nigeria 01-07 November 2015. The cloud event organization was good and there were about more than 25 attendees during the enablement sessions.

During these enablement sessions, I really enjoyed the passion of the attendees for creating their cloud apps powered by IBM Bluemix.
DevOps

I had the chance to show the attendees how IBM Bluemix can be a good fit for creating a plenty of applications on different runtimes (Java, NodeJS, Ruby, PHP and finally ASP.NET). I also had the chance to show the attendees the power of Bluemix DevOps to plan, develop, build, and deploy apps in the Cloud.
final

Deploying your existing StrongLoop application to IBM Bluemix

If you are not familiar with StrongLoop, you may need to check my previous post:
http://www.technicaladvices.com/2015/09/12/build-and-customize-your-first-api-with-strongloop-in-less-than-7-minutes/

Deploying StrongLoop applications in Bluemix is tricky and requires you to do some modifications to your application. This post discusses the steps required to deploy a StrongLoop application that uses MongoDB to IBM Bluemix.

1. Create your StrongLoop Application in Bluemix

Before deploying your local Strongloop application in IBM Bluemix, make sure to create a Bluemix “StrongLoop Arc” application from the Bluemix Boilerplates as shown below.
StrongLoop Arc App

Then create and bind a MongoDB Service to your created StrongLoop application in IBM Bluemix.
Bind MongoDB to Bluemix app

Then download the application starter code from "Start Coding" page, extract the zip file, and then get the manifest.yml file which is as follows in my case.

applications:
- path: .
  memory: 512M
  instances: 1
  domain: mybluemix.net
  name: iReport
  host: iReport
  disk_quota: 1024M
  services:
  - iReport-MongoDB

Copy the manifest.yml file to your local StrongLoop application’s directory.

2. Use VCAP_APP_HOST and VCAP_APP_PORT inside server.js file

In server.js file under the server directory, make sure to Use process.env.VCAP_APP_HOST and process.env.VCAP_APP_PORT as shown in the code below.

...
boot(app, __dirname, function(err) {
  if (err) throw err;
	
  //Use Bluemix host and port ...  
  var host = process.env.VCAP_APP_HOST || 'localhost';
  var port = process.env.VCAP_APP_PORT || 1337;
  
  app.set('host', host);
  app.set('port', port);  

  // start the server if `$ node server.js`
  if (require.main === module)
    app.start();
});

3. Use the “start” attribute in package.json

If you do not use the "start" attribute in your package.json file, you may face the following exception when pushing your application to IBM Bluemix.

[App/0]  ERR npm ERR! Linux 3.19.0-25-generic
[App/0]  ERR npm ERR! argv "/home/vcap/app/vendor/node/bin/node" "/home/vcap/app/vendor/node/bin/npm" "start"
[App/0]  ERR npm ERR! node v0.12.7
[App/0]  ERR npm ERR! npm  v2.11.3
[App/0]  ERR npm ERR! missing script: start
[App/0]  ERR npm ERR! 
[App/0]  ERR npm ERR! If you need help, you may report this error at:
[App/0]  ERR npm ERR!     <https://github.com/npm/npm/issues>
[App/0]  ERR npm ERR! Please include the following file with any support request:
[App/0]  ERR npm ERR!     /home/vcap/app/npm-debug.log
[DEA/14] ERR Instance (index 0) failed to start accepting connections

This is my package.json file which uses the "start" attribute as follows.

{
  "name": "iReport-Services",
  "version": "1.0.0",
  "scripts": {
    "pretest": "jshint .",
    "start": "node server/server.js"
  },
  "dependencies": {
    "compression": "^1.0.3",
    "cors": "^2.5.2",
    "loopback": "^2.22.0",
    "loopback-boot": "^2.6.5",
    "loopback-component-explorer": "^2.1.0",
    "loopback-connector-mongodb": "^1.13.0",
    "loopback-datasource-juggler": "^2.39.0",
    "serve-favicon": "^2.0.1"
  },
  "devDependencies": {
    "jshint": "^2.5.6"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "description": "iReport-Services"
}

4. Update datasources.json file under the application’s server directory

Under the server directory, there is a file called datasources.json which holds the application’s data source configurations, edit this file to point your application to the Bluemix MongoDB instead of your old MongoDB.

Below is my datasources.json file.

{
  ...
  ,
  "iReport-db": {
    "connector": "mongodb",
    "url": "mongodb://xxx"
  }
}

You can get the "url" attribute from the MongoDB Bluemix configuration as shown in the screenshot below.
Bluemix MongoDB

After doing the previous steps, you can finally, cf push [your local strongloop application] to IBM Bluemix,

These are all the steps you need to do in order to have your StrongLoop application up-and-running in Bluemix, Enjoy!

Back from JavaLand Germany 2015

JavaLand2015Main

I just get back from JavaLand that was be held from 24 March to 26 March @Brühl, Germany. The conference organization was more than fantastic and there were a lot of attendees in the conference sessions.

I had the chance to present “Developing Mobile Applications using JavaScript” in 25 March, the session had many attendees and I was really amazed by the energy, enthusiasm, and responsiveness of the attendees during the session.
screenshot

The session went great and I was glad to give a free copy of my JavaScript Mobile Application Development book to one of the attendees who answered a JavaScript quiz at the end of my session.
Books

I uploaded my session below:

In the conference, I really had the pleasure to work in the IBM Bluemix booth, it was really a very exciting experience for me.
IMG_8443

javaland5
IMG_8419

Finally, I would like to thank all the organizers of JavaLand conference for making the conference looks so great.
IMG_8429_2
IMG_8444
IMG_8372_2

JAX-RS + Cloudant in Bluemix as a service and Worklight App as a client

In the service side, I developed a very simple JAX-RS service which retrieve JSON documents of a Cloudant Database using ektrop over Bluemix.

Below is the JAX-RS service code:

package com.test.todos.service;

import java.util.ArrayList;
import java.util.List;

import javax.naming.InitialContext;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import org.ektorp.CouchDbConnector;
import org.ektorp.CouchDbInstance;

@Path("/todo")
public class TodoService {
    protected static CouchDbInstance _db;      
    
    static {
        try {
            _db = (CouchDbInstance) new InitialContext().lookup("couchdb/todos-cloudant");
        } catch (Exception e) {
            e.printStackTrace();
            
            //Handle error nicely here ...
        }
    }
    
    @GET
    @Produces(MediaType.APPLICATION_JSON)
    public List<Todo> getAllTodos() {
        List<Todo> todos = new ArrayList<>();

        try {            
            CouchDbConnector dbc = _db.createConnector("todos_db", false);

            List<String> ids = dbc.getAllDocIds();

            for (String id : ids) {
                Todo todo = dbc.get(Todo.class, id);

                todos.add(todo);
            }
        } catch (Exception e) {
            todos = new ArrayList<>();
            e.printStackTrace();
            //Handle error nicely here ...
        }

        return todos;
    }
    
    static class Todo {
        String _id;
        String _rev;
        String title;
        String description;
        
        public Todo() {
        }        
        
        public Todo(String id, String title, String description) {
            super();
            
            this._id = id;
            this.title = title;
            this.description = description;
        }
        
        public String get_id() {
            return _id;
        }

        public void set_id(String _id) {
            this._id = _id;
        }

        public String get_rev() {
            return _rev;
        }
        public void set_rev(String _rev) {
            this._rev = _rev;
        }

        public String getTitle() {
            return title;
        }
        public void setTitle(String title) {
            this.title = title;
        }
        
        public String getDescription() {
            return description;
        }
        public void setDescription(String description) {
            this.description = description;
        }
    }
}

As you notice here, the Cloudant DB connector resource name follows "couchdb/[service_name]" naming which is ("couchdb/todos-cloudant" in our case). Note that all of the Cloudant DB connector resources have the prefix "couchdb/". _db connector variable is used to access the Cloudant Database which is created in Bluemix as shown below.
Bluemix config

As you see we have a Liberty for Java app called ("todos") and a Cloudant Database service which is bound to it. Do not forget to make sure your Cloudant service name matches the last part of the Cloudant DB connector name after “/”.

In order to allow the service to be accessed using Ajax without facing cross domain boundaries issues from the Worklight mobile client, I created a simple Filter servlet that wraps the JSON response in a JSONP format as shown here:
https://github.com/hazems/bluemix-java-cloudant-worklight-sample/blob/master/todos/src/com/test/todos/filter/JSONPRequestFilter.java

Finally, in order to deploy our WAR file, just do the following:
1. Make sure to install Cloud Foundry CLI from https://github.com/cloudfoundry/cli.

2. After this, type the following cf login command as follows:

cmd> cf login

3. You will be introduced to the API endpoint prompt then enter "https://api.ng.bluemix.net" and your email and password as shown follows:

API endpoint> https://api.ng.bluemix.net

Email> [email protected]
Password> yourPassword

4. After this, you can go ahead and install our WAR as follows:

cmd> cf push <unique_app_name> -m 512M -p <path_to_your_war_file> 

which is in our case:

cmd> cf push todos -m 512M -p todos.war

5. Finally, you can access the working application using simply:

[APP_URL]/todo

In the Worklight project, a call to the TODO service is done using jQuery $.ajax as follows to get the list of TODOs as follows:

$.ajax({
	url: "http://hs-todos.mybluemix.net/todo",
	jsonp: "callback",
	dataType: "jsonp", 
	success: function(todos) {
	    //Display TODOs here ...
	},
	error: function(jqXHR, textStatus, errorThrown) {
	    console.log("An error occurs");            	
	}
});  

The final result of the WL project in iPhone is displayed as shown below:
iPhone screenshot

Finally, it worth mentioning that you can directly call Cloudant from your JavaScript client, Cloudant offers a powerful REST API over the database as indicated in the links below:
https://docs.cloudant.com/api/documents.html#crud-operations-on-documents
https://docs.cloudant.com/api/index.html

The mentioned example above introduces JAX-RS with Cloudant to show you how you can use them together with Bluemix and to give you the ability to decouple the REST client JavaScript code from the underlying Cloudant Database structure which will give you the ability to change Cloudant DB JSON structure in the future without affecting your REST API clients code.

I placed the working sample (JAX RS project and Worklight project) in GitHub for reference:
https://github.com/hazems/bluemix-java-cloudant-worklight-sample

Enjoy!