Skip to content
This repository has been archived by the owner on Aug 17, 2024. It is now read-only.

Commit

Permalink
Update lessons to remove most dependency on Glitch (#718)
Browse files Browse the repository at this point in the history
* Update lessons to remove most dependency on Glitch

The current lessons have a heavy dependency on Glitch, with most exercises asking the trainees to do their work on Glitch.
This has caused some confusion among the trainees as they were wondering the importance of Glitch and how it relates to Node.

The following changes move Glitch more into the background and ask trainees to do most of their work locally, with the usual Pull Request procedure to submit their homework solutions.

Main changes in short:
* Moved all of the previous Glitch projects to https://github.com/CodeYourFuture/Node-Exercises
* Changed all of the notes that ask for remixes to simply clone the above repo and do the changes over there
* Updated Week 1's intro to ask trainees to play with the project locally instead of remixing it on Glitch
* Changed the demo project from `cyfcats` to `cyf-simple-server`, as the latter is more relevant in relation to API creation.

* Update docs/node/week-1/lesson.md

Signed-off-by: Sally McGrath <[email protected]>

* Update docs/node/week-1/lesson.md

Signed-off-by: Sally McGrath <[email protected]>

* Update docs/node/week-1/lesson.md

Signed-off-by: Sally McGrath <[email protected]>

* Update docs/node/week-1/lesson.md

Signed-off-by: Sally McGrath <[email protected]>

---------

Signed-off-by: Sally McGrath <[email protected]>
Co-authored-by: Sally McGrath <[email protected]>
  • Loading branch information
sztupy and SallyMcGrath authored Oct 28, 2023
1 parent f3dcc0f commit 6a0cdde
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 74 deletions.
92 changes: 49 additions & 43 deletions docs/node/week-1/lesson.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Feedback from "@theme/Feedback";
By the end of this lesson trainees should be able to:

- Define what an API is used for
- Use Glitch to deploy and edit `express` servers
- Create `express` servers locally
- Use `npm` to start a node server
- Explain what `express` is and what it is used for
- Use `express` to create an API that will accept a `GET` request that returns JSON
Expand Down Expand Up @@ -77,59 +77,74 @@ So what's the big deal? I can see this information on web sites already!

What's an API and how is it different from a web site?

## 2) Intro to Node on Glitch
## 2) Introduction to Node

### 2.1) Running a Simple Server
### 2.1) Investigating a Simple Server

Run the simplest web server code.
Let's investigate a web server made in Node. You can check it out running here:

We've made a really simple server about cats. You can check it out here:

- [Source](https://glitch.com/~cyfcats)
- [Live](https://cyfcats.glitch.me/)
- [Source](https://glitch.com/edit/#!/cyf-simple-express)
- [Live](https://cyf-simple-express.glitch.me/)

:::note Teacher-Led Live Coding Example

Let's inspect the different parts of the Node App and how Express works. Let's discuss

- `require` on Line 1
- `express()` on Line 2
- `app.get()` on Line 10
- `app.listen()` on Line 15
- `response.sendFile()` on Line 6 and Line 7
- `require` on Line 3
- `express()` on Line 5
- `app.get()` on Line 12, 26 and 20
- `app.listen()` on Line 29
- `response.send()` on Line 13 and Line 17
- `response.json()` on Line 22

Can we work out what each those lines are doing?

:::
:::note Note

:::note Teacher-Led Live Coding Example
Some examples here use [Glitch](https://glitch.com/), a fun code playground you might like to explore. We will learn about deploying Node applications and making them available for others, but we will use [Render](https://render.com/).

As a class - try to make a simple express server.
### 2.2) Running the Simple Server locally

You can pick any theme you like but maybe try
Fork and clone: [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises).

- The class' favorite foods
- The class' favorite songs
- or get ideas from the class!
This repository contains multiple small projects, so enter the `cyf-simple-express` directory where we will be doing our work today.

The server should have one endpoint. When you request the data from that endpoint it should give you the whole list of items that are stored in your node server.
Once cloned we're going to use the **[Node Package Manager (npm)](https://www.npmjs.com/)** to setup the project using the **`npm install`** command.

:::
NPM is the place to go to download other Node code written by other people.
There are thousands of open-source, 3rd-party Node modules (also known as
_packages_) written by other people that you can download and use in your own projects.

Run the following command in your terminal:

```sh
npm install
```

Once the prerequsities are installed you can now start the server by typing

Now let's make a server ourselves from scratch...
```sh
npm start
```

Once it starts up you will be able to access your running API by going to

```
http://localhost:3000
```

### 2.3) Modifying the Simple Server

:::note Exercise:

Make your own node server on glitch
Let's try to modify the `server.js` code above to do something different!

All trainees should "remix" this one for a simple start: https://glitch.com/~cyf-simple-express
Have them it read and modify it to do something different.
Examples:

1. Login to Glitch and ‘remix’ this project and rename to be yours
2. e.g. say "Hello Miles", instead of "Hello Kash"
3. Make it return an array of strings as json.
4. Make it return the current time
5. Advanced: make it return whatever you want! 3 minutes.
1. Say "Hello Miles", instead of "Hello Kash"
2. Make it return an array of strings as json.
3. Make it return the current time
4. Advanced: make it return whatever you want! 3 minutes.

:::

Expand All @@ -145,22 +160,13 @@ Fork and clone the repo [https://github.com/CodeYourFuture/Node-Starter-Kit](htt

It is an empty project that includes all the details you need to get started building your first Node App.

### 3.2) Installing The Project

We're going to use the **[Node Package Manager (npm)](https://www.npmjs.com/)** to
setup the project using the **`npm install`** command.

NPM is the place to go to download other Node code written by other people.
There are thousands of open-source, 3rd-party Node modules (also known as
_packages_) written by other people that you can download and use in your own projects.

Run the following command in your terminal:
Once cloned, make sure to run the following code to install all prerequisites.

```sh
npm install
```

### 3.3) Building the server
### 3.2) Building the server

The first thing we need to do is build our server. You will always need to build
a server when writing back-end code. A server can be built in pure Node.js, but
Expand Down Expand Up @@ -249,7 +255,7 @@ Under the `scripts` property, add `start: node server.js`. We can now run our se

Go to the terminal and type `npm start` and make sure that the server still runs.

### 3.4) Communicating with the server
### 3.3) Communicating with the server

Now that we've built the server, we need to communicate with it. We are going to
control the server with **handler functions**.
Expand Down
4 changes: 0 additions & 4 deletions docs/node/week-1/mentors.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@ For general Syllabus feedback and help you can post in [cyf-syllabus](https://co

### London (24/06/2020)

- Glitch and Codesandbox had issues
- Possible non starters.
- Didn't have reload button (code sandbox).
- Groups tended to just rely on the one trainee whose setup was working. or work locally.
- Last exercise needs rework
- Don't just return the data sent by user
- "Why would you do this?"
Expand Down
19 changes: 10 additions & 9 deletions docs/node/week-2/homework.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,19 @@ sidebar_label: Coursework

We've hosted some Servers on Glitch but they're not quite working properly. Could you fix them for us?

- https://glitch.com/~debugging-practice1
- https://glitch.com/~debugging-practice2
- https://glitch.com/~debugging-practice3
- https://glitch.com/~debugging-practice4
- https://glitch.com/edit/#!/debugging-practice1
- https://glitch.com/edit/#!/debugging-practice2
- https://glitch.com/edit/#!/debugging-practice3
- https://glitch.com/edit/#!/debugging-practice4

### Start by remixing our example server
### Set up the examples above locally

- [ ] Make sure you're logged in to https://glitch.com/
- [ ] Remix each example
- [ ] Name your new server `yourname` + NAME_OF_EXERCISE
- [ ] Check that it is working by making a request to `/`
- [ ] Have the [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises) project forked and cloned.
- [ ] Create a new branch named `yourname` + NAME_OF_EXERCISE
- [ ] Make sure to edit the appropriate project from the cloned repository.
- [ ] Start up your server, then check that it is working by making a request to `/`
- [ ] Fix the code on your version of the server
- [ ] Create a PR with your solution back in GitHub. Make sure you name your PR `yourname` + NAME_OF_EXERCISE

## 2) Chat Server API Project (12 Hours+) 🔑

Expand Down
14 changes: 4 additions & 10 deletions docs/node/week-2/lesson.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,7 @@ The id should be given in the URL structure like this:

> /quotes/242342
You should use the starting project: [cyf-quotes-id-start](https://glitch.com/~cyf-quotes-ids-start). This is because this project has quotes with IDs.

When you remix the starting project, immediately rename it as your own.
You should use the `cyf-quotes-id-start` project from [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises). This is because this project has quotes with IDs.

:::

Expand Down Expand Up @@ -192,9 +190,7 @@ The route should use the HTTP method POST and should use the URL:

> /quotes
You should use the starting project: [cyf-quotes-post-start](https://glitch.com/~cyf-quotes-post-start), NOT your own existing quote server. This is because our project has an HTML form for creating new quotes.

When you remix our starting project, immediately rename it.
You should use the `cyf-quotes-post-start` project from [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises). This is because this project has an HTML form for creating new quotes.

Then you can visit / and submit the form there, when you are ready to try to submit new quotes!

Expand Down Expand Up @@ -285,9 +281,7 @@ The id should be given in the URL structure like this:
You should use the `delete` HTTP method

You should use this starting project: [cyf-quotes-id-start](https://glitch.com/~cyf-quotes-id-start), NOT your own existing quote server. This is because this project has quotes with IDs.

When you remix the starting project, immediately rename it as your own.
You should use the `cyf-quotes-id-start` project from [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises). This is because this project has quotes with IDs.

:::

Expand Down Expand Up @@ -321,7 +315,7 @@ Can you work out how to remove an album using this code?
**Exercise objective:** To identify feelings associated with being included in and excluded from a group

Think about a time when you have experienced:
- Being part of a group
- Being part of a group
- Being excluded by a group

Discuss as a class how it feels to be included and excluded.
Expand Down
14 changes: 6 additions & 8 deletions docs/node/week-3/lesson.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,17 @@ The route should use the HTTP method PUT and should use the URL:

> /quotes
You should use the starting project: [cyf-quotes-id-start](https://glitch.com/~cyf-quotes-id-start). This is because this project has quotes with IDs.

When you remix the starting project, immediately rename it as your own.
You should use the `cyf-quotes-id-start` project from [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises). This is because this project has quotes with IDs.

:::

#### 2.2 Workshop: Updating Data

Let's look back at our original objectives using the albums project from previous lessons. Try to apply what you learned about PUT routes to this project.

:::note Glitch Albums Project
:::note Albums Project

If you don't have your albums project in available, you can practice creating a PUT route using the [cyf-albums-start](https://glitch.com/~cyf-albums-start) project.
If you don't have the album project already done you can use the `cyf-albums-start` project from [https://github.com/CodeYourFuture/Node-Exercises](https://github.com/CodeYourFuture/Node-Exercises) as a baseline.

:::

Expand All @@ -85,17 +83,17 @@ To challenge yourself even further, try to complete these challenges:

* CHALLENGE 1: return the old version of the object you updated as well as the new value in the response
* CHALLENGE 2: validate the request body to make sure the ID can't be updated and that users can't add additional fields
* CHALLENGE 3: persist your changes to file so that you are able to return your updated values even after you make code changes in Glitch
* CHALLENGE 3: persist your changes to file so that you are able to return your updated values even after you restart the server

:::

## 3) Render

We can use Render to host our APIs online (similar in the way you might have used Netlify in the past). This can be a little tricky.
We developed our Node projects locally in the past, and you might have also used Glitch for some very simple projects. For more complex projects there various options available. We prefer Render as it has a free tier for hosting Node APIs online. Setting it up can be a littly tricky however.

:::note Exercise

Work in pairs and with Teaching Assistants to get your homework from the previous two weeks working online by following [this Render walkthrough](https://syllabus.codeyourfuture.io/guides/deployment-render).
Work in pairs and with Teaching Assistants to get your homework from the previous two weeks working online by following [this Render walkthrough](https://syllabus.codeyourfuture.io/guides/deployment-render/).

:::

Expand Down

0 comments on commit 6a0cdde

Please sign in to comment.