Creating Weather App using Weather API and Node Js : Part One
Tags: node, api, programming, javascript
Published: 2022-07-09 19:20:50

We are going to create a webapp using Nodejs ,express and an API,<a href="https://ady-weather-app.herokuapp.com"> Here is the link to what we are going to build </a>.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"** 👇👇👇👇


![Mapbox dashboard with default public access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e33gormsgupmiyikuykr.png)

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.


![Request from url to mapbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ebj11kbrj5tx1xu1w5q.png) 
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 <a href="https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh">JSON viewer chrome extension</a> to format the response.


![json viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1y7togb3irqcuw108pb.png)

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` 


![one result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkqiu3t6tmhzma7au4no.png)

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` .

![npm init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anptj8aapq94fod7owio.png)

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
```