Web开发全栈项目班

Introduction & Web Tech

1.为什么课后要大量练习，课程概述，匠人学院简介

2.学员自我介绍

3. 师资力量，全栈班教学安排，三个 project 介绍，需要用到的前后端技术介绍，软技能的重要性

4. 对学员的期待

5. 什么是 Internet，客户端和服务器的通信过程，URL 的结构，网络请求

6. 传统和现代的前后端开发流程演变，云和 AWS 带来的改变AWS 的学习建议，agile，CI/CD，DevOps 概述

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

Tutorial: Project1 Review

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. Spring Security Authentication 和Authorization 功能的实现

基于用户名和权限硬编码的实现。

基于数据库（H2，Postgres）的用户名的认证以及授权的实现。

3. 详细讲解怎样使用Mockito来实现Mock掉Repository层的class。

4. 详细讲解怎样使用MockMvc来unit test controller层。

5. 怎样用Flyway来建立对应的用户表和权限表。

6. 怎样建立好对应的Entity层。

7. 怎样用Spring Data JPA来实现Repositry层以及对应的JPQL的查询和对应的基于H2 database的Unit Test。

Interview and CV Linkedin CV

Linkedin

CV

cover letter

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

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

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

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

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

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

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

Define the CRUD for course 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 Error handling in async action Immutable state update Lab

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

React Review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

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

Finish all the Restful API development using Spring Boot. Including Database setup. ORM (Hibernate). Service layer & Controller layer.

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

Interview 2 Mock Interview

Interview 2

Mock Interview

Algorithm

Presentation Web Architecture

Web Introduction

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network

Chrome Inspect

Web Basics

Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

CSS & Sass

运用Flexbox, Bootstrap, Responsive Web Design, 改写CSS作业

JavaScript

JavaScript 基础

1. 了解 Basic Syntax(variable,loop,condition,function)

2. 异步加载js lib的问题

3. DOM manipulation

4. Modern Javascript library introduction（jQuery，Angular，Vue，WebAssembly）

Git Introduction

学习Git基础知识

1. InstallGitGitPull/Push/Commit

2. BranchRebase/Merge/PullRequest

3.熟练运用GitBranch,

4. 如何解决Codeconflicts,ResolveConflicts

5. 如何Rebase你的代码，如何团队协作

本节课包含第⼀个Project Release (个⼈项⽬)

Basics of Node.js和ES6

ES6 学习使⽤ES6标准

Fundamentals of Node.js （Modules, FileSystem, Build server with node.js etc）

RESTful API

了解什么是api

了解什么是CRUD

了解什么是restful api

学习设计restful api

调用现有的一些公共api来实现CRUD的操作

NPM and Express.js

了解一个api的请求与回复包含的主要内容，比如header，url，status code etc

认识一些常用的status code和header

学习如何使用npm来管理项目

用express搭建一个基本的server

学习express的语法

Api Server & Deploy

描述真实应用场景，给出前端业务逻辑

用express.js搭建一个简单地api server来对接前端

将简单的逻辑进行拆分，合理规划项目结构

集成第三方库，便利开发

发布到heroku，让我们server能被公开访问

Javascript Review

Agile & Lean

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

本节课包含第二个 project Release(个人项目)

Introduction to React

React 哲学 Part 1 (Component & JSX)

1. React Component fundamental

2. Understand JSX

3. JS extension for declarative component

4. Webpack

5. Babel

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

- props

- props 类型

- 为什么需要 CSS in JS

- CSS modules

React 哲学 Part 3 (state)

1. class component

2. state

3. setState

4. setState 异步

React 哲学 Part 4 (state lifting & Lifecycle)

1. state lifting

2. lifecycle

3. CAP -> why *will* methods are not reliable

React 哲学 Part 5 (Fetch Data & context)

1. componentDidMount

2. fetch & axios

3. componentDidMount

4. context

Linkedin & CV

1. Job markets in Australia and China

2. Linkedin Optimisation

3. CV

4. Cover Letter

Mongodb

NoSQL vs MySQL MongoDB Relations

使用mongo shell来进行一系列的数据库CRUD操作

学习设计数据库的一些基本原则

明白什么是index，normalization和denormalization etc

API Server: Mongoose

学习mongoose的语法

使用mongoose在server端管理数据

开始搭建LMS的api server

API Server: Authentication

继续server的搭建

学习用户注册于登录

理解JSON WEB TOKEN的使用

API Server: Deploy

完成并整理后端代码

连接云端数据库并测试api的有效性

使用aws的elastic beanstalk进行部署

Interview & Mock Interview

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

1. react-router-dom

2. eslint

4. styled-components

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

1. tests

2. jest

3. react-testing-lib

5. CICD

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

1. env

2. connect to api

3. CRUD

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

1. cypress

2. redux

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

1. redux

2. hooks

3. HOC

React Review

1. Readable, Maintainable, Reusable

2. SOLID

3. Declarative, Component-based

4. React 哲学

Algorithm

AWS 101

Presentation(Project 3)

Project 3 Battle

不同的小组进行Project 3打分

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

优胜队伍有奖励以及奖状

课程评分标准

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

Internship

为期1-3个月的项目实习

分配到匠人公司或者其他合作公司

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript

History Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

CSS & Sass

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

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

Install Git Git Pull / Push / Commit Branch Rebase / Merge/ Pull Request Resolve Conflicts

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. Job markets in Australia and China

2. Linkedin Optimisation

3. CV

4. Cover Letter

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

Agile

Scrum

Jira

Sprint

Story point

Teamwork

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

Let's deploy the service to AWS

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

不同级别的技术问题

Algorithm

AWS 101

Presentation (Group Work)

Introduction & Web Tech

Course Introduction

Scope Instructor Introduction Quit ConditionsWeb Tech

Network Chrome Inspect Web Basics Javascript

History Modern Web Tech vs Traditional Tech

HTML & CSS

HTML5 & Web Design

Div Section SEO standard WEB Design Commercial Projects [HTML EXAM] CSS3 1

Selector Flexbox CSS Standard [CSS EXAM]

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase / Merge/ Pull Request Resolve Conflicts

CSS & Sass

CSS3 2

Bootstrap Responsive Web Design Sass Introduction [CSS EXAM]

Basics of Node.js

Fundamentals of Node.js Modules EventEmitter single thread?

Introduction to npm and Koa

Npm & Setup basic server with Koa

RESTful API

DNS Mapping URL fundamentals Request: Common Headers, Simple/Full Request message Response: Status Code Evolvement of Web Service: From web form to web service to API Introduce to Json: By comparing XML and JSON including Pros and Cons and the reason why JSON is winning RESTful services vs SOAP: Pro and Cons for each one Introducing AJAX Swagger Demos: 1. Html+Java Scripts 2. Google GEO API

REACT: Make it stateful

Lifecycle breakdown, based on counter example Lift State up - container & presentation pattern, based on counter-app example Redux for state management. Example using counter-app vanilla version, go through official redux doco React component state vs redux global state Immutable + shallow equality

REACT: Make it interactive

Continue Counter-app example with redux 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

Build Weather app api

Bring everything we learned before, and build a backend for our weather app

Handle query parameters Parameter checking Promise & axios Tidy up the code Deploy to heroku

Agile

Agile

Scrum

Jira

Sprint

Story point

Teamwork

Project 3 分组

REACT: Talk to remote

Sync vs Async flow Promise based async action Use raw XMLHttpRequest and callback hell Promise to rescue (promise state transition) ‘Promisify’ request manually Introduce axios for easy promise async control Redux middleware to handle async action

REACT: React with Modern JavaScript

React Component fundamental Understand JSX, JS extension for declarative component - hello react example Stateful and stateless (state with props) - counter app example Create class stateful component and update state ES6 essentials (destructing, spread, rest variable scope (let) arrow fn, callback context), class React rendering mechanism - virtual dom vs dom

Interview and CV Linkedin CV

Database

NoSQL vs MySQL MongoDB Relations

Mock Interview 1

Interview Training Code Test

Mongoose

Query and filtering data unit testing And more...

Managing user:

Registration and login password encryption password reset Email confirmation Accessibility control JWT token

Web Api deployment Unit testing and Tools ( For Advance student)

Database deployment API server deployment CI/CD pipe line Redis Docker and Docker-compose Introduction to loopback

REACT: Build LMS: CRUD flow & routing

Define the CRUD for course 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 Error handling in async action Immutable state update Lab

Build & Deploy LMS: CICD

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

REACT: Build LMS: Auth Flow & connect API

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

REACT: Build LMS: 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: React patterns and review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

Mock Interview 2

Mock Interview 2

模拟面试

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

解决大部分的Behavior Question

不同级别的技术问题

Algorithm

AWS 101

Presentation (Group Work)

Introduction & Web Tech

Lesson 1 Introduction & Web Tech

1.为什么课后要大量练习，课程概述，匠人学院简介

2.学员自我介绍

3. 师资力量，全栈班教学安排，三个 project 介绍，需要用到的前后

端技术介绍，软技能的重要性

4. 对学员的期待

5. 什么是 Internet，客户端和服务器的通信过程，URL 的结构，网络

请求

6. 传统和现代的前后端开发流程演变，云和 AWS 带来的改变AWS 的

学习建议，agile，CI/CD，DevOps 概述

Tutorial - How to implement Project 1

HTML & CSS

Lesson 2 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 介绍

JavaScript

Javascript |

History Basic Syntax(variable, loop ,condition ,function) 异步加载js lib的问题 DOM manipulation Modern Javascript library introduction （jQuery，Angular， Vue，Web Assembly）

React Review

Composition over Inheritance Container (controller) with Presentation component React children Review component lifecycle React new declarative Context Higher order component Explore more frontend ecosystem (intro to third party state management?)

Message

Introduction of basic concept of Message & Message Driven System.

How to integrate Spring Boot with RabbitMQ

Introduction of AWS SQS

Project Two: Tutorial & Lab

Java Basic 1

How does Java work.

Java Variables and Types, Primitive Types

Operands, Operators (e.g. Abbreviating Operators) and Expressions

if else Statements, switch statement.

For Loop, Do While, methods (e.g. Overloading)& Functions.

OO Concept - Class, Object, Constructor, Inheritance

React 哲学 Part 5 (Fetch Data & context)

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

Define the CRUD for course 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 Error handling in async action Immutable state update Lab

React 哲学 Part 1 (Component & JSX)

Lifecycle breakdown, based on counter example Lift State up - container & presentation pattern, based on counter-app example Redux for state management. Example using counter-app vanilla version, go through official redux doco React component state vs redux global state Immutable + shallow equality

Introduction To React

Project1 Review

Project 2 - review

Interview 2 Mock Interview

Interview 2

Mock Interview

Spring Data JPA

Build a simple project with Spring Data JPA.

Integrate with Entity Layer (Entity Beans) and Database Layer (Postgresql).

Execute complex query via Spring Data JPA.

How to use in-memory Database e.g. H2 to Unit Test the DAO Layer.

Connect with multiple Database.

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

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

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

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

Continue Counter-app example with redux 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

Restful API

What is rest features. Common HTTP Methods.

Why restful API should be stateless

How to properly use cache. Cache in Spring Boot Code

What is swagger & where is it used in our backend architecture.

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

Spring Boot Introduction

Build a brand new spring boot project & build a simple restful API

How to use Gradle.

How to use handle Exception globally (centrally).

Create custom Filter

Presentation Web Architecture

React 哲学 Part 4 (state lifting & Lifecycle)

JavaScript ES6

Readable, Maintainable, Reusable

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

Setup axios to request API server Extract API module, separate promise based async logic (one module per model, course api, student api etc.,) Authentication flow & use local storage for JWT token Basic Loading & Error handling for login process Implement protected route component to secure the routing url

back-end practice

Finish all the Restful API development using Spring Boot. Including Database setup. ORM (Hibernate). Service layer & Controller layer.

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

Interview and CV Linkedin CV

Java Basic 2

Serialization, polymorphism

Arrays, Inner Class, Abstract Class, Interfaces

Composition, Encapsulation

Generics, Java Collections: List ArrayList, LinkedList

Lambda, Optional, Stream, Exception handling, log.

Unit Test, SOLID principle

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

Recap on local dev flow Deployment strategy Separate web static host from API server Create CICD pipeline jobs on Gitlab, setup staging env using gitlab pages Static host handle 404 Setup S3 bucket (policy etc), upload built bundles to it Gitlab CICD job for prod env on s3

SQL Design Tutorial

Based on the project students chose, design the database archetecuture. Including Tables & relations between tables such as one-one, one-many and many to many relationships.

How to build ORM (e.g. hibernate) on top of database.

React 哲学 Part 3 (state)

Sync vs Async flow Promise based async action Use raw XMLHttpRequest and callback hell Promise to rescue (promise state transition) ‘Promisify’ request manually Introduce axios for easy promise async control Redux middleware to handle async action

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

Algorithm

Project One : Tutorial & Lab

SQL

SQL syntax & install Postgresql in local environment or use docker

Database Types introduction

Primary Keys, Foreign Keys

Unique, Not Null, Check Constraints

Data Manipulation Language: Insert, Update, Delete

Select Queries, Where Clauses, Having Clauses

SQL Joins, Union

String Functions e.g. Upper & Lower

Git Introduction

Install Git Git Pull / Push / Commit Branch Rebase /

Merge/ Pull Request Resolve Conflicts