Ive created a rough first draft of my weather API app in my first Node / Express app. My issue is around having the additional files at the bottom of the lay.pug file - skycap.js and sky.js. Should this be set up in Node in a different way? I feel that what I have done is just a dirty hack and I'm not using Node correctly.
Is there a better way to keep all this on the backend and not rely on separate JS files loading in the browser. Node is currently getting data from a JSON API taking the data sending a variable to pug for pug to then store and pass to the sky.js file, which when called which displays the correct Skycon symbol.
app.js - main POST
app.post('/', function(req,res,next){
var search = req.body.search;
if(search == ""){
var err = new Error("Please enter a location to search");
err.status = 404;
next(err);
} else {
function google(callback){
var api = "API-KEY";
var url = https.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${search}&key=${api}`, function(res3){
var body = "";
var googleResults;
res3.on('data', function(data){
body += data.toString();
})
res3.on('end', function(){
googleResults = JSON.parse(body);
//console.log("body " + googleResults);
if(googleResults.results[0] == undefined){
var err = new Error("That location seems incorrect");
err.status = 404;
next(err);
} else {
var lon = googleResults.results[0].geometry.location.lng;
var lat = googleResults.results[0].geometry.location.lat;
var location = googleResults.results[0].formatted_address;
//console.log(location);
callback(lat,lon,location);
}
})
});
}
google(function(lat,lon,location){
//connectc to API URL()
var request = https.get(`https://api.darksky.net/forecast/API-KEY/${lat},${lon}?units=si`, function(res2){
//console.log(lon + " help " + lat)
var body = "";
var weather;
//Read the data
res2.on('data', function(err, data){
//if(err){
// var err = new Error("Hmmmm we cant get the weather today");
// err.status = 500;
// next(err);
// }
body += err.toString();
})
res2.on('end', function(){
//Parse the data
weather = JSON.parse(body);
console.log("icon " + weather.currently.icon)
//Print data
res.render('lay', {
location: location,
img: JSON.stringify(weather.currently.icon),
temperature: Math.round(weather.currently.temperature),
humidity: weather.currently.humidity,
wind: Math.round(weather.currently.windSpeed)
});
})
});
});
}
});
app.get("/test", function(req,res,next){
res.render('error', {location: "Location",
temperature: 0,
humidity: 0,
wind: "test",
error: "cheess"
})
})
app.use(function(req,res,next){
if(!req.route){
var err = new Error("Cant find that page");
err.status = 404;
next(err);
}
})
lay.pug file
doctype html
html(lang='en')
head
script(type='text/javascript').
var showImage = !{img}
title Weather App
link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet')
link(rel='stylesheet', type='text/css', href='/static/css/style.css')
body
h1 Weather App
p
| Welcome to a Node Express built weather app. Please enter your location below for current weather activity.
#container.col
#top
#location
p #{location}
#icon
canvas#icon1(width='128', height='128')
#temp
| #{temperature}
span °C
#details
#humidity
p Humidity:
p #{humidity}
#wind
p Wind:
p #{wind}mph
#bottom
#error
block test
form(method='post')
input(type='text', name='search', placeholder='Please enter your town or post code')
input(type='submit', value='Search')
script(src='/static/js/skycons.js')
script(src='/static/js/sky.js')
sky.js
var skycons = new Skycons({"color": "white"});
skycons.add(document.getElementById("icon1"), showImage);
skycons.play();
via monkeyman905
No comments:
Post a Comment