CS241001 Software Studio

from Ideas to Applications to Real Impact

Description

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.

Syllabus(Tentative)

Instructor

Shan-Hung Wu
吳尚鴻


Teaching Assistants

Yu-Hsuan Chen
陳佑軒

Sheng-Ya Chiu
邱聖雅

Zhao-Jie Chen
陳昭潔


Time & Location

  • Video & lectures: Tue. 3:30-5:20pm at Delta 105
  • Labs: Thu. 3:30-5:20pm at EECS 326.328
  • Office hour: Tue. 10:10am-12:00pm at Delta 729

Grading Policy

  • Labs & homework: 60%
  • Demo 1: 10%
  • Demo 2: 10%
  • Final Demo: 20%
  • Q/A bonus: up to 5%

Prerequisites

This course requires students to have solid understanding of

  • Data Structure,
  • Object-oriented programming language (like 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

Design Thinking

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.

GitLab Slides

Git Command-line Tool Installation

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

Slides

Lecture 01

HTTP&HTML

Web Development | Basic HTML | Idea Generation | Lean Canvas

Video Slides

Empathize

Slides

My First HTML

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

GitLab Slides

Lecture 02

CSS

Basic CSS | Selector | Layout | Stacking order

Video Slides

Define Problems Worthy to Solve

Slides

My First Blog

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

GitLab Slides

Lecture 03

Javascript & DOM

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

Video Slides

Ideate

Slides

Color Game

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

GitLab

Lecture 4

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

Low-Fidelity Prototypes

Slides

Component-Based Color Game

This lab asks you to build a component-based color game.

GitLab Slides

Lecture 05

Bootstrap and Responsive Design

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

Video Slides

Controled Usability Tests

Slides

Flexbox and Responsive Lab

This lab quiz asks you to design a website by using bootstrap4.

GitLab

Lecture 06

React

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

Video Slides

Example code - WeatherMood today (Not Lab)

GitLab

Hi-Fidelity Prototypes

Slides

WeatherMood: forecast

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

GitLab Slides

Lecture 07

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 08

React - post

React - post

Video Slides

Tracing WeatherMood

This lab details the post function of the WeatherMood project.

GitLab

Lecture 09

Database Systems

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

Video Slides

Design-for-Execution_1

Slides

Data Model

Introducing data models at the server side.

Slides

Advanced SQL

This lab introduces some advanced SQL operations.

Slides

WeatherMood: DB

Combine WeatherMood with RDS service

GitLab Slides

Lecture 10

Redux

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

Video Slides

React Hooks

Video Slides

Design-for-Execution_2

Slides

WeatherMood: redux & react hooks post

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

GitLab

(Example code) WeatherMood: react hooks post (without redux)

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.

GitLab

Lecture 11

Authentications, Authorizations, and Session Management

Authentication | Authorization | Session | HTTP Basic Auth | HTTP digest Auth | SSO

Video Slides

Web Security

This lecture introduces the basics of web security.

Video Slides

Data Analytics

Slides

Authentication with AWS Amplify

Use amplify to add authentication to your website

Slides GitLab

Lecture 12

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.

Video Slides

(Example Code) weathermood-mobile

GitLab

Lecture 13

Web/App Intelligence Part I

Web/App Intelligence | What is Machine Learning | Supervised Machine Learning | What is Deep Learning | Post Toxicity Detection

Video Slides

Weathermood: Toxicity Detection

This lab guides you through how to integrate Tensorflow.js into your applications.

Video Slides GitLab

Lecture 14

Web/App Intelligence Part II

Unsupervised Learning and Recommendations | WeatherMood with StarGANs

Video Slides

Weathermood: Toxicity Detection with StarGAN

This lab demonstrate the application of StarGAN, and how to host your own models.

Slides GitLab

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 eeclass system.

GitLab eeclass

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