Homework #5

JavaScript Homework


Objective
The objective of this homework is to provide an opportunity to become familiar with the JavaScript scripting language and JSON to communicate with a RESTful web service.

If you’re not comfortable using JavaScript, jQuery, or JSON, please refer to the following:

Your assignment is to implement an address book web application for managing contacts. This assignment consists of two components.
  • Use the provided RESTful web service (described below) to model, store, and access contacts with JavaScript or a JavaScript library such as jQuery.
  • Design and implement an interface for managing contacts that supports creating, viewing, updating, and deleting contacts.

Both of these components have requirements that must be satisfied.

Functional Requirements
Create a web application consisting of one or more pages. On these pages, create interfaces for viewing, creating, updating, and deleting contacts. Contact information must include first name, last name, email address, phone number, postal address, and notes about the contact. Interfaces should require a minimum of first name, last name, and email address before allowing contacts to be created (i.e., before sending an HTTP request to the server to create a contact).

Usability Requirements
Design an interface that presents a clear conceptual model of the system. The interface should be predictable. Use consistent terminology in the interface. Provide feedback about invalid input, required input that is missing, and provide feedback about how to correct the invalid or missing input.

Consider Shneiderman’s eight rules when designing your interface: http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

Deliverables
  • Choose a unique application identifier (app_id) and place it in a row in the table below, along with your name, alphabetized by last name. Make sure that your identifier is not being used by another student. Do this before starting development of your application. For example, you could use your UMD directory ID. Or use a random number or other unguessable string which will provide a bit of security by obscurity.
  • Create a web application as described above, hosted on a server of your choice (e.g., TerpConnect at http://terpconnect.umd.edu).
  • Put a link to your web application in the table below, next to your name and application identifier.

Example of Functional Requirements

One of the technical challenges of this assignment is to use the provided RESTful web service (described below). This involves creating HTTP requests, encoding, and parsing JSON using JavaScript or a JavaScript library such as jQuery. Example implementations of these requirements are provided in the following web application. You may use these as templates for your own implementations, but keep in mind that you will need to add additional fields to store each contact's postal address and notes about the contact. Please keep in mind that this example is intended to provide examples of functional requirements only—you will need to additionally consider usability requirements and user interface design guidelines.

Last Name
First Name
Application ID (app_id)
Website URL
Abu-Ghaida
Ghassan
ghassan
Ghassan's
Anderson
Felix
felix
Contacts
Asare
Patrick
pasare
My Contacts
Azadi
Payam
azadi
Azadi Contacts
Aziz
Aisya
aisya
My Contacts
Banaszak
Steven
sbanasza
SGB Contacts
Boldyga
Zach
zboldyga
Contact Manager
Britto
Brandon
bbritto1
Submission
Carmel
Chris
ccarmel
Contacts
Choi
Daniel
dchoi
Daniel's
Ficco
Lauren
lmficco
Contacts
Gorski
Jennifer
jgorski
Contacts
Kamili
Mir
mkamili
Contacts
King
Ian
iking
Contacts Manager
Liu
Ailun
aliu1225
Address Book
Lovett
Taylor
tlovett1
Contacts
Ma
Yifu
myf
Submission
Majedi
Amir
amajedi
Amir's
Midgley-Biggs
Michael
mmidgley
Contacts
Monga
Rahul
rmonga
Submission
Monkainfon
Mustapha
mmonk
Contats
Norris
Eric
desu
Contacts
Orlove
Matt
matt
Contacts
Palma
Andrew
palma

Paulo
Myco
mpaulo
Myco
Piyasirisilp
Siwatm
spiyasir
Siwatm's
Soleimani
Aida
asoleim1
Contacts
Sivaraman
Janahan
theJanahanMan
Janahan's Contacts
Sonthichartkul
Dan
dsonthic
JavaScript HW
Stewart
Mark
mstewar3
My Contacts
Tran
Tammy
tnt
tnt Contacts
Van
Kevin
kevinvan
Contacts
Litvak
Aleksandr
alitvak
Contacts
Woo
Kevin
spongebob
Contacts
Yu
William
wzyu
Contacts

RESTful Web Service Documentation

The RESTful web service supports reading and writing pairs to tuples. Pairs consist of a key and a value. Your web applications will use this web service to read and write contacts into tuples and pairs are associated with the application. When reading and writing tuples and pairs, you must specify the unique application identifier that you have chosen.

Tuples and pairs are sent and received using HTTP requests in the following JSON format:

{
  • "app_id": "<app_id>",
  • "tuples": [
    • {
      • "tuple_id": "<tuple_id>",
      • "pairs": [
        • { "key": "<key>", "value": "<value>" },
        • { "key": "<key>", "value": "<value>" }
      • ]
    • }
  • ]
}

Any number of pairs can be added to the pairs array, separated by a comma. In the above example, two pairs are in the pairs array. All pairs in the array are associated with the specified tuple_id, which uniquely identifies a tuple.

Tuples can be used to model any object that can be represented by a list of pairs. In this homework, you will use the tuples to model contacts in an address book web application. For example, each tuple can be used to represent one contact, and each of a tuple’s pairs can be used to model properties of contacts, such as first name, last name, and email address.

For example, the corresponding JSON for this representation, for an application with an app_id equal to “mgubbels” could be as follows:

{
  • "app_id": "mgubbels",
  • "tuples": [
    • {
      • "tuple_id": "1",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "John"
        • },
        • {
          • "key": "last_name",
          • "value": "Lennon"
        • },
        • {
        • }
      • ]
    • },
    • {
      • "tuple_id": "2",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Paul"
        • },
        • {
          • "key": "last_name",
          • "value": "McCartney"
        • },
        • {
        • }
      • ]
    • },
    • {
      • "tuple_id": "3",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "George"
        • },
        • {
          • "key": "last_name",
          • "value": "Harrison"
        • },
        • {
        • }
      • ]
    • },
    • {
      • "tuple_id": "4",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Pete"
        • },
        • {
          • "key": "last_name",
          • "value": "Best"
        • },
        • {
        • }
      • ]
    • }
  • ]
}

Creating a Tuple

To create a new tuple, send an HTTP request using the POST method to

http://cmsc434-f11.appspot.com/tuples

with a JSON-encoded tuple in the body of the POST request. When creating a new tuple do not include a tuple_id in the JSON sent in an HTTP request. A unique tuple_id will be generated by the server and associated with each of the tuple’s pairs that have been submitted. The app_id of an application must be specified. Any number of pairs can be specified when creating a tuple.

For example, to create a tuple to model a contact named Ringo Starr with an email address ringo@thebeatles.com, submit a HTTP POST request to the above address with the following body:

{
  • "app_id": "mgubbels",
  • "tuples": [
    • {
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Ringo"
        • },
        • {
          • "key": "last_name",
          • "value": "Starr"
        • },
        • {
        • }
      • ]
    • }
  • ]
}

The server will create a tuple containing three pairs. The tuple models a contact and the pairs represent the first name, last name, and email address of the contact. After creating tuples, the server sends a response containing a JSON encoding of all tuples that were successfully stored, including the assigned tuple_id. (Hint: This JSON can be parsed and used to add new contacts to a local representation of contacts.)

For example, a response to the request submitted in the previous example would be the following:

{
  • "app_id": "mgubbels",
  • "tuples": [
    • {
      • "tuple_id": "5",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Ringo"
        • },
        • {
          • "key": "last_name",
          • "value": "Starr"
        • },
        • {
        • }
      • ]
    • }
  • ]
}

Note that this response contains the tuple_id that has been assigned to the created tuple. The tuple_id of a tuple must be specified to update or delete it.

Updating a Tuple

Once a tuple has been created and stored (successfully), it can be modified. Updating a tuple is very similar to creating a tuple. The only difference between creating and updating a tuple is that when updating a tuple, the tuple_id of the tuple to update must be specified in the JSON-encoded array of tuples. The tuple_id indicates the tuple that will be updated. (Warning: If a tuple_id is not specified, a new tuple will be created.)

Specifically, to update an existing tuple, send an HTTP request using the POST method to

http://cmsc434-f11.appspot.com/tuples

with a JSON encoded list of tuples, including their tuple_id values in the body of the POST request.

The tuple_id values can accessed in two ways; they can be accessed by (1) requesting all of the tuples associated with a particular app_id, and (2) from the response data received after creating a tuple (discussed above).

Getting Tuples

To get all tuples (encoded as JSON), send an HTTP request using the GET method to

http://cmsc434-f11.appspot.com/tuples?app_id=APP_ID

replacing APP_ID with your chosen app_id.

For example, to get all tuples for the application with app_id equal to mgubbels, submit a HTTP GET request to the following address:

http://cmsc434-f11.appspot.com/tuples?app_id=mgubbels

The server will send a response with a status code of 200 and a JSON encoding of all tuples with your chosen app_id.

For example, a response to the request submitted above might be the following:

{
  • "app_id": "mgubbels",
  • "tuples": [
    • {
      • "tuple_id": "1",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "John"
        • },
        • {
          • "key": "last_name",
          • "value": "Lennon"
        • },
        • {
        • }
      • ]
    • } ,
    • {
      • "tuple_id": "2",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Paul"
        • },
        • {
          • "key": "last_name",
          • "value": "McCartney"
        • },
        • {
        • }
      • ]
    • } ,
    • {
      • "tuple_id": "3",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "George"
        • },
        • {
          • "key": "last_name",
          • "value": "Harrison"
        • },
        • {
        • }
      • ]
    • },
    • {
      • "tuple_id": "4",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Pete"
        • },
        • {
          • "key": "last_name",
          • "value": "Best"
        • },
        • {
        • }
      • ]
    • },
    • {
      • "tuple_id": "5",
      • "pairs": [
        • {
          • "key": "first_name",
          • "value": "Ringo"
        • },
        • {
          • "key": "last_name",
          • "value": "Starr"
        • },
        • {
        • }
      • ]
    • }
  • ]
}

Deleting Tuples and Pairs

To delete an existing tuple, send an HTTP request using the DELETE method to

http://cmsc434-f11.appspot.com/tuples?app_id=APP_ID&tuple_id=TUPLE_ID

replacing APP_ID with your chosen app_id and TUPLE_ID with the tuple_id of the tuple to delete.

For example, to delete the tuple with tuple_id equal to 4 for the application with app_id equal to mgubbels, submit a HTTP DELETE request to the following address:

http://cmsc434-f11.appspot.com/tuples?app_id=mgubbels&tuple_id=4

The server will delete the tuple and all pairs in that tuple. The server will send a status code of 200 upon successful deletion.

Alternatively, specific pairs in a tuple can be deleted without deleting a tuple and all of its pairs. To delete an existing pair, submit a HTTP DELETE request to the following address:

http://cmsc434-f11.appspot.com/tuples?app_id=APP_ID&tuple_id=TUPLE_ID&key_id=KEY_ID

replacing APP_ID with your chosen app_id, TUPLE_ID with the tuple_id of the tuple containing the pair to delete, and KEY_ID with the key.

To delete all tuples for an application send an HTTP request using the DELETE method to

http://cmsc434-f11.appspot.com/tuples?app_id=APP_ID

replacing APP_ID with your chosen app_id of the tuples to delete.