Web开发全栈项目班

Introduction & Web Tech

1.为什么课后要大量练习，课程概述，匠人学院简介，学员自我介绍，对学员的期待

2. 师资力量，全栈班教学安排，三个 project 介绍

3. 需要用到的前后端技术介绍，软技能的重要性

4. 什么是 Internet，客户端和服务器的通信过程

5. URL 的结构，网络请求，现代SPA的原理本质

6. Chrome Inspector如何使用，Inspector每个标签具体使用，以及高级开发隐藏属性

7. iOS真实设备或者模拟器如何进行Debug，Android模拟器如何Debug，web开发对真实设备Debug的重要性

8. 传统和现代的前后端开发流程演变，以及最基础Web架构

9. 云和 AWS 带来的改变AWS 的学习建议

10. Developer和DevOps 的区别，以及Agile在开发中的作用，各个团队扮演的角色，CI/CD的用处

HTML & CSS

1. 网页运行的过程, HTML 标签，Chrome Dev Tool

2. HTML 结构，head 的含义，HTML 是给谁看的，block/inline 元素，常用标签介绍，标签的语义性，accessibility

3. HTML 的注释，HTML 的跨浏览器兼容问题

4. CSS 的作用、发展历史，在 HTML 中插入 CSS 的方式，为什么不推荐 inline style

5. CSS 选择器的用法，伪类

6. CSS 盒模型，margin，padding

7. display 和 visibility 的区别

8. 定位

9. BEM 介绍

10. 布置第一个作业：根据要求用HTML，CSS，BEM，Position，RWD等完成第一个单个Card作业

CSS & Sass

1. 评讲 card design 作业，svg 的编辑

2. 设定 box-sizing 的效果

3. CSS 长度单位，绝对单位和相对单位

4. word-wrap 和 word-break 处理文本溢出

5. 伪类、伪元素

6. float 的常见用法

7. 选择器的 specificity 概念

8. 响应式设计

9. Bootstrap 介绍，用 Bootstrap 做响应式设计，Semantic UI

10. CSS 的痛点，SCSS 的写法，变量的用法

11. 弹性盒的用法、解决的问题

12. UI 设计原则，个人网站的设计案例，流行的组件库介绍

13. 第二个作业：使用Sass改写第一个作业，并且完成4个Cards布局

JavaScript

1. JS 数据类型的特点，和 TypeScript 的区别，JS 的历史， 在 nodejs中运行 JS

2. 变量，严格模式，变量提升，变量命名规则，数据类型，计算精度的问题

3. 操作符，相等和严格相等，类型转换，truthy/falsy 值

4. 数组，数组的方法

5. 条件语句，循环语句，break/continue 语句，小测验：九九乘法表

6. 用函数实现代码复用，作用域，传参，传值引发的问题

7. 对象，对象和数组的比较，对象中的 this 问题

Tutorial1

1. 行业常用HTML, 包括 a p, ul, menu 等标签。

2. 行业常用CSS, 包括 absolute/relative, background color, margin 等。

3. 什么是SEO, SEO如何影响排名, 行业常用SEO标签, 包括

Title tag, meta description, 好与坏HTML的示例。

4. 作业1进度检查和Q&A

Git Introduction

1. 版本控制系统的概念，分布式版本控制系统，主流的 git 系统

2. 初始化 git 空间，add，commit，log，gitignore 应该放哪些文件，log 的美化

3. mkdir 创建目录

4. 图形化工具 Sourcetree

5. commit 之后的回滚，reset，revert，amend

6. checkout、stash 的区别

7. 日常工作中使用 git 的流程

8. 创建远端 repository，clone，push，pull创建分支，merge，如何解决冲突，rebase，pull request，review change 的规则，工作中的 pull request merge 策略

Links:

Git client: https://git-scm.com/

SourceTree: https://www.sourcetreeapp.com/

Visualizing Git: http://git-school.github.io/visualizing-git/#free

Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701

Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup

Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

Node.js: Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Interview and CV Linkedin CV

1. 校招和社招的要求，entry level vs junior level vs mid level

2. 职场规划，沟通能力的重要性，team match 的重要性

3. 澳洲公司情况，产品方向 vs 咨询方向

4. 找工作网站的区别、建议

5. 工作类型，permanent vs contractor，薪资期待，福利待遇

6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用

7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile

8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period

9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历

10. 求职信的作用，怎样写求职信

Tutorial2

1. 什么是git flow，如何使用git flow, 包括什么是 feature branch 什么时候使用feature branch, 什么是 hotfix branch 什么时候使用hotfix branch,

3. Flexbox 练习

2. 作业1进度检查和Q&A

Node.js: Introduction to npm and Koa

Npm & Node.js API.

Node.js: Koa

callback， promise，async await怎么用的，怎么写以及为什么

koa搭建一个简单的服务器

postman怎么用

curl的使用

koa的洋葱模型的例子

Tutorial3

1. How to setup GitHub SSH

2. Assignment 1 Progress and QA

Agile

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. Scrum 框架的各个流程概述，“3355”方法论

3. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

4. 班级进行模拟 retrospective meeting，回顾课程至今的成果与不足

5. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 怎样改进流程、提高效率，为什么企业需要 T 型人才

7. 介绍精益方法和 Kanban，实际使用中 Kanban 和 Scrum 的结合

8. Project 3 分组

Tutorial4

1. Hosting Github

2. Node.js Folder Structure

3. Assignment 1 Progress and QA

Node.js: Rest API

Introduction to Rest API and bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios.

REACT: React with Modern JavaScript

React with Modern JavaScript

- React Component fundamental

- Understand JSX, JS extension for declarativecomponent

- ES6 essentials (destructing, spread, rest variable

- scope (let) arrow fn, callback context), class

REACT: Make it stateful

Make it stateful

- Stateful and stateless (state with props)

- Create class stateful component and update state

- Lifecycle breakdown

- ES6 module, why we need

- How create-react-app release the initial project setup pain

- Start rewriting weather app (individual project)

- keep data in state and render

REACT: Make it interactive

Make it interactive

- Render repeated components

- Container map data to a list of presentational comps

- The ‘key’ in a list of comps

- React event handling

- Fix ‘this’ in callback context (Function.bind, Arrow and class field method)

- Form handling and controlled input

- Lab

REACT: Talk to remote

1. 回顾

- 回顾了React Event handling的意义

- 回顾了Rendering list需要注意的点，map使用的主意要点。

- 回顾了Forms 的使用要点。

2. Condition Rendering

- 当出现根据条件判断返回JSX时的三种方式。

- 通过大括号内加入与/或的判断方式比其他两种方式的优势在哪。

3. Presentational components

- 没有依赖的组件优势在哪里。

- 用什么方法可以把组件内标签包裹的部分通过props调用出来。

4. Css 的加入位置

5. AJAX

- 为什么要使用AJAX。

- 再次讲解了Promise anysc/await的用法

- 如何使用Axios调用API

- 获取返回值的一些技巧

Node.js: MongoDB Database

1. Koa router的另外三个， push, put, delete

- 为什么以及如何使用koa-bodyparser

- http协议的组成部分中status返回码的意义。

- 如何操作Postman进行push操作。

- 在无法查询到的时候为什么默认的返回码是不正确的，以及修改方式。

2. MongoDB

- MongoDB的介绍。

- MongoDB的安装。

- MongoDB的五个主要组成。

- MongoDB的collection Doc的增删改查操作。

- 针对修改和删除操作的一些最佳实践和保护性思路。

- 一些性能优化方案。

Tutorial6

Project 2 Q&A

Node.js: Mongoose

1. 介绍mongodb的数据库调用包，mongo,mongoose。

2. 重点讲述mongoose包的使用。

3. 代码实操。

- 将原本本地数据的增删改查代码升级为数据库版本。

- 利用中间件的方式对路由数据进行校验。

4. 增加query讲解，批量寻找。

5. 分页查询，以及使用场合。

- 分页数量的计算。

- 分页查询请求方式。

- projection选取部分数据信息

Interview 1

Interview Overview

- Preparation

- Process

- Format

- Code Test

Node.js: Restful API test and CI

1. Backend Server如何拆分为模块。

- app调用拆分

- 路由拆分

- 中间件拆分

2. 批量添加路由

- 检测中间件

- 批量检测ID合法性

- 批量查重

- 限制ID查询数量，增强防御性

- bulkGet批量添加

- MongoDB批量查询路径

- Debug 模块的用法

3. Test测试

- egg-bin/supertest介绍

- 黑盒测试代码结构

- 测试后数据清理方式

Node.js: Build restful service using Docker

1. 黑盒测试完整版（End to End）

- 黑盒测试用需要考虑的所有特殊情况

2. 白盒测试（Unit Test）

- mm工具的安装和使用。

- 白盒测试针对每一行代码进行测试。

3. CI/CD (持续集成)

- git 指令提交代码分支

- yaml 文件写法

- github 操作完成 action 测试

4. Docker

- docker 介绍

- docker 安装配置

- docker 原理

- docker 启动多种镜像

- docker mongodb 映射，以及外部调用。

Node.js: Build & Deploy to AWS

Docker Image (镜像), 基于Docker技术的操作环境

image layer => 多个layer组成一个image,

不同image可以供用相同layer,

docker技术将会维护不同image中layer的组成

layer层次技巧=> 越不常修改的部分 越往上摆 使它放在越底层的layer

Dockerfile https://hub.docker.com/

Dockerhub, 各种开源的Docker Image的集合仓库

也是dock image的托管服务提供商之一

Dockerfile官方文档

https://docs.docker.com/engine/reference/builder/

Dockerfile 语法:

- Dockerfile指令都是大写开头

- 绝大多数的Dockfile都是以 FROM 起头

- 常用指令: FROM / COPY / WORKDIR / RUN / CMD / ADD / ENTRYPOINT

# image-name:tag

=> tag并无命确的用法定义, 通常是指version

=> image 一定要有tag, 如果不给tag会自动默认为 latest(最新)

=> tag 命名方法不同的imge会有不同的定义

=> [image托管仓库url] 默认使用dockerfile

FROM [image托管仓库url] node:14-slim

命令行

=> docker build -t jr11:v1 . => 创建container

=> docker run -it jr11:v1 bash => 进入container

WORKDIR /app #指定工作目录

#COPY [文件名] [目录名]

COPY package.json .

RUN npm i --production

COPY index.js .

COPY src src

CMD ["node", "index.js"]

REACT: Build LMS: project structure

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: Auth Flow & connect API

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: CRUD flow & routing

Build project structure

- Define the CRUD for 3 models course, student, lecture

- Implement routing for CRUD flow

- Explain route path params

- React router mechanism to send state to component

- Ways to hook route component (props / render callback)

- Implement controlled form for multi inputs

- Immutable state update

- Lab

REACT: React patterns and review

React patterns and review

- Composition over Inheritance

- Container (controller) with Presentation component

- Review component lifecycle

- React new declarative Context?

- Higher order component

- React 16 features: Fragment, Portal

- Explore more frontend ecosystem (intro to third party state management)

- Redux introduction

- React performance caveats

- Deploy React SPA to AWS S3 bucket

Interview 2

Mock Interview

模拟面试

10分钟面试+5分钟答疑的形式

解决大部分的 Behavior Question

不同级别的技术问题

AWS基础课程

AWS常用Service的使用

AWS CLI使用

IAM

EC2

S3

Algorithm

Presentation (Group Work)

Project 3 Battle

不同的小组进行Project 3打分

然后1-2位Mentor针对每个小组进行考评打分

优胜队伍有奖励以及奖状

课程评分标准

https://www.notion.so/jracademy/Project3-1039a98e7ab24b5bb2fcd47d39d2429b

Introduction & Web Tech

1.为什么课后要大量练习，课程概述，匠人学院简介，学员自我介绍，对学员的期待

2. 师资力量，全栈班教学安排，三个 project 介绍

3. 需要用到的前后端技术介绍，软技能的重要性

4. 什么是 Internet，客户端和服务器的通信过程

5. URL 的结构，网络请求，现代SPA的原理本质

6. Chrome Inspector如何使用，Inspector每个标签具体使用，以及高级开发隐藏属性

7. iOS真实设备或者模拟器如何进行Debug，Android模拟器如何Debug，web开发对真实设备Debug的重要性

8. 传统和现代的前后端开发流程演变，以及最基础Web架构

9. 云和 AWS 带来的改变AWS 的学习建议

10. Developer和DevOps 的区别，以及Agile在开发中的作用，各个团队扮演的角色，CI/CD的用处

HTML & CSS

1. 网页运行的过程, HTML 标签，Chrome Dev Tool

2. HTML 结构，head 的含义，HTML 是给谁看的，block/inline 元素，常用标签介绍，标签的语义性，accessibility

3. HTML 的注释，HTML 的跨浏览器兼容问题

4. CSS 的作用、发展历史，在 HTML 中插入 CSS 的方式，为什么不推荐 inline style

5. CSS 选择器的用法，伪类

6. CSS 盒模型，margin，padding

7. display 和 visibility 的区别

8. 定位

9. BEM 介绍

10. 布置第一个作业：根据要求用HTML，CSS，BEM，Position，RWD等完成第一个单个Card作业

CSS & Sass

1. 评讲 card design 作业，svg 的编辑

2. 设定 box-sizing 的效果

3. CSS 长度单位，绝对单位和相对单位

4. word-wrap 和 word-break 处理文本溢出

5. 伪类、伪元素

6. float 的常见用法

7. 选择器的 specificity 概念

8. 响应式设计

9. Bootstrap 介绍，用 Bootstrap 做响应式设计，Semantic UI

10. CSS 的痛点，SCSS 的写法，变量的用法

11. 弹性盒的用法、解决的问题

12. UI 设计原则，个人网站的设计案例，流行的组件库介绍

13. 第二个作业：使用Sass改写第一个作业，并且完成4个Cards布局

JavaScript

1. JS 数据类型的特点，和 TypeScript 的区别，JS 的历史， 在 nodejs中运行 JS

2. 变量，严格模式，变量提升，变量命名规则，数据类型，计算精度的问题

3. 操作符，相等和严格相等，类型转换，truthy/falsy 值

4. 数组，数组的方法

5. 条件语句，循环语句，break/continue 语句，小测验：九九乘法表

6. 用函数实现代码复用，作用域，传参，传值引发的问题

7. 对象，对象和数组的比较，对象中的 this 问题

Tutorial1

1. 行业常用HTML, 包括 a p, ul, menu 等标签。

2. 行业常用CSS, 包括 absolute/relative, background color, margin 等。

3. 什么是SEO, SEO如何影响排名, 行业常用SEO标签, 包括

Title tag, meta description, 好与坏HTML的示例。

4. 作业1进度检查和Q&A

Git Introduction

1. 版本控制系统的概念，分布式版本控制系统，主流的 git 系统

2. 初始化 git 空间，add，commit，log，gitignore 应该放哪些文件，log 的美化

3. mkdir 创建目录

4. 图形化工具 Sourcetree

5. commit 之后的回滚，reset，revert，amend

6. checkout、stash 的区别

7. 日常工作中使用 git 的流程

8. 创建远端 repository，clone，push，pull创建分支，merge，如何解决冲突，rebase，pull request，review change 的规则，工作中的 pull request merge 策略

Links:

Git client: https://git-scm.com/

SourceTree: https://www.sourcetreeapp.com/

Visualizing Git: http://git-school.github.io/visualizing-git/#free

Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701

Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup

Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

Node.js: Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Interview and CV Linkedin CV

1. 校招和社招的要求，entry level vs junior level vs mid level

2. 职场规划，沟通能力的重要性，team match 的重要性

3. 澳洲公司情况，产品方向 vs 咨询方向

4. 找工作网站的区别、建议

5. 工作类型，permanent vs contractor，薪资期待，福利待遇

6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用

7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile

8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period

9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历

10. 求职信的作用，怎样写求职信

Tutorial2

1. 什么是git flow，如何使用git flow, 包括什么是 feature branch 什么时候使用feature branch, 什么是 hotfix branch 什么时候使用hotfix branch,

3. Flexbox 练习

2. 作业1进度检查和Q&A

Node.js: Introduction to npm and Koa

Npm & Node.js API.

Node.js: Koa

callback， promise，async await怎么用的，怎么写以及为什么

koa搭建一个简单的服务器

postman怎么用

curl的使用

koa的洋葱模型的例子

Tutorial3

1. How to setup GitHub SSH

2. Assignment 1 Progress and QA

Agile

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. Scrum 框架的各个流程概述，“3355”方法论

3. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

4. 班级进行模拟 retrospective meeting，回顾课程至今的成果与不足

5. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 怎样改进流程、提高效率，为什么企业需要 T 型人才

7. 介绍精益方法和 Kanban，实际使用中 Kanban 和 Scrum 的结合

8. Project 3 分组

Tutorial4

1. Hosting Github

2. Node.js Folder Structure

3. Assignment 1 Progress and QA

Node.js: Rest API

Introduction to Rest API and bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios.

REACT: React with Modern JavaScript

React with Modern JavaScript

- React Component fundamental

- Understand JSX, JS extension for declarativecomponent

- ES6 essentials (destructing, spread, rest variable

- scope (let) arrow fn, callback context), class

REACT: Make it stateful

Make it stateful

- Stateful and stateless (state with props)

- Create class stateful component and update state

- Lifecycle breakdown

- ES6 module, why we need

- How create-react-app release the initial project setup pain

- Start rewriting weather app (individual project)

- keep data in state and render

REACT: Make it interactive

Make it interactive

- Render repeated components

- Container map data to a list of presentational comps

- The ‘key’ in a list of comps

- React event handling

- Fix ‘this’ in callback context (Function.bind, Arrow and class field method)

- Form handling and controlled input

- Lab

REACT: Talk to remote

1. 回顾

- 回顾了React Event handling的意义

- 回顾了Rendering list需要注意的点，map使用的主意要点。

- 回顾了Forms 的使用要点。

2. Condition Rendering

- 当出现根据条件判断返回JSX时的三种方式。

- 通过大括号内加入与/或的判断方式比其他两种方式的优势在哪。

3. Presentational components

- 没有依赖的组件优势在哪里。

- 用什么方法可以把组件内标签包裹的部分通过props调用出来。

4. Css 的加入位置

5. AJAX

- 为什么要使用AJAX。

- 再次讲解了Promise anysc/await的用法

- 如何使用Axios调用API

- 获取返回值的一些技巧

Node.js: MongoDB Database

1. Koa router的另外三个， push, put, delete

- 为什么以及如何使用koa-bodyparser

- http协议的组成部分中status返回码的意义。

- 如何操作Postman进行push操作。

- 在无法查询到的时候为什么默认的返回码是不正确的，以及修改方式。

2. MongoDB

- MongoDB的介绍。

- MongoDB的安装。

- MongoDB的五个主要组成。

- MongoDB的collection Doc的增删改查操作。

- 针对修改和删除操作的一些最佳实践和保护性思路。

- 一些性能优化方案。

Tutorial6

Project 2 Q&A

Node.js: Mongoose

1. 介绍mongodb的数据库调用包，mongo,mongoose。

2. 重点讲述mongoose包的使用。

3. 代码实操。

- 将原本本地数据的增删改查代码升级为数据库版本。

- 利用中间件的方式对路由数据进行校验。

4. 增加query讲解，批量寻找。

5. 分页查询，以及使用场合。

- 分页数量的计算。

- 分页查询请求方式。

- projection选取部分数据信息

Interview 1

Interview Overview

- Preparation

- Process

- Format

- Code Test

Node.js: Restful API test and CI

1. Backend Server如何拆分为模块。

- app调用拆分

- 路由拆分

- 中间件拆分

2. 批量添加路由

- 检测中间件

- 批量检测ID合法性

- 批量查重

- 限制ID查询数量，增强防御性

- bulkGet批量添加

- MongoDB批量查询路径

- Debug 模块的用法

3. Test测试

- egg-bin/supertest介绍

- 黑盒测试代码结构

- 测试后数据清理方式

Node.js: Build restful service using Docker

1. 黑盒测试完整版（End to End）

- 黑盒测试用需要考虑的所有特殊情况

2. 白盒测试（Unit Test）

- mm工具的安装和使用。

- 白盒测试针对每一行代码进行测试。

3. CI/CD (持续集成)

- git 指令提交代码分支

- yaml 文件写法

- github 操作完成 action 测试

4. Docker

- docker 介绍

- docker 安装配置

- docker 原理

- docker 启动多种镜像

- docker mongodb 映射，以及外部调用。

Node.js: Build & Deploy to AWS

Docker Image (镜像), 基于Docker技术的操作环境

image layer => 多个layer组成一个image,

不同image可以供用相同layer,

docker技术将会维护不同image中layer的组成

layer层次技巧=> 越不常修改的部分 越往上摆 使它放在越底层的layer

Dockerfile https://hub.docker.com/

Dockerhub, 各种开源的Docker Image的集合仓库

也是dock image的托管服务提供商之一

Dockerfile官方文档

https://docs.docker.com/engine/reference/builder/

Dockerfile 语法:

- Dockerfile指令都是大写开头

- 绝大多数的Dockfile都是以 FROM 起头

- 常用指令: FROM / COPY / WORKDIR / RUN / CMD / ADD / ENTRYPOINT

# image-name:tag

=> tag并无命确的用法定义, 通常是指version

=> image 一定要有tag, 如果不给tag会自动默认为 latest(最新)

=> tag 命名方法不同的imge会有不同的定义

=> [image托管仓库url] 默认使用dockerfile

FROM [image托管仓库url] node:14-slim

命令行

=> docker build -t jr11:v1 . => 创建container

=> docker run -it jr11:v1 bash => 进入container

WORKDIR /app #指定工作目录

#COPY [文件名] [目录名]

COPY package.json .

RUN npm i --production

COPY index.js .

COPY src src

CMD ["node", "index.js"]

REACT: Build LMS: project structure

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: Auth Flow & connect API

Build project structure

- Routing concept

- How client side routing works (Browser History API)

- Introduce react-router-dom, declarative routing

- Wire up 3 components (Router, Route, Link)

- Start layout the group project and assign responsibility

REACT: Build LMS: CRUD flow & routing

Build project structure

- Define the CRUD for 3 models course, student, lecture

- Implement routing for CRUD flow

- Explain route path params

- React router mechanism to send state to component

- Ways to hook route component (props / render callback)

- Implement controlled form for multi inputs

- Immutable state update

- Lab

REACT: React patterns and review

React patterns and review

- Composition over Inheritance

- Container (controller) with Presentation component

- Review component lifecycle

- React new declarative Context?

- Higher order component

- React 16 features: Fragment, Portal

- Explore more frontend ecosystem (intro to third party state management)

- Redux introduction

- React performance caveats

- Deploy React SPA to AWS S3 bucket

Interview 2

Mock Interview

模拟面试

10分钟面试+5分钟答疑的形式

解决大部分的 Behavior Question

不同级别的技术问题

AWS基础课程

AWS常用Service的使用

AWS CLI使用

IAM

EC2

S3

Algorithm

Presentation (Group Work)

Project 3 Battle

不同的小组进行Project 3打分

然后1-2位Mentor针对每个小组进行考评打分

优胜队伍有奖励以及奖状

课程评分标准

https://www.notion.so/jracademy/Project3-1039a98e7ab24b5bb2fcd47d39d2429b

Introduction & Web Tech

1.为什么课后要大量练习，课程概述，匠人学院简介，学员自我介绍，对学员的期待

2. 师资力量，全栈班教学安排，三个 project 介绍

3. 需要用到的前后端技术介绍，软技能的重要性

4. 什么是 Internet，客户端和服务器的通信过程

5. URL 的结构，网络请求，现代SPA的原理本质

6. Chrome Inspector如何使用，Inspector每个标签具体使用，以及高级开发隐藏属性

7. iOS真实设备或者模拟器如何进行Debug，Android模拟器如何Debug，web开发对真实设备Debug的重要性

8. 传统和现代的前后端开发流程演变，以及最基础Web架构

9. 云和 AWS 带来的改变AWS 的学习建议

10. Developer和DevOps 的区别，以及Agile在开发中的作用，各个团队扮演的角色，CI/CD的用处

HTML & CSS

1. 网页运行的过程, HTML 标签，Chrome Dev Tool

2. HTML 结构，head 的含义，HTML 是给谁看的，block/inline 元素，常用标签介绍，标签的语义性，accessibility

3. HTML 的注释，HTML 的跨浏览器兼容问题

4. CSS 的作用、发展历史，在 HTML 中插入 CSS 的方式，为什么不推荐 inline style

5. CSS 选择器的用法，伪类

6. CSS 盒模型，margin，padding

7. display 和 visibility 的区别

8. 定位

9. BEM 介绍

CSS & SASS2

1. 评讲 card design 作业，svg 的编辑

2. 设定 box-sizing 的效果

3. CSS 长度单位，绝对单位和相对单位

4. word-wrap 和 word-break 处理文本溢出

5. 伪类、伪元素

6. float 的常见用法

7. 选择器的 specificity 概念

8. 响应式设计

9. Bootstrap 介绍，用 Bootstrap 做响应式设计，Semantic UI

10. CSS 的痛点，SCSS 的写法，变量的用法

11. 弹性盒的用法、解决的问题

12. UI 设计原则，个人网站的设计案例，流行的组件库介绍

JavaScript

1. JS 数据类型的特点，和 TypeScript 的区别，JS 的历史， 在 nodejs中运行 JS

2. 变量，严格模式，变量提升，变量命名规则，数据类型，计算精度的问题

3. 操作符，相等和严格相等，类型转换，truthy/falsy 值

4. 数组，数组的方法

5. 条件语句，循环语句，break/continue 语句，小测验：九九乘法表

6. 用函数实现代码复用，作用域，传参，传值引发的问题

7. 对象，对象和数组的比较，对象中的 this 问题

Git Introduction

1. 版本控制系统的概念，分布式版本控制系统，主流的 git 系统

2. 初始化 git 空间，add，commit，log，gitignore 应该放哪些文件，log 的美化

3. mkdir 创建目录

4. 图形化工具 Sourcetree

5. commit 之后的回滚，reset，revert，amend

6. checkout、stash 的区别

7. 日常工作中使用 git 的流程

8. 创建远端 repository，clone，push，pull创建分支，merge，如何解决冲突，rebase，pull request，review change 的规则，工作中的 pull request merge 策略

Project One : Tutorial & Lab

JavaScript ES6

1. 老师自我介绍，用自身成长经历给同学们鼓励

2. JS 基本概念快速回顾，介绍 Vanilla JavaScript，JS 的版本演变

3. 箭头函数，“函数是一等公民”

4. JS 中的 OOP，与 Java 对比，ES6 的 class 写法

5. 变量提升，let、const 解决的问题

6. 模板字符串

7. 解构赋值

8. 课堂作业：Flight Stops，Tax Calculation，Readable, Maintainable, Reusable 的重要性，讲解课堂作业：Flight Stops

Introduction To React

1. 为什么要避免 if else，结合招聘要求证明 readable，maintainable，reusable 的重要性

2. 讲解上节课 Tax Calculator 作业，演示如何使代码 readable，maintainable，reusable

3. 用 SOLID 原则解决问题，单一职责，开关原则，依赖注入

4. React introduction，什么是声明式，以 p1 为例比较声明式与命令式

5. react 的组件化特性

6. 企业招 junior 的要求

7. 依赖管理的概念和目的

8. NPM 的用法

9. Webpack 的用法

React 哲学 Part 1 (Component & JSX)

1. React 哲学，组件的概念

2. 如何划分组件层级，以 Project 1 主页为例

3. 用 React 创建静态版本，分别用普通 JS 和 JSX 写 HTML，体会React 带来的便利性

4. React 中 JSX 代码的运行原理，为什么一些关键字要进行改写，为什么组件名首字母要大写

5. 如何运行 React 代码，引用 React 库，使用 babel，使用 ReactDOM

6. 如何使用 webpack 和 babel 进行自动编译，如何解决 webpack 的报错

React 哲学 Part 2 (props & CSS in JS)

1. 标准的澳洲面试流程

2. webpack 的配置，path，正则表达式，生产环境

3. webpack-dev-server，html-webpack-plugin

4. React 项目文件结构

5. import CSS 和图片的方法，各种 loader 的作用

6. props 概念，传递 props 的方法，props 的命名习惯

7. CSS in JS，BEM 的弊端，CSS module 的用法

React 哲学 Part 3 (state)

1. React 项目文件结构，Single Page Application，assets 的复用

2. React 中如何处理事件，实现用户交互，声明式的好处，为什么要event.preventDefault()，事件冒泡

3. 为什么要用 class

4. 入口文件的作用

5. 以 p1 navbar 为例演示 React 中如何实现交互，class component 的基本写法

6. react.createElement 的原理

7. 初始化 state，setState 方法，为什么不能直接更改 this.state

8. this 问题的解决方法

React 哲学 Part 4 (state lifting & Lifecycle)

1. class component 中的 this 绑定，this 的指向，传递函数给子组件

2. state 的异步更新：概念、目的、导致的问题和应对的方法，传递回调函数给 setState，setState中传入第二个参数   

3. state 的 immutable 概念，React 触发渲染的机制，实现 immutable 的正确方法    

4. 确定 state 放置的位置，唯一数据源，state lifting，以 Project 1 为例进行演示

5. 短路运算

6. virtual DOM 机制、解决的问题，为什么 map 出来的组件必须加 key

7. state VS props VS class property

React 哲学 Part 5 (Fetch Data & context)

1. 为什么父组件的 state 可以作为 props 传递给子组件

2. 生命周期的三个状态，五个周期，两种特殊状态

3. 为什么 render() 和 constructor() 里要避免 setState()，为什么没有 componentDidUnmount()

4. 为什么要避免 will 系列方法，CAP 定理

5. 以 p1 为例演示各个周期的触发条件

6. 异步在前端的概念，回调函数， 回调地狱

7. promise，JS 的事件循环，链式写法及其问题

8. async/await

Tutorial: Project Two

Agile Scrum Jira Sprint Story point Teamwork

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. Scrum 框架的各个流程概述，“3355”方法论

3. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

4. 班级进行模拟 retrospective meeting，回顾课程至今的成果与不足

5. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 怎样改进流程、提高效率，为什么企业需要 T 型人才

7. 介绍精益方法和 Kanban，实际使用中 Kanban 和 Scrum 的结合

8. Project 3 分组

9. 介绍 Sportify

Java Basic 1

1. 网站架构学习资料推荐，云服务对架构设计的改变

2. 架构设计遵循的五个原则

3. 网站业务扩展后服务器架构的演变，服务器物理分离，缓存服务器的作用

4. 服务器横向扩展，load balancer，EC2，stateless 概念，应用服务器为什么要 stateless

5. 数据库的主/从分离

6. CDN 服务器，分布式服务器，消息队列服务器，处理 log 的工具

7. 本课程 RESTful API 需要掌握的程度，后端的四层结构阐述和示例，

8. 事务的概念，DTO 和 Entity 的作用、关系，Lombok，API Gateway

9. 单体系统和分库

10. 单元测试的原则，各层的单元测试示例

11. 演示 CI/CD，CI/CD 工具，对 AWS 学习的建议

Java Basic 2

1. Java 学习资料，怎样应对新知识

2. Java 核心概念，封装继承多态，List/Set/Map，泛型，Lambda，强类型语言的优点

3. Java 运行原理，相关文件的后缀名，

4. 怎样创建 Java 项目，Maven 和Gradle 比较，项目文件结构

5. debug 的方法

6. Java 中的变量，primitive 类型和包装类

7. 条件语句，循环语句

8. 类型转换

9. user input

10. 面向对象，创建 package，自定义构造函数，构造函数的多态、复用，getter/setter，public/private

11. ArrayList 的用法

Spring Boot Introduction

1. 复习构造器

2. 类的继承，实例化，this 的指向，子类的多态，consumer，super 访问父类，

3. Set 和 List 比较

4. 泛型

5. 接口类、抽象类的概念和区别

6. collection，Java 中的函数式编程

7. Spring Boot 脚手架搭建，项目文件结构，敏感信息存放的位置，12 factor

8. Postman 介绍

Tutorial: springboot答疑及安装运行postgres数据库

Restful API

1. docker 常用命令

2. RESTful API 介绍，重要概念：resource，method，endpoint，payload

3. 常用的http methods：get、post、put、patch、delete、option 的使用场景，用 payload 装载内容

4. 请求的组成部分：header，body，URL

5. 为什么 RESTful API 需要 stateless

6. mapstruct 的使用方法和原理

7. 演示在 Spring Boot Controller 和 Service 层中实现 get/post/put/delete 等方法

8. 解析 PathVariable 和  RequestParam

9. 用 postman 进行测试，在 postman 中创建 collection

SQL

1. 创建表，主键、外键的关联，表与表之间的关系，删除表，更改表的定义

2. select 语句，选择所有，选择指定 column

3. where 语句，and/or，比较，in/not in，is null/not null

4. 模糊筛选

5. 排序，去掉重复项，起别名

6. 拼接

7. 统计语句：count，sum，max，min，avg

8. group by 语句，having 语句

9. join 语句，left join，inner join，outer join

10. 布尔运算：union, intersect, except

11. 子查询

Tutorial: 连接postgres和dockerize springboot

Spring Data JPA

1. 什么是 ORM，什么是 JPA，什么是 Spring Data JPA

2. Spring Data JPA 使用方法、参数配置

3. 在 DAO 层进行基本查询，分页的两种思路比较，自定义简单查询，怎样查看官方文档

4. 在 DAO层进行复杂查询，JPQL，HQL 和 nativeQuery

5. 在 Entity 层创建表，定义中间表，建立好表之间的一对一、一对多、多对多关系

6. flyway 的用处，如何搭建

7. 配置 Dockerfile： multistage，解压 jar，run shell script，动态注入环境变量

8. 演示 build docker image，注入环境变量

SQL Design Tutorial

1. p3 后端完成的标准

2. 介绍 message，案例讨论：怎样为网站增加一个操作日志？

3. 数据库的三范式

4. 演示一个新项目的数据库的分析过程，以 pizza 为例：确定实体，确定表之间的关系，讨论业务逻辑，前台和后台的分离

5. 各个微服务数据库之间的访问方法

6. 用户登录功能的工作过程，JWT token，用 filter 检查，centralised exception 处理

Tutorial: 使用docker-compose运行springboot及PostgresSQL

Spring Security

1. spring security 框架介绍

2. authentication 和 authorization 的概念

3. authentication 和 authorization 基于硬编码的实现，JWT 的验证过程，role 和 authority，通过 debug 理解程序的流程

4. 详细讲解用 Mockito 来实现Mock掉Repository层的 class

5. 详细讲解用 Mockito 来进行 Service 层的单元测试

6. 详细讲解用WebMVCTest来进行 Controller 层的单元测试

7. 概述集中处理 exception 的方法

Interview and CV Linkedin CV

1. 校招和社招的要求，entry level vs junior level vs mid level

2. 职场规划，沟通能力的重要性，team match 的重要性

3. 澳洲公司情况，产品方向 vs 咨询方向

4. 找工作网站的区别、建议

5. 工作类型，permanent vs contractor，薪资期待，福利待遇

6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用

7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile

8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period

9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历

10. 求职信的作用，怎样写求职信

Tutorial: 实现Spring Security

Build LMS: 第一步：将设计好的 UI 划分为组件层级

1. 回顾 JS 中的异步概念

2. 回顾 p2，展示文件结构，index 中转的目的

3. React 中加载数据的时机

4. 动态、异步加载数据的方式

5. React 异步陷阱，loading page 怎么写

6. AJAX 简介，XMLHttpRequest 简介、用法、4 个状态，以 p2 为例演示

7. fetch 的用法、优化的写法、存在的问题

8. axios 简介

Tutorial: 实现Spring Security - 2

Build LMS: 第二步：用 React 创建一个静态版本

1. 组内怎么交流，Standup Meeting 的频率，Retro Meeting 怎么开，Bus Factor，多开会少写代码

2. 如何开始一个 create-react-app 项目，项目基本建设：组件库，文件结构

3. 组内如何分配任务，怎么写 AC

4. 怎样创建静态页面，怎样划分组件层级：以写导航栏为例

5. 如何拆出可复用组件

6. style components 用法，就近维护原则，“just enough”原则，责任划分原则

Build LMS: 第三步：确定 UI state 的最小（且完整）表示

1. styled-components 的多态

2. 为什么要避免 true / false props

3. 怎样把组件拆分成任务，以 login 弹窗为例

4. 设计 state 的步骤，state 放在哪里

5. 弹窗的设计，弹窗的复用

6. 实现点击弹窗外区域关闭弹窗，按下 Esc 键关闭弹窗

7. 实现 log in 和 sign up 的切换

8. 实现下拉菜单

Tutorial: React Router

Build LMS: 第四步：确定 state 放置的位置

1. sign up modal 的拆分，最小价值产品

2. 怎么写 form，FormItem，输入框，label

3. 获取 event 中的数据，保存 form 数据到 state

4. 输入框的 validation，error 状态放置的位置

5. 实现用户点击之后才进行 validation

6. 实现 'Confirm password is different to your password'

7. 连接 API，处理服务器错误代码

8. axios instance，配置 .env

Build LMS: 第五步：添加反向数据流

1. 什么是高阶组件，与高阶函数类比，为什么要用高阶组件

2. 怎么写高阶组件：以 withForm 为例

3. 利用 withForm 创建 ForgetPasswordModal

4. 写 Authentication 的痛点，怎样利用 HOC 简化

5. 实现 log in，用 localStorage 保存登录信息，用 axios 拦截器提取和附加 token

6. 使用 React Context 简化 props 传递

Tutorial: TypeScript

React Review

1. 使用 context 的痛点

2. 将 context 的 provider 提取成独立组件，将 consumer 提取成 HOC

3. 根据 SOLID 原则将 UserDropdown 从 Authentication 拆分出来

4. Redux 出现的背景，为什么不应该依赖 Redux

5. Redux 的工作原理，与直接 setState 的区别

6. 如何使用 Redux，将 authentication 的 state 剥离到 Redux

7. 使用工具来追踪 redux

React CI&CD

1. 部署前端项目到 Public Online Env

2. 使用 AWS S3 作为项目静态文件服务器，打包项目文件并部署

3. 使用 ESLint 规范项目开发风格，并尽可能在早期发现项目潜在 BUG

4. 使用 Jest 搭建单元测试，使用 Enzyme (or React Testing Lib) 断言 React Component 渲染以及逻辑

5. 在项目中如何做到 Agile 可持续开发及可持续部署，使用自动化部署工具部署前端项目

Tutorial: 使用ECS, Docker部署前端

Tutorial：AWS基础课程

Interview 2 Mock Interview

1. 招聘想要什么样的人，硬技能和软技能

2. 如何提高写代码能力，面试前如何研究公司和面试官

3. 提前准备的重要性，怎样做准备

4. 面试的流程

5. 电话面试的内容，猎头和 HR 分别会问的问题，Zoom 面试的注意点

6. 面对面面试的内容，如何在自我介绍中突出自己的优点，怎样回答自己的缺点

7. 如何介绍项目，介绍项目架构、技术选型、开发过程

8. 如何在 Behavioural Questions 中讲好故事，STAR 方法的运用

9. Any Questions 环节需要了解的信息

10. Code Test中的注意点，Pair Programming 中沟通的重要性

Scheduled Job

How to build cron jobs using Spring Boot Scheduled job.

Batch API, Reader, Processor, Writer, Listener

Step, Job, Chuck size.

How migrate data from csv to DB by using Spring Jobs.

How to build cron job by using AWS

back-end practice

把后端系统全部搭建在AWS环境中。要用到如下AWS Services：

EC2， ECR， ECS， Security Group，Role， Policy，RDS，SSM Parameter Store，Codebuild， Codepipeline， KMS，ALB，ASG，API Gateway。

这堂课也是最后一课，希望每个学员都能自己独立的写好一个后端的RESTful API。

Algorithm

Presentation Web Architecture