|
| 1 | +% Use either your LaTeX editor or latexmk to compile. |
| 2 | + |
| 3 | +\documentclass[a4paper, 12pt]{article} |
| 4 | + |
| 5 | +% Document quality things |
| 6 | +\usepackage[utf8]{inputenc} |
| 7 | +\usepackage{microtype, xcolor} |
| 8 | +\usepackage{url, hyperref} |
| 9 | +\hypersetup{colorlinks=true, linkcolor=blue, citecolor=black, urlcolor=blue} |
| 10 | + |
| 11 | +% Image-related packages |
| 12 | +\usepackage{graphicx} |
| 13 | +\usepackage{float} |
| 14 | +\graphicspath{ {./detailed-design-diagrams/} } |
| 15 | +\usepackage[font=small,skip=5pt]{caption} |
| 16 | + |
| 17 | +% Setting margins |
| 18 | +\usepackage[a4paper, left=2cm, right=2cm, top=1.75cm, bottom=1.75cm, includefoot]{geometry} |
| 19 | + |
| 20 | +% Table helper packages |
| 21 | +\usepackage{multirow, multicol} |
| 22 | +\usepackage{makecell} |
| 23 | +\usepackage{array} |
| 24 | +%\usepackage{tabularx} % Not needed currently, but has a few nice options |
| 25 | +%\usepackage{wrapfig} % Floating figures/tables |
| 26 | + |
| 27 | +% Prevents spamming tedious newlines everywhere, also disables auto indentation, etc. |
| 28 | +\usepackage[skip=0.75\baselineskip plus 2pt]{parskip} |
| 29 | + |
| 30 | +% Self-explanatory |
| 31 | +\usepackage{titlesec} |
| 32 | +\titleformat{\section}[block]{\normalfont\scshape\Large}{\thesection}{1em}{} |
| 33 | +\titleformat{\subsection}{\normalfont\large}{\thesubsection}{1em}{} |
| 34 | + |
| 35 | +% Referencing |
| 36 | +\usepackage[backend=bibtex, style=numeric-comp, sorting=none]{biblatex} |
| 37 | +\addbibresource{bibliography.bib} |
| 38 | + |
| 39 | +\begin{document} |
| 40 | + |
| 41 | + % Header Table |
| 42 | + \begin{table}[h!] |
| 43 | + \renewcommand{\arraystretch}{3} |
| 44 | + \centering |
| 45 | + \begin{tabular}{ | >{\raggedleft\arraybackslash}m{3cm} l >{\raggedleft\arraybackslash}m{3cm} m{3cm} | } |
| 46 | + \hline |
| 47 | + \Huge CS 102 & \textit{Spring 2020/21} & \multirow{2}{*}{\makecell{Project\\Group}} & \multirow{2}{*}{\textbf{\Huge G2C}} \\ |
| 48 | + \makecell[r]{Instructor:\\Assistant:} & \makecell[l]{\textbf{Aynur Dayanık}\\\textbf{Haya Shamim Khan Khattak}} & & \\ |
| 49 | + \hline |
| 50 | + \end{tabular} |
| 51 | + \end{table} |
| 52 | + |
| 53 | + % Grading Table |
| 54 | + \begin{table}[h!] |
| 55 | + \renewcommand{\arraystretch}{1.4} |
| 56 | + \centering |
| 57 | + \footnotesize |
| 58 | + \begin{tabular}{ l p{1.5cm} | p{1.5cm} | } |
| 59 | + \hline |
| 60 | + \multicolumn{1}{|c|}{\textbf{Criteria}} & \multicolumn{1}{c|}{\textbf{TA/Grader}} & \multicolumn{1}{c|}{\textbf{Instructor}} \\ \hline |
| 61 | + \multicolumn{1}{|p{10.5cm}|}{Presentation} & & \\[10ex] \hline |
| 62 | + \multicolumn{1}{r|}{\textbf{Overall}} & & \\ |
| 63 | + \cline{2-3} |
| 64 | + \end{tabular} |
| 65 | + \end{table} |
| 66 | + |
| 67 | + % Project Information Header |
| 68 | + {\centering\Huge \bfseries \raisebox{0.5ex}{\texttildelow} LabConnect \raisebox{0.5ex}{\texttildelow} \par} |
| 69 | + |
| 70 | + \begin{table}[h!] |
| 71 | + \renewcommand{\arraystretch}{1.4} |
| 72 | + \centering |
| 73 | + \small |
| 74 | + \begin{tabular}{ r l } |
| 75 | + \textbf{Borga Haktan Bilen} & 22002733 \\ |
| 76 | + \textbf{Vedat Eren Arıcan} & 22002643 \\ |
| 77 | + \textbf{Berkan Şahin} & 22003211 \\ |
| 78 | + \textbf{Berk Çakar} & 22003021 \\ |
| 79 | + \textbf{Alp Ertan} & 22003912 \\ |
| 80 | + \end{tabular} |
| 81 | + \end{table} |
| 82 | + |
| 83 | + % Document Type Header Table |
| 84 | + \begin{table}[h!] |
| 85 | + \renewcommand{\arraystretch}{1.5} |
| 86 | + \centering |
| 87 | + \begin{tabular}{ |>{\centering\arraybackslash}m{15.15cm}| } |
| 88 | + \hline |
| 89 | + \Large \textbf{Detailed Design Report} \\ |
| 90 | + \small (version 2.0) \\ |
| 91 | + \small \textbf{\today} \\ |
| 92 | + \hline |
| 93 | + \end{tabular} |
| 94 | + \end{table} |
| 95 | + |
| 96 | + % Document begins here... |
| 97 | + |
| 98 | + \section{Introduction} |
| 99 | + |
| 100 | + LabConnect facilitates communication between students, TA's, tutors, |
| 101 | + and instructors. In the background, it is a web application |
| 102 | + that aims to assist CS introductory courses in organization and communication. |
| 103 | + Proposed ideas for features include priority queuing for TA zoom rooms among many other |
| 104 | + enhancements to TA/instructor productivity. For example, those who have completed their labs |
| 105 | + can be tested using pre-defined (by TA or instructor) unit tests, |
| 106 | + and then placed into a queue to optimize the TA-student meeting arrangement process in general. |
| 107 | + Much of the repetitive work that course staff need to do can be reduced substantially by automated actions, |
| 108 | + allowing TA's and tutors to allocate more time for more hands-on help towards students. |
| 109 | + In summary, LabConnect is a developing project that aims to make education more productive for students, |
| 110 | + and more efficient for teaching staff, above all. |
| 111 | + |
| 112 | + \section{System Overview} |
| 113 | + |
| 114 | + \subsection{Organisation \& Architecture} |
| 115 | + |
| 116 | + Shown below is the diagram of the organization of LabConnect's architecture. |
| 117 | + Users of varying roles interact with the interface displayed using the ReactJS library, which also makes |
| 118 | + HTTP requests to the REST API powered by the Spring framework, over the internet. |
| 119 | + The Spring framework acts mostly as the controller segment of the project, delivering data |
| 120 | + that is obtained through model classes and their communication with the databases. |
| 121 | + |
| 122 | + \begin{figure}[H] |
| 123 | + \centering |
| 124 | + \includegraphics[width=\textwidth]{organization} |
| 125 | + \caption{Overview of LabConnect's Organisation}~\label{fig:organisation-diagram} |
| 126 | + \end{figure} |
| 127 | + |
| 128 | + \pagebreak |
| 129 | + |
| 130 | + \subsection{Technologies} |
| 131 | + |
| 132 | + \subsubsection{Back-end} |
| 133 | + |
| 134 | + \begin{itemize} |
| 135 | + \item \textbf{Spring} - Framework to be used to power the REST API at the /api/ data endpoint. |
| 136 | + All necessary data will be exposed at the API endpoint, but only with proper authentication. |
| 137 | + Requests are only authorized accordingly with the user's account permission level. |
| 138 | + The \textit{Spring Security} and \textit{Spring MVC} frameworks may also be taken advantage of. |
| 139 | + \item \textbf{MongoDB} - To be used as persistent storage; account data, assignment data, etc. |
| 140 | + \item \textbf{Redis} - To be used as short-term storage; user session, authentication, etc. |
| 141 | + \end{itemize} |
| 142 | + |
| 143 | + \subsubsection{Front-end} |
| 144 | + |
| 145 | + \begin{itemize} |
| 146 | + \item \textbf{SASS} - Useful preprocessor to write CSS more productively. |
| 147 | + \item \textbf{ReactJS} - Will be used to construct a single-page-app user interface, |
| 148 | + which will serve components according to the API call responses. |
| 149 | + \end{itemize} |
| 150 | + |
| 151 | + \subsubsection{Build \& Utility Tools} |
| 152 | + |
| 153 | + \begin{itemize} |
| 154 | + \item \textbf{Spring Boot} - May be used to simplify the development of Spring components. |
| 155 | + \item \textbf{Maven} - Build automation tool, good for any medium to large scale project. |
| 156 | + \item \textbf{Docker} - Facilitates the deployment of the project, and it may |
| 157 | + also be viable to use \textit{docker-compose} to deploy separate containers |
| 158 | + for databases and other components simultaneously. |
| 159 | + \end{itemize} |
| 160 | + |
| 161 | + \subsubsection{Domain \& Host} |
| 162 | + |
| 163 | + \begin{itemize} |
| 164 | + \item \textbf{Domain} - \textit{labconnect.me} is the proposed domain for the website. |
| 165 | + \item \textbf{Hosting} - The project will most likely be run on either a container deployment service, |
| 166 | + or a VPS service. |
| 167 | + \end{itemize} |
| 168 | + |
| 169 | + \pagebreak |
| 170 | + |
| 171 | + \section{Core Design Details} |
| 172 | + |
| 173 | + Most of the data, being of persistent nature, is stored in a database. But the model classes |
| 174 | + perform the necessary queries and subsequent actions to the data as necessary, |
| 175 | + essentially grouping database queries logically. |
| 176 | + In the class diagram below, the classes highlighted in red detail the assignment, blue detail the user account types, |
| 177 | + green detail submission-related data specific to an assignment, and yellow provide features |
| 178 | + for managing the live sessions. |
| 179 | + |
| 180 | + \begin{figure}[H] |
| 181 | + \centering |
| 182 | + \includegraphics[width=\textwidth]{class-diagram} |
| 183 | + %\caption{UML Class Diagram for LabConnect}~\label{fig:class-diagram} |
| 184 | + \end{figure} |
| 185 | + |
| 186 | + |
| 187 | + \section{Task Assignment} |
| 188 | + |
| 189 | + The planned division of work for the model classes is as follows; |
| 190 | + |
| 191 | + \begin{table}[h!] |
| 192 | + \renewcommand{\arraystretch}{1.4} |
| 193 | + \centering |
| 194 | + \begin{tabular}{ p{0.25\textwidth} | p{0.6\textwidth} } |
| 195 | + Borga Haktan Bilen & Assignment, User, LiveSessionManager \\ \hline |
| 196 | + Vedat Eren Arıcan & Assignment, Instructor, Meetable \\ \hline |
| 197 | + Berkan Şahin & Assignment, Tutor, UnitTest \\ \hline |
| 198 | + Berk Çakar & Assignment, TeachingAssistant, Attempt \\ \hline |
| 199 | + Alp Ertan & Assignment, Student, Submission, HomeworkAssignment, LabAssignment \\ |
| 200 | + \end{tabular} |
| 201 | + \end{table} |
| 202 | + |
| 203 | + The division above is liable to change as necessary during the implementation stage. |
| 204 | + As for the remaining work, we have decided to not limit anyone to work on a particular technology |
| 205 | + involved in the project. This project is, above all, intended for us to learn new technologies |
| 206 | + and gain experience for both teamwork and medium/large scale development. In which case, it works |
| 207 | + against this goal to have clean-cut distinctions in task assignment. |
| 208 | + Theoretically, having all group members to strive to experience a variety of technologies should also ensure an even |
| 209 | + partition of work. Lastly, note that the project proposed thus far is of scale large enough to accommodate |
| 210 | + members working on a specific component without clashing. |
| 211 | + |
| 212 | +\end{document} |
| 213 | + |
0 commit comments