api
DESCRIPTION
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.TRANSCRIPT
![Page 1: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/1.jpg)
@randyhoyt
Randy Hoyt
Integrating With Third-Party APIs
![Page 2: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/2.jpg)
![Page 3: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/3.jpg)
@randyhoyt
• APIs: Defined
• Three Examples:
1. Get Treehouse Badges
2. Get ShopLocket Products
3. Post Facebook & Twitter Updates
• Best Practices
Overview
![Page 4: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/4.jpg)
API
![Page 5: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/5.jpg)
Application Programming Interface
![Page 6: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/6.jpg)
A point where two systems, subjects, organizations, etc., meet and interact.
Interface, http://dictionary.com/browse/interface
![Page 7: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/7.jpg)
[Keyboard]
![Page 8: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/8.jpg)
[Remote Control]
![Page 9: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/9.jpg)
[Remote Control]
![Page 10: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/10.jpg)
[Lock and Key]
![Page 11: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/11.jpg)
An interface for software components to communicate with each other.
Wikipedia: API, http://trhou.se/defineAPI
![Page 12: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/12.jpg)
@randyhoyt
• Android SDK: Camera API
API Examples
![Page 13: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/13.jpg)
import android.hardware.Camera;
Camera.getNumberOfCameras();
Camera.open(cameraId);
![Page 14: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/14.jpg)
@randyhoyt
• Android SDK: Camera API
• WordPress: Plugin API
API Examples
![Page 15: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/15.jpg)
<?php
/*
Plugin Name: Treehouse Badges
Description: Displays the badges ...
Version: 1.0
*/
?>
add_action('init','treehouse_badges_init');
...
![Page 16: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/16.jpg)
@randyhoyt
• Android SDK: Camera API
• WordPress: Plugin API
• HTML5: Canvas API
API Examples
![Page 17: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/17.jpg)
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 40, 380, "#000000");
context.drawImage(img, x, y, 100, 77);
![Page 18: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/18.jpg)
Web APIs
![Page 19: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/19.jpg)
REST
![Page 20: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/20.jpg)
Representational State Transfer
![Page 21: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/21.jpg)
RESTful API
![Page 22: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/22.jpg)
Example #1: Treehouse
![Page 23: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/23.jpg)
[Treehouse screenshot]
![Page 24: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/24.jpg)
JavaScript Object Notation:Text-based open standard designed for human-readable data interchange.
Wikipedia: JSON, http://trhou.se/defineJSON
![Page 25: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/25.jpg)
{ "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
![Page 26: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/26.jpg)
[Treehouse JSON]
![Page 27: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/27.jpg)
[HTML]
![Page 28: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/28.jpg)
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
![Page 29: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/29.jpg)
[AJAX Request Code]
![Page 30: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/30.jpg)
[Badge Code]
![Page 31: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/31.jpg)
[Badge Display]
![Page 32: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/32.jpg)
![Page 33: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/33.jpg)
![Page 34: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/34.jpg)
![Page 35: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/35.jpg)
![Page 36: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/36.jpg)
![Page 37: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/37.jpg)
![Page 38: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/38.jpg)
![Page 39: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/39.jpg)
![Page 40: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/40.jpg)
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => 'http://teamtreehou...
));
$resp = curl_exec($curl);
curl_close($curl);
?>
![Page 41: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/41.jpg)
GET Request with HTTPful
HTTPful, http://phphttpclient.com/
![Page 42: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/42.jpg)
GET Request with HTTParty
HTTParty, http://httparty.rubyforge.org/
![Page 43: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/43.jpg)
GET Request with WordPress HTTP API
WordPress, http://codex.wordpress.org/HTTP_API
![Page 44: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/44.jpg)
![Page 45: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/45.jpg)
![Page 46: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/46.jpg)
![Page 47: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/47.jpg)
![Page 48: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/48.jpg)
![Page 49: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/49.jpg)
@randyhoyt
• Does it have to be real time?
• What if something goes wrong?
API Questions
![Page 50: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/50.jpg)
Example #2: ShopLocket
![Page 51: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/51.jpg)
[Screenshot of WP]
![Page 52: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/52.jpg)
[Screenshot of WordPress]
![Page 53: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/53.jpg)
[Screenshot of Product Picker]
![Page 54: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/54.jpg)
[Screenshot of Product Picker]
![Page 55: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/55.jpg)
[Screenshot of Shortcode]
![Page 56: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/56.jpg)
[Screenshot of Website]
![Page 57: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/57.jpg)
Authentication
![Page 58: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/58.jpg)
OAuthAn open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.
OAuth, http://oauth.net/
![Page 59: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/59.jpg)
App ID
5f4a89f2d6655ac7a8859343d6d152579410e7b659b200e00aaf3721cf46269e
App Secret
fa963a1ef3702c16d934500f7621697e2d6bfd05d3ef1751a32bdeb2a0599020
![Page 60: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/60.jpg)
[ShopLocket]
![Page 61: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/61.jpg)
[ShopLocket Login]
![Page 62: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/62.jpg)
[ShopLocket]
![Page 63: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/63.jpg)
/? code = 53fe... & state = auth...
![Page 64: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/64.jpg)
[GET Request]
$args: code = $_GET["code"] app id = [app id] app secret = [app secret]
$response = wp_remote_post( 'https://www.shoplocket.com/' . 'oauth/token', $args );
![Page 65: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/65.jpg)
Token:
310826b20a535a422ccaa46d65c7065f83e403b9218a38962ab4e43021b93585
![Page 66: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/66.jpg)
[Token]
![Page 67: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/67.jpg)
@randyhoyt
• Does it have to be real time?
• What if something goes wrong?
API Questions
![Page 68: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/68.jpg)
![Page 69: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/69.jpg)
![Page 70: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/70.jpg)
![Page 71: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/71.jpg)
![Page 72: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/72.jpg)
![Page 73: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/73.jpg)
![Page 74: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/74.jpg)
![Page 75: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/75.jpg)
![Page 76: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/76.jpg)
[Refresh Button]
![Page 77: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/77.jpg)
![Page 78: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/78.jpg)
Example #3: Facebook & Twitter
![Page 79: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/79.jpg)
[Screenshot of Cultivatr]
![Page 80: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/80.jpg)
[Screenshot of Edit Screen]
![Page 81: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/81.jpg)
[Screenshot of Date Picker]
![Page 82: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/82.jpg)
[Diagram]
![Page 83: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/83.jpg)
![Page 84: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/84.jpg)
![Page 85: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/85.jpg)
![Page 86: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/86.jpg)
![Page 87: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/87.jpg)
@randyhoyt
• Does it have to be real time?
• What if something goes wrong?
API Questions
![Page 88: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/88.jpg)
@randyhoyt
• GET
• POST
• PUT
• DELETE
REST: Types of Requests
(Read)
(Create)
(Update)
(Delete)
![Page 89: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/89.jpg)
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
![Page 90: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/90.jpg)
Best Practices
![Page 91: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/91.jpg)
@randyhoyt
• Read the Documentation
• Use Available Libraries
• Log Everything
Best Practices
![Page 92: Api](https://reader031.vdocument.in/reader031/viewer/2022013121/55514facb4c905bd1c8b5638/html5/thumbnails/92.jpg)
Questions?@randyhoyt