Tutorial: Images

Course Schedule

This assignment may be completed individually or in team of at most 2. You can partner differently for each tutorial.

For this iteration of Chatter, we’ll add still and moving images to the app.

The course back-end server mada.eecs.umich.edu is not available for this tutorial.

Expected behavior

Posting a new chatt with image and/or video:

Objectives

Front end:

• How to access photo gallery album
• How to access camera and add captured photo and recorded video to chatt
• How to upload large binary data as multipart/form-data, using a 3rd-party library, AlamoFire, in the case of iOS.
• Also for iOS: learn interoperability with UIKit, using UIKit’s UIImagePickerController to add and manipulate images and videos
• For Android: learn ExoPlayer and interoparability with Android View’s explicit Intent.

Back end:

• How to parse multipart/form-data
• How to set up directory to serve static files
• How to save uploaded data to static files

APIs and protocol handshakes

To support posting and retrieving image and/or video clip, we add two APIs to Chatter. The first is a modified getchatts API that accommodates image and video URLs:

• getimages: uses HTTP GET to query the database and return all posted chatts, with optional image and video URLs, as described below.
• postimages: uses HTTP POST to post a chatt with optional image and video data sent not as JSON but as multipart/form-data.

Using this syntax:

url-endpoint
-> request: data sent to Server
<- response: data sent to Client

The protocol handshake consist of:

/getimages
-> HTTP GET {}
<- [ array of chatts with optional image and video URLs ] 200 OK

/postimages
-> HTTP POST <name, message, optional image, optional video> // multipart/form-data
<- {} 200 OK

Modified Chatter API data formats

As in the previous tutorials, the chatts retrieval API will send back all accumulated chatts in the form of a JSON array of string arrays. In addition to the three elements name, message, and timestamp, each string array now carries two additional elements holding the URLs where the image and video data are stored on the server. If there is no image or video URL, the corresponding value must be JSON NULL.

[
    ["uniqname0", "message0", "id0", "timestamp0", "imageurl0", "videourl0"],
    ["uniqname1", "message1", "id1", "timestamp1", "imageurl1", "videourl1"], 
    ... 
]

To post a chatt, the client sends a multipart/form-data with fields "username", "message", "image", and "video". Note that the first field’s key is "username", not just “name”. The value of each key is a string (not urls!). If a chatt carries no image and/or video, the key "image" and/or "video" may be omitted or their values may be set to the empty string ("") or null.

In terms of testing, unfortunately there’s no practical way to attach sample image and video without a working front end. Postman, or other REST API client, however, can play back images and videos retrieved with getimages.

Assignment specs

You must first upgrade one of the alternative back-end servers:

• Images Back End

then one of the front ends:

• Images Compose
• Images SwiftUI