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.

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/.

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

In this tutorial you will implement a simple to-do-list functionality in your PhoneGap application. You will learn the following:

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).
  • Develop iOS and android hybrid app using client side language.
  • Create multi page application for iOS and android hybrid app.
  • Connect iOS and android hybrid app with server side language.

Getting Started

Download the required software packages.

Download and install Eclipse Juno SR2 and Xcode 6 (if you’re using Mac for mobile development).

Eclipse Juno SR2 – http://www.eclipse.org/downloads/packages/release/juno/sr2
Xcode 6 – https://developer.apple.com/xcode/downloads/

Setup ADT and Android SDK into your eclipse.

Then you need to setup cordova using NPM (node package manager).

Download Jquery and Ratchet from their official website. You should unzip it to proper location. For this tutorial, we using Jquery 2.1.1 and Ratchet 2.0.2.

ADT and Android SDK Setup

Here is a tutorial for to-do-list app so user can Create, Read, Update and Delete their tasks. First you need to have correct tools before we begin. Sometimes hybrid mobile app can be done with no tools. however you may waste a lot of time without utilizing the suitable tools for your project. Choosing the right tools depends on the needs and preferences of the developer.

You need Eclipse Juno SR2 for android development. Why I choose this because base on my experience using other version of eclipse can be troublesome for android development. Mostly eclipse plugin support for Eclipse Juno SR2 on eclipse marketplace. Eclipse Kapler and Luna are still new compared with the others. Indigo got some issues for Maven. Helios for PHP, not suitable for android development. Android Studio? I didn’t have the chance to test it because of time limitation.

Don’t forget to install or update your machine with latest JDK. Currently JDK version 7. Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads- 1880260.html.

After you download, make sure you set the correct java path. If not, you can’t start your eclipse. You can download eclipse Juno http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junosr2.

Then install it. After you install the tool that I tell you, make sure you install ADT (android development tools).

Go to Help and choose Install New Software.

eclipse - Install New Software

eclipse – Install New Software

Click Add button then popup box will appear. Enter ‘ADT’ in name textfield and ‘https://dl-ssl.google.com/android/eclipse/’ in location textfield.

eclipse - Install ADT

eclipse – Install ADT

Click Select All button and click Next.

eclipse - Install ADT

eclipse – Install ADT

Click Next.

eclipse - Install ADT

eclipse – Install ADT

Select I accept the terms of the license of agreement. Click Finish.

eclipse - Install ADT

eclipse – Install ADT

After finished setup ADT in your eclipse, download android SDK (http://developer.android.com/sdk/index.html) and update latest android version or depends on your device for testing. After you install the android SDK, open android SDK , /android-sdk/tools. For this tutorial we will using latest android SDK, Android 5.0 aka Lolipop. Open your terminal/cmd, type android command and enter.

android terminal

android terminal

Select Android 5.0 and click Install 12 packages.

Android SDK Manager

Android SDK Manager

Select all packages, choose Accept License and click Install.

Choose Packages to Install

Choose Packages to Install

After that, install node.js (http://nodejs.org/) to use npm for package manager. If you not install node.js, you should not be able to invoke node or npm on your command line to install cordova apache. Then install cordova apache using terminal for Mac, command prompt for Windows.

Type this command to install cordova apache.

For Mac

sudo npm install -g cordova

For Windows. If you can’t install, make sure you run the command prompt as administrator.

npm install -g cordova
sudo npm install -g cordova

sudo npm install -g cordova

sudo npm install -g cordova

sudo npm install -g cordova

After you finish install the cordova apache. You can start create your project using cordova command. Open your terminal/command prompt, type these command. You can ignore sudo if you using Windows.

cd /Applications/MAMP/htdocs
cordova create com.revivalx.cordova.todomobile
cordova create project

cordova create project

Open config.xml inside cordova project that you already created just now. Change id and name. Others are optional.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.todomobile" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>ToDo</name>
    <description>
        To Do List App.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Go back to terminal and add platform for android/iOS. Type these command to add both platforms.

cordova platform add

cordova platform add

Note, if you got some error message during add andorid platform, you can refer to this link

Common errors during developing hybrid android app – http://blog.revivalx.com/2014/11/02/common-errors-during-developing-android-hybrid-app/

Android part.

Go to eclipse and import android project. Click File and choose Import.

eclipse - import project

eclipse – import project

Choose Existing Android Code into Workspace and click Next.

eclipse - existing android code into workspace

eclipse – existing android code into workspace

Browse your android project and select all. Click Finish.

eclipse - import projects

eclipse – import projects

Make sure you already connect your mobile device (android phone) and enable USB debugging.

Enable USB debugging: http://www.phonearena.com/news/How-to-enable-USB-debugging-on-Android_id53909

Right click android project > Run As > Android Application.

Run As Android Application

Run As Android Application

Select your phone and click Ok.

Android Device Chooser

Android Device Chooser

If successful, your app shown like this.

cordova app preview on android

cordova app preview on android

iOS part.

Open your cordova project for iOS. Go to ../com.revivalx.cordova.todomobile/platforms/ios/ToDo.xcodeproj . Select iPhone6 simulator and click Play button.

xcode6

xcode6

If successful, your app shown like this.

cordova app preview on iOS

cordova app preview on iOS

I think thats all for

  • Setup development environment using certain IDE for iOS and android.
  • Preview your iOS and android hybrid app using emulator and actual device (smart phone).

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

CRUD operation using jquery mobile on android – Part 3

Hi, I’m coming back. Unfortunately I’m not writing this tutorial for part 3 because I found a lot of flawless using jquery mobile especially to DOM issue. If you still resist want to learn developing a hybrid app for iOS and android from A-Z, you can go to this tutorial.

http://blog.revivalx.com/2014/07/15/simple-hybrid-mobile-app-using-cordova-and-ratchet-2-complete/

sorry..

sorry..

I’m apologise for my mistake..

Flexslider Cordova – A Sample Application demonstrating Phonegap, Jquery and Flexslider Integration

Yesterday my friend just requested a sample phonegap app using flexslider and jquery for his project. I’m not sure what he trying to with this thing but like as usual I really like to helping each other especially it’s related to mobile development.

flexslider

flexslider

I already develop it and push it to github repository here, https://github.com/datomnurdin/com.revivalx.cordova.flexsider. Here is a brand new version of Flexslider Cordova, built with Phonegap, Jquery and the Flexslider plugin from woothemes.

Flexslider Cordova is a sample application that demonstrates how to:

  • Basic Slider

Source Code

The source code is available in this repository on GitHub.