ASP.Net MVC : Membuat Facebook Birthday dengan ASP.Net MVC

Sekarang saya mau berbagi tips dan trik tentang bagaimana membuat aplikasi ringan tapi menarik menggunakan ASP.Net MVC. Anda akan mengimplementasikan aplikasi Facebook yang sederhana tapi menyenangkan dan berguna yang berisi daftar teman Facebook seseorang yang memiliki ulang tahun yang akan datang dan membuat saran untuk hadiah ulang tahun berdasarkan Facebook masing-masing teman Suka. Berikut adalah screenshot, salah satu yang menunjukkan daftar teman-teman dengan ulang tahun mendatang dan satu dengan hadiah ulang tahun direkomendasikan yang muncul ketika Anda mengklik teman :)

Silahkan Simak langkah pembuatannya dibawah ini.

1. Jalankan Visual Studio 2012 atau Visual Studio Express for Web 2012.
2. Pilih file New Project pada menu File.
3. Pada kotak dialog pilih c# dan click Web dibawah Templates.
4. klick ASP.NET MVC 4 Web Application.
5. Masukkan sample nama aplikasi yang akan dibuat disini kita menuliskan SampleFacebookApp, lalu klik ok.

Pada kotak dialog New ASP.NET MVC 4 Project, pilih  Facebook Application, lalu OK.

Setting SSL Supaya bisa koneksi ke Facebook kamu harus setting SSL.

1. Di Solution Explorer, silahkan klik SampleFacebookApp project.
2. tekan f4 untuk properties.
3. ubah SSL Enabled to True.
4. Copy  SSL URL.
5. Di Solution Explorer, klik kanan SampleFacebookApp dan Properties.
6. pilih web tab.
7. Paste SSL URL ke Project Url box, lali click Create Virtual Directory.

Membuat aplikasi di Facebook dan menghubungkan aplikasi ke proyek Tepat di luar kotak, template Facebook menyediakan kode boilerplate untuk membantu Anda menghubungkan aplikasi Anda ke Facebook dan mengambil sifat seperti Facebook Likes, foto, dan email. Yang harus Anda lakukan untuk mendapatkan aplikasi up sederhana dan berjalan adalah copy ke proyek Anda beberapa pengaturan dari aplikasi yang Anda buat di Facebook.

1. Pada browser Anda, arahkan ke https://developers.facebook.com/apps dan log in dengan memasukkan kredensial Facebook Anda.
2. Jika Anda belum terdaftar sebagai pengembang Facebook, klik Daftar sebagai Developer dan ikuti petunjuk untuk mendaftar.
3. Klik Create New App.
4. Enter an App Name and App Namespace, and then click Continue.
5. Pada halaman Pengaturan Dasar untuk aplikasi, mengatur Mode Sandbox ke Diaktifkan. Hal ini memastikan bahwa Anda memiliki akses eksklusif untuk aplikasi sampai siap untuk dibuat tersedia untuk semua orang. Anda akan menggunakan ID App, App Secret, dan pengaturan Namespace pada langkah berikutnya.
6. Masuk kembali ke Visual Studio, lalu tulislah code dibawah ini
7. Di Solution Explorer, klik kanan lalu pilih Properties, lalu Web tab.
8. Salin URL Project dari tab Web dan tempel ke kanvas URL dan bidang URL Canvas Aman di halaman Facebook Basic Settings.
9. Ubah Canvas Lebar ke Fluid. Lebar kanvas adalah lebar jendela bagian dalam halaman Facebook di mana aplikasi Anda akan berjalan. Pengaturan untuk Fluid memungkinkan lebar aplikasi Anda untuk berubah tergantung pada ukuran jendela browser pengguna.
10. Klik Simpan Perubahan.
11. Lalu coba lihat dibrowsermu apa yang terjadi. :)

Ketika Anda mengklik Authorize this application, Facebook meminta Anda untuk mengotorisasi aplikasi untuk mengakses alamat email Anda dan foto. Klik Allow.

Semoga Tutorial ini dapat bermanfaat buat teman-teman sekalian :) CMIW