Didats Triadi

Saya ceritanya baru berhasil menggunakan Facebook Graph API dan Codeigniter. Ini saya lakukan karena saya sudah cukup menyerah dengan ribetnya RestAPI Client yang diberikan Facebook. Karena kasus saya agak berbeda, yaitu saya punya beberapa aplikasi terpisah dalam satu instalasi Codeigniter. Setelah melihat-lihat, ternyata ada cara lain yang bisa kita lakukan. Dan yang paling mudah dan cukup aman diimplementasikan adalah Facebook Graph API ini.

Catatan ini kiranya bisa berguna buat teman-teman yang lain atau yang mungkin di kemudian hari dapat proyek ini. Juga sebagai catatan saya, biar nanti kalau ada proyek lain saya tinggal melihat dokumentasi yang saya buat.

Yang perlu disiapkan adalah 1 librari dan 1 file controller dan 1 file view. Tidak perlu unduh (download) yang lain. Facebook Graph API ini memang jauh lebih simpel. Dan saya sangat menikmati proses belajar ini. Dan perlu diketahui, bahwa tutorial kali ini tidak akan mencakup banyak hal. Saya hanya mengharapkan anda mengerti konsep baru yang ditawarkan Facebook ini.

Sebelum memulai, pastikan beberapa hal berikut ini:

1. Versi PHP yang dipakai adalah versi 5
2. Pengetesan skrip tidak bisa dilakukan di server lokal. Jadi anda harus punya hosting dan harus online
3. Codeigniter yang saya pakai 1.7.2, saya kurang tahu apa tetap akan sama jika menggunakan versi lama

Langkah pertama, buat aplikasi

Ini adalah langkah wajib. Karena dengan mendaftarkan aplikasi kita, Facebook akan memberikan 3 hal penting yang nantinya kita butuhkan. Yaitu Application ID, Application Secret dan API Key. [Klik link ini untuk mendaftarkan aplikasi anda]. Yang perlu anda isi adalah Application Name dan Connect->Connect URL.

Langkah kedua, unduh librari Curl

Librari Curl yang saya pakai ini memang hebat. Mudah sekali pakainya. Bisa diunduh dari link ini: http://codeigniter.com/wiki/Curl_library/

Langkah ketiga, konfigurasi

Buka file /application/config/config.php, lakukan beberapa hal berikut ini:

1. Index page dibuat kosong. $config['index_page'] = ""; (baris 26)
2. URI Protocol dibuat jadi ORIG_PATH_INFO. $config['uri_protocol'] = "ORIG_PATH_INFO"; (baris 44)
3. On-kan pilihan query string. $config['enable_query_strings'] = TRUE; (baris 151)

Langkah keempat, htaccess

Karena konfigurasi codeigniter saya tidak menggunakan “index.php”, maka saya butuh berkas (file) htaccess. Berikut isinya:

RewriteEngine on
RewriteCond $1 !^(index\.php|assets)
RewriteRule ^(.*)$ /projects/fbci/index.php/$1 [L]

Sesuaikan path ini:/projects/fbci/index.php dengan aplikasi anda.

Langkah kelima, controller

Kita hanya punya 1 berkas controller. Saya menggunakan controller yang diberikan Codeigniter saat kita instalasi, yaitu controller Welcome.

Controller itu nantinya akan punya 2 method, yang pertama sebagai gerbang pertama sebelum pengguna (user) masuk ke Facebook. Dan yang kedua sebagai penerima data dari Facebook. Berikut adalah gambar perjalanan aplikasi kita yang berkomunikasi dengan Facebook (semoga ngerti, saya kurang bisa gambar).

Dari gambar di atas, berikut detail yang bisa saya berikan:

1. Ketika pengguna mengeklik sebuah tautan di aplikasi kita (bisa berupa link, tombol, atau apa saja)
2. Aplikasi kita mengarahkan pengguna untuk login dulu ke Facebook dan atau menerima konfirmasi tentang informasi apa saja yang akan aplikasi kita butuhkan. Tautan itu seperti ini:
   https://graph.facebook.com/oauth/authorize?client_id=[client_app_id]&redirect_uri=[redirect_uri]
3. Dari tautan di atas, [client_app_id] diambil dari kode aplikasi ketika kita selesai mendaftarkan aplikasi di Facebook. Sedangkan [redirect_uri] adalah URL yang akan kita gunakan untuk menangkap kode dari Facebook berupa $_GET['code']. Maka dari itu, aplikasi kita harus menerima query string (lihat bagian konfigurasi di atas).
4. Setelah Facebook mengirim kode, kita perlu akses token untuk mendapatkan data-data pengguna Facebook. Untuk mendapatkan akses token, kita perlu menghubungi lagi Facebook dengan mengirim data kode (yang kita dapat di nomor 2), [redirect_uri] dan [secret_code].
5. Setelah itu Facebook akan mengirimkan akses token dalam format JSON.
6. Setelah punya akses token, kita bisa bebas meminta data-data pengguna ke Facebook.

Langkah keenam

Ini adalah langkah terakhir tutorial kali ini, yaitu mengunduh berkasnya. Saya sadar bahwa tidak ada keterangan yang lengkap sekali untuk level pemula. Tapi percayalah, saya hanya bisa mengarahkan dan sedikit memberitahu cara kerja Graph API ini. Dokumentasi Graph API lebih lengkap dan siap disantap.

Berikut adalah kode untuk Controller:

<?php
 
class Welcome extends Controller {
 
	// beberapa detail aplikasi kita
	// ini semua harus diisi.
	var $fb_appid = "";
	var $fb_secret = "";
	var $fb_api = "";
 
	function Welcome()
	{
		parent::Controller();	
		$this->load->helper("url");
	}
 
	function index() {
		$data['app_id'] = $this->fb_appid;
		$this->load->view('welcome_message', $data);
	}
 
	function fb() {
		$this->load->library("curl");
		// method untuk redirect balik dari facebook
		// setelah pemanggilan pertama, facebook mengirimkan sebuah kode 
		// yang bisa kita tangkap lewat $_GET['code']
 
		// cek dulu, apa $_GET['code'] ada
		if(isset($_GET['code'])) {
			// buat url untuk mengambil token
			$url = 'https://graph.facebook.com/oauth/access_token?client_id='.$this->fb_appid.'&redirect_uri='.site_url("/welcome/fb").'&client_secret='.$this->fb_secret.'&code='.$_GET['code'];
 
			// ambil token lewat curl
			$token_data = $this->curl->simple_get($url);
 
			// ambil kode token saja, dengan regular expression
			// arti tanda ([^&]+) adalah:
			// ambil semua karakter asal bukan tanda &
			preg_match("/access_token=([^&]+)/",$token_data,$token);
 
			// kode token ada di variabel token[1]
			$access_token = $token[1];
 
			// pengambilan token selesai, sekarang ambil userid, nama
			$uri = 'https://graph.facebook.com/me?access_token='.$access_token;
			$data = $this->curl->simple_get($uri);
 
			// decode data
			$fb = json_decode($data);
			$fb_id = $fb->id;
 
			// ambil nama dan foto pengguna
			$fb_userdata = $this->curl->simple_get("https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token);
 
			//echo "https://graph.facebook.com/".$fb_id."?fields=name,picture&access_token=".$access_token;
 
			$fb_user = json_decode($fb_userdata);
 
			$data = array();
			$data['fbuser'] = array('id'=>$fb_id, 'avatar'=> $fb_user->picture, 'nama'=> $fb_user->name);
 
			//print_r($data);
 
		}
		elseif(isset($_GET['error_reason'])) {
			// untuk menangkap user yang klik "Dont Allow" atau "Cancel di Facebook"
			// buat variabel untuk ditampilkan di view
			$data['tolak'] = "Uh oh, saya ditolak T_T";
		}
 
		$this->load->view("welcome_message",$data);
	}
}
?>

Setelah dirilis awal bulan Juni 2010, saya akhirnya bisa merilis versi baru Taktak. Di tulisan ini saya akan menulis informasi-informasi baru tentang Taktak.

Cara main Taktak

Taktak terbagi atas jumlah babak yang terbatas dan pada tiap babak terdapat 10 soal untuk dijawab. Untuk menjawab tiap soal anda hanya tinggal mengisi kotak-kotak kosong dengan papan ketik (keyboard). Sebagai bantuan lain, anda bisa membuka huruf pada tiap kotaknya dengan cara mengeklik kotak tersebut.

Penilaian berdasarkan jumlah huruf yang menjadi jawaban, dikurangi banyaknya kotak yang anda buka. Syarat untuk melaju ke babak berikutnya adalah anda harus punya 40 poin. Makin banyak poin anda, maka jumlah huruf yang harus bisa ditebak semakin banyak.

[Tautan]

Kistaka adalah permainan kuis kata sederhana. Dalam satu babak, akan ada 5 pertanyaan yang harus dijawab dalam waktu maksimum 80 detik.

Permainan ini adalah sedikit variasi dari permainan lain yang pernah saya buat sebelumnya, Taktak. Memang, letak fun-nya kurang, tapi permainan ini sangat jitu untuk memperkaya pengetahuan kita tentang kosakata bahasa Indonesia.

Peraturannya sudah sangat jelas, setiap babak akan disuguhi 5 soal. Tiap soal mempunyai 5 pilihan untuk dipilih. Tiap soal benar akan mendapat 3 poin, dan untuk soal yang salah, poin akan dikurangin 1. Ditiap babak, jika nilai anda mencapai 7 atau lebih, maka babak selanjutnya menunggu anda.

Latar belakang

Permainan ini seharusnya bisa diselesaikan beberapa hari setelah Ketaketik, tetapi karena kerjaan untuk memperbaharui tema Jazeera Airways, maka sayapun menunda meneruskan Kistaka.

Nama Kistaka sendiri diperoleh dari permainan 2 kata, kuis dan kata. Ada beberapa nama seperti Wistaka, Kistaka, Qustaka, Quistak, dan nama-nama lain. Tapi akhirnya entah kenapa saya memilih Kistaka.

Seperti biasa, Kistaka tidak mendukung Internet Explorer. Semua versi.

KetaKetik adalah sebuah permainan adu cepat mengetik. Salah satu keistimewaan yang bisa saya banggakan dari permainan ini (minimal, dari sisi saya sendiri), adalah HTML5 dan CSS3. Tentunya javascript juga ikut andil.

Sebelum saya lempar ke publik, saya sempatkan teman-teman di Kampung Gajah untuk mencoba. Banyak yang saya dapat dari mereka, mulai dari masalah yang saya sendiri tak pernah terpikir sebelumnya, sampai hal-hal yang cukup fatal.

Silahkan mencoba dan bertarung lewat mengetik!

Yang masih menjadi masalah:
- Tombol backspace tidak berfungsi dengan benar di Google Chrome

TERKINI di 8 Juni 2010
- Masalah kesalahan ketik yang seharusnya tidak sudah diperbaiki
- Jika balon kata habis, maka otomatis akan mencek skor
- Dibuatnya favicon
- Masalah di Google Chrome sudah diperbaiki
- Terima kasih untuk Tokopas.com untuk jadi sponsor bulan Juni 2010.
- Diberikan 3 nyawa untuk setiap pertandingan. Dan ada kata-kata bonus untuk mengembalikan nyawa yang hilang.

Saya tak pernah menyangka, proyek iseng Taktak butuh perhatian yang lebih lanjut. Tadinya saya pikir akan jadi proyek yang bisa langsung saya tinggalkan karena mungkin tak banyak orang yang minat. Tapi ternyata tidak.

Di hari pertama peluncurannya, Rabu, 2 Juni 2010, yang masih minim fitur itu, sudah ada hampir dari 1000 halaman terlihat (pageviews) dari 780-an pengunjuk unik (unique visitor). Di hari keduanya, nilainya masih hampir sama.

Reaksi yang cukup luar biasa ini mengundang banyak sekali masukan-masukan yang tak pernah terpikir oleh saya sebelumnya. Ditambah, salah satu teman saya, Rony lantip juga ingin disertakan dalam proyek ini. Tentu sebuah kehormatan buat saya.

Jadi sekarang saya dan Rony mulai serius menindaklanjuti proyek ini. Beberapa fitur bocoran dalam waktu dekat ini adalah tentang peringkat. Dengan resiko, Taktak di tempat yang sekarang tidak akan kami sentuh lagi, tapi mulai fokus di tempat yang baru.

Aja!

Hebat, Microsoft berniat meluncurkan versi Internet Explorer (IE) terbaru lagi. IE versi 9. Yang artinya bagi saya adalah, saya butuh membuat filter baru untuk pengunjung yang menggunakan versi 9 nanti. Berarti total akan ada 4 buah IE yang perlu saya cek lagi. IE versi 6, 7, 8, dan 9.

Menyebalkan.

Dan di proyek terbaru saya, Taktak –yang walaupun masih dalam tahap beta, saya melarang sama sekali pengunjung yang menggunakan IE untuk masuk. Semua versi IE.

Kenapa?

Taktak menggunakan HTML5 dan CSS3. IE versi 8 sekalipun belum punya dukungan penuh. Jadi, sekalian saja saya bunuh itu IE. Khususnya di Indonesia. Toh, persentasenya tak sampai 20%.

Tugas mulia bukan? :p

Taktak adalah sebuah permainan kecil untuk mengetahui seberapa jauh kemampuan bahasa Indonesiamu.

Hadirnya Taktak sebenarnya adalah buah salah satu pemikiran saya tentang sebuah permainan yang menggunakan bahasa Indonesia. Saya termasuk orang yang cukup sering bermain scrabble sebelum tidur. Walau tidak bisa dibilang jago. Selama bermain, saya terus bertanya pada diri sendiri, ada gak sih scrabble versi Indonesia? Begitu terus. Sampai saat saya bertekad untuk membuat scrabble versi Indonesia.

Taktak sendiri bukanlah scrabble, tapi merupakan sedikit wujud dari scrabble. Sampai saat ini, proyek ini bisa dibilang hanya proyek iseng. Tapi saya masih punya banyak pemikiran lain untuk melanjutkan Taktak.

Terima kasih atas respon dan masukan-masukannya dari kampung gajah atau dari follower saya di Twitter. Juga untuk Kateglo atas API-nya. Dan saya berhasil mengajak Lantip untuk gabung mengembangkan permainan ini.

TERKINI di 3 Juni:
- Sudah bisa menggunakan papan ketik untuk mengisi huruf
- Diperbolehkan menekan tombol Enter untuk melanjutkan ke soal berikutnya

TERKINI di 4 Juni:
- Kutu (bug) yang tidak sesuai dengan jumlah kata sudah diperbaiki oleh Lantip
- Kutu (bug) yang ada di Safari sudah diperbaiki

Jadi apa lebih baik kiamat aja?

Libur kerja, ngeblog juga ngikut dong! *ahlesan bolong 2 hari*

Rombongan dari Kuwait sampai di Mekah ketika itu agak malam. Perjalanan dari Madinah ke Mekah itu ternyata bukan cuma 1 atau 2 jam saja. Tapi hampir 5 jam. Dan selama perjalanan, bukan cuma kota yang saya lewati, tapi juga tanah-tanah tandus yang tak ada penghuninya. Saya jadi membayangkan, bagaimana dulu perjuangan Nabi Muhammad SAW dan sahabat-sahabatnya ketika hijrah. Pastinya sangat berat. Apalagi dulu tak ada yang namanya mobil.

Singkat cerita, saya akhirnya bisa di depan masjidilharam. Tiang-tiangnya tinggi dan menakjubkan. Pelatarannya luas sekali. Ada banyak orang setiap saat berada di sana. Bukan 1000 atau 2000 orang, bisa saya perkirakan ratusan ribu. Setiap hari. Di luar musim haji.

Di sekeliling masjidilharam, ada banyak bangunan yang belum jadi dan sedang dalam tahap pembangunan. Persis di depan pelataran, ada hotel Hilton. Juga ada Mall :p

Saat masuk, tas yang anda bawa diperiksa petugas. Kamera besar tak boleh masuk, tapi kamera kecil boleh. Handphone berkamera apalagi.

Dari pintu gerbang utama, saya belum bisa melihat Ka’bah. Selama perjalanan ke bagian tengah, di turunan tangga pertama, saya langsung bisa melihat Ka’bah. Tak ada kata-kata yang bisa saya tulis lagi kecuali takjub. Merupakan keberuntungan terbesar untuk bisa sampai melihat langsung Ka’bah.

Lalu saya mendekat lagi, dan mulai melihat dengan mata langsung. Makin takjublah saya. Tak ada kesenangan yang sebanding selama hidup saya, jika dibandingkan dengan melihat Ka’bah dari dekat.

Luar biasa.