Introduction

Hey everyone! We're going to continue looking at Web Components, from the perspective of a Front End Developer. Today, we're examining a project where we study how we can find someone's geolocation from their IP Address.

GeoIP API

First, let's take a look at the GeoIP API. Check out this link to see an example of this at work.

Here we see that our constructor for our API is linking back to the GeoIP API, which enables our APIs to work together.

IP Fast API

We now move to the IP Fast API.

The async updateUserIP() automatically updates the IP, with the fetch() function grabbing an IP through the GeoIP API, and once the response is confirmed to be okay, the data comes back to us in the form of safe JSON data.

Then, we can pull out the necessary information from the JSON data, the IP, and then the corresponding city and country. Finally, a composite attribute, called location, is created.

Utilizing Both APIs

Finally, we can proceed to utilizing both APIs together, as seen in this image. What this code accomplishes is that it pulls the location from the GeoIP API, and then gathers data from the IP Fast API, and then outputs it in the render function.

Finally, the render method takes the information and searches it and pulls up the necessary wikipedia queries.