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.


Additionally, If you have permissions issues trying to push to a second repo while pairing, try the following commands in the command line:

git config --system --unset credential.helper
git config --global --unset credential.helper

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, the Google Maps API is a bit different from the call/response structure of the APIs above, which is what makes it more challenging. Attempt to integrate it on your own using the documentation above. If you get stuck, there's example Google Maps code available in the "Cheatsheet" section of this lesson.

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?

Google Maps API Starter Code

This code is available on the honor system. It is valuable to spend time referencing, and researching an API's documentation, and attempting to implement it yourself; even if it doesn't go exactly as planned.

But if you are still encountering roadblocks after putting in honest effort to implement Google Maps on your own, starter code can be found below.

This uses the Google Maps API to retrieve the user's current location and then display it on a map. You can also work backwards from this code to display other locations on a map. Comments integrated into the code below provide further explanation:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation and Google Maps API</title>
    <link rel="stylesheet" href="build/css/vendor.css">
    <script src="build/js/vendor.min.js"></script>
    <script type="text/javascript" src="build/js/app.js"></script>
    <script src="http://maps.google.com/maps/api/js?"></script>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body class="container">
    <h1>Basic example</h1>
    <button id="locateUser">Get Location</button>
    <div id="map"></div>
  </body>
</html>
js/location-interface.js
$( document ).ready(function() {
  $('#locateUser').click(locateUser);
});

//google maps functions
function locateUser() {
  // If the browser supports the Geolocation API
  if (navigator.geolocation){
    var positionOptions = {
      enableHighAccuracy: true,
      timeout: 10 * 1000 // 10 seconds
    };
    navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
  }
  else {
    alert("Your browser doesn't support the Geolocation API");
  }
}



// this is the success callback from telling the navigator (your browser) to get the current user's position
// we do this on line 13 above. We pass in a function to call on success, a function to call on error, and some options to tell the geolocation api how we want it to run.
// on successfully locating the user, geolocationSuccess() gets called automatically, and it is passed the user's position as an argument.
// on error, geolocationError is called.


function geolocationSuccess(position) {
  // here we take the `position` object returned by the geolocation api
  // and turn it into google maps LatLng object by calling the google.maps.LatLng constructor function
  // it 2 arguments: one for latitude, one for longitude.
  // You could refactor this section to pass google maps your own coordinates rather than using geolocation for the user's current location.
  // But you must use coordinates to use this method.
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var myOptions = {
    zoom : 16,
    center : userLatLng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  // Draw the map - you have to use 'getElementById' here.
  var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
  // Place the marker
  new google.maps.Marker({
    map: mapObject,
    position: userLatLng
  });
}

function geolocationError(positionError) {
  alert(positionError);
}