This course presents hands-on labs in the software aspect for students to be familiar with software design and development processes. The class follows a mainstream of building a useful web/mobile app under selected topics. We introduce some important software design concepts and development tools.
The course is taught in two parallel tracks. The first track guides students to identify user needs, design core features, build prototypes, and conduct usability tests. The second part teaches fundamental web programming techniques, including javascript, reactive programming, and web/app intelligence.
This course requires students to have solid understanding of
2023/06/08 - 14. Web/App Intelligence Part II: lab announced
2023/06/01 - 14. Web/App Intelligence Part II: video announced
2023/05/27 - 13. Web/App Intelligence Part I: slide, video announced
2023/05/18 - 12. Mobile Apps and React Native: slides and video announced
2023/05/16 - 11. Invisible Design Part 1: Data Analytics: slides announced
2023/05/13 - 11. Web Security & Authentication: slides and video announced
2023/05/09 - 10. React Hooks: slides and video announced
2023/05/09 - 10. Design-for-Execution_2: slides announced
2023/05/04 - 10. Redux: slides and video announced
2023/05/02 - 09. Design-for-Execution_1: slides announced
2023/04/29 - 09. Database Systems: slides and video announced
2023/04/23 - 08. React - post: slides and video announced
2023/04/15 - 07. Backend Development and Node.js: slides and video announced
2023/04/11 - 06. Hi-Fidelity Prototypes: slides announced
2023/03/30 - 06. React: slides and video announced
2023/03/28 - 05. Controled Usability Tests : slides announced
2023/03/23 - 05. Landing page and bootstrap: slides and video announced
2023/03/21 - 04. Low-Fidelity Prototypes: slides announced
2023/03/16 - 04. Modern JavaScript: slides and video announced
2023/03/15 - 03. Ideate: slides announced
2023/03/09 - 03. Javascript - the Basics: slides and video announced
2023/03/07 - 02. Define Problems Worthy to Solve: slides announced
2023/02/21 - 02. CSS: slides and video announced
2023/02/14 - 01. Web Development and HTML: slides and video announced
2023/02/14 - 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.
Web Development | Basic HTML | Idea Generation | Lean Canvas
This lab quiz asks you to build a simple html page.
Basic CSS | Selector | Layout | Stacking order
This lab quiz asks you to build a simple blog page.
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 lab asks you to build a component-based color game.
Product Design | Landing Page Demo | Basic Bootstrap | Layout | Flexbox | Media Queries | Containers | Grid sysem | Components | Tools
This lab quiz asks you to design a website by using bootstrap4.
React | Components | JSX | States and Data flow | Form Elements | More JSX | Client-side Routing | AJAX | Debugging | Weather mood project
Your goal is to improve the WeatherMood project by adding one page which shows 5-days forecast.
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.
React - post
This lab details the post function of the WeatherMood project.
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.
Combine WeatherMood with RDS service
Redux | Why Redux | Action and Reducers | Splitting Reducers | Async Actions and Middleware | React+Redux | Remarkers | DevTools
Your mission here is to use Redux & React Hooks to re-write the post function.
This is an example program for this homework assignment, but it only uses React Hooks and does not use Redux. Also, there is no post section, only today and forecast. You can use this program as a reference to implement and submit it as this HW8.
Authentication | Authorization | Session | HTTP Basic Auth | HTTP digest Auth | SSO
This lecture introduces the basics of web security.
Use amplify to add authentication to your website
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.
Web/App Intelligence | What is Machine Learning | Supervised Machine Learning | What is Deep Learning | Post Toxicity Detection
This lab guides you through how to integrate Tensorflow.js into your applications.
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 eeclass system.
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