ManZzup'z TutZ

Resolving fetchMock issues when testing isomorphic-fetch [Reactjs]

2017-04-03T11:25:00.000-07:00

Hi peeps,

This is a quickie, and the content is totally reactjs.
If you are using fetchMock to simulate your API requests and you happend to use isomorphic-fetch for better support of fetch in browsers, you might have noticed that how fetchMock doesn't work. The solution is that you have to change the isomorphic-fetch import as below

import fetch from isomorphic-fetch

should be changed to

import isomorphic-fetch

This is highlighted in the fetchMock documentation.

Using Google Clound Platform SDK installer behind a proxy

2017-02-15T03:53:00.001-08:00

Hi,

In the latest version of Google App Engine SDK, the SDK comes as a part of the Google Cloud Platform SDK. (There's an option to select between that or the legacy SDK). But since new is always better, I tried out the new SDK installer.

Here's the python 2.7 installer for 64bit systems link :

Then I simply followed the instructions, which is to extract the files to *anywhere* and then simply run the install.sh script. This script basically adds aliases to the bashrc and downloads some components from the google servers. The issue is that I was behind a proxy and there was no instruction available on how to configure the installer script to use the proxy. So here's how.

Run the following commands replacing the proxy settings as necessary

Developing a 2D Board game with Python / Pygame : Part 2

2016-11-23T12:48:00.001-08:00

Hi all,

Please check Part 1 before continuing to this section
In the last section, we covered board generation, leaving the actual network connectivity creation to this section.

Part 2 : Connecting to the server

Step 1 : Configure the game server

The given server (included in the github link), is made in C# as a Visual Studio Solution. Thus to run it
1) Download and extract the source
2) Install Visual Studio
3) Open lk.ac.mrt.cse.pc11/Tanks_server.sln
4) Once done, run the solution to open up the UI and the CLI

NOTE: IF you need to access the server from another machine, you need to make it listen to an interface IP. For that open up App.config and change the IP Address to something you get from ipconfig command.

Now with some analysis of the code and structure of the game server, the following can be seen.

1) We need to initialize a socket connection to the game server on the port 6000
2) As soon as we initialize and send the command "JOIN#" to game server, server will reply back to port 7000/
3) Thus, before sending the Join command we need to start a server on our client side that listens to port 7000.
4) Once that is initialized, our server continue to listen to the commands from the game server, through which various updates are taken.

Step 2 : Initialize socket connection

To ease everyone's life, I came up with a ServerClient class that handles all the things mentioned above. So in order to connect, all you need is to import the class and call the methods accordingly.
First save the socketclient.py which contains the ServerClient .

Now we use this class to connect to the server,

Note: Here the IP I have added is an external one since my server is running on a different machine. If you have both your client and Game server in the same machine, use 127.0.0.1 instead.

Save the below code as the new tank.py and run it. (Make sure the game server is running first). If all goes okay, you will see a string in the form "I:P:0...." printing on your console output. And the game server CLI output will show some text that says you have connected.

Step 3 : Drawing the board

Now that we can connect to the Game server and properly talk with it, next is to decode the board explanation given by the game server into graphical interface itself.

The format of the initialization code is
I:P0:<list of brick cordinates>:<list of stone wall cordinates>:<list of water cordinates>

So we simply do some splits and get cordinates of each element and draw them on our board. Since we have only implemented Brick walls in the sample I will show how to draw in the following code.

Once you run the tanks.py (remember that you need to close the game server and re run it before running your tanks.py, EVERYTIME), you will see that the Brick walls are shown on your interface in the same places as shown in the game server UI.

Okaaaay, so now you have the basic connectivity working, and I believe that you can continue building from here onwards. First make sure you add the logic to show all 4 different terrain types. Then make new Sprites, Coin and Lifepack and add them the same way we have used before.

I will try to update some future posts on the development, like auto vanishing coins and animations, but I guess this would work for now.

Cyah all

Developing a 2D Board game with Python / Pygame : Part 1

2016-11-22T15:44:00.001-08:00

Hi all,
Quick introduction is the game is called Tanks and more details about the game will follow later since right now is time critical.
But just to begin,
1) The board is a 20x20 grid
2) 5 players play at the same time
3) There are 4 different times of terrain - Ground, Brick wall, Water, Stone wall
5) Other sprites include coins and health packs
6) Multiplayer, it communicated through a central socket-server

What you need

1) python 2.7 installed
2) pygame library installed

pygame is available as a standalone installer for windows, for most unix releases you can get it through standard repos (package python-pygame)

What is pygame

A very small 2D game development engine. It just covers the basic graphics handling like dealing with the graphics drivers and all, but on the other hand it leaves us with a lot of flexibility in coding. Also the learning curve for the syntax is almost non-existing! If you know your python, this is a piece of cake. If not well still learning python is pretty easy :D

Part 1 : Board generation

All the codes will be available on https://github.com/ManZzup/Tanks

In this section I would quickly cover the basics of pygame, and how to generate a board from a given input. I said generate because we will only receive a set of instructions from our multiplayer server. So we will construct the game generation accordingly.

Step 1 : Introducing pygame

This program just opens up a window and print some images on to it. This is the fundamental of game creation. If we need to animate all we need is to extend this to draw the same images again and again in a very rapid motion.So if you know to draw an image and to clear it, you can basically do animations!

Save this as tanks.py and run (python tanks.py)
If all goes good (fingers crossed) you will see a black screen with your image on it.

Step 2 : Making board cell

Let's get down to the real thing. SO to start off as i mentioned there are 4 types of board cells:
1) Ground cell
2) Water cell
3) Brick wall cell
4) Stone wall cell

So in pygame, each of these are called Sprites (read about them at pygame docs). Basically we would create python classes that extend the pygame.sprite.Sprite class
Why-- because Sprites deal with alot of other things like collision detection, Groups bla bla we'll come to them later
We start off by making a Ground Cell

Make sure you put ALL YOUR image files as the SAME directory as the script
Now let's modify our tanks.py to see how our cell looks like

When you run with python tanks.py you will see a small brown square in a huge black screen. IT WORKS!
Now i assume that you did the same for other cells as well, so i won't be covering that.

Step 3 : Making the Board Class

Our board class is basically a data structure that would hold
1) A data grid (2D int array)
2) All the cell sprites for all 400 cells
3) Any other board related info

So th following Board class defines all these. Note the concept of Group (pygame.sprite.Group) used here. A Group is a set of Sprites, the advantage is that when we group similar Sprites, we can apply some functions like drawing, scaling, collision detection onto them as a group.
Saves us a lot of coding and also it is efficient.

What's the data grid
Since our server will send us the info about various units in a very complicated form, I decided that those should be stored in a very efficient manner. SO the option I selected was to use an integer array (2D int array) to define each cell of our board. So how we define all the elements we have is here

We use 0 to indicate a Ground cell
0    -   Ground cell
-1   -   Brick cell
-2   -   Stone cell
.....
10 -    Player 1 Direction North
11 -    Player 2 Direction East
12
13

20 - Player 2 Direction North

and likewise

So by referring to the above chart, in our Board class, first we define a method that would get the positions of each elements, populated by the server and mention them in the grid.

And the second method, draw_board is to loop those elements and construct the board by fixing the relevant cells.

<<code to be added, check github>>

Again I assumed that you complete the above chart in a way that suits you plus the Cell classes.

Step 4 : Check board generation

Finally we just need to check if our board generation works. First we create a board instance and then manually feed the location of some brick walls. See that we just send a list of positions, just as we get them from the game server. This way when we finally communicate with server, we have less work to do on our side.

Then we call the draw_board function finally the cells.draw() function
Here's where the Group came useful. If not for the cells Group, we would have to iterate each and every cell and blit it to the screen. But here Group takes care of it ^_^.

Check your code with the following modified tanks.py

<<again due to some error, please check the code at github>>

DONE! So the first step is done, now i would say around 15% is completed. (Given that you take the extra step and construct the other cells, and do MODIFICATIONS as necessary)

Next is to communicate with the server,coming in Part 2.

Cyah

Writing integration tests for Apache CXF REST API that supports XML and JSON

2016-08-12T08:54:00.000-07:00

Hey folks,

This comes up as a part of my ongoing GSoC project. The task as described in an earlier post was simple. To convert a SOAP service to REST. Yet the individual issues that comes up along the way sums up to writing those separate blog posts about them.

So this is the last phase of the project that I'm currently carrying out, that is to write integration tests for the now available REST web service. Now have the following assumptions before we go through the procedure

1) The service is implemented with Apache CXF and JAX-RS
2) It can consume and produce both XML and JSON based requests and responses
3) Service is up and running and accessible at https://localhost:5000/rest
4) Service has a one service method called getResponse that accepts XML or JSON requests (in a predefined way) and outputs according to the headers given.

Issue

Issue now is that although we can easily write unit tests for any given piece of code, writing unit tests for the web service api is just pointless. We need to be able to test the service online it self whenever we make a change to see that everything works good (the whole point of testing). So what we need are integration tests.
Moreover since my request/response architecture supports XML and JSON I should be able to send corresponding requests and check if I am getting the desired responses. So let's dig into the steps.

Steps

1) Add all dependencies

We need 2 things for our code to work
i) Apache CXF
ii) TestNG (Or if you preper you can use JUnit as well)

Since my project is all maven based, I will show how to add the required dependencies using maven. If you use any other dependency management software, feel free to find the libraries appropriately.

2) Prepare the directory structure

Before going into code we need to structure our codes so that the test classes doesn't mess up with our source code. Also keep in mind that since we have to test XML/JSON requests/responses we need to store these code files somewhere and read them as well. Hardcoding them inside the test classes would be an ugly option. So we have 3 things to keep apart from each other
i) Source code
ii) Test classes
iii) XML/JSON codes

Here's how I managed to seperate those

There are 2 main directories under the src directory
i) main : contains source code and it's resources
ii) test : contains test classes and it's resources

Since XML/JSON codes are part of the test classes, they are put within the resources directory under test directory.

3) So now we are ready to start with the code. First make a single class named TestService which extend Assert class under the test directory. (Chose the package names appropriately)

4) First we write a simple method to check if the service is online, if it's offline we cannot do any integration test on it.

NOTE: If your service is secure (https), then probably the java WebClient will need to verify the certificates before any request can be made. If such verification cannot be done, an exception would occur. The easiest way to overcome is to make up your own keystore and specify the path to the keystore or truststore from the code. You can easily google that step, anyhow I added the following to the constructor of TestService class to mention the location of the trustStore to the WebClient. (This corresponds only according to my own configuration)

5) Everything's ready to go but we need to make some mock XML/JSON requests and responses first.

request-getResponse-1.xml

response-getResponse-1.xml

Keep those files in the xml directory under the resources.
Assume that when we send the contents of request-getResponse-1.xml over to the getResponse service method, we receive the response with the content in response-getResponse-1.xml.

6) Next we need a method to read the content from those 2 files. Here's a neat method that does the job, note that the string replacement at the end makes sure that things work correctly when we have to do assertEqual at the desired and actual responses at the end.

7) Let's write our first test method now
You can change / add / remove the headers as necessary, and keep in mind that this suits to a service method that reads the body of the request and processes it. If you play around a bit you can find the way to send any type of request to a service.

8) Here's the full code when all put together, and now you test the code. And TA-DAA
All test cases passed!

If you get any test case failures check the outputs of response and webResponse to see what's going wrong. So happy testing!

Reference

https://cwiki.apache.org/confluence/display/CXF20DOC/JAXRS+Testing

[GSoC 2016] REST implementation for WSO2 IS Entitlement Service

2016-08-05T21:43:00.003-07:00

Hi all,

This post is to document the process followed, decisions taken and implementations done in implementing the REST service for WSO2 Identity Server's Entitlement Service. This was done as a GSoC project. If you are nto familiar with the WSO2 Identity Server, please first refer to my previous post which would answer most your questions.

Abbreviations

IS - Identity Server
XACML - eXtensible Access Control Markup Language
REST - Representational state transfer
JSON - JavaScript Object Notation

Requirements of the service

Allow RESTful access to 5 service methods (Already implemented in SOAP service)
Allow XML XACML requests to be processed and responses to be given
Allow XML web requests to be processed and responses to be given
Allow JSON XACML requests to be processed and responses to be given
Allow JSON web requests to be processed and responses to be given
Exceptions should be handled globally and necessary responses should be given in a centralized manner
Comply fully with the REST profile for XACML 3.0
Provide swagger definitions for extra methods that are not specified in the REST profile

Implementation Decisions

REST Framework - Apache CXF

Apache CXF is a framework that allows easy deploying of REST Services. The key reasons for using Apache CXF for this implementation are

Apache CXF already used with other REST Services (ex: SCIM inbound provisioning service). So libraries are already bundled with IS
JAXB provides inherent support for marshaling and unmarshaling Java Beans to and from XML
Additional libraries can be used to easily support JSON
Exception mappers allow centralized exception handling

Jackson for JSON support

Jackson is a JAX-RS provider for JSON, and it's already used within IS.

Implementing JSON profile for XACML 3.0 defined here

Using exception mapper to centralize the exception handling of the service and providing customized error messages from the service.

Final Implementation Design

Figure 1

Rough Class Diagram on critical components

Figure 2

Steps

1) Branching from SCIM inbound provisioning service implementation

Since the the above project is already implemented and functioning within IS, a copy of that was used as a starting point for the REST implementation of Entitlement Service. The following classes and packages were derived as it is from the SCIM implementation

packages
i) auth
ii) impl

classes
i) AuthenticationFilter
ii) AbstractResource
iii) ClearThreadLocalInterpretor

2) Removing SCIM related dependencies

All SCIM related dependencies were removed from the project. Since Authentication is not centralized within IS (and will be in future), the following authenticators were hardcoded.

i) BasicAuth
ii) OAuth

3) Restructure project paths and doing necessary changes to cxf-servlet.xml and web.xml

4) Adding JSON marshaling and unmarshaling to and from Java Bean support using Jackon

Currently Jackson 2.5.4 is added as an external library to the project. And the Jackson Json Provider was registered as a provider for the service. For which the following lines we added in cxf-servlet.xml

5) Define a new DecisionResource class which would handle the service endpoint requests

DecisionResource will extend AbstractResource. Accordingly the necessary service methods were then added (Refer Figure 2).

6) For methods getDecision and getDecisionByAttributes Request/Response converters were needed

By default Balana engine does not posses the capabilities to evaluate JSON XACML requests nor provide JSON XACML response. Hence 2 new classes were added to provide support.

i) JSONRequestParser : Converts JSON XACML request to Balana ResponseCtx object
ii) JSONResponseWriter : Converts Balanda ResponseCtx object to JSON XACML Response

7) For the rest of the web service requests, necessary Request/Reponse models were defined. Such defined models were

i) getHome : HomeResponseModel

ii) getDecisionByAttributtes / getBooleanDecision: DecisionRequestModel

iii) getEntitledAttributes :EntitledAttributesRequestModel, EntitledAttributesResponseModel

iv) getAllEntitlements : AllEntitlementRequestModel, AllEntitlementResponseModel

8) These models allow better Request/Response structures from the service

9) Custom Exception Mapper (EntitlementExceptionMapper) was added

This act as an intermediate to all exceptions occurred during the service method executions as well as JAX binding executions. Exception will not be handled inside the service methods, but rather will be thrown out to be caught be the exception mapper. Hence through which the exception handling procedure can be centralized. Custom error codes and messages were introduced. (Will be stated in a latter section)

10) Finally, the webapp is created to a war file and deployed to the IS webapps directory

It can be accessible by https://localhost:9443/wso2-entitlement/entitlement/Decision?_wadl

11) Implementing Swagger for populating service methods

Swagger is a framework that easily provide a globally understandable representation to the RESTful APIs. Since our REST service contained methods that were not defined by the XACML REST profile, swagger need to be used to populate the methods definitions of those additional methods and of the overall API itself. Swagger product a json/yaml file that nicely describes the service methods, input parameters and return values to any client that consumes it.

12) Writing integration tests for the service using testNg and Jetty

Once all done, the integration tests were written. Used jetty module that comes with Apache CXF to fire up a web client and send and retrieve responses from the service. The full procedure is at http://manzzup.blogspot.com/2016/08/writing-integration-tests-for-apache.html

Code

The complete code can be found at
https://github.com/ManZzup/identity-framework/tree/master/components/entitlement/org.wso2.carbon.identity.entitlement.endpoint

Github Commits
https://github.com/ManZzup/identity-framework/commits/master?author=manzzup

Public JIRA Ticket
https://wso2.org/jira/browse/IDENTITY-4985

References

1) XACML 3.0 REST Profile

2) XACML 3.0 JSON Profile

phpmyadmin not found on LAMP install in Ubuntu 16.04+

2016-07-14T16:15:00.001-07:00

Hey folks,

Just another quick one. Recently I installed Ubuntu 16.04 and Ubuntu 16.10 both uses the shinny new php7.0. And some newer version of apache as well. And both times when I installed phpmyadmin, and go to http://127.0.0.1/phpmyadmin or http://127.0.0.1/phpmyadmin
it gives me a simple, annoying 404!

Well there's a lot of solutions for this in Q&A threads, but for me the only working solution is that, you need to Include the phpmyadmin configuration at the end of the apache2 configuration, so that apache knows that phpmyadmin exists. Here's how

1) Open up apache configurations

sudo nano /etc/apache2/apache2.conf

2) Add the following to the very end

Include /etc/phpmyadmin/apache.conf

3) Save and exist and then restart the apache server

sudo service apache2 restart

4) Browse http://127.0.0.1/phpmyadmin

WORKS GREAT!!

Tomcat error when deploying web app : addFilter, addServlet NoSuchMethodException

2016-05-21T09:33:00.001-07:00

Hey peeps,

Just a quick update on something i found today. I was hacking things with a tomcat server (wso2 IS). My need was to duplicate a webapp and make some changes as I like. But when I changed those 'stuff' in the webapp source I had to specifically mention some dependency versions (build tool was maven) rather than obtaining them from the parent pom.

And when I generated the war and deployed it in the server I got the following error

Solution

It turns out that the reason for this error has nothing to do with the actual content of the web.xml
But a dependency mismatch
That is some libraries in your WEB-INF\lib directory of the war file is conflicting with some libraries already loaded. So the fix was for me to delete the lib directory completely and deploy which worked!

But according to some stackoverflow answers, deleting just tomcat-catalina.jar and/or all tomcat-*.jars will fix it

Happy Deploying! :D

Laravel 5 : Getting started for collaborative development

2016-04-11T04:02:00.003-07:00

Hey folks,

Laravel, for those who aren't familiar is a php framework that is widely gaining popularity these days. This came into my attention when I had to implement an HR system in PHP. Usually I would have gone with Symfony, which I know has a larger support base. But the issue is that Symfony has a huge learning curve and I have to work with a team. Laravel on the hand has a less difficult learning procedure and it can be used to start implementation rapidly.

But Laravel it self is really confusing sometimes. Mostly if you are not familiar to tools like composer and git (for collaborative development). So here's a quick tutorial in which I mention steps I took to setup Laravel and a git repo for development.

Requirements

1) Git installed
You can download git for any platform here,
https://git-scm.com/downloads
Make sure if in windows, that you add Git to shell commands when they ask to, so that you can access git from command prompt at any place.

2) LAMP / WAMP installed
Linux Apache MySQL PHP (LAMP)
Windows Apache MySQL PHP (WAMP)
You can do this per your liking

3) phpMyAdmin installed
If you are a windows user using popular WAMP like XAMPP, you will have phpMyAdmin already installed. LAMP users need to add it manually.

4) Composer installed
Composer is a dependency management tool for Laravel. Much like Maven (if you are familiar) it will take a list of necessary dependencies and download these to the computer which removes the need of uploading all the 3rd party libraries everywhere.
Download and install composer according to the instructions given here
https://getcomposer.org/download/

Oookay now we are officially ready to start off with the things.

Steps

1) Make an online repository to host your source code
For collaborative development, first thing you need it to host your code somewhere. Since we are using git for source control, we need a host that supports git.
Github : will let you have public repos for free
Bitbucket : will let you have private repos for free (plus team integration with limits)

I went with bitbucket since our code is SUPER SECRET!
So goto bitbucket.org, make a new repo. let's say "AwesomeHR"
Now ask all your team members to sign up with bitbucket as well and in your repo settings, add all of the team members and give them write / read access.

2) Clone your repo to the local drive
It's time to get your repo to your hard drive. Goto your webroot directory (usually www, htdocs, etc depends according to your server) and clone the repo using this command,

git clone https://manzzup@bitbucket.org/manzzup/awesomehr.git

3) Installing Laravel

There are 2 ways of installing Laravel,
One is the official guide in their installation page using composer and laravel installer
https://laravel.com/docs/5.2

Second one is the hard code way in which we download the Laravel master branch from their github repository and extract it where we want. I had more success with this method in several platforms than using the installer (which has varying steps depending on the platform)

i. First download the Laravel master repo as a zip file from their Github repo
You can also use the following link for a direct download
https://github.com/laravel/laravel/archive/master.zip

ii. Next extract it to your newly cloned directory so that when you go into your AwesomeHR folder, it shown all the php files (not laravel-master folder, in that case move everything inside laravel-master to outside)

NOTE:
Now comes a very critical understanding. Laravel has 1000 different 3rd party libraries in use. Those libraries as well as the Laravel core source are NOT included in the zip file you just downloaded. why?

Because doing such would make it a very big file
We can't always have the latest version of the library if you pre bundle it with the Laravel source, any bug fixes won't reach once downloaded.

So here's how composer come into play. Composer's job is to download all those other libraries into the directory named "vendor" in your Laravel installation and setup them so that it works smoothly.
But keep in mind that you SHOULD NOT copy this vendor directory when you are sharing your code. In other words, the vendor directory be default has a .gitignore file which prevents ANY file inside that folder being uploaded to your remote repo.
Any collaborator using your code has to follow the steps of cloning your repo and then using composer to download the additional libraries.

iv. After that loong discussion, you use the following command while being inside of the extracted folder (AwesomeHR)

composer install

It will take some time for this to complete. Be patient my friend.

To check if all went good, goto http://localhost/AwesomeHR/public/ and you see this

Ta-Daaa you have a fresh Laravel installation now!

4) Configuring Laravel
Still the shit ain't working. Obviously you need to follow an installation procedure.
You need a database for Laravel to store all the data to start with.
Goto phpMyAdmin and make a new database called "laravel"
I will assume our database configuration is as follows

Database name : laravel
Database user : root
Database pass : root
Database host : 127.0.0.1

To make Laravel use these settings, open the .env.example file in your laravel root directory using your IDE or something like SublimeText. (Notepad won't work)
Edit the lines 5 - 8 to match your configuration

DB_HOST=127.0.0.1
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=root

Officially, you can start development with Laravel. You can try a few simple migration codes and make sure the installation is okay. Before you forget, you need to upload the code to the remote repo in bitbucket. Use the following command,

git add .
git commit -m "initial commit"
git push origin master

5) Collaborative development
To use the above code in a team mate's disk, follow these steps

i) Clone the bitbucket repo

git clone https://manzzup@bitbucket.org/manzzup/awesomehr.git

ii) Use composer to install the vendor files

composer install

iii) Do configurations as in step 4

Happy Laravel-ing folks!

WSO2 Identity Server : Understanding XACML 3.0 policies, implementing them in IS and testing with SoapUI

2016-03-25T07:25:00.001-07:00

Hi folks,

This is a weird way to resume a blog that was silent for a long time. But I guess this will do. The reason for this post is mainly GSoC 16' which is currently happening. And in selecting a project for it, I came up with WSO2 which has middleware based products. And with time constraints, I was forced to study a system overnight and thought that documenting what I found would be beneficial for those who try to do the same later.

So the question here is what exactly WSO2 Identity Server does?

WSO2 Identity Server (IS) is an identity management system based on open standards. It's a middleware that would connect all dispersed authentication services you have into one manageable system. It has many features that makes authentication and authorization of users for your resources a simple and efficient task. Since the scope of this post is not explaining what IS is, I recommend you to follow the following links to have a better idea. (Dear future GSoC applicant, it is very important that you go through those seemingly boring but highly important links :) )

Get to know the high level artichecture
https://docs.wso2.com/display/IS500/Architecture

A very simple getting started guide
http://umeshagunasinghe.blogspot.com/2015/11/wso2-identity-server-quick-tutorial-on.html

The blog that would contains answers to many questions on IS
http://pushpalankajaya.blogspot.com/

Now since you have some idea about IS, let's dig into XACML specification, its uses and how IS has implemented it.

XACML is set of standards by OASIS that are related to access control. In general, it specify a way or a language through which applications should communicate to request authentication and authorization data from eachother. Since the specification in discuss is XACML 3.0, from the following link you can observe how a XACML document would look like.

http://docs.oasis-open.org/xacml/3.0/xacml-3.0-core-spec-os-en.html

So why XACML is important to Identity Server is:

It is used as the request/response language standard
It is used as the access control policy standard

With that we get the question what exactly is a policy? and how is it all related?

Okay, let's take some theory in.

A policy (in this context) is a set of rules that would define to IS who can access what. Basically its like a paper from a rule book, Whenever someone asks if a user "A" can perform action "WRITE" to the resource "R", it will go through those policy pages and see if there's any policy defining those requirements.

Let's see the above explanation in a more technical way.

Assume there's a resource link. Whoever accessing the resource now would meet a blocker before the actual resource end point. This blocker is known as the Policy Enforcement Point (PEP). The PEP is like the guardian of the front gate that would catch the request and it wants to know if the requests comes from a client that actually has access to the resource. For that it sends the request data to a place called Policy Decision Point (PDP). PDP is like the rule book reader that matches requests data against any rules in the rule book. The rule book is known as the Policy Administration Point (PAP), it is where all the policies are written.

Additionally there's a component known as Policy Information Point (PIP). This is a place where the PDP can ask for more information of a user that's requesting the authorization.

Now the three parts PIP, PDP, PAP are working together to figure out if the request can pass through the blocker (PEP) and reach the resource. It can do so only if they given the 'Permit' flag back as response to the PEP. If you look at the following diagram things may get more clear.

[Well just looking won't help, you have to really try to understand]

XACML architecture implementation in IS

I think that actually clears-up the theory part. So we can now get into real action :D

Scenario

Suppose there's a resource located at http://127.0.0.1/service/very_secure
And this service should only be accessed by admins (Or any user that is given the user role as 'admin')

Objectives
1) Configure IS to have a policy to support the above rule
2) Validate the policy using the IS inbuilt Try-it feature
3) Use SoapUI to simulate a PEP that is sending a SOAP request to check if a potential user is can access the given resource

Pre-Requities
1) WSO2 Identity Server downloaded / build from source
2) SoapUI (free version would do)

Steps

1) Adding a policy to IS
Download and Start the Identity Server (Please read above links again if you have idea how to do that)
Login as username ; admin, password: admin
Goto Policy Administration -> Add New Entitlement
Note that entitlement is adding a new policy or a rule to the rulebook
Select Write Policy in XML from the list

2) Writing the policy
Now that there's a windows where we can write our policy in XACML format. We can also use their inbuilt editors, but for the scope of this we'll stick to the text editor.
Use the following policy code. paste it there and click Save Policy

A above policy defines a set of rules,
i) The policy has the id 'auth_admin'
ii) It matches the attribute resource to http://127.0.0.1/service/very_secure/
iii) It matches the action to exactly be 'read'
iv) It matches the group of the user accessing to exactly be 'admin'

3) Testing the policy
Once you add the policy and save you will see it in the Policy Administration list. From the list there select Try
A new UI would open and select 'Create Request using Editor'
What we going to do here is to create a sample request that might be coming from an actual PEP and test it against our PDP to see if it's working.
Use the folloing xml code, which is a XACML request.

Now click Test Evaluate and you would see that the XACML response appear with the decision tag saying 'permit'. ta-daa! We have successfully made a working XACML policy in IS. Now try changing things in the request, like group name, and resource location and observe the response.

Finally we have to actually put the policy to working mode. This is done by publishing it.
Go back to Policy Administration and publish auth_admin

4) Simulating the PEP using SoapUI
Although we evaluated the Policy using the internet tools, we need to verify that it works from outside too. On the other hand, it is important to observe the response from IS to a PEP using SOAP.
We first need to prepare the IS to show the WSDL definition for SoapUI to extract all endpoints.

Open <product-home>/repository/conf/carbon.xml
Change
<HideAdminServiceWSDLs>true</HideAdminServiceWSDLs>
to
<HideAdminServiceWSDLs>false</HideAdminServiceWSDLs>

Restart IS and navigate to, https://localhost:9443/services/EntitlementService?wsdl
You can see all the endpoints

Open SoapUI and add new project, then add wsdl and put the above url. Once entered you would see that SoapUI automatically identify the endpoints and the service names.
Goto getDecision and right click -> add request
Use the following XMLto have a request

NOTE:
Now we have to put a XACML request INSIDE the SOAP request. In order for the 2 xmls not to fight with each other, we put the XACML request inside CDATA tag, which would prevent it from considering as XML, but it would still be a part of the request text.

Before sending the request we need to add authentication of course.
So add auth from SoapUI and of course put username:password as admin:admin
And hit SEND button. [That green triangular button]

And you would see a SOAP response, in which a CDATA section has the actual XACML response saying 'permit'
DONE!

So this has been a very long post, and i hope to upload and fix issues here and there in this. But hope this helps.

References

http://pushpalankajaya.blogspot.com/2013/06/working-with-xacml-30-policies-for-fine.html
http://docs.oasis-open.org/xacml/3.0/xacml-3.0-core-spec-os-en.html
https://docs.wso2.com/display/IS500/Architecture

Explained: Finding the Longest Increasing Subsequence using Segment Tree

2015-08-01T03:07:00.001-07:00

Hey guys,

Well this is just random but i found out that for my most disappointment that the tutorials on the above topic arent really useful for the novice. Most tutorials just give the procedure in english or the code but not both. Hence I'm trying to write something human-understandable in the simplest english i know :D

Problem

Find the length of the longest increasing subsequence in a given array of integers
For the context of the tutorial we assume all integers are positive hence 0 will be our minimum.
Read more about in the wikipedia article

So the most obvious method is the complete search of the array which would take O(n^2) time. This is highly inefficient for a data set of very large n. Thus an alternative method should be used. Using the segment tree we can find the answer in just O(nlogn) time which is acceptable.

For those who aren't familiar with Segment Trees please refer to wikipedia or this Youtube tutorial. I actually found the Youtube tutorial quite informative and simple to understand.

So back to the solution, what we gonna do is to build segment tree and find the length of the longest subsequence. Please note that this won't give you the actual sequence but just the length of it. But you can implement the finding sequence part easily.

Procedure

1. Sort the original array but keep the original index of each element.

original array - the input array with the elements in their original order
sorted array - an array of objects that contain information on the value of the element as well as its position in the original array. This array is sorted according to the value of the element.

2. Initialize the segment tree with all 0

2. We loop each element of the sorted array and in each iteration
i. Take the original index of the element
ii. Find the value corresponding to (0,index) from the segment tree. This would be 0 in initial iterations.
iii. This value would be the length of longest subsequence upto that point, then add 1 to this value since obviously the current element has a value greater than all previous elements (since the array is sorted) and this extend the previous biggest sequence by 1.
iv. Use this value to build the segment tree further. (update the tree)

Code

Let's look at the code and then I'll do some drawing and stuff to explain the process VISUALLY *_*

So it looks all okay till it comes to the loop. What eaxtly happend when the buildTree and findMax methods are called? How the tree is built?

Let's take our array, sorted array and the initial segment tree

Let's go through our loops

So finally the root of our tree gives the answer :D

Cyah

Things I wish someone told me when doing Haskell

2015-07-01T00:45:00.001-07:00

Hey people,

Long time not posts, yeah i know. Stuck with useless stuff. Finally got some time for a post. This would really be a bundle of snippets mainly for the beginner haskell coders that will soon be frustrated with all the functional elements. I'll try to keep this updated with every new frustration i get :D

IO

Doing IO was the worst thing i had to go through in haskell. As you know that haskell wont allow usual IO in a function, you have to explicitly use do to use a IO command

StdIn as a String

StdIn as an integer/double

Using a function inside a do block with IO

There are instance when our function has to perform IO function only in certain instances. Let's say I need to print numbers only under a certain condition. Then we will have a conditional statement in our function. But as we know every condition in haskell should be complete. If this else ?
For this simply use
return ()
Check this exmaple of printing the pascal triangle

Functions

Function defining has several forms and quite different according to what you wanna do.
For an example given here are two ways to define a function that would double the input amount if it's even or keeps the same if it's odd

Note : if is combined with else, otherwise is not combined with it

Function to generate a list of floating point numbers with defined precision in a given range in haskell

2015-01-09T06:44:00.000-08:00

Well the top says it all
I'll just put the code here :)

n - no of precisions
st - starting limit
en - ending limit

ExceptionInInitializerError when AsyncTask is used inside a Timer

2014-12-30T04:48:00.004-08:00

Hey people,

A quick one here, I was working on a late project and got this weird bug. Tested my android app on 4.2 working all fine but suddenly it crashed on everything below it. Here's the code cause the error

See the problem here is that according to Android Dev, the Async Task MUST run in the UI thread. But the Timer is having it's own seperate thread. So, with the help of Stackoverflow :D I managed a solution where the Timer contains a Handler which would be running in the UI thread. Modified code

Refer http://stackoverflow.com/questions/17049516/android-gingerbread-cant-create-handler-inside-thread-that-has-not-called-loop for more references

Cya People

Easily adding animations when Android layout is changed

2014-12-25T09:37:00.002-08:00

Hey people,

You wont believe that I spent 1.30 hours on this
Just because i wanted to do some simple animations, like sliding/swiping when a listview of mine is updated :|
If you ever wanted to do something like, pushing list items downwards when adding a new items or pulling the rest of the layout upwards when visibility of some widget changes

just DONT, DO NOT write your own custom animations. Just add the simple property to your activity layout xml file :D yeaah that is all you have to do

Add this to your xml

android:animateLayoutChanges="true"

Thank me Later

Error running meteor : Unexpected mongo exit code 1. Restarting.

2014-12-23T09:43:00.001-08:00

hey peopple,

yup the title says it, if you have searched for this specific error and came here
i know the feeling bro, FRUSTATED

here's a little background of the issue

* you installed the latest meteor version
* you created a new app
* when you try to run it

Unexpected mongo exit code 1. Restarting.
Unexpected mongo exit code 1. Restarting.
Unexpected mongo exit code 1. Restarting.

3 times in your face

DONT WORRY i got the solution

as i found out on a internet forum, this can be solved by updating your c/c++ compilers uptodate. For some stupid reason mongodb wants it that way. So lets do it.
i am assuming ubuntu environment

sudo add-apt-repository ppa:ubuntu-toolchain-r/test
sudo apt-get update
sudo apt-get install gcc-4.6
sudo apt-get install g++-4.6

and then run the meteor as usual
VIOLA!! :D

PS: there's another version of this problem

Unexpected mongo exit code 100. Restarting.

see the error code is 100 not 1
this isnt your error, this error is something related to access violation stuff and you can probably find it in internet everywhere

Happy Meteoring

The sidebar and content alignment problem

2014-12-21T04:35:00.003-08:00

Spent a fortune of time figuring this out.

You have a sidebar, more like a drawer and you want the rest of the content of site to take full width of the remaining space of the page. Tried float:left float right? NOPE, here's how to do it

Getting VB.NET to work in MonoDevelop [tested in Ubuntu]

2014-12-21T04:05:00.001-08:00

Hey follks,

Kinda strange to crash with something totally new to the blog but wth :D. Okay some background first, I recently had to go FULL time ubuntu [not by choice], but because i screwed up my Windows partition. Any how after much more blaaaaas , i wanted to develop C#, VB and ASP stuff for .net framework 4 in UBUNTU.
Strange things i know, but believe me a lot of ppl want to do those. So just like everyone else i searched google, Mono was promising and installed it. [ubuntu 11.10].

When i started Mono, I was really impressed, hell they almost ported VS2010 to ubuntu, the C# features worked great but got dissapointed when i came to the VB.NET section.

Issue

When i try to compile the VB.NET code, i get 1 error and 8 warning
8 warnings : the Assemblies not available for some bla
cannot find the import GTK
1 error : Cannot find the 'Windo' class

So there i was searching the internet again and again

Solutions that i found on internet but did not work for me

1) Changing the project type for VS2008 from VS2008
Goto Edit->Preferences->Load/Save
Select VisualStudio 2008 from the dropdown
And recreate a VB.NET project

Well some said it worked but not for me :/

2) Changing the .Net framewrok type
Double click the Porject from Solution Explorer
Build -> General
Runtime Version : Mono / .Net 2.0

Again did not work for me.

And I noticed that the references of the project are all marked red, unlike when i opened a C# project, so after some seriously wasting for time i finally found this.

Solution

1) Double click References. You get Edit references dialog
2) Goto .Net Assembly tab
3) Now we are going to add all the DLL files added as references already [but not working] manually again
4) Goto /usr/lib/mono/gac [this is where all the assemblies are]
5) First we'll add the atk-sharp library
Select atk-sharp->some-directory-with-numbres->atk-sharp.dll
a reference will be added
6) Repeat the above for other references as well

atk-sharp
gdk-sharp
glade-sharp
glib-sharp
gtk-sharp
pango-sharp

Now try to compile the project. =VIOLA= :D
working like a baby.
I dont know why those happend but it's working finally, and its really enough for mt

Ill update for any further errors

Cyah all

Meteor : call javascript function when there's new data on server

2014-12-20T23:09:00.000-08:00

I was soo tired just searching about this, believe me I literally read all posts on stackoverflow regarding those keywords
What I wanna do?

Simple, there's this javascript function on client side that adds some elements to the DOM
It get the data from a data source at the server. But I want this data source to be reactive, so that when ever someother user make a change that data source, all the clients connected should feel that change through the said javascript function.

Here's the code

Make jQuery Mobile form submit using the 'Go' button in the keyboard

2014-12-20T11:27:00.000-08:00

Some tiring problemo i got

Since i'm soo into making hybrid apps for android, i always ended up in corners like this where the native and hybrid features donot exactly match

one such place is getting that tiny 'Go' button you get in the keyboard in a form to carry out the form submission as in a native app

like this one

here's how, you just need to specify ALL you inputs in a form and make your submit button of type 'submit'

DONE ! :D

jQuery Scroll to Slide plugin (As in Nexus 5 website)

2014-07-14T09:11:00.000-07:00

Heyy people,

So today morning we had a little network jam at workplace, which means free time :D And I was asked to make this certain plugin for so long, that i thought i would do it today. If you dont know what this is already, check Official Nexus 5 Site. You'll find a slider under the 'photography' section. It behaves like this,

Slider Features

Slides images up/down when you scroll with the mouse pointer inside the slider container (Phone in the above case)
If it's the last image or the first image of the slider, the normal sliding of the site happens.

Well, it's extremely easy to replicate this behavior, with around 15 minutes of work
We have a css file, JS file and a html file in my demo

Download Source : https://github.com/ManZzup/scroll-to-slide

Logic

What we need is to scroll a set of images up and down. Easiest way to achieve this is to position all the images one under the other, and then move the whole set of images by the amount of height of its container

scrollToSlide.css

scrollToSlide.js

index.html

Isn't much of a tutorial, but I thought would help someone. Ill be adding this to ma git repos soon, so you can always catch the latest release there :)

Cyah folks

EDIT:
I just found out the fiddles :D [not really]
check out the working demo

Handle the precision lose issue in json_decode of php

2014-06-28T06:34:00.001-07:00

Hey all,

I know, it's been months. Literally months since ma last post. And kinda hard to comes back after such delay :/
So i thought I'll do a short post, a quickie.

Issue

In one of ma current projects I have a php web service that should decode some json data comming from a database and then encode it again to be used by the backend of the related android app. Sample data would be something like,

{
"type":"FeatureCollection",
"generator":"JOSM",
"features":[
{
"type":"Feature",
"properties":{
},
"geometry":{
"type":"LineString",
"coordinates":[
[
80.00769225919207,
7.0701729968129206
],
[
80.00769225919207,
7.076613500681037
],
[
79.9820441862658,
7.076613500681037
],
[
79.98203680670133,
7.100457726964171
]
]
}
}
]
}

(Yup something related to latlongs ;) ]

So the problems is that when I do the json_decode on those data, due to the way php handles it, the floating points above loose precision.

ex: 7.0701729968129206 becomes 7.0701729968129
80.00769225919207 becomes 80.007692259192

since those floating points are used as some hashed keys later on, this loose of precision started giving me one heck of errors. Hence I searched around a bit to see how exactly I can solve it on the server itself, without altering my android app.

Solutions

There were 2 solutions that were popular all around stackoverflow and related forums.

1) change the precision of php from the system

By adding the following line, we could control the behavior of precision

ini_set('precision',1);

But it doesnt exactly resolve the issue since, if the original floating point has a lesser precision than the defined, php simply add random numbers to the end (crazzy right?)

ex: 7.0701729968129206 with precision 20 becomes 7.07017299681292064453

2) Changing the json_decode call as follows would help, but only on php > 5.4

$decoded = json_decode($encoded, true, null, JSON_BIGINT_AS_STRING);

So i gave up server side solutions. and thought how exactly json_decode limit those numbers.
Let's look at those two truncated floating points

7.0701729968129 <---- has 13 decimal points
80.007692259192 <---- has 12 decimal points

so the precision isnt the same, then it stuck me

7.0701729968129 <---- has 14 digits
80.007692259192 <---- has 14 digits

yayii, so what it basically does is that make sure that the floating point has only 14 digits by first giving required number of digits for the whole number part and make the rest as decimals.

Now this is pretty easy to handle since many languages has built in support to recreate this behavior.
Here's a short method in java [which I so gratefully found in a SO post :D ]

private double formatNumber(double n){
MathContext mathContext = new MathContext(14, RoundingMode.HALF_UP);
return new BigDecimal(n, mathContext).doubleValue();
}

NOTE: After some observation I found that Rounding Half UP is the correct way to recreate json_decode correctly, and the number of total digits may vary
i got 12 and 14 in two different servers, depend on the php configuration

Hope to write more :)

Creating PDF file from dynamic HTML in Android

2014-05-01T04:02:00.000-07:00

Hellow world,

So i was missing from action for few weeks now. I blame it on my work because I'm always dead tired (only can watch some films for another 4 hours) after i come back from work each day :D. Anyway once again I was given some task that seem's hard at first.

We have a mobile app in android which is not surprisingly a hybrid app. Hence, all the UI elements are HTML/javascript. One day the project managers in a weird way wanted to make a PDF out of some HTML content in display. Now the HTML content here are a dynamic table that's created based on data from a webservice + user interaction. So no way of hard-coding anything.

Todo

Retrieve dynamic HTML from a webview in Android and make a PDF from the content in it

Things you need

iTextPDF : an open source PDF creation library for java, works well in android too
XMLWorker : a plugin for iTextPDF to support XML/HTML

Download these and you need only to reference 2 libraries, those are

itextpdf-5.x.x.jar
xmlworker-5.x.x.jar

CODE

Let's take a look a the sample HTML i would be converting to PDF

<table width="100%">

    <thead>

        <tr>

            <th style="font-weight:bold;text-align:left">Item Name</th>

            <th style="font-weight:bold;text-align:center">Base Currency</th>

            <th style="font-weight:bold;text-align:right">Base Amount</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Basic</td>

            <td>LKR</td>

            <td>75000</td>

        </tr>

        <tr>

            <td>Another</td>

            <td>LKR</td>

            <td>25000</td>

        </tr>

    </tbody>

</table>

NOTE:

We are using a XML parser here, so your HTML structure should be perfect. No loose ends, incomplete tags, open quotes bla bla like that
While this supports retrieving style from external CSS files, the best thing is to embed it into the HTML code itself. Either in <style></style> tags or as inline-style.

So let's check the code:

import com.itextpdf.text.Document;

import com.itextpdf.text.pdf.PdfWriter;

import com.itextpdf.tool.xml.XMLWorkerHelper;

try{

    //your_html_here is a variable with all the dynamic HTML stuff

    String html = "<html><head></head><body>" + your_html_here + "</body></html>";

    //Open a new document instance

    Document doc = new Document();

    //We convert the string to a byte array, so we can input it to the XMLWorker instance                   

    InputStream in = new ByteArrayInputStream(html.getBytes());

    //We write the file to a app accesbile location

    PdfWriter pdf = PdfWriter.getInstance(doc, new FileOutputStream(p.getApplication().getExternalFilesDir("MyFileStorage") + "/out.pdf"));

    //open the document to write

    doc.open();

    //parser and write the file

    XMLWorkerHelper.getInstance().parseXHtml(pdf, doc,in);

    //close things before it gets messey            

    doc.close();

    in.close();

}catch(Exception e){

    System.out.println(e.getMessage());

}

Few things to note:
1) You need to add the following for the manifest to give write access to the app

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

2) Since our sample HTML code didnt have the opening tags like <html>, we have to put them on hand.
3) Change out.pdf to the filename you want, but to a .pdf of course :3
4) Your file can be found at /external/storage/mnt/bla/Android/data/<you app related name>/MyStorageFiles/ firectory

That's brief i know, but this would get you PDF-ing fast :D

Cya ppl

Customize nicEdit Image upload to support uploading images to your server

2014-03-07T02:34:00.001-08:00

Hey all,

So the last week was awesome, I ended up doing some crazy stuff. But this isnt one of them :D Anyway I was told by a friend that he need a WYSIWYG editor for his project. Naturally nicEdit was my choice. Yet again he needed the support of adding image to the content as well, I mean uploading. So I searched and luckily nicEdit has an upload plugin. So the bad newss? Bad news is it's core is designed to upload the image to imgur and attach the url given by their API.

Problem?

All my images would be gone to imgur, I really dont have much problem with that except that every content I post would be depending on the servers of imgur. What if imgur decided that my content is violating their TOS after sometime? :O (Just kidding, need to make a point)

So I hacked the script a bit and saw that their upload mechanism which is AJAX based isnt overly complicated.Best way to use our server to keep images is to make a php script that would mimic imgur API. Wasn't that hard. First let's see how the existing nicEdit upload works.

nicEdit upload process

1) User upload image
2) nicEdit make a creates a POST request to the imgur API
3) API key is added to request
4) Img is added as if it's being uploaded using a HTML form (POST content is send as a multipart form)
5) Request is send to imgur, if everything is fine imgur API responds with a JSON object containing different info about the image
6) nicEdit attach the image using the link send found in the JSON object

Writing something to mimic the imgur API

Script will be written in php but you're free to make it in any language as long as you correctly capture the request and return a correctly formatted JSON object

Request

Request as I mentioned before is as if it's comming from a HTML file upload form. Basically your image data would be available from $_FILES array. From there on we follow the simple php uploader mechanism that is,

1) Check whether the image is a valid image type, to prevent attacks
2) Move the image file from the php temp directory to our img directory
3) Rename it with something unique, I usually do random() or md5() functions for the new name
4) Get the URL to the uploaded image

NOTE:

At this stage you could choose between giving the user a direct URL to the image or making another php script that would return the image data with headers. Well it's more secure, but too much of a trouble. I will continue as if we are giving the direct link to the image.

Response

This is indeed the tricky part. Even if we return the URL to the nicEdit plugin it won't work since it's expecting a JSON object from imgur and I dont want to hack apart everything from the script (No one does :S). This is how the return JSON object would look like (Included ONLY the parts important to ur)

Response (JSON Object)
- upload => (Array)
- links => (Array)
- original => (URL of img)
- image => (Array)
- width => width of image
- height => height of image

Rest is just simple, we make a JSON object just like this and return :) So let's start

Code

img.php

<?php
//Check if we are getting the image
if(isset($_FILES['image'])){
//Get the image array of details
$img = $_FILES['image'];
//The new path of the uploaded image, rand is just used for the sake of it
$path = "upload/" . rand().$img["name"];
//Move the file to our new path
move_uploaded_file($img['tmp_name'],$path);
//Get image info, reuiqred to biuld the JSON object
$data = getimagesize($path);
//The direct link to the uploaded image, this might varyu depending on your script location
$link = "http://$_SERVER[HTTP_HOST]"."/nicedit/".$path;
//Here we are constructing the JSON Object
$res = array("upload" => array(
"links" => array("original" => $link),
"image" => array("width" => $data[0],
"height" => $data[1]
)
));
//echo out the response :)
echo json_encode($res);
}
?>

NOTE:

1) All image are uploaded to a directory named upload, so make sure that dir exists and is CHMOD to 777 (Given read/write permission)
2) Change line 14 to suit your server path

Now we need to tell nicEdit that we are having our own upload script, luckily it's easy.

Open the nicEdit.js (if you download the whole thing with nicUpload plugin).
Find the line starting like xhr.open("POST"...
Replace it with

xhr.open("POST", "http://example.com/path_to_above_script/img.php");

DONE ! Now try uploading something and it would go directly to your server :)

Be back soon !

EDIT

Some of the comments below suggested that the response array should be changed like following for it to work correctly. I think it should be an issue with the latest nicEdit script. So if you are having troubles please try with this code for the '$res' array
Special thanks for jjsteing for pointing the new code

$res = array("data" => array(
"links" => $link),
"width" => $data[0],
"height" => $data[1]
));

Making hybrid android apps with native like performance

2014-02-18T02:08:00.000-08:00

Heyy all,

Today I finally thought that it's time to post the long awaited guidelines in making hybrid apps post. Last month most of my time was dedicated to experiment on different aspects regarding hybrid app development and finding ways to get native like experience from the those apps.

What are hybrid apps?

IMHO most of the time spend making an android app is to make its layout. Yeah ! because the XML layout making is such a pain in the a$$. To add upto these inconveniences, with each Android SDK, there are new UI components released to the developers. Problem being that these components wont support the older devices. So the result is an app that does look the same on all devices.

Hybrids apps are NOT web apps.

They are native android apps but the interface is build with HTML+CSS+Javascript than using the XML components given. Such interfaces are shown on top of a WebView component and a javascript interface is used to facilitate the communication between the interface and the native part.
Anyhow, the purpose of this post is to note some key points I found worth following in making hybrid apps. These would assure a great performance increase in your apps. [I promise ;)]

1) Say no to heavy frameworks == no jQuery

UI designed with jQuery Mobile

Say whaa? The first commercial hybrid app I made, I built it using the jQuery mobile framework. It was easy as hell for me to prototype the app and even easier to integrate it since almost everything was handler by the framework itself.

So the problem? Problem is the performance itself. jQuery mobile is a framework designed to make webapps, not hybrid apps. Hence the goal of it is to speed up the development process and the result being the interfaces made with jquery was soo damn slow. So say no to frameworks.

2) No helper libraries

Most people often confuse jQuery syntax with pure Javascript syntax. It has spread almost like a disease (a good one :D). Helper libraries are good for fast and rapid development but is it good for developing mobile interfaces where every CPU cycle worths? I dont think so !
It's a fact that boilerplate pure javascript performs many times faster than any given library. So if u wanna have sleek & smooth UI performance in your hybrid app, learn to write javascript.

3) Minimize dynamic content

One of the most used features of any framework is to take out the work of the developer by adding stuff dynamically.
ex:
in jQuery mobile framework we define a list like this

<ul data-role="listview">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

But the actual final output of the browser is this

<ul data-role="listview" class="ui-listview">
<li class="ui-li-static ui-body-inherit ui-first-child">One</li>
<li class="ui-li-static ui-body-inherit">Two</li>
<li class="ui-li-static ui-body-inherit ui-last-child">Three</li>
</ul>

See the styling part? the framework takes care of adding those but at the cost of wasting some processing overhead of the device. Although this seems negligible for a small list, when all those dynamics comes together it becomes a lot messy. So the best practice for hybrid UI design would be to write all those class additions your own self.

4) Stick to Android design patterns as much as possible

Most of us tend to break the normal ways of an android UI the moment we lay our hands on HTML which is very natural ;). But it doesnt do much good do us. Be free to structure your layout as you like, but dont make it so absurd that it no longer seems like an android app at all.

5) DONT be cross browser compatible

"That's it ! I'm done with this guy" would be what you are thinking now. In a time when everything is done to cross-compatible I'm saying to throw it away at once. But in a close look, if we are making an interface for an android app, do we need to run it on another 1000 web browser at all?
NO
The only thing in which our interfaced should work is the WebView control. FYI webview control comes with the same rendering engine as of Google Chrome, which is webkit. Although it's not the exact, I can assure that testing your interface in google chrome would be enough. Cut off all the other cross browser crap, it would just slow you down.

~~-webkit-border-radius: 5px;~~
~~-moz-border-radius: 5px;~~
~~-o-border-radius: 5px;~~
~~-ms-border-radius: 5px;~~
~~border-radius: 5px;~~
/* correct */
-webkit-border-radius: 5px;
border-radius: 5px;

6) DONT mix-up backend with frontend

Remember we are just making the UI of our app in HTML. If we try to do some work of the backend (which is Java) from our frontend (which is javascript), we would end up in a big damn mess. Leave the heavy processing to Java and handle the lame stuff with javascript (No offense);

7) One page per One Activity

A blunder that most of us do in hybrid apps is to use one Activity for the whole app and count on the AJAX navigation system to be our app's navigation as well. Well DONT. This would end up making the user confused about the function of the hardware back button.
Limit only one and only one page per activity.

8) No AJAX

Well said in the previous point but stressing again, donot use AJAX at all. If native apps donto have something, hybrid ones should not have them as well. So obviously you cant have AJAX in your pages.

This is all I can remember for now, but I'll update the post when I meet new stuff. Anyway those are just my opinions of a good hybrid apps (solely based on my experience). If you differ on any point feel feel to contact me, for all I know I can be damn wrong :) (I'm not :D)

PS: Check out this nice little framework I compiled for making hybrid apps. I tried to follow all my rules, I think
The Hybrid Framework

Cyah all