Project Requirements
Executive Summary
The project aims to enhance the Multilingual Readers Program for ABC Head Start Society by developing a user-friendly web interface to allow teachers the ability to manage the contents of their pens. The current challenge faced by the Society is the complex audio file system of the pen, which is difficult for teachers to navigate and manage. Our project delivers an intuitive web interface for both teachers and administrators. Teachers can easily browse and download audio files for specific books, change languages for respective books, and manage the contents of their pens. Administrators gain a comprehensive management system for uploading new books, languages and managing the entire library.
Project Glossary
- Add - A book or language and its associated details are inserted into the database.
- Administrator - A user who can edit languages and books present on the interface by adding/deleting/replacing the contents. Along with this, Administrators have the same capabilities as Teachers do.
- Audio Files - A file that contains an audio recording of a book in a particular language that is played when a sticker is scanned on a book. A set of audio files correspond to a specific language for a book.
- Book - A physical book that has a collection of stickers, at least one on each page, that when scanned can read out contents of the page in up to four different languages.
- Colours - Four colours on the front of each book which allows pen users to select one of four languages. The pen will then play the selected language for each page in the book.
- Cybera - (Cybera)'s Rapid Access Cloud is infrastructure-as-a-service used to host and serve the web application to users
- Download - Audio files are downloaded from Cybera onto the pen's local storage.
- Language - A human language (such as English) used in the audio files. Users can access the specific languages available in the interface for transfer to digital pens.
- Pen (Chameleon Reader) - A Chameleon Reader pen is a physical device that enables users to create and store their own audio recordings. The user scans a sticker, records their reading and then scans the sticker again to associate the sticker to the given audio recording. The pen can have a collection of books recorded in up to four different languages. Users have the flexibility to edit audio files through their computers file system by connecting the pen to the computer via micro USB.
- Teacher - A user who has access to browse the books and languages on the pen and edit the contents of the pen with existing books and languages. The teacher can also download the audio files for a book and language to the pen.
- Sticker - A small sticker on pages of books that the pen reads to play the audio file associated with that page. Each sticker has a unique number for identification.
- Volume - A unit of storage on Cybera's Rapid Access Cloud infrastructure
- Upload - Audio files are uploaded to the website and are then transferred to a volume for storage.
User Stories
Legend
| US Number | Feature |
|---|---|
| 0.XX | App environment set up |
| 1.XX | Teacher tasks |
| 2.XX | Administrator tasks |
| 3.XX | Audio File editing |
| 4.XX | Authentication |
US 0.01.1 - Django Models
Story Points: 5
US 0.01.2 - MySQL database setup
Story Points: 5
US 0.01.3 - Docker Setup
Story Points: 5
US 0.01.4 - Cybera Deployment
Story Points: 5
US 0.01.5 - How to Page
Story Points: 2
As a teacher I want to be able to see a tutorial of how to navigate the website features so that I am able to know how to upload, browse, and download books and languages.
Acceptance Tests
- User can click a button that takes them to the "How To" page.
- How to page has steps on how to use all the Website's screens to download, browse, and upload books and languages.
US 1.01 - Browse Books
Story Points: 5
As a teacher I want to be able to browse books so that I can see all of the available books and their available languages.
Acceptance Tests
- User can scroll through a library of books with their title and book covers displayed.
- User can select a book and see the books details and languages available and for that book.
- User can navigate back to the library of books.
US 1.01.1 - Create Library/Book UI
Story Points: 2
As a teacher I want to be able to browse books so that I can see all of the available books and their available languages.
Acceptance Tests
- User can scroll through a library of books with their title and book covers displayed.
- User can select a book and see the books details and languages available and for that book.
- User can navigate back to the library of books.
US 1.01.2 - Create Endpoint to Retrieve Books
Story Points: 5
As a teacher I want to to be able to find books and book information so that I can see all of the available books and their available languages.
Acceptance Tests
- Frontend can send a GET request either for a specific book or all the books to the backend
- Backend will process the request
- Backend responds with the proper information to the frontend so that the user may know they were successful
US 1.02 - Filter by Language
Story Points: 3
As a teacher I want to be able to filter books by language so that I can see all of the available books in a specific language.
Acceptance Tests
- User can select a language or languages from a checkbox list in the filter section.
- The library of books is updated when a filter is applied.
- User can clear the filter and see all books again.
- If the user selects multiple languages, the library is updated to show books that are available in any of the selected languages.
US 1.02.1 - Language Filter UI
Story Points: 1
As a teacher I want to be able to click a checkbox to filter books by language so that I can see all of the available books in a specific language.
Acceptance Tests
- User can select any number of languages from a checkbox list
- User can click a clear button to reset the filter and see all books again
- The library is updated to show books that are available in any of the selected languages
US 1.02.2 - Create end-point to retrieve books by filtered language
Story Points: 2
As a user I want a way to retrieve books associated with a language so that I may find relevant information quicker
Acceptance Tests
- Frontend can send a GET request to the backend for language information
- Backend validates request and returns books associated with the language
- Backend gives an appropriate response to the frontend so that the user may know they were successful
US 1.03 - Download Audio Files
Story Points: 8
As a teacher I want to be able to download the audio files for my selected book and language to my pen so that the pen can be used with the physical book.
Acceptance Tests
- User can preview/play the audio files for their selected book and language.
- User can see what languages are already downloaded on the pen for their selected book, with their designated colours.
- User can select which language they want to replace if the selected book already has four languages downloaded on the pen.
- User can select an empty colour if the selected book has less than four languages downloaded on the pen.
- User confirms the download of recording for their selected book and language.
- User can see the progress of the download indicating the download status and estimated time remaining.
- User is notified when the download is successful.
- The files will be automatically downloaded to the correct locations in the pen filesystem.
- User receives an error notification if the download fails, specifying the reason for the failure.
US 1.03.1 - Download Audio Files UI
Story Points: 1
As a teacher I want to be able to click a button to download the audio files for my selected book and language to my pen so that the pen can be used with the physical book.
Acceptance Tests
- User can see what languages are already downloaded on the pen for their selected book, with their designated colours.
- User can select which language they want to replace if the selected book already has four languages downloaded on the pen.
- User can select an empty colour if the selected book has less than four languages downloaded on the pen.
- User confirms the download of recording for their selected book and language.
- User can see the progress of the download indicating the download status and estimated time remaining.
- User is notified when the download is successful.
US 1.03.2 - Index File on Pen
Story Points: 3
As a teacher I want to be able to see the contents of my pen and see the changes to the books and languages on my pen where applicable, this can be done through the index file on the pen.
Acceptance Tests
- Backend Pen interface can access the user's file system
- Backend Pen interface can write to the index.json file on the pen, creating it if necessary
- Backend Pen interface can update the index file with a new book, language, folder
- Backend Pen interface can request the DB for specific audio files corresponding to a book and language.
US 1.03.3 - Retrieve Files from Cybera Volumes
Story Points: 8
As a teacher I want to be able to download the audio files for my selected book and language to my pen so that the pen can be used with the physical book.
Acceptance Tests
- System retrieves the audio files from the Cybera volume for the selected book and language
US 1.03.4 - Download Audio Files
Story Points: 5
As a teacher I want to be able to download the audio files for my selected book and language to my pen so that the pen can be used with the physical book.
Acceptance Tests
- Audio files for the selected book and language are downloaded to the pen
- The pen is updated with the new audio files
- The pen is usable with the physical book
US 1.04 - Search Bar
Story Points: 3
As a teacher I want to be able to search for a book by title so that I can find a specific book without needing to scroll through the list of books.
Acceptance Tests
- User can type a search term into a search bar.
- User is shown a list of books that match the search term.
- List of books is updated as the user types.
- Auto-complete/suggestions are shown as the user types.
- If no books match the search term, the user is notified.
- User can clear the search and see all books again.
- Search is case-insensitive and matches partial words.
- Search is efficient even with a large number of books.
US 1.04.1 - Search Bar UI
Story Points: 1
As a teacher I want to be able to search for a book by title so that I can find a specific book without needing to scroll through the list of books.
Acceptance Tests
- User can type a search term into a search bar.
- User is shown a list of books that match the search term.
- List of books is updated as the user types.
- Auto-complete/suggestions are shown as the user types.
- If no books match the search term, the user is notified.
- User can clear the search and see all books again.
- Search is case-insensitive and matches partial words.
US 1.05 - Pen Details
Story Points: 5
As a teacher I want to be able to check the contents of my pen so that I can see the books and recordings that are stored on the pen.
Acceptance Tests
- User can navigate to a page to manage the books and languages on the pen through a dedicated button on the home page.
- User is prompted to connect a pen to the device if no pen is connected.
- User receives a notification when they connect the pen to the device.
- User can scroll through a library of books with their title and book covers displayed.
- User can select a book and see the books details and the recordings for that book with their associated colour.
US 1.05.1 - Pen Details UI
Story Points: 2
As a teacher I want a page to see information about my pen so that I know what books and languages are on the pen
Acceptance Tests:
- The books displayed on the UI are the same as the books listed on the index file
- The languages the books are available in are the same as the ones listed on the index file
US 2.01 - Add Book
Story Points: 3
As an administrator I want to be able to add a new book to the library so that I can update the library when a new physical book is obtained.
Acceptance Tests
- User can press a button to begin the process of adding a new book.
- User can enter the title of the book.
- User can choose the book cover image.
- User can press a button to submit the new book entry.
- User is notified when the addition is successful.
- The book object is added to the database.
- The book and its uploaded language are available for selection in the library.
- User can edit the book details after the book is added.
- Empty fields are denied and the user is notified the field is required.
- Duplicate books are denied and the user is notified the book already exists.
US 2.01.1 - Add Book to SQL Database
Story Points: 3
As a administrator I want to be able to add books to the database so that I can add a new physical book to the library.
Acceptance Tests
- Frontend can send a POST request to the backend with book information
- Backend will validate information and store new book
- Backend will give an appropriate response to the Frontend so that the user may know they were successful
US 2.01.2 - Add Book UI
Story Points: 3
As an administrator I want to be able to add a new book to the library so that I can update the library when a new physical book is obtained.
Acceptance Tests
- User can press a button to begin the process of adding a new book.
- User can enter the title of the book.
- User can choose the book cover image.
- User can press a button to submit the new book entry.
- User is notified when the addition is successful.
- The book and its uploaded language are available for selection in the library.
- User can press a button to edit the book details after the book is added.
- Empty fields are denied and the user is notified the field is required.
- Duplicate books are denied and the user is notified the book already exists.
US 2.02 - Add Language
Story Points: 2
As an administrator I want to be able to add a new language to a book so that teachers can have access to a new language for a book.
Acceptance Tests
- User can press a button to begin the process of adding a new language.
- User can enter the language name.
- User presses a button to submit the new language entry.
- User is notified when the addition is successful.
- The language is added to the database.
- The language is available for selection.
- Empty fields are denied and the user is notified the field is required.
- Duplicate langugaes are denied and the user is notified the language already exists.
US 2.02.1 - Add Language to SQL Database
Story Points: 3
As a administrator I want to be able to add languages to the database so that I can later on add recordings that are in that language to the database.
Acceptance Tests
- Frontend can send a POST request to the backend with language information
- Backend will validate information and store new language
- Backend will give an appropriate response to the Frontend so that the user may know they were successful
US 2.02.2 - Add Language UI
Story Points: 1
As an administrator I want to be able to add a new language to a book so that teachers can have access to a new language for a book.
Acceptance Tests
- User can press a button to begin the process of adding a new language.
- User can enter the language name.
- User presses a button to submit the new language entry.
- User is notified when the addition is successful.
- The language is displayed in the list of available languages for the book.
- User can press a button to edit the language details after the language is added.
- Empty fields are denied and the user is notified the field is required.
- Duplicate langugaes are denied and the user is notified the language already exists.
US 2.03 - Delete Book
Story Points: 3
As an administrator I want to be able to delete a book so that I can update the catalog of books if a physical book is no longer available.
Acceptance Tests
- User can select a book and can press a button to delete the book.
- User is prompted to confirm the deletion, with an option to cancel.
- The book object is deleted from the database.
- User is notified when the deletion is successful.
- The book is longer available for selection.
US 2.03.1 - Delete Book from SQL Database
Story Points: 2
As an administrator I want to be able to delete books from the database so that I can manage my database accordingly Acceptance Tests
- Frontend can send a DELETE request to the backend and remove a book from the database
- Backend validates request and deletes the book from the database
- Backend gives an appropriate response to the frontend so that the user may know they were successful
US 2.03.2 - Delete Book UI
Story Points: 1
As an administrator I want to be able to delete a book so that I can update the catalog of books
Acceptance Tests
- User can select a book and can press a button to delete the book.
- User is prompted to confirm the deletion, with an option to cancel.
- User is notified when the deletion is successful.
- The book is no longer available for selection.
Story Points: 1
As an administrator I want a way to delete a book from the database as a whole so that I can manage my database accordingly
Acceptance Tests
- Frontend can send a DELETE request to the backend and remove a book from the database
- Backend validates request and deletes the book from the database
- Backend validates request and deletes the book from a specific book
- Backend gives an appropriate response to the Frontend so that the user may know they were successful
US 2.04 - Delete Language
Story Points: 2
As an administrator I want to be able to delete a language from a book so that I can update the available languages for a book if a language is no longer needed.
Acceptance Tests
- User can navigate to a page to manage the all available languages.
- User can select a language and can press a button to delete the language.
- User is prompted to confirm the removal, with an option to cancel.
- The language and all of the book-language associations are deleted from the database.
- The user is notified when the deletion is successful.
- The language is no longer available for selection.
- User can also choose to delete a singluar language from a specific book.
US 2.04.1 - Delete Language from SQL Database
Story Points: 1
As an administrator I want a way to delete languages both associated with a book and from the database as a whole so that I can manage my database accordingly
Acceptance Tests
- Frontend can send a DELETE request to the backend and remove a language from the database
- Frontend can send a DELETE request to the backend and remove a language from a specific book
- Backend validates request and deletes the language from the database
- Backend validates request and deletes the language from a specific book
- Backend gives an appropriate response to the Frontend so that the user may know they were successful
US 2.04.2 - Delete Language UI
Story Points: 1
As an administrator I want to be able to delete a language from a book so that I can update the available languages for a book if a language is no longer needed. Acceptance Tests
- User can navigate to a page to manage the all available languages.
- User can select a language and can press a button to delete the language.
- User is prompted to confirm the removal, with an option to cancel.
- The user is notified when the deletion is successful.
- The language is no longer available for selection.
- User can also choose to delete a singluar language from a specific book.
US 2.05 - Sticker Replacement
Story Points: 5
As an administrator, I want to be able to add new sticker numbers to existing pages, so that when a sticker is accidentally removed from a book I can fix it by adding a new one.
Acceptance Tests
- User can find and select a book by browsing.
- User can see existing pages and what sticker numbers are associated with them.
- User can add new sticker-to-page associations to a selected book through a menu.
- User can update the book in the database when prompted.
- User can enter number of new sticker.
- User can download the book and the audio files will be added to the pen in the locations for both the new sticker number and the existing ones.
US 2.05.1 - Sticker Replacement UI
Story Points: 1
As an administrator, I want to interact with a user interface to add new sticker numbers to existing pages, so that when a sticker is accidentally removed from a book I can fix it by adding a new one.
Acceptance Tests
- User can find and select a book by browsing.
- User can see existing pages and what sticker numbers are associated with them.
- User can add new sticker-to-page associations to a selected book through a menu.
- User presses a button to submit the new sticker association.
- User is notified when the addition is successful or unsuccessful.
US 2.05.2 - Endpoint for Sticker Association
Story Points: 3
As an administrator, I want to be able to be able to create new sticker associations for a book so that I can fix any issues with the stickers in the book.
Acceptance Tests
- Frontend can send a POST request to the backend with sticker association information
- Backend will give an appropriate response to the Frontend so that the user may know they were successful
- Backend will update the book in the database with the new sticker association
US 2.05.3 - Add a New Sticker to the Database
Story Points: 2
As an administrator, I want to be able to add a new sticker to the database so that I can store the new sticker association for a book.
Acceptance Tests
- Frontend can send a POST request to the backend with sticker information
- Backend will validate information and store new sticker
- Sticker association ia added to the database and can be retrieved by the backend
US 2.05.4 - Manage Sticker/File in Pen API
Story Points: 3
As an administrator, I want to be able to manage the stickers and files in the pen so that my pen can be updated to reflect the changes made to the book/sticker associations.
Acceptance Tests
- Backend Pen interface can the database for the new sticker association
- Backend Pen interface can update the index file with the new sticker association
- Backend Pen interface can request the DB for specific sticker association corresponding to a book and language.
- Backend Pen interface can associate the new sticker association with the existing audio files
US 2.06 - Upload Audio Files
Story Points: 5
As an administrator, I want to be able to upload audio files to the website so that I can download these files to a pen later
Acceptance Tests
- User can click a button on a book details page to begin the process of uploading audio files.
- User can select a language that corresponds to the audio files they are uploading.
- User can select and upload files from local device.
- User can see the progress of the upload indicating the upload status and estimated time remaining.
- User is notified when the upload is successful.
- The files will be automatically uploaded to the correct locations in the cybera volume.
- User receives an error notification if the upload fails, specifying the reason for the failure.
US 2.06.1 - Pointer to Database
Story Points: 2
As an administrator, I want to be able to store the location of the audio files in the database so that I can download these files to a pen later
Acceptance Tests
- Frontend can send a POST request to the backend with audio file information
- Backend will validate information and store new audio file location
- Backend will give an appropriate response to the Frontend so that the user may know they were successful
- Backend can retrieve the location of the audio files from the database
US 2.06.2 - Upload Audio Files UI
Story Points: 1
As an administrator, I want to interact with a user interface to upload audio files to the website so that I upload my audio files to the database.
Acceptance Tests
- User can click a button on a book details page to begin the process of uploading audio files
- User can select a language that corresponds to the audio files they are uploading
- User can select and upload files from local device
- User can see the progress of the upload indicating the upload status and estimated time remaining
- User is notified when the upload is successful
- User is notified when the upload fails, specifying the reason for the failure
US 2.06.3 - Upload Audio Files
Story Points: 2
As an administrator, I want to be able to upload audio files to the website so that I can download these files to a pen later
Acceptance Tests
- Audio files are uploaded to the website
- The files are stored in the correct locations in the cybera volume
- The files are available for download to the pen
- The files are associated with the correct book, language, sticker number and colour
US 3.01 - File Conversion
Story Points: 8
As an administrator I want to be able to covert file types so that I can upload any audio file format and have it converted to the correct format for the pen.
Acceptance Tests
- When uploading audio files for a book or language, the user can upload any audio file format.
- The user is notified the format is not supported.
- The user is prompted to convert the file.
- The user can press a button to begin the conversion.
- The user can see the progress of the conversion.
- The user is notified when the conversion is successful.
- The user can see the converted file.
US 3.01.1 - FFmpeg File Conversion Backend
As a user I want the app to be able to convert the format of audio files so that I can ensure the file format is compatible with the pen
Acceptance Tests
- Backend has FFMPEG integrated to convert format of audio files
- Backend has an endpoint to accept files and returns converted files
US 3.02 - File Trim
Story Points: 8
As an administrator I want to be able to trim audio files so that I can remove any unwanted parts of the audio file.
Acceptance Tests
- After uploading an audio file, the user can press a button to begin the trimming process.
- The user can select what portion of the audio file they want to trim.
- The user can see the progress of the trimming.
- The user is notified when the trimming is successful.
- The user can see the trimmed file.
US 3.02.1 - FFmpeg File Trim
Story Points: 5
As a administrator I want the app to be able to trim audio files so that I can remove any unwanted parts of the audio file
Acceptance Tests
- Backend has FFMPEG integrated to trim audio files
- Backend has an endpoint to accept files and returns trimmed files
US 3.02.2 - File Trim UI
Story Points: 3
As an administrator I want to be to interact with a user interface to trim audio files so that I can remove any unwanted parts of the audio file
Acceptance Tests
- User can select a page to trim the file
- User can select a file to trim
- User can select the portion of the file to trim
- User can press a button to begin the trimming
- User can see the progress of the trimming
- User is notified when the trimming is successful
- The user can download the trimmed file
- User receives an error notification if the trimming fails, specifying the reason for the failure
US 3.03 - File Merge
Story Points: 8
As an administrator I want to be able to merge audio files so that I can combine multiple audio files into one file.
Acceptance Tests
- After uploading an audio file, the user can press a button to begin the merging process.
- The user can select what audio files they want to merge.
- The user can see the progress of the merging.
- The user is notified when the merging is successful.
- The user can see the merged file.
US 3.03.1 - FFmpeg File Merge
Story Points: 5
As a user I want the app to be able to merge audio files so that I can combine multiple audio files into one file
Acceptance Tests
- Backend has FFMPEG integrated to merge audio files
- Backend has an endpoint to accept files and returns merged files
- Backend can merge multiple audio files into one file
- Backend can merge audio files of different formats
- Backend can merge audio files of different lengths
US 3.03.2 - File Merge UI
Story Points: 3
As an administrator I want to be to interact with a user interface to merge audio files so that I can combine multiple audio files into one file
Acceptance Tests
- User can select a page to merge the file
- User can select multiple files to merge
- User can press a button to begin the merging
- User can see the progress of the merging
- User is notified when the merging is successful
- The user can download the merged file
- User receives an error notification if the merging fails, specifying the reason for the failure
US 4.01 - Authentication
Story Points: 8
As a user I want to be able to login to the application as either a teacher or administrator so that I can use the application.
Acceptance Tests
- Teachers are prompted to log in using Microsoft OAuth2 when first accessing the website.
- Administrators are prompted to log in using Microsoft OAuth2 when first accessing the website.
- Teachers can only browse books, view book details and download audio files.
- Administrators can perform all actions including browsing, downloading, adding, and deleting books and languages.
- Unauthorized users/invalid credentials cannot successfully log in and receive an error message.
US 4.01.1 - Authentication System
Story Points: 5
As a user I want to be able to login to the application as either a teacher or administrator so that I can use the application in a secure manner.
Acceptance Tests
- Backend has an authentication system in place
- Backend can authenticate users with specified username and passowrds
US 4.01.2 - Hiding Based on Permissions
Story Points: 3
As a user I want to be able to see different parts of the application based on my permissions so that I can use the application according to my role.
Acceptance Tests
- Teachers can only browse books, view book details and download audio files.
- Administrators can perform all actions including browsing, downloading, adding, and deleting books and languages.
- Unauthorized users/invalid credentials cannot successfully log in and receive an error message.
- Unauthorized users cannot access the admin panel.
MoSCoW
Must Have
- US 1.01 - Browse Books
- US 1.03 - Download Audio Files
- US 2.01 - Add Book
- US 2.02 - Add Language
- US 2.05 - Sticker Replacement
- US 2.06 - Upload Audio Files
- US 4.01 - Authentication
Should Have
- US 1.02 - Filter by Language
- US 1.04 - Search Bar
- US 1.05 - Pen Details
Could Have
- US 2.03 - Delete Book
- US 2.04 - Delete Language
Would Like But Won't Get
- US 3.01 - File Conversion
- US 3.02 - File Trim
- US 3.03 - File Merge
Similar Products
File System Access API Local MarkDown Editor
- Local file editor for Markdown files
- Demonstrates the (relatively) new File System API, which allows browsers to perform CRUD operations on the client file system.
- Inspiration for how we will interface with the user's pen with a web application.
- Digital book store
- Allows users to browse and download books in a user-friendly interface
- Inspiration for a user-interface for browsing books, including a search bar and filtering.
Open-Source Projects
- UI Library
- Provides numerous pre-made UI components
- Inspiration for UI, UX, and general aesthetics; open source allows us to make use of these components to ramp up front-end development.
- Multimedia (video and audio) Processing
- Allows audio trimming and processing
- Inspiration for how to complete audio manipulation user stories
- Free Public Domain Audiobooks
- Demonstrates a large collection of audio files for books in different languages.
- Inspiration for a user interface for browsing and downloading audio files.