Sunday, 4 March 2012

Manga Mobile Coding Series : Membajak mangareader.net part 2

Asyik bisa nulis lagi. Sebelumnya kita telah membahas logika dibalik teknik pembajakan Mangareader. Kali ini saya akan membahas secara teknis bagaimana implementasinya di Android.

Kembali saya ingatkan: untuk bisa mengerti dengan sepenuhnya apa yang dibahas di artikel ini, anda perlu mengenal beberapa hal yang tidak dibahas di artikel ini:
  1. DOM (Document Object Model)
  2. Manga :)
Android dapat mengunduh isi halaman HTML dengan mudah. Tetapi hasil unduhan ini adalah sebuah string panjang. Lalu bagaimana kita bisa mengeksekusi logika "temukan anak pertama dari tag ul"? Ada beberapa cara seperti berikut:
  1. Lakukan manipulasi string. Kita membuat asumsi bahwa ul ini pasti punya anak. Sehingga kita dapat mencari karakter "<" pertama yang mengawali sebuah tag HTML dan menandai karakter tersebut menjadi karakter pertama dari anak yang kita cari. Lalu kita tinggal mencari ">" yang sesuai dan menandai karakter tersebut menjadi karakter terakhir dari anak yang kita cari. Dari sini kita dapat menyalin karakter-karakter diantara karakter yang telah kita tandai tersebut dan jadilah mereka sebagai string anak pertama yang kita cari. Ada permasalahan dari sini? Banyak: sangat rentan bug dan sangat tidak fleksibel.
  2. Gunakan XML Parser.
  3. Gunakan 3rd party library untuk membuat DOM.
Saya akan membahas cara terakhir (yang kebetulan saya gunakan). Dan perlu diketahui, sebenarnya membuat DOM tidak perlu menggunakan 3rd party library karena sepertinya Android sudah memilikinya. Namun saya terlanjur menggunakan 3rd party library dan malas untuk menggantinya (maaf).

Perkenalkan Jsoup (halo Jsoup, saya Gogo), library pembuat DOM yang saya gunakan. Fitur-fitur yang bisa dilakukan oleh library ini silakan dilihat di website nya. Yang penting, si Jsoup ini menyediakan beberapa hal yang berguna untuk saya:
  1. kemampuan untuk membuat DOM
  2. kemampuan untuk memanipulasi dan mencari elemen dalam DOM
  3. kemampuan untuk mencari elemen spesifik berdasarkan tag, class, id, name, dan href atribut lainnya.
  4. kemampuan untuk mencari bapak dan anak dari suatu elemen.
Sebenarnya fungsi 2 hingga 4 adalah fitur yang wajib ada untuk sebuah library yang mengaku bisa membuat DOM, jadi fungsi utama library ini sebenarnya hanya 1.

Jadi tanpa banyak cakap, inilah kodenya:


public ArrayList downloadMangaList() {
    ArrayList mangaList = new ArrayList();
    String url = Utilities.MANGAREADER_URL + "/alphabetical";

    boolean gagal = true;
    int attempt = 0;

    while (gagal && attempt < Utilities.DOWNLOAD_ATTEMPT) {
        try {
            Log.i("Manga", "trying to connect to " + url);
            Document soup = Jsoup.connect(url).get();
            gagal = false;

            // lewat sini means berhasil konek
            Elements links = soup.select("ul[class=series_alpha]");

            for (Element link : links){
                Elements mangaLinks = link.getElementsByTag("a");
                for (Element manga : mangaLinks){
                    mangaList.add(new Manga(manga.text(), Utilities.MANGAREADER_URL + manga.attr("href")));
                }
            }

        } catch (IOException ex){
            Log.i("Manga", "" + ex.getMessage());
            ++attempt;
        }
    }

    return mangaList;
}



Kode diatas adalah contoh bagaimana saya mendapatkan kumpulan manga yang ada di Manga Reader. Yang pertama saya lakukan adalah mengunduh page www.mangareader.net/alphabetical dimana pada page itu, semua manga yang ada di Manga Reader dituliskan. Saya mengunduhnya menggunakan Jsoup.connect(url).get()agar HTML yang diunduh ini sudah terformat dengan baik oleh JSoup. Hal ini saya lakukan berkali-kali in case pengguna menggunakan koneksi yang abal-abal sehingga page HTML-nya jadi tidak terunduh.

Langkah kedua adalah pattern matching. Ya, dengan sedikit pengamatan kita dapat melihat bahwa page HTML yang dibuat oleh Manga Reader ini cukup ber-pola. Tiap manga selalu dibungkus dalam alphabet yang mengawalinya (Naruto berarti N). Dan tiap alphabet itu dibungkus dalam satu elemen HTML yaitu 
<ul> , dan selalu memiliki class=series_alpha. Gambar berikut mungkin bisa lebih menjelaskan.

      HTML dari www.mangareader.net/alphabetical
Dari sini kita tinggal mengambil semua elemen yang memiliki class=series_alpha, lalu mencari semua URL yang ada didalamnya. Cara ini tidak foolproof, tapi cukup untuk mendapatkan apa yang kita butuhkan.

That's it! Semudah itu kita "membajak" Manga Reader. Tinggal melakukan hal yang sama pada page-page yang lain dan kita dapat membuat software untuk pengunduh manga dengan mudah. Cara ini juga dapat diaplikasikan pada manga source lain seperti GoodManga, MangaHere, AnimeA dan lain-lain. Namun beberapa manga source seperti MangaStream dan Batoto sering mengganti pola menampilkan halamannya dan membuat mereka susah di-scrapping.

What do you think? Ada yang mau membantu saya membuat manga downloader dengan membuat pola-pola seperti ini?

No comments:

Post a Comment