Monetizing your mobile apps using IBM Worklight and Ad networks - Part 2

In part 1 of this article, we discussed how to leverage ad networks to monetize your apps by showing targeted advertisements through simple tweaks using the ad network SDKs.

Another, relatively less explored way of advertising when you do not want to go through the ad networks or just want to use your app to advertise your own business, is to use IBM Worklight adapters and push notifications.

What are Worklight adapters? An Adapter is a transport layer used by the Worklight Platform to connect to various back-end systems. Worklight supports SQL and HTTP adapters out of the box, which means you can also do RESTful operations using the adapter.

Some ways in which you can use adapters are:

1. The simplest way an adapter can be used to retrieve ads is to create a UI element on a page in your application and render this UI element using the data returned from an adapter, which can fetch advertisements from a back-end enterprise database. For example, if you're working with an android app, create a web view using height as "wrap_content". You can also use other UI elements such as Gallery for images or layouts. And then call your adapter to fetch the ad-related data to be rendered in the UI element.
2. Use two or more worklight adapters to mashup data and display targetted advertisement. Eg: Get the city from a page where the user has to select his city -> use an adapter to query a database to fetch a city ID -> use another adapter which can fetch ads related to that city ID from another data source or application. The worklight city weather demo app shown below is a great example of how such a mashup can be done. Read the Worklight mashup tutorial to learn more.

Adapters can be combined with push notifications to yield yet another way of showing ads. How can this be done? An adapter can listen to an event source and push advertisements as notifications through the app store mediator (Google, Apple). These notifications can be in the form of a notification dialog or a badge. (A badge is a small notification which appears on the corner of the application icon - think facebook mobile app which shows notifications and message alerts right on the icon). The worklight server comes with a browser-based console that can be easily used to dispatch notifications to all devices that have the app installed and subscribed to the notifications.These ads are nice when a user has installed the app and subscribed to the notifications, although they don't provide a very powerful way of in-app advertising, which can be done using ad network integration or adapters. A good example of push notifications is special offers that your business rolls out from time to time. Eg: Christmas Offer - Upgrade to the full version of the app at just 49c. Push notifications give you the power to broadcast ads whenever you want to, thus customizing them according to the needs of your business. The figure below shows how the worklight push mechanism works. 

Push notifications can be used in other ways as well. You can  use them to notify users of new versions or upgrades of the app as soon as a build becomes available. This method truly combines the power of effective lifecycle management of mobile apps with the Worklight builds. This even works in the context of enterprise apps where the primary users of the app are the employees themselves. Eg: if you're using IBM Rational Team Concert (RTC) and you build your app using the Jazz team builds, you can create an adapter that listens to the Jazz server  (or an app store) and as soon as a new build of the app is available, automatically sends push notifs to all devices with the app to upgrade to latest version. Additionally, RTC source control can help in modularizing the adapters into components, so that different departments/units in the company can maintain their own components independently of the apps and yet support an app which is used across departments/units.

Note: To send push notifications to Android devices, you will need to use Android Cloud-to-Device Messaging (C2DM). You need a valid Gmail account to register to Google’s C2DM service at http://code.google.com/android/c2dm/signup.html. To send push notifications to iOS devices, you will need to use Apple Push Notifications Service (APNS).

There are also other powerful tools that can help in making sure that the ads you render, either through ad networks or adapters have a look and feel of your app, and don't look forcefully shoved in. While you cannot control the way the ad will be shown, because they're creatives of a third-party, you can ensure that the UI widget in which the ad appears matches your app's look and feel. You can add custom style sheets to the UI elements if you're using say, the Javascript SDK of InMobi which integrates directly with hybrid/ mobile web apps. You can even use tools such as IBM Rational Application Developer which provide WYSIWYG editing for commonly used UI toolkits such as Dojo mobile.

So join the mobile bandwagon and start making money from your apps!

Catch me at IBM Innovate 2012, and hopefully not by the collar! ;)

Monetizing your mobile apps using IBM Worklight and Ad networks - Part 1

While mobile has become a platform that can no longer be ignored by businesses and developers alike and efforts are on way almost in all industry sectors to leverage this platform, it is silently becoming one of the best marketing and advertising platform of our times. Why? With 300,000+ apps and 10 billion downloads in the last 3 years alone, people are spending ever-increasing amounts of time on their smartphones. The mobile revolution has been much faster than the PC revolution in its reach and adoption. "Mobile media consumption is growing fast, as people worldwide are now spending more time on their mobile devices than watching TV. In the U.S., people are spending about 142 minutes a day on their devices, compared to 135 minutes for TV and 96 minutes on PCs, making mobile the primary media consumption channel in the nation.", says InMobi's Anne Frisbie. An infographic I stumbled upon recently has some even more convincing numbers. Click on the image below to see the complete infographic.

That being said, how does an application developer or an enterprise show targeted ads to consumers or clients? The more popular approach is to incorporate ad banners that can be used to show ads from a mobile ad network such as Google AdMob or InMobi. What are mobile ad networks? They're agencies that purchase ads from companies who want to promote their products on mobile apps. An app developer, also known as a publisher, gets paid on different pricing models if he agrees to show those ads on his app, using the SDKs or services provided by the ad networks. You can read more about the different kinds of ad networks here. 


While its relatively easy to use these SDKs in native applications, its still not straightforward to do so in a hybrid or mobile web application, which are becoming more popular with the cross-platform advantage they offer. So if I'm developing, say, a hybrid app, how do I use say, the Google AdMob SDK, which is primarily for an Android app? IBM Worklight, part of the IBM Mobile Foundation is a powerful development platform which allows you to do this easily. Here are some steps that outline how native ad SDKs can be used along with a hybrid app:


1. Create a Worklight project, adding all the common web code to the 'common' folder and overriding Android specific behavior in the 'android' folder by creating a new Android environment. If you're new to Worklight, you can read the Worklight tutorials to learn how to work with a Worklight project.

2. Download the Google AdMob SDK for Android.

3. Add the SDK JAR to the android>native>libs folder.

4. Declare com.google.ads.AdActivity in AndroidManifest.xml located in the android>native folder.

5. Setup the required network permissions(INTERNET and ACCESS_NETWORK) in the AndroidManifest.

6. Now navigate to android>native>res>layout>main.xml and open it in the xml view. You will see a single WebView declared in the xml. All you need to do is add an AdView to the layout right above the WebView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >    
     <com.google.ads.AdView android:id="@+id/adView"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         ads:adUnitId="MY_AD_UNIT_ID"
                         ads:adSize="BANNER"
                         ads:testDevices="TEST_EMULATOR, TEST_DEVICE_ID"
                         ads:loadAdOnCreate="true"/>

     <WebView android:id="@+id/appView"
     android:layout_height="wrap_content"
     android:layout_width="fill_parent"
     />

</LinearLayout>

Voila! You have your add banner in the application. An alternate way of doing this would be to first generate the Android project from the Worklight project by using "Build Environment and Deploy" option, and then modify the main.xml in the native Android project using the nice UI.

Any native code for the ad banner such as ad listeners etc. can be added to the Android activity class which references the main.xml or any other layout where the ad was added. For example:

public class HelloWorklight extends WLDroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       super.loadUrl(getWebMainFilePath());
    }        
}

In the same fashion, you can add Interstitial ads by combining native and web pages in the Worklight project. Also, you can add ads into iOS/ Blackberry/ Other apps using the other SDKs provided by Google AdMob, InMobi and other networks.

In the part two of this post, I'll discuss how to use Worklight adapters and push notifications to render ads for your own business through your database or other data sources.

Agile Development of mobile applications using IBM Rational Team Concert and Phonegap for Android, iOS and others

In earlier articles - Developing applications for Android™ using IBM Rational Team Concert in an agile way and Developing applications for Android™ using IBM Rational Team Concert andRational Rhapsody in an agile way we saw how to leverage the power of planning, collaboration, process, source control, build management, etc that IBM Rational Team Concert (RTC) has to offer, to develop and manage Android applications in a team working across geographies and across different platforms. We also saw how a team can model the application, specify UML class diagrams, use case diagrams, and link them with the requirements through Rational Rhapsody. The buck does not stop here. In a world where there are numerous different platforms such as iOS, Windows Mobile, Android, Meego, Blackberry, etc, how does a development team create applications that work seamlessly across different devices supporting different platforms? The brute force approach, ofcourse, is to write fresh code for each platform and then test and manage the application differently for each device or platform configuration. And as it sounds, this approach is not at all scalable and requires immense investment of resources – time, people and money. The other confounding problem that mobile developers can typically come across is how to glue together native and web components into a single mobile application(hybrid application). The way out of this conundrum is offered by new, open source technologies such as PhoneGap.

In this article, we explore what is PhoneGap and how does one use it. We then see, with the help of a demo, how a team can easily develop, test and maintain a cross-platform application working on Rational Team Concert's Eclipse Client and using PhoneGap APIs. This is facilitated by the MDS Applaud PhoneGap Eclipse plugin.

---

About PhoneGap

According to the website, "PhoneGap is an open source solution for building cross-platform mobile apps with modern, standards-based Web technologies. Based on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript."

The definition itself does not make things very clear though. Let us try understand a bit more. So today, suppose you have a web application that you want to deploy on multiple platform, say Android, iPhone, etc. In this app, you want to use one or more of the platform services to obtain some kind of data or carry out some kind of processing. Lets take, for example, an application that lets you invite friends to a movie as soon as you book a movie ticket. The app lets you select which friends to invite directly from your phone's contacts book. That means, if you're the developer of such an app, you'll most probably have to deal with consuming the platform's contact book using the phone APIs, for doing which, each platform would obviously have its own different ways. So there are 2 problems here:

1) How can you query the platform's contact book from within your web application which is being written in javascript and has no knowledge of the platform's APIs.
2) How can you do so in a platform agnostic way, so that your web app works not just on Android but also on iPhone, notwithstanding the different ways of using the contacts book in both.

PhoneGap aspires to be the answer to both of the above questions, and also allows creation of hybrid applications, consisting of both native and web components. How? It provides APIs which abstract the platform's contact book for you, so that you only deal with the PhoneGap API and let PhoneGap do the rest of the magic for you.

---

Download and installation

1) OS: Windows x86 / Linux x86 .
2) IBM Rational Team Concert: Download/buy from RTC downloads page. Note that if you're using an existing Eclipse installation to install RTC, make sure you have Eclipse 3.5 or lower (Eclipse 3.6 is not yet supported for Android development). RTC can also be installed directly on Eclipse 3.5.x (see http://jazz.net/library/techtip/384).

3) Android SDK: Download the SDK from Android website - http://developer.android.com/sdk/index.html.

4) Android Development Tools(ADT): This is an eclipse plugin- the equivalent of JDT(Java Development Tools)- for Android Development. ADT can be downloaded and installed using instructions given at http://developer.android.com/sdk/eclipse-adt.html. Please follow the detailed instructions on this page for installing the ADT plugin, and also for setting the location of Android SDK in Eclipse.

5) It is a good idea to read through the following step by step guide to set up RTC and prepare it for Android Development: http://jazzpractices.wordpress.com/2010/08/10/how-to-set-up-rtc-for-android-development/.

Installing PhoneGap

Refer to my earlier blogpost on developing Phonegap applications using Eclipse to read about how to install Phonegap on the RTC Eclipse client.

*Note: You can similarly develop Windows mobile applications using RTC's Visual Studio client.

---

Creating a PhoneGap Android project

Follow the steps below to create a hello world PhoneGap Android application:

1. Create a new PhoneGap project by clicking on the PhoneGap command you see on the coolbar.
   
2. If you don't have the source code for PhoneGap, check "Use Built-in PhoneGap" on the project wizard
   
3. Click Next and create the new Android project in the Android project wizard.
   
4. Launch the new application as an Android application and you will get an application as shown below.
   
   
   
   

(Note: For those who do not have the PhoneGap plugin for Eclipse, you can also simply create an Android project, making sure that the android main activity class extends PhoneGap's DroidGap class instead of Activity class. Make sure you add "phonegap.jar" as an external library to the build path.) 

 

You see that a PhoneGap app is nothing but an android app with the main Activity class extending PhoneGap's DroidGap class and it's onCreate() method loading an HTML page instead of performing any native functionality. You can replace this HTML page by one of your own choice in the assets/www folder. Check out this website for some good examples. Similar applications can also be created on other platforms using the PhoneGap classes specific to that platform. The javascript code can be directly re-used.

---

The Demo

The demo showcases how a distributed team working on a cross-platform, hybrid mobile application can leverage PhoneGap APIs, and also the functionality provided by RTC through the complete lifecycle of the application, right from planning to implementation to design and testing, and even defect tracking.
In the demo, the application to be developed has a native activity to start with, which displays a list of all phone contacts. Clicking a particular contact displays the contact details in another native activity and provides a button to send an email to that contact. Clicking the button launches a web based email client (this is a PhoneGap activity), which has an option to cc more contacts from the phone's contact book. This makes use of the PhoneGap contacts API to fetch a list of the phone contacts from the web based activity. 
 
Check out the video below:

With the recent release of the Rational's Jazz based solution for Application Lifecycle Management, also called Collaborative Lifecycle Management or CLM, it is possible to do much more by integrating multiple tools with RTC. To see Rational Team Concert and CLM live in action, do visit IBM Rational Innovate India 2011, Bangalore. You can catch me there at the RTC solutions center. Also, if you're interested in building JavaME applications, you can also read up my jazz.net article - Developing Java ME applications using Rational Team Concert inan agile way to see how to do so using RTC.

---

For more information

• Android Developer website
  
• Getting started with Rational Team Concert
  
• Developing Android applications using Eclipse
  
• Using PhoneGap in Eclipse to develop Android applications
  
• PhoneGap Android Eclipse quick start 
  
• Rational Solution for Android Mobile Application Development 
      

Android is a trademark of Google Inc. Use of this trademark is subject to Google Permissions.

JazzHub for University - host Rational Team Concert projects on the cloud

IBM Rational recently launched their cloud based offering - JazzHub - for hosting research projects using IBM Rational Team Concert. JazzHub is a free, public, hosting hub for the open development of academic research and classroom projects. Dan Griffin, on the Rational Executive blog, says

With JazzHub, professors, students, and academic researchers will be able to create new collaborative programming projects online or join a project they were invited to - all through a SaaS model with no server install required.

A lot of blogs and articles out there describe this new offering. However, for an engineering students, the terms are not exactly easy to understand, since most of it is industry jargon. Also, if one doesn't know about Rational Team Concert, the whole idea behind JazzHub is lost. So let me explain how the two connect.

Software developers mostly need an IDE to help in tasks such as writing code, compiling, running and debugging projects. However, often when development is done in a team, it becomes cumbersome to share code, work simultaneously on a single piece of code and merge it with relevant changes later, track the work being done, plan who will do what, and in what time frame, keep a track on the work being done by the team members in real time. Many times, developers use third party tools along with an IDE, which may not integrate too well and may just be a stop gap solution.

IBM Rational Team Concert (RTC) is a software development tool that brings together multiple tools that a software developer, working in a team, typically needs into one single IDE. It is built on the Eclipse platform and has two IDE's - one each for Eclipse and Visual Studio, to cater to a developer's need.  With RTC, it becomes easy to work in a team, even if the members are located in different geographies. It even has its own version control system that helps team members to easily share and work on the project source code. RTC also has provisions for project planning and using software models such as the agile model, waterfall model, iterative model, etc. depending on the needs and what stage a project is on. Such a software will, thus, be immensely helpful for students and professors working on research projects. Professors can easily administer and evaluate the project and students can work on their own areas without spending lots of time on trivial tasks such as merging code changes. See the Ted developer videos here for more:

Since RTC helps one share source code and project work items, etc., it needs to have a server installed. The RTC folks understand that the setup for the server is not very trivial and hence, JazzHub, a cloud based offering, makes it easy for students to just get started (for free!) without the hassles of a server.

We are travelling far and wide to educate students about the immense benefits of this new offering. If you are interested to have us organize a workshop about RTC and JazzHub at your college, feel free to contact me ( or drop a comment here) and we'll work out a plan!

To know more about JazzHub, be there at Innovate 2011, Bangalore. If you're a student, you can also win free passes to Innovate by blogging or tweeting about rational products (use hashtag #innovateindia).