Pernahkan kamu menggunakan aplikasi di fb seperti bermain game (poker, cityville, dsb), zodiak harian, random ayat, dsb? pasti pernah kan. Apa kamu terpikir untuk membuat sebuah aplikasi di facebook sendiri, karyamu sendiri, entah game, tebak-tebakan atau sekedar iseng berisi fotomu saja :). Kalau sudah terpikirkan lalu pasti muncul pertanyaan, "bagaimana membuatnya?", "susah tidak?".
Sebenarnya untuk membuat aplikasi yang "sesungguhnya" yang bisa diakses orang banyak, kamu perlu web hosting yang mendukung https, sebagai canvas dari aplikasi yang akan kamu buat. Untuk mendapatkannya kamu harus beli atau bisa juga menggunakan layanan hosting gratisan. Tapi jangan khawatir, intinya ada niat dulu, urusan lain belakangan, bisa diakali :D. Di tulisan ini masih belum menggunakan layanan hosting (baik bayar atau gratis) karena kita akan belajar membangun aplikasi facebook hanya di komputer lokal saja.
Untuk membuat aplikasi yang harus online seperti facebook apps agak meribetkan, biasanya dan seringkali kamu harus mengupload file editan terbaru berkali-kali hanya untuk memperbaiki sedikit kesalahan. Disamping nantinya kesulitan dalam menelusur versi aplikasi, pekerjaan edit lalu upload ke server bisa menjadi hal yang menjengkelkan dan melelahkan. Nah, di tulisan ini kita akan membuat apps di facebook yang dibangun pertama di server lokal komputer kita dulu (*tapi dapat semua fitur dari facebook), dan tentu saja setelah aplikasi selesai kita harus menguploadnya ke server agar dapat diakses oleh orang lain secara online.
Disini bahasa pemrograman yang dipakai adalah PHP. Jika kamu belum tahu apa itu PHP maka kamu perlu googling sebentar dan mencari tahu apa itu PHP, lalu buat program sederhana dengan PHP, baru balik kesini lagi :D. Singkatnya PHP adalah script (program) yang berjalan di server yang bertugas melayani request dari client. Tidak perlu mahir PHP atau jadi programmer top untuk membuat aplikasi di fb, tapi dengan pengetahuan PHP yang cukup akan dapat meringankan tugasmu dalam membangun aplikasi di facebook.
Yang kamu butuhkan untuk mengikuti cara pembuatan fb apps di tulisan ini adalah kamu harus memiliki:
1. web server yang terinstall di komputermu (aku menggunakan Apache dalam paket XAMPP), dengan PHP yang memiliki modul curl enabled.
2. akses internet pastinya,
3. dan sedikit pengetahuan PHP seperti yang aku bilang sebelumnya.
Daftarkan Aplikasi ke Facebook
Pertama kali kamu harus mendaftarkan aplikasi yang akan kamu buat ke facebook developer yaitu di https://developers.facebook.com/apps. Klik tombok Create New App. Selanjutnya di gambar berikut aku membuat aplikasi bernama "Unira Card Dev", dengan namespace "uniracarddev". Ikuti saja isiannya sesuai gambar terutama bagian Site URL, Canvas dsb.
Setelah terisi seperti itu lalu tekan Simpan Perubahan. Catatan: Harap simpan atau catat bagian App ID dan App Secret karena nilainya akan digunakan dalam aplikasi kita.
Download Facebook PHP SDK
Kamu bisa download di https://github.com/facebook/facebook-php-sdk yang berisi beberapa file PHP yang akan menyediakan bermacam fungsi untuk mengakses Facebook server API. Sebenarnya yang kamu perlukan cuma yang ada dalam folder "src" namun kamu bisa menggunakan beberapa contoh cara penggunaannya di folder "examples". Letakkan file-file SDK ini ke server (htdocs) mu.Buat Aplikasinya
Sekarang buat file index.php dan letakkan di folder root (htdocs). Isi dari file index.php tersebut adalah:<?php
define('APP_ID', 'isi dengan app id mu');
define('APP_SECRET', 'isi dengan app secret mu');
// pathnya sesuaikan dengah letak file yang kamu punya
require 'fb-php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId' => APP_ID,
'secret' => APP_SECRET,
));
// ada user?
$user = $facebook->getUser();
// jika iya
if ($user) {
try {
// dapatkan profil user yang sudah masuk
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
error_log($e);
$user = null;
}
}
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>php-sdk</title>
<style>
body {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
}
h1 a {
text-decoration: none;
color: #3b5998;
}
h1 a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>php-sdk</h1>
<?php if ($user): ?>
<a href="<?php echo $logoutUrl; ?>">Logout</a>
<?php else: ?>
<div>
Login using OAuth 2.0 handled by the PHP SDK:
<a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
</div>
<?php endif ?>
<?php if ($user): ?>
<h3><?php echo $user_profile['name'] ?></h3>
<img src="https://graph.facebook.com/<?php echo $user; ?>/picture">
<h3>Your User Object (/me)</h3>
<pre><?php print_r($user_profile); ?></pre>
<?php else: ?>
<strong><em>You are not Connected.</em></strong>
<?php endif ?>
</body>
</html>
Source codenya aku ambil dari contoh yang sudah ada dengan sedikit modifikasi. Sekarang buka browsermu dan ketik: "https://localhost" (tanpa quote/tanda petik dan perhatikan https-nya) di address bar. Jika beruntung :D kamu akan mendapatkan tampilan seperti ini:
*-- Catatan:
1. Jika yang muncul tombol login ke Facebook, klik saja.
2. Jika kamu ingin melihat aplikasimu muncul di fb buka saja halaman: https://apps.facebook.com/nama_namespace
contoh: https://apps.facebook.com/uniracarddev
Virtual Host
Secara default saat kita menginstall XAMPP kita hanya memiliki satu "domain" yaitu "localhost" sehingga kalau kamu memiliki banyak halaman web harus diletakkan dibawah "localhost" pada folder yang berbeda-beda. Dengan virtual host kamu bisa memiliki lebih banyak "domain" di komputermu contohnya: "http://kerjaanA/", "http://kerjaanB/", dsb. Keuntungan lain kamu bisa meletakkan file php-mu dimanapun (tidak hanya di htdocs saja).
Jika kamu mengembangkan banyak facebook app maka sangat dianjurkan kamu membuat virtual host di komputermu. Ada beberapa tutorial cara membuat virtual host yang bisa kamu ikuti yaitu:
1. http://sawmac.com/xampp/virtualhosts/ (berbahasa Inggris)
2. https://ri32.wordpress.com/2012/01/20/membuat-virtual-host-di-xampp/
Setelah virtual host dibuat maka nama hosting tersebut akan digunakan sebagai Site URL, Canvas URL bagi aplikasi facebook yang kamu buat.
Sekarang kamu bisa mengedit dan membang aplikasi sesukamu di localhost dan langsung mengeceknya secara langsung, kalau sudah selesai baru deh berpikir cari hosting dan kemudian upload filemu ke server yang sebenarnya. Jika kamu tertarik dengan hosting PHP gratis coba lihat disini: http://nazoftware.blogspot.com/2012/08/hosting-php-gratisan-dengan-heroku.html. Happy coding :D
Tidak ada komentar:
Posting Komentar