Tuesday 23 May 2017

How to structure my Node App better, am i doing the logic right?

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