Membuat Program Aplikasi dengan Qt dan Memanfaatkan Graph API Facebook

Melanjutkan eksplorasi pada pemrograman, di mana saya sudah memaparkannya pada Pandalon #40 bahwa saya memilih Qt Framework sebagai sarananya. Setelah melanglang buana di jagat Google untuk mencari ilham (tutorial 😀  , akhirnya saya bisa menerapkan pengetahuan tersebut untuk belajar membuat proyek aplikasi. Dan saya rasa sudah saatnya saya berbagi pandalon untuk hal ini. Pada proyek program pertama ini saya memanfaatkan pustaka class Networking (jaringan) pada Qt Framework. Yang mana saya gunakan juga untuk belajar memanfaatkan Graph API dari Facebook. Project ini saya namakan FaceFetch, deskripsinya saya jelaskan nanti. Pemilihan Graph API Facebook ini saya ambil dengan pertimbangan bahwa saat ini saya adalah Facebooker dan situs ini masih menjadi situs web nomor 1 di dunia, atau setidaknya di Indonesia. Lebih-lebih karena penggunanya yang banyak dan relatif selalu aktif mengakses Facebook.

Selain itu, saya pernah berkeinginan untuk membuat semacam peretas untuk akun Facebook. Waktu itu saya diminta tolong untuk recover akun facebook teman tetapi gagal. Dan saya iseng-iseng googling mencari tentang hack akun facebook, dan ternyata banyak yang membahasnya dan banyak pula yang bohongan. Saya kemudian tertarik untuk meramaikan segmen ini. 🙂 Tetapi karena saya tidak punya kemampuan meretas, maka saya membuat program ‘bohongan’ yang mengambil info profil facebook seseorang. Dan sebenarnya, project ini adalah kelanjutan atau improvisasi dari Facebook Hacker v5.1 yang sudah saya tuliskan di blog saya yang lain. Project tersebut saya tujukan hanya untuk selingan (fun) dan tentunya belajar Qt juga. Dan maaf, nama project memang ‘menipu’. Tapi itu hanya nama saja lho, bukan benar-benar untuk menipu. 🙂 Untuk proyek kali ini, saya memilih nama FaceFetch untuk disesuaikan dengan maksud dan kegunaan program, yang mana program mengambil data publik dari pengguna facebook yang disediakan oleh Graph API facebook, termasuk foto profil pengguna.

Pustaka Qt Networking

Untuk Facebook Hacker v5.1 saya menggunakan Qt 5.1 sedangkan untuk FaceFetch ini saya meng-upgrade ke Qt 5.2 yang saya pasang di Kubuntu 13.04 64 bit (dan Windows 7). Class yang paling penting adalah QNetworkAccessManager yang membuat koneksi HTTP dengan metode fungsi get(). Lalu obyek ini dipakai oleh QNetworkReply yang bertugas untuk menerima respon atau balasan dari QNetworkAccessManager. Selanjutnya obyek QNetworkReply dihubungkan ke slot yang sudah dibuat. Di sini saya membuat 2 request ke Graph API, yang satu untuk mengambil info publik, dan satu lagi untuk mengambil foto profil publik. Dan setiap request dihubungkan ke slot masing-masing yang memproses balasan (reply) dari obyek QNetworkAccessManager.

void Dialog::on_tmbAmbil_clicked()
{
ui->progressBar->show();

QString fbid = ui->lineEdit->text();
if(fbid.isEmpty())
{
QMessageBox::warning(this,tr("Hey..."),tr("Lupa belum diisi ya bos?"));
ui->progressBar->hide();

}
else
{
QUrl infoDasar;
QUrl graphApi("http://graph.facebook.com/");
graphApi.setPath(QString("%1%2").arg(graphApi.path()).arg(fbid));
infoDasar = graphApi;

QNetworkRequest mintaInfo;
mintaInfo.setUrl(infoDasar);

QUrl ppPublik;
QUrlQuery userPict;
infoDasar.setPath(QString("%1%2").arg(infoDasar.path()).arg("/picture"));
ppPublik = infoDasar;

userPict.addQueryItem("width","100");
userPict.addQueryItem("height","100");
ppPublik.setQuery(userPict);

QNetworkRequest mintaGambar;
mintaGambar.setUrl(ppPublik);

QNetworkReply *terimaInfo = internet->get(mintaInfo);
connect(terimaInfo,SIGNAL(finished()), this,
        SLOT(hasilJson()),Qt::UniqueConnection);

QNetworkReply *terimaGambar = internet->get(mintaGambar);
connect(terimaGambar,SIGNAL(finished()), this,
        SLOT(redirection()),Qt::UniqueConnection);
connect(terimaGambar,SIGNAL(downloadProgress(qint64,qint64)), this,
        SLOT(progresBalas(qint64,qint64)));

}
}

Graph API Facebook

Facebook menyediakan API bagi para developer untuk mengembangkan aplikasinya dengan memanfaatkan data-data dari penggunanya. Salah satunya adalah Graph API yang menyediakan informasi pengguna. Dalam project ini saya hanya mengambil informasi publik pengguna. Sebenarnya kita bisa mendapatkan data yang lebih banyak lagi dengan menggunakan akses token. Basis Graph API ada di https://graph.facebook.com/. Dalam project ini, string yang di-input-kan ke QLineEdit akan ditambahkan di akhir basis Graph API yang nantinya dijadikan URL request oleh QNetworkRequest. String yang dimasukkan bisa berupa username facebook atau user ID facebook. Namun QLineEdit ini belum diberi validasi untuk mengecek keabsahan sting yang dimasukkan.

QJsonDocument

Data balasan Graph API berupa JSON, maka di project ini saya menggunakan QJsonDocument untuk mem-parsing data tersebut. Dan untuk foto profil, facebook menyediakan 2 pilihan apakah ingin balasan berupa JSON ataukan redirect ke gambar JPG. Di sini saya memilih yang di-redirect, dan untuk menanganinya, saya membuat slot redirection().

void Dialog::hasilJson()
{
QNetworkReply *balasan = qobject_cast<QNetworkReply*>(sender());
if(balasan->error() != QNetworkReply::NoError)
{
QMessageBox::critical(this,tr("Errorrrr..."),tr("Ada eror!\r\n")
                                             +balasan->errorString());

ui->progressBar->hide();
}
else
{
QByteArray data = balasan->readAll();
QJsonParseError err;
QJsonDocument doc = QJsonDocument::fromJson(data,&err);
QJsonObject objek = doc.object();
QJsonValue nama = objek.value("name");

QJsonValue gender = objek.value("gender");
QString kelamn;
if(gender.toString() == "male")
{
kelamn = "Laki-laki";
}
else if(gender.toString() == "female")
{
kelamn = "Perempuan";
}
else
{
kelamn = "General";
}
ui->labelNama->setText("Anda meminta info tentang\r\nNama : "
                              +nama.toString()+"\r\nGender : "+kelamn);
}
}
void Dialog::redirection()
{
QNetworkReply *dapatGambar = qobject_cast<QNetworkReply*>(sender());
if(dapatGambar->error() != QNetworkReply::NoError)
{
QMessageBox::critical(this,tr("Errorrrr..."),tr("Ada eror!\r\n")
                                 +dapatGambar->errorString());
}

int status = dapatGambar->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
if(status == 302)
{
QUrl linkPp = dapatGambar->attribute(QNetworkRequest::RedirectionTargetAttribute).toUrl();
QNetworkRequest req(linkPp);
QNetworkReply *redirReply = internet->get(req);
connect(redirReply,SIGNAL(readyRead()), this,SLOT(ambilGambar()));
dapatGambar->deleteLater();
return;
}
else if(status == 200)
{
QByteArray profPict = dapatGambar->readAll();
//profpict adl link ke gambar jika ada argumen request redirect=0

QString url = profPict.constData();
ui->labelPp->setText(url);

}
}

QPixmap::loadFromData()

Saya membuat obyek QPixmap yang dideklarasikan dalam header yang saya maksudkan agar bisa digunakan di semua scope. Saya masih belum tahu apakah ini menyalahi kaidah OOP. 🙂 Lalu dalam slot ambilGambar(), saya berikan nilai balasan foto profil ke dalam obyek ini dengan method loadFromData() dan saya tampilkan pada QLabel. Dalam beberapa kali run, saya sering mendapatkan beberapa error, antara lain “Corrupt JPEG data: premature end of data segment”, “Bogus marker length”, dll. Namun program ini belum bisa menangani error semacam itu.

void Dialog::ambilGambar()
{
QNetworkReply *rediran = qobject_cast(sender());
QByteArray gambarProf = rediran->readAll();
fotoProfil.loadFromData(gambarProf);
ui->labelPp->setPixmap(fotoProfil);
ui->progressBar->hide();

}

Unduh project

Bila tertarik untuk mempelajari project ini, silakan unduh pada https://www.dropbox.com/sh/agqschpk7ceva2r/AAB2iMWfDHQL5C3aHRvA5FjNa?dl=0 Ada juga hasil kompilasi static untuk Windows, yang saya paketkan sebagai aplikasi portable, bisa diunduh dari https://www.dropbox.com/s/btfupb7oaurqxsz/FaceFetch-beta1.zip?dl=0 Semoga bermanfaat. B-)

FaceFetch
Tampilan program
FaceFetch
Tampilan program

sumber-sumber inspirasi:

Kumpulan Tutorial C++ & Source Code Qt Framework Edisi 1 – 11

Advertisements

Published by

Badwi

A Muslim, sober, a Javanese

11 thoughts on “Membuat Program Aplikasi dengan Qt dan Memanfaatkan Graph API Facebook”

  1. Terima kasih mas, artikelnya. saya pengen belajar Qt, tp blm menemukan tutorial untuk org awam yg membahas dari dasar. targetnya sih, agar bisa membuat aplikasi database, Create, Read, Update, Delete dan menampilkan data dlm bentuk grafik. mohon masukannya.. terima kasih dan salam kenal

      1. Oh ya mas, ini ukuran blog untuk kontenya terlalu sempit 😀 bacanya agak ribet kang kalau ada codenya.

        #cumasaran

      2. sebenarnya saya sengaja pilih yang sempit mas. pertimbangannya cuma biar mata tidak terlalu capek ke kanan-kiri.. 🙂
        tapi memang ribet kalau ada kodenya ya.
        makasih sarannya, mau tak lebarin aja.

Share your idea here (markdown enabled)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s