Simple app (CRUD) using IBM worklight 6.1

Getting started with IBM Worklight V6.1. This tutorial show you how to do simple CRUD operation using IBM Worklight. What you need for this tutorial are

Outline that cover for this tutorial:

  • Setting up your development environment
  • Preview your app
  • Learning Worklight client side API
  • Building a multi page application
  • Learning Worklight server side API

Setting up your development environment

Step 1

Visit this link to install worklight into your eclipse.

http://blog.revivalx.com/2014/05/22/ibm-worklight-installation-on-eclipse/

Open up your eclipse. Go to File > New > Other.

eclipse new project

eclipse new project

Step 2

Choose Worklight Project. Click Next.

select wizard

select wizard

Step 3

Type CRUD-worklight or your own project name in name textbox. Click Next.

new worklight project

new worklight project

Step 4

Type CRUDWorklight or your own for application name. Click Finish. A popup will show up. Tick Remember my decision and click Yes.

open associated perspective

open associated perspective

Step 5

Open application-descriptor.xml.

application descriptor

application descriptor

Step 6

Click Source tab at bottom of page.

application descriptor

application descriptor

Step 7

Change author details. (optional).

application descriptor

application descriptor

Step 8

Right click worklight project , go to New > Worklight Environment. This part is when we want to add platform into our worklight project such as iOS, android and windows mobile.

worklight environment

worklight environment

Step 9

Select your project and application/component. For this tutorial I will cover only for iOS and android. For windows mobile you need a windows machine to run the project using Visual Studio Express in Windows 8.1 operating system. Tick iphone and android phones and tablets. Click Finish.

worklight environment

worklight environment

Step 10

Your project directory will be like this.

worklight directory

worklight directory

Preview your app (android)

Step 11

import android project

import android project

Step 12

Select Existing Android Code Into Workspace. Click Next.

import android project

import android project

Step 13

Click Browse to select android project.

import android project

import android project

Step 14

Browse your project and click Open.

import android project

import android project

Step 15

Click Finish.

import android project

import android project

Step 16

Follow this tutorial how to run android app in android simulator.

http://blog.revivalx.com/2014/02/21/crud-operation-using-jquery-mobile-on-android-part-1/

Preview your app (iOS)

Step 17

Right click on iphone folder and go to Run AsXcode Project.

Run As Xcode Project

Run As Xcode Project

 

Step 18

Click Play on top left side to preview the app on your iphone.

xcode5

xcode5

Learning Worklight client side API and Building a multi page application

Step 19

Right click js folder inside common folder in your worklight project. Go to New > Javascript Source File.

Javascript Source File

Javascript Source File

Step 20

Create 3 javascript files.

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

Click Finish.

new javascript file

new javascript file

Step 21

You latest project directory will be like this.

Step 22

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

add folder

add folder

Step 23

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

Step 24

Create 3 html files.

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

new html file

Step 25

You latest project directory will be like this for html files.

new html files

new html files

Step 26

Open your main.css file and replace with this code.

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
}

/* Worklight container div */
body {
min-height: 460px;
margin: 0 auto;
/*width: 320px;*/
}

h1 {
font-size: 18px;
}

#AppBody {
min-height: 460px;
margin: 0 auto;
/*width: 320px;*/
background-color: #ccc;
overflow: hidden;
overflow-y: auto;
}

#header {
text-align: center;
background-color: #1D4D90;
color: #F9FAFB;
font-size: 16px;
height: 38px;
line-height: 38px;
border-bottom: 1px solid #BBBBBB;
}

#wrapper {
padding: 10px;
}

p{
padding: 10px;
}

#itemsList{
margin-top: 38px;
}

#itemsList li {
border-bottom: 1px solid #bbb;
min-height: 40px;
padding: 0 25px 0 15px;
cursor: pointer;
}

#itemsList li .pubDate {
color: #555;
font-size: 10px;
font-family: Arial;
}

#itemsList li:hover {
background-color: #EFEFEF;
}
replace main.css

replace main.css

Step 27

Open your index.html and replace with this code.

<!DOCTYPE HTML>
<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>index</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    		<link rel="shortcut icon" href="images/favicon.png">
    		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    		<link rel="stylesheet" href="css/main.css">
    		<script>window.$ = window.jQuery = WLJQ;</script>
    	</head>
    	<body style="display: none;">
    		<div id="AppBody">
				<!-- This is static header, it will be shown always -->
				<div id="header">
					<h1>CRUD Worklight</h1>
				</div>		

				<!-- This is a placeholder for dynamic page content -->
				<div id="pagePort"></div>
			</div>
    		<script src="js/initOptions.js"></script>
    		<script src="js/main.js"></script>
    		<script src="js/messages.js"></script>
    	</body>
</html>
replace index.html

replace index.html

Step 28

Replace all codes with given codes for each javascript files.

AddPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("AddPage :: init");
};

currentPage.back = function(){
	WL.Logger.debug("AddPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

DetailPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("DetailPage :: init");
	detailUser();
};

currentPage.back = function(){
	WL.Logger.debug("DetailPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

ListPage.js

currentPage = {};
var busyIndicator = null;

currentPage.init = function(){
	WL.Logger.debug("ListPage :: init");
	busyIndicator = new WL.BusyIndicator('AppBody');
	listUsers();
};

currentPage.loadPage = function(pageIndex){
	WL.Logger.debug("ListPage :: loadPage :: pageIndex: " + pageIndex);
	$("#pagePort").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 wlCommonInit(){
	// Special case for Windows Phone 8 only.
	if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
	    path = "www/default/";
	}

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

}
replace javascript files

replace javascript files

Step 29

Replace all codes with given codes for each html files.

AddPage.html

<script>
 	$.getScript(path + "js/AddPage.js");
</script>
<p>
	Currently <b>AddPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

DetailPage.html

<script>
 	$.getScript(path + "js/DetailPage.js");
</script>
<p>
	Currently <b>DetailPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

ListPage.html

<script>
	$.getScript(path + "js/ListPage.js");
</script>
<p>
	Currently <b>ListPage.html</b> page is loaded.
</p>
<input type="button" value="Load Add.html" id="LoadAddButton" onclick="currentPage.loadPage('AddPage');" />
<input type="button" value="Load Detail.html" id="LoadAddButton" onclick="currentPage.loadPage('DetailPage');" />
replace html files

replace html files

Step 30

Right click on CRUDWorklight folder > Run As > Build All Environments.

Build All Environments

Build All Environments

Step 31

Repeat step 16 (android) and step 17-19 (iOS) to preview your app.

Step 32

Now we create a worklight adapter for this project. Right click worklight project and go to New > Worklight Adapter.

worklight adapter

worklight adapter

Step 33

Select project and adapter type. Enter your adapter name. USERAdapter. Click Finish.

worklight adapter

worklight adapter

Step 34

You latest project directory will be like this for worklight adapter.

worklight adapter

worklight adapter

Step 35

Open USERAdapter.xml and click source tab at bottom of the page.

worklight adapter

worklight adapter

Step 36

We will using there URLs for our HTTP request/response. Refer to this tutorial for more understanding.

Replace code inside USERAdapter.xml and USERAdapter-impl.js .

USERAdapter.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Licensed Materials - Property of IBM
    5725-I43 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
    US Government Users Restricted Rights - Use, duplication or
    disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->
<wl:adapter name="USERAdapter"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:wl="http://www.worklight.com/integration"
	xmlns:http="http://www.worklight.com/integration/http">

	<displayName>USERAdapter</displayName>
	<description>USERAdapter</description>
	<connectivity>
		<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
			<protocol>http</protocol>
			<domain>demo.revivalx.com</domain>
			<port>80</port>
			<!-- Following properties used by adapter's key manager for choosing specific certificate from key store
			<sslCertificateAlias></sslCertificateAlias>
			<sslCertificatePassword></sslCertificatePassword>
			-->
		</connectionPolicy>
		<loadConstraints maxConcurrentConnectionsPerNode="2" />
	</connectivity>

	<procedure name="listUsers"/>
	<procedure name="addUser"/>
	<procedure name="detailUser"/>
	<procedure name="editUser"/>
	<procedure name="deleteUser"/>

</wl:adapter>

USERAdapter-impl.js

function listUsers() {

	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/get_all_users.php"
		};

	return WL.Server.invokeHttp(input);
}

function addUser(name,officeNumber,phoneNumber,email) {

	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/create_user.php",
		    parameters : {
		    	name:name,
		    	officeNumber:officeNumber,
		    	phoneNumber:phoneNumber,
		    	email:email
		    }
		};

	return WL.Server.invokeHttp(input);
}

function detailUser(userId) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/get_user_details.php",
		    parameters : {
		    	userId:userIdS
		    }
		};

	return WL.Server.invokeHttp(input);
}

function editUser(userId,name,officeNumber,phoneNumber,email) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/update_user.php",
		    parameters : {
		    	userId:userIdS,
		    	name:name,
		    	officeNumber:officeNumber,
		    	phoneNumber:phoneNumber,
		    	email:email
		    }
		};

	return WL.Server.invokeHttp(input);
}

function deleteUser(userId) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/delete_user.php",
		    parameters : {
		    	userId:userIdS
		    }
		};

	return WL.Server.invokeHttp(input);
}

Step 37

Now we deploy worklight adapter and invoke it.

Deploy Worklight Adapter

Deploy Worklight Adapter

Step 38

Right click on USERAdapter and go to Run As > Invoke Worklight Procedure.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 39

Select getUsers procedure and Click Run.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 40

Below is result from http header after we invoke worklight adapter.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 41

Now we want to integrate worklight adapter with app. You need to replace all html files and js files so we can invoke worklight adapter from there.

AddPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("AddPage :: init");
};

currentPage.back = function(){
	WL.Logger.debug("AddPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

currentPage.add = function(){
	WL.Logger.debug("AddPage :: add");
	busyIndicator = new WL.BusyIndicator('AppBody');
	var name = $("#name").val();
	var officeNumber = $("#officeNumber").val();
	var phoneNumber = $("#phoneNumber").val();
	var email = $("#email").val();
	if(name == ""){
		WL.SimpleDialog.show("Alert","Please enter name",[{text:'OK'}]);
	} else if(officeNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter office number",[{text:'OK'}]);
	} else if(phoneNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter phone number",[{text:'OK'}]);
	} else if(email == ""){
		WL.SimpleDialog.show("Alert","Please enter email",[{text:'OK'}]);
	} else{
		createUser(name,officeNumber,phoneNumber,email);
	}
};

function createUser(name,officeNumber,phoneNumber,email){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'addUser',
			parameters : [name,officeNumber,phoneNumber,email]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : addUserSuccess,
		onFailure : addUserFailure
	});
}

function addUserSuccess(result){
	WL.Logger.debug("Add user success");
	WL.SimpleDialog.show("Success","Add user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function addUserFailure(result){
	WL.Logger.error("Add user failure");
	busyIndicator.hide();
}

DetailPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("DetailPage :: init");
	detailUser();
};

currentPage.back = function(){
	WL.Logger.debug("DetailPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

currentPage.edit = function() {
	WL.Logger.debug("DetailPage :: edit");
	busyIndicator = new WL.BusyIndicator('AppBody');

	var userId = sessionStorage.userId;
	var name = $("#name").val();
	var officeNumber = $("#officeNumber").val();
	var phoneNumber = $("#phoneNumber").val();
	var email = $("#email").val();
	if(name == ""){
		WL.SimpleDialog.show("Alert","Please enter name",[{text:'OK'}]);
	} else if(officeNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter office number",[{text:'OK'}]);
	} else if(phoneNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter phone number",[{text:'OK'}]);
	} else if(email == ""){
		WL.SimpleDialog.show("Alert","Please enter email",[{text:'OK'}]);
	} else{
		editUser(userId,name,officeNumber,phoneNumber,email);
	}

};

currentPage.remove = function() {
	WL.Logger.debug("DetailPage :: delete");
	busyIndicator = new WL.BusyIndicator('AppBody');
	deleteUser();
};

function detailUser(){
	var userId = sessionStorage.userId;
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'detailUser',
			parameters : [userId]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : detailUserSuccess,
		onFailure : detailUserFailure
	});
}

function detailUserSuccess(result){
	WL.Logger.debug("Detail retrieve success");
	busyIndicator.hide();
	if (result.invocationResult.user.length>0) {
		displayUsers(result.invocationResult.user);
	} 

	else
		detailUserFailure();
}

function detailUserFailure(result){
	WL.Logger.error("Detail retrieve failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot retrieve detail. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function displayUsers(user){
	$('#name').val(user[0].name);
	$('#officeNumber').val(user[0].officeNumber);
	$('#phoneNumber').val(user[0].phoneNumber);
	$('#email').val(user[0].email);
}

function editUser(userId,name,officeNumber,phoneNumber,email){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'editUser',
			parameters : [userId,name,officeNumber,phoneNumber,email]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : editUserSuccess,
		onFailure : editUserFailure
	});
}

function editUserSuccess(result){
	WL.Logger.debug("Edit success");
	busyIndicator.hide();
	WL.SimpleDialog.show("Success","Edit user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function editUserFailure(result){
	WL.Logger.error("Edit failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot edit. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function deleteUser(){
	var userId = sessionStorage.userId;
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'deleteUser',
			parameters : [userId]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : deleteUserSuccess,
		onFailure : deleteUserFailure
	});
}

function deleteUserSuccess(result){
	WL.Logger.debug("Detail retrieve success");
	busyIndicator.hide();
	WL.SimpleDialog.show("Success","Delete user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function deleteUserFailure(result){
	WL.Logger.error("Delete failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot delete. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

ListPage.js

currentPage = {};
var busyIndicator = null;

currentPage.init = function(){
	WL.Logger.debug("ListPage :: init");
	busyIndicator = new WL.BusyIndicator('AppBody');
	listUsers();
};

currentPage.loadPage = function(pageIndex){
	WL.Logger.debug("ListPage :: loadPage :: pageIndex: " + pageIndex);
	$("#pagePort").load(path + "pages/" + pageIndex + ".html");
	$.getScript(path + "js/" + pageIndex +".js", function() {
		if (currentPage.init) {
			currentPage.init();
		}
	});
};

currentPage.detailPage = function(userId){
	sessionStorage.setItem("userId", userId);
	$("#pagePort").load(path + "pages/DetailPage.html");
	$.getScript(path + "js/DetailPage.js", function() {
		if (currentPage.init) {
			currentPage.init();
		}
	});
};

function listUsers(){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'listUsers',
			parameters : []
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : listUsersSuccess,
		onFailure : listUsersFailure
	});
}

function listUsersSuccess(result){
	WL.Logger.debug("List retrieve success");
	busyIndicator.hide();
	if (result.invocationResult.users.length>0) {
		displayUsers(result.invocationResult.users);
	} 

	else
		listUsersFailure();
}

function listUsersFailure(result){
	WL.Logger.error("List retrieve failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot retrieve list. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function displayUsers(users){
	var ul = $('#itemsList');
	var html ='';
	$.each(users, function(index, item) {
		html += '<li><a onclick="currentPage.detailPage('+item.userId+');" >';
		html += '<h4>' + item.name + '</h4>';
		html += '<p>' + item.email + '</p>';
		html += '</a></li>';

	});

	ul.append(html);
}

Main.js

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

function wlCommonInit(){
	// Special case for Windows Phone 8 only.
	if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
	    path = "www/default/";
	}

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

}

AddPage.html

<script>
 	$.getScript(path + "js/AddPage.js");
</script>
<p>
	Currently <b>AddPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

<div id="addUser">
	Name:<br>
	<input name="name" type="text" id="name"/><br>
	Office Number:<br>
	<input name="officeNumber" type="text" id="officeNumber"/><br>
	Phone Number:<br>
	<input name="phoneNumber" type="text" id="phoneNumber"/><br>
	Email:<br>
	<input name="email" type="text" id="email"/><br>
</div>

<div id="addButton">
	<input type="button" value="ADD USER" onclick="currentPage.add();">
</div>

DetailPage.html

<script>
 	$.getScript(path + "js/DetailPage.js");
</script>
<p>
	Currently <b>DetailPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

<div id="addUser">
	Name:<br>
	<input name="name" type="text" id="name"/><br>
	Office Number:<br>
	<input name="officeNumber" type="text" id="officeNumber"/><br>
	Phone Number:<br>
	<input name="phoneNumber" type="text" id="phoneNumber"/><br>
	Email:<br>
	<input name="email" type="text" id="email"/><br>
</div>

<div id="editButton">
	<input type="button" value="EDIT USER" onclick="currentPage.edit();">
</div>

<div id="deleteButton">
	<input type="button" value="DELETE USER" onclick="currentPage.remove();">
</div>

ListPage.html

<script>
	$.getScript(path + "js/ListPage.js");
</script>
<p>
	Currently <b>ListPage.html</b> page is loaded.
</p>
<input type="button" value="Load Add.html" id="LoadAddButton" onclick="currentPage.loadPage('AddPage');" />
<ul id="itemsList"></ul>

Step 42

Repeat step 31 to preview your app.

You can find the source code here: https://github.com/datomnurdin/CRUD-worklight

Eclipse Plug-in (Aptana 3) Installation for Sencha Touch

I decided to post a tutorial to show how to install Aptana 3 eclipse plugin into your eclipse for Sencha Touch development.

Prerequisite

Go to Help > Install New Software…

install new software

install new software

Click Add.

install new software

install new software

Enter Aptana 3 for name and http://download.aptana.com/studio3/plugin/install for location. Click Ok.

add repository

add repository

Select All and click Next.

install new software

install new software

Click Next.

install new software

install new software

Select I accept the terms of the license agreement and click Finish.

install new software

install new software

Wait until it finish installing.

install new software

install new software

Click Yes to restart your eclipse.

software updates

software updates

I’d appreciate any feedback for this tutorial. Next tutorial I will post about simple Sencha app.

My Next Big Thing Project, PayNow

For those who are curious, I’m currently developing a mobile app that caters to e-commerce sector. The app is called as PayNow.

What is PayNow? If you are an online seller and selling your products on social media such as Facebook and Instagram, this app can be an excellent selling tool for you. PayNow lets you create and upload your products quickly and easily. Sharing your products with your customers via social media can be done in just a tap.

paynow

paynow

Below are some of the features of this app:

  • Quick and easy product creation
  • Instant sharing to Facebook Profile & Page, Twitter and Instagram
  • Unique product link, copy and paste the link to anywhere you want
  • Automated payment processing and order management
  • And much much more…

You can download the app from the links below. Please don’t forget to leave a review too!

Enjoy!!

IBM Worklight installation on eclipse

Here I show you how to setup IBM Worklight into your eclipse. IBM worklight latest version is 6.1. Licensing is free for IBM Worklight Developer Edition. But you need to purchase it if you want move to production or distribute to the public or inside your organization. The pricing is quite expensive, it’s around $140000 for annually licensing.

IBM Worklight

IBM Worklight

Before you start this setup, you must have eclipse Juno SR2 or Luna. Eclipse Keplar not compatible with worklight. Eclipse Helios is only for PHP development, not suitable for worklight.  Same go to ADT bundle tool (Android Development Tool). Open your eclipse.

http://www.eclipse.org/downloads/packages/release/juno/sr2

Click Help and select Eclipse Marketplace.

Eclipse Marketplace

Eclipse Marketplace

Search for worklight and click Install for IBM Worklight Developer Edition.

eclipse marketplace

eclipse marketplace

Select all and click Next.

eclipse marketplace

eclipse marketplace

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

eclipse marketplace

eclipse marketplace

Wait until it finish installing.

installing software

installing software

Click Yes to restart.

restart eclipse

restart eclipse

Your worklight is ready use. Don’t hesitate to contact me if you have difficulties installing this software in your eclipse.

Integration Cordova Facebook Connect Plugin for android

In this tutorial, we will learn how to integrate your app with Cordova Facebook Connect Plugin. This tutorial only cover for iOS and android platform.

Before you proceed this tutorial, make sure you already have pre installed with

in your machine.

To use this plugin you will need to make sure you’ve registered your Facebook app with Facebook and have an APP_ID (https://developers.facebook.com/apps). 

If you plan on rolling this out on iOS, please note that you will need to ensure that you have properly set up your Native iOS App settings on the Facebook App Dashboard. Please see the Getting Started with the Facebook SDK: Create a Facebook App section, for more details on this.

If you plan on rolling this out on Android, please note that you will need to generate a hash of your Android key(s) and submit those to the Developers page on Facebook to get it working.

facebook developer

facebook developer

Firstly you need to register your app on the facebook developer. https://developers.facebook.com/ . Make sure you have facebook account before proceed. Go to Apps tab and select Create a New App.

facebook developer

facebook developer

Enter your display name and select category. Leave it blank for namespace. Then click Create App.

facebook create a new app

facebook create a new app

Enter the captcha text then submit.

facebook captcha

facebook captcha

You will see your facebook app details here. Your App ID will be use for Cordova Facebook Connect Plugin.

facebook developer dashboard

facebook developer dashboard

Go to setting page to setup your ios and android for cordova facebook connect plugin.

facebook developer basic setting

facebook developer basic setting

Click Add Platform and select ios platform.

facebook app select platform

facebook app select platform ios

Enter your bundle ID and enable Single Sign On. Your bundle ID will be com.revivalx.cordova.facebook . And click Save Changes.

facebook ios setting

facebook ios setting

Add platform for android.

facebook app select platform android

facebook app select platform android

Android setting require a hash key. To get this hash key, you need to run this command to generate it. Run this command in your terminal.

keytool -exportcert -alias Cordova Connect Plugin -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
hash key for android

hash key for android

You will get your hash key, RZDg+xMYTX/NZm2BxXIUnATSAf0= . Enter your package name and hash key. Then don’t forget to enable Single Sign On. Click Save Changes to save.

facebook app android basic setting

facebook app android basic setting

You need to create a cordova project using terminal (mac)/ cmd (windows). You need to install node.js to run cordova command. Please refer to this site how to install cordova using NPM. https://www.npmjs.org/package/cordova .

After that, type this command into your terminal.

cordova create com.revivalx.cordova.facebook

Then add platform for iOS and android

cordova platform add android
cordova platform add ios
create project com.revivalx.cordova.facebook

create project com.revivalx.cordova.facebook

Install this cordova facebook connect plugin into your cordova project  using this command.

cordova plugin add https://github.com/phonegap/phonegap-facebook-plugin --variable APP_ID="589003057863589" --variable APP_NAME=“Cordova Connect Plugin”
cordova facebook connect plugin

cordova facebook connect plugin

Open up your eclipse and create a new project. Click File > New > Other.

eclipse new project

eclipse new project

Choose Project under General category and click Next.

eclipse new project

eclipse new project

Enter your project name. We name it for this tutorial, com.revivalx.cordova.facebook . 

Screen Shot 2014-05-17 at 4.43.24 AM

Then choose your location for your project. Click Finish. Your project hierarchy will be like this.

com.revivalx.cordova.facebook

com.revivalx.cordova.facebook

Open up your config.xml and change with this one.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.facebook" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaFacebook</name>
    <description>
        This source code provides example for facebook login.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

example hackbook

example hackbook

Then go to www folder inside plugins folder in your parent folder. com.revivalx.cordova.facebook plugins > com.phonegap.plugins.facebookconnect www . Copy two these files inside your www folder. com.revivalx.cordova.facebook > www.

com.phonegap.plugins.facebookconnect

com.phonegap.plugins.facebookconnect

Open your index.html file in parent folder and replace this code with this one. Copy app id that already generated from facebook developer app website.

// Initialize the Facebook SDK
document.addEventListener('deviceready', function() {
FB.init({
appId: '589003057863589',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
FB.getLoginStatus(handleStatusChange);
authUser();
updateAuthElements();
});

If you want to create an android app, make sure you copy all these files into src folder in your cordova project. These are your ‘Facebook SDK’. You don’t need to download Facebook Android SDK bundle on the Facebook Developer. Download all these files first. https://github.com/phonegap-build/FacebookConnect/tree/master/src/android/facebook .

  • AsyncFacebookRunner.java
  • DialogError.java
  • Facebook.java
  • FacebookError.java
  • FbDialog.java
  • Util.java

Create a hierarchical folder (com.facebook.android) inside src folder. com.revivalx.cordova.facebookplatforms > android > src .

com.facebook.android folder

com.facebook.android folder

Copy all these files into your src folder. com.revivalx.cordova.facebookplatforms > android > src > com > facebook > android

com.facebook.android

com.facebook.android

Replace ConnectPlugin.java file with this one, https://github.com/phonegap-build/FacebookConnect/blob/master/src/android/ConnectPlugin.java .

Cordova Facebook Connect Plugin

Cordova Facebook Connect Plugin

Go to res folder and copy it into android folder.

Build your project for ios and android using terminal.

cordova build ios

cordova build android

Import another project for android and cordova library.

import android project

import android project

Select Existing Android Code Into Workspace under Android category.

import android

import android

 Select All except FacebookLib project. Click Finish.

import android project

import android project

Right click project. Select Run As > Android Application.

Run As Android Application

Run As Android Application

Choose a running Android device and click OK.

android device chooser

android device chooser

Download sample app: https://github.com/datomnurdin/com.revivalx.cordova.facebook

Then your app will running in your device. Next tutorial I will show for iOS part. Don’t hesitate to contact me if you got any questions or problems about this problem.