People using your web app also use many other online services. You'll often want to pull data from those other services into your app, or publish data from your app out to other services. In this talk, Randy will explain the terminology you need to know, share best practices and techniques for integrating, and walk through two real-world examples. You'll leave with code snippets to help you get started integrating.

1. Integrating With
Third-Party APIs
Randy Hoyt
@randyhoyt

3. Overview
• APIs: Defined
• Three Examples:
1. Get Treehouse Badges
2. Get ShopLocket Products
3. Post Facebook & Twitter Updates
• Best Practices
@randyhoyt

4. API

5. Application Programming Interface

6. A point where two systems,
subjects, organizations, etc.,
meet and interact.
Interface, http://dictionary.com/browse/interface

7. [Keyboard]

8. [Remote Control]

9. [Remote Control]

10. [Lock and Key]

11. An interface for software
components to communicate
with each other.
Wikipedia: API, http://trhou.se/defineAPI

12. API Examples
• Android SDK: Camera API
@randyhoyt

13. import android.hardware.Camera;
Camera.getNumberOfCameras();
Camera.open(cameraId);

14. API Examples
• Android SDK: Camera API
• WordPress: Plugin API
@randyhoyt

15. <?php
/*
Plugin Name: Treehouse Badges
Description: Displays the badges ...
Version: 1.0
*/
?>
add_action('init','treehouse_badges_init');
...

16. API Examples
• Android SDK: Camera API
• WordPress: Plugin API
• HTML5: Canvas API
@randyhoyt

17. var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 40, 380, "#000000");
context.drawImage(img, x, y, 100, 77);

18. Web APIs

19. REST

20. Representational State Transfer

21. RESTful API

22. Example #1: Treehouse

23. [Treehouse screenshot]

24. JavaScript Object Notation:
Text-based open standard
designed for human-readable
data interchange.
Wikipedia: JSON, http://trhou.se/defineJSON

25. {
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
Wikipedia: JSON, http://trhou.se/defineJSON

26. [Treehouse JSON]

27. [HTML]

28. Asynchronous JavaScript and XML:
Technique used by the browser to
retrieve data from a server in the
background without interfering with
the existing page
Wikipedia: Ajax, http://trhou.se/defineAJAX

29. [AJAX Request Code]

30. [Badge Code]

31. [Badge Display]

40. <?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => 'http://teamtreehou...
));
$resp = curl_exec($curl);
curl_close($curl);
?>

41. GET
Request
with
HTTPful
HTTPful, http://phphttpclient.com/

42. GET
Request
with
HTTParty
HTTParty, http://httparty.rubyforge.org/

43. GET
Request
with
WordPress
HTTP
API
WordPress, http://codex.wordpress.org/HTTP_API

49. API Questions
• Does it have to
be real time?
• What if something
goes wrong?
@randyhoyt

50. Example #2: ShopLocket

51. [Screenshot of WP]

52. [Screenshot of WordPress]

53. [Screenshot of Product Picker]

54. [Screenshot of Product Picker]

55. [Screenshot of Shortcode]

56. [Screenshot of Website]

57. Authentication

58. OAuth
An open protocol to allow secure
authorization in a simple and standard
method from web, mobile and desktop
applications.
OAuth, http://oauth.net/

59. App ID
5f4a89f2d6655ac7a8859343d6d15257
9410e7b659b200e00aaf3721cf46269e
App Secret
fa963a1ef3702c16d934500f7621697e2
d6bfd05d3ef1751a32bdeb2a0599020

60. [ShopLocket]

61. [ShopLocket Login]

62. [ShopLocket]

63. /? code = 53fe... & state = auth...

64. $args:
code = $_GET["code"]
app id = [app id]
app secret = [app secret]
[GET Request]
$response = wp_remote_post(
'https://www.shoplocket.com/'
. 'oauth/token',
$args
);

65. Token:
310826b20a535a422ccaa46d65c7065f
83e403b9218a38962ab4e43021b93585

66. [Token]

67. API Questions
• Does it have to
be real time?
• What if something
goes wrong?
@randyhoyt

76. [Refresh Button]

78. Example #3: Facebook & Twitter

79. [Screenshot of Cultivatr]

80. [Screenshot of Edit Screen]

81. [Screenshot of Date Picker]

82. [Diagram]

87. API Questions
• Does it have to
be real time?
• What if something
goes wrong?
@randyhoyt

88. REST: Types of Requests
• GET (Read)
• POST (Create)
• PUT (Update)
• DELETE (Delete)
@randyhoyt

89. require
'../tmhOAuth.php';
require
'../tmhUtilities.php';
$tw
=
new
tmhOAuth(array(
'consumer_key'
=>
'APP_ID',
'consumer_secret'
=>
'APP_SECRET',
'user_token'
=>
'A_USER_TOKEN',
'user_secret'
=>
'A_USER_SECRET',
));
$code
=
$tw-­‐>request(
'POST',
$tw-­‐>url('1/statuses/update'),
array('status'
=>
'My
Tweet')
);
Twitter Libraries, https://dev.twitter.com/docs/twitter-libraries

90. Best Practices

91. Best Practices
• Read the Documentation
• Use Available Libraries
• Log Everything
@randyhoyt

92. Questions?
@randyhoyt