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');
  6. //init app
  7. var app = express();
  9. //set the template engine
  10. app.set('view engine','ejs');
  12. //fetch the data from request
  13. app.use(bodyParser.urlencoded({extended:false}));
  15. //default pageload
  16. app.get('/',function(req,res){
  17. res.render('home',{temp:null});
  18. });
  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();
  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. });
  34. var port = process.env.PORT || 3000;
  35. app.listen(port,function(){
  36. console.log('server running at '+port);
  37. });
Download code from here.