Skip to content

Software Design

This page includes a short description of the overall architecture style of the system, its high-level system components, and their logical (what data they exchange) and control (how they invoke each other) dependencies.

Architecture Diagram

Architecture Diagram

UML Class Diagram

UML Class Diagram

SQL Tables Diagram

UML Class Diagram

Sequence Diagrams

Sequence Diagram Sequence Diagram Sequence Diagram Sequence Diagram Sequence Diagram

Low-Fidelity User Interface

Low-Fidelity User Interface - Teacher Low-Fidelity User Interface - Admin

Detailed List of Technologies

Backend

Django

  • Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It is a free and open-source web framework, written in Python, which follows the model-view-template architectural pattern.
  • Django is used as the backend framework to handle server-side logic, data modeling and communication with the database.

MySQL

  • MySQL is an open-source relational database management system (RDBMS) that uses Structured Query Language (SQL).
  • MySQL is used as the database management system to store and retrieve data for the application.

Frontend

Next.js

  • Next.js is a React-based open-source framework for building web applications with server-side rendering (SSR) and static site generation (SSG).
  • Next.js is used for deploying the frontend of the application, providing a smooth user experience and efficient rendering of web pages.

shadcn/ui

  • shadcn/ui is a React component library that provides a set of reusable components for building user interfaces.
  • shadcn/ui is used to create a consistent and visually appealing user interface for the application.

Deployment

Cybera

  • Cybera is a not-for-profit organization that provides free cloud computing resources.
  • Cybera is used to host the application and provide a platform for the application to be accessed by users.

Other

Chameleon Reader

  • Chameleon Reader is a physical device that enables users to create and store their own audio recordings of books and other written materials.
  • Chameleon Reader is used to store and retrieve audio files for the application.

API Design

Pen File System API

A client-side API to interact with a connected pen. It enables the frontend to add, replace, and view book recordings in different languages. An index file is stored locally on the pen to keep track of which languages are stored in each folder for each book, and it is updated/read accordingly whenever the API is called.

  • Add book recordings
    • Called when a user wants to add recordings in a given language for a book, in a folder on the pen (A, B, C, D) that does not already contain a language for that book.
    • Calls the database API to get a mapping of sticker numbers to each page of a given book.
    • Calls the audio file API to receive the recordings from the server.
    • Downloads recordings to the pen in a given folder, naming and organizing files according to the sticker number for each.
    • Updates the index.json file to keep track of new books and which language is stored in each folder.
  • Replace book recordings
    • Called when a user wants to replace existing recordings for a book in a pen folder with new recordings in a different language.
    • Similar to adding books, calls the database API and audio file API to get sticker numbers and recordings.
    • Removes the recordings which need to be replaced (files named after the sticker numbers for that book).
    • Replaces the newly-deleted recordings with recordings for a different language.
    • Updates the index.json file by replacing the language for the chosen folder with a new language.
  • View books and languages
    • Called when the user wants to view the books stored on the pen, and which language recordings are stored in each pen folder for each book.
    • Reads the index.json file and returns a mapping of which languages are stored in each pen folder for each book.

Backend Database API

A server-side API which is called by the frontend and Pen File System API to retreive data about books, languages, and more. Implements CRUD style endpoints to read and change MySQL tables that store the information as defined below:

  • Create
    • Called when admins want to create new books, languages, and sticker mappings in the database.
    • Creating a language simply creates a new language entry in the table, which can be selected for book creation and searching.
    • Creating a book calls the Audio File API to upload recordins in a given language for that book.
  • Read
    • Called when admins or teachers search for and download books.
    • Called when the Pen API needs the sticker mappings for downloading recordings to the pen.
    • Used by the frontend to retrieve and display data about each book while users browse the library.
  • Update
    • Called when admins want to update info about a book or language.
    • Called when admins want to add new stickers to an existing book.
    • Yet to be implemented.
  • Delete
    • Called when admins want to delete a book or language from the database.
    • Yet to be implemented.

Audio File API

A server-side API which serves audio recordings to the client for given books and languages. Retreives and sends the files, which are stored on a Cybera Volume accessible by the Django backend. Implements a CRUD model to manage audio files. Yet to be implemented.

  • Create
    • Called when admins want to upload new recordings for a given book.
  • Read
    • Called when teachers or admins want to download recordings onto the pen.
  • Update
    • Called when admins want to replace or move recordings on the backend.
  • Delete
    • Called when admins want to delete recordings for a given book and language from the backend.

Usability Heuristics

Visibility of System Status

  • When the user hovers over a book in the library, the book cover enlarges to indicate that it is being hovered over.
  • Uploading and downloading spinners are displayed to indicate that the system is processing the user's request.
  • Buttons change color when hovered over to indicate that they are clickable.
  • When no language is selected, the edit/delete lanaguage buttons are disabled to indicate that they cannot be clicked.
  • Langauges in table background color changes when hovered over to indicate that they are clickable.
  • Toasts appear to indicate that the user's action has been completed.

Match Between System and the Real World

  • The system uses real-world concepts such as books, languages, and stickers to represent the data in the database.
  • Library is organized in a way that is similar to a physical library, with books displayed on shelves and organized alphabetically.
  • "+' icon uses to represent the addition of new books and languages.
  • "<" icon uses to represent the back button.

User Control and Freedom

  • The user can navigate back to the previous page by clicking the back button.

Consistency and Standards

  • The user interface allows users to press the return key to submit forms.
  • Back button is used to navigate back to the previous page.

Error Prevention

  • The user is asked to confirm their action before deleting a book or language to prevent accidental deletion.
  • The user is asked to confirm their action before downloading a book to prevent accidental downloads.
  • The user cannot add duplicate books or languages
  • The user cannot add an empty book or language.

Recognition Rather Than Recall

  • When a user selects a book to edit, the book's title and image cover are displayed in the edit form to remind the user which book they are editing.
  • When a user selects a language to edit, the language's name is displayed to remind the user which language they are editing.
  • When downloading a book, the user is asked to confirm their download, and the book's title and langauge is displayed to remind the user which book they are downloading.
  • The language associated with each color is displayed to remind users of the language-color mapping.
  • Indicating no audio for colors that do not have any audio.

Flexibility and Efficiency of Use

  • The user can search for the exact book they are looking for by typing the book's title in the search bar.

Aesthetic and Minimalist Design

  • The user interface is designed to be visually appealing and easy to navigate.
  • No unnecessary elements are included in the user interface.
  • Minimal information is displayed on the screen at once to avoid overwhelming the user.

Help Users Recognize, Diagnose, and Recover from Errors

  • When the user enters an invalid input, an error message is displayed to indicate that the input is invalid and why it is invalid.
  • When the user tries to login with invalid credentials, an error message is displayed to indicate that the credentials are invalid.

Help and Documentation

  • Our GitHub repository includes a README file that provides instructions on how to set up and run the application.
  • Our GitHub repository includes a README files with instructions on how to run tests.

UI Design Principles

Contrast

  • Delete buttons are red to indicate that they are dangerous and should be used with caution.
  • Action buttons are blue to indicate that they are clickable.
  • Add new langauge button is blue to differentiate it from the existing languages.

Repetition

  • The same page layout is used for the library and the edit book/language pages.
  • The back button is in the same location on every page.
  • Buttons are the same color and size.
  • Langauges are organized in the same way in the table.
  • Book are organized in the same way in the library.

Alignment

  • All buttons are aligned with each other.
  • All books in the library are aligned with each other.
  • Langauges are aligned with each other in the table.

Proximity

  • Buttons are close to each other.
  • All of the books have their own dedicated space in the library.

Accessibility

  • Minimal color is used to ensure that the application is accessible to users with color blindness.
  • UI passes the colours contrast test (https://www.alarmsystem.no/color-contrast/)
  • Images are given alt text to ensure that they are accessible to users with visual impairments.
  • Buttons are given alt text to ensure that they are accessible to users with visual impairments.
  • Book cards are very large and easy to click on to ensure that they are accessible to users with motor impairments.