diff --git a/report/4_RequirementsAndAnalysis.tex b/report/4_RequirementsAndAnalysis.tex index e3ce3a6892e57a3f5b87218296087f51ced886c5..3494b2a88dcf1f8af69369732b91c0827f996ed3 100644 --- a/report/4_RequirementsAndAnalysis.tex +++ b/report/4_RequirementsAndAnalysis.tex @@ -6,17 +6,59 @@ This section 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 section to define the interactions between users and the proposed application. + 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 section to define the interactions between users and the proposed application.\\\\ - \begin{figure} + \begin{figure}[h] \center - \includegraphics[height=100mm, width=150mm]{../figures/UseCaseUser} + \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] + \begin{figure} \center - \includegraphics[width=150mm]{../figures/UseCaseInterface} + \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} @@ -199,10 +241,60 @@ This section will analyse the requirements of the proposed application and infor \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 - \includegraphics[width=120mm]{../figures/ActivityDiagramAuthentication} + \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} @@ -210,7 +302,23 @@ This section will analyse the requirements of the proposed application and infor \begin{figure}[!h] \center - \includegraphics[width=120mm]{../figures/ActivityDiagramFormCreation} + \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} @@ -218,7 +326,23 @@ This section will analyse the requirements of the proposed application and infor \begin{figure}[!h] \center - \includegraphics[width=120mm]{../figures/ActivityDiagramFormSharing} + \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} @@ -226,20 +350,60 @@ This section will analyse the requirements of the proposed application and infor \begin{figure}[!h] \center - \includegraphics[width=120mm]{../figures/ActivityDiagramPartnerInvitation} - \caption{Activity Diagram: Partner Invitation} + \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{Model-View-Controller Diagram} + \subsection{Architecture Diagram} - \hfill\break + \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 - \includegraphics[width=155mm]{../figures/MVC} - \caption{MVC Diagram} + \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} \section{Validation} diff --git a/report/master.pdf b/report/master.pdf index f6fb9d958edb01583ef6fd15ded20a93d56664f0..87af01e662abf561a04808cdcb2e91451afa7cc7 100644 Binary files a/report/master.pdf and b/report/master.pdf differ