NUS Contact - Developer Guide

By: Team SE-EDU Since: Jun 2016 Licence: MIT

1. Setting up
2. Design
3. Implementation
4. Documentation
- 4.1. Converting Documentation to PDF format
5. Testing
6. Dev Ops
Appendix A: Suggested Programming Tasks to Get Started
- A.1. Improving each component
- A.2. Creating a new command: remark
Appendix B: User Stories
Appendix C: Use Cases
Appendix D: Non Functional Requirements
Appendix E: Glossary
Appendix F: Product Survey

1. Setting up

1.1. Prerequisites

JDK 1.8.0_60 or later

ℹ️
Having any Java 8 version is not enough.
This app will not work with earlier versions of Java 8.
IntelliJ IDE

ℹ️
IntelliJ by default has Gradle and JavaFx plugins installed.
Do not disable them. If you have disabled them, go to File > Settings > Plugins to re-enable them.

1.2. Setting up the project in your computer

Fork this repo, and clone the fork to your computer
Open IntelliJ (if you are not in the welcome screen, click File > Close Project to close the existing project dialog first)
Set up the correct JDK version for Gradle
1. Click Configure > Project Defaults > Project Structure
2. Click New… and find the directory of the JDK
Click Import Project
Locate the build.gradle file and select it. Click OK
Click Open as Project
Click OK to accept the default settings
Open a console and run the command gradlew processResources (Mac/Linux: ./gradlew processResources). It should finish with the BUILD SUCCESSFUL message.
This will generate all resources required by the application and tests.

1.3. Verifying the setup

Run the seedu.address.MainApp and try a few commands
Run the tests to ensure they all pass.

1.4. Configurations to do before writing code

1.4.1. Configuring the coding style

This project follows oss-generic coding standards. IntelliJ’s default style is mostly compliant with ours but it uses a different import order from ours. To rectify,

Go to File > Settings… (Windows/Linux), or IntelliJ IDEA > Preferences… (macOS)
Select Editor > Code Style > Java
Click on the Imports tab to set the order
- For Class count to use import with '*' and Names count to use static import with '*': Set to 999 to prevent IntelliJ from contracting the import statements
- For Import Layout: The order is import static all other imports, import java.*, import javax.*, import org.*, import com.*, import all other imports. Add a <blank line> between each import

Optionally, you can follow the UsingCheckstyle.adoc document to configure Intellij to check style-compliance as you write code.

1.4.2. Updating documentation to match your fork

After forking the repo, links in the documentation will still point to the se-edu/addressbook-level4 repo. If you plan to develop this as a separate product (i.e. instead of contributing to the se-edu/addressbook-level4) , you should replace the URL in the variable repoURL in DeveloperGuide.adoc and UserGuide.adoc with the URL of your fork.

1.4.3. Setting up CI

Set up Travis to perform Continuous Integration (CI) for your fork. See UsingTravis.adoc to learn how to set it up.

Optionally, you can set up AppVeyor as a second CI (see UsingAppVeyor.adoc).

ℹ️	Having both Travis and AppVeyor ensures your App works on both Unix-based platforms and Windows-based platforms (Travis is Unix-based and AppVeyor is Windows-based)

1.4.4. Getting started with coding

When you are ready to start coding,

Get some sense of the overall design by reading the Architecture section.
Take a look at the section Suggested Programming Tasks to Get Started.

2. Design

2.1. Architecture

Figure 2.1.1 : Architecture Diagram

The Architecture Diagram given above explains the high-level design of the App. Given below is a quick overview of each component.

💡	The `.pptx` files used to create diagrams in this document can be found in the diagrams folder. To update a diagram, modify the diagram in the pptx file, select the objects of the diagram, and choose `Save as picture`.

Main has only one class called MainApp. It is responsible for,

At app launch: Initializes the components in the correct sequence, and connects them up with each other.
At shut down: Shuts down the components and invokes cleanup method where necessary.

Commons represents a collection of classes used by multiple other components. Two of those classes play important roles at the architecture level.

EventsCenter : This class (written using Google’s Event Bus library) is used by components to communicate with other components using events (i.e. a form of Event Driven design)
LogsCenter : Used by many classes to write log messages to the App’s log file.

The rest of the App consists of four components.

UI : The UI of the App.
Logic : The command executor.
Model : Holds the data of the App in-memory.
Storage : Reads data from, and writes data to, the hard disk.

Each of the four components

Defines its API in an interface with the same name as the Component.
Exposes its functionality using a {Component Name}Manager class.

For example, the Logic component (see the class diagram given below) defines it’s API in the Logic.java interface and exposes its functionality using the LogicManager.java class.

Figure 2.1.2 : Class Diagram of the Logic Component

Events-Driven nature of the design

The Sequence Diagram below shows how the components interact for the scenario where the user issues the command delete 1.

Figure 2.1.3a : Component interactions for delete 1 command (part 1)

ℹ️	Note how the `Model` simply raises a `AddressBookChangedEvent` when the Address Book data are changed, instead of asking the `Storage` to save the updates to the hard disk.

The diagram below shows how the EventsCenter reacts to that event, which eventually results in the updates being saved to the hard disk and the status bar of the UI being updated to reflect the 'Last Updated' time.

Figure 2.1.3b : Component interactions for delete 1 command (part 2)

ℹ️	Note how the event is propagated through the `EventsCenter` to the `Storage` and `UI` without `Model` having to be coupled to either of them. This is an example of how this Event Driven approach helps us reduce direct coupling between components.

The sections below give more details of each component.

2.2. UI component

Figure 2.2.1 : Structure of the UI Component

API : Ui.java

The UI consists of a MainWindow that is made up of parts e.g.CommandBox, ResultDisplay, PersonListPanel, PersonInformationPanel, StatusBarFooter, BrowserPanel etc. All these, 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,

Executes user commands using the Logic component.
Binds itself to some data in the Model so that the UI can auto-update when data in the Model change.
Responds to events raised from various parts of the App and updates the UI accordingly.

2.3. Logic component

Figure 2.3.1 : Structure of the Logic Component

Figure 2.3.2 : Structure of Commands in the Logic Component. This diagram shows finer details concerning XYZCommand and Command in Figure 2.3.1

API : Logic.java

Logic uses the AddressBookParser class to parse the user command.
This results in a Command object which is executed by the LogicManager.
The command execution can affect the Model (e.g. adding a person) and/or raise events.
The result of the command execution is encapsulated as a CommandResult object which is passed back to the Ui.

Given below is the Sequence Diagram for interactions within the Logic component for the execute("delete 1") API call.

Figure 2.3.1 : Interactions Inside the Logic Component for the delete 1 Command

2.4. Model component

Figure 2.4.1 : Structure of the Model Component

API : Model.java

The Model,

stores a UserPref object that represents the user’s preferences.
stores the Contact Book data.
exposes an unmodifiable ObservableList<ReadOnlyPerson> that can be 'observed' e.g. the UI can be bound to this list so that the UI automatically updates when the data in the list change.
does not depend on any of the other three components.

2.5. Storage component

Figure 2.5.1 : Structure of the Storage Component

API : Storage.java

The Storage component,

can save UserPref objects in json format and read it back.
can save the Contact Book data in xml format and read it back.

2.6. Common classes

Classes used by multiple components are in the seedu.addressbook.commons package.

3. Implementation

3.1. Person Information Panel

The person information panel is created using javafx. It should display detailed information of a person when the person is selected from the person list panel. Before any person is selected, the person information panel should be blank.

The event of the selection of a person is registered using the Event Bus system.

The tags and various information of the person are bound to the information in PersonCard with the method bindListeners, so whenever the information updates, the information displayed in the Person Information Panel will change too.

The following shows the usage of the person information panel:

Before selecting a person:

After selecting a person:

The following diagram shows the class diagram for person information panel:

As we can see, it inherits from the UiPart class, and that MainWindow class has access to the panel, which is then displayed in the GUI.

3.2. Undo/Redo mechanism

The undo/redo mechanism is facilitated by an UndoRedoStack, which resides inside LogicManager. It supports undoing and redoing of commands that modifies the state of the address book (e.g. add, edit). Such commands will inherit from UndoableCommand.

UndoRedoStack only deals with UndoableCommands. Commands that cannot be undone will inherit from Command instead. The following diagram shows the inheritance diagram for commands:

As you can see from the diagram, UndoableCommand adds an extra layer between the abstract Command class and concrete commands that can be undone, such as the DeleteCommand. Note that extra tasks need to be done when executing a command in an undoable way, such as saving the state of the Contact Book before execution. UndoableCommand contains the high-level algorithm for those extra tasks while the child classes implements the details of how to execute the specific command. Note that this technique of putting the high-level algorithm in the parent class and lower-level steps of the algorithm in child classes is also known as the template pattern.

Commands that are not undoable are implemented this way:

public class ListCommand extends Command {
    @Override
    public CommandResult execute() {
        // ... list logic ...
    }
}

With the extra layer, the commands that are undoable are implemented this way:

public abstract class UndoableCommand extends Command {
    @Override
    public CommandResult execute() {
        // ... undo logic ...

        executeUndoableCommand();
    }
}

public class DeleteCommand extends UndoableCommand {
    @Override
    public CommandResult executeUndoableCommand() {
        // ... delete logic ...
    }
}

Suppose that the user has just launched the application. The UndoRedoStack will be empty at the beginning.

The user executes a new UndoableCommand, delete 5, to delete the 5th person in the Contact Book. The current state of the Contact Book is saved before the delete 5 command executes. The delete 5 command will then be pushed onto the undoStack (the current state is saved together with the command).

As the user continues to use the program, more commands are added into the undoStack. For example, the user may execute add n/David … to add a new person.

ℹ️	If a command fails its execution, it will not be pushed to the `UndoRedoStack` at all.

The user now decides that adding the person was a mistake, and decides to undo that action using undo.

We will pop the most recent command out of the undoStack and push it back to the redoStack. We will restore the Contact Book to the state before the add command executed.

ℹ️	If the `undoStack` is empty, then there are no other commands left to be undone, and an `Exception` will be thrown when popping the `undoStack`.

The following sequence diagram shows how the undo operation works:

The redo does the exact opposite (pops from redoStack, push to undoStack, and restores the Contact Book to the state after the command is executed).

ℹ️	If the `redoStack` is empty, then there are no other commands left to be redone, and an `Exception` will be thrown when popping the `redoStack`.

The user now decides to execute a new command, clear. As before, clear will be pushed into the undoStack. This time the redoStack is no longer empty. It will be purged as it no longer make sense to redo the add n/David command (this is the behavior that most modern desktop applications follow).

Commands that are not undoable are not added into the undoStack. For example, list, which inherits from Command rather than UndoableCommand, will not be added after execution:

The following activity diagram summarize what happens inside the UndoRedoStack when a user executes a new command:

3.2.1. Design Considerations

Aspect: Implementation of UndoableCommand
Alternative 1 (current choice): Add a new abstract method executeUndoableCommand()
Pros: We will not lose any undone/redone functionality as it is now part of the default behaviour. Classes that deal with Command do not have to know that executeUndoableCommand() exist.
Cons: Hard for new developers to understand the template pattern.
Alternative 2: Just override execute()
Pros: Does not involve the template pattern, easier for new developers to understand.
Cons: Classes that inherit from UndoableCommand must remember to call super.execute(), or lose the ability to undo/redo.

Aspect: How undo & redo executes
Alternative 1 (current choice): Saves the entire Contact Book.
Pros: Easy to implement.
Cons: May have performance issues in terms of memory usage.
Alternative 2: Individual command knows how to undo/redo by itself.
Pros: Will use less memory (e.g. for delete, just save the person being deleted).
Cons: We must ensure that the implementation of each individual command are correct.

Aspect: Type of commands that can be undone/redone
Alternative 1 (current choice): Only include commands that modifies the Contact Book (add, clear, edit).
Pros: We only revert changes that are hard to change back (the view can easily be re-modified as no data are lost).
Cons: User might think that undo also applies when the list is modified (undoing filtering for example), only to realize that it does not do that, after executing undo.
Alternative 2: Include all commands.
Pros: Might be more intuitive for the user.
Cons: User have no way of skipping such commands if he or she just want to reset the state of the Contact Book and not the view.
Additional Info: See our discussion here.

Aspect: Data structure to support the undo/redo commands
Alternative 1 (current choice): Use separate stack for undo and redo
Pros: Easy to understand for new Computer Science student undergraduates to understand, who are likely to be the new incoming developers of our project.
Cons: Logic is duplicated twice. For example, when a new command is executed, we must remember to update both HistoryManager and UndoRedoStack.
Alternative 2: Use HistoryManager for undo/redo
Pros: We do not need to maintain a separate stack, and just reuse what is already in the codebase.
Cons: Requires dealing with commands that have already been undone: We must remember to skip these commands. Violates Single Responsibility Principle and Separation of Concerns as HistoryManager now needs to do two different things.

3.3. Logging

We are using java.util.logging package for logging. The LogsCenter class is used to manage the logging levels and logging destinations.

The logging level can be controlled using the logLevel setting in the configuration file (See Configuration)
The Logger for a class can be obtained using LogsCenter.getLogger(Class) which will log messages according to the specified logging level
Currently log messages are output through: Console and to a .log file.

Logging Levels

SEVERE : Critical problem detected which may possibly cause the termination of the application
WARNING : Can continue, but with caution
INFO : Information showing the noteworthy actions by the App
FINE : Details that is not usually noteworthy but may be useful in debugging e.g. print the actual list instead of just its size

3.4. Configuration

Certain properties of the application can be controlled (e.g App name, logging level) through the configuration file (default: config.json).

3.5. Custom Field

3.5.1. Custom Field Model

A UniqueCustomFieldList Class is created which contains a list to store a person’s Custom Fields.

Each person can have multiple custom fields which are optional. Example of custom fields include nickname, favourite food, relatives etc.

Each custom field of a person includes two variables: the custom field name and the custom field value. For example, nickname is a custom field name whereas Ahchuang is a custom field value. (i.e. Ahchuang is the nickname of the person)

3.5.2. Custom Field Logic

A Command - CustomCommand - is used to manipulate the custom fields of a person. The CustomCommand is an undoable command.

When a new CustomCommand is created, it will be constructed with 3 parameters: Index, String, String. The 3 parameters represents the index of the person in the Contact Book, a custom field name and a custom field value respectively. CustomCommand can be undo therefore it inherits the UndoableCommand.

If the input custom field name of the person is not existed yet, the custom field with name and value as inputs will be created and added into the person’s UniqueCustomFieldList.
For example, command custom 1 Nickname Ahchuang will add a nickname custom field with value "Ahchuang" for the first person in the Contact Book if nickname field previously does not exist.
Else if the input custom field name of the person has already existed and the input custom field value is not empty, the custom field value of that custom field for the person will be replaced with the input value.
For example, command custom 1 Nickname Jon will change the nickname custom field of the first person from his previous nickname to "Jon".
Else if the input custom field value is empty, the custom field of the person will be cleared.
For example, command custom 1 Nickname will clear the nickname custom field of the first person in the Contact Book.

3.5.3. Custom Field Storage

New XmlAdaptedCustomField class is created which allows the CustomField object in Model to be adapted as Xml values.
New XmlElement customised is defined in XmlAdaptedPerson class to allow storage of custom fields into a list. image::CustomFieldStorageComponentClassDiagram.png[width="800"]

3.5.4. Custom Field Ui

There are two Labels constructed for every CustomField, one for displaying custom field name, the other for displaying custom field value. image::CustomFieldDisplayDiagram.png[width="450"] In the above diagram, there are two custom fields for the person named "Alex Yeoh": "Birthday" and "Nickname".
For each custom fields, there are two Label - The first custom field has one Label for custom field name "Birthday" and one Label for custom field value "11/02/1998"; the second custom field has one Label for custom field name "Nickname" and one Label for custom field value "Ah_Lex".

3.5.5. Sequence Diagram

3.5.6. Design Consideration

Aspect: The way to display custom fields
Alternative 1 (current choice): Construct two labels - one for custom field name and the other for custom field value. The labels of every person are put in a VBox which is then put in a ScrollPane.
Pros: Custom field names and custom field values are separated and hence they can have proper indentation. Moreover, as a ScrollPane is used, when there are many CustomFields, the user can just scroll down to view all information.
Cons: More work to code for extra attributes such as constructing Labels.
Alternative 2: Overwrite the toString() method in UniqueCustomFieldList to include all custom field names and custom field values of each CustomField in the list, and display the UniqueCustomFieldList by using just one Label
Pros: Easy to code as only one Label is needed to display all custom fields
Cons: Increase coupling and custom field names and custom field values cannot be indented properly.

3.6. Upload photo

3.6.1. Model

A Photo class is created and added as an attribute to the Person class to store the icon photo of each person.
The Photo class has one String attribute - "pathname" - stores the path to the photo image.
When a person is just created without any input pathname for image, a Photo object will be created with the default constructor being called.
The default constructor will initialise the "pathname" attribute to be the path of the default_photo.png.

3.6.2. Logic

A Command - UploadPhotoCommand - is used to manipulate the icon photo of a person.
The UploadPhotoCommand is an undoable command and therefore it inherits UndoableCommand.

When a new Photo is created, it will be constructed with 2 parameters: Index, String. The 2 parameters represents the index of the person in the Contact Book, the path of the photo image intended to upload respectively.

If the icon photo of the person is previously the default photo, a photo with input path will be created and added into the person’s Photo attribute.
For example, command upload 1 D:\Git Projects\wolf.jpg will add a photo image with path "D:\Git Projects\wolf.jpg" for the first person in the Contact Book if photo icon previously is the default.
Else if the icon photo of the person has already existed and is not the defaulted, the icon photo of the person will be replaced with the input value.
For example, command upload 1 D:\Git Projects\wolf.jpg will update the icon photo of the person to the photo with path "D:\Git Projects\wolf.jpg".
Else if the input photo path is empty, the icon photo of the person will be reset to the default photo.
For example, command upload 1 will reset the icon photo of the first person to the default photo in the Contact Book.

3.6.3. Storage

New XML value Photo is created in XmlAdaptedPerson class to allow the storing of icon photo path for each person.

3.6.4. Ui

Image of the icon photo for each person is display on the respective PersonListCard in the PersonListPanel. image::PhotoDisPlayDiagram.png[width="400"]

3.6.5. Sequence Diagram

3.7. DeleteByName

A Command - DeleteByName Command is created to serve the purpose of deleting an contact from the Contact book via its name.
The Command takes into a String as the parameter which represents the Name of the person that is intended to delete.
When the command is called, the Contact Book will loop through the internal list of all persons and check through the Name attribute of each person.
If there is a person with name equals to the parameter input, the person will be removed from the Contact Book.
If the input name does not match any Name in the internal list of all Person objects, the internal list will not be modified but the Result Box will feedback to users that the person name is not found.

image::BeforeDeleteByNameDiagram.png For example, referring to the above diagram, originally there is a person named Alex Yeoh, after executing "DeleteByName Alex Yeoh", the person is removed as shown in the below diagram. image::AfterDeleteByNameDiagram.png

If the person named Alex Yeoh does not exist, executing "DeleteByName Alex Yeoh" will not modify the Contact Book but receive a message as shown in the below diagram. image::InvalidDeleteByNameDiagram.png

3.8. The search box

Efficient search via the search box is facilitated in UI and Logic components.

3.8.1. UI

The mark-up for search box is SearchBox.fxml, which just describes a Javafx Textfield. This mark-up is hooked with SearchBox.java.

At program initialisation, along with other components, UI is started with UiManager.java which constructs a MainWindow. MainWindow#fillInnerParts() is called to construct all visual sections of the UI, including SearchBox.

SearchBox is constructed with awareness of Logic, similar to CommandBox. At construction time of SearchBox, a buffer string is initialised to empty and is ready to store the current user input on the search bar.

Each time a user types an alphanumeric character, a KeyTypedEvent is generated which is captured by the handler handleKeyTyped(). The character is concatenated to the buffer string and passed to logic component and executed using Logic#executeSearch(String).

If a user hits backspace, situation differs according to OS. If MacOS is used, a KeyPressedEvent is generated and captured in handleKeyPress(). The handler deletes the last character in the buffer string using Substring() and passes the resulting buffer string to logic for processing. If Windows is used, because backspace returns a unicode character which would generate both KeyPressedEvent and KeyTypedEvent that results in double deletion, only KeyTypedEvent is used to handle user input. Because the application is Windows constrained, this is handled in the Windows way. The code snippet for handle user input is as follows:

// If Mac is used, a separate handleKeyPress() is needed
    private void handleKeyTyped(KeyEvent keyEvent) {
        String s = keyEvent.getCharacter();
        if (isDeleteOrBackspace(s)) {
            if (!searchBuffer.isEmpty()) {
                searchBuffer = searchBuffer.substring(0, searchBuffer.length() - 1);
            } else {
                return;
            }
        } else {
            searchBuffer = searchBuffer + s;
        }
    }

3.8.2. Logic

You are expected to have read 2.3 logic component (especially the class diagram) before you could understand this part.

Like CommandBox, SearchBox has the same logic component to execute query words. Different from logic#execute() that executes commands, a dedicated method executeSearch() is used to handle requests from UI component.

A separate parser SearchParser is implemented in the same level of abstraction as AddressBookParser, and would return a Command like AddressbookParser does. What is different is SearchParser returns SearchCommand(Predicate) or a ListCommand(), depending on whether the searchText is empty - empty search word is interpreted as listing all persons.

SearchCommand is the same abstraction as FindCommand, except for a different predicate NamePhoneTagContainsKeywordsPredicate. This long predicate tests the person list in Model for name, phone and tag one by one, and would update the filtered person list once there is a match.

3.8.3. Sequence diagram

3.8.4. Design considerations

Aspect: parsing search text
Alternative 1 (current choice): dedicated parser for search text
Pros: modularity, ease of implementation
Cons: added complexity of abstraction for parsing at the highest level, decreases cohesion.
Alternative 2: integrate search parsing to AddressBookparser using a flag
Pros: cohesion maintained
Cons: modularity compromised, harder to implement a second parameter in original parser; heterogeneous nature of inputs between CommandBox and SearchBox calls for more modular parsing.

Aspect: execution of search command
Alternative 1 (current choice): dedicated execution in Logic interface with independent executeSearch() method
Pros: modularity, ease of implementation and maintenance
Cons: decrease cohesion of Logic component slightly
Alternative 2: integrate into execute() method using a flag
Pros: cohesion in execute() is maintained
Cons: modularity compromised, can envision the method getting larger as more features are integrated as flags.

3.9. A more powerful `edit`

The old edit command could only edit one contact at a time, and when tags need to be refreshed with t/ it will replace all tags with user input. The new edit command gets rid of these inconveniences by supporting multiple-contact edit, and addition and removal of tags without replacing. An advantage of combining these features with the search box is that user now can group and search contacts easily.

3.9.1. Multiple contacts edit - parsing and execution

With reference to figure 2.3.1, the sequence diagram for Logic component, user input identified as edit will go through EditCommandParser. Input validation contains the step of parsing ONE index using a specially tokenized String using variable delimiters (details in class ArgumentTokenizer). Delimiters are stored in argMultimap as keys, and arguments in between delimiters as values:

// gerPreamble() gets the argument before the legitimate delimiters, which would be the index, e.g. the "1" in
"edit 1 n/foo"
Index index;
index = ParserUtil.parseIndex(argMultimap.getPreamble());

To parse multiple indices parseIndex() is invoked several times on a further tokenized String[] :

List<Index> indices = new ArrayList<>();
preambles = argMultimap.getPreamble().split(" +");
for (String preamble: preambles) {
    indices.add(ParserUtil.parseIndex(preamble));
}

The list of indices is then sent to EditCommand, in which it is looped to perform multiple updates in Model.

3.9.2. Add/remove tags instead of replacement

when edit 1 t/sth is input, an EditPersonDescriptor is instantiated to describe the editedPerson. This information is then compared with the personToEdit in EditCommand to create an editedPerson used to update the Model. During the comparison the original tags are not preserved:

//updated tags will be just the new tags in the descriptor, unless user does not specify.
Set<Tag> updatedTags = editPersonDescriptor.getTags().orElse(personToEdit.getTags());

In the new version, this mechanism is altered to manage tags added in and tags removed:

public static void updateTags(Set<Tag> updatedTags, EditPersonDescriptor editPersonDescriptor) {
    editPersonDescriptor.getTagsToAdd().ifPresent(tagsToAdd -> {
        if (tagsToAdd.isEmpty()) {
            updatedTags.clear();
        }
    });

    //clear when tags to remove is empty too

    //use addAll and removeAll to consolidate old and new sets of tags without throwing away the old tags.
    editPersonDescriptor.getTagsToAdd().ifPresent(updatedTags::addAll);
    editPersonDescriptor.getTagsToRemove().ifPresent(updatedTags::removeAll);
}

3.10. Multiple phone numbers supported

(launched in V1.3)

3.10.1. Motivation

NUS includes a large proportion of international students, who may need to save more than one numbers so that they can contact their friends locally as well as overseas. To cater to this need, our Contact Book will support the users to add multiple phone numbers for each person in the Contact Book.

3.10.2. Model

UniquePhoneList Classes are created for each person to store the person’s additional phone numbers. A person has a primary phone number and a list of additional numbers. Primary phone number and additional numbers are stored separately. Primary number is saved directly as an attribute in Person while additional numbers are save in the UniquePhoneList. UniquePhoneList is a list of Phone object. It can be empty if the person does not have additional numbers. Primary phone number must not be null.

3.10.3. Logic

PhoneCommand is created to add/remove additional phone numbers.

We support two different formats for a user to call PhoneCommand. They can choose to use whichever format that is more convenient for them.

Format 1: using index of the person
The command will be updatePhone INDEX [ACTION] [PHONE_NUMBER]. The INDEX here will be the index of the person in the Contact Book. [ACTION] will be either add or remove. * Example: updatePhone 1 add 83060774. As such, the additional phone number will be added to the UniquePhoneList of the first person in the Contact Book if it does not cause duplicate phone numbers.

Format 2: using name of the person
The command will be updatePhone byName [ACTION] [PHONE_NUMBER] [NAME]. The INDEX here will be the index of the person in the Contact Book. [ACTION] will be either add or remove. [NAME] has to be the full name which is saved to the Contact Book before. * Example: updatePhone byName add 83060774 Alex Yeo. As such, the additional phone number will be added to the UniquePhoneList of Alex Yeo if it does not cause duplicate phone numbers.

We first use PhoneCommandParser to parse the input String command and we use two overloaded constructors to construct a PhoneCommand object for each format.

For add, we will add the phone to the uniquePhoneList and check for duplicate.

For remove, we will loop through the uniquePhoneList and remove this phone and check for NoPhoneFoundException.

Sequence Diagram

3.10.4. Storage

New XML element for UniquePhoneList and new XmlAdaptedPhone class with XML value Phone are created to allow the storage for UniquePhoneList and optional phones.

3.10.5. Ui

All the additional phone numbers in the UniquePhoneList will be displayed on the PersonalInformationPanel.

After each command, the result will be show in the ResultDisplay box.

If add is successful, the following message will be on the ResultDisplay box.

If add fails due to duplicate number, the following error message will be shown to users.

If remove is successful, the following message will be on the ResultDisplay box.

If remove fails due to number cannot be found, the following error message will be shown to users.

3.10.6. Design Consideration

Aspect: how to store and update the additional phone numbers
Alternative 1 (current choice): create a UniquePhoneList class as a person’s attribute to store his/her additional phone numbers
Pros: By using ObservableList<Phone> as an attribute, we can use the existing methods of the ObservableList to manipulate and maintain the list. As such, we can manage the additional phone numbers in a more systematic and easier way. By using the existing methods, we also reduce the duplication of code, hence the program can be more succinct.
Cons: More works involved to code for the extra method. Using ObservableList increase coupling, which can lead to more problems if not properly managed.
Alternative 2: keep all additional phone numbers as attributes of the person directly.
Pros: No extra effort in coding. No issue raised from coupling.
Cons: Very messy when person have too many attributes. Potentially hard to maintain when too many additional phone numbers are added, leading to scalability issue.

Aspect: parsing PhoneCommand
Alternative 1 (current choice): User can identify the target person by either INDEX or NAME
Pros: Increased flexibility and convenience for users. He/she does not have to search through the list to get the INDEX of the target person to update the phone number as long as he/she can remember the name.
Cons: Extra work on writing code to support both formats in PhoneCommandParser and PhoneCommand. Overloading is used, which may be new to the new programmers.
Alternative 2: only support INDEX.
Pros: Easier to code.
Cons: Less convenient for the users.

3.11. Weather Forecast Display Mechanism

3.11.1. Motivation

According to NUS Housing website, more than 50% of the NUS students do not live on campus. Hence, showing weather report on the statusBarFooter will come in handy since they can instantly get the weather report of the day while checking the Contact Book.

3.11.2. UI

Once open the Contact book, the weather forecast will be shown on the statusBarFooter.

If there is internet connection to the device, then the weather forecast of the current day will be shown in the format of WEATHER TEMPERATURE DATE LOCATION. A example is attached below.

If there is currently no internet connection, then we will show a default message shown as below.

3.11.3. Design Consideration and implementation

Aspect: retrieving weather forecast
Current choice: We use an external library "yahoo-weather-java-api:2.0.2" to query data from Yahoo Weather API and retrieve the weather information using the channel created by the external library. Then we parse the weather report, retaining only the relevant information to make the weather report succinct and then display the information on the StatusFooterBar.
Pros: Able to extract the weather report directly from Yahoo using this externally library. Less code to write.
Cons: This feature is highly dependent on the Yahoo Weather server. Increased coupling. This show weather report will not work if the Yahoo Weather Server is down or there is simply no internet connection.

Aspect: UI
Alternative 1 (current choice): Display the weather information on the statusBarFooter.
Pros: Users can see the weather report instantly when they open the Contact Book, without having to go through the trouble to use command to search or click open a new window.
Cons: Unable to show a detailed weather report due to the limited space on the statusBarFooter.
Alternative 2: Display on a new window when search for command word/click open the window.
Pros: More detailed report available.
Cons: Inconvenient and slow.

4. Documentation

We use asciidoc for writing documentation.

ℹ️

We chose asciidoc over Markdown because asciidoc, although a bit more complex than Markdown, provides more flexibility in formatting. === Editing Documentation See UsingGradle.adoc to learn how to render .adoc files locally to preview the end result of your edits. Alternatively, you can download the AsciiDoc plugin for IntelliJ, which allows you to preview the changes you have made to your .adoc files in real-time. === Publishing Documentation

See UsingTravis.adoc to learn how to deploy GitHub Pages using Travis.

4.1. Converting Documentation to PDF format

We use Google Chrome for converting documentation to PDF format, as Chrome’s PDF engine preserves hyperlinks used in webpages.

Here are the steps to convert the project documentation files to PDF format.

Follow the instructions in UsingGradle.adoc to convert the AsciiDoc files in the docs/ directory to HTML format.
Go to your generated HTML files in the build/docs folder, right click on them and select Open with → Google Chrome.
Within Chrome, click on the Print option in Chrome’s menu.
Set the destination to Save as PDF, then click Save to save a copy of the file in PDF format. For best results, use the settings indicated in the screenshot below.

Figure 5.6.1 : Saving documentation as PDF files in Chrome

5. Testing

5.1. Running Tests

There are three ways to run tests.

💡	The most reliable way to run tests is the 3rd one. The first two methods might fail some GUI tests due to platform/resolution-specific idiosyncrasies.

Method 1: Using IntelliJ JUnit test runner

To run all tests, right-click on the src/test/java folder and choose Run 'All Tests'
To run a subset of tests, you can right-click on a test package, test class, or a test and choose Run 'ABC'

Method 2: Using Gradle

Open a console and run the command gradlew clean allTests (Mac/Linux: ./gradlew clean allTests)

ℹ️	See UsingGradle.adoc for more info on how to run tests using Gradle.

Method 3: Using Gradle (headless)

Thanks to the TestFX library we use, our GUI tests can be run in the headless mode. In the headless mode, GUI tests do not show up on the screen. That means the developer can do other things on the Computer while the tests are running.

To run tests in headless mode, open a console and run the command gradlew clean headless allTests (Mac/Linux: ./gradlew clean headless allTests)

5.2. Types of tests

We have two types of tests:

GUI Tests - These are tests involving the GUI. They include,
1. System Tests that test the entire App by simulating user actions on the GUI. These are in the systemtests package.
2. Unit tests that test the individual components. These are in seedu.address.ui package.
Non-GUI Tests - These are tests not involving the GUI. They include,
1. Unit tests targeting the lowest level methods/classes.
  e.g. seedu.address.commons.StringUtilTest
2. Integration tests that are checking the integration of multiple code units (those code units are assumed to be working).
  e.g. seedu.address.storage.StorageManagerTest
3. Hybrids of unit and integration tests. These test are checking multiple code units as well as how the are connected together.
  e.g. seedu.address.logic.LogicManagerTest

5.3. Troubleshooting Testing

Problem: HelpWindowTest fails with a NullPointerException.

Reason: One of its dependencies, UserGuide.html in src/main/resources/docs is missing.
Solution: Execute Gradle task processResources.

6. Dev Ops

6.1. Build Automation

See UsingGradle.adoc to learn how to use Gradle for build automation.

6.2. Continuous Integration

We use Travis CI and AppVeyor to perform Continuous Integration on our projects. See UsingTravis.adoc and UsingAppVeyor.adoc for more details.

6.3. Making a Release

Here are the steps to create a new release.

Update the version number in MainApp.java.
Generate a JAR file using Gradle.
Tag the repo with the version number. e.g. v0.1
Create a new release using GitHub and upload the JAR file you created.

6.4. Managing Dependencies

A project often depends on third-party libraries. For example, Contact Book depends on the Jackson library for XML parsing. Managing these dependencies can be automated using Gradle. For example, Gradle can download the dependencies automatically, which is better than these alternatives.
a. Include those libraries in the repo (this bloats the repo size)
b. Require developers to download those libraries manually (this creates extra work for developers)

Appendix A: Suggested Programming Tasks to Get Started

Suggested path for new programmers:

First, add small local-impact (i.e. the impact of the change does not go beyond the component) enhancements to one component at a time. Some suggestions are given in this section Improving a Component.
Next, add a feature that touches multiple components to learn how to implement an end-to-end feature across all components. The section Creating a new command: remark explains how to go about adding such a feature.

A.1. Improving each component

Each individual exercise in this section is component-based (i.e. you would not need to modify the other components to get it to work).

`Logic` component

💡	Do take a look at the Design: Logic Component section before attempting to modify the `Logic` component.

Add a shorthand equivalent alias for each of the individual commands. For example, besides typing clear, the user can also type c to remove all persons in the list.
- Hints
  
  Just like we store each individual command word constant COMMAND_WORD inside *Command.java (e.g. FindCommand#COMMAND_WORD, DeleteCommand#COMMAND_WORD), you need a new constant for aliases as well (e.g. FindCommand#COMMAND_ALIAS).
  
  AddressBookParser is responsible for analyzing command words.
- Solution
  
  Modify the switch statement in AddressBookParser#parseCommand(String) such that both the proper command word and alias can be used to execute the same intended command.
  
  See this PR for the full solution.

`Model` component

💡	Do take a look at the Design: Model Component section before attempting to modify the `Model` component.

Add a removeTag(Tag) method. The specified tag will be removed from everyone in the address book.
- Hints
  
  The Model API needs to be updated.
  
  Find out which of the existing API methods in AddressBook and Person classes can be used to implement the tag removal logic. AddressBook allows you to update a person, and Person allows you to update the tags.
- Solution
  
  Add the implementation of deleteTag(Tag) method in ModelManager. Loop through each person, and remove the tag from each person.
  
  See this PR for the full solution.

`Ui` component

💡	Do take a look at the Design: UI Component section before attempting to modify the `UI` component.

Use different colors for different tags inside person cards. For example, friends tags can be all in grey, and colleagues tags can be all in red.

Before

After
- Hints
  
  The tag labels are created inside PersonCard#initTags(ReadOnlyPerson) (new Label(tag.tagName)). JavaFX’s Label class allows you to modify the style of each Label, such as changing its color.
  
  Use the .css attribute -fx-background-color to add a color.
- Solution
  
  See this PR for the full solution.
Modify NewResultAvailableEvent such that ResultDisplay can show a different style on error (currently it shows the same regardless of errors).

Before

After
- Hints
  
  NewResultAvailableEvent is raised by CommandBox which also knows whether the result is a success or failure, and is caught by ResultDisplay which is where we want to change the style to.
  
  Refer to CommandBox for an example on how to display an error.
- Solution
  
  Modify NewResultAvailableEvent 's constructor so that users of the event can indicate whether an error has occurred.
  
  Modify ResultDisplay#handleNewResultAvailableEvent(event) to react to this event appropriately.
  
  See this PR for the full solution.
Modify the StatusBarFooter to show the total number of people in the address book.

Before

After
- Hints
  
  StatusBarFooter.fxml will need a new StatusBar. Be sure to set the GridPane.columnIndex properly for each StatusBar to avoid misalignment!
  
  StatusBarFooter needs to initialize the status bar on application start, and to update it accordingly whenever the address book is updated.
- Solution
  
  Modify the constructor of StatusBarFooter to take in the number of persons when the application just started.
  
  Use StatusBarFooter#handleAddressBookChangedEvent(AddressBookChangedEvent) to update the number of persons whenever there are new changes to the addressbook.
  
  See this PR for the full solution.

`Storage` component

💡	Do take a look at the Design: Storage Component section before attempting to modify the `Storage` component.

Add a new method backupAddressBook(ReadOnlyAddressBook), so that the address book can be saved in a fixed temporary location.
- Hint
  
  Add the API method in AddressBookStorage interface.
  
  Implement the logic in StorageManager class.
- Solution
  
  See this PR for the full solution.

A.2. Creating a new command: `remark`

By creating this command, you will get a chance to learn how to implement a feature end-to-end, touching all major components of the app.

A.2.1. Description

Edits the remark for a person specified in the INDEX.
Format: remark INDEX r/[REMARK]

Examples:

remark 1 r/Likes to drink coffee.
Edits the remark for the first person to Likes to drink coffee.
remark 1 r/
Removes the remark for the first person.

A.2.2. Step-by-step Instructions

[Step 1] Logic: Teach the app to accept 'remark' which does nothing

Let’s start by teaching the application how to parse a remark command. We will add the logic of remark later.

Main:

Add a RemarkCommand that extends UndoableCommand. Upon execution, it should just throw an Exception.
Modify AddressBookParser to accept a RemarkCommand.

Tests:

Add RemarkCommandTest that tests that executeUndoableCommand() throws an Exception.
Add new test method to AddressBookParserTest, which tests that typing "remark" returns an instance of RemarkCommand.

[Step 2] Logic: Teach the app to accept 'remark' arguments

Let’s teach the application to parse arguments that our remark command will accept. E.g. 1 r/Likes to drink coffee.

Main:

Modify RemarkCommand to take in an Index and String and print those two parameters as the error message.
Add RemarkCommandParser that knows how to parse two arguments, one index and one with prefix 'r/'.
Modify AddressBookParser to use the newly implemented RemarkCommandParser.

Tests:

Modify RemarkCommandTest to test the RemarkCommand#equals() method.
Add RemarkCommandParserTest that tests different boundary values for RemarkCommandParser.
Modify AddressBookParserTest to test that the correct command is generated according to the user input.

[Step 3] Ui: Add a placeholder for remark in `PersonCard`

Let’s add a placeholder on all our PersonCard s to display a remark for each person later.

Main:

Add a Label with any random text inside PersonListCard.fxml.
Add FXML annotation in PersonCard to tie the variable to the actual label.

Tests:

Modify PersonCardHandle so that future tests can read the contents of the remark label.

[Step 4] Model: Add `Remark` class

We have to properly encapsulate the remark in our ReadOnlyPerson class. Instead of just using a String, let’s follow the conventional class structure that the codebase already uses by adding a Remark class.

Main:

Add Remark to model component (you can copy from Address, remove the regex and change the names accordingly).
Modify RemarkCommand to now take in a Remark instead of a String.

Tests:

Add test for Remark, to test the Remark#equals() method.

[Step 5] Model: Modify `ReadOnlyPerson` to support a `Remark` field

Now we have the Remark class, we need to actually use it inside ReadOnlyPerson.

Main:

Add three methods setRemark(Remark), getRemark() and remarkProperty(). Be sure to implement these newly created methods in Person, which implements the ReadOnlyPerson interface.
You may assume that the user will not be able to use the add and edit commands to modify the remarks field (i.e. the person will be created without a remark).
Modify SampleDataUtil to add remarks for the sample data (delete your addressBook.xml so that the application will load the sample data when you launch it.)

[Step 6] Storage: Add `Remark` field to `XmlAdaptedPerson` class

We now have Remark s for Person s, but they will be gone when we exit the application. Let’s modify XmlAdaptedPerson to include a Remark field so that it will be saved.

Main:

Add a new Xml field for Remark.
Be sure to modify the logic of the constructor and toModelType(), which handles the conversion to/from ReadOnlyPerson.

Tests:

Fix validAddressBook.xml such that the XML tests will not fail due to a missing <remark> element.

[Step 7] Ui: Connect `Remark` field to `PersonCard`

Our remark label in PersonCard is still a placeholder. Let’s bring it to life by binding it with the actual remark field.

Main:

Modify PersonCard#bindListeners() to add the binding for remark.

Tests:

Modify GuiTestAssert#assertCardDisplaysPerson(…) so that it will compare the remark label.
In PersonCardTest, call personWithTags.setRemark(ALICE.getRemark()) to test that changes in the Person 's remark correctly updates the corresponding PersonCard.

[Step 8] Logic: Implement `RemarkCommand#execute()` logic

We now have everything set up… but we still can’t modify the remarks. Let’s finish it up by adding in actual logic for our remark command.

Main:

Replace the logic in RemarkCommand#execute() (that currently just throws an Exception), with the actual logic to modify the remarks of a person.

Tests:

Update RemarkCommandTest to test that the execute() logic works.

A.2.3. Full Solution

See this PR for the step-by-step solution.

Appendix B: User Stories

Priorities: High (must have) - * * *, Medium (nice to have) - * *, Low (unlikely to have) - *

Priority	As a …	I want to …	So that I can…
`* * *`	new user	see usage instructions	refer to help page whenever I forget how to use the app
`* * *`	user	add a person	record name, phone number, email and address
`* * *`	user	delete a person	discard unwanted contacts
`* * *`	user	find a person by name	locate details of persons without having to go through the entire list
`* * *`	user	add custom fields	store special info about a person e.g. favourite food
`* * *`	user	list contacts in alphabetical order	locate persons more easily
`* * *`	user	edit fields
`* * *`	user	add multiple instances of the same field e.g. multiple phone numbers	do not have to store additional email, phone, etc in a fresh contact
`* * *`	user	add tags to fields	to differentiate characteristics of fields e.g. phone for work, address for business, etc
`* * *`	user	back up the Contact Book (save as…)	know where to look when Contact Book is accidentally deleted
`* *`	user	hide private contact details by default	minimize chance of someone else seeing them by accident
`* *`	user	find a person by phone number	help recognize a person without knowledge of name
`* *`	teacher	list individual fields e.g. phone number	mass message students
`* *`	user	display favorite contacts on top of all contacts	easily reach favorite people
`* *`	user	alternate English and Chinese in a custom field	accommodate to the Chinese population
`* *`	user	list contacts according to custom groups	easily reach a certain group of contacts
`*`	user	add picture as a field	see my contacts' faces
`*`	user	share my Contact Book with others	others can have my list of contacts
`*`	user	search with ambiguous criteria	allow for more margin of error with searches
`*`	user	display frequency of contact information retrieval	know which contacts I visit more frequently
`*`	user	change language of the app	users who only understands Mandarin can also use the app

Appendix C: Use Cases

(For all use cases below, the System is the Contact Book and the Actor is the user, unless specified otherwise)

Use case: Delete person

MSS

User requests to list persons
Contact Book shows a list of persons
User requests to delete a specific person in the list
Contact Book deletes the person

Use case ends.

Extensions

2a. The list is empty.

Use case ends.
3a. The given index is invalid.
- 3a1. Contact Book shows an error message.
  
  Use case resumes at step 2.

Use case: Add person

MSS

User requests to add a person
Contact Book shows an example of add person message
User follows the format and provide all the required fields
Contact Book adds the person

Use case ends.

Extensions

3a. User uses the wrong format.
- 3a1. Contact Book shows an error message.
  
  Use case resumes at step 2.
3b. User didn’t fill in all the required fields
- 3b1. Contact Book shows an error message.
  
  Use case resumes at step 2.

Use case: Find person

MSS

User type in the name of the desired person in the search bar
Contact Book displays the list of matched persons in the panel

Use case ends.

Extensions

3b. Name given by the user is not in the Contact Book
- 3b1. Contact Book displays nothing.
  
  Use case resumes at step 1.

Use case: Change language

MSS

User requests to change language
Contact Book shows a list of language supported
User requests to change to a specific language in the list
Contact Book changes to the chosen language

Use case ends.

Extensions

3a. Language chosen is not in the list
- 3a1. Contact Book shows an error message.
  
  Use case resumes at step 2.

Appendix D: Non Functional Requirements

Should work on any mainstream OS as long as it has Java 1.8.0_60 or higher installed.
Should be able to hold up to 1000 persons without a noticeable sluggishness in performance for typical usage.
A user with above average typing speed for regular English text (i.e. not code, not system admin commands) should be able to accomplish most of the tasks faster using commands than using the mouse.
Should be able to test with a test case more than 1000 persons and more than 1000 commands.
Should be able to use easily by new users by reading the User Guide.
The data shown on the GUI should have a default font size greater than 12 so that it is visible enough.
The efficiency to perform most of the commands, e.g. AddCommand, DeleteCommand and FindCommand should be at least O(n) time.
The application should be put under maintenance every month.
The default background colour of the GUI should not be too garish or too shiny.However, the users can change the background.
Should not be easily hacked, e.g. data corruption, data access by other.
Should be able to change the font type and size easily.
Changes of the Contact Book should be saved in a log file.
UI should be aesthetically pleasing
add, delete, edit and find operation should take no longer than O(log n)

Appendix E: Glossary

Search bar: the upper right-hand-side bar which allows convenient searching
Contact Book: The specific book that the user is using the application on.
Format: The way in which command is entered.
History: Commands entered previously.
Person Information Panel: The panel which a person’s information will be displayed when any person card is clicked.
UI: Short for user interface.
Undo: Restores the application to the state prior to the current state.
GUI: Short for graphical user interface. A user interface that allows users to interact with electronic devices through graphical icons and visual indicators.
Redo: Reverses the undo process.

Mainstream OS

Windows, Linux, Unix, OS-X

Private contact detail

A contact detail that is not meant to be shared with others

Appendix F: Product Survey

Product Name

Author: …

Pros:

…
…

Cons:

…
…

Files

DeveloperGuide.adoc

Latest commit

History

DeveloperGuide.adoc

File metadata and controls

NUS Contact - Developer Guide

1. Setting up

1.1. Prerequisites

1.2. Setting up the project in your computer

1.3. Verifying the setup

1.4. Configurations to do before writing code

1.4.1. Configuring the coding style

1.4.2. Updating documentation to match your fork

1.4.3. Setting up CI

1.4.4. Getting started with coding

2. Design

2.1. Architecture

Events-Driven nature of the design

2.2. UI component

2.3. Logic component

2.4. Model component

2.5. Storage component

2.6. Common classes

3. Implementation

3.1. Person Information Panel

3.2. Undo/Redo mechanism

3.2.1. Design Considerations

3.3. Logging

3.4. Configuration

3.5. Custom Field

3.5.1. Custom Field Model

3.5.2. Custom Field Logic

3.5.3. Custom Field Storage

3.5.4. Custom Field Ui

3.5.5. Sequence Diagram

3.5.6. Design Consideration

3.6. Upload photo

3.6.1. Model

3.6.2. Logic

3.6.3. Storage

3.6.4. Ui

3.6.5. Sequence Diagram

3.7. DeleteByName

3.8. The search box

3.8.1. UI

3.8.2. Logic

3.8.3. Sequence diagram

3.8.4. Design considerations

3.9. A more powerful edit

3.9.1. Multiple contacts edit - parsing and execution

3.9.2. Add/remove tags instead of replacement

3.10. Multiple phone numbers supported

3.10.1. Motivation

3.10.2. Model

3.10.3. Logic

3.10.4. Storage

3.10.5. Ui

3.10.6. Design Consideration

3.11. Weather Forecast Display Mechanism

3.11.1. Motivation

3.11.2. UI

3.11.3. Design Consideration and implementation

4. Documentation

4.1. Converting Documentation to PDF format

5. Testing

5.1. Running Tests

5.2. Types of tests

5.3. Troubleshooting Testing

6. Dev Ops

6.1. Build Automation

6.2. Continuous Integration

6.3. Making a Release

6.4. Managing Dependencies

Appendix A: Suggested Programming Tasks to Get Started

A.1. Improving each component

Logic component

Model component

Ui component

Storage component

3.9. A more powerful `edit`

`Logic` component

`Model` component

`Ui` component

`Storage` component

A.2. Creating a new command: `remark`

[Step 3] Ui: Add a placeholder for remark in `PersonCard`

[Step 4] Model: Add `Remark` class

[Step 5] Model: Modify `ReadOnlyPerson` to support a `Remark` field

[Step 6] Storage: Add `Remark` field to `XmlAdaptedPerson` class

[Step 7] Ui: Connect `Remark` field to `PersonCard`

[Step 8] Logic: Implement `RemarkCommand#execute()` logic