CS160 Discussion Section

CS160 Discussion SectionDavid Sun

Facebook Application

• Architecture• Information repository• Session management• GUI• Privacy

Creating a Facebook Application• Add “Developer” application on Facebook.• Click “Set Up New Application”.• Provide:

– Application name, e.g. myfirstapp– Support email e.g. [email protected]– Callback URL (this is the URL to your application code)

http://www.myserver.com/myfirstapp/– Canvas page URL (the actual facebook url as seen by the users)

http://apps.facebook.com/myfirstapp• You will get:

– An API Key : 05a5ef15248bb9a4887e5f4154678731– A Secret Key: 09901d83048d959eaad17228c8c7a95b– Identify the application to Facebook

Browser

Client/Server Interaction

App Canvas

Your app server

Facebook server

2. FB server calls App Server through callback URL

4. App server returns FBML

5 . Facebook renders FBML to HTML

1. Browser makes request

3. App calls FB API

appinclude.php<?phprequire_once 'facebook.php';

$appapikey = '05a5ef15248bb9a4887e5f4154678731'$appsecret = '09901d83048d959eaad17228c8c7a95b'$facebook = new Facebook($appapikey, $appsecret);$user = $facebook->require_login();

//[todo: change the following url to your callback url]$appcallbackurl = 'http://pact.eecs.berkeley.edu/davidsun/dstestapp/';

//catch the exception that gets thrown if the cookie has an invalid session_key in it

try { if (!$facebook->api_client->users_isAppAdded()) { $facebook->redirect($facebook->get_add_url()); }} catch (Exception $ex) { //this will clear cookies for your application and redirect them to a login

prompt $facebook->set_user(null, null); $facebook->redirect($appcallbackurl);}?>

Information Management• Application generic information:– Information (or a subset of) that users submitted

to Facebook: name, birth-date, relationship status, interests, education background etc.

– Can be retrieved by SQL queries or Facebook API.• Application specific information– Data users submit to or needs to be maintained

for your application.– MYSQL database.

Facebook Query Language (FQL)• FQL = subset of SQL– Only select-statements, no updates/deletes

• Exposed Facebook data/tables:– User, Friend, Group, Group_member, Event,

Event_member, Photo, AlbumPhoto_tag

• SELECT name, affiliations FROM user WHERE uid IN (SELECT uid2

FROM friend WHERE uid1=211031)

User Table

• user uid*, first_name, last_name, name*, pic_small, pic_big, pic_square, pic, affiliations, profile_update_time, timezone, religion, birthday, sex, hometown_location, meeting_sex, meeting_for, relationship_status, significant_other_id, political, current_location, activities, interests, is_app_user, music, tv, movies, books, quotes, about_me, hs_info, education_history, work_history, notes_count, wall_count, status, has_added_app

Application Specific Information Repository

• We will be support MYSQL in this class project• You will be able to run individual MYSQL

servers on your instructional accounts.• Design a database schemata that matches the

needs of your application. – will need to be “interoperable” with Facebook

databases.– should be sound, i.e. correct keys, normalized etc.

Example: Free Gifts

PHP

• “Object oriented” server-side scripting language.

• Becoming increasingly popular in recent years.• Mixture of C/Pearl syntax.• HTML-compliant• <?php ?>• Supports external resource: e.g. mysql

PHP/MySQL<?php

// Connecting, selecting database$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password')    or die('Could not connect: ' . mysql_error());echo 'Connected successfully';mysql_select_db('my_database') or die('Could not select database');

?>

Facebook API• Wrappers for FQL queries.• Implemented in a variety of scripting languages:

PHP, Python, Ruby, .NET• Getting session specific information:– createToken– getSession– getLoggedInUser

• Getting Facebook data:– Users.getInfo– Photos.get

FBML – Facebook Markup Language

• Subset of HTML + Facebook elements• Functionalities:– Enforce uniform/standard look and feel for shared

components: navigation, wall, dashbord, friend-selector, buttons, time-dates, dialog, notification.

– Implementing privacy designs: e.g., restrict the content to be only visible to the current viewer.

• Syntax just like well-formed HTML/XML.

FBML• <fb:editor action="?do-it" labelwidth="100">

<fb:editor-text label="Title" name="title" value=""/> <fb:editor-text label="Author" name="author" value=""/> <fb:editor-custom label="Status">

<select name="state"> <option value="0" selected>have read</option>

<option value="1">am reading</option> <option value="2">want to read</option>

</select> </fb:editor-custom> <fb:editor-textarea label="Comment" name="comment"/> <fb:editor-buttonset>

<fb:editor-button value="Add"/> <fb:editor-button value="Recommend"/> <fb:editor-cancel />

</fb:editor-buttonset> </fb:editor>

FBML• <fb:tabs>

<fb:tab-item href='http://apps.facebook.com/yourapp/myphotos.php' title='My Photos' selected='true'/>

<fb:tab-item href='http://apps.facebook.com/yourapp/recentalbums.php' title='Recent Albums' /> </fb:tabs>

• <fb:success> <fb:message>Success message</fb:message> This is the success message text.

</fb:success>

FBML• Privacy control is a key design issue in your

project.• You can enclose GUI elements with privacy

tags to control what other people can see on your profile.

• <fb:visible-to-owner> Welcome back to your profile!

</fb:visible-to-owner>• <fb:is-in-network network="16777229"

uid="1230541">User 1230541, you are in the Berkeley

network!</fb:is-in-network>

Other technology

• JavaScript (beta)• Mock-AJAX• Flash/Action-Script• Ruby/ColdFusion/.NET

Instructional Computing

• We’ll be supporting– MYSQL– PHP– Apache

• If you want to use any other technology then you will need to run your own server on the public domain.

Getting Started• Set up MYSQL. • Create the first application : http://

developers.facebook.com/step_by_step.php• Create a project webpage under your

instructional:– Say a little about who you guys are.– The title/goal of the project– You will be uploading documents and code to this

space in the future. – Send cs160@imail the URL

Resources• FBML:

http://wiki.developers.facebook.com/index.php/FBML• API: http://wiki.developers.facebook.com/index.php/API• FQL:http://wiki.developers.facebook.com/index.php/FQL• Code Testing: http://developers.facebook.com/tools.php• MySQL:

http://us.php.net/mysql (manual)http://www.pantz.org/database/mysql/mysqlcommands.shtml (quick reference)

• PHP: http://us3.php.net/manual/en/index.php• Project WIKI

– http://kettle.cs.berkeley.edu/cs160-fall-07 (instructions on setting up MySQL)