Web Apps

• wikipedia

---

Contents

• Learning Objectives
• Suggested Study
  • Isolate
  • Integrate
• Sundays & Projects
  • Week 1
  • Week 2
  • Week 3
  • Week 4
  • Week 5
• Class Recordings
• Curriculum (external)
• HYF Home (external)

---

Learning Objectives

expand/collapse

• 🥚 HTTP: You can explain these basic notions of the HTTP protocol, the main verbs, headers, ...
• 🥚 Client/Server Architecture: You can draw a diagram of your project explaining how the front- and back-ends connect, and can generalize this idea to any web app they use.
• 🥚 Persistence: You can explain what persistence is and how it is used in the backend of a web app. You can implement persistence using the backend's file system.
• 🥚 Postman: You can use Postman to test and inspect HTTP request/response cycles.
• 🥚 VSCode Debugger: You can use breakpoints to pause and step through a Node.js scripts and APIs using the VSCode debugger.
• 🥚 Promisification: You can convert built-in node modules from consuming callbacks being async functions.
• 🥚 NPM Modules: You can find, install, require and use an NPM module in your projects
• 🥚 Function Roles: You can explain and apply these 4 function roles in your backend code:
  • controllers: like event handlers, but for HTTP requests. (like event handlers in the frontend)
  • middleware: do things with a request before it is handled. (no frontend analogy)
  • data access: read/write from your data source and return the prepared data, in this module the data source is the file system. (like api calls in the frontend)
  • logic: pure functions that transform data and have unit tests. (same as for the frontend)
  • utils: functions with side-effects that do one helpful thing. (like procedures in the frontend)
• 🥚 Express.js: You can ...
  • listen a new server
  • use middleware
  • .get, .post, .put, .delete
  • route params
  • request body
  • send response
  • Express Router
  • static serving
• 🥚 Entry Points: You can identify the entry points for your app:
  • Initialization: npm scripts, first file, configuration points, server listening
  • Request/Response Cycle: first middleware, logging, routes, error handling
• 🥚 API Documentation: You can use JSDoc-style comments to document your API, and a documentation script to build API documentation
• 🐣 File System: You can read, write and append to .txt files. You can can parse, manipulate and re-save data stored in a .json file using the built-in fs and util.promisify functions.
• 🐣 Data Validation: You can validate data sent in a request to the backend before saving it to a .json file
• 🐣 RESTful Routes: You can implement RESTful routes in Express.js, including using the correct app._ verbs.
• 🐣 Authentication: You can explain the principles of authentication and can contribute to a group project that has basic authentication
• 🐣 Authentication vs. Authorization: You can explain the difference and how it is implemented in your projects
• 🐣 Environmental Variables: You can explain what an environmental variable is, what they're used for, and how they're configured
• 🐣 Backend Configuration: You can use environmental variables to launch your backend in different modes
• 🐥 Asynchronous Callbacks: You can read, trace and complete simple scripts that use callbacks to work with the file system
• 🐥 CI Deployment: You can set up a deployment for your web apps and connect it to your repository using a CI action so main/master is always deployed.
• 🐔 CLI Apps: You can complete a simple CLI app that takes user input from the command line and accesses the file system
• 🐔 node-fetch: You make API requests from the backend, and use the data in your web apps
• 🐔 Testing Routes: You can explain how tests for API routes work, and can write routes that pass given tests. You can also write tests for a route that already exists.

TOP

---

Suggested Study

References and Practice to help you master this module.

expand/collapse

https://hackyourfuture.github.io/study/#

Class Recordings

HTTP Statuses

• In 60 Seconds
• httpstatuses.com
• wikipedia
• http.cat

NPM

• What is it? How to use it?
• packages for fun:
  • cowsay - make cows say things
• packages for serious:
  • node-fetch - Make API requests from Node
  • express - Minimalist web framework for node
  • body-parser - Parse HTTP request body into JS object
  • cors - Cross Origin Resource Sharing for Express
  • morgan - logging for Express
  • joi, tv4 - JSON schemas & validation

Debugging Node in VSCode

Postman - use your APIs without a frontend

• Getting started with Node.js debugging in VS Code
• Burke Holland
• VSCode Channel Intro
• James Q Quick
• CodeSpace, 2 Ways

Node.js

• 101
  • Mosh: Node.js in 1 hour
  • Traversy: Node for Absolute Beginners
  • Traversy: Node.js Crash Course
  • NetNinja: Node Js Crash Course
  • argsv - Use command line arguments in Node
• Built-In Modules
  • The file system (first 20 minutes)
  • references
    • assert - Test values in Node.js
    • fs - Read & write form the file system
    • path - Manipulate file paths
    • util.promisify - Convert functions that take callbacks into Promises
• API Calls
  • node-fetch: a module for using fetch syntax in Node.js
  • To study a full app with node-fetch, head over to weather-it-promised & weather-it-async-await
  • /node-fetchemon (exercises to practice node-fetch)

About Servers

• Middleware: tutorialspoint, express.js guide, writing middleware (video)
• Static Serving: alligator article, codedamn video
• Error Handling Middleware:
  • Handling Errors in Express
  • REST API Tutorial (Node, Express & Mongo) #10 - Error Handling
• CORS: Cross Origin Resource Sharing
• HTTP Statuses
  • httpstatusdocs
  • HTTP Request Status Code Guide
  • In 60 Seconds
  • httpstatuses.com
  • wikipedia
  • http.cat

Express

• What is Express?
• LearnWebCode
• Traversy: Express.js Crash Course Build RESTful APIs with Node and Express by Mosh
• How To Build a Job Search App (Node, APIs, Vanilla JS): video, code
• Error Handling
  • The Net Ninja
  • Andrew Mead
  • Devnami
• Router
  • Scotch.io
  • Hungry Turtle
  • Rithm School
  • The Docs

Best Practices

• config file: how to

Examples and Exercises

• 🐣 /using-express: examples and exercises covering how to use express to build a web app.
• **[/reverse-engineer'](./reverse-engineer)**: projects with a demo.min.js` file to reverse-engineer
  • 🐣 /textidor-series
  • 🐥 /cowsaydex
• 🥚🐣🐥🐔 /example-apps: a variety of projects to study with code organized in different ways. some are simple and some are advanced. Enjoy!
• 🐔 `/node-fetchemon'
• 🐔 node-practice-replace (separate repo)
• 🐔 pokedex-api (separate repo)
• 🐔 diy-wiki (separate repo)

Deployment

Directly from GitHub

• FCC Article
• Heroku CI

From Terminal

• Heroku Getting Started
• Scotch Tutorial
• Heroku devhints
• Heroku DevCenter: Node.js Support
• Heroku DevCenter: Advanced Automation

From Founders and Coders

Founders and Coders is another open-source course in web development. They have some great resources for learning Node, Express and Web Apps

• Node.js
• REST APIs
• oliverjam
  • take a search through Oliver's repositories, worth it

TOP

---

Week 1

• Developing an Express API with RESTful routes
• Persisting API data to the file system using a .json file

expand/collapse

Before Class

• Have Node
  • Install NVM (node version manager)
  • Make sure you have the latest Node.js installed (16..)
  • The Net Ninja, Introduction to Node.js(video, for this week watch at least first 2 lessons or up to 5th, unfortunately lesson 6 about Express is outdated due to the new version of Express, where some methods were deprecated)
• Postman: install it and make an API request -Postman tutorial (video, you need only first half 'Unit 1') -Express
  • What is Express?(article)
  • LearnWebCode(video)
• Error-First Callbacks
  • fredkschott (article)
  • David Connelly (video)
• Read and run ./example-apps/storage-server
  • You do not need to understand everything, just enough that it's not totally new.

Lesson Plan

Before Break

• What are servers? What's a server-client architecture?
• What is NodeJS?
• How can we use the Expressjs library to build servers on NodeJs?
• What's the difference between static and dynamic data?
• How can we serve simple static data? (route params, query params, static-server)
• HTTP Methods (Verbs)

After Break

• Walkthrough of a starter-project where one path has been fully implemented
• Class project: implement the missing path

After Class

No project! There's enough to study without one ;)

If you want to begin preparing for the group project in Week 3 you can begin experimenting with the Web Apps Starter Repo

TOP

---

Week 2

• HTTP Status Codes
• POST Requests and the Body
• Using Postman
• How do we store/load data (memory vs. file system)?
• How do we separate our concerns? (multi-tier architecture)
• Using middleware
  • Logging
  • Validation
  • Error Handler

expand/collapse

Before Class

During Class

Before Break

After Break

After Class

Again, no project. Just more study and prep for next week.

TOP

---

Week 3

• CORS
• Authentication (BasicAuth, followed by Token-Based Auth, simple-password storage)
• Authorization
• Authentication vs. Authorization

expand/collapse

Before Class

During Class

Before Break

Lecture on CORS and Authentication/Authorization.

After Break

After Class

Implement some form of authentification, preferably Basic Authentification in this project

TOP

---

Week 4

• Token-based auth with hashed password storage
• JWT - JSON Web Tokens (fancy authentication)

expand/collapse

Before Class

code review

During Class

Before Break

After break

review common problems as a class

After Class

Practice Project

continue group project

TOP

---

Week 5

• finish group project

expand/collapse

Before Class

During Class

Before Break

code review

After break

review common problems as a class

After Class

Practice Project

continue group project

TOP

---

Class Recordings

• Students: Here you can find recordings of this module from past classes. Enjoy!
• Coaches: When sending your PR's with links please ...
  • Indicate which class you were teaching
  • Which week it was (if the module is more than 1 week)
  • Give your name
  • and a helpful description

Class 7-8

Shaun, Evan

1. week 1:
   • Part 1: Node, Web Apps, CLI's, fs, process.argv, assert
   • Part 2: Exercise recap, Project intro
   • Wrap-up: Homework explanation
2. week 2:
   • Part 1
   • Part 2
   • Wrap-up
3. week 3:
   • Part 1: A, B
   • Part 2
   • Part 3
4. week 4
   • Part 1
   • Part 2
   • Part 3

---

Class 9-10

Shaun

1. Week 1
   1. Node.js 101 & Client/Server
   2. CLI Input with process.argv
   3. assert & fs part 1
   4. fs part 2
   5. Entries Manager part 1
   6. Entries Manager part 2 & Project Intro
2. Week 2
   1. Static & Dynamic Data
   2. Express: Params, Body, Queries ...
   3. ... Params, Body, Queries
   4. Texidor
   5. Texidor Recap & DIY Wiki
3. Week 3
   • Middleware & Refactoring Servers
4. Week 4:
   • JSON Schemas & Data Validation

---

Class 11-12

Shaun, Andrej, Hazem

1. Week 1: part 1, part 2, part 3, part 4
2. Week 2: part 1, part 2, part 3, part 4, part 5
3. Week 3: Refactoring pt. 1, Refactoring pt. 2, middleware & error handling, homework
4. Week 4: JSON Schemas, Schema Validation, t4v validation library, conclusion

---

Class 13-14

Shaun, Yoshi

1. Week 1:
   1. Node, NPM, Packages
   2. Express, localhost, Request/Response
   3. Dynamic data, File System, Postman
   4. Routing and Parameters, Persistence, Multi-Tier architecture
   5. Slack clone part 1
   6. Slack clone part 2
   7. Monday review session
2. Week 2:
   • part 1
   • part 2
3. Week 3:
   • part 1
   • part 2
4. Week 4
5. Week 5