Callback Functions and API - OpenTechConsult/weather-app GitHub Wiki

Callback Functions and API (branch: 02-callback-function-api)

In this branch :

we look in-depth in callback functions
use callback function feature to load data from Google geolocation API

Google API geolocation is an API that takes an address and returns the latitude and longitude coordinates. Those coordinates are going to be used by the weather API to produce real-time weather data like the temperature, the forecast, wind speed, humidity, etc.

Callback functions

A callback function is a function that is passed as an argument of other functions and is executed after some event happens.

Example :

setTimeout(() => {
    console.log('Inside of callback');
}, 2000);

Here we have the callback function () => { console.log }

That function is passed as an argument to another function setTimeout

And that callback function is executed after some event, here the event is 2 seconds passing (2000 milliseconds)

The event could be other things. It could be a database query finishes, it could be an HTTP request comes back.

Let's create an experiment with callback function by creating one of our own.

use callback function feature to load data from Google geolocation API

The request that we will be making to the google geolocation API can be simulated in a browser before we can use it in NODEJS.

Open your favorite web browser
type the following URL in the address bar https://maps.googleapis.com/maps/api/geocode/json?address=3132%20HEALTH%20SCIENCES%20BLDG%20NORFOLK,%20VA%2023529
When you hit enter you get this JSON message displayed in the browser

{
   "error_message": "You must use an API key to authenticate each request to Google Maps Platform APIs. For 
       additional information, please refer to http://g.co/dev/maps-no-account",
   "results": [ ],
   "status": "REQUEST_DENIED"
}

This message signifies that you don't have a public API key. Take a minute and go this google address: https://cloud.google.com/maps-platform#get-started where you can create a Google API and Service account and obtain a public API key

Go over and retype the previous URL in the address bar but this time append your freshly obtain public key like this &key=freshly-obtained-public-key Notice that we can leave the space in the URL when typing it in the address bar. The browser will take care of converting spaces to their encoded characters. But inside of NodeJS, we will need to take care of that ourselves.
When we submit the address by typing enter, we get a load of data back which displayed in the browser. The data displayed are in JSON format like the following.

{
   "results" : [
      {
         "access_points" : [],
         "address_components" : [
            {
               "long_name" : "4608",
               "short_name" : "4608",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Hampton Boulevard",
               "short_name" : "Hampton Blvd",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Highland Park",
               "short_name" : "Highland Park",
               "types" : [ "neighborhood", "political" ]
            },
            {
               "long_name" : "Norfolk",
               "short_name" : "Norfolk",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Virginia",
               "short_name" : "VA",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "États-Unis",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "23508",
               "short_name" : "23508",
               "types" : [ "postal_code" ]
            }
         ]

We recommend using JSONView chrome of firefox to have a nice formatted output of the JSON data.

The JSON data returned has exactly what we need. We have an address_component section in which we are not very interested in. We have a formatted_address section that displays the address nicely. And then after we have the geometry section, which is the subject of our interest. In the geometry section, we have the location subsection in which we find the latitude and longitude coordinate which we are going to use.

The data returned by the Google Map API endpoint is JSON data. That means, we can transform the JSON data into a JavaScript object and start accessing its properties.

To do this, we are going to exploit a third-party module called request. The request module allows us to make HTTP request inside of our application. We can visit that request module page by visiting its page at https://www.npmjs.com/package/request. Note that the request module is deprecated though.