Web开发全栈项目班

Introduction & Web Tech

课前准备

1. 注册AWS账号 http://aws.amazon.com/ 国内同学可能需要VPN

2. Mac电脑可以下载Xcode，下载 Safari Technology Preview，用于演示iOS设备debug

内容

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

Tutorial1-SYD

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

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

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

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

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

Tutorial1-BNE

1. 课后作业讲解（Card Design）

2. CSS重点内容的回顾

2.1 CSS命名方式

2.2 CSS选择器

2.3 CSS常用样式

3.代码书写规范

（地点：布里斯班办公室； 时间：布里斯班时间晚18:30-20:30）

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 设计原则，个人网站的设计案例，流行的组件库介绍

Tutorial: HTML & CSS 练习制作Card

HTML, CSS 答疑，补充讲解知识点，课上练习Card制作

JavaScript

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

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

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

4. 数组，数组的方法

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

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

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

Tutorial2-SYD

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

3. Flexbox 练习

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

Tutorial2-BNE

第二次Card Design作业讲解&答疑

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 策略

Tutorial-第二个作业

答疑HTML CSS JS, Project 1讲解

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

Tutorial3-SYD

1. How to setup GitHub SSH

2. Git Review

3. Git flow

4. Assignment 1 Progress and QA

Tutorial3-BNE

Git流程讲解

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 的用法

Project One : Tutorial & Lab

Review Project 1 代码

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-BNE-Project1

Project 1 作业检查与讲解

如何实现页面切换

检查代码规范

Node.js: Fundamentals of Node.js

1.后端开发的一些背景知识

2.熟悉node.js开发环境

3.了解node.js的特性与架构

4.理解modules, event, event drivent等概念

5.与文件系统的交互

6.搭建一个简单的web server

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 学习的建议

Tutorial4-SYD

1. Hosting Github

2. Node.js Folder Structure

3. Assignment 1 Progress and QA

Tutorial Java Basic and Link

现场code：实现一个链表

aws 科普

Tutorial: Project Two

答疑

练习npm, package.json

Promise 讲解与练习

Java Basic Jvm and Mechanism

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 的用法

Node.js: RESTful API

1. HTTP的请求和响应，如何理解报文。

2. HTTP header中的方法：GET,POST,PUT,DELETE。

3. URL中的域名，端口，pathname, ?query, #hash。

4. HTTP中的optional header：content-type，cookie。

5. HTTP的状态码：1xx, 2xx, 3xx, 4xx, 5xx。

6. 理解REST模型，了解REST API对于传统API的区别和优缺点，掌握如何根据REST模型来写API。

7. 使用一些第三方提供的api，学会阅读api文档

8. 熟悉postman进行api调试与调用

Tutorial5-BNE

Spring Boot Introduction

1. 复习构造器

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

3. Set 和 List 比较

4. 泛型

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

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

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

8. Postman 介绍

Node.js: NPM and Express.js

1. 复习Node包管理器npm的使用，版本号命名规范。

2. 熟悉一些常用的npm package

3. 用express搭建一个基本的server

4. 理解express中的request和response对象

5. 理解express路由

6. 理解express中间件

Tutorial-BNE

Tutorial Java Assignment

Tutorial: React

webpack基础

TypeScript基础

答疑

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

Node.js: More Express and Intro to MongoDB

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

- app调用拆分

- 路由拆分

- 中间件拆分

2. 常用package的使用

3. MongoDB

- MongoDB的介绍。

- MongoDB的安装。

Tutorial6-BNE

Node.js: MongoDB and Mongoose

1. MongoDB的collection Doc的增删改查操作

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

3. 一些性能优化方案

4. 学习Mongoose，重点讲述mongoose包的使用

5. 代码学习

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 Springboot

使用docker-compose 搭建postgres和pgadmin

使用springboot链接postgres

Unit test for controller & repository

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 的报错

维尼的 悉尼线上Tutorial（Node班）

熟悉React官方文档；

带大家动手跟着官网例子学习；

Bug && debug(bug: any);

Tutorial-BNE

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 问题的解决方法

维尼的 悉尼线上Tutorial（Node班）

1. 根据要求完成React，组件划分 与 UI设计。

2. Fetch/Axios call API，Promise处理结果以及ErrorHandling。

3. Props与静态（functional）组件

4. Class组件，构造器，生命周期等

Tutorial-BNE

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（Node班）

1. 生命周期完成时钟

2. Call API拿天气

3. 可控Input获得user输入的城市

4. 点击submit获取对应天气

Tutorial-BNE

Agile Scrum DevOps Sprint 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. 介绍 DevOps

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 Flyway

flyway基础用法

前端组件单元测试

Node.js: API Server

结合前面所学的知识，搭建一个完整的API server

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 处理

Node.js: Testing

Tutorial Springboot Security

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 的方法

Node.js: Docker

Docker

- docker 介绍

- docker 安装配置

- docker 原理

- docker 启动多种镜像

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

- Dockerfile 打包

Tutorial-BNE

Interview 1

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 P3

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

1. 回顾 JS 中的异步概念

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

3. React 中加载数据的时机

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

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

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

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

8. axios 简介

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

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

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

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

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

5. 如何拆出可复用组件

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

Tutorial React Auth

React Auth

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. 实现下拉菜单

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

Tutorial P3 Review

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

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

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

3. 利用 withForm 创建 ForgetPasswordModal

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

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

6. 使用 React Context 简化 props 传递

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 可持续开发及可持续部署，使用自动化部署工具部署前端项目

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 中沟通的重要性

Project3 Backend Architecture

1. 什么是 serverless，EC2，fargate

2. 部署后端到 ECS，cluster、task definitions、ECR、tasks、ALB、RDS 概念

3. 在 EC2 Dashboard 中管理 ECS、LB、auto scaling，region 和 availability zone 的区别

4. 用 Codepipeline 实现 CI/CD，API Gateway 概念

5. 怎样在AWS上搭建后端的基本架构

6. Factor 解读

Node.js: Deploy

Deploy with AWS

Node.js: Project 3

Message Driven

1. 为什么要使用消息队列，消息队列和 RESTful API 的区别

2. 消息队列的需求场景：异步处理、系统解耦、流量削峰

3. 消息队列的特性、优点

4. AMQP 和 RabbitMQ 相关概念：生产者、消费者、服务器、交换机

5. 在 Docker 中运行RabbitMQ，访问浏览器管理界面

6. 写简单的 Spring Boot 程序用 RabbitMQ 实现本地消息通信

7. 在 EC2 中安装 Docker、RabbitMQ 实现远程消息通信

8. AWS SQS 介绍

Algorithm

Presentation Web Architecture

Tutorial P3 Discuss

Tutorial SYD

讲解PJ3 结构和流程图，讲解git version control

Tutorial SYD

PJ2 Code Review & React Life Cycle & Javascript This