Designing Software for the Web
Course Description
Designing Software for the Web is intended as a second or third year course in Computer Science, in which students will learn programming, design patterns, data management, scalable cloud computing, and principles of collaborative software development for full stack web application development, including both front-end (browser side) and back-end (server side) code.
Students will demonstrate mastery of these skills by constructing web applications using HTML, CSS, JavaScript for the front-end, and Python for the back end.
The goals of of this course are:
- to develop students’ critical thinking skills via the application of computational thinking practices in solving problems and developing algorithms, in an academically challenging way,
- to develop students’ written and oral communication skills via team-oriented software engineering practices.
- to develop students’ ability to take responsibility for their own learning, by scaffolding them towards independence in learning new skills and technologies
- to develop students’ interest in further study of Computer Science by offering engaging problem solving experiences in a relevant, modern context, i.e. web applications.
Units
Unit 1: Introduction
Unit Summary
In this unit, the student learn to identify key components, skills, technologies and terminology that are needed for the rest of the course. These include: the distinction betwen static and dynamic web content, client vs server side technologies, the request/response model of web interaction, and the role each of the following plays in the display of a web page: HTML, CSS, and JavaScript. A small amount of Python code will be covered, but most Python details are deferred to later units. The student will also learn a few hands-on skills for producing both static and dynamic web pages and will produce a few small examples that will serve as starting points for later projects that explore these topics in more depth. Additional topics include learning the components of URLs, the distinction between GET and POST requests, how to handle form data, URL components, localhost and the role of ports, a few basics of using git/github for version control, and deploying content the the web via github pages and via Heroku.
Key Assignment
A key assignment from this unit is the completion of a project that deploys a single static web page that includes HTML, CSS and JavaScript code via github pages, and two dynamic web pages using Python Flask on Heroku. The student will be guided through several examples, and then asked to complete an example on their own with different content. Through the completion of this assignment the student will learn to develop useful skills and cultivate interest in Computer Science.
Unit 2: Python
Unit Summary
In this unit, students will be introduced to the basic concepts of the Python programming language. Given that at least one programming course is a pre-requisite, it is assumed that students are familiar with the concepts of variables, expressions, types, functions, selection and loops, but that they will need to practice applying these concepts in a new programming language. The concept of nested data structures involving lists and dictionaries may be a new concept for many students, and is fundamental to working with web-based data represented in JavaScript Object Notation (JSON), a skill needed later in the course; that will, therefore, be a major emphasis of this unit. In addition, the practice of test-driven development—fundamental both to undergraduate CS programs and software industry practice, will be taught and reenforced through hands-on practice.
Key Assignment
A key assignment for this unit will be to write a series of functions that computes results over increasingly complex data, starting with simple scalars, and progressing to lists, dictionaries, and nested data structures that combine lists and dictionaries. The students will be provided with stubs and unit tests for the functions, and will be required to write the code to compute the correct results. Students will learn to become proficient in a programming language (Python) not covered in previous courses in the curriculum, This is an academically challenging assignment involving problem-solving, and serious attention to analytical thinking.
Unit 3: Tools and Practices, Part 1
Unit Summary
In this unit, students must develop a deeper understanding of software testing by writing their own tests. They will also gain practice with the use of third party libraries, which can require considerable reading of documentation. They will also begin to design, develop and test their own libraries of software. Finally, students will be asked to engage in the practice of pair-programming, and the critically reflect (both orally and in writing) about at least two variants of this practice.
Key Assignment
A key assignment for this unit will be to work with a pair partner to identify a set of computations that can be done over some structured data, design unit tests for the functions that implement these computations, implement the functions as a Python module, and then document the module via docstrings. In addition, as the students complete these assignment, they will be asked to try out two different models of pair programming: traditional, and Falco’s “strong style pairing”, then write reflections and engage in class discussions about the benefits and pitfalls of each approach, and the situations where it may be applicable, justifying their reflections with evidence. Students will learn to think critically about a data structure and how to design, test and implement computations over that data structure. They will also learn how to think critically about software development practices, and their own interactions with fellow developers. This is an academically challenging assignment involving substantial reading and writing, problem-solving, analytical thinking, oral and listening skills, and one that gives an authentic taste of software development practices that students will see both in undergraduate Computer Science, and software industry settings.
Unit 4: Web Fundamentals
Unit Summary
In this unit, students go deeper into a particular example of server side web framework, in this case Python Flask. Students will learn about sessions, cookies, and the Model-View-Controller design pattern, and how to apply those concepts to build a multiple page application that maintains short-term server side state for a user session.
Key Assignment
A key assignment for this unit will be to write a multi-page application that maintains short-term server side state for a user-session across multiple web pages, and do to so in a way that avoids common security vulnerabilities. Students will learn some fundamental concepts of the stateless HTTP model, and how a stateful model (sessions) can be built on a stateless model. This units requires students to demonstrate an ability to bring together theory and practice to implement a useful and secure web application.
Unit 5: Data, Part 1
Unit Summary
In this unit, the students will learn about JavaScript Object Notation (JSON), one of the most important ways in which data is currently exchanged among web systems, and the various data sources available. Students will learn how to do the research necessary to find providers of data related to their interests, do computations over that data, and present that data to a user.
Key Assignment
A key assignment for this unit will be to write a web application that answers an interesting question by doing a computation over JSON data accesssed from some web data source’s Application Programming Interface (API). The question, and data source will be one identified by the student. Examples may include using the Google Maps API for locating something on a map, an Amazon API for answering questions about available merchandise, a US Census Bureau API for identifying information about populated areas, or a US Geological Survey API for information about seismic events. The student will be responsible for identifying a question and a data source that are appropriately matched, writing test cases for the computation, implementing the computation, and making that computation available via a web application, in a way that is secure and respects any applicable terms-of-service imposed by the data provider. Students will learn how to leverage the skills gained in earlier units to explore questions that can be answered with data.
Unit 6: Security
Unit Summary
In this unit, students explore the vital issue of cybersecurity through the lens of web applications. They will learn about the various kinds of attacks, and how to defend against them. This unit also lays the foundation for implementing applications that store long-term server side state (e.g. databases), given that these applications are considerably more vulnerable to attack that the ones developed earlier in the course.
Key Assignment
A key assignment for this unit will be the implementation of a web application that provides login/logout capability via OAuth. This is a pre-requisite skill for any application that will store state associated with user accounts. It is also one that requires careful reading and serious attention to analytical thinking in order to successfully debug and deploy.
Unit 7: Data, Part 2
Unit Summary
In this unit, the student will learn how to update long-term server side state, which is an essential element for building web applications that can allow users to upload data, associate data and permissions with individual users, and store user preferences.
Key Assignment
A key assignment for this unit is to incorporate user preferences into the data application developed in Unit 5 as a way of practicing the skill of storing long term state. While the mechanism for doing so will be standard across each student’s project, the precise as to which user preferences are stored, and the rationale for those will have to be determined by each student on the basis of something that makes sense for the problem they have chosen (for example, default values for a search, preferred units.) Students will learn about an important component of application development, while practicing their critical thinking and analysis skills.
Unit 8: Front End Design
Unit Summary
In this unit, the student will focus on the design of the user interface and user experience of a web applicatoin. This unit also covers a more in-depth look at the JavaScript programming language, and typical client-side users of JavaScript for implementing user interfaces, including AJAX requests, and client-side JSON processing.
Key Assignment
The culminating assignment for this unit requires the student to reimplement a portion of a previous version of an application that had multiple pages, but with a single-page design using AJAX, with attention to the design and usability aspects of the application. The student will also be asked to explain their user interface choices in both written form and through a demonstration with an oral explanation. Completion of this assignment demonstrates that the student has understood how the same problem can be solved in two different ways, and that the student has understood the basic concepts of the client and server roles in web system development. The student will also be assessed on the basis of their ability to articulate principles of good user interface design, and put those principles into practice.
Unit 9: Tools and Practices, Part 2
Unit Summary
In this unit added only to the honors section of the course, the student will learn about two practices that are a part of Agile software development: writing user stories, and managing those user stories through the software development process via a kanban board. The student will also learn about features of git/github that are designed to support software development teams, such as issues, branches, forks, and pull requests.
Key Assignment
A key assignment for this unit will be to develop user stories for an application that the student (or the student’s team, if working in a team) is developing, to enter those stories into github as issues, setup a work flow for the team using branches or forks, and then move one or more stories through the kanban board to completion. Students will learn how to use the Agile software design methodology to manage a software project.
Unit 10: Projects
Unit Summary
In this capstone unit, will demonstrate the ability to design and implement a useful web application, applying concepts and principles learned in the course where appropriate.
Key Assignment
For their capstone project, the student may work either alone, in a pair, or in a team of 3-5 students according to their preference to either build a new application, or to add significant new features to an application already developed in previous units. The project will be assessed on the basis of usefulness, user experience, code readability, test coverage, reliability, and security. Students in the honors version will also be assessed on their ability to apply the tools and practices from Unit 9, including User Stories for product design and Kanban for project management. Students working in pairs or teams will be evaluated on the basis of their ability to demonstrate appropriate teamwork practices. This unit provides an authentic encounter with software development as it is practiced in undergraduate computing curricula, as well as the commercial software industry, and offers an opportunity for students to develop and demonstrate all of the elements required of a UC approved “area g” course.