Designing Software for the Web (Honors)

Unit 1: Introduction

Summary

Brief introduction to each component of web app development

Topics

• First static Web Page
• Adding CSS and JavaScript to static web page
• Deploying static HTML pages via github pages
• First Python Web App (Hello World, Simple Computations on Form data)
• Browser/server
• URL components
• localhost and ports
• HTML/CSS/JavaScript
• Git/Github basics
• Deploying a Flask app on Heroku
• Form Data in Flask Apps
• Simple computation on form data in a Flask App
• HTTP GET/POST for form data.

Learning Objectives

• The student will be able to create a simple static web page using HTML
• The student will be able to add CSS styling to a simple static web page
• The student will be able to add a simple Javascript effect to a static web page
• The student will be able to deploy static HTML pages to the web via Github Pages
• The student will be able to implement a simple 'Hello World' style web app in Python using Flask
• The student will be able to correctly identify the roles of the browser and the web server in bringing up a simple web page.
• The student will be able to correctly identify the parts of a URL, including hostname, port, path and query string.
• The student will be able to correctly identify the role of localhost and port numbers in web app development
• The student will be able to work with a github repository to do basic workflow including clone, status, add, commit, push and pull.
• The student will be able to deploy a simple Flask webapp to the cloud computing provider Heroku
• The student will be able to create simple web apps involving echoing data from forms, using GET
• The student will be able to create simple web apps involving simple computation on data from forms, using GET
• The student will be able to create simple web apps involving simple computation on data from forms, using POST
• The student will be able to correctly identify the differences between using GET and POST in webapps.

Unit 2: Python

Summary

Crash course in Python for students that have some programming background (e.g. in Scratch, Snap, Processing, Java, Swift, etc.)

Topics

• Python Read/Eval/Print loop (REPL)
• Saving and running Python files in IDE provided
• Variables
• Types: int, float, bool, str, list, dict, object
• Functions
• Print vs. Return
• Control Flow: if, for, while
• Iterating over lists
• Using iteration to find counts, sums, min and max
• Working with Dictionaries
• Nested data structures (lists/dictionaries)
• Errors: syntax, run-time, logic

Learning Objectives

• The student will be able to do basic create, edit, run operations for a simple standalone 'hello world' style Python Program
• The student will be able to distinguish between syntax, run-time and logic errors
• Students will be able to fix simple syntax errors when given code that is almost correct
• Students will demonstrate that they can use the Python REPL to evaluate simple Python expressions
• Student will demonstrate that they can load function definitions into the Python environment and use the REPL to evaluate the function at various values
• Students will demonstrate that they can use unit testing and test-driven development to develop simple functions
• Students will demonstrate an understanding of print vs return
• Students will demonstrate that they understand how to trace programs that involve if/else control structures
• Students will demonstrate that they understand how to compute functions of lists using iteration (including min, max, sums and counts)
• Students will demonstrate that they understand how to work with simple dictionaries using keys, values, and iteration
• Students will demonstrate that they understand how to work with nested data structures involving lists and dictionaries

Unit 3: Tools and Practices, Part 1

Summary

Unit testing in Python, Test-Driven Development, Exceptions, Modules

Topics

• Python unittest
• Python annotations
• Background on Python OOP and classes (minimal amount needed to understand use of unittest)
• tdd red/green/refactor cycle
• Exception handling in Python
• importing modules
• creating user-defined modules
• using pip to install modules
• Pair programming
• Llewellyn Falco's Strong-Style Pair Programming
• Mob programming

Learning Objectives

• The student will be able to create test cases for simple numeric functions
• The student will be able to create test cases for functions involving complex data types
• The student will be able to identify which parts of a Python unittest suite are annotations (e.g. @unittest.skip())
• The student will be able to differentiate between inherited methods and user-defined methods in the limited context of extending the unittest class to create test suites
• The student will demonstrate an ability to use the Python documentation to locate the inherited methods of unittest
• The student will be able to explain and demonstrate the red/green/refactor cycle
• The student will be able to write code to throw Python exceptions when appropriate (e.g. when parameter values are not reasonable)
• The student will be able to write the appropriate unittest methods to check that the correct Python exceptions are thrown
• The student will demonstrate an understanding of importing modules, both user-defined and standard modules
• The student will demonstrate an understanding of how to create, import and use their own modules
• The student will demonstrate that they can use pip to install third-party libraries and then import them in their code
• The student will demonstrate an understanding of the roles of driver and navigator in pair-programming
• The student will be able to explain possible benefits and drawbacks of pair-programming
• The student will be able to explain and demonstrate both roles Llewellyn's Falco's Strong-Style Pair Programing
• The student will be able to explain, and demonstrate various roles in mob programming

Unit 4: Web Fundamentals

Summary

Deeper introduction to Flask Web Framework, and MVC-based web applications, intro to cloud deployment

Topics

• Additional Python Web App Practice
• Model/View/Controller design pattern
• Sessions
• Cookies
• Templates
• Simple use of Bootstrap for common navigation
• Simple cloud deployment via Heroku
• CSRF vulnerability and how to protect against it
• Managing environment variables locally (for CSRF protection secret)
• Accessing environment variables in Python code
• Managing environment variables in Python
• Using .gitignore to protect secret values
• Setting environment variables in Heroku app

Learning Objectives

• Student will be able to explain the role of Model, View and Controller in an MVC web application
• Student will be able to explain the concept of a session in a web application
• Student will be able to explain how cookies relate to sessions
• Student will be able to write Python code to operate on sessions (create/read value/update value/destroy) in a Flask web application
• Student will be able to use a bootstrap template to implement consistent page design with common navigation and footers for a simple multi-page web application
• Student will be able to deploy a simple website to the Heroku free tier
• Student will be able to explain the CSRF vulnerability and how setting an application secret helps to mitigate the risk
• Student will be able to use environment variables to set up an application secret for CSRF protection
• Student will be able to explain how a .gitignore protects the value of the application secret from being exposed via github
• Student will be able to explain how to set an application secret on a Heroku deployment

Unit 5: Data, Part 1

Summary

JSON, JSON APIs (read only), Python requests module, access tokens, computing with JSON data

Topics

• Python requests module
• JSON syntax
• JSON modules in Python (json.loads() and json.dumps())
• Accessing JSON APIs
• Access tokens and rate limits
• Review of environment variables for storing access tokens
• Review of key/values in dictionaries
• Review of indexing into lists
• Computing functions over nested list/dictionary data structures
• Presenting JSON data in a web application via HTML tables and lists

Learning Objectives

• The student will be able to use the Python request module to write code to process simple HTTP GET and POST requests
• The student will be able to write simple encodings of data using JSON syntax
• The student will be able to locate and correct simple syntax errors in JSON syntax
• The student will be able to write code demonstrating the proper use of the Python json.loads() and json.dumps() methods
• The student will be able to correctly identify what the letters API stand for, and explain the concept
• The student will be able to explain the concept of a rate limited API
• The student will be able to write code that accesses read-only APIs via HTTP, using access tokens and respecting rate limits
• The student will be able to correctly write Python code that computes functions over the data returned by a JSON API, given that the data structure may contain nested lists and dictionaries.
• The student will be able to write Python code that presents the results of JSON queries in a way that is readable by a human end user, using HTML tables or lists, as appropriate.

Unit 6: Security

Summary

OAuth. Web App vulnerabilities. Sanitizing Inputs, Captchas

Topics

• Web App Vulnerabilities
• Spam prevention
• Denial of Service
• Code injection
• Sanitizing Inputs via Python itsdangerous
• CAPTCHAs using FlaskWTF
• Authentication and Authorization
• OAuth
• Role based security

Learning Objectives

• The student will be able to explain some vulnerabilities of web apps that allow users to update state but that are not secured
• The student will be able to explain what a Denial of Service attack is
• The student will be able to explain what a Code Injection attack is
• The student will be able to explain how web apps are vulnerable to spam if not secured
• The student will be able to write Python code that sanitizes user inputs when appropriate
• The student will be able to identify the circumstances where sanitizing inputs is necessary, and why
• The student will be able to write Python code to add a CAPTCHA to a web application using FlaskWTF
• The student will be able to explain the difference between authentication and authorization
• The student will be able to identify whether a given scenario involves authentication, authorization, neither or both, and explain their answer
• The student will be able to give an example of a web application where role based security is appropriate
• The student will be able to write Python code to add role based security to a simple Flask web application.

Unit 7: Data, Part 2

Summary

Updating Server Side State

Topics

• Create/Read/Update/Delete operations
• Python code for CRUD operations on NoSQL (MongoDB) databases
• Restful APIs
• Using Restful APIs that update state (e.g. Google Calendar API)

Learning Objectives

• Student will be identify the signficance of each letter in the acronym CRUD (Create/Read/Update/Delete)
• Student will be able to write Python code to implement CRUD operations for a MongoDB database
• Student will be able to explain what a Restful API is
• Student will be able to write Python code to implement CRUD operations via a Restful API (e.g. for Google Calendar events)

Unit 8: Front End Design

Summary

JavaScript Syntax and Semantics. JQuery, Bootstrap. UI design principles.

Topics

• JavaScript Syntax and Semantics
• TDD in JavaScript via Mocha/Chai
• JavaScript debugging via console.log, window.alert, and browser console tools
• DOM concepts
• JQuery
• AJAX
• Javascript JSON methods (JSON.parse() and JSON.stringify())
• JavaScript Closures
• Immediately Invoked Function Expressions (IFFEs)
• Bootstrap and alternatives
• UI design principles
• Single Page vs. Multiple Page Apps
• Brief overview of Client vs. Server side JavaScript
• Brief overview of single-page app frameworks (e.g. Angular.js)

Learning Objectives

• Student will be able to write simple functions in JavaScript
• Student will be able to use console.log and window.alert to do simple debugging in JavaScript
• Student will be able to do simple TDD with functions in JavaScript
• Student will be able to identify what the letters DOM stand for (Document Object Model)
• Student will be able to explain the significance of the DOM to client side and server side web development
• Student will be able to explain the relationship between JavaScript and JQuery
• Student will be able to explain what JQuery is used for
• Student will be able to write JavaScript code that uses JQuery to perform simple animations, transitions, and effect on a basic web page
• Student will be able to write JavaScript code that manipulates JSON objects
• Student will be able to write JavaScript code (using JQuery) to peform AJAX requests
• Student will be able to explain the difference between a multi-page web app and a single-page web app design, both from user perspectives, and implementation perspective.
• Student will be able to demonstrate how to turn a simple multiple page app into a single page app using JQuery

Unit 9: Tools and Practices, Part 2

Summary

More advanced uses of git (branches, merge conflicts), End-to-end integration testing, Continuous integration.

Topics

• user stories
• issues in Github
• kanban
• github forks
• git branch
• git fetch
• git checkout
• git merge
• Dealing with merge conflicts
• Pull requests
• code review

Learning Objectives

• The student will demonstrate that they know how to fork a repo
• The student will demonstrate that they know how to create a new branch
• The student will demonstrate that they know how to switch between different branches
• The student will demonstrate that they know how to fetch branches from the server
• The student will demonstrate that they know how to merge code from one branch into another
• The student will demonstrate that they know how to resolve a merge conflict
• The student will demonstrate that they know how to make a pull request
• The student will explain the difference between a fork and a branch, and between a remote and branch
• The student will demonstrate that they know how to enter code review comments on a pull request
• The student will demonstrate that they know how to work with issues in Github
• The student will demonstrate that understand the idea of a Kanban board for tracking issues

Unit 10: Projects

Summary

Students work on final capstone projects

Topics

• To be chosen by students

Learning Objectives

• The student will demonstrate the ability to design and implement a useful web application, applying concepts and principles learned in the course where appropriate