Page 0: Page 1: So you want to build a Facebook app Facebook Developer Garage Kuala Lumpur Kamal Fariz, RSB Page 2: Basic Ingredients Page 3: http://www.facebook.com/apps/application.php?id=2345053339 Page 4: Ruby on Rails Page 5: rfacebook gem Page 6: STEP 1 Setup a new application Page 7: Page 8: Page 9: Page 10: Page 11: Page 12: Page 13: Page 14: Page 15: Page 16: Page 17: Page 18: STEP 2 Create a Rails app Page 19: A full-stack framework for developing database-backed web applications according to the Model-View-Controller pattern. Page 20: A full-stack framework for developing database-backed web applications according A bunch of stuff that to the Model-View-Controller makes web developers happy! pattern. - David Heinemeier Hansson http://flickr.com/photos/pragdave/174964316/ Page 21: MacBook-Pro:~ kamal$ rails super_gifts Page 22: MacBook-Pro:~ create create create create create create create ... create create create create create create create create create create create MacBook-Pro:~ kamal$ rails super_gifts app/controllers app/controllers/application.rb app/helpers/application_helper.rb test/test_helper.rb config/database.yml config/routes.rb public/images/rails.png public/javascripts/prototype.js public/javascripts/effects.js public/javascripts/dragdrop.js public/javascripts/controls.js public/javascripts/application.js doc/README_FOR_APP log/server.log log/production.log log/development.log log/test.log kamal$ Page 23: MacBook-Pro:~ kamal$ gem install rfacebook Page 24: 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$ Page 25: 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/ Page 26: 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$ Page 27: 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 \ Page 28: 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/ Page 29: 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$ Page 30: MacBook-Pro:super_gifts kamal$ rake facebook:setup Page 31: 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$ Page 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 Page 33: Page 34: Page 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 Page 36: MacBook-Pro:super_gifts kamal$ rake facebook:tunnel:start Page 37: 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 ====================================================== Page 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 Page 39: What happens when you access an app? Page 40: http://apps.facebook.com/super_gifts Page 41: Page 42: Page 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) [i686darwin9.0.0] [2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start: pid=68088 port=3000 Page 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) [i686darwin9.0.0] [2008-03-14 16:38:07] INFO WEBrick::HTTPServer#start: pid=68088 port=3000 Page 45: Page 46: Page 47: Page 48: Making things look right Page 49: FBML Page 50: <fb:name uid="508258787" /> => you Page 51: <fb:name uid="508258787" /> <fb:name uid="508258787" capitalize="true" /> => you => You Page 52: <fb:name uid="508258787" /> <fb:name uid="508258787" capitalize="true" /> <fb:name uid="508258787" possessive="true" /> => you => You => Your Page 53: <fb:name <fb:name <fb:name <fb:name uid="508258787" uid="508258787" uid="508258787" uid="508258787" /> capitalize="true" /> possessive="true" /> reflexive="true" /> => => => => you You Your Yourself Page 54: <fb:name <fb:name <fb:name <fb:name <fb:name uid="508258787" uid="508258787" uid="508258787" uid="508258787" uid="508258787" /> capitalize="true" /> possessive="true" /> reflexive="true" /> useyou="false" /> => => => => => you You Your Yourself Kamal Fariz Mahyuddin Page 55: <fb:name <fb:name <fb:name <fb:name <fb:name <fb:name uid="508258787" uid="508258787" uid="508258787" uid="508258787" uid="508258787" uid="510442171" /> capitalize="true" /> possessive="true" /> reflexive="true" /> useyou="false" /> /> => => => => => => you You Your Yourself Kamal Fariz Mahyuddin Daniel CerVentus Page 56: <fb:name <fb:name <fb:name <fb:name <fb:name <fb:name <fb:name uid="508258787" uid="508258787" uid="508258787" uid="508258787" uid="508258787" uid="510442171" uid="510442171" /> capitalize="true" /> possessive="true" /> reflexive="true" /> useyou="false" /> /> firstnameonly="true" /> => => => => => => => you You Your Yourself Kamal Fariz Mahyuddin Daniel CerVentus Daniel Page 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> /> /> /> /> /> Page 58: <fb:comments xid="super_gift_comments" canpost="true" returnurl="http://apps.facebook.com/super_gifts"> <fb:title>The Wall</fb:title> </fb:comments> Page 59: FBML Test Console http://developers.facebook.com/tools.php?fbml Page 60: Making things act right Page 61: API Page 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> Page 63: fbsession.notifications_send(:to_ids => ['400156', '1906543'], :notification => message) Page 64: API Test Console http://developers.facebook.com/tools.php?api Page 65: STEP 3 PROFIT!!!111!!!1!! Page 66: Resources Page 67: 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/ Page 68: Page 69: Page 70: Malaysia.rb Malaysia Ruby Brigade Page 71: 106 people in Google Groups 53 people in Facebook Group Page 72: Meets every third Thursday of the month Page 73: Malaysia.rb 3rd Meetup July 2007 Page 74: http://groups.google.com/group/malaysia-rb Page 75: