Studio 10
User Testing
To prepare for HW10, we will be doing user testing of each other's Balsamiq/Figma mockups. Note that this is not the user testing required for HW10, but merely practice to help you prepare for it. Think of one task, as described in Exercise 2 of HW8. Take turns as faciliatator and user. Make sure to explain to your subject what you are building, and what users it is for. The course staff will be observing, to give you feedback about how to better conduct user tests.
Color game
Spend some time playing this color guessing game.
Let's do a little experiment:
First, restrict yourself to only using rectangular color models (rgb(), hex, lab(), oklab()).
See what score and times you get.
Then, try using only cylindrical color models (hsl(), hwb(), lch(), oklch()).
Did you get a better or worse average score? What about average time?
Group Chats and APIs
We're going to build off the basic chat application you started working on last studio using some additional features of the provided Graffiti API as well as two standards commonly used in modern APIs: JSON Schema and JSON Patch. These standards help interact with JSON data, which is the most common data format for modern APIs.
If you are happy with what you created in last week's studio you can start with that, otherwise here is a solution.
Importantly, the solution uses a component called <graffiti-discover> rather than this.$graffiti.discover in the last studio and homework.
The component does the work of creating a reactive array of messages rather
requiring you to manually compile results from an asynchronous iterator.
It will also automatically update when new messages are sent,
so you don't need to call getMessages() manually.
Our goal in this studio is to be able to be able to create and manage multiple group chats, rather than just one single group chat.
1. Creating a new group chat
Somewhere in the chat app, create a simple form for creating a new group chat. It should create a Graffiti object with the following "value":
{
activity: 'Create',
object: {
type: 'Group Chat',
name: 'My Group Chat', // Make this editable
channel: crypto.randomUUID(), // This creates a random string
}
}
Recall that objects have the form:
{
value: {
// The data you want to store
}
channels: [
// "Where" the object can be found
],
allowed: [
// "Who" can see the object.
// Undefined lets anyone see it.
],
}
Put these "Create" objects in the "designftw" channel
and make sure anyone can see it.
These objects each "point" to a different channel---the
one randomly generated by crypto.randomUUID()---that will
contain the messages for that specific group chat.
2. Viewing the created group chats
Now we're going to use <graffiti-discover>
to get a list of all the group chats that have been created.
If you take a look at the discover component in the starter code,
you will see it is using v-slot syntax:
v-slot="{ objects: messageObjects, isInitialPolling }"
This means that the component "returns" two variable called objects and isInitialPolling. We are renaming the objects variable to messageObjects for clarity. Renaming also prevents name collisions if you have nested
<graffiti-discover> components.
Both of these "returned" variables can be used in the template anywhere within the <graffiti-discover></graffiti-discover> tags.
For now, just try displaying all the objects in the "designftw" channel.
In the next step we will filter them to only show created group chats.
The operation should look something like this:
<graffiti-discover
v-slot="{ objects: groupChatObjects }"
:channels="['designftw']"
:schema="{}"
>
{{ groupChatObjects }}
</graffiti-discover>
2.5. Adding a JSON Schema
The JSON schema above is just an empty {}, which will match any object,
including both your "Create" group chat objects and any chat messages
you send. Let's make a more specific schema to only get the group chat objects.
Here is a basic schema scaffold, but you will need to
specify what each property is, and mark which ones are required:
{
properties: {
value: {
required: [], // Mark which properties are required
properties: {
// Add properties here
// make sure to specify the nested properties too!
}
}
}
}
The goal is to match all objects that "look like" the create objects you sent in step 1:
{
value: {
activity: 'Create',
object: {
type: 'Group Chat',
name: 'My Group Chat', // Make this editable
channel: crypto.randomUUID(), // This creates a random string
}
},
...
}
If you get stuck, do a couple rounds of the JSON Schema tutorial.
Once you can successfully filter for only create group chat objects,
display the names of the group chats in a list using a v-for loop.
3. Entering and exiting group chats
Now, we want to let the user navigate into and out of the different group chats. Rather than displaying one global message feed, no messages should be displayed when the user is on the home page, but when they click on a group chat, the messages for that specific group chat should be displayed.
Change the existing messages code to send and receive messages
from the selected group chat channel rather than the global designftw channel.
You will need to change the channels in both the put operation within the sendMessage function and change the channels being "listened" to in the <graffiti-discover> component.
4. Editing and deleting messages
Use delete and patch to let users delete or edit messages they have sent.
Patch uses a standard called JSON Patch.
It will look something like below, but work out what
you need to do to replace the content of the message with
new content.
await this.$graffiti.patch(
{
value: [
// Your patch here!
]
},
message,
session,
);
5. Re-naming the group chat
Currently, the name is statically set when the group chat is created. We can fix this by creating more objects!
Within a group chat, create a basic interface for editing the name of the group chat. When done, it should create an object like:
{
name: 'My Group Chat',
describes: 'my-group-chat-channel'
}
As above, use discover to get the name of the group chat and display it. Can you also display the group chat name in the list of group chats?