CS 257: Software Design

Web Application, Phase 1

Please work with a partner of your choosing. Trios are usually OK too, but check with me first. This project will last through midterm, so make sure you choose a partnership that will work for you.

When you search imdb.com for a movie, the interaction goes roughly like this:

• You type a search request into an entry blank on the imdb page displayed in your browser and hit Return or click on the magnifying glass icon.
• Your browser translates your search request into a suitable HTTP request, initiates a TCP connection with the web server at imdb.com, and sends the HTTP request.
• imdb.com's web server translates the HTTP request into a database query and sends that query to its database server.
• imdb.com's database server collects search results and sends them back to imdb.com's web server.
• imdb.com's web server incorporates the database results into an HTML page and sends that page back to your browser.
• Your browser turns the HTML into a visual display suitable for human viewing, and renders that display on your screen.

This style of interaction (person → browser → web server → database → web server → browser → person) is at the heart of many of the most useful websites (not to mention the not-so-useful sites as well).

During the next couple weeks, we are going to develop a database-driven web application.

Phases of the job

Your work is going to proceed in phases, approximately like so:

1. Choose and obtain a dataset to work with.
2. Create a prioritized feature list.
3. Create mock-ups of your web page structure and rough appearance.
4. Create a detailed development plan (which will include the phases below, but with more detail, as appropriate to your particular application). Your development plan will include a testing plan.
5. Implement an end-to-end system that follows the pattern described in the imdb example above, but without useful queries and results. This will be sort of a database-driven client/server "hello world" application.
6. Design the interfaces between the various software entities (e.g. in what form do the queries from the browser arrive at the web server, and in what form do the replies get sent back?).
7. Design your database structure and load your data into it.
8. Implement and test one feature at a time, according to your development plan. In between stages of this part, you might adjust your development plan to adapt to new understanding of the project. (This phase, one small testable bite at a time, is called iterating. (Um, watch out...it may be that the language in the video I just linked isn't entirely classroom-appropriate.))

This project will get you beginning experience with quite a few important software technologies, including HTML (including forms), HTTP, the standard Python CGI library, PostgreSQL, the standard Python PostgreSQL library, XML and/or JSON, and (if you're interested and have time) Javascript. In the process of developing this project, we will also discuss use cases/user stories, test-driven development, the design of functional and client/server interfaces, automation with Makefiles, documentation, a variety of code construction topics, and undoubtedly other stuff that will come up as we proceed.

Phase 1: Conception and rough requirements

Your first assignment is to do steps 1, 2, and 3 from the list above. Hand in a single PDF file called web_app_conception.pdf containing:

• A brief description of the dataset your application will use. This description should include link(s) to where the data comes from, licensing information that makes it clear you're allowed to use the data for academic purposes, and information about how you will actually get your hands on the data (maybe there's a simple download of a csv/xls/txt file, but maybe there's not...).
• A list of features you want your web application to include, ordered from most important to least important.
• Mockups of the rough appearance of your web application performing three or four of its most important features. Use balsamiq, and export those images for inclusion in your PDF report. You and your partner(s) will receive an invitation to join balsamiq. NOTE: all students in the class will share one balsamiq project, so it will be important to name your mockups carefully. Please name your mockups using your partnership's email addresses separated by underscores, like "jondich_dlibenno #01 homepage", "jondich_dlibenno #02 credits page", etc.

In case you're interested, Carleton has data related to energy use and sustainability, and we will be able to get some real data by talking to the right person. Carleton also has weather data, registration data, etc.

Handing it in

Create a new bitbucket repository to be shared by your partnership, and invite jeffondich and ewinge to join it. Add your web_app_conception.pdf to it.

Have fun!