Individual Programming Assignment 4

From CS 160 User Interfaces Sp10

Jump to: navigation, search

Programming assignment 4 is worth 30 points, with up to 10 extra credit points.

Due Date: Wednesday, 3/3/10, before class



For your last and final individual programming assignment, we will build on our in-class discussion of user interfaces for BART. Your task is to design and develop an iPhone app for Bay Area visitors who have never taken BART before. In particular, your application should help BART newcomers people understand how to buy BART tickets, show real-time schedules, and calculate trip costs.

This assignment is more open-ended than previous programming assignments. It is part of your task to determine what the right design for such an application should be. You should go through a rapid version of the user-centered design process we have been discussing in class. Do not jump into implementation right away -- sketch/prototype your ideas first! Since you only have limited time, we have already distilled key tasks for you and provide you with examples of competitive applications.


At a minimum, you need to implement features to serve the following user goals in your design:

Required User Experience Goals

  • How do I buy/use a ticket? Provide information on how the BART ticket system works.
  • Where can I go? Provide a (possibly interactive) graphical map of the BART system.
  • How much will my trip cost? Provide a fare information for a BART trip, given the originating and destination stations.
  • When will the next train leave? Provide real-time train departure times for the closest station. (You can fake location-awareness by hard-coding a closest station in your app).

Required Technical Topics

  • XML Parsing: Learn how to pull data from feeds and web service APIs. You will have to query the BART API for realtime arrival and fare data.
  • Persistence: Learn how to store data between application runs (Design Principle: If it's worth the user entering, it's worth the application remembering). At a minimum, your application should remember the target destination for fare calculation; you can expand into saving favorite trips and other user data.

Optional User Experience Goals for Extra Credit

The tasks above are are a starting point for your application. However, you are welcome to think of more tasks that your target users may want to accomplish. Here are some examples:

  • Find the closest BART stations to tourist destinations (either through a directory or a search)
  • Bookmarks/history: Remember previously searched fares or trips
  • Build a trip planner: Allow users to plan trips for arbitrary stations and arbitrary times (harder)

Grading criteria

Up to 30 points will be given for a well-designed application that compiles, runs, contains the functionality as detailed in the instructions; you must also have submitted a narrated video.

Since this assignment involves more conceptual and interface design, you will partially be evaluated on those aspects. A well-designed application is an application that addresses concrete user needs (and only those needs), is readily understandable by its target users, and is aesthetically pleasing.

Up to 10 extra points will be awarded for innovation on your part, in addition to the requirements listed above. Some suggestions for additional functionality are listed above. You are welcome to think about others.

Example Applications

Many mobile applications already exist that serve riders of public transportation. A good number focus on BART in particular. Use them as inspiration, but keep in mind that they may serve different target users (e.g., regular commuters) and may thus make different design decisions.

Submission Instructions

Create a Wiki Page for this assignment

Edit your user page created in Assignment 1 to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment4-FirstNameLastName|Programming Assignment 4]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload a zip file for the source code and a mov file for the screencast (described below), and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Upload Project

  • Your submitted project should include the full source code.
  • Do a Clean on your project (hit the broomstick icon, leave boxes checked, and hit clean).
  • Create a zip file of your project tree (in Finder: right-click the Folder, choose "Compress Foldername"). Rename the zip file to (e.g.,
  • Upload the zip file to the ProgrammingAssignment4-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the zip file.
  • You MUST submit a Screencast to earn any points for this assignment. Read the following section for details.

Create Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface from the user's perspective
    • No implementation details
    • In the end, point out any extra credit points
    • Be CONCISE. Your video shouldn't be longer than 90 seconds for the basic functionality. You may use additional time to point out possible extra credit features.
    • Be prepared to do multiple takes or maybe write out a script first.
  • Running iShowU HD
    • Download iShowU HD
    • Open ~/Downloads/iShowU_HD_2.1.3.dmg
    • Open iShowU HD
    • Leave HD Pro selected and click "Use Demo".
    • For "Capture area" click Choose to select the window to capture (hitting the spacebar will allow you to switch between manually specifying the capture window and selecting an application window).
    • For "Output video" click the gear icon and choose Change size -> Same as capture size
    • For "Mouse mode" choose Fixed.
    • Click record
    • To finish recording, click on the iShowU HD icon near the top right of the menu bar and hit "Stop capture"
    • Your video will be stored in your ~/Movies/iShowU HD folder
    • Rename the mov file to (e.g.,
  • Upload the mov file to the ProgrammingAssignment4-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the mov file.
  • If your video's volume is too low, do an audio check:
    • The monitors in the lab have both speakers and a mic
    • In Apple -> System Preferences -> Audio, you can check the volume of sound output and input

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment4-FirstNameLastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

QuickStart Guide


According to the BART copyright statement: You may not use the BART logo, the BART map or any other content from the BART website without express written permission in advance from BART.

Pandav, the developers of the iBART iPhone app, have given us permission to use their custom BART map, created by Peter McClelland, for this assignment. You may only use the map for your homework assignment; you may NOT use the map in any commercial (or free) applications you develop outside of class. Here is the file in PNG format: File:Pandav_BART_Map.png


You will use this API to get fare and arrival data. You send HTTP queries and receive responses in XML format. All you need to do is parse this XML data and plug it into your interface.

BART Realtime feed page:
A simpler feed of real-time BART arrival data for all stations.

BART Schedule:
The complete BART schedule and fare system is also available as a set of CSV files in Google Transit Feed Specification. We do not recommend using this data set.

Panning and Zooming an Image

Loosely speaking you want to create a UIImageView with your image and add it as a subview to a UIScrollView.

The UIScrollView will handle the pinch and pan gestures.

Here is a tutorial.

Parsing XML

Details of XML parsing will be covered in sections and also pasted here soon. For now feel free to look at NSXMLParser.

Here is a good tutorial on XML parsing on the iPhone:

We've also provided a sample app that parses an xml file for weather data

Storing Data

There are a few ways to read and store data. Reading and storing files in your documents directory might be the easiest way to get started. To VIEW your documents directory, find your iPhone Simulator directory and go to User->Applications->GibberishAlphaNumericCharacters->Documents

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); // gets an array of paths
NSString *documentsDirectory = [paths objectAtIndex:0]; // the documents directory is the first path in the array
NSString *fileName = [NSString stringWithFormat:@"%@/MyFile.txt", documentsDirectory];
FILE *myFile = fopen( [fileName UTF8String]);
// use standard c code to write to file

Checking if a directory exists:

NSString *dataDirectory = [NSString stringWithFormat:@"%@/data", documentsDirectory]; // OPTIONAL: if you want to check if there is a subdirectory
NSFileManager *fileManager = [NSFileManager defaultManager];
if(![fileManager fileExistsAtPath: dataDirectory]) // check if the subdirectory exists
    [fileManager createDirectoryAtPath: dataDirectory attributes: nil]; // if not, then create it

You can add a PList to your project by right-clicking Resources->Add->New File... and choose Property List from the Other category.

Reading a PList

NSString *error;
NSString *plistPath;
NSPropertyListFormat format;
NSString *rootPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0]; // gets the document directory
plistPath = [rootPath stringByAppendingPathComponent:@"Routes.plist"];
if(![[NSFileManager defaultManager] fileExistsAtPath:plistPath]) {
    plistPath = [[NSBundle mainBundle] pathForResource:@"Routes" ofType:@"plist"];
NSData *plistXML = [[NSFileManager defaultManager] contentsAtPath:plistPath];
NSDictionary *temp = (NSDictionary *)[NSPropertyListSerialization propertyListFromData: plistXML mutabilityOption:NSPropertyListMutableContainersAndLeaves format:&format errorDescription: &error];
NSMutableDictionary *myPlist = [NSMutableDictionary dictionaryWithDictionary: temp]; // perhaps this is stored in an instance variable, in which case you'd want to retain it

Modify myPlist if necessary by using setObject:forKey: for example.

Writing a PList

NSString *error;
NSString *rootPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];
NSString *plistPath = [rootPath stringByAppendingPathComponent:@"Routes.plist"];
[myPList setObject: anObject forKey:@"aKey"];
NSData *plistData = [NSPropertyListSerialization dataFromPropertyList: myPlist format:NSPropertyListXMLFormat_v1_0 errorDescription:&error];
if(plistData) {
    [plistData writeToFile:plistPath atomically:YES];

Links to Finished Assignments

Add your submission below this line.

[add comment]
Personal tools