Project 1 - Can't Buy Me Love   

Due - 2/6/12 at 8:59pm Chicago time

Project 1 will give you a chance to program a small interface and get used to qml before we break into groups and proceed onto Project 2.

There are quite a few vending machines on campus serving a variety of 'edible' products. Right now these tend to rely on putting money in slots but in the future we will be able to communicate with these devices through our phones or pads. In this project you will create a pad interface for interacting with vending machines, allowing the user to see what items are available, more information on those items, and then select an item, pay for it, and pick it up.

As an example we can think about the vending machine area on the second floor of SEL near the CS department's computer labs.

 As the user approaches this area (note there are machines on 3 sides), the vending machines would communicate with the user's tablet and update their current list of available items and prices.

To make things realistic, your application should be able to handle all of the different items in the 2nd floor SEL vending machines, but you only need to give full details (photo, price, nutritional information) on 20 of them, with all the various categories of items represented. The others should be named but could have placeholder images, prices, ingredients, and nutritional information. You may want to break up the work of finding all this information across the class and use the piazza pages to distribute it.

Your project should be able to run in the qml viewer application on windows / mac / linux. It does not need to run on an actual pad, but the interface should support the kind of interaction you would expect on a pad. It does not need to connect to an external database with information on the various food items, it could read that information from a local file, but if you implement an external web/cloud-based database it would be a bonus.

Implementing Project 1

You should start by taking a look at what is available in the vending machines by the CS computer labs (eg coffee, pop, munchies, etc.) and very likely taking some photos of the available products and prices so you can simulate them later, and then start drawing some sketches for how to lay out that information given the screen size and resolution.

For this assignment everyone will use QML ( so there is a common platform. Take a look at the QML examples for some ideas on the kinds of layouts and interactions that it was designed to develop.

We will assume a display size of 7.75 inches x 5.75 inches at 1024 x 768 pixels (ie roughly iPad specs) and you should use landscape orientation by default for your interface.

Each person will work individually on this project. This project is NOT a team project.

It is expected that all of the code used in these programs will be written by you. You can use code from the web as examples and a guide to writing your code, but the code you turn in for the project must be your own.

Any code, images, icons, or other elements borrowed from others must be fully cited in your application itself, in the README file along with your source code, and on your webpages

If you implement all of the functionality above with a serviceable user interface then you get a C. The B and A grades depend on the quality of the user interface that you create.

Turning in Project 1

You should create a set of public (available to anyone) web pages that describe your work on the project. This should include:

all of which should have plenty of screenshots with meaningful captions. Web pages like this can be very helpful later on in helping you build up a portfolio of your work when you start looking for a job so please put some effort into it.

You should also create a 2-3 minute YouTube video showing the use of your application including narration with decent audio quality. That video should be in a very obvious place on your main project web page. The easiest way to do this is to use a screen-capture tool while interacting with the application, though you will most likely find its useful to do some editing afterwards to tighten the video up. Its also a good idea to have a video like this available as a backup during your presentation just in case of gremlins.

The web page including screen snapshots and video need to be done by the deadline so be sure to leave enough time to get that work done. Once you have your webpage done, send the URL to the TA before the deadline.

I will be linking your web page to the course notes so please send me a nice representative 1024 x 768 jpg image of your application for the web. This should be named p1.<your_last_name>.<your_first_name>.jpg. 

Presenting Project 1

An important part of creating user interfaces is getting feedback and using it to improve your design. Given the class size, this can be a bit of a challenge. On 2/7 and 2/9, after the project has been turned in, we will have some group discussions and presentations about the solutions to Project 1.

On Tuesday 2/7 the class will break into groups. Each group will compare notes on their solutions to the problem and come to an agreement on a single revised interface design, so bring printed screenshots of your design to this class meeting (the web pages you created to turn in the assignment should be able to do double-duty here.) This revised design does not have to be implemented; it should be presented as a series of screen snapshots/mockups for the major functions.

Before Thursday's class on 2/9 each group should create a web page with the team members' names, the screen snapshots for the revised design, and a description of how the revised interface will be used. The address of this page should be emailed to the TA before class begins on Thursday.

On Thursday 2/9 each of the groups will give a presentation on the revised interface that their group came up with, using their web page, showing the snapshots and giving a brief description of its functionality. The length of the presentation will be determined once we know the number of groups, but most likely around 5 minutes.

Very likely later on in the term the class will break into different groups and revise the revised designs again.

Here are the designs that were turned in on 2/6/12

Here are the websites showing the group work done in class on 2/7 to compare their current designs and create an improved design.

Here are the websites showing the group work done in class with new groupings to compare their current designs and create an improved design.

last updated 2/1012 - added screenshots from turned in projects