Creating Weather App using Weather API and Node Js : Part One

We are going to create a webapp using Nodejs ,express and an API, Here is the link to what we are going to build .You only need basic understanding of routes ,async function and promises .The front end may be trash but the focus here is node Js and express 😂. So let's get our hands dirty.

So the first thing you do on the website is inserting the location, I know there are other easier APIs to convert location to API easily but here we are going to use two API's just for practice .The first API we are going to use is mapbox ,head over to https://account.mapbox.com/auth/signup/ and create an account. After creating your account head over to https://account.mapbox.com/ here you will have to copy your "default public token" 👇👇👇👇

I
So head over to your favorite code editor , i am going to use vsCode.
In mapbox we are going to pass the address so that it returns the longitude and latitude

1. We create a file called app.js 1.In the file we create an async function with the name geoCode

async function geoCode(){


}

From the map box documentation we have to make a request to the API ,the api we are using here is the geocoding api https://docs.mapbox.com/api/search/geocoding/ .

We are making a request to this api


https://api.mapbox.com/geocoding/v5/mapbox.places/**the address you want to get the longitudes**.json?access_token=**Your default public access token**


In the example below I am going to use New York as my address,but sorry because i will hide my access token use the one you copied from mapbox
https://api.mapbox.com/geocoding/v5/mapbox.places/New York.json?access_token=place your access token here

To test if our request works let us post the link above to a new web browser app i am going to use Chrome.

If your request worked you are going to see something similar to the above.

The data returned is a JSON so let us use the JSON viewer chrome extension to format the response.

The data is now readable and you can see the response is a result of all places with the name "New York" but we want the New York which is the capital of USA so we can set the limit to 1 read more about it here https://docs.mapbox.com/api/search/geocoding/#geocoding-response-object.
To add the limit we &limit=1 at the end of the URL

So if we set the limit our code will look like this https://api.mapbox.com/geocoding/v5/mapbox.places/New York.json?access_token=place your access token here&limit=1

We now have one result and that is nice ,now let us go back to our code editor and create a constant const url which will be equal to the url we request data with.The code will look something like this

async function geoCode(){
 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";

}

Before we continue i'm assuming you have already installed node in your computer without errors.

Let us now open the VS code terminal and install node packages
so in my terminal and in the root folder i am going to run the command npm init -y .

This will create a new folder called package.json .
We are going to install axios which we will be using to fetch data from the API. To install AXIOS we use npm install axios

To use axios we need to require it const axios = require("axios".

This is how our code looks like now, we will also console.log the response

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
console.log(response.data)
}

geocode()   //calling the function

when we run our app.js file we are able to see the results on the terminal.Remember we were only using mapbox to get the coordinates which are stored in response.data.features[0].center. So we let's implement that on our code

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
console.log(response.data.features[0].center)
}

geocode()   //calling the function

So the center array contains the longitude and latitude, with the longitude having an index of 0 and the latitode have an index of 1.

In our code we are going to console.log an object containing an object.
const cordinates= {
longitude: response.data.features[0].center[1],
latitude: response.data.features[0].center[0]
}
then we return cordinates because we will use the cordinates later.

Here is our code now

const axios = require("axios")

async function geoCode(){

 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/newyork.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
const cordinates= {
   longitude: response.data.features[0].center[1],
   latitude: response.data.features[0].center[0]
}

return cordinates;
}
}

geocode()   //calling the function

We need to load the address dynamically so let us create a constant const address = Nairobi .(Nairobi is the capital city of Kenya). So we concatenated the address in the url , our url variable will be

const address = "Nairobi"
const url `https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=place your access token here&limit=1`;

We are now done for our part One let us continue making our weather app in part two.Here is our our final code

const axios = require("axios")

async function geoCode(){

const address = "Nairobi" 
 const url = "https://api.mapbox.com/geocoding/v5/mapbox.places/${address}.json?access_token=place your access token here&limit=1";
response = await axios.get(url);
const cordinates= {
   longitude: response.data.features[0].center[1],
   latitude: response.data.features[0].center[0]
}

return cordinates;
}
}

geocode()   //calling the function