Türk halkı olarak gösterdiğimiz ilgi, İngiliz The Sunday Times gazetesine bile haber olan; kullanıcı sayımızı bir ayda %466 artırarak özel bir rekor kırdığımız ve şu anda 3 milyona yaklaşan Türk üyesi bulunan Facebook üzerinde ASP.NET AJAX kullanarak uygulama geliştirebilmek hakkında yazmak istiyorum :)

Kullanıcısı sayısı bu kadar fazla olunca, Facebook platformuna özel uygulamalar geliştirmek pek çok yazılımcının ilgilendiği bir konu haline geldi. Hatta uygulamalar üzerinden verilen reklamlar ile insanlar para kazanmaya başlayınca, bu alanda bir pazar oluşmaya başladı ve bu uygulamaları geliştiren şirketlerin milyon dolarlar seviyesindeki fiyatlarla satıldığına tanıklık ettik.

Ülkemizde ise birçok insan, hazırladığı çeşitli uygulamalar ile Facebook dünyasını renklendirmeye devam etmekte. Bunların çoğu php ile hazırlansa da, internet üzerinde yer alan çok güçlü API ve ASP.NET sınıf kütüphaneleri  ile bu tip uygulamaları kısa sürede geliştirebilmek olası.

Bizde bu ayki dersimizde bu kütüphaneleri kullanara nasıl kendi Facebook uygulamamızı geliştirebileceğimizi göreceğiz. Eğer sizde Facebook üyesiyseniz ve yeterince ilkokul  arkadaşınızı bulduysanız, artık sıkılmaya başlamış olabilirsiniz. Peki  farklı uygulamalar ile Facebook’u renklendirmeye hazır mısınız?

Facebook Uygulama Geliştirme Alt Yapısı

Facebook’un güçlü uygulama geliştirme altyapısı bizlere birçok imkan sunuyor. Bu altyapıda web sayfalarını oluşturmak için FBML diye adlandırılan bir dil, veritabanı işlemleri için FQL sorgu sistemi ve FBJS adında bir javascript yorumlayıcısı gibi özgün araçlar mevcut. Ancak biz bu altyapıyı zaten kullanan bir ASP.NET sınıf kütüphanesi kullanacağımız için bu araçların hepsinin kullanımını öğrenmemize gerek kalmıyor. Bütün bu uygulama geliştirme bilgilerine geçmeden önce Facebook sayfa yapılarına değinelim. Geliştireceğimiz uygulamalar temel olarak 2 sayfa yapısında gözükebilir; Canvas sayfa yapısı ve Profil sayfa yapısı.

Canvas sayfalar, Facebook çerçevesi içinde kalan geniş alanda uygulamanızın çalışmasına izin verir. Bunu size ait bembeyaz bir tuval olarak düşünübilirsiniz. Üstelik bu tuvalin içinde FBML kullanmak zorunda değilsiniz. Facebook burada IFRAME uygulamalara da izin vermektedir, yani herhangi bir web sayfanızı olduğu gibi burada gösterebilirsiniz. Genellikle, uygulama eklendikten sonra gelen davetiye gönderme sayfaları, yada profil sayfasına sığmayan uygulamalar bu canvas sayfalarında yer alırlar.

Bir diğer seçeneğimizde profil sayfasını kullanmak. Hepinizin aşina olduğunu düşündüğüm, uygulamanın profil sayfanızda bir kutu içerisinde çalıştığı seçenek bu. Profil sayfaları iki bölümden oluşmakta; 200 piksel boyutundaki dar alan (narrow) ve 400 piksel boyutundaki geniş alan (wide). İşte bu bölümlere FBML kullanarak uygulama geliştirebilir, “Profile-action” diye tabir edilen, resimlerin altındaki linkler bölümüne de kendi uygulamanızın bir bağlantısını ekleyebilirsiniz.


Mevcut Facebook sayfa yapıları.

Uygulamamızı nerede geliştirebileceğimizden bahsettik, şimdi nasıl geliştirebiliriz buna değinelim. Öncelikle “Developer” uygulamasını http://www.facebook.com/developers/ adresinden ekleyerek gerekli kayıt işlemlerine başlamalıyız. Uygulama sayfasındaki “Set Up New Application” butonuna tıklayarak, formu doldurmaya başlayın. “Optional Fields” içerisindeki “Callback Url” alanına uygulamamızın çalıştığı adresi yazmamız gerek.

Geliştirme esnasında uygulamamızın çalışabilmesi için buraya “http://localhost/ornek/” gibi lokal bir adres de yazabiliriz. Uygulamanızda IFRAME kullanacaksanız “Application Type” alanından bu seçiminizi belirmeniz gerekiyor. “Can your application be added on Facebook?” sorusuna “Yes” cevabı vererek, açılan formun “Post-Add Url” alanına uygulama eklendiğinde açılacak sayfanın adresini, “Side Nav Url” alanına menüdeki butonuna basıldığında gitmesi gereken adresi vermelisiniz ve bütün bunlar yine lokal adresler olabilir. Kayıt işlemleri sonucunda edineceğimiz API KEY ve SECRET anahtarlarını ileride uygulamamızda gereken yerlere ekleyerek, Facebook ile beraber çalışabilmesini sağlayacağız.


Uygulamamızın kaydı tamamlandıktan sonra gerekli anahtarlara ulaşabiliriz.

Sırada uygulamamızı geliştirmek için kullanacağımız sınıf kütüphanelerini Visual Studio’ya ekelemek var. ASP.NET kullanarak Facebook uygulamaları geliştirmek için Facebook.NET, VS Starter Kit, Client Library for VB.NET ve Developer Toolkit gibi değişik donatılar mevcut. Biz bunlardan için en çok kullanılan “Facebook Developer Toolkit” platformunu seçtik. Yapmamız gereken ilk iş http://www.codeplex.com/FacebookToolkit adresinden gerekli binary dosyaları indirmek. Bu platformun en büyük avantajları, hem web uygulamaları hemde masaüstü uygulamalar için kütüphaneler ve araçlar içeriyor olması.

İndirme işleminden sonra Visual Studio’yu açmaya hazırız. Önce yeni bir “Web Site” yaratıp, daha sonra “Solution Explorer” bölmesine sağ tuşla tıklayarak “Add Reference -> Browse” sekmesi altından indirdiğimiz Facebook.dll ve Facebook.WebControls.dll kütüphanelerini projemize eklemeliyiz. Developer Toolkit ile uygulama geliştirmeyi örneklerle açıkladıktan sonra, bu kütüphaneye özgün araçların kullanımına da değineceğiz.

Örnek Uygulama

Blogumu takip edenler, bir önceki yazımda anlattığım ASP.NET Ajax ile RSS Okuyucu uygulamasını hatırlayabilirler. Şimdi örnek göstereceğimiz Facebook uygulamalarında da bu projemizi kullanacağız. Çalışma biçimini hatırlatmak amacıyla bu uygulamayı bir daha gözden geçirmek gerekirse, hazırladığımız bir RssOku() metodu, bir tablo içerisindeki “Label” nesnesinin text özelliğini değiştirip, bu işlemi Page_Load olayı ve Timer nesnesinin Tick olayında uygulayıp, RSS kaynağını anlık takip edebiliyorduk.

Daha önce Facebook uygulamalarının canvas veya profil sayfalarında çalışabileceğinden bahsetmiştik. Şimdi çalışma biçimleri farklı olan bu iki sayfa yapısıyla ilgili örneklerimize bakalım.

Canvas Uygulaması

Bu sayfa tipinde IFRAME ve FBML kullanma şansımızın olduğunu hatırlamakta fayda var. Her ne kadar FBML kısa sürede modüler uygulamalar hazırlamamıza izin versede, IFRAME ile alışık olduğumuz şekilde web sayfası geliştirme özgürlüğümüz var. Bu nedenle örneğimizde IFRAME kullanıyoruz. Öncelikle web sayfamızın kod dosyasını açarak, sayfanın kaynağını varsayılan asp.net “Page” sınıfı yerine, “CanvasIFrameBasePage” isimli toolkit üst sınıfından türetilmesini sağlamalıyız. Bundan sonra yapmamız gereken, Page_Load olayı içerisine kayıt işleminde aldığımız API KEY ve SECRET anahtarlarını üst sınıfımızın Api ve Secret özelliklerine atamak, ve üst sınıfımızın Page_Load olayını çağırmak.

Artık sayfanız facebook iletişim kurabilecek hale geldi. Yalnız login olmadan yapılan çağrılarda sorun yaşamamak için, bundan sonra kullanacağınız metodların geri yükleme esnasında çalışmamasını sağlamalısınız.  Bunuda devam eden kodları bir if(!IsPostBack) ifadesi içerisine yazarak sağlayabilirsiniz. Unutulmaması gereken nokta, Ajax ile verilerin anlık güncellenmesini sağlamak için, sayfamıza eklediğimiz bir Timer objesi olmalı ve bu objenin Tick olayında da RssOku() methodunu tekrar kullanmalıyız. Bir canvas uygulanması için gereken işlermleri aşağıdaki sayfa kodlarından inceleyebilirsiniz:

Canvas Uygulaması Kodları


//Canvas sayfalarda miras alınan sınıfı aşağıdaki gibi değiştirdik.</em>

public partial class _Default: CanvasIFrameBasePage

{

//Sayfamız yüklendiğinde çalışacak olan olay

protected void Page_Load(object sender, EventArgs e)

{

/* Üst sınıfımızın özelliklerini kayıt işleminde aldığınız anahtarlar ile tanımlayıp, kendi Page_Load olayını çağırıyoruz. */

base.Api = "APIKEY"

base</em><em>.Secret = </em><em>"SECRETKEY"

base</em><em>.Page_Load(sender, e);

/* Sayfaların postback olmadığını kontrol ettikten sonra kodlamaya başlayabiliriz. */

if (!IsPostBack)

{

/* Rss okuyucu projemizde, sayfamızdaki bir label objesinin text değerini RssOku metodumuzdan dönen string ifadeye bağlıyorduk. Bu işlemi şimdi burada yapıyoruz. */

Label2.Text = RssOku();

}

}


IFRAME sayesinde geçen ayki uygulamamızı aynen çalıştırabiliyoruz.

Profil uygulaması

Profilimizdeki kutularda yer alacak uygulamamızda gerçekleştirdiğimiz işlemleri FBML dilinin kullanıldığı bir arayüzde göstermeliyiz. Ayrıca bu arayüzü, geniş ve dar profil kutularına göre ayrı ayrı tasarlamamız gerekmekte. Bilmeniz gereken iki önemli FBML etiketi var; dar alandaki arayüz için <fb:narrow> ve geniş alan için <fb:wide> kullanacağız. Toolkit ile gelen “Facebook Service” nesnesi sayesinde, uygulamamız için gereken öğelere erişebilir, ve arayüzde göstermek istediklerimizi bu etiketler arasına  HTML olarak da yazabiliriz.

Geliştirmeye başlamaya hazırsanız, hemen yeni bir “Web Site” projesi oluşturun ve referanslarını ekleyin. Bu sefer kullanacağımız sayfaların türetildiği üst sınıfları değiştirmemize de gerek yok. Yapmamız gerekenler, bir Facebook Service nesnesi yaratmak, bu nesnenin özelliklerine kayıt esnasında aldığımız API KEY, SECRET anahtarlarını, session_key, auth_token ve userId gibi profil sayfalarından alınan bilgileri örneğimizdeki gibi atamak. Servisimizi hazırladıktan sonra, canvas uygulamasında olduğu gibi, postback kontrolü yapmalı, ve sayfamazla ilgili kodları yazmaya başlamalıyız. En sonunda arayüzde gösterilecek öğeleri bu servisin “setFBML” metodunu kullanıp uygun bir şekilde profil sayfalarına aktarabiliriz. Örneğimizde bir tablo kullanıp bunun içerisine uygulama sayfasındaki Label nesnesinin text değerini vererek, okunan rss kaynağı içerisindeki bilgilerin görünmesini sağlayacağız. Profil uygulamasının kodları bu şekilde geliştiriyoruz:

Profil Uygulaması Kodları


//Facebook Servisi nesnesi yaratıyoruz.

Facebook.Components.FacebookService _fbService = new Facebook.Components.FacebookService();

protected void  Page_Load( object  sender,  EventArgs e)

{

//yarattığımız nesneye gerekli anahtarları verelim.

_fbService.ApplicationKey = "---buraya sizin app keyiniz gelecek---";

_fbService.Secret = "---buraya sizin secret keyiniz gelecek---";

//Nesnemize uygulamamızın bir masaüstü uygulaması olmadığını hatırlatmamız gerek.

_fbService.IsDesktopApplication = false;

//Web uygulamalarında kimlik işlemleri için bazı verileri tarayıcıdan çekmeliyiz.

string sessionKey = Session["facebook_session_key"] as String;

string userId = Session["facebook_userId"] as String;

string authToken = Request.QueryString["auth_token"];

//Aşağıda bazı kimlik kontrolleri yapıyoruz, session süresi dolmuşsa kullanıcıyı login ekranına yönlendiriyoruz.

if(!String.IsNullOrEmpty(sessionKey))

{

_fbService.SessionKey = sessionKey;

_fbService.UserId = userId;

}

else if (! String.IsNullOrEmpty(authToken))

{

_fbService.CreateSession(authToken);

Session["facebook_session_key"] = _fbService.SessionKey;

Session["facebook_userId"] = _fbService.UserId;

Session["facebook_session_expires"] = _fbService.SessionExpires;

}

else

{

Response.Redirect(@"http://www.facebook.com/login.php?api_key=" + _fbService.ApplicationKey + @"&amp;amp;v=1.0");

}

//Sayfamızın postback kontrolünü yaptıktan sonra gereken kodları yazabiliriz.

if (!IsPostBack)

{

//Rss kaynağından verileri çekiyoruz.

Label2.Text = RssOku();

//işte burada geniş ve dar profil kutuları için arayüz FBML kodunu yazmamız gerekiyor.

_fbService.SetFBML("<fb:wide><table width=\"300\" border=\"0\"><tr><td>Forumlarımızdaki son başlıklar:</td></tr><tr><td>" + Label2.Text + "</td></tr><tr><td><img src=\"http://www.csoftlab.com/C-Organizer%20awards/pcm_logo.gif\" /> </td></tr></table></fb:wide><fb:narrow>" + Label2.Text + "</fb:narrow>", "","");

}

}


PC Magazine Forumları heryerde!

Developer Toolkit Araçları

Facebook Developer Toolkit aynı zamanda kendine özgün araçlarla birlikte geliyor. Dizayn sayfanıza sürükleyerek kullanabileceğiniz bu araçları eklemek için, Default.aspx dizayn sayfanızdayken “Toolbox” üzerinde sağ tuşla tıklayıp, “Choose Items -> Browse” üzerinden Facebook.WebControls.Dll kütüphanesini burayada eklemek. Şimdi PhotoAlbum, FriendList ve UserInfo isimli üç yeni araca sahibiz. Bu araçları dizayn sayfamıza sürükledikten sonra, nesnelerin gerekli özelliklerini Facebook Service nesnesindeki özelliklere bağlayarak kullanabiliriz.

Toolkit Araçları Kullanımı:


/* FriendList nesnesi öğelerini Facebook Service nesnesinden çekiyoruz. Eğer PhotoAlbum kullanırsanız GetPhotos() ve UserInfo için GetUserInfo() metodlarını kullanabilirsiniz.*/

FriendList1.Friends = _fbService.GetFriends();


Developer Toolkit içindeki web araçları.

Bilmekte Fayda Var

  • Ortaya çıkarsa sizi çok uğraştıracak ilginç bir bug mevcut. Kayıt esnasında eğer Callback URL, Site Nav URL gibi belirli sayfa adresleri verdiğiniz alanlarda büyük harf kullanırsanız (ör: http://siteniz.com/Default.aspx), Facebook nedeni belirsiz bir “Sayfa Bulunamadı” hatasıyla sizi karşılıyor. Harfleri küçültünce sorun düzeliyor.
  • Sayfanızda IFRAME kullanıyorsanız, IE 6 ile birlikte gelen bir güvenlik tedbiri nedeniyle session içinde tutulan bilgiler bu tarayıcılarda silinebilir ve uygulamanız hata verebilir. Bunun önüne geçmek için sayfanıza aşağıdaki kodu eklemeniz yeterli:
  • Uygulamanızın kayıt bilgilerinde yaptığınız değişikliklerin gerçekleşmesi biraz zaman alabiliyor, bu yüzden sabırlı olmalısınız.

IE 6 Kullananlara:


protected override void OnPreRender(EventArgs e)

{

Response.AppendHeader("P3P", "CP=\"CAO PSA OUR\"");

base.OnPreRender(e);

}

Dünyaya Açılın!

Visual Studio’nun geliştirme ortamı bizlere, hazır sınıf kütüphaneleri kullanarak çok kısa sürede uygulamalarımızı geliştirmemize imkan tanıyor. Bilgisayarımızda hazırladığımız uygulama istediğimiz seviyeye ulaştığında, artık onu bir sunucuya gönderebiliriz. Uygulamanın yayına geçebilmesi için “Developer” uygulaması üzerinden kayıt bilgilerine erişip, buradaki adresleri güncellemeliyiz. Gönderme işleminden sonra Facebook yöneticileri onaylarsa, uygulama galerisinde sizin projenizde gözükecektir.

Büyük yazılım fimalarının ve yatırımcılarının ilgisi devam ettikçe, Facebook uygulamalarının popülerliğini yitireceğinden endişe etmenize gerek yok. Ayrıca yakın zamanda  web tabanlı işletim sistemi geliştiren bir firmayı bünyesine katan, bunun yanında uygulamaları MySpace gibi yüksek kullanıcı kitlesine sahip diğer sitelerde de çalışabilen bir platform, uğraşlarınızı dünyaya tanıtmak konusunda eminim size yardımcı olacaktır.

Örnek canvas uygulaması indir: Canvas Uygulaması

Örnek profil uygulaması indir: Profil Uygulaması

p.s. Bu yazı Mart 2008 tarihli PC Magazine dergisi makalemden derlenmiştir. Geçen zamanda Facebook uygulama yapısına bazı eklentiler yapıldı ve yazıda kullandığım bazı araçların da yeni versiyonları çıktı. Kendi uygulamanızı hazırlarken bunlara dikkat ederseniz sevinirim :)

Related posts:

  1. ASP.NET AJAX ile dinamik RSS okuyucu hazirlamak