1 / 21

CS160 Discussion Section

Learn the architecture of a Facebook application, information repository, session management, GUI, and privacy. Step-by-step guide to set up a new application with essential keys. Understand the interaction between client/server and browser/app, including API usage. Manage generic and specific user information using Facebook Query Language (FQL). Design MySQL database for data storage. Introduction to PHP scripting. Utilize Facebook API for querying data and creating standard UI components. Practice FBML for uniform look and privacy control.

asanderson
Download Presentation

CS160 Discussion Section

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

More Related