Exercise Wednesday

Note: If your API request is not successful and receive an "Origin is not allowed by Access-Control-Allow-Origin" error in your console, try installing the Allow-Control-Allow-Origin: * Chrome extension.

Goal: Practice using all of the build tools that we have learned so far to create an app centered around your choice of public JSON APIs which support CORS.

  • Be sure to use webpack as well as a development server with live reloading.
  • Don't forget graceful error handling!

Warm Up


  • In terms of API calls, what's a parameter? What does it look like? Where do we put one? What's its purpose?
  • How do we ensure our API keys aren't published publicly to GitHub? Walk through how you'll do this in today's projects with your partner.
  • What's the purpose of a JavaScript promise? Describe an instance in which you'd use one.

Code


Dino Ipsum

Explore this API to allow your users to generate dinosaur themed Lorem Ipsum. Use it any way you like - you could create a dinosaur themed game along the lines of hangman. Note: Be sure you set your output format to JSON, not HTML or text.

Bike Index API

Build an app using the Bike Index API. Your app could list all the bikes that have been registered as stolen in a given location in the past week. Or it could display statistics, for example, how many red bikes were stolen in the past year as opposed to blue bikes? What about searching by manufacturer? Which manufacturer is most frequently stolen in a given area?

Pick Your Own API

If you decide to use an API that is not listed here, make sure to do some research and confirm that it supports CORS, and that it returns JSON (not a format like XML). It is recommended to pick one project to focus on for both days so that you can have an opportunity to dig in deep, and really explore an API.

If you wish to research more APIs, this is a very useful page. This comprehensive list of public APIs is also organized by type of data and authentication required.

Further Exploration

Google Maps API

If you've successfully integrated an API in one of the projects above, and are ready for a challenge explore the Google Maps API to build an app centered around geographical locations.

As you'll see upon reading the documentation linked above, the Google Maps API is a bit different from the call/response structure of other APIs, which makes it more challenging. Attempt to integrate it using the documentation. If you get stuck, example Google Maps code is available in the Cheatsheet section.

Peer Code Review


  • Does the website work as expected?
  • Does the app include at least 2 JavaScript files?
  • Does the app include webpack with a development server?
  • Does the asset pipeline include all tasks from the homework this week?