Post
Ask Question

Build Weather Application In Node

Introduction

 
In this blog, we see how to build a weather app using open weather APIs.  
 
Prerequisite
 
Setup Folder 
  • Open console and create a new folder using the below command
      # mkdir weather
  • Change to the current directory 
     # cd weather
 
Setup Node In Folder
 
For building projects in Node, we have to setup up a Node environment in our folder.
  • Type the following command to set up Node 
      # npm init -y
 
This will generate a package.json file, which means that Node is set up in the folder .
 
Install Package
 
We add a package that will be needed to build the application. 
  • For adding package type following command 
      # npm install body-parser ejs express openweather-apis
 
A little description of the packages we installed:
  • body-parser: extracts the entire body portion of an incoming request stream and exposes it on req.body. 
  • ejs: ejs or embedded Javascript templating is a templating engine used by node.js.ejs. It is a simple template language used to generate HTML markup with plain Javascript.
  • express:  it is a web framework for node.js.The complete application is built on it
  • openweather-apis: with this package, we can consume the weather APIs.

Add Folder 
  • Add a new folder named views
  • Add new file in it and name it home.ejs.
  1. <html>    
  2.   <head>    
  3.     <meta charset="utf-8">    
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">    
  5.     <title>Weather App</title>    
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">    
  7.     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>    
  8.   </head>    
  9.   <body>    
  10.   <div class="container" style="margin-top: 20px;width: fit-content;">    
  11.         <div class="field has-addons">         
  12.                 <div class="control">    
  13.                     <form action="/" method="POST">    
  14.                   <input class="input" type="text" placeholder="Enter City" name="city">    
  15.                   <input class="button is-info" value="Submit" type="submit">    
  16.                 </form>    
  17.                 </div>    
  18.               </div>    
  19.   </div><br><br>    
  20.   <% if(temp) {%>    
  21.   <div class="table">    
  22.     <center>    
  23.     <h3><b>City Weather/Temperature Details</b></h3><br>    
  24.        <table class= 'table is-bordered is-striped is-narrow is-hoverable table is-bordered' style="font-size: large;font-weight: bolder;">    
  25.          <tbody>    
  26.            <tr><td>City</td><td><%=temp.name%></td></tr>    
  27.            <tr><td>Weather</td><td><%=temp.weather[0].main%></td></tr>    
  28.            <tr><td>Temperature</td><td><%=temp.main.temp%></td></tr>    
  29.          </tbody>    
  30.        </table>    
  31.       </center>    
  32.   </div>    
  33.   <%}%>    
  34.   </body>    
  35. </html>   
Add Starting Point
We have to provide the entry/starting point to our aplication from where the application will start.
  • Now add a new file and name it app.js.
  • Now open the package.json file and in script add "start":"app.js".This will tell our application about the entry/start point.
  • Now get register https://openweathermap.org/api and get your secret key from your dashboard.
app.js
  1. var express    = require('express');  
  2. var bodyParser = require('body-parser');  
  3. var weather    = require('openweather-apis');  
  4.   
  5.   
  6. //init app  
  7. var app = express();  
  8.   
  9. //set the template engine  
  10. app.set('view engine','ejs');  
  11.   
  12. //fetch the data from request  
  13. app.use(bodyParser.urlencoded({extended:false}));  
  14.   
  15. //default pageload  
  16. app.get('/',function(req,res){  
  17.     res.render('home',{temp:null});  
  18. });  
  19.   
  20. app.post('/',function(req,res){  
  21.     //set the city whose temperature we want to see
  22.     weather.setCity(req.body.city);  

  24.     // you have to provide the secretkey you get on your dashboard of your openweathermap
  25.     weather.setAPPID();  
  26.    
  27.     //it will provide us all the data of that particular city in json format.
  28.     weather.getAllWeather(function(err,temp){  
  29.         console.log(temp);  
  30.         res.render('home',{temp:temp});  
  31.     });  
  32. });  
  33.   
  34. var port  = process.env.PORT || 3000;  
  35. app.listen(port,function(){  
  36.     console.log('server running at '+port);  
  37. });  
Download code from here.