For this project, you will work in groups of either 2 or 3 students.
This project will last through midterm, so make sure you choose a partnership that will work for you.
If you want help finding a partner, send me an email and I'll try to connect people.
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 scans the HTML for <img> tags and <script> tags, etc. that tell it
where to get the images and javascript files and CSS files it needs for the full presentation and
functionality of the page. The browser then initiates new connections for all of those resources.
- Your browser turns the HTML into a visual display suitable for human viewing, and renders that display
on your screen (usually re-rendering after the CSS and javascript and images arrive).
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 few weeks, you are going to develop a database-driven web application.
Rough ordering of steps
Your work is going to proceed in stages, approximately like so:
- Choose and obtain a dataset to work with.
- Create a prioritized user-oriented feature list.
- Create mock-ups of your web page structure and its rough appearance.
- Create a development plan (we'll do this in class).
- Design and set up a database to hold the data.
- Design a REST-ish interface for the database (I'm sorry, but I can't bring myself to
use the term "RESTful", which I find oddly annoying)
- Implement the interface
- 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. (See Section 10 "Tracer Bullets" in The Pragmatic Programmer.)
- 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 (possibly NSFW, depending on where you W).
This project will get you beginning experience with quite a few important software technologies,
including HTML,
HTTP,
flask,
PostgreSQL,
psycopg2 (the most commonly used Python PostgreSQL library),
AJAX,
JSON, and a little bit of
Javascript.
In the process of developing this project, we will also discuss
use cases,
user stories,
more test-driven development
with Python's unittest module,
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, like so:
- Create a folder named WebApp in your github repository
- Create a subfolder WebApp/doc/
- Create a WebApp/doc/contributors.txt file listing the names and email addresses of all partners.
- Write a report, and save it in a PDF file called phase1.pdf
in WebApp/doc/. This report should include:
- 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_arafferty #01 homepage", "jondich_arafferty #02 credits page", etc.
Handing it in
Make sure your contributors.txt and phase1.pdf files are committed and pushed to one
partner's github repository, and tag the repo "webapp_phase1". Note that if you want to update a
submission, you can tag with "webapp_phase1.1", "webapp_phase1.2", etc.
Have fun!