Introduction to Facebook JavaScript & Python SDK
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction to Facebook JavaScript & Python SDK

on

  • 1,685 views

This is a workshop for teaching people building Facebook app with its JavaScript & Python SDK, and also included a code lab to let people do it in real

This is a workshop for teaching people building Facebook app with its JavaScript & Python SDK, and also included a code lab to let people do it in real

Statistics

Views

Total Views
1,685
Views on SlideShare
1,685
Embed Views
0

Actions

Likes
8
Downloads
64
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Facebook JavaScript & Python SDK Presentation Transcript

  • 1. Introduction to facebook JavaScript SDK ! Tutorials & Code Lab, 2013 Winter Colin Su Social Network Application facebook JavaScript SDK
  • 2. http://goo.gl/MwcsRA facebook JavaScript SDK
  • 3. Colin Su > littleq0903+sna@gmail.com > Software Engineer @ Tagtoo > National Chengchi University http://about.me/littleq facebook JavaScript SDK
  • 4. Before We Start… > Google Moderator: http://goo.gl/OVNszf
 Ask question here! > Code Lab Repo: https://github.com/littleq0903/fb-js-codelab
 The code you will need it in the practice, check out the Wiki! > Turn your smartphone to the vibrating mode facebook JavaScript SDK
  • 5. Outline > Facebook Developers Website > Facebook App > Facebook Components > Facebook JavaScript SDK (Software Development Kit) > Code Lab for Facebook JavaScript SDK facebook JavaScript SDK
  • 6. Basic Knowledges Chapter. 0 facebook JavaScript SDK
  • 7. Facebook Developer Site Developer Portal for Facebook App Developers > developers.facebook.com > Documentation & Tutorials > Facebook Developer Apps Dashboard > Download SDK > Online Tools facebook JavaScript SDK
  • 8. Facebook Developer Dashboard You can see all your apps information here facebook JavaScript SDK
  • 9. Facebook App The most basic unit for a developer on Facebook > > Permissions > > > > Insights > > Developer Facebook App Developer Alert > > > > Settings > > Access Token App ID API Keys Request Permissions Developer Roles Daily Report Active User Statistic Sharing Report Breaking Changes New Updates Review Status Domain Settings Testing Go to Production facebook JavaScript SDK
  • 10. Facebook Component What can you do with Facebook JavaScript SDK? > Graph API - get data in and out of Facebook’s Social Graph > Login - authenticate Facebook users on your website > Social Plugins - don’t rebuild the wheel, take the power from Facebook facebook JavaScript SDK
  • 11. Social Plugins You know, that like button > Like Button > Activity Feed > Share/Send Button > Recommendations Box/Bar > Embedded Posts > Like Box > Follow Button > Registration > Comments > Facepile facebook JavaScript SDK
  • 12. facebook JavaScript SDK
  • 13. Authentication The Key to The Facebook World > Facebook - username and password > Facebook API - access token > Preventing server gets your credentials directly facebook JavaScript SDK
  • 14. Authentication In The Real World Example… Not easy to destroy when stolen Username/Password Easy to destroy when stolen Access Token facebook JavaScript SDK
  • 15. Graph API Data Form of Facebook, with RESTful API  > Everything on Facebook forms a graph N > > Your profile is an object, and has a bunch of properties Every object will have an ID as the identity am e y thda Bir Me Work Ge E-m ail nd er facebook JavaScript SDK
  • 16. Graph API Alice Bob Data Form of Facebook, with RESTful API  > Some objects will be connected with Relations > You could fetch more data on Facebook through the relations Friends Photos Me Posts “Today I go to… “Damn, I hate school… facebook JavaScript SDK
  • 17. Facebook Dialog Redirect some actions, let Facebook do it! > Pop-up style Facebook widget > Examples - Friend Request Dialog - Login Dialog - Friends Dialog - Send Dialog facebook JavaScript SDK
  • 18. Technical Details Chapter. 1 facebook JavaScript SDK
  • 19. What Can JavaScript SDK Do > Authentication
 Server side cannot achieve this, the most important part of building Facebook apps > Interact with your website users
 the thing could be done by ONLY JavaScript > Load Facebook pre-defined components
 like buttons, comments, registration form in a second > Pre-defined functions from Facebook
 out-of-box APIs and don’t rebuild the wheel facebook JavaScript SDK
  • 20. Authentication Workflow of Authentication Redirect user to FB for authorizing your app Facebook response user’s access token to your function user type username & password to login and authorize Rock it up! JS SDK gets authorized and feedback on the interface or program facebook JavaScript SDK
  • 21. Authentication > FB.login()
 tell Facebook it’s about time to start the authentication flow > FB.Event.subscribe(event, callback)
 tell Facebook what to do when user got logged in facebook JavaScript SDK
  • 22. Graph API > Callback model applied > RESTful knowledge facebook JavaScript SDK
  • 23. Callback Model The most important part while using other’s JS library > > one of JavaScript patterns make sure action has been done function callback Data Could you plz do this for me? Arguments I’ve done, here you go! Job Okay! I will tell callback when I finished facebook JavaScript SDK
  • 24. RESTful API Model > HTTP Method: GET, POST, DELETE, PUT… > GET /user/{id}
 Fetch the information of the user with id {id} > POST /user
 Create a user > DELETE /user/{id}
 Delete the user with id {id} facebook JavaScript SDK
  • 25. Graph API A Simple GET Example > FB.api( graph_path , callback ) FB.api(“/me”, function(response){
 console.log(response);
 }); { "id": "1681390745", "name": "Colin Su", "first_name": "Colin", "last_name": "Su", "link": "https://www.facebook.com/littleq0903", "username": "littleq0903", "work": [ ... ], "gender": "male", "timezone": 8, "locale": "en_US", "verified": true, "updated_time": "2013-12-02T17:44:06+0000" } JavaScript Result facebook JavaScript SDK
  • 26. Graph API A Simple GET Example > FB.api( graph_path , callback ) FB.api(“/me/posts”, function(response){ // will response an array in “data”
 console.log(response);
 }); { "data": [ {post}, {post}, {post}, {post}, {post} ] } JavaScript Result facebook JavaScript SDK
  • 27. Graph API A Simple POST Example > FB.api( graph_path , type , options , callback ) var body = 'Reading JS SDK documentation'; FB.api('/me/feed', 'post', { message: body }, function(response) { if (!response || response.error) { console.log(‘Error occured'); } else { console.log(‘Post ID: ' + response.id); } }); JavaScript Post ID: 6892345 Result facebook JavaScript SDK
  • 28. Social Plugins Facebook’s Native Component on Your Website > out-of-box Facebook plugins > no programmatic stuffs
 it’s just a piece of HTML snippet > configure it by adjusting DOM attributes facebook JavaScript SDK
  • 29. Social Plugins Code Example > Insert a snippet into your HTML code <div class="fb-like" data-href="https://www.facebook.com"> </div> HTML Result facebook JavaScript SDK
  • 30. Dialogs Code Example > FB.ui(parameters , callback) FB.ui({ method: 'friends', id: 'brent' }, function(response){}); JavaScript Result facebook JavaScript SDK
  • 31. Dialogs Code Example > FB.ui(parameters , callback) <a href=“https://www.facebook.com/dialog/friends/? id=brent &app_id=458358780877780 &redirect_uri=https://mightylowlands-6381.herokuapp.com/“>Add Brent as Friend</ a> HTML Add Brent as Friend Result facebook JavaScript SDK
  • 32. Developer Tools Chapter. 2 facebook JavaScript SDK
  • 33. Facebook Developer Tools There are some tools to help out your development of Facebook app > Graph API Explorer
 Examine the result of Graph API queries > JavaScript Test Console
 Verify your JavaScript code’s validation and examine the result > Access Token Tool
 For generating access tokens, for streamline your testing facebook JavaScript SDK
  • 34. Graph API Explorer > simulate querying/FQL > simulate GET/POST/DELETE request > filter fields > generate/use access token easily facebook JavaScript SDK
  • 35. JavaScript Test Console facebook JavaScript SDK
  • 36. Access Token Tool > generate tokens easily > user/app tokens in one place > test various tokens for you app facebook JavaScript SDK
  • 37. Code Lab Chapter. 3 facebook JavaScript SDK
  • 38. In This Code Lab You will learn… > how to integrate Facebook JavaScript SDK into your project > how to authenticate user’s Facebook account > how to access Graph API with users’ credentials > how to place a Facebook cool widget on your page > how to use Facebook dialog to save your time facebook JavaScript SDK
  • 39. Before We Start… Get prepared > Google Moderator: http://goo.gl/OVNszf
 Ask question here! > Code Lab Repo: https://github.com/littleq0903/fb-js-codelab
 The code you will need it in the practice, check out the Wiki! > Download the CodeLab pack
 https://github.com/littleq0903/fb-js-codelab/releases/download/v1.0/fb-js-codelab.tgz > Ready your editor, web browser, and passion! facebook JavaScript SDK
  • 40. Introduction to facebook Python SDK ! Tutorials & Code Lab, 2013 Winter Colin Su Social Network Application facebook JavaScript SDK
  • 41. http://goo.gl/MwcsRA facebook JavaScript SDK
  • 42. Before We Start… > Code Lab Repo: https://github.com/littleq0903/fb-python-codelab
 The code you will need it in the practice, check out the Wiki! > Turn your smartphone to the vibrating mode facebook JavaScript SDK
  • 43. Outline > Web Application > Heroku > Facebook Python SDK facebook JavaScript SDK
  • 44. Web Application Chapter. 4 facebook JavaScript SDK
  • 45. Website v.s. Web Application > Website: display information to visitors > Web Application: interact with users, response users’ various request facebook JavaScript SDK
  • 46. Web Application > Front End: interact with users (JavaScript)
 You’ve learned. > Back End: deal with data (Python)
 The part related to this presentation facebook JavaScript SDK
  • 47. Stacks Web Framework Web Server Web Interface User User User facebook JavaScript SDK
  • 48. Heroku > Platform as a Service (PaaS) > Easy to setup > Your code is everything http://heroku.com facebook JavaScript SDK
  • 49. Workflow The Story of a Heroku Application Create a Heroku Application Write Your Code Deploy to Heroku Test facebook JavaScript SDK
  • 50. Technical Detail Chapter. 5 facebook JavaScript SDK
  • 51. JSON Serialization > JSON to Python Object mapping > json module > json.loads(str) json string -> python object > json.dumps(obj) python object -> json string facebook JavaScript SDK
  • 52. Load Example of JSON Serialization import json {u'a': [1, 2, 3, 4, 5], u'b': 2} ! # is a string text = '{"a": [1,2,3,4,5], "b": 2}' ! result = json.loads(text) ! print result Python Console facebook JavaScript SDK
  • 53. Dump Example of JSON Serialization import json {"a": [1,2,3,4,5], "b": 2} ! # is a dictionary data = {u'a': [1, 2, 3, 4, 5], u'b': 2} ! result = json.dumps(data) ! print result Python Console facebook JavaScript SDK
  • 54. Bottle.py > Web Framework
 WSGI-Compatible > Writing functions as Request Handler > Only one file as library > http://bottlepy.org
 Documentation facebook JavaScript SDK
  • 55. Request Handler Example Example of Bottle’s Request Handler from bottle import Bottle hello world ! #create your web application app = Bottle() ! #define a function and point to /index @app.route('/index') def index(): return 'hello world' Python /index facebook JavaScript SDK
  • 56. URL Argument Example of Bottle’s Request Handler from bottle import Bottle hello world ! #create your web application app = Bottle() ! # <name> will be the 'name' argument in the function @app.route('/index/<name>') def index(name='default'): return "hello " + name Python /index/world facebook JavaScript SDK
  • 57. Access Request Example of Bottle’s Request Handler from bottle import Bottle #import request function from bottle import request <LocalRequest: GET http://localhost:8080/index> ! #create your web application app = Bottle() ! #define a function and point to /index @app.route('/index') def index(): return request Python /index facebook JavaScript SDK
  • 58. Heroku Deployment > First time, run heroku login to authenticate > Must be a Git repository: git init > heroku create
 Create a Heroku app and add it to git remotes > heroku config:set var1=val1 var2=val2
 Set Environment Variables on Heroku > git push heroku master
 Deploy facebook JavaScript SDK
  • 59. Git Remotes > Git's remote branch > Github, Heroku or your own Git server > Your Repo git push <remote> <branch> Github Heroku facebook JavaScript SDK
  • 60. Installing Python Libraries How to made Heroku server install Python packages for you > requirement.txt
 Create this file and put it under the root folder > one package per line > <package name> > <package name>==<version> > (local) pip install -r ./requirements.txt facebook JavaScript SDK
  • 61. Facebook Python SDK > access Facebook Graph > query with FQL > Operating Data with Python is easier than JavaScript facebook x facebook JavaScript SDK
  • 62. Documentation? https://github.com/pythonforfacebook/facebook-sdk/blob/master/facebook.py > In Python, sometimes source code is the best documentation > Doc string > So does bottle.py facebook JavaScript SDK
  • 63. Graph API > facebook.GraphAPI( [access_token] ) > access token is not necessary facebook JavaScript SDK
  • 64. Graph API Methods > get_object > put_like > get_connections > delete_object > fql > put_photo > put_object facebook JavaScript SDK
  • 65. Get Object Example of Facebook Python SDK import facebook ! token = "..." ! graph = Facebook.GraphAPI(token) ! me = graph.get_object('me') ! print me Python {u'first_name': u'Colin', u'gender': u'male', u'id': u'1681390745', u'last_name': u'Su', u'link': u'https://www.facebook.com/littleq0903', u'locale': u'en_US', u'name': u'Colin Su', u'timezone': 8, u'updated_time': u'2013-12-05T15:31:10+0000', u'username': u'littleq0903', u'verified': True, u'work': [{u'employer': {u'id': u'240616999424812', u'name': u'Tagtoo u5854u5716u79d1u6280'}, u'location': {u'id': u'110765362279102', u'name': u'Taipei, Taiwan'}, u'position': {u'id': u'109542932398298', u'name': u'Software Engineer'}, u'start_date': u'2013-09-30'}, {u'employer': {u'id': u'454607821247176', u'name': u'g0v.tw u53f0u7063u96f6u6642u653fu5e9c'}}]} Console facebook JavaScript SDK
  • 66. Put Object Example of Facebook Python SDK ! Colin Su 3 seconds ago from Graph API --------------------------- token = "..." ! ! I'm testing api ! import facebook msg = "I'm testing api" ! graph = Facebook.GraphAPI(token) ! graph.put_object('me', 'feed', message=msg) --------------------------Like . Comment . Promote . Share --------------------------Obama and Mark Zurgerburg like this. --------------------------Someone lalalalala 5 seconds ago . Like ! Somebody ? 10 seconds ago . Like ! ! Python Facebook facebook JavaScript SDK
  • 67. FQL > Facebook Query Language > SQL-like query for Facebook data > support nested querying, batch querying facebook JavaScript SDK
  • 68. FQL Query Example of Facebook Python SDK import facebook ! [{u'url': u'http://www.facebook.com/littleq0903', u'username': u'littleq0903', u'name': u'Colin Su'}] token = "..." ! graph = Facebook.GraphAPI(token) ! # me() is the built-in function for returning your id query = "SELECT name,url,username FROM profile WHERE id = me()" ! print graph.fql(query) Python Console facebook JavaScript SDK
  • 69. Python SDK Code Lab Chapter. 6 facebook JavaScript SDK
  • 70. Code Lab Repository > littleq0903/fb-python-codelab @ Github > Wiki -> Code Lab Checkpoints > Download the sample package facebook JavaScript SDK
  • 71. EOF facebook JavaScript SDK