So you want to build
a Facebook app
Facebook Developer Garage Kuala Lumpur
Kamal Fariz, RSB
Basic Ingredients
http://www.facebook.com/apps/application.php?id=2345053339
Ruby on Rails
rfacebook gem
STEP 1

Setup a new application
STEP 2

Create a Rails app
A full-stack framework for
developing database-backed
web applications according
to the Model-View-Controller
pattern.
A full-stack framework for
developing database-backed
web applications according
to the Model-View-Controller
             A bunch of stuff that
            makes web developers
                    happy!
pattern.

       - David Heinemeier Hansson   http://flickr.com/photos/pragdave/174964316/
MacBook-Pro:~ kamal$ rails super_gifts
MacBook-Pro:~   kamal$ rails super_gifts
      create
      create    app/controllers
      create    app/controllers/application.rb
      create    app/helpers/application_helper.rb
      create    test/test_helper.rb
      create    config/database.yml
      create    config/routes.rb
      ...
      create    public/images/rails.png
      create    public/javascripts/prototype.js
      create    public/javascripts/effects.js
      create    public/javascripts/dragdrop.js
      create    public/javascripts/controls.js
      create    public/javascripts/application.js
      create    doc/README_FOR_APP
      create    log/server.log
      create    log/production.log
      create    log/development.log
      create    log/test.log
MacBook-Pro:~   kamal$
MacBook-Pro:~ kamal$ gem install rfacebook
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$ cd super_gifts/
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$ cd super_gifts/
MacBook-Pro:super_gifts kamal$
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$ cd super_gifts/
MacBook-Pro:super_gifts kamal$ ./script/plugin install
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$ cd super_gifts/
MacBook-Pro:super_gifts kamal$ ./script/plugin install 
http://rfacebook.rubyforge.org/svn/trunk/rfacebook/
MacBook-Pro:~ kamal$ gem install rfacebook
Successfully installed rfacebook-0.9.8
1 gem installed
Installing ri documentation for rfacebook-0.9.8...
Installing RDoc documentation for rfacebook-0.9.8...
MacBook-Pro:~ kamal$ cd super_gifts/
MacBook-Pro:super_gifts kamal$ ./script/plugin install 
http://rfacebook.rubyforge.org/svn/trunk/rfacebook/
+ ./README
+ ./Rakefile
+ ./lib/facebook_desktop_session.rb
+ ./lib/facebook_session.rb
+ ./lib/facebook_web_session.rb
...
+ ./test/facebook_web_session_test.rb
+ ./test/test_helper.rb
MacBook-Pro:super_gifts kamal$
MacBook-Pro:super_gifts kamal$ rake facebook:setup
MacBook-Pro:super_gifts kamal$ rake facebook:setup
(in /Users/kamal/super_gifts)
======================================================
Setting up RFacebook on Rails Plugin
  [1] Created config/facebook.yml <-- BE SURE TO CHANGE
THE API KEY AND SECRET
Done.
======================================================
MacBook-Pro:super_gifts kamal$
development:
  key: YOUR_API_KEY_HERE
  secret: YOUR_API_SECRET_HERE
  canvas_path: /yourAppName/
  callback_path: /path/to/your/callback/
  tunnel:
    username: yourLoginName
    host: www.yourexternaldomain.com
    port: 1234
    local_port: 5678




config/facebook.yml
development:
  key: c6578c8b63873881caad22fccfe2715b
  secret: 6b3f1f580409cd487f431e22923f00ad
  canvas_path: /super_gifts/
  callback_path: /
  tunnel:
    username: kamal
    host: deploy.ror.com.my
    port: 8080
    local_port: 3000




config/facebook.yml
MacBook-Pro:super_gifts kamal$ rake facebook:tunnel:start
MacBook-Pro:super_gifts kamal$ rake facebook:tunnel:start
(in /Users/kamal/super_gifts)
======================================================
Tunneling deploy.ror.com.my:8080 to 0.0.0.0:3000

NOTES:
* ensure that you have Rails running on your local machine at port 3000
* once logged in to the tunnel, you can visit http://deploy.ror.com.my:8080 to
view your site
* use ctrl-c to quit the tunnel
* if you have problems creating the tunnel, you may need to add the following
to /etc/ssh/sshd_config on your server:

GatewayPorts clientspecified

* if you have problems with deploy.ror.com.my timing out your ssh connection,
add the following lines to your '~/.ssh/config' file:

Host deploy.ror.com.my
  ServerAliveInterval 120

======================================================
MacBook-Pro:super_gifts kamal$ ./script/server
=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:3000
=> Ctrl-C to shutdown server; call with --help for
options
[2008-03-14 16:38:07] INFO WEBrick 1.3.1
[2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23)
[i686-darwin9.0.0]
[2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start:
pid=68088 port=3000
What happens when you
access an app?
http://apps.facebook.com/super_gifts
MacBook-Pro:super_gifts kamal$ ./script/server
=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:3000
=> Ctrl-C to shutdown server; call with --help for options
[2008-03-14 16:38:07] INFO WEBrick 1.3.1
[2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23) [i686-
darwin9.0.0]
[2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start:
pid=68088 port=3000
MacBook-Pro:super_gifts kamal$ ./script/server
=> Booting WEBrick...
=> Rails application started on http://0.0.0.0:3000
=> Ctrl-C to shutdown server; call with --help for options
[2008-03-14 16:38:07] INFO WEBrick 1.3.1
[2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23) [i686-
darwin9.0.0]
[2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start:
pid=68088 port=3000
Making things look right
FBML
<fb:name uid="508258787" />   => you
<fb:name uid="508258787" />                     => you
<fb:name uid="508258787" capitalize="true" />   => You
<fb:name uid="508258787" />                     => you
<fb:name uid="508258787" capitalize="true" />   => You
<fb:name uid="508258787" possessive="true" />   => Your
<fb:name   uid="508258787"   />                     =>   you
<fb:name   uid="508258787"   capitalize="true" />   =>   You
<fb:name   uid="508258787"   possessive="true" />   =>   Your
<fb:name   uid="508258787"   reflexive="true" />    =>   Yourself
<fb:name   uid="508258787"   />                     =>   you
<fb:name   uid="508258787"   capitalize="true" />   =>   You
<fb:name   uid="508258787"   possessive="true" />   =>   Your
<fb:name   uid="508258787"   reflexive="true" />    =>   Yourself
<fb:name   uid="508258787"   useyou="false" />      =>   Kamal Fariz Mahyuddin
<fb:name   uid="508258787"   />                     =>   you
<fb:name   uid="508258787"   capitalize="true" />   =>   You
<fb:name   uid="508258787"   possessive="true" />   =>   Your
<fb:name   uid="508258787"   reflexive="true" />    =>   Yourself
<fb:name   uid="508258787"   useyou="false" />      =>   Kamal Fariz Mahyuddin
<fb:name   uid="510442171"   />                     =>   Daniel CerVentus
<fb:name   uid="508258787"   />                        =>   you
<fb:name   uid="508258787"   capitalize="true" />      =>   You
<fb:name   uid="508258787"   possessive="true" />      =>   Your
<fb:name   uid="508258787"   reflexive="true" />       =>   Yourself
<fb:name   uid="508258787"   useyou="false" />         =>   Kamal Fariz Mahyuddin
<fb:name   uid="510442171"   />                        =>   Daniel CerVentus
<fb:name   uid="510442171"   firstnameonly="true" />   =>   Daniel
<fb:user-table cols="3">
   <fb:user-item uid="508258787"   />
   <fb:user-item uid="510442171"   />
   <fb:user-item uid="780410586"   />
   <fb:user-item uid="544248752"   />
   <fb:user-item uid="543101914"   />
</fb:user-table>
<fb:comments xid="super_gift_comments" canpost="true" returnurl="http://apps.facebook.com/super_gifts">
  <fb:title>The Wall</fb:title>
</fb:comments>
FBML Test Console
http://developers.facebook.com/tools.php?fbml
Making things act right
API
fbsession.friends_get


<?xml version="1.0" encoding="UTF-8"?>
<friends_get_response ... list="true">
  <uid>400156</uid>
  <uid>1906543</uid>
  <uid>5404778</uid>
  <uid>8602139</uid>
  ...
  <uid>5404778</uid>
  <uid>8602139</uid>
</friends_get_response>
fbsession.notifications_send(:to_ids => ['400156', '1906543'],
  :notification => message)
API Test Console
http://developers.facebook.com/tools.php?api
STEP 3

PROFIT!!!111!!!1!!
Resources
Hosting - Joyent Accelerator for Facebook Developers
http://www.joyent.com/developers/facebook/

Facebook Developers Wiki
http://wiki.developers.facebook.com/

FBML Test Console
http://developers.facebook.com/tools.php?fbml

API Test Console
http://developers.facebook.com/tools.php?api

Ruby on Rails
http://www.rubyonrails.org/

rfacebook
http://rfacebook.rubyforge.org/

facebooker
http://facebooker.rubyforge.org/
Malaysia.rb
Malaysia Ruby Brigade
106 people in Google Groups
53 people in Facebook Group
Meets every third Thursday
of the month
Malaysia.rb 3rd Meetup
July 2007
http://groups.google.com/group/malaysia-rb

So you want to build a facebook App ?

  • 1.
    So you wantto build a Facebook app Facebook Developer Garage Kuala Lumpur Kamal Fariz, RSB
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
    STEP 1 Setup anew application
  • 18.
    STEP 2 Create aRails app
  • 19.
    A full-stack frameworkfor developing database-backed web applications according to the Model-View-Controller pattern.
  • 20.
    A full-stack frameworkfor developing database-backed web applications according to the Model-View-Controller A bunch of stuff that makes web developers happy! pattern. - David Heinemeier Hansson http://flickr.com/photos/pragdave/174964316/
  • 21.
  • 22.
    MacBook-Pro:~ kamal$ rails super_gifts create create app/controllers create app/controllers/application.rb create app/helpers/application_helper.rb create test/test_helper.rb create config/database.yml create config/routes.rb ... create public/images/rails.png create public/javascripts/prototype.js create public/javascripts/effects.js create public/javascripts/dragdrop.js create public/javascripts/controls.js create public/javascripts/application.js create doc/README_FOR_APP create log/server.log create log/production.log create log/development.log create log/test.log MacBook-Pro:~ kamal$
  • 23.
    MacBook-Pro:~ kamal$ geminstall rfacebook
  • 24.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$
  • 25.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$ cd super_gifts/
  • 26.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$ cd super_gifts/ MacBook-Pro:super_gifts kamal$
  • 27.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$ cd super_gifts/ MacBook-Pro:super_gifts kamal$ ./script/plugin install
  • 28.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$ cd super_gifts/ MacBook-Pro:super_gifts kamal$ ./script/plugin install http://rfacebook.rubyforge.org/svn/trunk/rfacebook/
  • 29.
    MacBook-Pro:~ kamal$ geminstall rfacebook Successfully installed rfacebook-0.9.8 1 gem installed Installing ri documentation for rfacebook-0.9.8... Installing RDoc documentation for rfacebook-0.9.8... MacBook-Pro:~ kamal$ cd super_gifts/ MacBook-Pro:super_gifts kamal$ ./script/plugin install http://rfacebook.rubyforge.org/svn/trunk/rfacebook/ + ./README + ./Rakefile + ./lib/facebook_desktop_session.rb + ./lib/facebook_session.rb + ./lib/facebook_web_session.rb ... + ./test/facebook_web_session_test.rb + ./test/test_helper.rb MacBook-Pro:super_gifts kamal$
  • 30.
  • 31.
    MacBook-Pro:super_gifts kamal$ rakefacebook:setup (in /Users/kamal/super_gifts) ====================================================== Setting up RFacebook on Rails Plugin [1] Created config/facebook.yml <-- BE SURE TO CHANGE THE API KEY AND SECRET Done. ====================================================== MacBook-Pro:super_gifts kamal$
  • 32.
    development: key:YOUR_API_KEY_HERE secret: YOUR_API_SECRET_HERE canvas_path: /yourAppName/ callback_path: /path/to/your/callback/ tunnel: username: yourLoginName host: www.yourexternaldomain.com port: 1234 local_port: 5678 config/facebook.yml
  • 35.
    development: key:c6578c8b63873881caad22fccfe2715b secret: 6b3f1f580409cd487f431e22923f00ad canvas_path: /super_gifts/ callback_path: / tunnel: username: kamal host: deploy.ror.com.my port: 8080 local_port: 3000 config/facebook.yml
  • 36.
  • 37.
    MacBook-Pro:super_gifts kamal$ rakefacebook:tunnel:start (in /Users/kamal/super_gifts) ====================================================== Tunneling deploy.ror.com.my:8080 to 0.0.0.0:3000 NOTES: * ensure that you have Rails running on your local machine at port 3000 * once logged in to the tunnel, you can visit http://deploy.ror.com.my:8080 to view your site * use ctrl-c to quit the tunnel * if you have problems creating the tunnel, you may need to add the following to /etc/ssh/sshd_config on your server: GatewayPorts clientspecified * if you have problems with deploy.ror.com.my timing out your ssh connection, add the following lines to your '~/.ssh/config' file: Host deploy.ror.com.my ServerAliveInterval 120 ======================================================
  • 38.
    MacBook-Pro:super_gifts kamal$ ./script/server =>Booting WEBrick... => Rails application started on http://0.0.0.0:3000 => Ctrl-C to shutdown server; call with --help for options [2008-03-14 16:38:07] INFO WEBrick 1.3.1 [2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23) [i686-darwin9.0.0] [2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start: pid=68088 port=3000
  • 39.
    What happens whenyou access an app?
  • 40.
  • 43.
    MacBook-Pro:super_gifts kamal$ ./script/server =>Booting WEBrick... => Rails application started on http://0.0.0.0:3000 => Ctrl-C to shutdown server; call with --help for options [2008-03-14 16:38:07] INFO WEBrick 1.3.1 [2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23) [i686- darwin9.0.0] [2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start: pid=68088 port=3000
  • 44.
    MacBook-Pro:super_gifts kamal$ ./script/server =>Booting WEBrick... => Rails application started on http://0.0.0.0:3000 => Ctrl-C to shutdown server; call with --help for options [2008-03-14 16:38:07] INFO WEBrick 1.3.1 [2008-03-14 16:38:07] INFO ruby 1.8.6 (2007-09-23) [i686- darwin9.0.0] [2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start: pid=68088 port=3000
  • 48.
  • 49.
  • 50.
  • 51.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You
  • 52.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You <fb:name uid="508258787" possessive="true" /> => Your
  • 53.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You <fb:name uid="508258787" possessive="true" /> => Your <fb:name uid="508258787" reflexive="true" /> => Yourself
  • 54.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You <fb:name uid="508258787" possessive="true" /> => Your <fb:name uid="508258787" reflexive="true" /> => Yourself <fb:name uid="508258787" useyou="false" /> => Kamal Fariz Mahyuddin
  • 55.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You <fb:name uid="508258787" possessive="true" /> => Your <fb:name uid="508258787" reflexive="true" /> => Yourself <fb:name uid="508258787" useyou="false" /> => Kamal Fariz Mahyuddin <fb:name uid="510442171" /> => Daniel CerVentus
  • 56.
    <fb:name uid="508258787" /> => you <fb:name uid="508258787" capitalize="true" /> => You <fb:name uid="508258787" possessive="true" /> => Your <fb:name uid="508258787" reflexive="true" /> => Yourself <fb:name uid="508258787" useyou="false" /> => Kamal Fariz Mahyuddin <fb:name uid="510442171" /> => Daniel CerVentus <fb:name uid="510442171" firstnameonly="true" /> => Daniel
  • 57.
    <fb:user-table cols="3"> <fb:user-item uid="508258787" /> <fb:user-item uid="510442171" /> <fb:user-item uid="780410586" /> <fb:user-item uid="544248752" /> <fb:user-item uid="543101914" /> </fb:user-table>
  • 58.
    <fb:comments xid="super_gift_comments" canpost="true"returnurl="http://apps.facebook.com/super_gifts"> <fb:title>The Wall</fb:title> </fb:comments>
  • 59.
  • 60.
  • 61.
  • 62.
    fbsession.friends_get <?xml version="1.0" encoding="UTF-8"?> <friends_get_response... list="true"> <uid>400156</uid> <uid>1906543</uid> <uid>5404778</uid> <uid>8602139</uid> ... <uid>5404778</uid> <uid>8602139</uid> </friends_get_response>
  • 63.
    fbsession.notifications_send(:to_ids => ['400156','1906543'], :notification => message)
  • 64.
  • 65.
  • 66.
  • 67.
    Hosting - JoyentAccelerator for Facebook Developers http://www.joyent.com/developers/facebook/ Facebook Developers Wiki http://wiki.developers.facebook.com/ FBML Test Console http://developers.facebook.com/tools.php?fbml API Test Console http://developers.facebook.com/tools.php?api Ruby on Rails http://www.rubyonrails.org/ rfacebook http://rfacebook.rubyforge.org/ facebooker http://facebooker.rubyforge.org/
  • 70.
  • 71.
    106 people inGoogle Groups 53 people in Facebook Group
  • 72.
    Meets every thirdThursday of the month
  • 73.
  • 74.