Magical Experience with Beacons

One month ago on 27th of March, my friend passed me a box of Estimote Proximity Beacons. That day marks the beginning of my journey towards a greater understanding of beacons and IoT.

Since the day I joined travel industry, I have always been thinking of providing a fun travel experience with beacon technology. When I joined Changi Airport team in 2015, I proposed to my manager the possibility of applying beacons in the airport. The idea was rejected. Now, I finally get the chance to build something with the small little Estimote Proximity Beacons.

estimote-beacons.png
We forcefully opened up the beacons and replaced the batteries.

Claiming Beacons

Every Estimote beacons are shipped with an unique ID which we can modify. By default, the beacon ID is in iBeacon format and consists of 3 values:

The three values are hierarchical. The purpose of UUID is to distinguish our beacons from all other beacons in the network. Major and Minor values allow us to label the beacons with higher accuracy.

ibeacon-format
An example of how a chain of retail shops will deploy and label their beacons. (Source: Estimote Developer Docs)

The iBeacon ID can be changed. One way is to use the Estimote app to do it. Since I wasn’t the owner of the beacons, my first step is to claim the beacon using the app. After I successfully claim the beacons, I can then proceed to retrieve detailed info of the beacons and modify their info.

claiming-beacons-and-changing-broadcasting-power.png
Claiming beacon and modifying its info, such as its range (by default it’s ~3.5m).

Google Beacon Platform

After configuring our beacons, we can then proceed to claim the ownership of our beacons on the Google Beacon Registry. There is a mobile app called Beacon Tools available from Google to help us registering our beacons on Google Beacon Registry. There is a very interesting video interviewing Peter Lewis in the Coffee with a Googler season talking about the steps of beacon registration.

google-beacon-registry.png
Peter shares about Google Beacon Registry and Google Beacon Platform. (Source: YouTube)

After that, we can associate a lot of information with our beacons. To do so, we first are recommended to use Google Beacon Dashboard. There is a very simple tutorial guiding us to use the Google Beacon Dashboard to associate the attachments with the beacons.

attachments
My beacon project, Icy Marshmallow, and the attachments of a beacon in the project.

Read Attachments

I’m using the Nearby Messages API to retrieve the attachments from the beacons. I did a small little Android app (which is properly configured following the recommended steps) with the codes as shown below to achieve this.

package gclprojects.icymarshmallow;

...
import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.api.GoogleApiClient;
import com.google.android.gms.Nearby;
import com.google.android.gms.nearby.messages.Message;
import com.google.android.gms.nearby.messages.MessageListener;
import com.google.android.gms.nearby.messages.Strategy;
import com.google.android.gms.nearby.messages.SubscribeOptions;

public class MainActivity extends AppCompatActivity 
        implements GoogleApiClient.ConnectionCallbacks,
        GoogleApiClient.OnConnectionFailedListener {
    
    private GoogleApiClient mGoogleApiClient;
    private MessageListener mMessageListener;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ...

        mGoogleApiClient = new GoogleApiClient.Builder(this)
                .addApi(Nearby.MESSAGES_API)
                .addConnectionCallbacks(this)
                .enableAutoManage(this, this)
                .build();

        mMessageListener = new MessageListener() {
            @Override
            public void onFound(final Message message) {
                // Called when a new message is found.
                // Use message.getType().toString() to read the attachment Type
                // Use new String(message.getContent()) to read the attachment Value
            }
        }
    }

    @Override
    protected void onStart() {
        super.onStart();
        mGoogleApiClient.connect();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mGoogleApiClient.disconnect();
    }

    @Override
    public void onConnected(@Nullable Bundle bundle) {
        if (mGoogleApiClient != null && mGoogleApiClient.isConnected()) {
            subscribe();
        }
    }

    ...

    private void subscribe() {
        SubscribeOptions options = new SubscribeOptions.Builder()
                .setStrategy(Strategy.BLE_ONLY)
                .build();

        Nearby.Messages.subscribe(mGoogleApiClient, mMessageListener);
    }
}

With the codes above, when beacon gets detected by the mobile app, the onFound method gets called for each of the attachment associated with the beacons. If we print the variable message into Log, we shall see something as follows.

Message{namespace='icy-marshmallow', type='string', content=[29 bytes]}

As shown above, the Value of the attachment is base64 encoded. So to read it, we just need to use new String(message.getContent()).

In the subscribe method, since we are only interested in messages attached to BLE (Bluetooth Low Energy) beacons, we use Strategy.BLE_ONLY.

Problem #1: Unsubscribe Method

When the app is running and another app comes into the foreground, we also need to stop subscribing to messages from the beacons. Otherwise, when we navigate back to the app, the messages can no longer be received even though we re-trigger the subscribe method.

So, I added the following codes.

@Override
protected void onPause() {
    if (mGoogleApiClient != null && mGoogleApiCLient.isConnected) {
        unsubsribe();
    }

    super.onPause();
}

@Override
protected void onResume() {
    if (mGoogleApiClient != null && mGoogleApiClient.isConnected) {
        subscribe();
    }

    super.onResume();
}

private void unsubscribe() {
    Nearby.Messages.unsubscribe(mGoogleApiClient, mMessageListener);
}

Problem #2: Stop Receiving Messages After Few Minutes

Another problem I notice is that the messages will stop be “found” after one to two minutes. However, if I re-trigger the mobile app, then I can start seeing the messages being detected for another one or two minutes.

To solve this issue, I use a simple timer which helps to check whether it has been quite some time the app doesn’t detect the beacons. If it’s more than 1 minute, then the timer will do a unsubscribe-then-subscribe-again action. This will help the mobile app to keep receiving the messages from the beacons. It also solve the problem of the mobile app re-visiting the beacons.

Problem #3: Geo-Location

This is not a real problem if we don’t need the geo-location information of the beacons. However, if we need to know the geo-location of the beacon, one simple way is to just use the LocationManager which provides periodic updates of the mobile geographical location.

package gclprojects.icymarshmallow;

...
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;

public class MainActivity extends AppCompatActivity 
        implements GoogleApiClient.ConnectionCallbacks,
        GoogleApiClient.OnConnectionFailedListener {
    LocationManager locationManager;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ...

        LocationListener locationListener = new LocationListener() {
            public void onLocationChanged(Location location) {
                // Record down the latitude and longitude of the mobile
            }

            ...
        }

        locationManager = (LocationManager) this.getSystemService(Context.LOCATION_SERVICE);
    
        int permissionCheck = ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION);
        if (permissionCheck == PackageManager.PERMISSION_GRANTED) {
            locationManager.requestLocationUpdates(LocationManager.NETWORK.PROVIDER, 0, 0, locationListener);

            ...
        }
    }
}

Writing Data to Firebase

This step is optional unless the data collected needs to be stored for future use.

I use the following codes to write the beacon data to Firebase database.

package gclprojects.icymarshmallow;

...
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;

public class MainActivity extends AppCompatActivity 
        implements GoogleApiClient.ConnectionCallbacks,
        GoogleApiClient.OnConnectionFailedListener {
    private DatabaseReference mDatabase;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ...
        
        mDatabase = FirebaseDatabase.getInstance().getReference();

        mMessageListener = new MessageListener() {
            @Override
            public void onFound(final Message message) {
                ...

                Beacon beaconInfo = new Beacon(...);

                Format formatter = new SimpleDateFormat("yyyy-MM-dd-HH:mm:ss");
                mDatabase.child("Person A")
                        .child(formatter.format(new Date())
                        .setValue(beaconInfo);
            }
        }
    }
}

...

public class Beacon { ... }
firebase.png
Successfully recorded the data from beacons in my Firebase database!

To integrate our Android app with Firebase, our friendly Android Studio comes with a tool called the Firebase Assistance which will help us connect to the Firebase. The assistance also comes with short getting-started tutorial to show us how to cinfigure and add realtime database to our mobile app.

beacon-in-changi-airport.png
Spot the beacon. =)

Installing Beacons in Changi Airport

Installing beacons in our Changi Airport is always one of my dreams to enhance the experience of millions of travelers flying in and out of the airport. In fact, currently the Armsterdam city is already making use of beacon technology to build a powerful beacon networks to give the people a better experience when they are walking around in the city. So why can’t we do the same in our friendly Changi Airport? =)

The Little Problem when Consuming .NET Web Service via kSOAP

In one of our projects, we have a .NET web service. On the client side, we have phone running Android which will consume the web service. Hence, the first option that came to my teammate’s mind is to use kSOAP2, a lightweight SOAP client library for Android.

Problem

When we first tried out our Android app, we realized that it worked fine if the app was calling a web method with no parameter. However, when the app called another web method with one or more parameters, the web service complaint that the value it received was always null.

My colleague discovered this issue around 5:40pm, 20 minutes before I could leave the office. I always hope that I can enjoy a sunset on my way back from office. Hence, I decided to help him settle that little problem within the 20 minutes. Otherwise, I might miss the sunset for the day.

Just a monkey watching the sunset
Just a monkey watching the sunset

First Check: Parameter Name

According to an article on CodeProject regarding kSOAP and .NET web services, it is a must to have the name and type of PropertyInfo to be the same as the web method parameter name and type.

My colleague had the parameter name same and the type is always string. So, this is not the cause.

Second Check: dotNet Flag

I am not sure why some people saying that the dotNet flag doesn’t need to be set to true (or commented out). However, it turns out that later even when we didn’t do anything about this dotNet flag, it still worked. So we just kept the following line in our code.

envelope.dotNet = true;

Third Check: Namespace

I finally came across this discussion on Stack Overflow which suggested that the problem we’re facing was probably caused by the namespace. DanneJaha, the author of the post, commented that if trailing “/” was used in our web service, we needed to have the same in our application as well.

After we added the trailing “/”, our application worked when calling web methods with parameters! Yahoo!

If this doesn’t help in your case, according to other comments on Stack Overflow, the namespace, SOAP action, etc are case sensitive. So, please check that too.

30 Minutes Crash Course of kSOAP

I left the office around 6:10pm so I still had chance to enjoy the sunset.

Anyway, this is actually a good opportunity for me to learn a bit about kSOAP and how Android app communicates with .NET web service. So, it’s fun to get involve in some other projects which you are not working on usually. =)

There are more to learn though.

First Draft of Android Wear App

As a software engineer, it’s always fun when trying out to build some new technology and new tool. It all started with a question from my colleagues, “Is it possible to build an app for Samsung Gear?” The answer is yes, but how? I had never built an app for Android Wear and I didn’t even own any smart watch. Hence I decided to give it a try.

First View

I built the app using Android Studio.

I like the launching animation on the Android Wear emulator. Below are some amazing screenshots taken.

Android Wear Emulator Launched!
Android Wear Emulator launched!

In fact, I could not get the emulator in the first place. When I tried to launch the Android Wear Square emulator, it threw the following error messages on Android Studio.

emulator: ERROR: x86 emulation currently requires hardware acceleration! 
Please ensure Intel HAXM is properly installed and usable. 
CPU acceleration status: HAX kernel module is not installed!

Hence, what needed to be done was just installing the Intel x86 Emulator Accelerator (HAXM) installer under the Extras folder in Android SDK Manager.

After the installation is done, there is also a need to run the installer located in the Hardware_Accelerated_Execution_Manager folder. Once it is installed on the computer, the Android Wear emulator should be able to be launched!

There is a very good discussion on Stack Overflow about this issue, please check it out if you are interested to know more.

The Intel Hardware Accelerated Execution Manager Setup
The Intel Hardware Accelerated Execution Manager Setup

First Draft

Currently, I haven’t finished my first app for Android Wear, Gym Challenge. However, there are already some screenshots available for it which demonstrates the look-and-feel of the application on the Android Wear Square emulator.

Gym Challenge homepage
Gym Challenge homepage

 

One of the features in Gym Challenge is to keep track of the user's time spent on gym.
One of the features in Gym Challenge is to keep track of the user’s time spent on gym.

Meanwhile, I still have no idea on how to try out the functionality to get the heart rate of the user without connecting the emulator to the real smart watch. So, things like SensorManager mSensorManager = ((SensorManager)getSystemService(SENSOR_SERVICE)); is never tested on my app. =P

Anyway, this is just a beginning of my Android Wear app development journey. Feel free to comment or correct me if you spot anything wrong in this post. Thanks! =)

Fixed Issues in Entertainment Connect (Android)

After my Android app, Entertainment Connect, was completed in the beginning of this month, I tested it on tablet. It turned out the VideoView size didn’t scale accordingly to the screen size. That was when I started to learn about Layout Weight.

Fix the Layout: Make Video Displays Nicely

Previously, I set a fixed value for the height of Video View. So, that caused the video appeared to be very small on a bigger screen of tablet.

<VideoView
    android:id="@+id/videoView2"
    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:paddingTop="50dp"
    android:keepScreenOn="true" />

It turns out that both VideoView and ListView are put in linear layout with vertical orientation. So, I just need to assign some nonzero values to the layout weight of them and the video now looks very nice on Android tablet.

Entertainment Connect on Galaxy Tab 4
Entertainment Connect on Galaxy Tab 4

Log Out and Go Back

Entertainment Connect retrieves media files from the user’s OneDrive. Hence, there is a need to handle user login and logout activities correctly. Android devices all have this Back button. Hence, in the first version of Entertainment Connect, user can log out from the app and then click the Back button to view the media list again. To prevent that, I added following two lines in the logout method.

intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); // To clean up all activities
finish();

FLAG_ACTIVITY_CLEAR_TOP helps to clean all the activities and thus prevent user to go back to the Player Activity after logging out. There is an interesting discussion on StackOverflow regarding this.

Calling finish() because the current activity (Player Activity) is done and should be closed after logout. Interestingly, without calling it, the user can still go back to the Player Activity after logging out even though FLAG_ACTIVITY_CLEAR_TOP is used.

Don’t agree with my methods? Feel free to correct me on Github: https://github.com/goh-chunlin/EntertainmentConnectAndroid.

Available on Play Store

Entertainment Connect is now already available on Google Play Store: https://play.google.com/store/apps/details?id=gclproject.onesong&hl=en. It’s free, so please download it now!

Install Entertainment Connect on your Android now!
Install Entertainment Connect on your Android devices now!

Translate PBE Codes from Java to C#

It’s great to accept online payment via your website, right? However, during the implementation of payment gateway on e-commerce website, we sometimes will receive requests from bank to enhance the security of our payment process.

Payment gateway is important on e-commerce.
Payment gateway is important on e-commerce.

One of the requests we received is to provide their API a new value to verify the integrity of the payment process request. According to the requirement, the new value is using a Password-Based Encryption (PBE). The value must be encrypted using MD5 and DES algorithm with Base64 encoding.

The bank provided us a sample code of the encryption in Java.

private static int ITERATIONS = 1000;

public static String encrypt(char[] password, String plaintext, String algorithm)
    throws Exception {
    byte[] salt = new byte[8]; 
    Random random = new Random(); 
    random.nextBytes(salt);

    PBEKeySpec keySpec = new PBEKeySpec(password);
    SecretKeyFactory keyFactory = SecretKeyFactory.getInstance(algorithm);
    SecretKey key = keyFactory.generateSecret(keySpec);
    PBEParameterSpec paramSpec = new PBEParameterSpec(salt, ITERATIONS); 

    Cipher cipher = Cipher.getInstance(algorithm); 
    cipher.init(Cipher.ENCRYPT_MODE, key, paramSpec);
    byte[] ciphertext = cipher.doFinal(plaintext.getBytes("UTF-8"));

    BASE64Encoder encoder = new BASE64Encoder();
    String saltString = encoder.encode(salt);
    String ciphertextString = encoder.encode(ciphertext); 

    return saltString + ciphertextString;
}

To use that, the documentation suggests us the following codes.

import java.util.Random;
import javax.crypto.Cipher;
import javax.crypto.SecretKey;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.PBEKeySpec;
import javax.crypto.spec.PBEParameterSpec;
...
    String password = "xxxxxxxxxx";
    String textToEncrypt = "Hallo, world!";
    String algorithm = "PBEWithMD5AndDES";
...
    encrypt(password, textToEncrypt, algorithm);

As stated in the sample above, the algorithm is called “PBEWithMD5AndDES”, the password-based encryption as defined in RSA Security Inc. It takes a user-chosen password string and combine it with salt to generate the key by doing MDF hashing. It then applies the key on DES (Data Encryption Standard) cipher.

It looks complicated to me. Fortunately, I found a diagram describing the PBE encryption. I re-draw it so that it looks clearer.

PBE Encryption
PBE Encryption

What interest me are two items. One of them is Iteration, which has a value 1000 set to it without further explanation in the given sample code. There is already a discussion about this on StackOverflow. According to the discussion, iteration count is the number of times that the password is hashed during the generation of key. It is said that a higher iteration count will make the brute force hacking the key harder.

Another item that interests me is the salt. As shown in the diagram above, it does not use raw password to generate the key. Salt, a randomly generated bytes, is appended to the password. This is to prevent dictionary attacks.

Emulating PBE with C#

Unfortunately, our e-commerce website is built with .NET technology. Hence, I need to find out a way to encrypt data in C# in the same way as Java PBEWithMD5AndDES algorithm.

Firstly, I found a very helpful code from Bob Janova, a graduate from the University of Cambridge, on CodeProject. The code basically helps us to handle the key generation with MD5. It also takes care of the DES part with the help of DESCryptoServiceProvider class. As stated in the web page, it is very easy to use.

PKCSKeyGenerator kp = new PKCSKeyGenerator();
ICryptoTransform crypt = kp.Generate(
    password,
    salt, // salt
    1000, // iterations of MD5 hashing
    1); // number of 16-byte segments to create. 1 to mimic Java behaviour.

Right after crypt is instantiated, I do the following to make sure it is Base64 encoded. Similar code can be found on a discussion on StackOverflow regarding how to encrypt a string in .NET.

MemoryStream memoryStream = new MemoryStream();

CryptoStream cryptoStream = new CryptoStream(memoryStream, crypt, CryptoStreamMode.Write);

byte[] plainBytes = Encoding.ASCII.GetBytes(textToEncrypt);

// Encrypt the input textToEncrypt string
cryptoStream.Write(textToEncrypt, 0, plainBytes.Length);

// Complete the encryption process
cryptoStream.FlushFinalBlock();

// Convert the encrypted data from a MemoryStream to a byte array
byte[] cipherBytes = memoryStream.ToArray();

memoryStream.Close();
cryptoStream.Close();

// Convert the encrypted byte array to a base64 encoded string
string cipherText = Convert.ToBase64String(cipherBytes, 0, cipherBytes.Length);

Finally, we get the encrypted data as stored in cipherText.

Yup, it is quite straight-forward, right? =)

Entertainment Connected to Android

GCL Project + Android + OneDrive

It has been two months since I completed Entertainment Connect for Windows 8 platform. Entertainment Connect is an application that is able to play those MP3 and MP4 media files stored in your Microsoft OneDrive storage.

Soon after I completed the application for Windows, I found out that more and more of my family and friends were buying Android phones. Thus, I decided to build another version of Entertainment Connect for Android.

Entertainment Connect is now available on Android devices!
Entertainment Connect is now available on Android devices!

Today, I would like to share what I had learnt in developing my first personal Android app which makes use of Microsoft Live SDK for Android.

New IDE: Android Studio

I have been using Eclipse for Android app development in my work. Coding with Eclipse is not easy. Luckily, Google just released Android Studio, an official IDE built specifically for Android with much powerful GUI designer. In addition, due to the fact that Google encourages developers to migrate to Android Studio, I decided to try it out.

Android Studio with the login page of Entertainment Connect.
Android Studio with the login page of Entertainment Connect.

Working with Microsoft Live SDK

Yesterday, I just received notifications from Live SDK Github saying that the team was going to support and migrate to Android Studio. Finally. When I started this project, the Live SDK only supports Eclipse ADT.

It is very easy to include Live SDK to the project in Android Studio. Firstly, I need to download the Live SDK. Just download the whole project via ZIP is enough. The project consists of some useful samples which teach us how to properly use the SDK.

Secondly, I need to add new module under Project Structure.

Add new module in Project Structure.
Add new module in Project Structure.

Thirdly, I just choose the “Import Existing Project” option which will import the Eclipse project (Live SDK) as a module.

Import existing Eclipse project as module.
Import existing Eclipse project as module.

Finally, to make my application being able to use the Live SDK, I need to create introduce a module dependency to my app module, as shown in the screenshot below.

Introduce module dependency between app and src (Live SDK).
Introduce module dependency between app and src (Live SDK).

That’s all. If you would like to know more details about adding SDK in Android Studio, please checkout a post in StackOverflow about the import of Facebook SDK.

Can It Be More Complicated?

When I did Entertainment Connect for Windows 8 using WinJS, to create a media player, I basically just used the following codes.

var playerContainer = document.getElementById('playerContainer');
videoPlayer = document.createElement('video');
videoPlayer.id = videoStaticUrl;
videoPlayer.controls = "controls";
var videoSource = document.createElement('source');
videoSource.src = videoUrl;
videoSource.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
videoPlayer.appendChild(videoSource);
playerContainer.appendChild(videoPlayer);

With these few lines of code, I can already get a working media player with all the controls, such as play, pause, progress bar, etc.

However, this is not the case in Android app development. I am using VideoView. Hence, I also need to build my own play/pause functions and progress bar.

Also, I realized there was a bug if I switched from playing video file to audio file on VideoView. The image part of the previous video will stay even though the audio starts playing already. Hence, I added the following few lines of code to reset the background image of the VideoView so that the image of previous video will be “erased”.

videoPlayer.setBackgroundColor(Color.TRANSPARENT);
if (availableMedia.get(position).getmMediaFileName().toLowerCase().endsWith(".mp3")) {
    videoPlayer.setBackgroundColor(Color.BLACK);
}

Loading the thumbnail of media from OneDrive is also a headache in Android.

In Windows 8 app, after adding the items returned from Live SDK to a collection, I can easily bind the items to the template easily. After that, the thumbnails will be automatically shown on the screen smoothly.

<!-- Template of the list items to show available music/videos -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="mediumListIconTextItem">
        <img onerror="this.src='/images/default-video-preview.png';" class="mediumListIconTextItem-Image" data-win-bind="src : picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: name"></h4>
            <h6 data-win-bind="innerText: duration"></h6>
        </div>
    </div>
</div>

In Android, I have to create a background worker to retrieve the thumbnail with the following code. Then sometime when I scroll the list, the thumbnail won’t be updated immediately. Also, I need to use some tricks to make sure the correct images are displayed on the list view.

URL thumbnailUrl = new URL(imageView.getTag().toString());
HttpsURLConnection imageConnection = (HttpsURLConnection) thumbnailUrl.openConnection();
imageConnection.setDoInput(true);
imageConnection.connect();
InputStream inputStreamOfImage = imageConnection.getInputStream();
return BitmapFactory.decodeStream(inputStreamOfImage);

Building Android App Is Fun

Yes, it is fun. However, it’s slower than Windows 8 app development. It’s just too bad that not a lot of my friends really go Windows Store to download desktop apps. So I have no choice but to build Android version of my app also.

I will try to publish Entertainment Connect to Google Play soon after I have fixed my debit card issue. Currently, I still encounter problems on paying developer registration fee with Google Wallet. Oh well.

Meanwhile, feel free to read rest of Entertainment Connect (Android) code on Github: https://github.com/goh-chunlin/EntertainmentConnectAndroid.

Entertainment Connect (Android) GitHub Banner

JBoss Workshop and My YouTube RePlayer

I saw a Facebook post announcing the first JBoss workshop in Singapore. However, since I had meeting overseas at that time, I couldn’t attend the event. Fortunately, my good friend, Wai Hong, who is also interested in Java programming decided to attend the workshop as well. After the workshop, he shared with me the notes so that I could learn it myself also. Thus, here I’d like to thank Wai Hong for his kindness. =D

JBoss on Fedora Facebook Page
The first JBoss Workshop in Singapore!

In this post, I want to share my JBoss learning journey after going through the notes, online tutorials, and online forums. Meanwhile, I also developed a new app, My YouTube RePlayer, and then deployed it on OpenShift, the Red Hat cloud hosting service, during the long weekend.

Set Up JBoss Developer Studio

In order to build web applications and then to publish them easily to the OpenShift, I choose to use the recommended IDE in the workshop, the JBoss Developer Studio 6.0.0.GA (JBDS).

JBDS can be downloaded as a standalone version at https://devstudio.jboss.com/download/6.x.html (Note: The Java Development Kit (JDK) needs to be installed first).

In the beginning of the installation, there are short introduction and the End User License Agreement. Please spend some time to read it.

JBoss Developer Studio Introduction
Let’s get started with JBDS installation.

The next step will be selecting the installation path. I guess there is no need to put a screenshot for this?

After choosing the installation path, there will be an option to choose Java VM. So, the directory chosen will be the jre directory in the place Java is installed on the PC.

Select Java VM
Select the Java Virtual Machine.

The next step will be “Select Platforms and Servers” which can be skipped because this part will be done in later stage.

At the end of the installation, if everything goes well, there will be a message saying “Installation has been completed successfully” in Step 9, which is also the last step. That means JBDS can be used now.

Launch JBoss Developer Studio

JBDS is almost like Eclipse. Well, this is because it includes not only the web development tools, but also Eclipse.

Launch JBoss Developer Studio
Hello, JBDS!

In the workshop, a quickstart project sample called kitchensink-html5-mobile is used. Due to the fact that I was following the workshop tutorial, I ended up using it to build my app, My YouTube RePlayer, eventually.

Quickstart
Choose the kitchensink-html5-mobile sample project as starting point.

Under the “Requirements” section, there are four items. On my PC, three of the plugins were found. Only the JBoss Enterprise Application Platoform 6 or JBoss Application Server 7.1 was missing. I thus installed the JBoss Application Server 7.1 which was given by Wai Hong together with his notes. I think it can also be downloaded in the “Download and Install…” section.

Install Runtime
Download and install the JBoss Application Server 7.1.

After the runtime is added, just click on the “Finish” button and the project will be imported.

Once a message saying “‘kitchensink-html5-mobile’ Project is now ready” appears, that means everything has been done correctly so far. Yesh!

Project Ready
The project is now ready!

Deploy to OpenShift

I decided to use the sample project as a template to build my app, My YouTube RePlayer.

Before deploying to the cloud, I needed to test my app on local. To do that, firstly, right-click on the project folder in the “Project Explorer” window and then choose “Run As -> Maven Install” to build the project. Secondly, right-click on the project folder again and then choose “Run As -> Run on Server” to deploy on a local JBoss application server. Finally, the app will appears in the browser nicely.

After testing on localhost, it is time to deploy the app to the cloud. First thing to do is to go back to the JBoss Central tab and click on the “OpenShift Application” button.

Create OpenShift Application
Click on the “OpenShift Application” button to start setting up the app on the cloud server.

Then there will be a window popup asking for user credentials to login to the OpenShift. Before the workshop, I already registered for a free OpenShift account at the OpenShift website.

The next step will be naming the application. The naming is very important because both the application name and OpenShift username will appear in the URL of the app on OpenShift in the following format: <application name>-<username>.rhcloud.com.

Choose Application Type
Choose jbossas-7 under the application type option.

For the “Type” drop-down list, I chose jbossas-7.

In the next window, I setup the project for the new OpenShift application. Due to the fact that I just would like to deploy my existing project, I unchecked the “Create a new project” checkbox and browsed to my modified sample project folder.

Use Existing Project Instead of New Project
Choose to use existing project instead of create a new project on OpenShift.

After having all these done, I reached the step where I needed to add SSH key to OpenShift account for authentication purpose. I first clicked on the “SSH2 Preferences” link.

SSH Keys Wizard and SSH2 Preferences Links
Click on the SSH2 Preferences link.

As I did not yet have an SSH key, I had to click on the “Generate RSA Key…” button to generate the key under the “Key Management” tab of the popped out window. After the key was generated, I clicked on the “Save Private Key…” button to save the private key for later use when publishing the app to OpenShift. It is recommended to have  passphrase set, unless you also like to live dangerously.

SSH2 Key Management
The place to generate RSA key.
Meme: I also like to live dangerously
Not enter any passphrase?

After the private key is saved, the public key also needs to be taken care of. The generated public key should be copied to clipboard (or paste it somewhere for later use). This is because after the keys are generated, the public key has to be added through the “SSH Keys wizard”. This is to setup the authentication between the local PC and the remote OpenShift server.

SSH Keys Wizard and SSH2 Preferences Links
Click on the SSH Keys Wizard link.

Once everything is done, click on the “Finish” button.

Now, it is time to publish the app. To do so, right-click on the OpenShift server item in the “Servers” tab and then choose “Publish”. That’s all.

This is how I published my new app My YouTube RePlayer.

Publish Project
Publish the project and deploy it on OpenShift.

My YouTube RePlayer

So, what is My YouTube RePlayer that I built in the project above?

I love listening to music and thus I like YouTube as well. However, there is a feature that is still not yet found on YouTube website. The auto replay. To solve this problem, I have been working on several versions of YouTube Re-Player since 2009. Some are web applications and some are desktop applications.

My YouTube RePlayer (GCL Project 2013)
Playing a well done unofficial mix of “Date a Live” done by DaRk5nAk3 on My YouTube RePlayer.

In the beginning, the YouTube Re-Player that I built is very simple. I developed it after I attended the Google DevFest 2008 in Singapore. However, I never published it online. Soon after that, I got a chance to attend my friend’s workshop on Windows Presentation Foundation (WPF) in National University of Singapore. I realized that WPF app was very cool. Thus, I went to build another desktop version of YouTube Re-Player in WPF. Before I graduated, I moved on to build another app that can auto-replay not only online YouTube videos, but also FLV, MP3 and MP4 stored in local PC using JW Player.

This time, I am using the HTML5 technology in my new YouTube Re-Player app. Instead of using database, I directly use the available web storage to store the video ids (YouTube has unique id assigned to each online YouTube video). However, I think it is still good to have a database so that the data won’t be just stored locally on user’s browser and thus can be synced over different PCs with the same login.

Thus, although the workshop is more on building a Java web application, I end up doing my own HTML 5 application. Haha. Oh well, see if I got time to continue this project next time.

Now, just start creating your RePlayer list now with your favourite YouTube music videos at My YouTube RePlayer: http://replayer-chunlin.rhcloud.com! =)