CSE 154

Lecture 14: Public APIs

Agenda

Administrivia:

• When submitting to gitgrade, you will now get e-mail turnin receipts. If you click the turn-in button and do not get one, you should let us know. It is your job to save this email as proof of turn-in.
• CP3 due Thursday
• HW3 out tomorrow

Review JSON/AJAX with JavaScript fetch

Practice using fetch with different public APIs!

JSON and AJAX so far

• JSON introduced as object type to package/process structured data
• AJAX introduced with fetch to fetch data from a server
• Used the fetch(URL).then(...).then(...).catch(...) pipeline to handle requests
• Practiced taking HTML/text data and converting it to JSON (Wednesday)

Check your understanding: Why (and when) is JSON preferred over HTML/text?

Learning Objectives

By the end of today, you should be able to:

• Have a strategy for approaching documentation for different API's
• Know what an API key is, and how to get one if needed
• Make a fetch call to an API, and possibly different calls to the same API
• Know how to see whether a response is succesfully returned using Network tab
• Handle errors from API requests

Recall: Fetching data from a web service

To make a request to a web service (API), we need to know:

1. Who to ask (the url)
   • Example: https://courses.cs.washington.edu/courses/cse154/webservices/recipe/recipe.php
   • Example: http://numbersapi.com
2. Do we have permission to ask (any API keys/tokens)
   • Not in recipe.php, but NASA/TMDB require them; add as additional query parameter
3. What to ask (any query parameters)
   • Differ per API, some have specific order of parameter values, separated by /, others have explicit key/value pairs started with ? and combined with &
   • Example: Recipes API from last week's section might have
     recipe.php?recipe=cupcake&vegan=true
   • Example: Numbers API from last week's section: http://numbersapi.com/154/math)
4. What format we get answers in (the response data format, preferrably txt or JSON)

Check your Understanding (Q1A)

Consider the following request we might make with fetch:

function makeRequest() {
  let requestString = "https://api.nasa.gov/planetary/apod?" +
                      "api_key=DEMO_KEY&date=2018-09-30";
  fetch(requestString, {mode : "cors"})
    .then(checkStatus)   // 1
    .then(JSON.parse)    // 2
    .then(processData)   // 3
    .catch(handleError); // 4
}

JS

1. Who are we asking for data from (the base url)?
2. What query parameters are we using? What are the values of the parameters?
3. What is the purpose of each step (1 through 4)?

Review: Pre-Lecture Activity

Review 2 (or optionally all) of the following API docs:

• NASA Astronomy Photo of the Day
• Reddit
• Word Analysis/Suggester API
• The Movie DB

For each you reviewed, you were asked to:

1. Identify whether you need a key to use the API
2. Identify the different types of responses (txt, JSON, HTML, etc.)
3. Identify one question you can ask with data from the API.

Dicussion Questions

With your neighbor(s), take a few minutes to discuss:

1. What API looked most interesting to you?
2. Did you find anything confusing/frustrating about the API documentation?
3. What is one question/use case you thought of given the API documentation/examples?

Pre-Lecture Survey Responses: Reddit API

• What is the top trending post in r/funny?
• Who is friends with a certain user?
• What are the topics of the most frequently-asked questions?
• What are the last 10 posts to Reddit?
• "User info muahahaha"

Pre-Lecture Survey Responses: NASA API

• Where was the picture of comet taken?
• What is the latest NASA article?
• Information about particular planets
• Showcase of planet pictures on a website
• Trivia game for displaying constellations and having users guess the name

Pre-Lecture Survey Responses: Datamuse Word API

• What are the synonyms for a word ?
• What is a word that rhymes with "Montana" and is often followed by the word "Phone"?
• What word is close to what the user is typing and commonly follows the preceding word (for autocomplete/word suggestions in text boxes)?
• What is the definition for all of the synonyms of a word ?

Pre-Lecture Survey Responses: Movie Database (TMDB) API

• What were some of the reviews for "Bee Movie"
• What movies do I like? (requires account on TMDB)
• Who is the most popular person from movies in the year 2015?
• What are the most popular TV shows this month?
• What TV shows will air in the US on December 10th?

Note: Convenient In-browser JSON Formatter

We're about to dive into how to get started with a public API. The first thing you usually want to do is to find a url with query parameters you're interested in, and see if you can view it on your browser.

There is a great Chrome extension to format nested JSON returned by different API's!

Chrome Extension: JSON View

Demo: You Choose the API

• Reddit
• NASA Astronomy Photo of the Day
• Datamuse Words API
• The Movie DB API