Jumat, 17 Agustus 2012

Belajar YQL

YQL adalah singkatan dari Yahoo Query Language merupakan tool yang dipastikan akan dapat mempercepat penyelesaian pekerjaan pada web development. Ada banyak sekali web apps dan web service yang ada saat ini dan masing-masing memiliki API yang mau tidak mau harus dipelajari untuk dapat menggunakannya pada project yang kita buat. Dengan YQL kita tidak perlu lagi mempelajari satu persatu API tersebut, cukup dengan satu bahasa YQL maka semua akan terselesaikan dengan mudah.

Bagaimana Menggunakannya?

Tampilan console untuk YQL adalah seperti ini, kamu dapat mengaksesnya di http://developer.yahoo.com/yql/console/:


disisi kanan kamu bisa memilih "table" dalam "database". Contoh query akan muncul di kotak statement. Dibawah kotak statement akan muncul data hasil dari query baik dalam format xml atau json. Sekarang kita coba query untuk mengambil data dari feed pada alamat web tertentu:

select title from rss where url="http://rss.news.yahoo.com/rss/topstories"

Penggunaan query tersebut akan menghasilkan item terbaru dalam feed Yahoo News Top Stories. Kemudian kamu mungkin berpikir bahwa YQL hanya untuk situs-situs Yahoo saja? Jawabnya adalah "tidak". Klik "Show Community Tables" di sisi kanan YQL Console dan kamu akan menemukan banyak "database" dari Netflix, Github, Twitter, dsb.

Membaca Tweet Terbaru dari Twitter

Pada umumnya YQL digunakan dengan cURL (baca: see URL), tapi dengan Javascript saja sebenarnya kita sudah dapat menggunakan YQL. Pada kasus kita ini yaitu membaca Tweet terbaru dari Twitter akan menggunakan cURL di PHP. URL yang digunakan berasal dari hasil query yang dilakukan di YQL Console di bagian THE REST QUERY.

// YQL
$screen_name = 'SECRETsongjieun'; // ubah disini!
$query = "SELECT * FROM twitter.user.timeline WHERE screen_name='$screen_name'";  
$url = 'https://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=' . urlencode($query);  

// cURL  
$c = curl_init();  
curl_setopt($c, CURLOPT_URL, $url);  
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);  
curl_setopt($c, CURLOPT_SSL_VERIFYPEER, FALSE);  
curl_setopt($c, CURLOPT_SSL_VERIFYHOST, FALSE);  

$rawdata = curl_exec($c);  
curl_close($c);  
$data = json_decode($rawdata);

// Tampilkan data
echo '<pre>';  
print_r($data);  
echo '</pre>';

Dari hasil print_r diatas seharusnya kamu punya bayangan kira-kira seperti apa data akan ditampilkan.  Sekarang kita buat file HTML + CSS lengkapnya, kode sebelumnya letakkan sebelum perintah HTML dan hapus yang bagian tampilkan data (tag pre)

<!DOCTYPE html>
<html>
<head>
<title><?php echo $user_name ?>'s Tweet</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="default.css" />
<!-- kode sumber: http://net.tutsplus.com/tutorials/other/an-api-for-the-web-learning-yql/
-->
</head>
<body>
<h1><?php echo $user_name ?>: Latest Tweets</h1>
<ul>
...
</ul>
</body>
</html> <?php echo $user_name ?>'s Tweet
Isi default.css:

body {  
    font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;  
    background:#ececec;  
    padding:10px;  
}  
img {  
    border:0;  
}
ul {  
    margin:0;  
    padding:0;  
    border:1px solid #474747;  
    border-radius:5px;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px;  
    background:#ccc;  
    width:50%;  
}  
li {  
    min-height:50px;  
    padding:5px;  
    list-style-type:none;  
    border-bottom:1px solid #474747;  
    border-top:1px solid #ececec;  
}  
li div {  
    padding-left:58px;  
}  
li a.img {  
    float:left;  
    padding-right:5px;  
}  
li a {  
    text-decoration: none;
color: #1D74CC;
}  
li:first-child {  
    border-radius:5px 5px 0 0;  
    -moz-border-radius:5px 5px 0 0;  
    -webkit-border-radius:5px 5px 0 0;  
}  
li:last-child {  
    border-bottom:0;  

li:hover {  
    box-shadow: 0px 0px 15px #000;  
    -moz-box-shadow: 0px 0px 15px #000;  
    -webkit-box-shadow: 0px 0px 15px #000;  
}


Nah, sekarang adalah kode perulangan untuk menampilkan Tweet, letakkan di dalam tag ul yang sudah ada:

<?php
// ambil bagian status
$status = $data->query->results->statuses->status;

// loop untuk menampilkan
for ($i = 0; $i < count($status); $i++):
$user = $status[$i]->user;
$text = $status[$i]->text;
$created = $status[$i]->created_at;
$source = $status[$i]->source;

// modify text
$text = preg_replace('/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/', '<a href="$1" target="_blank">$1</a>', $text);
$text = preg_replace('/@([a-zA-Z0-9_]+)/', '<a href="http://twitter.com/$1" target="_blank" class="username">@$1</a>', $text);

// user
$screen_name = $user->screen_name;
$name = $user->name;
$profile_image = $user->profile_image_url;
?>
<li>
<a class="img" href="http://twitter.com/<?php echo $screen_name ?>" target="_blank"><img src="<?php echo $profile_image ?>" alt="<?php echo $name ?>"></a>
<div>
<small><a href="http://twitter.com/<?php echo $screen_name ?>" target="_blank"><?php echo $screen_name ?></a> (<?php echo $name ?>) &mdash; <?php echo $created ?></small><br />
<?php echo $text ?><br />
<small><?php echo $source ?></small>
</div>
</li>
<?php
endfor
?>

Sekarang tampilan dari kode yang kita buat adalah seperti berikut:



Kesimpulan

Pada contoh diatas kita menggunakan cURL dan PHP untuk mendapatkan hasil dari Tweet di Twitter menggunakan YQL. Kamu mungkin dapat mencoba menggunakan Javascript saja untuk menghasilkan output yang sama namun yang terpenting adalah dengan YQL maka semua API yang harus kita pelajari jadi berkurang sehingga mempermudah developer dan mempercepat kerjanya.
Jika kamu ingin mendapatkan file yang digunakan pada contoh diatas dapat diunduh disini: bit.ly/NLulgU

Sumber:

Tidak ada komentar:

Posting Komentar