Week 3

Week 3

This is the moment where we start to build the feature that is our jobstory. Last week I worked out a couple of wireframes so that it's clear for myself what I intend to do. I noticed that what I had designed (from a UX P.O.V), was way too technical too make. I'll be making the same feature. But instead of it being in 1 page that refreshes, I will be making the feature in different HTML/EJS pages.

The first step I took was reading the description of this weeks assignment for Backend, since it is a good lead to start working from that point on. So, extracted the base thought of my jobstory. The most down to base form of my jobstory would be to let users write down their favorite games, so on their turn, these games would be rendered and shown. They also would need to be (at least) temporarily saved somewhere on the server. Now that I've decided what all the functionalities were that I needed I was ready to start doing some research on how-to's and start coding.

The POST request

A first start at the assignment was this video. It really helped me understand the code and what I was looking for to make in NodeJS. The maker of the video put down a very basic form of creating a POST request. Afterwards I had to look for a way to also save the games that were given by the users into a json file. At first I tried so save it in the server.js, but that was not working. I guess it is possible to do this. But I found fairly soon a way to create a games.json and render a ejs partial from there.

// SERVER.JS 
const bodyParser = require('body-parser');
const fs = require('fs');

// IMPORT GAMES.JSON FILE
const games = require('./views/pages/game.json');

app.use(bodyParser.urlencoded({
    extended: true
  }));
app.use(bodyParser.json());


// POST FAVORITE GAME
app.post('/', function(req, res) {
    // console.log((JSON.stringify(req.body)));
    let testGame = req.body;
    console.log(testGame);

    saveGame(testGame, function(err) {
        if(err) {
            res.status(404).send('Game not send');
            return;
        } 
        // console.log("Your games are saved");
        // res.render('pages/index.ejs', games)
        res.send("Your games are saved");
    })
})

function saveGame(testGame, cb) {
    fs.writeFile('./views/pages/game.json', JSON.stringify(testGame), cb);
}

	<section id="topGames">
		<h2>Your favorite games</h2>

		<ul>
			<li><%= game1 %></li>
			<li><%= game2 %></li>
			<li><%= game3 %></li>
		</ul>
	</section>