Web开发全栈项目班（五期）

Class 1 Modern Web Technology

课程介绍

Scope

Instructor Introduction

Quick Conditions

网页技术

Network

Chrome Inspect

Web Basics

Javascript History

Modern Web Technology vs Traditional Technology

Class 2 Teamwork

公司代码管理、团队管理方法

Agile

Scrum

Jira

Sprint

Story Point

Team Work

Class 3 HTML5 Basics

Html的基础知识

Html5

Class 4 CSS3 Basics

CSS的基础知识

Selector

Flexbox

Responsive Web Design

Sass Introduction

Class 5 Javascript Basics

JavaScript的基础知识

Javascript History

Basic Syntax (variable, loop, condition, function)

DOM manipulation

Javascript library introduction

Class 6 Git Introduction

代码管理的基础知识

Install Git

Git Pull / Commit / Push

Branch

Rebase / Merge / Pull Request

Resolve Conlicts

Class 7 Project One

开始项目一

Tutorial & Lab

Class 8 Interview and CV

澳洲求职技巧、注意事项

解密Linkedin的使用，搭建关系网

澳洲工作状况分析

Resume & Cover Letter

解密面试技巧

Class 9 REST API and JSON

学习REST和JSON，为后端打下基础

DNS Mapping

URL fundamentals

Request: Common Headers, Simple/Full Request message

Response: Status Code

Evolvement of Web Service: From web form to web services to API

Introduction 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

Introduction of AJAX

Introduction of Postman

Demos for Html + JavaScrip & Google GEO API

Class 10 Introduction to Object-oriented programming (OOP)

学习OO programming

Component of Class: State (Fields and Properties) and Method

Fields vs Properties

Method: Signature, Default variable, Overload

Constructor

Access level: public, protected, private, internal

Static and Const: Static Class vs Singleton

Encapsulation: Why and How then in-course practice to illustrate

Inheritance : Brief introduction

Polymorphism: virtual, override Abstract Class

Introduction to Interface: Interface vs Abstract Class

Class 11 Advanced C#

进一步学习C#，面向对象编程

Intro to Interface vs Abstract Class Continued

Exception Handling: try catch finally. Catch Chaining

Class 12 Tutorial Class to practice with C# programming

C#课堂练习

Class 13 .NET framwork

学习.NET framwork，MVC以及Web API

Class 14 Entity framework

Entity Framework，连接到Database

Class 15 Tutorial on API with DB in the background

API和DB课堂练习

Class 16 Deployment

部署

Introduction to Azure

Direct deploy

CI / CD with bitbucket

Connect to MSSQL / MYSQL

Docker and Deployment on Linux in EC2 (If have enough time)

Class 17 .NET framework (Web API & Project and Framework Continued)

继续.Net framework 以及 Web API教学

Web API security pipeline: Evolvement of security pipeline from message handler to filters to middleware

Intro to Authentication methods: Basic and OAuth 2.0

Demo on Basic authentication using filter

Demo on token based authentication using Owin middleware

Project distributions to teams - suing bitbucket to simulate team works

Advance search function on students using extensive customized LINQ vis extension method

Class 18 Tutorial Class for project implementation

项目课堂练习

Class 19 Web API deployment Unit testing and Tools (Advance student only)

Web API测试和工具

Database deployment to Azure

WebApp deployment to Azure

Intro Unit testing with Xunit: Simple unit test, Theory and inline data

Intro to Async and Await and Multi-threading

Class 20 React with Modern JavaScript

React基本介绍

React component fundamental

Understand JSX, JS extension for declarative component

ES6 essentials (destructing, spread, rest variable scope(let) arrow fn, callback context), class

Class 21 Make it stateful

进一步介绍react component

Stateful and stateless (state with props)

Create class stateful component and update state

Lifecycle breakdown

ES6 module, why do we need it

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

Start rewriting weather app (individual project) keep data in state and render

Class 22 Make it interactive

Render repeated components

Container map data to a list of presentational comps

The 'key' in a lkist of comps

React event handling

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

Form handling and controlled input

Lab

Class 23 Tutorial Class for project implementation

Class 24 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

Class 25 Tutorial Class for project implementation

Class 26 Build LMS: project structure

Routing conecpt

How client side routing works (Browser Historyh API)

Introduce react-router-dom, declarative routing

Wire up 3 components (Router, route, link)

Start layout the group project and assign responsibility

Class 27 Tutorial Class for project implementation

Class 28 Build LMS: CRUD flow & routing

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

Class 29 Build LMS: Connect our API server

Setup axios to request API server

Extract API module, separate promise based async logic (one module per model, course api, student api, etc...)

Component interaction with API module to get data for state

Error handling in async action

Extrract reusable UI components

Define the scope of each UI comp and have the right abstraction

'Classnames' package to manage CSS classes

React children

Class 30 Tutorial Class for project implementation

Class 31 React patterns and reviews

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 front-end eco system(intro to third party state management)

Redux introduction

React performance caveats

Class 32 Tutorial Class for project implementation

Class 33 Make it live: Deploy (AWS)

部署前端代码到 AWS S3

Recap on local dev flow

Deployment strategy

Separate web static host from API server

Client build (with create-react-app, may touch some webpack concept)

Setup S3 bucket (policy etc), upload built bundles to it

Static host handle 404

Use CloudFront with S3 bucket

TypeScript introduction

Lab, let's finish it

Class 34 Project Two: Tutorial & Lab

Class 35 Interview

Interview

Mock interview

Class 36 Group work Presentation

以小组为单位展示项目。

项目展示

大咖点评

Class 1 Web Technology

网页技术

Network

Chrome Inspect

Web Basics

Javascript History

Modern Web Technology vs Traditional Technology

Class 2 HTML5 Basics

Html的基础知识

Html5

Class 3 CSS3 Basics

CSS的基础知识

Selector

Flexbox

Responsive Web Design

Sass Introduction

Class 4 Javascript Basics

JavaScript的基础知识

Javascript History

Basic Syntax (variable, loop, condition, function)

DOM manipulation

Javascript library introduction

Class 5 Project One

开始项目一

Tutorial & Lab, including VS live sessions

Class 6 Git Introduction

代码管理的基础知识

Install Git

Git Pull / Push / Commit

Branch

Rebase / Merge / Pull Request

Resolve Conlicts

Class 7 Project One

项目一

Tutorial & Lab, including VS live sessions

Class 8 Interview and CV

澳洲求职技巧、注意事项

Linkedin: 解密Linkedin的使用，搭建关系网

Resume & Cover Letter

Review first version of resume and group discussion

Class 9 Application Architecture

应用架构，部署

Relationship Between Node and Express

Generating Express Apps

Express Route Handlers

Heroku Deployment

Class 10 REST API

学习REST API，为后端打下基础

Routing and URL

Swagger style

Routers Basics

Middle-wares

Response

CURD

Class 11 Introduction to Loopback

学习Loopbck基础知识

Create a simple API

Use API Explorer

Connect your API to a data source

Extend your API

Add a static web page

Add a custom Express route

Class 12 Tutorial Class to practice with Nodejs programming, including VS live sessions

Nodejs课堂练习

Class 13 Data Source

Entering data source settings

Installing a connector

Specifying database credentials with environment variables

Using multiple data source configurations

Class 14 Creating Model Relations

BelongsTo relations

HasOne relations

HasMany relations

HasManyThrough relations

HasAndBelongsToMany relations

Polymorphic relations

Querying related models

Embedded models and relations

Nested queries

Class 15 Working with Data

Creating, updating, and deleting data

Querying data

Fields filter

Include filter

Limit filter

Order filter

Skip filter

Where filter

Class 16 Tutorial on API with DB in the background, including VS live sessions

API和DB课堂练习

Class 17 Agile

敏捷开发

Agile

Scrum, Kanban, Lean

Breakdown to different teams for project three

Class 18 Managing User

用户管理部分

Registration and confirmation via email

Login and logout

Creating an access token

Password reset

Class 19 Tutorial Class for project implementation, including VS live sessions

项目课堂练习

Class 20 Authentication, Authorization, and Permissions

认证和权限管理

Access control concepts

General process Initial setup

Enabling access control

Preparing access control models

Exposing and hiding models, methods, and endpoints

Hiding methods and REST endpoints

Read-only endpoints example

Hiding endpoints for related models

Hiding properties

Class 21 React with Modern JavaScript

React基本介绍

React component fundamental

Understand JSX, JS extension for declarative component

ES6 essentials (destructing, spread, rest variable scope(let) arrow fn, callback context), class

Class 22 Make it Stateful

进一步介绍React component

Stateful and stateless (state with props)

Create class stateful component and update state

Lifecycle breakdown

ES6 module, why do we need it

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

Start rewriting weather app (individual project) keep data in state and render

Class 23 Make it Interactive

Render repeated components

Container map data to a list of presentational comps

The 'key' in a lkist of comps

React event handling

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

Form handling and controlled input

Lab

Class 24 Tutorial Class for project implementation, including VS live sessions

Class 25 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

Lab

Class 26 Tutorial Class for project implementation, including VS live sessions

Class 27 Build LMS: project structure

Routing conecpt

How client side routing works (Browser Historyh API)

Introduce react-router-dom, declarative routing

Wire up 3 components (Router, Route, Link)

Start layout the group project and assign responsibility

Class 28 Tutorial Class for project implementation, including VS live sessions

Class 29 Build LMS: CRUD Flow & Routing

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

Class 30 Build LMS: Connect our API Server

Extract API module, separate promise based async logic (one module per model, course api, student api, etc.,)

Component interaction with API module to get data for state

Error handling in async action

Extrract reusable UI components

Define the scope of each UI comp and have the right abstraction

'Classnames' package to manage CSS classes

React children

Class 31 Tutorial Class for project implementation, including VS live sessions

Class 32 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 front-end ecosystem(intro to third party state management)

Redux introduction

React performance caveats

Class 33 Tutorial Class for project implementation, including VS live sessions

Class 34 Make it live: Deploy (AWS)

部署前端代码到 AWS S3

Recap on local dev flow

Deployment strategy

Separate web static host from API server

Client build (with create-react-app, may touch some webpack concept)

Setup S3 bucket (policy etc), upload built bundles to it

Static host handle 404

Use CloudFront with S3 bucket

TypeScript introduction

Lab, let's finish it

Docker and Dockerization (if time available)

Class 35 Project Two: Tutorial & Lab, including VS live sessions

Class 36 1 on 1 service

Interview

Mock interview

This part will be provided individually

Class 37 OOP Design

SOLID principle

Code refactor

Class 38 Presentation (Group work)

以小组为单位展示项目

项目展示

大咖点评