The Interaction Design Of APIs
Upcoming SlideShare
Loading in...5
×
 

The Interaction Design Of APIs

on

  • 11,559 views

 

Statistics

Views

Total Views
11,559
Views on SlideShare
10,561
Embed Views
998

Actions

Likes
42
Downloads
244
Comments
2

10 Embeds 998

http://alankang.tistory.com 921
http://www.slideshare.net 31
http://www.hanrss.com 17
http://coderwall.com 16
https://intra.humap.com 6
http://www.linkedin.com 3
http://www.health.medicbd.com 1
http://andrei-pamula.tumblr.com 1
http://www.techgig.com 1
http://static.slidesharecdn.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

The Interaction Design Of APIs The Interaction Design Of APIs Presentation Transcript

  • The Interaction Design of APIs Stanford HCI Group Seminar on People, Computers, and Design April 17, 2009 Alex Payne API Lead, Twitter, Inc.
  • Select Language ... What is Twitter? Watch a video! What? Why? How? Please sign in user name or email address: password: Sign In » Remember me Forgot password? Click here. Already using Twitter from Twitter is a service for friends, family, and co–workers your phone? Click here. to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing? Get Started—Join! Suddenly, it seems as though When I first started doing it, I Incredibly useful all the world's a-twitter. thought, 'geez, not another website to worry about Wired updating and checking', but
  • FrontPage Create a page EDIT VIEW Pages & Files Upload files Settings FrontPage Help last edited by Doug Williams 1 day ago Page history Search Pages and Files Welcome to the Twitter API wiki. What are you coding? Send a link Put this page in a different folder Documentation Frequently asked questions Add Tags REST API Documentation Page Security Search API Documentation REST API Changelog Migrating to followers terminology Navigator Official resources Official Resources REST API issue tracker - file bugs, request features FrontPage Request whitelisting Libraries @twitterapi - follow to get updates about the API Twitter API Announcements Google Group Migrating to followers terminology Moderators OAuth REST API Changelog OAuth FAQ OAuth Examples REST API Documentation Pages No Files Community Resources SideBar Twitter Development Talk Google Group
  • Alex Payne writes online here. See also the archive, books & talks. The five most recent posts. Mending The Bitter Absence advertisement of Reasoned Technical Discussion There’s a counterpart to my post on technology journalism Delicious bookmarks on that I’ve been hesitant to write. Just as most professional your iPhone. Now journalism on high technology fails us today, so too does available in the App Store! the online discussion amongst technologists as a POWERED by FUSION community. Social media (blogs, community news sites like Reddit and Hacker News, Twitter and such) have swept in to fill a vacuum between peer-reviewed academic journals and water cooler conversation amongst software engineers. Anyone with a blog can publish development war stories, benchmarks, or an interview with another developer. It’s a world of engineer’s notebooks laid wide open, and in theory, we should be more informed as a profession than we ever have been. In practice, the conversations that are most widely heard in the tech community are full of inaccuracies, manufactured drama, ignorance, and unbridled opinion. In discussing these Internet-spanning debates with non- technical friends, comparisons to Hollywood tabloids come first to mind. It’s a time sink for an industry that should be a shining example of how to
  • What’s an API?
  • Why do we care about making good APIs?
  • Why does this matter to an HCI person?
  • The Twitter API 2 years old • 40 methods • 4,500+ registered developers • 5,000+ registered applications • multiple books (English, Japanese) • an even larger “invisible” ecosystem • hundreds of millions of requests per day •
  • What do people build with the Twitter API?
  • How does it feel?
  • http://twitter.com/statuses/show/1516683992.json { quot;textquot;:quot;Kitty, don't boss me. I will feed you in due time.quot;, quot;truncatedquot;:false, quot;in_reply_to_status_idquot;:null, quot;in_reply_to_user_idquot;:null, quot;favoritedquot;:false, quot;in_reply_to_screen_namequot;:null, quot;idquot;:1516683992, quot;sourcequot;:quot;webquot;, quot;created_atquot;:quot;Tue Apr 14 13:47:41 +0000 2009quot;, quot;userquot;: { quot;statuses_countquot;:6426, quot;descriptionquot;:quot;No ideas but in things.quot;, quot;profile_background_tilequot;:false, quot;utc_osetquot;:-28800, quot;profile_text_colorquot;:quot;41446cquot;, quot;followingquot;:true, quot;profile_link_colorquot;:quot;ad102dquot;, quot;urlquot;:quot;http://blog.evanweaver.comquot;, quot;namequot;:quot;Evanquot;, quot;notificationsquot;:false, quot;profile_sidebar_fill_colorquot;:quot;quot;, quot;followers_countquot;:2308, quot;protectedquot;:false, quot;profile_background_image_urlquot;:quot;http://s3.amazonaws.com/twitter_production/profile_background_images /6920721/BD2_1024-1.jpgquot;, quot;friends_countquot;:117, quot;profile_sidebar_border_colorquot;:quot;d5d4ecquot;, quot;time_zonequot;:quot;Pacific Time (US & Canada)quot;, quot;profile_image_urlquot;:quot;http://s3.amazonaws.com/twitter_production/profile_images/111994468/ BD2_1024_2-1_normal.jpgquot;, quot;favourites_countquot;:1032, quot;locationquot;:quot;Russian Hill, Californiaquot;, quot;idquot;:761613, quot;created_atquot;:quot;Fri Feb 09 22:59:00 +0000 2007quot;, quot;profile_background_colorquot;:quot;7b9ab7quot;, quot;screen_namequot;:quot;evanquot; } }
  • What makes it easy? low barrier to entry: “just poke at it” • human-readable names • logical nesting of resources • predictable output • constrained set of object models •
  • What frustrates developers? inconsistency • anything vague or unpredictable • lack of user interface conventions • network and performance issues •
  • A shameful glimpse at bad APIs.
  • import java.util.{Calendar, Date} lazy val updatedDate = { val rfc3339 = new SimpleDateFormat(quot;yyyy-MM-dd'T'h:m:ss'-05:00'quot;) val calendar = Calendar.getInstance calendar.set(year.toInt, month.toInt - 1, day.toInt) rfc3339.format(calendar.getTime) } java.util.Calendar, java.util.Date
  • //Call SecKeychainAddGenericPassword to add a new password to the keychain: OSStatus StorePasswordKeychain (void* password,UInt32 passwordLength) { OSStatus status; status = SecKeychainAddGenericPassword ( NULL, // default keychain 10, // length of service name quot;SurfWriterquot;, // service name 10, // length of account name quot;MyUserAcctquot;, // account name passwordLength, // length of password password, // pointer to password data NULL // the item reference ); return (status); } //Call SecKeychainFindGenericPassword to get a password from the keychain: OSStatus GetPasswordKeychain (void *passwordData,UInt32 *passwordLength, SecKeychainItemRef *itemRef) { OSStatus status1 ; status1 = SecKeychainFindGenericPassword ( NULL, // default keychain 10, // length of service name quot;SurfWriterquot;, // service name 10, // length of account name quot;MyUserAcctquot;, // account name passwordLength, // length of password passwordData, // pointer to password data itemRef // the item reference ); return (status1); } //Call SecKeychainItemModifyAttributesAndData to change the password for // an item already in the keychain: OSStatus ChangePasswordKeychain (SecKeychainItemRef itemRef) { OSStatus status; void * password = quot;myNewP4sSw0rDquot;; UInt32 passwordLength = strlen(password); status = SecKeychainItemModifyAttributesAndData ( itemRef, // the item reference Keychain Services, Mac OS X NULL, // no change to attributes passwordLength, // length of password password // pointer to password data
  • BOOL CALLBACK AboutDlgProc(HWND hwnd, UINT Message, case WM_COMMAND: WPARAM wParam, LPARAM lParam) switch(LOWORD(wParam)) { { switch(Message) case ID_HELP_ABOUT: { case WM_INITDIALOG: { int ret = DialogBox(GetModuleHandle(NULL), return TRUE; MAKEINTRESOURCE(IDD_ABOUT), hwnd, AboutDlgProc); case WM_COMMAND: if(ret == IDOK){ switch(LOWORD(wParam)) MessageBox(hwnd, quot;Dialog exited with IDOK.quot;, quot;Noticequot;, { MB_OK | MB_ICONINFORMATION); case IDOK: } EndDialog(hwnd, IDOK); else if(ret == IDCANCEL){ break; MessageBox(hwnd, quot;Dialog exited with IDCANCEL.quot;, quot;Noticequot;, case IDCANCEL: MB_OK | MB_ICONINFORMATION); EndDialog(hwnd, IDCANCEL); } break; else if(ret == -1){ } MessageBox(hwnd, quot;Dialog failed!quot;, quot;Errorquot;, break; MB_OK | MB_ICONINFORMATION); default: } return FALSE; } } return TRUE; break; } // Other menu commands... } break; Win32
  • http://api.yelp.com/neighborhood_search?location=1512%20Shattuck%20Avenue%2A%20Berkeley%2A%20CA&ywsid=XXXXXXXXXXXXXXXXXX {'message': {'code': 0, 'text': 'OK', 'version': '1.1.0'}, 'neighborhoods': [{'city': 'Berkeley', 'name': 'Gourmet Ghetto', 'borough': '', 'state': 'CA', 'state_code': 'CA', 'country': 'USA', 'country_code': 'US', 'url': 'http://yelp.com/search?/find_loc=Gourmet+Ghetto%2C+Berkeley%2C+CA' }, {'city': 'Berkeley', 'name': 'North Berkeley', 'borough': '', 'state': 'CA', 'state_code': 'CA', 'country': 'USA', 'country_code': 'US', 'url': ' http://yelp.com/search?/find_loc=North+Berkeley%2C+Berkeley%2C+CA'}] } Yelp
  • A brief tour of excellent APIs.
  • class CreateSavedSearches < ActiveRecord::Migration def self.up create_table :saved_searches do |t| t.column :user_id, :integer t.column :name, :string t.column :query, :string t.column :position, :integer t.timestamps end add_index :saved_searches, :user_id end def self.down drop_table :saved_searches end end Rails Migrations
  • $('form#login') .find('label.optional').hide().end() .find('input:password').css('border', '1px solid red').end() .submit(function() { return confirm('Are you sure you want to submit?'); }); jQuery
  • import scala.actors.Actor._ val echoActor = actor { loop { receive { case msg => println(quot;received: quot; + msg) } } } echoActor ! quot;helloquot; echoActor ! quot;world!quot; Scala Actors
  • What are the qualities of good APIs?
  • Explorability.
  • REST vs WS-* A case study in explorable APIs.
  • Smalltalk Environment
  • SLIME (the Superior Lisp Interaction Mode for Emacs)
  • Predictability.
  • ODBC, JDBC, etc. A case study in predictable APIs.
  • Consistency.
  • The options Hash in Rails A case study in consistent APIs.
  • file_field(:post, :attached, :accept => 'text/html') file_field(:attachment, :file, :class => 'file_input') text_area(:post, :body, :cols => 20, :rows => 40) text_area(:comment, :text, :size => quot;20x30quot;) text_area(:entry, :body, :size => quot;20x20quot;, :disabled => 'disabled') submit_to_remote 'create_btn', 'Create', :url => { :action => 'create' } Rails Helpers
  • The Humane API: explorable predictable consistent
  • Thank you for listening. Questions?