Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

So you want to build a facebook App ?

591 views

Published on

  • Be the first to comment

  • Be the first to like this

So you want to build a facebook App ?

  1. 1. So you want to builda Facebook appFacebook Developer Garage Kuala LumpurKamal Fariz, RSB
  2. 2. Basic Ingredients
  3. 3. http://www.facebook.com/apps/application.php?id=2345053339
  4. 4. Ruby on Rails
  5. 5. rfacebook gem
  6. 6. STEP 1Setup a new application
  7. 7. STEP 2Create a Rails app
  8. 8. A full-stack framework fordeveloping database-backedweb applications accordingto the Model-View-Controllerpattern.
  9. 9. A full-stack framework fordeveloping database-backedweb applications accordingto the Model-View-Controller A bunch of stuff that makes web developers happy!pattern. - David Heinemeier Hansson http://flickr.com/photos/pragdave/174964316/
  10. 10. MacBook-Pro:~ kamal$ rails super_gifts
  11. 11. 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.logMacBook-Pro:~ kamal$
  12. 12. MacBook-Pro:~ kamal$ gem install rfacebook
  13. 13. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling ri documentation for rfacebook-0.9.8...Installing RDoc documentation for rfacebook-0.9.8...MacBook-Pro:~ kamal$
  14. 14. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling ri documentation for rfacebook-0.9.8...Installing RDoc documentation for rfacebook-0.9.8...MacBook-Pro:~ kamal$ cd super_gifts/
  15. 15. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling 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$
  16. 16. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling 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
  17. 17. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling 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/
  18. 18. MacBook-Pro:~ kamal$ gem install rfacebookSuccessfully installed rfacebook-0.9.81 gem installedInstalling 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.rbMacBook-Pro:super_gifts kamal$
  19. 19. MacBook-Pro:super_gifts kamal$ rake facebook:setup
  20. 20. 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 CHANGETHE API KEY AND SECRETDone.======================================================MacBook-Pro:super_gifts kamal$
  21. 21. 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: 5678config/facebook.yml
  22. 22. development: key: c6578c8b63873881caad22fccfe2715b secret: 6b3f1f580409cd487f431e22923f00ad canvas_path: /super_gifts/ callback_path: / tunnel: username: kamal host: deploy.ror.com.my port: 8080 local_port: 3000config/facebook.yml
  23. 23. MacBook-Pro:super_gifts kamal$ rake facebook:tunnel:start
  24. 24. 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:3000NOTES:* 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 toview your site* use ctrl-c to quit the tunnel* if you have problems creating the tunnel, you may need to add the followingto /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======================================================
  25. 25. 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 foroptions[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
  26. 26. What happens when youaccess an app?
  27. 27. http://apps.facebook.com/super_gifts
  28. 28. 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
  29. 29. 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
  30. 30. Making things look right
  31. 31. FBML
  32. 32. <fb:name uid="508258787" /> => you
  33. 33. <fb:name uid="508258787" /> => you<fb:name uid="508258787" capitalize="true" /> => You
  34. 34. <fb:name uid="508258787" /> => you<fb:name uid="508258787" capitalize="true" /> => You<fb:name uid="508258787" possessive="true" /> => Your
  35. 35. <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
  36. 36. <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
  37. 37. <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
  38. 38. <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
  39. 39. <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>
  40. 40. <fb:comments xid="super_gift_comments" canpost="true" returnurl="http://apps.facebook.com/super_gifts"> <fb:title>The Wall</fb:title></fb:comments>
  41. 41. FBML Test Consolehttp://developers.facebook.com/tools.php?fbml
  42. 42. Making things act right
  43. 43. API
  44. 44. 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>
  45. 45. fbsession.notifications_send(:to_ids => [400156, 1906543], :notification => message)
  46. 46. API Test Consolehttp://developers.facebook.com/tools.php?api
  47. 47. STEP 3PROFIT!!!111!!!1!!
  48. 48. Resources
  49. 49. Hosting - Joyent Accelerator for Facebook Developershttp://www.joyent.com/developers/facebook/Facebook Developers Wikihttp://wiki.developers.facebook.com/FBML Test Consolehttp://developers.facebook.com/tools.php?fbmlAPI Test Consolehttp://developers.facebook.com/tools.php?apiRuby on Railshttp://www.rubyonrails.org/rfacebookhttp://rfacebook.rubyforge.org/facebookerhttp://facebooker.rubyforge.org/
  50. 50. Malaysia.rbMalaysia Ruby Brigade
  51. 51. 106 people in Google Groups53 people in Facebook Group
  52. 52. Meets every third Thursdayof the month
  53. 53. Malaysia.rb 3rd MeetupJuly 2007
  54. 54. http://groups.google.com/group/malaysia-rb

×