PROJECT: Study Buddy

Overview

StudyBuddy is a desktop application designed for students who wish to manage their module related tasks in a convenient and user-friendly interface. The application is written in Java and spans over 12k lines of code.

Summary of contributions

  • Major enhancement: designed the interactive process logic

    • Function:

      1. It allows user to execute his/her command in an interactive way.

      2. Display clear instruction or error message at each interaction step.

      3. When invalid command received (e.g. the user made a typo mistake), the interaction will not terminate, instead, it will response with clear instruction and wait for user’s next action.

      4. Allow user to quit from interaction using "quit" keyword.

    • Justification:

      1. This feature saves user from remembering long, wordy commands to use the command line interface.

      2. The "stay and wait" reaction against any invalid input improves the typo-tolerance of the application, which contributes a notable benefit to CLI users.

    • Highlights:

      1. The implementation was challenging because it required a huge changes in the original logic.

      2. The time left me to design and develop this logic was tight because I needed to finish it so that my team can started to work on their own part.

  • Major enhancement: designed the UI/UX of Study Buddy

    • Function:

      1. The GUI of:

        1. Landing page (i.e. the all tasks page)

        2. Modules page

        3. Statistics page

        4. Calendar page

        5. The Task card (i.e. the items in task list)

      2. Responsive layout. The inner components can automatically adjust themselves according to the current width and height.

      3. The mouse events when:

        1. hovering on menu bar item, calendar button, as well as tabs in modules and statistics page

        2. focusing on list items (e.g. all tasks list)

        3. clicking on chars in statistics page

    • Justification:

      1. The GUI of this application follows a relaxed style, which helps users to ease the pressure accumulated from school.

      2. The responsive layout allows the application to be adapted to different screen sizes.

      3. The mouse event makes it easier for user to focus on what he/she is doing.

    • Highlights:

      To design and implement of the UI/UX requires lot of self-learning and reference.

  • Major enhancement: added task summary feature

    • Function:

      1. Automatically summarizes the collected data into different charts.

        1. pie chart compares the number of tasks in different statuses.

        2. area chart summarizes the task deadlines or start dates for different modules.

        3. stacked bar chart compares the weight of different types of tasks in each module

      2. Retrieves and displays relevant tasks when user clicking on a chart.

      3. Listen to the data change and update simultaneously.

    • Justification:

      1. The statistics helps user to integrates scattered information in one place and represents in dynamic charts, witch makes the information more straightforward.

      2. With this feature, user can be more productive as they have better idea of what is going on and what is more important.

      3. The statistics is auto-generated along the way the user managing their records using keyboard input, which means this feature can contribute significant value to those fast typist.

    • Highlights:

      1. The data bind of each chart is not easy to implement, especially when I take this opportunity to practice on Lambda.

      2. It also needs to be careful when choosing a suitable chart for a data set. Even for the same collection of data, the comparison results obtained from different charts can be variant.

  • Major enhancement: added the Add and Edit command

    • Function:

      1. Add: Allows user to add a new task in the list.

      2. Edit: Allows user to edit an existing task in the list.

    • Justification:

      This feature is extremely helpful to the user because it enables them to insert and edit task.

    • Highlights:

      Implementing this basic functionality is not easy because it involves a lot of obvious and non-obvious validation, such as:

      1. obvious: empty input for required fields, wrong input format etc.

      2. non-obvious: the validation of time, task weight etc.

  • Minor enhancement: added the Sort command

    • Function:

      1. Allows user to sort their tasks by:

        1. Deadline / Task Start Date

        2. Task Name

        3. Creation Date & Time

    • Justification:

      This feature can help uer to prioritize their task by desired aspect.

Review/Mentoring

  1. Reviewed another team’s DG and provided useful feedback.

User guide

Given below are sections I contributed to the User Guide. They showcase my ability to write documentation targeting end-users.

User Interface Introduction

(Contributed by Yuting, Hong Wen & Teik Jun)

Study Buddy makes use of color schemes and animations to enhance your user experience.

Dashboard

The dashboard is the landing page each time the application is launched.
It consists of different components that can interact with you and provide you with meaningful information.

The menu bar is located at the top of the dashboard and is primarily used for navigation.

nav bar
Figure 1. Menu bar

Shortcuts are available for navigating to each page:

F1 - Modules

F3 - Statistics

F4 - Calendar

F5 - Productivity

F6 - StudyBuddy (All Tasks)

All Tasks Panel

By default, the All Tasks Panel lists all unarchived task tasks with their detailed information in the order of creation date and time.

all tasks
Figure 2. All Tasks Panel
Task Badges

To highlight Module code, Task Type and Task Status of each task in the All Tasks list , we use Badges.

Module Badges
  • All in light steelblue.

  • If the task is not related to any module, the Module Badges will be omitted.

Task Type Badges
  • Badges of different types are in different colours.

Task Status
  • Badges of different status types are in different colours.

  • Tasks that are due within a week (i.e. 7 days) will be marked as Due Soon. You may need to use the refresh command ([Refresh]) to refresh the status of all your tasks.

Tasks Due Soon Panel

The tasks that are due within a week (i.e. 7 days) will be listed here. You can jump to [Due Soon Tasks] to get more details.

due soon
Figure 3. Task Due Soon Panel
Task Badges

To highlight the Weight & Module Code, Time left for deadline and Task Type of each task in the Tasks Due Soon Panel , we use Badges.

Weight & Module Code
  • All in steelblue.

  • Display the weight and module code of a task.

Time left for deadline
  • All in light orange.

  • Display the time left for a tasks' deadline.

  • More information please refer to [Due Soon Tasks]

Task Type Badges
  • Badges of different types are in different colors.

Interactive Prompt Box

The Interactive Prompt Box can be found at the bottom of the user interface.

To interact with Study Buddy, you can enter the desired command in the box with the words Please enter your command here…​ and press enter to execute.

The reply from Study Buddy will be displayed in the box above.

prompt box
Figure 4. Interactive Prompt Box
To get more detailed information about how to use Study Buddy, please refer to [Features]. ==== Add (Contributed by Yuting)

This command enables you to add a new task into Study Buddy.

  • Through the interaction, task’s details will be collected.

    1. Required information: task name, task type, task deadline or duration

    2. Optional information: module, task description, task weight, estimated number of hours needed

    3. Input format requirement:

      Information Type Format Requirement Example

      MODULE CODE

      2 or 3 letters + 4 digits + 1 letter (optional)

      CS2101, CS2103T,
      LSM1101

      INDEX NUMBER OF
      MODULE

      Integer number

      1

      TASK NAME

      No more than 20 characters

      Demo presentation

      INDEX NUMBER OF
      TASK TYPE

      Integer number

      1

      TASK DEADLINE
      OR DURATION

      Different task types apply different date and time format

      Deadline (for Assignment):
      HH:mm dd/MM/yyyy

      Duration (for other task types):
      HH:mm dd/MM/yyyy-HH:mm dd/MM/yyyy

      HH → hour, mm → minutes, dd → date, mm → month, yyyy → year

      Assignment:
      23:59 01/05/2020

      Meeting:
      14:0 15/04/2020-16:0 15/04/2020

      TASK DESCRIPTION

      No more than 300 characters

      this is a valid description

      TASK WEIGHT

      Positive integer or float number from 0.0 to 100.0

      12.0

      ESTIMATED NUMBER OF HOURS NEEDED

      Positive integer or float number

      10.0

    4. Other constraints::

      1. The application does not allow you to enter a name that has special characters (any character that is not a letter in the alphabet).

      2. The application does not allow you to assign date time that has already passed to a task. It must be a time in the future.

      3. For duration, the two dates should follow the order of start date-end date, the end date should be later than start date.

      4. The total weight of tasks under the same module is capped at 100.0.

        • Both archived and not archived tasks will be taken into consideration.

        • This constraint also applies to tasks without module information. Those tasks will be treated as from a same extra module. It is designed for you to practice your time management skill :).

      5. All index numbers entered should be positive and within a valid range. (i.e When there is only 5 modules available, the valid module index number range is 1 to 5).

      6. The "Required Information" cannot be empty, on the other hand, you can press enter to skip the "Optional Information".

    5. Adding duplicate tasks:

      1. Look at [Add duplicates] for more information.

To add:

  1. Initiate the command using keyword add + enter.

  2. Study Buddy should start with asking module information with a list of available modules as:

    add module
    Figure 5. Reponse to 'add', asks for module
  3. You can link this task with a module by entering its MODULE CODE | INDEX NUMBER OF MODULE here , or you can press enter to skip. Here we use "1" (CS2101) as an example.

  4. After the selection of module, Study Buddy should ask for the task name. Here we use "new task" as an example.

  5. After entered the task’s name and press enter, Study Buddy should prompt for task type with the list of available types as:

    add task type
    Figure 6. Asks for task’s type
  6. You can use the INDEX NUMBER here to choose a task type. Here we use "1" (Assignment) as an example.

  7. After the selection of task type, Study Buddy will prompt for new task’s date-time information together with the type related date-time format (i.e. different task types support different date-time formats). Here we use "14:00 04/05/2020" as an example.

  8. Next, Study Buddy should ask for the new task’s description, and we use "new task description" as an example.

  9. Then, Study Buddy should ask for the new task’s weight. Here we use "10" as an example.

  10. Next, Study Buddy will prompt for the estimated number of hours needed for this new task. Here we use "10" as an example.

  11. Once you specify the estimated time needed and press enter, Study Buddy should respond with the task details collected and ask for your confirmation to add the task as:

    add task info 1
    Figure 7. Asks for user conformation to add a new task
    add task info 2
    Figure 8. Task details collected
  12. Now, by pressing enter the new task will be added into your Study Buddy. Meanwhile, the All Tasks Panel will update accordingly. For this example, the panel should update as below.

    add result
    Figure 9. New task added
Remember, you can use quit command to quit at any step. ==== Edit (Contributed by Yuting)

This command is for you to edit an existing task. To indicate the task you want to edit, you need to provide its index number.

Example:

Say when there are some typo in an existing task. You can use this command to edit as you wish.

Constraints

  1. Each new value entered will be checked under the same constrain of add command. More info you can refer from [Add].

  2. When editing weight or module, the application will also make sure the total weight of related module’s tasks will not overflow (i.e. exceed 100).

  3. You cannot edit a task to be a duplicate. i.e all the fields cannot be the same as a task that already exists.

  4. Due to the deadline/Duration format is different from Assignment to Other Task Types, we currently don’t support:

    1. AssignmentAnother Tsk Type editing

    2. Another Tsk TypeAssignment editing

To edit:

  1. Initiate the command using keyword edit + enter.

  2. Study Buddy should start the task editing interaction by asking you the index number of the desired task. Here use "1" (Homework 1) as an example.

  3. When you specified the target task, Study Buddy should continue the interaction by prompting you with the list of editable information. You can choose any of them via an index number. Here we use "2" (Task name) as an example.

    edit response index
    Figure 10. List of editable fields
  4. After you selected the field to edit, Study Buddy should asks you for the new value. For this example, let’s use "Updated Task" as the new task name.

  5. Once you specified the updated information and press enter, the updated record will be captured, and the All Tasks Panel will update automatically. For this example, the panel should update as below.

    edit result
    Figure 11. Task edited

    ==== Sort (Contributed by Yuting)

This command is for you to reorder the task list in All Tasks Panel.

Currently you can sort tasks by their
  • Deadline / Task Start Date

  • Task Name

  • Creation Date & Time

Example

When you want to sort all your unarchived tasks by their deadline or start date, you may utilize this command to achieve the desired order.

To sort:

  1. Initiate the command using keyword sort + enter.

  2. Study Buddy should provide the list of sorting options as below, and you can use the index number to select the desired sort. Here we use 1 (Deadline / Task Start Date) as an example.

    sort term
    Figure 12. Sorting options and the order of the tasks before sort
  3. After the selection, Study Buddy should ask for your confirmation to perform the reorder. You can press enter again to confirm. Meanwhile, the tasks in All Tasks Panel will be sorted accordingly.

    sort result
    Figure 13. The order of the tasks after sort
The tasks in All Tasks Panel will not change back to the original order by itself.
You can use sortCreation Date & Time to do so. === Statistics (Contributed by Yuting)

With all the tasks and modules' information you entered, Study Buddy can provide you with a real-time visualized statistics about:

  • Task status

  • Module related tasks' deadline/ start date

  • Module related tasks' weight

It utilizes different types of charts to make the information more intuitive. In addition, the chart is always updated in sync with your task records. Especially when you execute commands such as add edit delete sort find archive done list and clear.

The colour theme will also change randomly, hope you enjoy :)
The statistics feature is built on top of the data collected from the basic functionality described in [Basic features]. Which means Study Buddy only supports keyboard input for statistics generating.
Therefore, even though this feature involves mouse-clicking, it is still designed for a fast typist.

You can navigate to Statistics page by clicking the Statistics from the menu bar.

stats nav
Figure 14. Entry of Statistics page

Statistics Page User Interface and Interaction

The left panel contains different charts for different statistics. You can use the tabs circled in light orange to navigate.

When you click on a statistics chart, the associated task records will be listed automatically in the right-side panel.

stats ui
Figure 15. Statistics Page User Interface
Task Status Tab
Introduction

This clickable pie chart compares the number of tasks in different statuses.

stats pie
Figure 16. Task Status Chart
Clicking Action

When you click on the chart, all tasks with the selected status will display on the right-side panel automatically.

Here is an example when you are clicking on the Due Soon portion.

  • The part highlighted by light purple lines represents all your Due Soon tasks. When you are clicking on it, all tasks with Due Soon status will be listed in the right-side panel.

    You can refer to the screenshot below where the relevant information is highlighted for you.

    stats pie click
    Figure 17. Clicking on 'Due Soon' part
Introduction

This clickable area chart summarizes the task deadlines or start dates for different modules.

stats area
Figure 18. Module Related Tasks' Deadline/Start Date Chart
Chart Details
  1. The X-axis represents a particular date.

  2. The Y-axis represents the number of tasks.

  3. The area (i.e. The triangles or quadrilaterals exclude their vertices) with the same background colour represents the tasks under the same module.

  4. The data point (i.e. The vertices of the triangles or quadrilaterals) represents tasks under a particular module, which will due or start on the same specific data.

  5. Tasks under different module have a different background colour.

  6. Only the tasks due or start within the next 60 days will display in both chart or right-side panel.

  7. Since the colour of each module is translucent, "extra" colours may appear as a result of data overlapping.

  8. When clicking on an overlapping area, only one layer’s related records will be listed in the right-side panel.

Clicking Action

After you click on the chart, the related task records will display on the right-side panel automatically.

Here are two different behaviours according to the place you click.

  1. Click on data area:

    The tasks under a particular module will be listed in the right-side panel.

    Here is an example when you are clicking on the area of module "CS2101".

    • The parts highlighted using light purple lines represents the tasks under module "CS2101". When you are clicking on those areas, the tasks under CS2101 and will due or start within the next 60 days will display in the right-side panel.

      You can refer to the screenshot below where the relevant information is highlighted for you.

      stats area click area
      Figure 19. Clicking on the area of module 'CS2101'
  2. Click on data point:

    The tasks under a particular module and will due or start on a specific date will be listed in the right-side panel.

    Here is an example when you are clicking on the data point of tasks under module "CS2101" and will due or start on 13/04/2020.

    • The point circled in light purple is the data point you clicked. After you clicked on this point, the tasks under module "CS2101" and will due or start on 13/04/2020 will display in the right-side panel.

      You can refer to the screenshot below where the relevant information is highlighted for you.

      stats click point
      Figure 20. Clicking on the data point of module 'CS2101’s tasks which will due or start on 13/04/2020
Introduction

This clickable stacked bar chart compares the weight of different types of tasks in each module.

stats bar
Figure 21. Module Related Tasks' Weight Chart
Chart Details
  1. The X-axis represents different modules.

  2. The Y-axis represents the weight-sum under the same module.

  3. The blocks in each bar represent the total weight of a particular task type.

  4. Different task type has a different background colour.

Clicking Action

After you click on the chart, the tasks under the selected module and type will display on the right-side panel automatically.

Here is an example when you are clicking on the block which represents the assignments of module "CS2101".

  • The block highlighted using light purple lines represents the assignments of module "CS2101". When you are clicking it, all assignments of module "CS2101" will show in the right-side panel.

    You can refer to the screenshot below where the relevant information is highlighted for you.

    stats bar click
    Figure 22. Clicking on the block of 'CS2101''s assignments
As the data of charts are filled dynamically, thus it is possible that their labels can overlap together.
This is an unfixed bug regarding the JDK which is caused by JavaFX chart off-sync. To get more information, you may refer to here.
When this issue happens, you can use any command that can trigger chart updating to refresh the chart.

Developer Guide

Given below are sections I contributed to the Developer Guide. They showcase my ability to write technical documentation and the technical depth of my contributions to the project.

UI component

UiClassDiagram
Figure 23. Structure of the UI Component

API : Ui.java

The UI consists of a MainWindow which is made up by different components such as StatusBarFooter, FeedbackDisplayBox, CommandBox as well as variants Panels and Cards. All these components, including the MainWindow, inherit from the abstract UiPart class.

The UI component uses JavaFx UI framework. The layout of these UI parts are defined in matching .fxml files that are in the src/main/resources/view folder. For example, the layout of the MainWindow is specified in MainWindow.fxml

The UI component
  • Interacts with user in an interactive process with the help of Logic component.

    • CommandBox collects the user keyboard input.

    • Logic parses user input in each interaction and executes the command subsequently if the interaction ends without any exception.

    • FeedbackDisplayBox responses system information to user, such as error message and command execution result.

      • When invalid input received, proper message will respond via FeedbackDisplayBox. The interaction of the command will not be terminated, user can continue with the process with valid input.

  • Listens for changes to Model data so that the UI can be updated simultaneously.

    • All Cards components and CalenderPanel, ModuleListPanel, ProductivityPanel and TaskSummaryPanel will listen to the changes to Model data.

The command execution will only terminate in two scenarios:
1. When the command is successfully executed.
2. When the user enter quit and enter to exit the execution. === Interactive Command Process Feature

Implementation

  1. Feature introduction

    The Interactive Command Process Feature allows user to execute his/her command in an interactive way.

  2. Implementation detail

    This feature applies on all commands provided by Study Buddy and is implemented using:

    1. The CommandBox from UI component to collect user input and init an associate interactivePrompt

    2. The InteractivePrompt from Logic component to parse user input step by step and generate meaningful response message accordingly. It also produces an executable Command from each successful interaction to perform the user’s desired action.

      1. Different types of InteractivePrompt such as AddTaskInteractivePrompt are provided to handel interactions with different purpose.

        AddTaskObjectDiagram
        Figure 24. Object diagram when user add task using interactive command process
      2. Allow user to quit from each step of an interaction using quit (case insensitive) key word. Here is an example of user quiting from add task interactive command process.

        QuitFromInteractionActivityDiagram
        Figure 25. Activity diagram when user quite from add task interactive command process

Example Usage Scenario

Given below is an example usage scenario and how the interactive command process mechanism behaves at each step.

Step 1. The user launches the application for the first time and skips the user guid. By following the hint from UI (i.e. when CommandBox is idle, it should display "Please enter your command here…​"), he can try some random input and hit enter to get the list of available commands.

Step 2. The user picks a command from the list and type it in the CommandBox. The guide information of the next step will display in FeedbackDisplayBox after user press enter.

For some commands there is only one interaction involved, such as help and list. In such a case the application will execute the command right after user press enter.

Step 3. The user made a typo mistake in the data and time filed when adding a task record. Proper massage with the error type and the correct format of the data and time will be displayed in the FeedbackDisplayBox. User can follow the instruction to continue the interaction.

Step 4. The user is performing an interaction to edit a task, but realized he/she chose a wrong task from the list, he/she can use quit to exit the process without making any changes to the task.

Design Considerations

Aspect: How to react to an invalid input
  • Alternative 1 (current choice): provides relevant error message and stays at current interaction step.

    • If the next input is

      • Invalid: provides the relevant error message and continue waiting for another input.

      • Valid: start next interaction step.

      • quit: quite from the command process.

    • Pros: Save the data from previous stages, especially in add task interaction, thus user no need to repeatedly enter the same information. Also the clear instruction provided by error message makes the interaction more straightforward. Besides, this approach can improve the typo-tolerance of the application.

    • Cons: The interaction can only be stopped when user successfully complete the process or use quit to exit half-way.

  • Alternative 2: Quite from current step with proper error message.

    • Pros: Quit the interaction immediately, which allows user to start with a new interaction. It will be useful when user want to quit from a particular process but forgets the exit command (i.e. quit).

    • Cons: User has to restart the entire interaction process when the he/she enter invalid command. === Task Summary Feature

Implementation

  1. Feature introduction

    The task summary feature automatically summarizes the collected data into different charts. It also allows the user to click on a chart to find the relevant tasks. The UI of the feature is in the Statistics Page.

  2. Implementation detail

    This feature is implemented using JavaFx charts such as PieChart, AreaChart and StackedBarChart, as well as a Task List Panel.

    The Task List Panel is used to show the relevant task records when the user clicks on charts.

  3. Table of Charts & DataBind & OnClick Action

    To improve the readability, only the tasks due or start within the next 60 days will be counted into Area Chart.
    Chart Type Data Used OnClick Action

    PieChart
    {bl} Compare the number of tasks in different statuses.

    {bl} TaskStatus, TaskCount

    Display all tasks with the selected status.

    AreaChar
    {bl} Summarize the task deadlines or start dates for different modules.

    {bl} ModuleCode, Deadline/Start date,
    TaskCount

    Click on area:
    Display tasks under the selected module.
    {bl} Click on data point:
    Display tasks under the selected module and will due or start the chosen date.

    StackedBar Chart
    {bl} Compare the weight of different types of tasks in each module.

    {bl} ModuleCode, TaskType, WeightSum

    Display tasks under the selected module and type.

    TaskSummaryOnClickActivityDiagram
    Figure 26. Sequence diagram for task summary UI update when data change
  4. OnChangeListener

    The feature listens to the change of Model’s UnArchived Task Records, Archived Task Records and Module Records.

    Once a change is captured, the charts will automatically re-render to show the latest statistics.

    Currently, commands as add edit delete sort find archive done list clear etc. can trigger the refresh of the charts.

    TaskSummaryOnDataChangeSequenceDiagram
    Figure 27. Sequence diagram for task summary UI update when data change
    It is possible that the labels of charts can overlap together. This is an unfixed bug regarding the JDK which is caused by JavaFX chart off-sync. To get more information, you may refer to here. When this issue happens, you can use any command that can trigger chart updating to refresh.

Example Usage Scenario

Given below is an example usage scenario and how the task summary mechanism behaves at each step.

Step 1. The user launches the application for the first time, the statistics will perform on top of the sample records, and the result will be visualized into different charts organized in the Tab Panel. After the user clicks Statistics from the top menu bar, the Tab Panel and the Task List Panel will display.

Step 2. The user navigates to the Statistics Page for the first time. The Tab Panel should display the Pie Chart and the Task List Panel is empty with a title: "Click on Chart to View Related Tasks". Indeed, this is how the Statistics Page looks like every time the user navigates back from another Page.

Step 3. The user clicks on Pie Chart 's Pending portion. All tasks in Pending status should display in Task List Panel. Meanwhile, the title of the Panel will change to "PENDING: # Tasks" (# stands for the number of Pending tasks).

Step 4. The user clicks on Area Chart 's CS2101 area. All tasks under CS2101 should display in Task List Panel. Meanwhile, the title of the Panel will change to "Tasks under CS2101".

Step 5. The user executes add command at Statistics Page, the charts should update automatically.

Step 6. The user executes done command at another page, and navigate back to Statistics Page the charts should show the latest statistics.

Design Considerations

Aspect: Will this feature contribute value to CLI user
Consideration

Task Summary feature involves mouse clicking event when user retrieving relevant tasks.

Explanation

The Task Summary Feature provides tow main services:

  1. The automatic statistics of the user input (i.e. the tasks and modules information).

  2. The relevant records retrieving.

The retrieving service is built on top of the statistics result. Meanwhile, the statistics is auto-generated along the way the user managing their records using keyboard input.
Therefore, this feature can make a fast typist be more productive, especially when Study Buddy primarily supports the CLI.

Aspect: How to update charts
  • Alternative 1 (current choice): Use onChangeListener to monitor the data update and re-render the UI simultaneously.

    • Pros: More user-friendly, no need to ask user to manually update.

    • Cons: Might encounter JavaFX chart off-sync bug, and results in label overlapping. But user can always use another command which can trigger data updating to walk around this problem.

  • Alternative 2: Trigger the UI rendering by asking the user to re-launch the application or navigate away and back to the page.