For this project, I want you to 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 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:
- 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.
- Design and set up a database to hold the data.
- Design a REST 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 REST 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 "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.
(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,
flask,
PostgreSQL,
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,
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.
Handing it in
Using one partner's bitbucket cs257 repository from the previous assignment,
share the repository with everybody in the group (and jeffondich and aldrichc if you haven't already),
add a directory called webapp, add the web_app_conception.pdf file to that directory, tag
the repository with "webapp1", and push the content and the tag.
Also, please create a webapp/contributors.txt file listing
the names and email addresses of all partners.
Have fun!