markdown 挑战01：节点快速基础知识

Posted 2021-05-06

For this challenge, you'll clone the starter repo, install express, setup a static server and create 2 endpoints to serve Notes. The starter repo contains a simple in-memory database with sample data and a client application to demonstrate the API.

## Requirements

* Clone and setup the starter repo
* Install `express` and setup a `start` command
* Implement an Express static server
* Create 2 GET endpoints:
  * GET notes returns a list of notes. If a search term is provided it returns a filtered list, otherwise it returns a full list of notes.
  * GET a note by ID returns a specific note based on the ID provided.
* Install `nodemon`

## Getting Started

To get started you'll need to clone the starter repo and create a new repo on Github to store your updates. You have done this a few times so we won't bore you with the details, but we have provided a few bullet-points below to help guide you.

### Set up your Project repo

* Find the `noteful-app-v1` pinned to your Cohort's GitHub Organziation
* Clone the `noteful-app-v1` repo to your local development environment
* Rename the `origin` to `upsteam` using `git remote rename origin upstream`
* On GitHub create a new repo in your Cohort org on Github.
  * Name the new repo "[YOUR-NAME]-noteful-v1".
  * Do *not* initialize the repository with a README.
* On the next page find the section titled **…or push an existing repository from the command line** and run the two commands

* Verify your remotes are configured correctly. Enter `git remote -v`, you should see two remotes: one called `origin` pointing to your repo on GitHub and one named `upstream` pointing Thinkful's repo.

## Install Express Package and setup a Start script

Back on your local development environment, run `node server.js` in your terminal, you'll see `hello world!`. It's not much, but it is a start.

The next step is to create a development branch, set up Express and configure a start script. Don't worry, we'll guide you.

* Create a development branch

In the terminal window

```
git checkout -b feature/express-server
```

* Enter `npm install express`. This will install the Express package and insert a dependency in your `package.json` file. Open the `package.json` file and you should see something like the following. Your version number might be different, that's OK.

```json
  "dependencies": {
    "express": "^4.16.3"
  }
```

* In `package.json`, find the `scripts: {...}` property and add a `start` command like the following. The `scripts` are a convenient feature of NPM which allow you to store frequently used or difficult to remember commands and easily run them. Our `start` script is very simple, but you'll add more throughout the course.

```json
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

Try starting the local dev server using `npm start`, you should see `hello world!` message in the console.

## Create Express App and setup a Static Server

Your first challenge is to create an Express app that can serve static files. We'll help you get started. Below is code which requires and creates an Express app, then listens for requests on port 8080. 

Add the following code to your `server.js` **and** then add a static file server that serves files from the `public` directory.

```js
const express = require('express');

const data = require('./db/notes');

const app = express();

// ADD STATIC SERVER HERE

app.listen(8080, function () {
  console.info(`Server listening on ${this.address().port}`);
}).on('error', err => {
  console.error(err);
});
```

Stop (`Ctrl + C`) and restart (`npm start`) your server to see your changes.

Verify it is working by navigating to `http://localhost:8080/`. It should display the basic Noteful app. But there's a problem, open Chrome Dev Tools you'll see the following error:

```txt
GET http://localhost:8080/api/notes/ 404 (Not Found)
```

The error is because you have not created the GET `/notes` endpoint for the application. You'll fix that next, right after you commit your changes.

Commit your changes!

## Create GET notes list endpoint

Your next challenge is to create the following 2 endpoints.

1) GET `/api/notes` returns a list of notes.
2) GET `/api/notes/:id` returns a specific note based on the ID provided.

We'll help you with the first endpoint, you'll need to create the second. The following block of code responds to a GET request to `/api/notes` and returns data in JSON format. Add this to your `server.js` right after the static server.

```js
app.get('/api/notes', (req, res) => {
  res.json(data);
});
```

You'll need to stop (`Ctrl + C`) and restart (`npm start`) your server to see your changes.

Test the endpoint using Postman. It should return an array with the 10 notes which match `/db/notes.json`. Then check it with the sample app. The client should load and display the list of notes in the client.

The client app is already wired-up to listen for click events on the list of notes. If you click a note, the app will attempt to retrieve the details from the GET `/api/notes/:id` endpoint. But there's still a problem, open Chrome Dev Tools you'll see an error similar to the following.

```txt
api.js:17 GET http://localhost:8080/api/notes/1002 404 (Not Found)
```

You'll fix that next, right after you commit your changes.

Commit your changes!

## Create GET note details endpoint

Your next challenge is to create an endpoint which responds to requests like GET `/api/notes/1003` or GET `/api/notes/1005` and returns note 1003 or 1005 respectively.

> Hint: Use [Array.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) to find the note in the array.
>
> ```js
> data.find(item => item.id === Number(id))
> ```

Remember, as you update your code you'll need to stop (`Ctrl + C`) and restart (`npm start`) your server to see your changes.

Verify your changes using Postman by requesting GET `/api/notes/1003` and GET `/api/notes/1005` and confirming the correct note is returned.

Commit your changes!

## Using Nodemon

Stoping and restarting the server after every change is tedious. There is a better way. You can use `nodemon` to detect changes and automatically restart your server.

Install nodemon globally

```sh
npm install -g nodemon
```

To use nodemon run `nodemon server.js` command or add another NPM script command named `dev` like the following.

```json
  ...
  "scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
```

Now, you can run `npm run dev` which will execute nodemon and automatically restart the server when it detects changes.

> NOTE: *DO NOT* change `npm start` to use nodemon ~~`"start": "nodemon server.js",`~~. As you will see later, Heroku also uses `npm start` by default to run the server in Production. Nodemon was designed for development, not production. Using it in Production will cause issues.

Commit your changes!

## Update the server to support a search

The Noteful App client is already wired-up to support search. The `handleNoteSearchSubmit` function creates an event handler function that builds a query object with a `searchTerm` property and passes it to `api.search()`. The `api.search()` method passes the object to `$.ajax` which transforms the object into a query-string like this: `{ searchTerm : cats }` becomes `?searchTerm=cats`

An example URL, which you can test in Postman, would look like this:

```txt
http://localhost:8080/api/notes?searchTerm=cats
```

Your final challenge is to update the `app.get('/api/notes', ...)` endpoint you created earlier to support the search feature.

* You will need to retrieve the searchTerm from the query-string on the [req.query](https://expressjs.com/en/4x/api.html#req.query) object.
* Once you have the `searchTerm`, you can search the array to find the proper results. There are several ways to accomplish this task. Might we suggest [Array.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [String.includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes).
* Finally, update `res.json(data)` to return the filtered list.

Commit your changes!

## Merge and Push

Once you are happy with your solution. Checkout `master` and merge your feature branch and push your changes to Github.

## Solutions

You can view an example solution and compare the differences between branches

* Solution: You can find the example solution in the `solution/01-express` branch in the upstream repo.
* [Compare this solution branch to master](https://github.com/Thinkful-Ed/noteful-app-v1/compare/master...solution/01-express)