Saturday, February 11, 2012

Introduction

You can download file project source from here.(Notice that you will need to insert AppID in url string at RestClient.java. Procedure is described in Sign up - ebay Developer Network section and Web service client section.)

We'll create simple Android app with service client for searching eBay items by a keyword. After search is completed, application will list a correct number of items with their hyperlinks to details and images.For developing applications with eBay integration, Ebay Developer Network gives a good insight in some of the products for developers. From current featured products there are 4 categories:1. Search - offers eBay finding API that enables application to search for eBay items.2. Trading - offers API for authenticated access to private eBay data3. Buying - offers eBay shopping API access to public read-only data4. Go Local - offers Milo Open API that allows developers to access local availability information from 50,000+ stores all across the country

These APIs give you a powerfull tools for developing e-commerce apps using integration with eBay web services.

The same as in previous tutorial we'll develope hybrid Android application that is using native Java code for backend logic and HTML with jQuery for UI.

Screen flow

In this sample, our application will contain two HTML pages. The first page will be search interface that has search keyword input and number input that represents a number of searched result items that will be displayed in second screen. The second screen will display search results with item titles with hyperlinks and their images.

First page - (index.html) Search page

Second page - (searchitems.html) Search results

Sign up - ebay Developer Network

In case with developing application that will use eBay services, you'll need to have some application parameters that we'll be provided to you after you sing up on developer.ebay.com web site. In order to do that:1. go on previous URL and click Join now section.2. Fill in required data and register.3. After you confirm your account, go back to web site and sign in.4. Go to My Account5. At application keys pane click Generate Keys

6. After you generate your keys you should get list of ids that will be used in your app configuration.

In this step we added webView component which will be used to display HTML pages and execute JavaScript.

Assets folder

The same as in previous tutorial we'll use jQMobi library for jQuery development. Follow next steps to set up necessary resources for UI development:1. Create directories in assets folder with following paths - assets/www/css-js and assets/www/img2. Download jQMobi and extract js libraries in assets/www/css-js/3. Store some PNG in img folder that we'll be used in search screen4. Create two empty HTML files in www directory and name them as index.html and searchitems.htmlNow your assets folder should look like this

Web service client

To establish link to eBay web service we'll need to write a client side class that is going to access eBay Finding service. In this case, we'll use REST-full eBay service and since these services are based on HTTP methods, we'll implement HTTP client to send HTTP requests to eBay service. In response, web service will send JSON object with items data as a search result.Remark: You're not limited on using REST-full services, their is also a way of using SOAP based eBay web services. In that case you'll need to use kSOAP2 project. SOAP services won't be covered in this tutorial.

First step is to create new class in your package called RestClient. Then enter this code in your class:

As we can see, this class contains single method getEbayItems that will retrieve search results. Notice in url string HTTP POST arguments. These arguments represents our web service call parameters.- In SECURITY-APPNAME you will enter your generated AppID key from Production keys section under your account at developer.ebay.com.- RESPONSE-DATA-FORMAT represents data type that web service will return in response (JSON or XML).- keywords is a search term.- and paginationInput.entriesPerPage represents item number in search result.If you set your parameters correctly, you will be able to see your JSON result when you enter this url in your web browser. In continue, we'll create simple HTTP client that will send HTTP GET request to eBay web service. In response it returns JSON result.

Main Activity class

In source of project, we'll edit Activity class that was generate when project was created. Modify your code:

1. onCreate method - This method is called at creating activity state. In this part, we'll set our layout that was previously edited (main.xml) and in WebView component will enable JavaScript execution and register JavaScript interface. Using this interface we'll be able to call JavaScript from our Java code and vice versa (see previous tutorial). In the end of this method we'll load our first page (index.html).2. loadPage method is used to load page in WebView component using page URL and loadURL is used for running HTML page and jQUery in WebView.3. callSearchService method - this method gets three arguments: term (search keyword), number (item number in search result) and callback (name of JavaScript method to be called back). All of these arguments represent input data that will be forwarded from HTML page to Java by JavaScript method that will make callSearchService method call using jsInterface. In the first part, method gets search results by calling getEbaysItems from RestClient class. After that we parse our JSON result.Basically, it re-encapsulates JSON arrays in result to get to item data. After we get our specific JSON Array with items data, we'll read their titles, image urls and url to details page. Don't get confused by replaceAll("[\"]|[\\[]|[\\]]", "") method. It is using Regex to remove redundant JSON characters - [" and "].After we store JSON parsed results in class attributes, we load second page (searchitems.html) that is going to display search results.4. getSearchedItems method - will send inner HTML with JSON prased results as an argument in callback JavaScript method in searchitems.html page.5. onKeyDown method - overrides button "Back" functionality to go to previous HTML page.

This HTML contains two input elements for input search term and select list for number of search items. JScript function sendSearchTerm reads values from input fields and sends that to Java callSearchService method.

At a page load, $(document).ready function is called and Java getSearchedItems method gets executed. From this execution getResult function is called in callback and it will load results as innerHtml to "result" div element.

Conclusion

Voila! You just created Android hybrid application with connection to eBay service.Through this tutorial I showed how to work with Android hybrid application using HTML and jQuery and how to expand Android functionality using web service clients. The purpose of this tutorial was to give some insights of working with web service clients and make your mobile apps a little more advanced.