Sabtu, 09 September 2017

Mengambil Kutipan Ringkasan Artikel Wikipedia Dengan API (Javascript)


Saya terkesan melihat Google dengan cepatnya mengerti maksud saya. Ketika saya mengetik "nama latin kunyit", muncul banyak sekali hasil dan salah satunya yang ditempatkan paling atas adalah kutipan dari Wikipedia.

Saya terheran, bagaimana bisa teknologi crawler milik Google bisa melakukan ekstraksi data seperti itu?

Namun, setelah saya mengagali banyak informasi dari internet, tertujulah saja pada fakta mencengangkan. Ternyata Wikipedia menyediakan API yang bisa diakses tanpa batasan ataupun bayaran sepeserpun.

Contoh implementasinya adalah ketika saya ingin mengekstrak data ringkasan dan gambar mengenai Ikan Nila (Oreochromis niloticus).

https://id.wikipedia.org/w/api.php?format=jsonfm&action=query&prop=extracts|pageimages&pithumbsize=300&exintro=&explaintext=&titles=Oreochromis%20niloticus&redirects

Atau, ketika saya hendak memperoleh informasi yang berkaitan dengan flora/fauna.

https://id.wikipedia.org/w/api.php?action=query&generator=search&gsrlimit=50&gsrsearch=intitle:udang+incategory:Artikel_dengan_format_mikro_%27spesies%27&prop=revisions&rvprop=content&rvsection=0&format=jsonfm

Jika kalian ingin tahu lebih banyak mengenai fitur API Wikipeda, silahkan kunjungi:

https://www.mediawiki.org/wiki/API:Main_page

Eh, tunggu dulu. Apa gunanya Anda mempelajari hal ini? Banyak, salah satunya apabila anda ingin mempresentasikan informasi kepada user ketika mengetik kata kunci di kotak pencarian blog anda. Dengan setikit ketrampilan Javascript/JQuery, data API yang tersusun sebagai JSON dapat diinterpretasikan dan diolah dengan mudah. Berikut contoh implementasinya.

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
 $(document).ready(function() {
  $("#wiki-search").click(function(e) {
   e.preventDefault();
   var katakunci = $("#wiki-search-input").val();
   var url =  "https://id.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles="+katakunci+"&redirects&callback=?";
   $.getJSON(url ,function(data) {
    $.each(data.query.pages, function(i, item) {
     $("#wiki-title").html (item.title);
     $("#wiki-content").html (item.extract);
    });
   });
  });
 });
</script>
</head>
<body>
 <form > 
   <input type="text" id="wiki-search-input"> <button id="wiki-search"> Search!!</button>
 </form>
 <div id='wiki-title' style="font-weight:bold;"></div>
 <p id='wiki-content'></p>
 <a href="http://www.komputoo.pw">Wikipedia Search Widget</a>
</body>
</html>

Agar API dapat diakses melalui client dengan JS, URL API harus disisipkan "&callback=?", agar server wikipedia menyetujui permintaan kita. Jika implementasi ini dilakukan dari server-side, hal tersebut boleh diabaikan saja.

Saya juga sudah menyisipkan contoh implementasi kode di bawah ini untuk menunjukkan bahwa kode bekerja dengan baik. Silahkan dicoba.

### Coba ketik : kucing, macan, atau lainnya ###


### Hasilnya akan terlihat di atas ###

Kode di atas self-explained bagi yang sudah terbiasa dengan pemrograman web. Jadi apabila mungkin ada unek-unek yang perlu disampaikan, silahkan scroll ke bawah untuk berkomentar :)
Load disqus comments

0 comments