Tutorial: Chatter

Course Schedule

Image: Free Icon, ChatGPT

In this tutorial, users use the Chatter app to post textual chatts to our back end chatterd. The back end stores each chatt in a database and shares all posted chatts with everyone else accessing the back end.

Expected behavior

Posting a new chatt:

DISCLAIMER: the video demo shows you one aspect of the app’s behavior. It is not a substitute for the spec. If there are any discrepancies between the demo and the spec, please follow the spec. The spec is the single source of truth. If the spec is ambiguous, please consult the teaching staff for clarification.

Treat messages you send to chatterd and Ollama as public utterances with no reasonable expectation of privacy and know that these are recorded and shared with everyone who uses chatterd.

About the tutorials

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

This second tutorial builds on the first one, so if you haven’t completed the first one, you should do so first.

Since the tutorials require manual set up of your computing infrastructure, customized to each person or team, including individualized security certificate, we cannot provide a ready-made solution for you to download. Each person or team must have their own mobile scaffolding and infrastructure from tutorials 1 and 2 to complete the latter tutorials and projects. If you run into any difficulties setting up yours, please seek help from the teaching staff early and immediately.

Objectives

Front end:

how to submit HTTP GET, in addition to POST, asynchronously
how to convert to/from JSON manually

Back end:

How to set up a PostgreSQL database and table
How to interface URL path handlers with PostgreSQL

APIs and protocol handshakes

Chatter is a simple CRUD app. We’ll create a chatts table in PostgreSQL and use it to hold posted chatts. We add two APIs to Chatter:

postchatt: uses HTTP POST to post a chatt as a JSON object.
getchatts: uses HTTP GET to query the database and retrieve all posted chatts,

Chatter does not provide “replace” (HTTP PUT) and “delete” (HTTP DELETE) functions.

Using this syntax:

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

The protocol handshakes consist of:

/postchatt
-> HTTP POST { name, message }
<- {} 200 OK

/getchatts
-> HTTP GET {}
<- [ array of chatts ] 200 OK

Data formats

To post a chatt with the postchatt API, the front-end client sends a JSON Object consisting of "name" and "message". For example:

{	
   "name": "YOUR_UNIQNAME",	
   "message": "Hello world!"	
}

The getchatts API sends back all posted chatts as a JSON Array of string arrays (that is, an array or arrays). Each string array consists of four elements, in order: name, message, id, and timestamp. These are unkeyed. For example:

[ 
    ["uniqname0", "message0", "id0", "timestamp0"],
    ["uniqname1", "message1", "id1", "timestamp1"], 
    ... 
]

Each element of the string array may have a value of JSONNull.

Specifications

As in the previous tutorial, you only need to build one front end, AND one of the alternative back-end stacks. Until you have a working back end of your own, you can use mada.eecs.umich.edu to test your front end. To receive full credit, your front end MUST work with your own back end.

The main additions to the chatterd back end is the use of PostgreSQL as permanent store and additional chatter APIs to insert to and retrieve from the store.

Chatter Back End

Prepared by Tiberiu Vilcu, Sugih Jamin

Last updated: December 23rd, 2025