diff --git a/report/3_RequirementsAndAnalysis.tex b/report/3_RequirementsAndAnalysis.tex index c24a62f8fb3e01c0f91e8e71f8a79ba19f8db1ea..4b8f11fe883811234dcdabb5b66290112ce19cfd 100644 --- a/report/3_RequirementsAndAnalysis.tex +++ b/report/3_RequirementsAndAnalysis.tex @@ -205,6 +205,19 @@ This chapter analyses the requirements of the proposed application and informs t \end{table} \section{SWOT Analysis} + A Strengths-Weaknesses-Opportunities-Threats or SWOT analysis was established to assess the internal and external factors affecting the project, outlining its potential and actual advantages and impediments. + + \begin{table}[H] + \centering + \begin{tabular}{|c|c|} + \hline + \cellcolor{Green}\makecell{\textbf{Strengths}\\} & \cellcolor{Orange}\makecell{\textbf{Weaknesses}\\}\\ + \hline + \cellcolor{Cyan}\makecell{\textbf{Opportunities}\\} & \cellcolor{Red}\makecell{\textbf{Threats}\\}\\ + \hline + \end{tabular} + \caption{Risk Levels} + \end{table} \section{Muscow Analysis} diff --git a/report/4_Design.tex b/report/4_Design.tex index 392f06e16a72c8da0e41d960ccc5cc7785b81427..5c0867f5bfb47f535bbd86b8cb38659896081164 100644 --- a/report/4_Design.tex +++ b/report/4_Design.tex @@ -31,16 +31,129 @@ The design of the web application will be based on the requirements established \section{User Flows and Wireframes} This section illustrates the application flow from start to finish, similar to flow charts in chapter 3, but with wireframes representing the UI and how each page transitions to another. - \subsection{Wireframes} % 2D outline of single page - TODO: Sign in / Sign up wireframe - - - - TODO: Dashboard wireframe - - TODO: Create a Form wireframe - - TODO: Add a Partner wireframe + \subsection{Wireframes} + + \begin{figure}[H] + \center + \begin{tikzpicture} + \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border + \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header + \node[text=White] at (2, 9) {Menu}; % Menu text + \node[text=White] at (7.5, 9) {CompForge}; % Page title + \node[text=White] at (13, 9) {Welcome!}; % Welcome text + \draw[Black, fill=White] (4, 7) rectangle (11, 1.5); % Sign up form + \node[text=Black] at (7.5, 6.5) {Create an Account}; % Sign up text + \draw[Black, very thin] (5, 5.5) rectangle (10, 5); % Display name input + \draw[Black, very thin] (5, 4.5) rectangle (10, 4); % Email input + \draw[Black, very thin] (5, 3.5) rectangle (10, 3); % Password input + \draw[Black, fill=NavyBlue] (6.5, 2.5) rectangle (8.5, 2); % Create account button + \node[text=White] at (7.5, 2.25) {Create}; % Create text + \end{tikzpicture} + \caption{Wireframe: Register} + \end{figure} + + \begin{figure}[H] + \center + \begin{tikzpicture} + \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border + \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header + \node[text=White] at (2, 9) {Menu}; % Menu text + \node[text=White] at (7.5, 9) {CompForge}; % Page title + \node[text=White] at (13, 9) {Welcome!}; % Welcome text + \draw[Black, fill=White] (4, 7) rectangle (11, 2.5); % Sign in form + \node[text=Black] at (7.5, 6.5) {Sign in}; % Sign in text + \draw[Black, very thin] (5, 5.5) rectangle (10, 5); % Email input + \draw[Black, very thin] (5, 4.5) rectangle (10, 4); % Password input + \draw[Black, fill=NavyBlue] (6.5, 3.5) rectangle (8.5, 3); % Sign in button + \node[text=White] at (7.5, 3.25) {Sign in}; % Sign in text + \end{tikzpicture} + \caption{Wireframe: Sign in} + \end{figure} + + \begin{figure}[H] + \center + \begin{tikzpicture} + \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border + \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header + \node[text=White] at (2, 9) {Menu}; % Menu text + \node[text=White] at (7.5, 9) {CompForge}; % Page title + \node[text=White] at (12, 9) {Welcome [user]!}; % Welcome text + \node[text=White] at (7.5, 7.5) {Form Templates Dashboard}; % Form table title + \draw[Black, fill=White] (1, 7) rectangle (14, 3.5); % Form table + \draw[Black, very thin] (1, 6.5) -- (14, 6.5); % Table rows + \draw[Black, very thin] (1, 5.5) -- (14, 5.5); % Table rows + \draw[Black, very thin] (1, 4.5) -- (14, 4.5); % Table rows + \node[text=White] at (7.5, 2.5) {My Partners}; % Partner table title + \draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table + \draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows + \draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows + \end{tikzpicture} + \caption{Wireframe: Dashboard} + \end{figure} + + \begin{figure}[H] + \center + \begin{tikzpicture} + % Dashboard as background + \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border + \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header + \node[text=White] at (2, 9) {Menu}; % Menu text + \node[text=White] at (7.5, 9) {CompForge}; % Page title + \node[text=White] at (12, 9) {Welcome [user]!}; % Welcome text + \node[text=White] at (7.5, 7.5) {Form Templates Dashboard}; % Table title + \draw[Black, fill=White] (1, 7) rectangle (14, 3.5); % Form table + \draw[Black, very thin] (1, 6.5) -- (14, 6.5); % Table rows + \draw[Black, very thin] (1, 5.5) -- (14, 5.5); % Table rows + \draw[Black, very thin] (1, 4.5) -- (14, 4.5); % Table rows + \node[text=White] at (7.5, 2.5) {My Partners}; % Partner table title + \draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table + \draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows + \draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows + % Create form modal overlay + \draw[Black, fill=White] (3, 9) rectangle (12, 2); % Create form window + \node[text=Black] at (7.5, 8) {Create Form Template}; % Create form title + \draw[Black, very thin] (4, 7) rectangle (11, 6.5); % Form title input + \draw[Black, very thin] (4, 6) rectangle (11, 5.5); % Form description input + \draw[Black, very thin] (4, 5) rectangle (11, 4.5); % Share with input + \draw[Black, very thin] (4, 4) rectangle (6, 3.5); % Question input + \draw[Black, very thin] (6.25, 4) rectangle (8.75, 3.5); % Answers input + \draw[Black, fill=NavyBlue] (9, 4) rectangle (11, 3.5); % Add entry button + \draw[Black, fill=NavyBlue] (5.75, 3.25) rectangle (7.25, 2.75); % Cancel button + \draw[Black, fill=NavyBlue] (7.75, 3.25) rectangle (9.25, 2.75); % Submit button + \node[text=Black] at (10, 3.75) {Add entry}; % Add entry text + \node[text=Black] at (6.5, 3) {Cancel}; % Cancel text + \node[text=Black] at (8.5, 3) {Submit}; % Submit text + \end{tikzpicture} + \caption{Wireframe: Create Form} + \end{figure} + + \begin{figure}[H] + \center + \begin{tikzpicture} + % Dashboard as background + \draw[Black, fill=Gray] (0, 0) rectangle (15, 10); % Page border + \draw[Blue, fill=NavyBlue] (1, 9.5) rectangle (14, 8.5); % Header + \node[text=White] at (2, 9) {Menu}; % Menu text + \node[text=White] at (7.5, 9) {CompForge}; % Page title + \node[text=White] at (12, 9) {Welcome [user]!}; % Welcome text + \node[text=White] at (7.5, 7.5) {Form Templates Dashboard}; % Table title + \draw[Black, fill=White] (1, 7) rectangle (14, 3.5); % Form table + \draw[Black, very thin] (1, 6.5) -- (14, 6.5); % Table rows + \draw[Black, very thin] (1, 5.5) -- (14, 5.5); % Table rows + \draw[Black, very thin] (1, 4.5) -- (14, 4.5); % Table rows + \node[text=White] at (7.5, 2.5) {My Partners}; % Partner table title + \draw[Black, fill=White] (1, 2) rectangle (14, 0); % Partner table + \draw[Black, very thin] (1, 1.5) -- (14, 1.5); % Table rows + \draw[Black, very thin] (1, 0.5) -- (14, 0.5); % Table rows + % Add partner modal overlay + \draw[Black, fill=White] (3, 9) rectangle (12, 5); % Create form window + \node[text=Black] at (7.5, 8) {Add Partner}; % Create form title + \draw[Black, very thin] (6, 7) rectangle (9, 6.5); % Partner email input + \draw[Black, fill=NavyBlue] (7, 6.25) rectangle (8, 5.75); % Add button + \node[text=Black] at (7.5, 6) {Add}; % Add text + \end{tikzpicture} + \caption{Wireframe: Add Partner} + \end{figure} \subsection{Flow Charts} % Map journey TODO: Minified versions of the wireframes with arrows showing flow of the application... diff --git a/report/5_Implementation.tex b/report/5_Implementation.tex index 6309007273cc56e52ed58de27a31f6e76d7bc43f..9bf958027416be5eda93f705e45cbfc8ce5600fd 100644 --- a/report/5_Implementation.tex +++ b/report/5_Implementation.tex @@ -88,8 +88,11 @@ Serverless architecture is the model Firebase uses for its platform. It is not, in fact, serverless as the name suggests, but means that the need for server software and hardware management by the developer is erased as the infrastructure is provided by a host, like Firebase. This allows for improved scalability for hosted applications. -\section{Progression and use of Agile} - This section describes the implementation's progression during each sprint. The original plan for the sprints is described in chapter 8. Much of the implementation took longer than expected due to the fact it was the first time many of the technologies were being used, resulting in a steep learning curve. +\section{Progression} + This section describes the progression during the course of the implementation. Much of the implementation took longer than expected due to it being the first time many of the technologies were used, resulting in a steep learning curve. + + \subsection{Agile} + The Agile methodology was employed in an attempt to quickly iterate over the project to produce the MVP and then continually improve upon the application, adding additional features with each sprint. Agile allows for regular reviews of progress which can help with project management due to the frequent re-evaluation of the application's state. (See chapter 7 for more detail on project management.) \begin{description} \item [Sprint 1] diff --git a/report/6_TestingAndSoftwareValidation.tex b/report/6_TestingAndSoftwareValidation.tex index 715f304e1160ce9d168200465afe264aea46d455..08ab82beca7afde8e9996d689ae585d287d98982 100644 --- a/report/6_TestingAndSoftwareValidation.tex +++ b/report/6_TestingAndSoftwareValidation.tex @@ -42,36 +42,48 @@ \end{table} \section{Validation} - To ensure that CompForge met the functional requirements specified in chapter 2, and to establish the absence of bugs, the application was evaluated using an automated test suite. + To ensure that CompForge met the functional requirements specified in chapter 3, and to establish the absence of bugs, the application was evaluated using an automated test suite and also extensively manually tested. \subsection{Manual Testing} - The most straightforward way to test the application was to simply use it. Listed below are the steps taken to manually test CompForge. + The most straightforward way to test the application was to simply use it. Listed below are the steps taken to manually test CompForge: \begin{itemize} \item Accounts 1, 2 \& 3 created. - \item Account 1 creates and shares Forms 1 \& 2 with the other accounts. + \item Account 1 creates Forms 1 \& 2 and shares them with the other accounts. + \item Account 1 creates Form 3 and shares it with Account 2. + \item Account 3 verfiies that it cannot view Form 3. \item Account 1 \& 2 view Form 1. \item Account 1 deletes Form 1. \item Accounts 1 \& 2 verify Form 1 is no longer visible. \item Account 2 creates a submission for Form 2. - \item Account 1 views the submission from Account 2 for Form 2. + \item Account 1 views Account 2's submission for Form 2. \item Account 3 verifies that it can view Form 2, but not the submission for Form 2, and that it does not have the ability to delete Form 2. \item Account 3 creates a submission for Form 2. \item Account 1 verifies that there are 2 separate, viewable submissions of Form 2, for Accounts 2 \& 3. + \item Account 3 deletes its Form 2 submission. + \item Account 1 verifies that it can no longer view Account 3's Form 2 submission. \end{itemize} \subsection{Robot Framework} - The testing and validation of the application was done using Robot Framework. Robot Framework is a generic, open source, automation framework for acceptance testing \cite{Robot}, developed with Python. The framework has many libraries that extend its functionality, and one such library is Selenium which was used extensively to automatically drive the application's user interface. + The testing and validation of the application was done using Robot Framework. Robot Framework is a generic, open source, automation framework for acceptance testing \cite{Robot}, developed with Python. The framework has many libraries that extend its functionality, and one such library is Selenium which was used extensively to drive the application's user interface. - \subsubsection{Integration} - TODO: - How robot was integrated into the project + \subsubsection{Test Suite Setup and Integration} + The process for integrating the Robot Framework test suite into the project was relatively simple. After the installation of Robot Framework and Selenium using the python package manager \textquoteleft pip\textquoteright, all that was left was to install a browser driver (in this case, chromedriver), and add it to the path. This allows Selenium to initialise an instance of Google Chrome, which is directed to the application's address by the test suite. Once the page has loaded, the test cases begin. \subsubsection{Testing Writing} - TODO: - The process of planning and implementing tests - Test cases etc + A series of test cases were written to perform tasks within the application. Collectively the test cases cover all the application's features, from signing in and out to sharing a form. (See appendix.) Robot Framework produces an HTML file with the all the logs from each test nested, making it very easy to see where a test fails which is useful for debugging. Below is an example log file of a test run with some failed tests.\\ + + \begin{figure}[H] + \center + \includegraphics[height=100mm, width=145mm]{../figures/RobotTestFails} + \caption{Robot Framework Testing: Example log with failed tests} + \end{figure} \subsubsection{Results} - TODO: - Insert the beautiful HTML results page (and discuss?) \ No newline at end of file + The test cases all eventually passed, as shown in Figure 6.2 below, with a total run time of 1 minute and 23 seconds, highlighting the benefits of automating testing. These tests cases can now be used for regression testing when the application is extended to ensure that there is no loss of functionality when new features are added.\\ + + \begin{figure}[H] + \center + \includegraphics[height=100mm, width=145mm]{../figures/RobotTestResults} + \caption{Robot Framework Testing: Final Results} + \end{figure} \ No newline at end of file diff --git a/report/7_Evaluation.tex b/report/7_Evaluation.tex index b76fb839824431935e25452ceb39267299f8a1ae..6ad8a10897c6a9336c6757a5506b621aac8b4bdf 100644 --- a/report/7_Evaluation.tex +++ b/report/7_Evaluation.tex @@ -18,6 +18,9 @@ This chapter appraises the quality of the project by critical and comparative ev \section{Project Management} Some of the first parts of the project progressed ahead of schedule, such as the creation of the initial Gantt chart. Until the deadline for the progress report in December, the project was continuing to progress on schedule. Understandably, the implementation, testing and final report write up were severely impacted by the university closure from the 23rd March onwards, due to the spread of COVID-19. This, coupled with delays during the implementation caused by an underestimation of the learning curve of the technologies that were used, resulted in much of the remainder of the project being completed behind schedule, and consequent removal of non-essential features from the requirements. TODO mitigation + \subsection{Agile and Task Breakdowns} + TODO. + \subsection{Reflection} TODO. diff --git a/report/master.pdf b/report/master.pdf index 25dec046fea42c335442366eade61d824797c43a..40a0e136bca92fc388fb9402d33f7833e32c82ff 100644 Binary files a/report/master.pdf and b/report/master.pdf differ