Skip to content
Snippets Groups Projects
3_RequirementsAndAnalysis.tex 21.37 KiB
%% ----------------------------------------------------------------
%% 3_RequirementsAndAnalysis.tex
%% ----------------------------------------------------------------
\chapter{REQUIREMENTS AND ANALYSIS}

This chapter will analyse the requirements of the proposed application and inform the design decisions that have been made.

\section{Use Cases}
    Use cases describe the various interactions between external actors and a given system as part of the Unified Modelling Language (UML). They are used in this chapter to define the interactions between users and the proposed application.\\\\

    \begin{figure}[H]
        \center
        \begin{tikzpicture}
            % components
            \umlactor[x=0, y=-2.5, scale=2]{user}
            \umlusecase[x=-4, y=0, scale=1.25, name=register]{Register}
            \umlusecase[x=-5, y=-1.5, scale=1.25, name=signIn]{Sign In}
            \umlusecase[x=-5, y=-3, scale=1.25, name=addPartner]{Add Partner}
            \umlusecase[x=-4, y=-4.5, scale=1.25, name=createForm]{Create Form}
            \umlusecase[x=-3, y=-6, scale=1.25, name=shareForm]{Share Form}
            \umlusecase[x=3, y=-6, scale=1.25, name=viewForms]{View Forms}
            \umlusecase[x=4, y=-4.5, scale=1.25, name=editForm]{Edit Form}
            \umlusecase[x=5, y=-3, scale=1.25, name=completeForm]{Complete Form}
            \umlusecase[x=5, y=-1.5, scale=1.25, name=receiveNotification]{Receive Notification}
            \umlusecase[x=4, y=0, scale=1.25, name=signOut]{Sign Out}
            % connections
            \umlinherit{user}{register}
            \umlinherit{user}{signIn}
            \umlinherit{user}{addPartner}
            \umlinherit{user}{createForm}
            \umlinherit{user}{shareForm}
            \umlinherit{user}{viewForms}
            \umlinherit{user}{editForm}
            \umlinherit{user}{completeForm}
            \umlinherit{user}{receiveNotification}
            \umlinherit{user}{signOut}
        \end{tikzpicture}
        \caption{Use Case Diagram 1}
    \end{figure}

    \begin{figure}[H]
        \center
        \begin{tikzpicture}
            % components
            \umlusecase[x=-7, y=0, scale=1.25, fill=red!20, name=dashboard]{Dashboard}
            \umlusecase[x=0, y=6, scale=1.25, width=2.5cm, name=displayForms]{Display user's forms}
            \umlusecase[x=2, y=4, scale=1.25, width=2.5cm, name=displaySharedForms]{Display partner's shared forms}
            \umlusecase[x=5, y=2, scale=1.25, width=2.5cm, name=createNewForm]{Create new form button}
            \umlusecase[x=6, y=0, scale=1.25, width=2.5cm, name=shareForm]{Share form button}
            \umlusecase[x=5, y=-2, scale=1.25, width=2.5cm, name=addPartner]{Add partner button}
            \umlusecase[x=2, y=-4, scale=1.25, width=2.5cm, name=myAccount]{My account button}
            \umlusecase[x=0, y=-6, scale=1.25, width=2.5cm, name=editForm]{Sign out button}
            % connections
            \umlinclude{dashboard}{displayForms}
            \umlinclude{dashboard}{displaySharedForms}
            \umlinclude{dashboard}{createNewForm}
            \umlinclude{dashboard}{shareForm}
            \umlinclude{dashboard}{addPartner}
            \umlinclude{dashboard}{myAccount}
            \umlinclude{dashboard}{editForm}
        \end{tikzpicture}
        \caption{Use Case Diagram 2}
    \end{figure}

    \clearpage

    \subsection{Use Case Description}

        The following table explains the major use cases for the application:\\
        \begin{table}[h]
            \centering
            \begin{tabular}{|c|c|}
                \hline
                Use Case & Description\\
                \hline
                \hline
                Display user's forms & \makecell{A list of forms created by the user will be displayed, with\\the form's name, owner and date of last modification.}\\
                \hline
                \makecell{Display partner's\\shared form} & \makecell{A list of forms shared with the user by a partner will be\\displayed, with the form's name, owner and date of\\last modification.}\\
                \hline
                \makecell{Create new\\form button} & Takes the user to a page where they can design a new form.\\
                \hline
                Share form button & \makecell{Allows the user to share forms they have created with partners.}\\
                \hline
                Add partner button & \makecell{Allows the user to search for other people's accounts on\\the application, and add them as partners. This should\\be done with other users that one would wish to share\\ forms with and/or receive forms from.}\\
                \hline
                View account button & \makecell{Allows the user to view their account information and edit\\it if necessary. Details such as name, email, company\\and the abilityto change the account's password.}\\
                \hline
                Sign out button & Allows the user to sign out from the application.\\
                \hline
            \end{tabular}
            \caption{Use Case Descriptions}
        \end{table}


\section{Functional Requirements}
    A functional requirement defines the intended behaviour of a component or part of a system. In the table below, the major functional requirements have been described:\\

    \begin{table}[H]
        \centering
        \begin{tabular}{|c|c|}
            \hline
            Requirement & Description\\
            \hline
            \hline
            Register & \makecell{New users will create an account before being allowed to use\\the application.}\\
            \hline
            Sign in & \makecell{Users will need to log in before they are able to\\access their account, create, share and complete forms.}\\
            \hline
            Create a form & \makecell{Users will be able to create a new form, which will be saved to\\their account.}\\
            \hline
            Share a form & \makecell{Users will be able to share a form that they have created with\\a partner.}\\
            \hline
            Add a partner & \makecell{Users will be able to view and edit their account information,\\including; name, email, company and password (not viewable).}\\
            \hline
            Sign out & Users will be able to sign out of the application.\\
            \hline
            Notifications & \makecell{Users will be notified of various changes, including their partners'\\answers to forms.}\\
            \hline
        \end{tabular}
        \caption{Functional Requirements}
    \end{table}

    \subsection{Functional Requirements Analysis}
        An importance level has been assigned to each of the functional requirements, in order to effectively plan the work to be done in order to create the minimum viable product. An additional table shows how the importance levels have been determined.\\

        \begin{table}[H]
            \centering
            \begin{tabular}{|c||c|c|c|c|c|}
                \hline
                Complexity/Time & Low & Medium & High\\
                \hline
                \hline
                Short & \cellcolor{green}0.0625 & \cellcolor{green}0.125 & \cellcolor{yellow}0.25\\
                \hline
                Medium & \cellcolor{green}0.125 & \cellcolor{yellow}0.25 & \cellcolor{red}0.5\\
                \hline
                Long & \cellcolor{yellow}0.25 & \cellcolor{red}0.5 & \cellcolor{red}0.75\\
                \hline
            \end{tabular}
            \caption{Importance Levels}
        \end{table}

        \begin{table}[H]
            \centering
            \begin{tabular}{|c|c|c|c|}
                \hline
                Requirement & Complexity & Time & Importance Level\\
                \hline
                \hline
                Register & Medium & Short & \cellcolor{green}0.125\\
                \hline
                Log in & Low & Short & \cellcolor{green}0.0625\\
                \hline
                Create a form & Medium & Medium & \cellcolor{yellow}0.25\\
                \hline
                Share a form & High & Medium & \cellcolor{red}0.5\\
                \hline
                Add a partner & Medium & Medium & \cellcolor{yellow}0.25\\
                \hline
                Sign out & Low & Low & \cellcolor{green}0.0625\\
                \hline
                Notifications & Medium & Short & \cellcolor{green}0.125\\
                \hline
            \end{tabular}
            \caption{Functional Requirements Analysis}
        \end{table}


\section{Non-Functional Requirements}
    Non-functional requirements are high-level requirements, that need to be considered during the development decisions for the entire application.\\

    \begin{table}[H]
        \centering
        \begin{tabular}{|c|c|}
            \hline
            Requirement & Description\\
            \hline
            \hline
            Internet connection & \makecell{The application will be hosted online, therefore users will require\\a connection to the internet in order to access the application.}\\
            \hline
            Confidentiality & \makecell{The application will need to keep the personal information of\\ its users safe from third parties and malicious individuals.}\\
            \hline
            Integrity & \makecell{The application must present accurate information in an\\ easy-to-understand format.}\\
            \hline
            Availability & \makecell{The application must be accessible at all times. Loss of\\ Availability could lead to users leaving the application for\\ more reliable competitors.}\\
            \hline
        \end{tabular}
        \caption{Non-Functional Requirements}
    \end{table}


\section{Risk Analysis}
    The following risk analysis has been produced, based on the requirements above and potential risks to the application as a whole. A rating system, similar to that of the importance levels for the functional requirements, has been devised for the risk level.\\

    \begin{table}[H]
        \centering
        \begin{tabular}{|c||c|c|c|c|c|}
            \hline
            Consequence/Likelihood & Negligible & Minor & Moderate & Major & Catastrophic\\
            \hline
            \hline
            Impossible & \cellcolor{green}0 & \cellcolor{green}0 & \cellcolor{green}0 & \cellcolor{green}0 & \cellcolor{green}0\\
            \hline
            Low & \cellcolor{green}0 & \cellcolor{green}0.0625 & \cellcolor{green}0.125 & \cellcolor{green}0.1875 & \cellcolor{yellow}0.25\\
            \hline
            Medium & \cellcolor{green}0 & \cellcolor{green}0.125 & \cellcolor{yellow}0.25 & \cellcolor{yellow}0.375 & \cellcolor{yellow}0.5\\
            \hline
            High & \cellcolor{green}0 & \cellcolor{green}0.1875 & \cellcolor{yellow}0.375 & \cellcolor{red}0.5625 & \cellcolor{red}0.75\\
            \hline
            Certain & \cellcolor{green}0 & \cellcolor{yellow}0.25 & \cellcolor{yellow}0.5 & \cellcolor{red}0.75 & \cellcolor{red}1\\
            \hline
        \end{tabular}
        \caption{Risk Levels}
    \end{table}

    \hfill\break

    \begin{table}[H]
        \centering
        \begin{tabular}{|c|c|c|c|c|c|}
            \hline
            Risk & Likelihood & Consequence & \makecell{Risk\\Rating} & Mitigation\\
            \hline
            \hline
            \makecell{Network\\loss} & High & Minor & \cellcolor{green}0.1875 & Frequent update of database.\\
            \hline
            \makecell{Data\\loss} & Low & Catastrophic & \cellcolor{yellow}0.25 & Redundant database.\\
            \hline
            \makecell{Security\\breach} & Medium & Catastrophic & \cellcolor{yellow}0.5 & \makecell{Follow good practice for secure\\development of cloud applications.}\\
            \hline
            \makecell{Function\\error} & High & Major & \cellcolor{red}0.5625 & \makecell{Implementation of test\\framework to ensure application\\is fully functional.}\\
            \hline
            \makecell{Interface\\error} & High & Major & \cellcolor{red}0.5625 & \makecell{Implementation of test\\framework to ensure application\\is fully functional.}\\
            \hline
        \end{tabular}
        \caption{Risk Analysis}
    \end{table}


\section{Functionality}
    Below is a series of diagrams which describe the flow of some of the primary pieces of functionality in the application. They show the logic behind various aspects of the application, as well as some of the infrastructure that will be in place.

    \pagebreak

    \subsection{Activity Diagrams}

        % Define block styles
        \tikzstyle{entry} = [ellipse, draw, fill=red!20,
                            text centered,
                            minimum height=4em,
                            minimum width=4em,
                            node distance=10em]

        \tikzstyle{block} = [rectangle, draw, fill=blue!20,
                            text centered, text width=7em,
                            minimum height=3em,
                            node distance=12em, rounded corners]

        \tikzstyle{decision} = [diamond, draw, fill=green!20,
                                text badly centered, text width=7em,
                                minimum height=3em,
                                node distance=10em, inner sep=0pt]

        \tikzstyle{database} = [cylinder, draw, fill=yellow!20,
                                text centered, text width=7em,
                                minimum height=3em,
                                node distance=12em, shape border rotate=90, aspect=0.5]

        \tikzstyle{line} = [draw, -latex']

        \begin{figure}[H]
            \center
            \begin{tikzpicture}
                % components
                \node [entry] (start) {};
                \node [decision, right of=start] (signedIn) {User already signed in?};
                \node [block, right of=signedIn] (displayDashboard) {Display Dashboard};
                \node [block, below of=signedIn] (displayRegistrationOrSignIn) {Display registration/sign in interface};
                \node [decision, below of=displayRegistrationOrSignIn] (hasAccount) {User has an account?};
                \node [block, right of=hasAccount] (userRegisters) {User registers};
                \node [database, below of=userRegisters] (newAccount) {New account information stored in database};
                \node [block, left of=hasAccount] (userLogin) {User logs in};
                \node [decision, left of=userLogin] (credentialsValid) {Account credentials valid?};
                \node [block, below of=credentialsValid] (displayDashboard2) {Display Dashboard};
                \node [block, above of=credentialsValid] (errorMessage) {Display error message};
                % connections
                \path [line] (start) -- (signedIn);
                \path [line] (signedIn) -- node {Yes} (displayDashboard);
                \path [line] (signedIn) -- node {No} (displayRegistrationOrSignIn);
                \path [line] (displayRegistrationOrSignIn) -- (hasAccount);
                \path [line] (hasAccount) -- node {No} (userRegisters);
                \path [line] (userRegisters) -- (newAccount);
                \path [line] (newAccount) -| (hasAccount);
                \path [line] (hasAccount) -- node {Yes} (userLogin);
                \path [line] (userLogin) -- (credentialsValid);
                \path [line] (credentialsValid) -- node {Yes} (displayDashboard2);
                \path [line] (credentialsValid) -- node {No} (errorMessage);
                \path [line] (errorMessage) -| (userLogin);
            \end{tikzpicture}
            \caption{Activity Diagram: Authentication}
        \end{figure}

        \pagebreak

        \begin{figure}[H]
            \center
            \begin{tikzpicture}
                % components
                \node [entry] (start) {};
                \node [block, right of=start] (displayDashboard) {Display Dashboard};
                \node [block, right of=displayDashboard] (clickCreate) {User clicks \textquotedblleft Create new form\textquotedblright\ button};
                \node [block, below of=clickCreate] (enterFormDetails) {user enters form details and parameters};
                \node [block, left of=enterFormDetails] (clickSubmit) {User clicks \textquotedblleft Submit\textquotedblright\ button};
                \node [database, left of=clickSubmit] (dataStored) {Form data stored in database};
                \node [block, below of=clickSubmit] (displayDashboard2) {Display Dashboard with new form};
                % connections
                \path [line] (start) -- (displayDashboard);
                \path [line] (displayDashboard) -- (clickCreate);
                \path [line] (clickCreate) -- (enterFormDetails);
                \path [line] (enterFormDetails) -- (clickSubmit);
                \path [line] (clickSubmit) -- (dataStored);
                \path [line] (clickSubmit) -- (displayDashboard2);
            \end{tikzpicture}
            \caption{Activity Diagram: Form Creation}
        \end{figure}

        \pagebreak

        \begin{figure}[H]
            \center
            \begin{tikzpicture}
                % components
                \node [entry] (start) {};
                \node [block, right of=start] (displayDashboard) {Display Dashboard};
                \node [block, right of=displayDashboard] (clickShare) {User clicks \textquotedblleft Share form\textquotedblright\ button};
                \node [block, below of=clickCreate] (selectPartners) {User selects one or more of their partner from a list};
                \node [block, left of=enterFormDetails] (clickSubmit) {User clicks \textquotedblleft Submit\textquotedblright\ button};
                \node [database, left of=clickSubmit] (dataUpdated) {Database updated, forms appear in partners' dashboards};
                \node [block, below of=clickSubmit] (displayDashboard2) {Display Dashboard};
                % connections
                \path [line] (start) -- (displayDashboard);
                \path [line] (displayDashboard) -- (clickShare);
                \path [line] (clickShare) -- (selectPartners);
                \path [line] (selectPartners) -- (clickSubmit);
                \path [line] (clickSubmit) -- (dataUpdated);
                \path [line] (clickSubmit) -- (displayDashboard2);
            \end{tikzpicture}
            \caption{Activity Diagram: Form Sharing}
        \end{figure}

        \pagebreak

        \begin{figure}[H]
            \center
            \begin{tikzpicture}
                % components
                \node [entry] (start) {};
                \node [block, right of=start] (displayDashboard) {Display Dashboard};
                \node [block, right of=displayDashboard] (clickAdd) {User clicks \textquotedblleft Add partner\textquotedblright\ button};
                \node [block, below of=clickCreate] (searchPartner) {User searches for partners from a list};
                \node [block, left of=enterFormDetails] (clickSubmit) {User clicks \textquotedblleft Submit\textquotedblright\ button};
                \node [decision, below of=clickSubmit] (isValid) {Does the user exist?};
                \node [block, left of=isValid] (invitationSent) {Invitation sent to partner accounts};
                \node [database, below of=invitationSent] (databaseUpdated) {Database entry updated with additional partners};
                \node [block, right of=databaseUpdated] (displayDashboard2) {Display Dashboard};
                \node [block, right of=isValid] (errorMessage) {Display error message};
                % connections
                \path [line] (start) -- (displayDashboard);
                \path [line] (displayDashboard) -- (clickAdd);
                \path [line] (clickAdd) -- (searchPartner);
                \path [line] (searchPartner) -- (clickSubmit);
                \path [line] (clickSubmit) -- (isValid);
                \path [line] (isValid) -- node {Yes} (invitationSent);
                \path [line] (invitationSent) -- (databaseUpdated);
                \path [line] (databaseUpdated) -- (displayDashboard2);
                \path [line] (isValid) -- node {No} (errorMessage);
                \path [line] (errorMessage) -- (searchPartner);
            \end{tikzpicture}
            \caption{Activity Diagram: Add Partner}
        \end{figure}

        \pagebreak

    \subsection{Architecture Diagram}

        \hfill\break

        \tikzstyle{component} = [rectangle, draw, fill=blue!20,
                            text centered, text width=7em,
                            minimum height=3em,
                            node distance=12em, rounded corners]

        \begin{figure}[H]
            \center
            \begin{tikzpicture}[to/.style={->,>=stealth',shorten >=1pt,semithick,font=\sffamily\footnotesize}]
                % components
                \node [component] (user) {User};
                \node [component, below of=user] (react) {React Frontend};
                \node [component, left of=react] (firebaseAuth) {Firebase Authentication};
                \node [component, right of=react] (firestore) {Firestore};
                % connections
                \path [line] (user) -- node[near start, right] {1) Action} (react);
                \draw[to] (react)  to[bend right=50] node[midway, above] {2) Request} node[midway, below] {auth token} (firebaseAuth);
                \draw[to] (firebaseAuth) to[bend right=50] node[midway, above] {3) Send} node[midway, below] {auth token} (react);
                \draw[to] (react) to[bend right=50] node[midway, above] {4) Update} node[midway, below] {database} (firestore);
                \draw[to] (firestore) to[bend right=50] node[midway, above] {5) Populate} node[midway, below] {with data} (react);
            \end{tikzpicture}
            \caption{Architecture}
        \end{figure}