Advanced APIs

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

• Request data from a web service.
• Implement the geolocation API to request a location.
• Use Postman to construct and test an API request.
• Process a third-party API response and share location data on your website.
• Search documentation needed to make and customise third-party API requests.

Agenda

• Homework Review
• Fetch (lesson 12)
• Get oriented with Google Maps Platform & TFL API
• Implement geolocation
• Set up Postman
• Create and send API call
• Handle API response

Exit Ticket Questions

Homework Review

Classroom Resources

Fetch and Promises

Advanced APIs

Building Our App

Building Our App - Steps

Building Our App - Steps

1. Get User's Location

Navigator API

LINK: window.navigator

• The Window.navigator property gives us reference to the Navigator object.
• Navigator exposes data such as User Agent (Browser type) and Geolocation.

2. Render a Google map

Google Maps

LINK: Google Maps API docs

3. Center Google Maps on user’s location

4. Create request to TFL for bike information

5. Parse API response and add locations to map

6. Create an information window for when a user selects a bike point

Learning Objectives - Review

• Request data from a web service.
• Implement the geolocation API to request a location.
• Use Postman to construct and test an API request.
• Process a third-party API response and share location data on your website.
• Search documentation needed to make and customise third-party API requests.

Look Ahead to Next Lesson

• Familiarise yourself with the API documentation from the APIs list.
• Fork and clone your starter code.
• Strategise ways to hide the loader and replace the content of the #main container with that of the API.

API List - 1/2

NEWS

• Reddit: https://www.reddit.com/dev/api
• The Guardian: https://open-platform.theguardian.com/access/
• Hacker News: https://github.com/HackerNews/API
• Daily WTF: https://thedailywtf.com/articles/tdwtf-api
• Event Registry: https://eventregistry.org
• newsapi.org(republishes a number of news sources) https://newsapi.org

SCIENCE

• SpaceX: https://docs.spacexdata.com/?version=latest
• NASA API: https://api.nasa.gov/ 🔑

FOOD & DRINK

• Beer: https://www.brewerydb.com/developers 🔑
• The Cocktail API: https://www.thecocktaildb.com/

API List - 2/2

ENTERTAINMENT

• The Movie DB: https://www.themoviedb.org/documentation/api 🔑
• Star Wars: https://swapi.dev/
• Rick and Morty: https://rickandmortyapi.com/documentation/#rest
• Tvmaze: https://www.tvmaze.com/api

OUTDOORS

• Weather: https://openweathermap.org/api 🔑
• The Hiking Project Data API: https://www.hikingproject.com/data 🔑
• Pokemon: http://pokeapi.co/

OTHER OPEN APIs

• Giphy: https://developers.giphy.com/ 🔑
• Card Deck: https://deckofcardsapi.com/
• Chuck Norris: http://www.icndb.com/
• The Cat API: https://thecatapi.com/
• The Official Joke API: https://official-joke-api.appspot.com/random_ten