Modern Web and App Programming

from Ideas to Systems to Real Impact

Description

This course gives a comprehensive, self-contained, and up-to-date introduction to the web/app development. We focus on the development challenges in real-world situations and present guidelines, tools, and best practices. Students are asked to team up and build real, useful applications (websites and/or mobile apps) accessible to the public in the end.

The classes are divided into three parts. First, we give a primer to web fundamentals such as HTTP, HTML, CSS, and Javascript. We cover different programming paradigms, including the OOP and functional programming. Handy tools such as Git are covered to get students familiar with the project-based and team-based development. In the second part, we introduce modern web development techniques such as responsive design, Bootstrap, ES6/7, React, and Redux. Last, we extend our horizon to the backend and mobile development landscapes by introducing the Node.js, PostgreSQL database system, Amazon Web Services (AWS), and React Native. We also give case studies on how to leverage Machine Learning algorithms to convert raw user data into the AI.

Instructor

Teaching Assistants

Time & Location

  • Video lectures: announced at Thur. afternoon
  • Labs: Tue. 3:30-5:20pm at EECS 326/328
  • Office hour: Thur. 1:00-3:00pm at Delta 723/724

Grading Policy

  • Idea + market survey: 10%
  • Labs: 30%
  • Midterm project: 30%
  • Final project: 30%

Prerequisites

This course requires students to have solid understanding of

  • Data Structure,
  • Programming (in C/C++ or Java)
and the ability to trace a nontrivial project (e.g., one on the GitHub). We use Javascript as the main programming language throughout the course. Although being helpful, prior knowledge about Javascript is not necessary.

Announcement

Curriculum

If you have any feedback, feel free to contact: shwu [AT] cs.nthu.edu.tw

Lecture 00

Introduction

About This Course... | FAQ

Slides

General Rules and Introduction to Git

This lab guides you through the main idea of version control systems, the basic usage of Git, and how to submit on our GitLab.

Slides

Git Command-line Tool Installation

This appendix guides you how to install Git command-line tool.

Slides

Lecture 01

Web Development and HTML

Web Development | Basic HTML | Idea Generation | Lean Canvas

Video Slides

Lecture 02

CSS

Basic CSS | Selector | Layout | Stacking order

Video Slides

My First Blog

This lab quiz asks you to build a simple blog page.

GitLab

Bonus: How to Make Your Project Real?

Idea Generation

Here are some tips that help you to generate “good” Ideas.

Video Slides

Product Design

Here are some basic entrepreneur concept you should know before starting coding.

Video Slides

Lecture 03

Landing Page and Bootstrap

Product Design | Landing Page Demo | Basic Bootstrap | Layout | Flexbox | Media Queries | Containers | Grid sysem | Components | Tools

Video Slides

Lecture 04

Javascript - the Basics

Primitive Types | Object Types | Primitives v.s Objects | Expressions | Control Flows | Methods | DOM | Event Handling

Video Slides

Color Game

This lab quiz asks you to improve the Color game by adding two extra modes.

GitLab

Lecture 05

Modern Javascript

Node.js | Webpack | Vendor Bundling | Packing CSS | Babel | Block Scoped Variables | Arrow Functions | Default Rest Spread | Destructuring | Template String Literals | Enhanced Object Literals | Classes and Inheritance | Symbols | Iterators and Generators | Property Initializers | OOP vs. FP

Video Slides

Tic-Tac-Toe

This quiz asks you to build a Tic-Tac-Toe.

GitLab Slides

Review

A review of component-based programming at the client side by TAs.

Slides

Lecture 06

React

React | Components | JSX | States and Data flow | Form Elements | More JSX | Client-side Routing | AJAX | Debugging | Weather mood project

Video Slides

Testing

This lab shows how to write and run tests in your applications.

GitLab Slides

React Revisited and Cookies

This lab reviews some key concepts of React and introduces cookies, a commonly used client-side storage defined by HTTP.

GitLab Slides

Assignment1

Your goal is to improve the WeatherMood project by adding one page which shows 5-days forecast.

GitLab

Lecture 07

Redux

Redux | Why Redux | Action and Reducers | Splitting Reducers | Async Actions and Middleware | React+Redux | Remarkers | DevTools

Video Slides

Tracing WeatherMood

This lab details the post function of the WeatherMood project.

GitLab Slides

Assignment2

Your mission here is to use Redux to re-write the post function.

GitLab

Lecture 08

Backend Developement and Node.js

Node.js | Events and Asynchrnonous I/O | NPM and Yarg | Debugging | RESTful API | Express | Nodemon and Postman | Cloud Computing | Docker | AWS Elastic Beanstalk

Video Slides

Deployment on AWS

This lab gives you a step-by-step guide on how to deploy an app to the AWS.

GitLab Slides

Lecture 09

Database Systems

Data Modeling | SQL Language | Surviving Big Data | Text Indexing | AWS RDS and Deployment

Video Slides

Data Model

Introducing data models at the server side.

Slides

Advanced SQL

This lab introduces some advanced SQL operations.

Slides

Web Security

This lab introduces the basics of web security.

Slides

Assignment3

Your goal is to improve the WeatherMood TODO function by storing the TODOs in the AWS RDS (relational database system).

GitLab

Lecture 10

React Native

React Native | Styling | Event Handling | Images and Icons | Data Access and Persistence | NativeBase | ScrollView and ListView | Navigation

Video Slides

Setting It Up

This lab guides you through the setups of React Native on various devices.

GitLab Slides

Final Demos from Outstanding Students

Let's COLOR

Play with the colors around you!

Author : 李峻毅、王俊凱

Video

NTHU Stage

We decide what we learn.

Author : 張嘉軒、林軒毅、劉承諭、賴詰凱

Video

Librarian

Librarian, your mobile library.

Author : 林晉祥、許文弘、諸恩弘、朱彥睿

Video

GreenThumb

Gardening has never been easier.

Author : 蔡冠偉、湯景皓、黃睿緯、李辰康

Video

NTHU Chat

Chat with friends you slipped during school life.

Author : 吳家榮、葉毓浩、陳永恒

Video

Bonus: Learning Roadmap

What to Lean Next?

Thank you all for participating in this course. For students who want to go further in web/app development, we have some recommendations for you.

Video Slides

Resources

Here are some course materials and resources related to this course. For code and its details (such as assigned reading, project links, quiz, etc.) please refer to the GitLab. For online forum please refer to the iLMS system.

GitLab iLMS System

Midterm Project Requirements

Goal and Grading policy

Here is the grading policy of your midterm project. Your goal is the build a fully functional, responsive, and novel web app that is accessible to the public.

Slides

Final Project Requirements

Goal and Grading Policy

Here are the grading policy of your final project. Your goal is the build a mobile app that complements your website and improves the user experience.

Slides

Reference Books

  • Alexander Osterwalder, Business Model Generation: A Handbook for Visionaries, Game Changers, and Challengers, 2010

  • Eric Ries, The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses, 2011

  • Peter Thiel, Blake Masters, Zero to One: Notes on Startups, or How to Build the Future, 2014

Online Tutorial