Skip to content

Commit

Permalink
add more things to stretch goals
Browse files Browse the repository at this point in the history
  • Loading branch information
minaorangina committed Feb 22, 2016
1 parent 75416f4 commit 600b07f
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 34 deletions.
41 changes: 31 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,54 @@
![logo](readme-images/logo.png) presents:
<img src="readme-images/logo.png" alt="node-girls-logo" styles="text-align:center;" />

# workshop-cms
<h2 styles="text-align:center;">presents...</h2>

# Node.js CMS workshop

[![HitCount](https://hitt.herokuapp.com/node-girls/workshop-cms.svg)](https://github.com/node-girls/workshop-cms)

## What
## What?

Build your own Node.js project

Today you'll be building your very own platform to write blog posts. You will be able to write blog posts and save them.

This is often referred to as a **content management system** (CMS).

## How
This is a very basic tutorial to get you started with Node.js. At the end of the tutorial, there are optional stretch goals to introduce more advanced concepts.


## Why?

We believe in learning by doing!

## How?

### Structure of the workshop

You will be working on this project with your team. Your mentor will be with you to help you out and answer any questions.

**First, fork this repository onto your own machine**

At the start of each step, you will need to 'checkout' to a new branch on Git.
At the top of your instructions you'll see something like this:
The project has been split into steps. There are written instructions for each step in this README. On your computer, you should checkout out to the relevant branch. If you run `git branch` you will see there is a branch per step.


At the start of each step, you will need to 'checkout' to the next branch on Git.
You will be reminded to do this at the start of each step, like so:

```bash
git checkout [name of a particular branch]
git merge [name of previous branch]
```

Make sure to checkout to the relevant branch before continuing.

You will see code snippets throughout the walkthrough. Try to resist the urge to copy and paste - you will learn **much** more if you get into the habit of typing things out.

You might want to test out small bits of code and run them before adding it to your project. For this, you can use [repl.it](https://repl.it/) if you like.

Throughout each step, we have **bolded** any jargon that you may or may not be familiar with. At the bottom, you'll find a *keywords* section with links to our cheatsheet. There's is also a link to the cheatsheet under Useful links at the end of this README.

Your mentor is there to help you. Don't let them die of boredom - talk to them and ask questions!


---
## Walkthrough
* [Step 1 - set up your project](step1.md)
* [Step 2 - building the server](step2.md)
Expand All @@ -45,5 +62,9 @@ Your mentor is there to help you. Don't let them die of boredom - talk to them
* [Step 10 - save your blog posts](step10.md)
* [stretch - stretch goals](stretch.md)


**Have fun learning**


## Useful links
* [What is Node?](https://github.com/node-girls/what-is-node)
* [Cheatsheet](https://github.com/node-girls/cheatsheets)
Binary file modified readme-images/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 35 additions & 20 deletions step10.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,51 @@ git merge step9
```
---

There's a new file in the public folder, `script.js`. Don't worry about what all the code means, just know that it's responsible for sending a request to `GET` old blog posts and display them on the page underneath "Recent Posts".

You probably want to handle the request from that `script.js` file in your server code...


## Saving data to a file
## Some new files...

At the moment, your blog posts are reaching the server, but aren't being saved anywhere. They just disappear into a cloud of bits and bytes. We need to find a way to save them so that you can retrieve them later.
There's a new file in the public folder, `script.js`. Don't worry about what all the code means, just know that it's responsible for sending a request to `GET` old blog posts and display them on the page underneath "Recent Posts".

You'll note that in the `src` folder there's a new file called `posts.json`.

JSON is a type of file for structuring data in a readable way. They're also a really popular format for sending data across the web.
JSON is a type of file for structuring data in a readable way. It is also a really popular format for sending data across the web.

JSON is a string representation of a Javascript object. JSON objects convert really easily to Javascript objects, and vice versa, with `JSON.parse()` and `JSON.stringify()`.

(If you're not sure about Javascript objects, have a chat with your mentor and your team.)

You'll see there's already one blog post sitting in `posts.json`. The format is:
If you look at `posts.json` will see there's already one blog post there. The format is:
```js
{
[timestamp]: [blog post message]
}
```

We've used a timestamp as the key so that the blog posts are listed in chronological order. Also, it's a record of when the blog post was created.


**Your job is now to:**

1. **Save your blog post data into `posts.json`**

2. **Handle the `script.js` request coming into the server**

3. **Retrieve all your posts and send them back to `script.js`**

You can do these tasks in any order, but it might be easier to:
1. first focus on loading the existing blog post in `posts.json`
2. work out how to add new blog posts to `posts.json`

## Loading existing blog posts

`script.js` is trying to load existing posts by making a `GET` request. Look inside `script.js` and see if you can find any useful endpoints. `fs.readFile()` might be useful here.


The code in `script.js` is expecting to receive a JSON object. Remember your http headers!

## Saving data to a file

At the moment, your blog posts are reaching the server, but aren't being saved anywhere. They just disappear into a cloud of bits and bytes. We need to find a way to save them so that you can retrieve them later.

To add your own blog posts to `posts.json`, you will need to read the file from the hard drive, add to it, then write it back.

You'll remember that `fs.readFile()` is the method responsible for reading files from your hard drive. Well, `fs.writeFile()` is a method that allows you to write data into a file.
Expand All @@ -42,21 +62,14 @@ fs.writeFile('path/to/file', yourData, (error) {
});
```


**Modify your server code to:**

1. **Save your blog post data into `posts.json`**

2. **Handle the `script.js` request coming into the server**

3. **Retrieve all your posts and send them back to `script.js`**

### Things to remember

* You'll want to make sure your blog posts are also added with a timestamp. You can get the current unix timestamp using `Date.now()`.

* `fs.writeFile()` automatically overwrites the whole file. Chances are you don't want to lose all your old blog posts, so think about how you can use both `fs.readFile()` and `fs.writeFile()` to prevent overwriting.
* `fs.writeFile()` automatically overwrites the whole file. Chances are you don't want to lose all your old blog posts, so think about how you can combine `fs.readFile()` and `fs.writeFile()` to prevent overwriting.

* You will need to convert between JSON and a javascript object several times. `JSON.parse()` and `JSON.stringify()` are what you need.

* The code in `script.js` is expecting to receive a JSON object. Remember your http headers!
---

If all goes well, you should have a fully functional CMS!
Expand All @@ -73,3 +86,5 @@ Want more? Then head over to...
## Keywords
* [JSON](http://www.w3schools.com/js/js_json.asp)
* [timestamp](http://www.w3schools.com/jsref/jsref_now.asp)
* [fs.readFile](https://nodejs.org/docs/latest-v0.12.x/api/fs.html#fs_fs_readfile_filename_options_callback)
* [fs.writeFile](https://nodejs.org/docs/latest-v0.12.x/api/fs.html#fs_fs_readfile_filename_options_callback)
2 changes: 1 addition & 1 deletion step3.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,4 +100,4 @@ git push origin step3
---
### Keywords:
* status code
* writeHead()
* response.writeHead()
17 changes: 14 additions & 3 deletions stretch.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,33 @@ It would be a great idea to create a new branch on Git for yourself, so you can
### Display the date
Edit `script.js` so that the timestamps for the previous blog posts are displayed in a human-readable way.

* [Javascript dates](http://www.w3schools.com/jsref/jsref_obj_date.asp)
* [Javascript date functions](http://www.w3schools.com/jsref/jsref_obj_date.asp)


### More modularisation!
Currently, `handler.js` is a combination of decisions and actions. The decisions are the the if-else branches that look at the request url, and the actions are the bits inside the curly brackets.

You could split out the decision part to its own file, `routes.js`. Then the actual actions (so, the functions you call) would remain in `handler.js`. `routes.js`
You could split out the decision part to its own file, `routes.js`. Then the actual actions (so, the functions you call) would remain in `handler.js`. `routes.js`.

Then your server would require `routes.js`, instead of `handler.js`.

Here are some links to an example of this in a different project:
- [server](https://github.com/node-girls/workshop-2015/blob/example/server.js#L6-Lundefined)
- [routes](https://github.com/node-girls/workshop-2015/blob/example/routes.js)
- [handler](https://github.com/node-girls/workshop-2015/blob/example/handlers.js)

![routes-handlers](readme-images/stretch-routes-handlers.png)


### Testing your project
Testing is important - it's much easier to debug a broken project that has tests. If you want to introduce testing into your project, you can read more about it [here](http://code.tutsplus.com/tutorials/testing-in-nodejs--net-35018).


### Use a database
Instead of writing to a file on your hard drive, you could save your blog posts in a database, which would be much quicker in terms of performance if there was a lot of data.

* [MongoDB](https://docs.mongodb.org/getting-started/node/)
[Redis]
* [Redis]



Expand Down

0 comments on commit 600b07f

Please sign in to comment.