Skip to content
This repository has been archived by the owner on Jun 28, 2020. It is now read-only.

uclaacm/hoth4-api-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 

Repository files navigation

hoth4-api-workshop

API workshop at Hack on the Hill

Slides: link

The final product: https://uclaacm.github.io/hoth4-api-workshop/

Demo Part I

In this part, we are going to use an API provided by this workshop. This API offers the endpoint https://api.hoth4.timothygu.me/memes, which will return a response that contains text in JSON (JavaScript Object Notation). This looks something like:

[
  {
    "image": "https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/27656971_1644569528954328_458318846514208241_n.jpg?oh=eb48e7f9c9317aa99092ab59e372ccbb&oe=5B1CD4F0",
    "fb": "https://www.facebook.com/groups/163576114113950/permalink/393948747743351/",
    "position": {
      "lat": 34.07227,
      "lng": -118.452014
    }
  },
  {
    "image": "https://scontent-lax3-1.xx.fbcdn.net/v/t1.0-9/27544612_10215514514362124_7612462266016096164_n.jpg?oh=052b4c69a1b613fc1996bfbe471c5c14&oe=5B1A5445",
    "fb": "https://www.facebook.com/groups/163576114113950/permalink/393954784409414/",
    "position": {
      "lat": 34.07286,
      "lng": -118.449968
    }
  },
  ... more memes here ...
]

Notice that each meme object has these three properties:

  • image (image URL)
  • fb (Facebook URL)
  • position (an object containing the latitude and longitude coordinates)

We're going to use these properties later on in the demo.

The following function goes to the endpoint https://api.hoth4.timothygu.me/memes, parses the text it gets as JSON, and then returns the array of memes.

<!DOCTYPE html>
<script>
// async means that this function is taken out of the main program flow and the
// browser can do other functions while this is running.
// async allows you to use await inside the function.
async function getMemes() {
  // await makes sure that response is filled before continuing
  const response = await fetch('https://api.hoth4.timothygu.me/memes');
  const memes = await response.json();
  console.log(memes);
  return memes;
}
getMemes();
</script>

Put the above code into your index.html file. Open index.html with your browser and right-click -> "Inspect element" so you can view the console. You should see the array of meme objects that we printed when we called the function.

Demo Part II

Now we're going to use another API from Google Maps in order to put all the memes we just got onto a map.

Companies usually require you to have an account to get a key for their API (so they can keep track of who's using it and make sure it's not abused). To get the Google Maps API key, go to: https://developers.google.com/maps/documentation/javascript/. Click "Get a key", make a new project, and you should get a key. The key looks like a long string of letters, numbers, and symbols.

Copy and paste the following code into your index.html file, replacing the previous code. Notice that the top part is the same as before, except we don't call getMemes() until later.

At the bottom, replace YOUR_API_KEY_HERE with the API key you got previously. If you're having troubles with this, use our API Key: AIzaSyD0AVr2hv7dSnCQtSIoyleEZ4xinq_oSFM

<!DOCTYPE html>
<script>
async function getMemes() {
  const response = await fetch('https://api.hoth4.timothygu.me/memes');
  const memes = await response.json();
  console.log(memes);
  return memes;
}
</script>

<div id="map" style="width: 100%; height: 100vh"></div>
<script>
async function initMap() {
  // Create a Map centered on UCLA.
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 34.071, lng: -118.446 },
    zoom: 15
  });
  // Get dat hot memes.
  const memes = await getMemes();
  // Create a marker on the map for every meme.
  for (const meme of memes) {
    const marker = new google.maps.Marker({
      map: map,
      position: meme.position,
      icon: {
        url: meme.image,
        scaledSize: {
          height: 75,
          width: 75
        }
      }
    });
    // When you click on the marker, you'll go to the Facebook link of the meme.
    marker.addListener('click', () => {
      window.open(meme.fb);
    });
  }
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&amp;callback=initMap"></script>

About

API workshop at Hack on the Hill

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages