Assignments > Tutorial 6: JavaScript: Working with external data

Due on Fri, 02/17 @ 11:59PM. 6 Points.

Introduction

In this week’s tutorial, we will be creating an interface to interact with a REST API. You are welcome to work solo or with a partner. Even if you work with a partner, everyone should submit their own files.

A few notes:

• You will only be using the GET method this week (to request resources from a server).
• You will be using the API Tutor proxy server for select REST APIs so that we can avoid having to think about authentication.
• You will allow your user to ask the API questions (via a web form), and then you will display the resulting data to the user as an HTML representation of the data.

API Endpoint Documentation & Examples

Yelp

• Documentation
• Actual Endpoint: https://api.yelp.com/v3/businesses/search
  (won’t work unless you get an API key from Yelp and pass it as an HTTP header)
• Proxy Server
  • Endpoint: https://www.apitutor.org/yelp/v3/businesses/search (needs query parameters)
  • Example: https://www.apitutor.org/yelp/v3/businesses/search?location=Asheville,+NC
• [Recommended] Proxy Server Simplified Data
  • Endpoint: https://www.apitutor.org/yelp/simple/v3/businesses/search (needs query parameters)
  • Example: https://www.apitutor.org/yelp/simple/v3/businesses/search?location=Asheville,+NC

Spotify

• Documentation
• Actual Endpoint: https://api.spotify.com/v1/search
  (won’t work unless you get an API key from Spotify and pass it as an HTTP header)
• Proxy Server
  • Endpoint: https://www.apitutor.org/spotify/v1/search (needs query parameters)
  • Example: https://www.apitutor.org/spotify/v1/search?q=beyonce&type=track
• [Recommended] Proxy Server Simplified Data
  • Endpoint: https://www.apitutor.org/spotify/simple/v1/search (needs query parameters)
  • Example Tracks Query:
    https://www.apitutor.org/spotify/simple/v1/search?q=beyonce&type=track
  • Example Artists Query:
    https://www.apitutor.org/spotify/simple/v1/search?q=beyonce&type=artist
  • Example Albums Query:
    https://www.apitutor.org/spotify/simple/v1/search?q=beyonce&type=album

Twitter

• Documentation
• Actual Endpoint: https://api.twitter.com/1.1/search/tweets.json
  (won’t work unless you get an API key from Yelp and pass it as an HTTP header)
• Proxy Server
  • Endpoint: https://www.apitutor.org/twitter/1.1/search/tweets.json (needs query parameters)
  • Example: https://www.apitutor.org/twitter/1.1/search/tweets.json?q=cats
• [Recommended] Proxy Server Simplified Data
  • Endpoint: https://www.apitutor.org/twitter/simple/1.1/search/tweets.json (needs query parameters)
  • Example: https://www.apitutor.org/twitter/simple/1.1/search/tweets.json?q=cats

Your Tasks

Please download the starter files below and then complete the following tasks:

Tutorial 6 Starter Files

1. Pick ONE of the REST APIs above (Yelp, Spotify, or Twitter).
2. Create a web form to enable the user to ask the API a question.
3. Attach an event handler to the “Submit” button. Feel free to copy the form from Tutorial 4 to get you started.
4. Use the data that the user typed into the form as a basis for formulating the query.
5. When the server responds, transform that data (using the map and join methods) into an HTML string that you will add to the DOM.
6. Follow any additional provider-specific instructions below:

If you choose Yelp…

If you choose Yelp, allow your user to input both a search term and a location.

• Sample Query: https://www.apitutor.org/yelp/simple/v3/businesses/search?location=Asheville,%20NC&term=pizza
• Yelp Demo

If you choose Spotify…

If you choose Spotify, allow your user to specify both a search term (q parameter) and a resource type (album, artist, or track).

• Caveat: since each resource has a different data representation, you will have to create three different templates (depending on the resource). In other words, an artist object has a different data representation than an album object or a track object.
• Sample Query: https://www.apitutor.org/spotify/simple/v1/search?q=beyonce&type=track
• Spotify Demo

If you choose Twitter…

If you choose Twitter, allow your user to specify both a search term (q parameter) and a result_type (mixed, recent, or popular).

• Sample Query: https://www.apitutor.org/twitter/simple/1.1/search/tweets.json?q=cats&result_type=popular
• Twitter Demo

What to Submit

• A zip file of your completed Tutorial 6
• If you worked with a partner, please name your partner by adding a comment in the Moodle.