Giters

bermarte / web-apps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Web Apps

client/server diagram

Contents

Learning Objectives

expand/collapse

Programming Skills

  • Comfortably work with the file system
  • Explain "persistence"
  • Build basic fullstack projects (SPA/API) that save to the file system
  • Write RESTful APIs for simple data relationships
  • Using NPM Packages in your projects
  • Using Postman to develop APIs without a frontend
  • Running and writing tests for API routes
  • Documenting your code with JSDoc

Native Node.js

  • Node.js CLI scripts
    • argsv - Use command line arguments in Node
  • Native Node.js modules
    • 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

NPM Packages

  • for fun:
    • cowsay - make cows say things
  • 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 - JSON schemas & validation

Development Tools

  • JSDoc - Generate documentation for your projects
  • Postman - Test your APIs without a frontend

TOP

About the Projects

Projects in this module will build on what you learned in the last module by adding in network calls to APIS and scheduled tasks on the event loop.

TOP

Suggested Study

References and Practice to help you master this module.

expand/collapse

https://study.hackyourfuture.be/node-js

Class Recordings

Debugging Node in VSCode

NPM

Node.js

About Servers

Express

Best Practices

JSON Schemas

Deployment

Directly from GitHub

From Terminal

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


TOP

Week 1

In Class: File system I/O & basic Node.js CLI programs

At Home: Express APIs that access the file system

expand/collapse

Before Class

Lesson Plan

during class

Before Break

After Break

  • 05-fs-async
    • examples: all together
    • exercises: in groups

After Class

Practice Project

Not required, but it will help.

restful-courses (project)

Group Project, Code-Along

This week's project is to follow the Build RESTful APIs with Node and Express by Mosh. Besides just Express and writing RESTful routes you will learn how to use JSON schemas, test your API's with Postman, use environmental variables-, and practice continuous development using _nodemon.

Don't worry if you don't understand everything in this project. The tutorial covers a lot of material very quickly, we'll spend the next weeks going deeper into the topics Mosh covers here. Think of this week's project as a sneak preview of the coming 3 weeks.

Just copying his code is not all! After finishing with the tutorial you will need to refactor the code so that It reads and writes from a file called courses.json instead of using a local variable. ie:

  1. app.post('/api/courses', (req, res) => {
  const { error } = validateCourse(req.body);
  if (error) return res.status(400).send(error.details[0].message);
  const course = {
    id: courses.length + 1,
    name: req.body.name,
  };
  courses.push(course);
  res.send(course);
});
  2. // there are some mistakes in this, we can't give it all away ;)
app.post('/api/courses', (req, res) => {
  const { error } = validateCourse(req.body);
  if (error) {
    return res.status(400).send(error.details[0].message);
  }
  fs.writeFile(COURSES_PATH, (err, content) => {
    if (err) {
      res.status(500).send(err.message);
      return;
    }
    const parsedCourses = JSON.stringify(content);
    const course = {
      id: courses.length + 1,
      name: req.body.name,
    };
    parsedCourses.push(course);
    const stringifiedCourses = JSON.parse(parsedCourses, null, '  ');
    fs.readFile(COURSES_PATH, parsedCourses, err => {
      if (err) {
        res.status(500).send(err.message);
        return;
      }
      res.send(course);
    });
  });
});

And here's a suggestion for how to organize your courses.json file:

{
  "nextId": 3,
  "courses": [
    {
      "id": 0,
      "name": "x-ray"
    },
    {
      "id": 2,
      "name": "gamma-ray"
    }
  ]
}

You will be expected to turn in your code from his tutorial on a new repository called restful-courses. you will be assessed not only on your live demo, but also on the quality of your code, the correctness of your branches, the organization of your code, and the completeness of your README. Your repo must include:

Checklist

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
  - [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
  - [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
  - [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
  - [ ] API data is saved in `courses.json`
  - [ ] Deployed - [deployment url]()

TOP

Week 2

APIs & Client/Server web apps

expand/collapse

Before Class

During Class

Before Break

After Break

After Class

Practice Project

It's not required, but it will help.

Project

DIY Wiki: Starer Code (Individual Project)

This week's project is to complete the code in the diy-wiki repository.

Checklist

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
  - [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
  - [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
  - [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
  - [ ] Deployed - [deployment url]()

TOP

Week 3

  • HTTP status codes
  • Error handling middleware
  • Separating concerns in Node/Express servers
  • Using Express Routers to write modular servers
expand/collapse

Before Class

During Class

Before Break

Practice refactoring small Express apps from single-file servers into multiple files using express.Router().

After Break

After Class

Practice Project

It's not required, but it will help. Revisit the text editor app you studied last week, this time refactoring the server from a single file to the same folder structure as the exercises. The code in this repo works! Your job is to make sure it still works after you've refactored it :)

Project

Again with the refactors?! This week's project is refactor the API from Build RESTful APIs with Node and Express into a full web app. To help you get started, you can use the courses-web-app template repo.

Besides refactoring the backend into multiple files, you are also expected to develope a frontend for your API in the /client directory. You can design the frontend however you like, and organize the code in a way that makes sense to you. The main objective this week is to understand how the frontend & backend are related.

Checklist

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
  - [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
  - [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
  - [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
  - [ ] Config
  - [ ] Deployed - [deployment url]()
  - [ ] data in a .json file

TOP

Week 4

  • JSON Schemas
  • Schema Validation
  • Adding a schema.json file to your projects
expand/collapse

Before Class

During Class

Before Break

Practice using JSON Schemas & tv4 to protect data saved in a .json file.

After break

After Class

Practice Project

It's not required, but it will help. Build a simple virtual file system using a .json data file and schema. This API is very similar to the one you studied the last two weeks, but instead of reading and writing actual files it stores file names and text contents as entries in a single .json file.

Project

impress yourselves! (Group Project)

This week's project is open-ended. Starting with the tv4-validation-fs-template, build a project to impress yourself. You've been at HYF for a few months now and every week your projects have been given to you. You've hopefully learned about planning the steps of your projects, organizing your code, and writing clean code. It's time to put yourself to the test.

Here are some tips to help you find your way:

  1. start with your user Begin by identifying the type of person who will want ot use your app, and why they would want to use it. Who is this project for? What does the app do for them? Why is this helpful?
  2. define your data Before you start coding, understand the data your application will be using. This includes writing the schema and creating some starter data by hand.
  3. write your backend first After defining your data, write an API that allows users to create, read, update, and delete entries in your data file(s).

Checklist

- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
  - [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
  - [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
  - [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
  - [ ] Deployed - [deployment link]()
  - [ ] A working frontend in the `/client` directory
  - [ ] A working API in the `/api` directory
  - [ ] A schema and valid data in the `/data` directory

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:
  2. week 2:
  3. week 3:
  4. week 4
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
  4. Week 4:

About

License:MIT License

Languages

Language:JavaScript 62.8%Language:CSS 14.7%Language:HTML 13.8%Language:SCSS 8.7%Language:Shell 0.0%