CS160 Discussion Section

1. David Sun CS160 Discussion Section

2. Facebook Application • Architecture • Information repository • Session management • GUI • Privacy

3. Creating a Facebook Application • Add “Developer” application on Facebook. • Click “Set Up New Application”. • Provide: • Application name, e.g. myfirstapp • Support email e.g. johnsmith@gmail.com • 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

4. Client/Server Interaction Browser App Canvas 1. Browser makes request 5 . Facebook renders FBML to HTML Facebookserver 2. FB server calls App Server through callback URL 4. App server returns FBML 3. App calls FB API Your app server

5. appinclude.php <?php require_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); } ?>

6. 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.

7. 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)

8. 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

9. 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.

10. Example: Free Gifts

11. 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

12. 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'); ?>

13. 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

14. 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.

15. 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>

16. 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>

17. 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>

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

19. 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.

20. 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

21. 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)