Homework‎ > ‎

Project 2: Web-service app

Posted: Thu. Nov 3, 2011


In this final project of the course, you will team up with a partner to design and implement an app that uses a web service.  You will present your app in a talk in class on Mon. Dec. 5 and in a public poster exhibition from 4:15-5:45 4:00--5:30 pm on Wed. Dec. 7.  (Please talk to Lyn ASAP if you have any problems with attending the poster exhibition.)

  1. You must work with a partner who is different from your Project 1 partner. There will be one three-person team. 
  2. You must choose a project different from the one you chose for Project 1.
  3. Your app must use the TinyWebDB component to access and/or share information. It is easiest to use existing web services that are friendly to App Inventor, such as:

    However, it is possible that the instructors can help to create other App-Inventor-friendly web services for compelling projects.

This project will kick off in lecture on Thu. Nov. 3 with a brainstorming session to explore a range of project ideas.  The final version of the project is due on Wed. Dec. 7.  The project has a sequence of milestones with intermediate deadlines described below.

Most of the remaining lecture and lab sessions will be set aside for project work, although occasionally we will make presentations to the class.  For instance, lab on Wed. Nov. 9 will continue the Wed. 2 lab on web services.   

Project Ideas:

We particularly encourage projects that involve accessing/sharing real data (including location information) and/or have a social networking aspect. We also encourage you to consider using GPS, texting, Twittering, and other phone features in your app.  Below are a few sample ideas, but you can build anything you want that satisfies the above requirements. Be creative! 

Friend coordination: Find friends who are nearby and coordinate activities with them. This can be combined with other information -- e.g., use FreshPal to plan when/where to eat with friends.

Location Rater: Allow users to rate/review locations such as stores, restaurants, etc.  Can be combined with GPS so that users can rate the places they're at. 

Data collection and sharing: Develop an app that helps some group (a research team, a volunteer organization, etc.) collect and share information. Consider having a real client who would use your app.

Multi-person location-based games: Play hide-and seek or capture-flag-with groups of people.

Personal Design Journal:

As in Project 1, you will keep a personal design journal that documents your journey through each phase of the project, from brainstorming, through design and implementation, to presentations and "marketing".  Each person should write her own individual design journal that is separate from that of her teammate(s). Your journal will be important for determining your individual contribution to the project.


Your grade will be determined based on your team work (design, program, completed project page, presentations), as well as your personal design journal. The weight of each aspect of your project is specified below in square brackets, like this: [20%].

Milestone 1: Choosing a Partner (due by end of day, Fri. Nov. 4)

The first step of the project is to find a partner, who must be different than your Project 1 partner.

You can choose a partner who is not in your assigned lab.  If your schedule permits, you can attend a different lab section to work with a partner during lab time.

We will have a "speed-dating" inspired brainstorming session in class on Thu. Nov. 3 that allows you to meet many other students in class. 

By the end of Fri. Nov. 4, you should sign up as a team with your partner on the CS117 coordination document. If you do not choose a partner by the end of Nov. 4, we will choose one for you.

Milestone 2: Idea presentation (in class, Mon. Nov. 7)

In class on Mon. Nov. 7, each team will have up to 3 minutes to informally present their app idea to the class. The presentation should begin with an elevator pitch and include a simple sketch of what the app might look like along with a brief explanation (in English) of the behavior of the app. The class will provide feedback on the idea to help you fine-tune it.

Milestone 3:  Preliminary Design Discussion (in class, Thu. Nov. 10)
In class on Thus. Nov. 10, you will interactively discuss your preliminary project design with the instructors. You are strongly encouraged to have a draft of your Design page that the instructors can view and comment on.

Unlike in Project 1, there will be no separate Preliminary Design subpage in your portfolio.

Milestone 4:  Design (end of day, Sun. Nov. 13) [20%]

By the end of Sun, Nov. 13, you should post a final Design subpage to one of the team member's Project 2 portfolio page.  The Design page should include the following:
  • A written version of your elevator pitch.
  • A description of the problem you are trying to solve.
  • A high-level description of your app and why it solves the problem.  Why would other people want to use your app?
  • A description of at least three other existing mobile apps that do something related and a discussion of what distinguishes your app from these.
  • An interface for your app created in the App Inventor designer. Upload this as an attachment named <YourLastNames>Project2Design.zip. 
  • An image of the application interface design (a screenshot of the above).
  • Preliminary user manual: A detailed description of the behavior of the app from the user's perspective. (E.g., when you press this button, this happens ...) A bulleted list is fine here.
  • Preliminary implementation manual: A list of the key components in your app and a detailed English description of how you will use them to achieve the proposed behavior. A bulleted list is fine here.
  • A plan for what you intend to implement (e.g., which handlers) for Milestone #5 (the preliminary implementation) on Mon. Nov 21.
  • A TinyWebDB database summary that explains in detail which web services your app depends on and what information you'll be storing and getting from them via TinyWebDB.StoreValue and TinyWebDB.GetValue.  If you require special nonstandard features from your web service (e.g., the ability to find all keys in the database, the ability to keep track of a list of all values store for a particular key, the ability to share pictures taken on the phone with others) we need to know that!

    Here are some examples of explanations for the apps discussed in Lec. #17 and the FreshPal labs:

    This app uses the simple table-based web service at http://cs117wellesley.appspot.com/ to store and get values associated with arbitrary text keys and values entered by the user in text boxes.

    This app uses the simple table-based web service at http://cs117wellesley.appspot.com/ to store and get question and answer lists. It uses exactly two keys: (1) the key "questions" is used to store/get a list of strings that are questions; and (2) the key "answers" is used to store/get a list of strings that are the corresponding answers to the questions.

    This app uses the simple table-based web service at http://cs117wellesley.appspot.com/ to get question and answer lists. It does not store any information. It uses exactly two keys: (1) the key "questions" is used to get a list of strings that are questions; and (2) the key "answers" is used to get a list of strings that are the corresponding answers to the questions.

    This app uses the Amazon book service at http://aiamazonapi.appspot.com to get information about books. It does not store any information.  Any key is interpreted as a search term for book entries in the Amazon database. Keys beginning with "isbn:" are expected to be followed by the ISBN number and will look up the book with that number. Each result returned by the service is a list of at most 5 entries, where each entry is a list of 3 elements: (1) the title of the book, (2) its cost, and (3) its ISBN number.

    FreshPal app (from lab): This app uses the FreshPal web service (http://wellesleyfreshpal.appspot.com) developed by Eni Mustafaraj and Olivia Kotsopolous to get information from the weekly menu items from the Wellesley Fresh dining service (http://www.wellesleyfresh.com/).  It does not store any information.

    Each key is a sequence of keyword/value pairs of the form <keyword>=<value> separated by "&" where there are four possible <keyword>s: (1) day (one of "Sunday", "Monday", etc."); (2) hall (one of "Bates", "Bae Pao Lu Chow", "Pomeroy", "Stone Davis", and "Tower"); (3) meal (one of the categories for a meal, such as "Breakfast", "Lunch", "Pasta", "Deli", etc.); and (4) dish (the name of a particular dish, such as "Scrambled eggs").

    Each result returned by the service is a list of meal entries, where each entry has four elements: (1) day, (2) hall, (3) meal, and (4) dish, as defined above.

Milestone 5: Design Meeting (Mon/Tue Nov. 14/15) 

You will schedule an hour 45-minute-long meeting with the instructors on Mon/Tue Nov 14/15 to interactively discuss your Design and get feedback on it.  You will be given a Design grade at the end of this meeting.  Please sign up for your meeting on the CS117 coordination document

Milestone 6: Preliminary Implementation & Design Journal Check (Mon Nov. 21) [10%]

By the end of Mon. Nov. 21, you should submit to one of the team member's Project 1 portfolio page a Preliminary Implementation subpage that summarizes the state of your project implementation.  Describe what you have done so far and what still remains to be done.  Let us know if you are experiencing any difficulties with the coding.  Attach your preliminary App Inventor program as <YourLastNames>Project2Preliminary.zip.

By the end of Mon. Nov. 21, you should also have completed all design journal entries through Mon. 21. We will not review any revisions to these entries after this time. Your design journal entries will be an important factor in determining your individual contribution to the design and preliminary implementation of the project.

Milestone 7: In-Class Presentation (Mon Dec. 5) [10%]

Each team will give an up-to-5 minute presentation of their project.  (You should also submit the slides for your presentation on the teams CompleteProject page.)

Adhere rigidly to the following format, which is adapted from Hal Abelson's 6.083 MIT course (

Use exactly five slides, and give a talk that is no more than five minutes long. Presentations will be cut off after 5 minutes.  There will be a 1-minute period between talks for the current team to answer questions and the next team to set up their presentation.  All teams should upload their slides to the instructor's computer before class to reduce the setup time needed between talks.

On the evening of Sun. Dec. 4 (time TBA), a public speaking tutor will help students with their presentations in SCI 257.

In general, for all slides, use as few words as possible. Pictures are much better. If you do use words, do not make lists of bullet points.

You should  practice your talk many time in advance so that it fits within the 5-minute limit and transitions between speakers are smooth. You should memorize your presentation so that you do not have to refer to notes. Stand near the screen (pointing to it as necessary) and make good eye contact with the audience.  Do not give your presentation by reading your slides!

You should split up the presentation so that each team member speaks for an approximately equal amount of time.

Here are some videos of team presentations from Hal's class that you should study as part of preparing your presentation.
Slide 1 (introduction): Show a compelling image that captures the essence of your project. Other than the image, the slide should have the name of your project. You can also have at most 5 words that form a "tag line" to your project, but that's not necessary. The slide should have no other words than that.  See examples from the above videos. Your presentation should begin by putting up this slide, greeting everyone, and giving your elevator pitch, a very short summary of your project that you might give to a potential investor in an elevator ride. Use this template for your elevator pitch
[name of app] is a 

[kind of thing it is] 

for [the people who would use it] 

that, unlike [the major alternatives]

[the major distinguishing feature of your app]
You should be able to deliver this pitch confidently and smoothly in 30 seconds.

Slide 2 (the need): Introduce the person (or two or three people) whose need your application will satisfy. Talk about the people and their need, not your application. Think of this as expanding the "for [target users]", in your elevator pitch.

Slide 3 (the solution): Explain how your application meets the need. Try to emphasize the delight moment that your application creates for the person you introduced in the previous slide. The solution should stress the "differentiating advantage" in your elevator pitch. You should be as specific as possible in explaining how this meets the need.

Slide 4: ("demo") Don't do an actual demo, but show one or two screen shots to explain how what the app does. If you use two screen shots, put them on the same slide. Explain a little more about what your application does beyond what you said in "the solution". This part of the talk should be two minutes at most.

Note: To get screen shots, either (1) run your App Inventor design in the emulator and take a screenshot of that or (2) install and use the Android Screen Capture program (as described in a CS117 Google Group message.

Side 5: (possible next steps) Describe you would do if you were going to extend this app beyond the prototype stage to create a finished application.

Milestone 8: Poster Exhibition (Wed Dec. 7, 4:15-5:45pm 4:00-5:30pm) [10%]

Your team will present a poster in a public exhibition that describes your app. You will stand in front of your poster, explaining your app to interested attendees, and give demos of your app on your phones.

The poster session will be held in the Science Center Focus. Easels and poster boards will be available.  You should clip your poster to the poster board using binder clips. DO NOT USE TACKS OR STAPLES TO ATTACH YOUR POSTER TO THE POSTERBOARD.

How to make and print your poster:
Use a program like PowerPoint, Photoshop, or Adobe Illustrator to make a large poster similar in size to the sample posters presented in class on Thu. Dec. 1.  Consult the  Welleslely-specific instructions on the mechanics of making and printing a poster.  You should print your poster using one of the large printer/plotters in the Science Center library or the Clapp Library.  You'll need to reserve an hour slot in advance for printing your poster.

If you need technical assistance with your poster preparation, please contact Jim McLean.

What to include in your poster

The top of your poster should have the title of your app and the names of your team members. It should indicate that the app is a project for CS117 Inventing Mobile Apps.

The body of your poster should include a written elevator pitch and an explanation of the need and your solution.  Give screenshots that give a good sense of how someone will use your app, along with brief English explanations (a very high-level user manual) where appropriate.  As in the sample posters shown in class, emphasize images more than text.  Do not show any AppInventor blocks! The only implementation detail you might include is a high-level description of the web service(s) you use. (E.g. "the app stores user comments and ratings on a shared web database that can be accessed by all phones".)

You should be prepared to give a short explanation and demo of your app to anyone who asks for more information.  Be prepared for viewers who don't read the poster and just ask "tell me what you did".

Resources for poster design

A gallery of some posters from user interface conferences.

Scientific poster design.  This document has some great advice, but is geared toward scientific research posters rather than design projects. Your posters should tend to have more images and less text than the examples presented in this document. Also, you will not have sections name Abstract, Methods, Observations, Conclusions, etc.  Rather, you might have sections with labels like Introduction (or Elevator Pitch),  Need (or Problem), Solution (or Our App or <Name of our App>).

Poster presentations: designing effective posters. Some notes and resources for poster design.

Milestone 9: Completed Project (end of day, Wed. Dec. 7 Fri. Dec. 9*) [50%]

* You may request an extension beyond Dec. 9 if you need one.

By the end of Wed. Dec. 7 Fri Dec. 9,  you should submit to one of the team member's Project 2 portfolio page a CompletedProject subpage. This subpage should be your final User Manual that explains and "markets" your app to potential users. I.e., it should convince potential users that they want to download your app and explain how they use your app once they've downloaded it.

This page should include an attachment which is your slides from your Mon. Dec. 5 presentation. It should also include an attachment which is your poster from your Wed. Dec. 7 poster presentation.

This page should also include an attachment <YourLastNames>Project2Completed.zip of your completed App Inventor project. Your blocks code should be well-organized. Use block comments to explain what your code is doing.  Use global variables and procedures to simplify your code.

You should also submit to one of the team member's Project 2 portfolio page a FinalImplementation subpage that explains how your program works, focusing on the most important and most challenging aspects. This page should include images of key parts of your blocks program with associated explanations.

Also by this time, you should have completed any edits to your post-Nov.-21 entries of the personal design journal for the project. These
entries will be an important factor in determining your individual contribution to the completed project and the associated presentations.