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.
This course requires students to have solid understanding of
2017/07/01 - Final demos from utstanding students announced
2017/06/07 - Final Project - Mobile App: requirements announced
2017/06/06 - 10. React Native: slides announced
2017/05/11 - Midterm Project - Web App: requirements announced
2017/05/10 - 09. Database Systems: slides announced
2017/04/29 - 08. Node.js and Backend Developement: slides announced
2017/04/19 - 07. Redux: slides announced
2017/04/01 - 06. React: slides announced
2017/03/09 - 03. Landing Page and Bootstrap: slides announced
2017/03/09 - Starting Up Your Project: A Lean Approach: slides announced
2017/03/04 - 02. CSS: slides announced
2017/02/23 - 01. Web Development and HTML: slides announced
2017/02/16 - 00. Introduction: slides announced
If you have any feedback, feel free to contact: shwu [AT] cs.nthu.edu.tw
About This Course... | FAQ
This lab guides you through the main idea of version control systems, the basic usage of Git, and how to submit on our GitLab.
This appendix guides you how to install Git command-line tool.
Basic CSS | Selector | Layout | Stacking order
This lab quiz asks you to build a simple blog page.
Here are some tips that help you to generate “good” Ideas.
Here are some basic entrepreneur concept you should know before starting coding.
Product Design | Landing Page Demo | Basic Bootstrap | Layout | Flexbox | Media Queries | Containers | Grid sysem | Components | Tools
Primitive Types | Object Types | Primitives v.s Objects | Expressions | Control Flows | Methods | DOM | Event Handling
This lab quiz asks you to improve the Color game by adding two extra modes.
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
This quiz asks you to build a Tic-Tac-Toe.
A review of component-based programming at the client side by TAs.
React | Components | JSX | States and Data flow | Form Elements | More JSX | Client-side Routing | AJAX | Debugging | Weather mood project
This lab shows how to write and run tests in your applications.
This lab reviews some key concepts of React and introduces cookies, a commonly used client-side storage defined by HTTP.
Your goal is to improve the WeatherMood project by adding one page which shows 5-days forecast.
Redux | Why Redux | Action and Reducers | Splitting Reducers | Async Actions and Middleware | React+Redux | Remarkers | DevTools
This lab details the post function of the WeatherMood project.
Your mission here is to use Redux to re-write the post function.
Node.js | Events and Asynchrnonous I/O | NPM and Yarg | Debugging | RESTful API | Express | Nodemon and Postman | Cloud Computing | Docker | AWS Elastic Beanstalk
This lab gives you a step-by-step guide on how to deploy an app to the AWS.
Data Modeling | SQL Language | Surviving Big Data | Text Indexing | AWS RDS and Deployment
Introducing data models at the server side.
This lab introduces some advanced SQL operations.
This lab introduces the basics of web security.
Your goal is to improve the WeatherMood TODO function by storing the TODOs in the AWS RDS (relational database system).
React Native | Styling | Event Handling | Images and Icons | Data Access and Persistence | NativeBase | ScrollView and ListView | Navigation
This lab guides you through the setups of React Native on various devices.
Play with the colors around you!
Author : 李峻毅、王俊凱
We decide what we learn.
Author : 張嘉軒、林軒毅、劉承諭、賴詰凱
Librarian, your mobile library.
Author : 林晉祥、許文弘、諸恩弘、朱彥睿
Gardening has never been easier.
Author : 蔡冠偉、湯景皓、黃睿緯、李辰康
Chat with friends you slipped during school life.
Author : 吳家榮、葉毓浩、陳永恒
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.
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.
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.
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