Android Web Scrapping menggunakan JSOUP

Umumnya aplikasi Android tidak bisa dipisahkan dengan API untuk mengambil data dari server. Namun demikian, ada alternatif lain yang bisa digunakan dengan teknik web scrapping.

Pada tutorial kali ini kita akan membahas penggunaan library jsoup html parser untuk membuat aplikasi android dengan teknik web scrapping.

Pada tutorial ini kita akan membuat aplikasi sederhana yaitu aplikasi yang menampilkan Jadwal Sholat yang mengambil data dari website https://jadwalsholat.org tanpa menggunakan API. Kita akan melakukan web scrapping pada web tersebut dengan menggunakan library java yaitu jsoup Java HTML Parser.

Ok, langsung saja ikuti langkah-langkahnya.

Membuat Project Baru

Buka android studio, kemudian klik new project, pilih pilihan layout pilih Layout Empty, kemudian beri nama roject dengan nama SholatScrape.

Pertama kita siapkan terlebih dahulu layout tampilan aplikasi kita. Pada aplikasi ini kita membutuhkan satu buah ListView untuk menampilkan daftar jadwal sholat. Layout yang kita gunakan adalah LinearLayout.

Buka file activity_main.xml, sesuaikan kodenya seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Selanjutnya tambahkan satu file layout xml untuk menampilkan detail dari ListView. Klik New -> XML ->Layout XML File, kemudian berikan nama filenya dengan nama item_row.xml seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="@dimen/padding"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_label"
        android:hint="Label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_waktu"
        android:textColor="@color/colorAccent"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:hint="Waktu" />

</RelativeLayout>

Menyiapkan Data

Selanjutnya kita perlu membuat class data untuk menampung data jadwal sholat dengan atribut title dan time.

Buat Java Class dengan nama Sholat.java seperti berikut:

package id.web.koding.sholatscrape;

class Sholat {
    String title;
    String time;

    public Sholat(String title, String time) {
        this.title = title;
        this.time = time;
    }
}

Membuat ListAdapter

Karena kita menggunakan ListView, tentu kita harus menyiapkan Adapternya terlebih dahulu, disini kita akan membuat ListAdapter sederhana yang diturunkan dari ArrayAdapter.

Buat Java Class baru dengan nama ListAdapter.java seperti berikut:

package id.web.koding.sholatscrape;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import java.util.ArrayList;

public class ListAdapter extends ArrayAdapter<Sholat> {
    public ListAdapter(Context context, ArrayList<Sholat> arrSholat) {
        super(context, 0, arrSholat);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {
            convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_row, parent, false);
        }

        TextView tvLabel = convertView.findViewById(R.id.tv_label);
        TextView tvWaktu = convertView.findViewById(R.id.tv_waktu);

        Sholat sholat = getItem(position);

        tvLabel.setText(sholat.title);
        tvWaktu.setText(sholat.time);

        return convertView;
    }
}

Proses Web Scrapping

Selanjutnya kita akan lakukan web scrapping data jadwal sholat dari website https://jadwalsholat.org.

Kita akan coba lakukan scrapping halaman tersebut, yaitu halaman jadwal sholat untuk wilayah kota Bekasi dengan id_kota = 36, dengan url sebagai berikut: https://jadwalsholat.org/adzan/monthly.php?id=36

Perlu diketahui, untuk melakukan web scrapping, kita harus memahami struktur html pada web tersebut.

Nah pada kasus ini, kita akan coba mengambil data jadwal pada hari ini (yang terpilih berdasarkan hari) dengan ditandai warna yang berbeda pada tabel data. Kita bisa lihat pada data tersebut terdapat css class yang digunakan yaitu table_highlight. kita bisa lihat strukturnya seperti berikut:

<!-- XPath: /html/body/table/tbody/tr[11] -->

<tr class="table_highlight" align="center">
    <td><b>08</b></td>
    <td>04:26</td>
    <td>04:36</td>
    <td>05:56</td>
    <td>06:20</td>
    <td>11:53</td>
    <td>15:15</td>
    <td>17:46</td>
    <td>19:01</td>
</tr>

Jadi terlihat jelas yang akan kita ambil adalah data tersebut.

Membuat AsyncTaskLoader

Selanjutnya untuk memprosesnya kita memerlukan proses yang dilakukan dibelakang layar (Background process) dengan menggunakan AsyncTask.

Sebelumnya, kita membutuhkan library jsoup untuk melakukan proses html parser, untuk itu kita perlu menambahkan dependency pada file gradle. Buka file gradle (Module App) dan tambahkan dependency berikut:

dependencies {
    implementation 'org.jsoup:jsoup:1.11.3'
}

Buka file MainActivity.java, kemudian tambahkan inner class yang diturunkan dari class AsyncTask dengan nama loadData, seperti berikut:

private class loadData extends AsyncTask<Void, Void, String> {

        @Override
        protected String doInBackground(Void... voids) {
            try {
                // contoh: Ambil kota id=36 (Kota Bekasi)
                String url = "https://jadwalsholat.org/adzan/monthly.php?id=36";
                Document doc = Jsoup.connect(url).get();
                Log.d("LogScrape",doc.title());

                Elements currents = doc.select(".table_highlight");
                Log.d("CurrentScrape", currents.text());

                return currents.text();

            } catch (IOException e) {
                e.printStackTrace();
            }

            return null;
        }

        @Override
        protected void onPostExecute(String result) {
            super.onPostExecute(result);

            String[] data = result.split(" ");
            String[] keys = {"Imsyak", "Shubuh", "Terbit", "Dhuha", "Dzuhur", "Ashr", "Maghrib", "Isya"};
            int i = 1;
            for (String label : keys) {
                arrSholat.add(new Sholat(label, data[i++]));
            }

            mAdapter.notifyDataSetChanged();
        }
    }

Pada class diatas kita melakukan override pada method doInBackground() dan onPostExecute(), dinama keduanya adalah proses yang saling berkaitan yang akan bekerja secara simultan.

Pada proses diatas, kita lakukan load data html dari web dengan perintah Document doc = Jsoup.connect(url).get(); dan kemudian dilakukan parse html dengan mengambil bagian yang sudah kita tandai diatas dengan selector css .table_highlight dengan perintah Elements currents = doc.select(".table_highlight"); Selanjutnya hasilnya diproses pada method onPostExecute().

Untuk lebih jelasnya, berikut kode lengkap pada MainActivity.java.

package id.web.koding.sholatscrape;

import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ListView;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import java.io.IOException;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ArrayList<Sholat> arrSholat;
    private ListAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        arrSholat = new ArrayList<Sholat>();
        mAdapter = new ListAdapter(this, arrSholat);
        ListView lvMain = findViewById(R.id.lv_main);
        lvMain.setAdapter(mAdapter);

        new loadData().execute();
    }

    private class loadData extends AsyncTask<Void, Void, String> {

        @Override
        protected String doInBackground(Void... voids) {
            try {
                // contoh: Ambil kota id=36 (Kota Bekasi)
                String url = "https://jadwalsholat.org/adzan/monthly.php?id=36";
                Document doc = Jsoup.connect(url).get();
                Log.d("LogScrape",doc.title());

                Elements currents = doc.select(".table_highlight");
                Log.d("CurrentScrape", currents.text());

                return currents.text();

            } catch (IOException e) {
                e.printStackTrace();
            }

            return null;
        }

        @Override
        protected void onPostExecute(String result) {
            super.onPostExecute(result);

            String[] data = result.split(" ");
            String[] keys = {"Imsyak", "Shubuh", "Terbit", "Dhuha", "Dzuhur", "Ashr", "Maghrib", "Isya"};
            int i = 1;
            for (String label : keys) {
                arrSholat.add(new Sholat(label, data[i++]));
            }

            mAdapter.notifyDataSetChanged();
        }
    }
}

Menjalankan Aplikasi

Selanjutnya adalah kita jalankan aplikasinya, sehingga muncul tampilan seperti berikut:

Source code lengkap bisa diunduh di sini.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *