Kasun's Codes

Friday, July 17, 2015

Android: Extract HTML image element using Jsoup

I was using json service to get data from a certain web site. But the problem was it didn't give all the information I wanted. So I decided to extract elements manually from the site. Here I demonstrate how to get image src from a web site.

Why Jsoup?

Jsoup is a java library which support to extract and manipulate HTML elements. We can use this library parse HTML in android. The specialty is that, jsoup allows you to extract the info instead of rendering it.

Setup the android project

Insert following code to your grandle.build file and sync the project to add the jsoup library to android workplace.

1	compile 'org.jsoup:jsoup:1.7.3'

Create the app

First of all you have to identify what exactly do you want to extract from the web site. If you are using google chrome simple press F12 to open devTool, in the Element find the HTML view of the web page you want. Take some time and identify right elements. I'm gonna extract img src from the "div.post-thumbnail".

Add these lines to onCreate.

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //insert your URL here
        url="http://cyberpanhinda.com/category/%E0%B6%B1%E0%B7%80%E0%B6%9A%E0%B6%AD%E0%B7%8F/";
        (new getURL()).execute(new String[]{url});
    }

Here I have used AsyncTask to pick up HTML elements in background. If you use the UIThread to execute this jsoup, no other work cannot be done in the meanwhile.And its leads to bad user experience because user has to wait until the task is finished.

public class getURL extends AsyncTask<String, Void, String> {
    StringBuffer buffer = new StringBuffer();
    @Override
    protected String doInBackground(String... params) {
        try {
            Document doc = Jsoup.connect(params[0]).get();
            buffer.append(doc.title() + "\n");
            // select element from dev class="post-thumbnail"
            Elements topics = doc.select("div.post-thumbnail");
            buffer.append("Topics list \n");
            for (Element topic : topics) {
                buffer.append(topic.select("img[src]").attr("src") + "\n");
                // "img[src]" - search for every img tags and "attr" method return the attribute
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return buffer.toString();
    }

    @Override
    protected void onPostExecute(String s) {
        super.onPostExecute(s);
        Log.v("Extracted:", s);
    }
}

Friday, March 20, 2015

Cordova Geofencing Plugin

This is my 2nd year of the campus life. I have learned several programming language and this is the time to make use of it. And this is for a new begging.

luckily, I've to complete industry based software project in this semester. I could find a opportunity from Virtusa Pvt. Ltd which is a great place for software engineers in Sri Lanaka.

I'm requested to create corodova geofencing plugin and implementation of the plugin by creating a application.

Why Cordova

Cordova is a cross-platform mobile app development environment. It's actually easy to use this platform because all you need to have is some understanding about JavaScript, HTML and CSS. Although I uses java script for coding, Cordova provide lot of plugins to access native features of the device. If I want to access camera feature of the device, I just have to add camera plugin to my project and code using JavaScript. Piece of cake...:D

I believe, Cordova is the next big thing in mobile app development.

Geofencing Plugin

This plugin provide geofencing capabilities such as,

Add/remove geofences
notify if user is entered or exit from geofence

I decided to develop plugin for android platform first. So I can use android Geofencing API to implement plugin. Basically, this plugin provide access to call prewritten android geofencing method s from java script.

Lest's get started...:)