IBM has open contract positions for Bluemix

IBM has open contract positions for Bluemix in all of ASEAN (SG, MY, TH, ID, PH) for fresh graduates.

IBM Bluemix

IBM Bluemix

Candidate should fit 2-3 of the minimum requirements:
1. Minimum of 2 years in Web Application Development using NodeJS, Java or Go
2. Minimum of 2 years in Android or iOS application development
3. Familiar with Web stack – HTML, CSS and JavaScript.
4. Familiar with MongoDB or other NoSQL (Document-based)
5. Familiar with Relational Database
6. Familiar with Web Services (REST or SOAP) and OOP concept
7. Familiar with cloud environment (IaaS or PaaS)
Bonus points for:
1. Experience or knowledge in data analytics – especially social media analytics
2. Experience in web development framework – Angular JS, jQuery, Bootstrap
3. Skill in other programming language (Ruby, Python, Scala, C#, etc)
4. Conceptual knowledge in MVC or microservices
5. Past experience in using PaaS
6. Experience in IoT related development (Raspberry Pi, Arduino, etc)
7. Degree in Computer Science / Computer Engineer / AI
8. Experience in DevOps – i.e. Continuous Integration, Continuous Deployment is a plus
9. Experience or knowledge in Docker container technology.

To those interested, can send your resume to st.wissel@sg.ibm.com.

Building HTML5 Games with ImpactJS – Part 1

In this tutorial you will develop simple html5 game using impactjs library. You will learning:

  • Setup Development Environment
  • Build a complete game with core logic, collision detection, and player and enemy behavior
  • Display and animate game artwork with sprite sheets
  • Add sound effects, background music and text
  • Create screens to display stats and in-game status
  • Prepare to publish by compile your game files into single file

Overview

Impact is a JavaScript game framework created by Dominic Szablewski. Impact takes advantage of the modern browser’s Canvas element in order to create high-performance 2D games on the Web and even mobile. One of the biggest advantages of using Impact is that it is easy to pick up, comes with very good code examples, has an active community, and has a very robust level editor called Weltmeister. The only barrier of entry is the licensing fee for the software, since it is not open source. After purchasing a license, you do get the full source code, the Weltmeister level editor, and free current major version updates (1.x). While there are other open source and free JavaScript game frameworks out there, Impact has an extra level of polish I haven’t seen with anything else so far. http://impactjs.com/

impactjs

impactjs

What do you need for this tutorial

Setting Up a New Impact Project

Before we can start this tutorial, you need to make sure you already purchased Impactjs library from link above and install all the software that I mention it before. To get started, copy the Impact project into your localhost. You should see the following files

Impact project files

Impact project files

You can rename impact folder to you own game project name. Mine is myNewGame. Here is a quick breakdown of everything in the folder:

  • index.html – This is the main .html file that runs your game.
  • lib – This is the core code for Impact and where you will store your own game-specific JS files. This also contains the source code for Weltmeister.
  • media – This is the assets directory, and where all game art and sound files will go.
  • tools – This directory contains .php scripts to minify your game’s JS files and make it harder for people to have access to the game’s source code. This is part of the license and is important so you don’t accidentally distribute the source code.
  • weltmeister.html – This is the level editor’s .html file.

Open your chrome and navigate to http://localhost:8888/myGame/index.html.

It Works!

It Works!

What is canvas? On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic objects. The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics. An HTML canvas is a rectangular area on an HTML page. Canvas has several methods for drawing paths, boxes, circles, text, and graphic images. http://www.w3schools.com/html/html5_canvas.asp

Modules

You can refer here for more details, http://impactjs.com/documentation/class-reference/ig-core.

Core Classes

Impact is made up of several core classes that revolve around the game framework and all the necessary systems such as rendering, maps, sounds, and more. All the classes are in the ig namespace, which is set up by the core class. http://impactjs.com/documentation/class-reference/ig-core

Level Editor

One of the best features of Impact is its level editor called Weltmeister. It is located in the libs/weltmeister folder inside the Impact project.

Weltmeister

Weltmeister

Next tutorial we will discuss about sprites and how to design the artwork for our HTML5 game. Stay tune.

Tutorial: How To Write a PhoneGap plugin for Android

In this tutorial you will write a custom phonegap plugin for your cordova project.

  • Declaring the plug-in.
  • Implementing the phonegap plugin by using Java code.
  • Calling the phonegap plugin from JavaScript.

Overview

  • With Apache Cordova, developers can create an Apache Cordova plugin, which means that they create custom native code blocks, and call these code blocks in their applications by using JavaScript.
  • In this tutorial, you learn how to create a simple Android Apache Cordova plugin and how to use it in your code.
  • Unlike with Cordova-based applications where a developer is required to check for the deviceready event before using the Cordova API set, in a cordova application this check is done internally.

Creating and using an Android Apache Cordova plugin consists of three steps:

  • Declare your plug-in in the plugin.xml file.
  • Create a plug-in class, which will run natively in Android.
  • Use the cordova.exec() API method in the JavaScript code.

The plugin performs the required action, and calls a JavaScript callback method that is specified during the cordova.exec() invocation.

cordova exec

cordova exec

Declaring your plugin

Create a new folder call HelloWorld. Then create a few of folders and files similar to image below.

cordova plugin structure

cordova plugin structure

You must first declare the new plugin in the project, so that Cordova knows about it. The creation process of the plugin is covered in the following slides.

  • Add your plug-in definition to the plugin.xml file, which is located in the www folder in the HelloWorld folder.
  • Add your custom plugin.
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
            id="com.revivalx.HelloWorldPlugin" version="0.0.1">
        <name>Hello World Plugin</name>
        <description>Cordova Hello World Plugin</description>
        <license>Apache 2.0</license>
        <keywords>cordova</keywords>
        <js-module src="www/HelloWorld.js" name="HelloWorld">
            <clobbers target="HelloWorld" />
        </js-module>
        <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="HelloWorldPlugin" >
                <param name="android-package" value="com.revivalx.HelloWorldPlugin"/>
            </feature>
        </config-file>
        <source-file src="src/android/HelloWorldPlugin.java" target-dir="src/com/revivalx/HelloWorldPlugin" />
    </platform>
    </plugin>

Open HelloWorldPlugin.java, extend the org.apache.cordova.CordovaPlugin class, add required imports and implement an execute method.

package com.revivalx.HelloWorldPlugin;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class HelloWorldPlugin extends CordovaPlugin {

	@Override
	public boolean execute(String action, JSONArray args, final CallbackContext callbackContext)
			throws JSONException {
		if (action.equals("sayHello")){
			try {
				final String responseText = "Hello " + args.getString(0);
				cordova.getThreadPool().execute(new Runnable() {
					public void run() {
						callbackContext.success(responseText); // Thread-safe.
					}
				});
			} catch (JSONException e){
				callbackContext.error("Failed to parse parameters");
			}
			return true;
	    }
		return false;
	}
}

Now you are ready to call the plug-in from JavaScript

function greetMe(){
	var name = "Hi!!";
	cordova.exec(sayHelloSuccess, sayHelloFailure, "HelloWorldPlugin", "sayHello", [name]);
}

function sayHelloSuccess(data){
	alert("OK: " + data);
}

function sayHelloFailure(data){
	alert("FAIL: " + data);
}

greetMe();

Go back to the command line and within your project root folder, run the following command:

cordova plugin add <your_local_phonegap_plugin_repository>
cordova run android

Reference: IBM Worklight

Learning Three.js and WebGL part 1

In this tutorial you will learn how to create 3d animation using WebGL and Three.js framework.

Overview

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group. http://en.wikipedia.org/wiki/WebGL

WebGL

WebGL

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL. http://en.wikipedia.org/wiki/Three.js

<html>

<head>
<title>WebGL Up And Running &mdash; Example 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">

    function initWebGL(canvas) {

        var gl;
        try 
        {
            gl = canvas.getContext("experimental-webgl");
        } 
        catch (e)
        {
            var msg = "Error creating WebGL Context!: " + e.toString();
            alert(msg);
            throw Error(msg);
        }

        return gl;        
     }

    function initViewport(gl, canvas)
    {
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

    var projectionMatrix, modelViewMatrix;

    function initMatrices()
    {
	   // The transform matrix for the square - translate back in Z for the camera
	   modelViewMatrix = new Float32Array(
	           [1, 0, 0, 0,
	            0, 1, 0, 0, 
	            0, 0, 1, 0, 
	            0, 0, -3.333, 1]);
       
	   // The projection matrix (for a 45 degree field of view)
	   projectionMatrix = new Float32Array(
	           [2.41421, 0, 0, 0,
	            0, 2.41421, 0, 0,
	            0, 0, -1.002002, -1, 
	            0, 0, -0.2002002, 0]);
	
    }

    // Create the vertex data for a square to be drawn
    function createSquare(gl) {
        var vertexBuffer;
    	vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        var verts = [
             .5,  .5,  0.0,
            -.5,  .5,  0.0,
             .5, -.5,  0.0,
            -.5, -.5,  0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
        var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
        return square;
    }

    function createShader(gl, str, type) {
        var shader;
        if (type == "fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (type == "vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }

        gl.shaderSource(shader, str);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }

        return shader;
    }
    
	var vertexShaderSource =
		
		"    attribute vec3 vertexPos;\n" +
		"    uniform mat4 modelViewMatrix;\n" +
		"    uniform mat4 projectionMatrix;\n" +
		"    void main(void) {\n" +
		"		// Return the transformed and projected vertex value\n" +
		"        gl_Position = projectionMatrix * modelViewMatrix * \n" +
		"            vec4(vertexPos, 1.0);\n" +
		"    }\n";

	var fragmentShaderSource = 
		"    void main(void) {\n" +
		"    // Return the pixel color: always output white\n" +
        "    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
    	"}\n";


    var shaderProgram, shaderVertexPositionAttribute, shaderProjectionMatrixUniform, shaderModelViewMatrixUniform;

    function initShader(gl) {

    	// load and compile the fragment and vertex shader
        //var fragmentShader = getShader(gl, "fragmentShader");
        //var vertexShader = getShader(gl, "vertexShader");
        var fragmentShader = createShader(gl, fragmentShaderSource, "fragment");
        var vertexShader = createShader(gl, vertexShaderSource, "vertex");

        // link them together into a new program
        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // get pointers to the shader params
        shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "vertexPos");
        gl.enableVertexAttribArray(shaderVertexPositionAttribute);
        
        shaderProjectionMatrixUniform = gl.getUniformLocation(shaderProgram, "projectionMatrix");
        shaderModelViewMatrixUniform = gl.getUniformLocation(shaderProgram, "modelViewMatrix");

        
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }
    }

     function draw(gl, obj) {

         // clear the background (with black)
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT);

    	 // set the vertex buffer to be drawn
         gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);

         // set the shader to use
         gl.useProgram(shaderProgram);

 		// connect up the shader parameters: vertex position and projection/model matrices
         gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
         gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
         gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

         // draw the object
         gl.drawArrays(obj.primtype, 0, obj.nVerts);
      }
          
    function onLoad() {
        var canvas = document.getElementById("webglcanvas");
        var gl = initWebGL(canvas);
        initViewport(gl, canvas);
        initMatrices();
        var square = createSquare(gl);
        initShader(gl);
        draw(gl, square);
    }


</script>


</head>


<body onload="onLoad();">

    <canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>

</body>

</html>

Original source code: https://github.com/tparisi/WebGLBook/blob/master/Chapter%201/example1-1.html

Develop a simple to-do-list mobile app using phonegap/cordova for iOS and android -Part 2

This tutorial is the second part of a three-part series on how to create a simple to-do-list app for beginners.

In the first part of the tutorial series, setup development environment using certain IDE for iOS/android and preview your iOS and android hybrid app using emulator and actual device (smart phone). http://blog.revivalx.com/2014/11/02/develop-a-simple-to-do-list-mobile-app-using-phonegapcordova-for-ios-and-android-part-1/

In this second tutorial, you’ll learn how to develop iOS and android hybrid app using client side language and create multi page application for iOS and android hybrid app.

Create a new project inside your eclipse.

create a new eclipse project

create a new eclipse project

Select General > Project.

new eclipse project

new eclipse project

Enter following details and click Finish.

Project name: com.revivalx.cordova.todomobile.
Location: your project workspace.

create a new eclipse project

create a new eclipse project

Overview of Cordova directory structures

Here is the Cordova directory structure:

cordova structure

cordova structure

hooks – This directory may contains scripts used to customize cordova commands.

platforms (android and iOS) – Platforms added to your application will have the native application project structures laid out within this directory.

plugins – Any added plugins will be extracted or copied into this directory.

www (css) – The main application CSS directory.

www (img) – The main application image directory.

www (js) – The main application javascript directory.

index.html – The main HTML file.

config.xml – A global configuration file.

Right click js folder on your project. Go to New > Javascript Source File.

Javascript Source File

Javascript Source File

Select JavaScript > JavaScript Source File and click Next.

Javascript Source File

Javascript Source File

Create 4 javascript files.

  • main.js – initialize function.
  • AddPage.js – to add user details.
  • ListPage.js – to retrieve user list.
  • DetailPage.js – to retrieve user details.

Click Finish.

javascript source file

javascript source file

 

Right click www folder and go to New > Folder to create a new folder.

add folder

add folder

Name it pages and click Finish.

add folder pages

add folder pages

Then create a few of html pages inside page folder that we already created just now. Right click pages folder and go to New > HTML File.

HTML Files

HTML Files

Select Web > HTML File and click Next.

new html file

new html file

Create 3 html files and click Finish. Repeat.

  • AddPage.html – to add user details.
  • ListPage.html – to retrieve user list.
  • DetailPage.html – to retrieve user details.
new html file

new html file

Copy Jquery javascript files that you already extract from proper location into js folder.

jquery

jquery

Go to extracted Ratchet directory and select/copy all folders inside ratchet-2.0.2 > dist .

ratchet directory

ratchet directory

Then paste it inside www folder.

ratchet

ratchet

Open your index.html and replace with this code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.css" rel="stylesheet">
    <script src="cordova.js" type="text/javascript"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/ratchet.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body onload="init()">

  </body>
</html>

Replace all codes with given codes for each javascript files.

AddPage.js

currentPage={};

currentPage.init = function() {
    console.log("AddPage :: init");
};

currentPage.back = function(){
    console.log("AddPage :: back");
    $("body").load(path + "pages/ListPage.html", function(){
        $.getScript(path + "js/ListPage.js", function() {
            if (currentPage.init) {
                currentPage.init();
            }
        });
    });
};

DetailPage.js

currentPage={};

currentPage.init = function() {
    console.log("DetailPage :: init");
};

currentPage.back = function(){
    console.log("DetailPage :: back");
    $("body").load(path + "pages/ListPage.html", function(){
        $.getScript(path + "js/ListPage.js", function() {
            if (currentPage.init) {
                currentPage.init();
            }
        });
    });
};

ListPage.js

currentPage = {};

currentPage.init = function(){
    console.log("ListPage :: init");
};

currentPage.loadPage = function(pageIndex){
    console.log("ListPage :: loadPage :: pageIndex: " + pageIndex);
    $("body").load(path + "pages/" + pageIndex + ".html");
    $.getScript(path + "js/" + pageIndex +".js", function() {
        if (currentPage.init) {
            currentPage.init();
        }
    });
};

main.js

var pagesHistory = [];
var currentPage = {};
var path = "";

function init(){

    $("body").load(path + "pages/ListPage.html", function(){
        $.getScript(path + "js/ListPage.js", function() {
            if (currentPage.init) {
                currentPage.init();
            }
        });
    });

}

Replace all codes with given codes for each html files.

AddPage.html

<script>
    $.getScript(path + "js/AddPage.js");
</script>

<header class="bar bar-nav">
	<a class="icon icon-left-nav pull-left" onclick="currentPage.back();"></a>
  	<h1 class="title">AddPage</h1>
</header>

DetailPage.html

<script>
    $.getScript(path + "js/DetailPage.js");
</script>

<header class="bar bar-nav">
	<a class="icon icon-left-nav pull-left" onclick="currentPage.back();"></a>
  	<h1 class="title">DetailPage</h1>
</header>

ListPage.html

<script>
    $.getScript(path + "js/ListPage.js");
</script>

<header class="bar bar-nav">
	<button id="LoadAddButton" class="btn pull-right" onclick="currentPage.loadPage('AddPage');">Load Add.html</button>
  	<h1 class="title">ListPage</h1>
</header>

<div class="content">
<div class="content-padded">
    <button id="LoadDetailButton" class="btn btn-positive btn-block" onclick="currentPage.loadPage('DetailPage');">Load Detail.html</button>
</div>
</div>

Build your project using this command and run the app.

cordova build ios
cordova build android

Thats all for

  • Develop iOS and android hybrid app using client side language.
  • Create multi page application for iOS and android hybrid app.

Next tutorial we will connect iOS and android hybrid app with server side language. Next, http://blog.revivalx.com/2014/11/03/develop-a-simple-to-do-list-mobile-app-using-phonegapcordova-for-ios-and-android-part-3/.