CS160 Discussion Section

1
CS160 Discussion Section
David Sun
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_at_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
3 . Facebook renders FBML to HTML
1. Browser makes request
Facebook server
2. App server returns FBML
Your app server
5
Client/Server Interaction
Browser
App Canvas
5 . Facebook renders FBML to HTML
1. Browser makes request
Facebook server
2. FB server calls App Server through callback URL
4. App server returns FBML
3. App calls FB API
Your app server
6
appinclude.php

• lt?php
• require_once 'facebook.php'
• appapikey '05a5ef15248bb9a4887e5f4154678731'
• appsecret '09901d83048d959eaad17228c8c7a95b'
• facebook new Facebook(appapikey, appsecret)
• user facebook-gtrequire_login()
• //todo change the following url to your
  callback url
• appcallbackurl 'http//pact.eecs.berkeley.edu/d
  avidsun/dstestapp/'
• //catch the exception that gets thrown if the
  cookie has an invalid session_key in it
• try
• if (!facebook-gtapi_client-gtusers_isAppAdded())
  
• facebook-gtredirect(facebook-gtget_add_url())
  
• catch (Exception ex)
• //this will clear cookies for your application
  and redirect them to a login prompt
• facebook-gtset_user(null, null)

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

8
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
  uid1211031)

9
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

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

11
Example Free Gifts
12
PHP

• Object oriented server-side scripting language.
• Becoming increasingly popular in recent years.
• Mixture of C/Pearl syntax.
• HTML-compliant
• lt?php ?gt
• Supports external resource e.g. mysql

13
PHP/MySQL

• lt?php// Connecting, selecting databaselink
  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')
• ?gt

14
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

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

16
FBML

• ltfbeditor action"?do-it" labelwidth"100"gt
  ltfbeditor-text label"Title" name"title"
  value""/gt ltfbeditor-text label"Author"
  name"author" value""/gt ltfbeditor-custom
  label"Status"gt ltselect name"state"gt
  ltoption value"0" selectedgthave readlt/optiongt
  ltoption value"1"gtam readinglt/optiongt
  ltoption value"2"gtwant to readlt/optiongt
  lt/selectgt lt/fbeditor-customgt
  ltfbeditor-textarea label"Comment"
  name"comment"/gt ltfbeditor-buttonsetgt
  ltfbeditor-button value"Add"/gt
  ltfbeditor-button value"Recommend"/gt
  ltfbeditor-cancel /gt lt/fbeditor-buttonsetgt
  lt/fbeditorgt

17
FBML

• ltfbtabsgt ltfbtab-item href'http//apps.faceboo
  k.com/yourapp/myphotos.php' title'My Photos'
  selected'true'/gt ltfbtab-item
  href'http//apps.facebook.com/yourapp/recentalbum
  s.php' title'Recent Albums' /gt lt/fbtabsgt

• ltfbsuccessgt ltfbmessagegtSuccess
  messagelt/fbmessagegt This is the success
  message text. lt/fbsuccessgt

18
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.
• ltfbvisible-to-ownergt Welcome back to your
  profile! lt/fbvisible-to-ownergt
• ltfbis-in-network network"16777229"
  uid"1230541"gt User 1230541, you are in the
  Berkeley network!lt/fbis-in-networkgt

19
Other technology

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

20
Instructional Computing

• Well 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.

21
Getting Started

• Set up MYSQL.
• Create the first application http//developers.f
  acebook.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_at_imail the URL

22
Resources

• FBMLhttp//wiki.developers.facebook.com/index.php
  /FBML
• API http//wiki.developers.facebook.com/index.php
  /API
• FQLhttp//wiki.developers.facebook.com/index.php/
  FQL
• Code Testing http//developers.facebook.com/tools
  .php
• MySQLhttp//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)