From 6a0cdde2ad759777bf0d9f2de81c4c87a1ae3a74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zsolt=20Sz=2E=20Sztup=C3=A1k?= Date: Sat, 28 Oct 2023 10:42:44 +0100 Subject: [PATCH] Update lessons to remove most dependency on Glitch (#718) * 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 * Update docs/node/week-1/lesson.md Signed-off-by: Sally McGrath * Update docs/node/week-1/lesson.md Signed-off-by: Sally McGrath * Update docs/node/week-1/lesson.md Signed-off-by: Sally McGrath --------- Signed-off-by: Sally McGrath Co-authored-by: Sally McGrath --- docs/node/week-1/lesson.md | 92 +++++++++++++++++++----------------- docs/node/week-1/mentors.md | 4 -- docs/node/week-2/homework.md | 19 ++++---- docs/node/week-2/lesson.md | 14 ++---- docs/node/week-3/lesson.md | 14 +++--- 5 files changed, 69 insertions(+), 74 deletions(-) diff --git a/docs/node/week-1/lesson.md b/docs/node/week-1/lesson.md index a79899f536..3f53738ba3 100644 --- a/docs/node/week-1/lesson.md +++ b/docs/node/week-1/lesson.md @@ -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 @@ -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. ::: @@ -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 @@ -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**. diff --git a/docs/node/week-1/mentors.md b/docs/node/week-1/mentors.md index d82701c5af..67edbd21ba 100644 --- a/docs/node/week-1/mentors.md +++ b/docs/node/week-1/mentors.md @@ -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?" diff --git a/docs/node/week-2/homework.md b/docs/node/week-2/homework.md index d7626fedf0..77c8b64357 100644 --- a/docs/node/week-2/homework.md +++ b/docs/node/week-2/homework.md @@ -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+) 🔑 diff --git a/docs/node/week-2/lesson.md b/docs/node/week-2/lesson.md index 61049070ab..e4846b8e3c 100644 --- a/docs/node/week-2/lesson.md +++ b/docs/node/week-2/lesson.md @@ -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. ::: @@ -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! @@ -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. ::: @@ -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. diff --git a/docs/node/week-3/lesson.md b/docs/node/week-3/lesson.md index fdd463bebb..48067eac32 100644 --- a/docs/node/week-3/lesson.md +++ b/docs/node/week-3/lesson.md @@ -46,9 +46,7 @@ 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. ::: @@ -56,9 +54,9 @@ When you remix the starting project, immediately rename it as your own. 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. ::: @@ -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/). :::