Technical Design

[pmdevita]

Python CodeJam Technical Overview

Django/Back-end

API

Through Django's server-side sessions, we can track clients and keep data about their messages and progress in the database

Directory

• /directory/change_name - Allow a user to change their name

• /directory/get_directory - Allow a user to get the current active user list, returning both user's names and another unique identifier (not the main one Django uses, that's private between client and Django)

  Every time a user queries the directory, Django updates the database with their last seen time. Django then queries the DB for anyone visible from the last 3 or so minutes and sends that back.

Messaging

Alternatively, might be better to do with websockets rather than HTTP

• /message/send - Takes a user ID, a message type, and the message content. Might just be ID, "TEXT", and "Hi, how are you?" or maybe some kind of emote or other message type we can add later

• /message/receive - There is some way for the server to push notifications to a client without the client having to query for it, it's either through server-side messaging or something else, I forget. This kind of function would benefit a lot from websockets

Database

Directory

A table of every user and some info on them. Has the following columns

• django_uuid - the unique identifer given to them by Django
• user_uuid - The unique identifier that is made public for messaging them
• username - The user's chosen username
• last_seen - Timestamp of when they last pinged Django
• checkpoint - Current progress in the adventure

and any other data we want to keep track on a user

Messages

A table containing all message data between users

• sender - user who sent the message (this should be linked to the corresponding directory DB row, can't remember what this feature is called)
• receiver - user who received the message (linked)
• message_type - the type of message it was
• message_data - the data for the message

Front-end/Python/Vue

Design

The message platform will have three main designs dubbed Messenger, AOL, and IRC. We need to design the look of them. To do this, everyone should draw their idea of how each view should look and other details about how it should function. They should design both a desktop and mobile interface (side note: when designing the desktop/mobile variants, think about how components of the interface are reused or where they change position. It's easier to adjust a view a little bit to swap between than to redo it for both).

We need to have a clear view of design before we proceed so that we can split up the work in an orderly way.

Components

The view will be split up into several different Vue components which manage other components and the document. It should look something similar to this

ViewManager
  |- Directory
       |- UserInfo (info about this user)
       |- OnlineUsers
            |- UserComponent
            |- UserComponent
            |- ...
  |- Messaging
       |- MessageHistory
            |- Message
            |- Message
            |- ...
       |- MessageCompose
            |- Textbox
            |- Send

(I kinda just spitballed the names, feel free to think of better ones)

[DomicidalDesigns]

Here are my designs for the 3 chat interfaces. I figured we can go with a 3 column layout for the desktop versions with the chat interface in the middle. For mobile I think using 3 tabs would be a good option.

Frontend Design

Desktop (3 Columns)

• Left column = 25%
• Middle column = 50%
• Right column = 25%.

Mobile (3 Tabs)

• Home
• Chat
• Contacts

IRC is the exception because IRC is a primarily text command / CLI chat interface. We would only need 2 columns for the desktop site and no tabs for the mobile site (everything displays in the viewport). It would be nice to integrate text commands to mimic IRC commands and navigate between different views that just changed the content in the viewport. Common IRC commands

Modern Messenger

AOL Instant Messenger (AIM)

IRC (Internet Relay Chat)

[minestronesoprano]

A possible extension, if we complete basic functionality early enough, is to include something even earlier than IRC, moving into Talkomatic and stuff with even less of a GUI than even IRC. This is an example of 80s "messaging", which allowed 5 people to chat at a time:

Dom, what did you use to get such nice wireframes?

[DomicidalDesigns]

It'd be awesome to include talkomatic since Wikipedia says it's the "first multi-user online chat system." @mshankar58 I used draw.io and a lot of free time to make the mockups.