-
Notifications
You must be signed in to change notification settings - Fork 4
/
finalBoxAndLine.html
559 lines (548 loc) · 24.8 KB
/
finalBoxAndLine.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bytes | Updated Box and Line Diagram & Explanation</title>
<link rel="icon" href="/assets/common/logo.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/assets/common/css/teamStyle.css" />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<span id="navbar-placeholder"></span>
<div class="container my-4">
<div class="jumbotron mb-4">
<h1 class="display-4">Final Box and Line Diagram &
Explanations</h1>
<p class="lead">
Here is the final update of our Box and Line Diagram and
explanations of each component and dependency. Also
included are an explanation of the differences
between the latest version and the previous version, and
an explanation of how we maximized cohesion and
minimized decoupling.
</p>
</div>
<div class="card border-dark h-100 mb-4">
<div class="card-header">Box and Line Diagram</div>
<div class="card-body">
<div class="m-0 px-3 h-100">
<p>
The final Box and Line Diagram is as follows or
with explanations as a pdf here<a
href="/assets/d5/pdf/d5_boxAndLine
.pdf"> here</a>:
</p>
<figure>
<img
src="/assets/d5/img/d5_box_and_line_new.png"
class="sprint-plan-img mb2"
title="Figure 1: Deliverable 5 Box and Line
Diagram"
/>
<figcaption> Figure 1: Deliverable 5 Box and
Line Diagram </figcaption>
</figure>
</div>
</div>
</div>
<div class="card border-dark h-100 mb-4">
<div class="card-header">Box and Line Diagram Component and Dependency Explanation</div>
<div class="card-body">
<div class="m-0 px-3 h-100">
<hr>
<h5><strong>A) Restaurant User Interface</strong></h5>
<p>
The Restaurant User Interface subsystem contains multiple components.
These components are dependent on the Backend. contains one subcomponent
with multiple components and two independent components. All of these are dependent on the Backend.
The subsystem components and dependencies are further explained as follows:
</p>
<ul>
<li>
<b>Restaurant Profile Interfaces</b>
<ul>
<p>
The Restaurant Profile Interfaces subcomponent contains all the interfaces pertaining
to the restaurant user’s profile. The entire subcomponent is dependent on the Restaurant Profile
Frontend Communication based in the Backend. The subcomponent’s components are further
explained as follows:
</p>
<ul>
<li>
<b>Restaurant Owner Login
Page</b>
<ul>
<p>
The Restaurant Owner Login
Page prompts the user to enter their username and password.
An error message will appear if the username or password are incorrect.
</p>
</ul>
</li>
<li>
<b>Restaurant Owner Summary </b>
<ul>
<p>
The Restaurant Owner Summary displays the restaurant owner's profile information,
including restaurant name, phone number location, category, description, and image,
as well as provides a link to their bingo board and a link to edit their public profile page.
</p>
</ul>
</li>
<li>
<b>Create Account Page </b>
<ul>
<p>
The Create Account Page provides a form in which the new user can add their full name,
desired username and password in order to create a new restaurant profile.
</p>
</ul>
</li>
<li>
<b>Restaurant Profile Editor</b>
<ul>
<p>
The Restaurant Profile Editor provides a form in which the restaurant owner can update
their restaurant profile, including restaurant name, location, phone number, category,
description, and image.
</p>
</ul>
</li>
</ul>
</ul>
</li>
<li>
<b>Goals and Rewards Customization Page</b>
<ul>
<p>
The Goals and Rewards Customization Page allows
for a restaurant user to create customized goals and/or rewards that are unique to them.
This component is dependent on the Goals and Rewards Customization Frontend Communication
component in the Backend.
</p>
</ul>
</li>
<li>
<b>Bingo Board Editor</b>
<ul>
<p>
The Bingo Board Editor allows for a restaurant user to edit the setup of their bingo board,
including the goals on the board and the rewards earned when a customer gets a bingo.
This component is dependent on the Bingo Board Frontend Communication component in the Backend.
</p>
</ul>
</li>
</ul>
</hr>
<hr>
<h5><strong>B) Customer Interface</strong></h5>
<p>
The Customer Interface subsystem contains multiple components.
These components are dependent on the Backend. The subsystem
components and dependencies are further explained as follows:
</p>
<ul>
<li>
<b>Customer Profile Interfaces</b>
<ul>
<p>
The Customer Profile Interfaces subcomponent contains all the interfaces pertaining to the
customer’s profile. The entire subcomponent is dependent on the Customer Profile Frontend
Communication based in the Backend. The subcomponent’s components are further explained as follows:
</p>
<ul>
<li>
<b>Account Creation Page</b>
<ul>
<p>
The Account Creation Page provides a form in which the new user
can add their First Name, desired username and password in order
to create a new customer profile.
</p>
</ul>
</li>
<li>
<b>Customer Login Page</b>
<ul>
<p>
The Customer Login
Page
prompts the customers to enter their username and password.
An error message will appear if the username or password are incorrect.
</p>
</ul>
</li>
<li>
<b>List of Rewards Earned Page </b>
<ul>
<p>
The List of Rewards Earned Page shows the user a list of all the rewards that they redeemed.
</p>
</ul>
</li>
<li>
<b>The Compete with Friends Page</b>
<ul>
<p>
The Compete with Friends Page shows the user their ranking in comparison with
their friends who use the application, where rank is calculated based on the
number of rewards they have earned.
</p>
</ul>
</li>
<li>
<b>List of Favourite Restaurant Boards Page</b>
<ul>
<p>
The List of Favourite Restaurant Boards Page displays the boards
that the customer has saved in order for them to access easily.
</p>
</ul>
</li>
</ul>
</ul>
</li>
<li>
<b>Restaurant Information Interfaces</b>
<ul>
<p>
The Restaurant Information Interfaces subcomponent contains all the interfaces pertaining
to the information of the restaurants using the application. The entire subcomponent
is dependent on the Restaurant Information Frontend Communication based in the Backend.
The subcomponent’s components are further explained as follows:
</p>
<ul>
<li>
<b>List of Restaurant Boards Page</b>
<ul>
<p>
The List of Restaurant Boards Page shows the user a list of all the restaurant boards
that are in progress. A restaurant board that is “in progress” has one or more goals completed.
</p>
</ul>
</li>
<li>
<b>Restaurant Board Page</b>
<ul>
<p>
The Restaurant Board Page shows the user an individual restaurant game board.
</p>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</hr>
<hr>
<h5><strong>C) Backend</strong></h5>
<p>
The Backend subsystem contains multiple components and two subcomponents.
The subsystem components and dependencies are further explained as follows:
</p>
<ul>
<li>
<b>Restaurant Profile Frontend Communication</b>
<ul>
<p>
The Restaurant Profile Frontend Communication allows the Restaurant Profile Interfaces
in the Restaurant User Interface subsystem to interact with the Backend. It is dependent
on the Profile Management which is located in the Backend subsystem.
</p>
</ul>
</li>
<li>
<b>Goals and Rewards Frontend Communication</b>
<ul>
<p>
The Goals and Rewards Frontend Communication allows the Goals and
Reward Customization Page in the Restaurant User Interface subsystem to interact with the Backend.
It is dependent on the Profile Management which is located in the Backend subsystem.
</p>
</ul>
</li>
<li>
<b>Bingo Board Frontend Communication</b>
<ul>
<p>
The Bingo Board Frontend Communication allows the Bingo Board Editor in the
Restaurant User Interface subsystem to interact with the Backend.
It is dependent on the Profile Management which is located in the Backend subsystem.
</p>
</ul>
</li>
<li>
<b>Customer Profile Frontend Communication</b>
<ul>
<p>
The Customer Profile Frontend Communication allows the Customer Profile Interfaces
in the Customer Interface subsystem to interact with the Backend.
It is dependent on the Profile Management which is located in the Backend subsystem.
</p>
</ul>
</li>
<li>
<b>Restaurant Information Frontend Communication</b>
<ul>
<p>
The Restaurant Information Frontend Communication allows
the Restaurant Information Interfaces in the Customer Interface subsystem to interact with the Backend.
It is dependent on the Profile Management which is located in the Backend subsystem.
</p>
</ul>
</li>
<li>
<b>Profile Management</b>
<ul>
<p>
The Profile Management subcomponent contains all the interfaces pertaining to the profiles stored in the database.
The entire subcomponent is dependent on the Restaurant Profile Frontend Communication, Goals and Rewards Frontend Communication,
Bingo Board Frontend Communication, Customer Profile Frontend Communication, Restaurant Information Frontend Communication,
and Database Communication components in order to update and maintain the profiles
of the application users. The subcomponent’s components are further explained as follows:
</p>
<ul>
<li>
<b>User Authentication</b>
<ul>
<p>
The User Authentication component allows for the verification of inputted usernames and passwords.
</p>
</ul>
</li>
<li>
<b>User Profile Management</b>
<ul>
<p>
The User Profile Management component allows for users in general to modify their account information.
It is dependent on the User Authentication component to verify that the user
login information is valid.
</p>
</ul>
</li>
<li>
<b>Restaurant Profile Management</b>
<ul>
<p>
The Restaurant Profile Management component allows for restaurant owner users to modify their restaurant
profiles; these modifications include changes to the goals and rewards they want to offer. This component
inherits from the User Profile Management. This component is dependent on the Goal Modifier, Rewards Modifier,
Restaurant Bingo Board Modifier and Goal and Reward Completion Verification components as they are
features that the restaurant owner users have access to.
</p>
</ul>
</li>
<li>
<b>Customer Profile Management</b>
<ul>
<p>
The Customer Profile Management component allows for customers to modify their friend
lists as well as access goals and rewards. This component inherits from the User Profile
Management. This component is dependent on Customer Favourites Modifier and Customer
Bingo Board Viewer as they are features that the customer users have access to.
</p>
</ul>
</li>
</ul>
</ul>
</li>
<li>
<b>Goal and Reward Completion
Verification</b>
<ul>
<p>
The Goal and Reward Completion
Verification component allows
for restaurant owners to verify if a goal is completed by a customer,
or if a reward is valid and redeemed by a customer.
</p>
</ul>
</li>
<li>
<b>Goal Modifier</b>
<ul>
<p>
The Goal Modifier component allows for restaurant owner users to add, edit, or delete custom goals.
</p>
</ul>
</li>
<li>
<b>Reward Modifier</b>
<ul>
<p>
The Reward Modifier component allows for restaurant owner users to add, edit, or delete custom rewards.
</p>
</ul>
</li>
<li>
<b>Restaurant Bingo Board Modifier</b>
<ul>
<p>
The Restaurant Bingo Board Modifier allows for restaurant owner users to edit their public bingo boards,
such as changing the contents, the size or the expiration date.
</p>
</ul>
</li>
<li>
<b>Customer Favourites Modifier</b>
<ul>
<p>
The Customer Favourites Modifier component allows for a customer user to save any of the restaurant bingo
boards as a favourite so that
they can access easily.
</p>
</ul>
</li>
<li>
<b>Customer Bingo Board Viewer</b>
<ul>
<p>
The Customer Bingo Board Viewer component allows for a customer user to view a restaurant bingo board
as well as their progress for goals, goals they need to complete to receive rewards, rewards they have achieved,
QR codes for goals to verify, and QR codes for rewards to redeem.
</p>
</ul>
</li>
<li>
<b>Data Access</b>
<ul>
<p>
The Data Access subcomponent contains the component related to accessing data from the database.
This subcomponent is dependent on the Database subsystem so that it can communicate with the database
components as well as the Profile Management so that it can update the information in the database.
</p>
<ul>
<li>
<b>Database Communication</b>
<ul>
<p>
The Database Communication allows for the Backend to communicate with the Databases.
</p>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</hr>
<hr>
<h5><strong>D) Database</strong></h5>
<p>
The Database subsystem contains multiple components.
The Database is dependent on the Database Communication in the Backend subsystem.
The components are as follows:
</p>
<ul>
<li>
<b>Restaurant Profile Collection</b>
<ul>
<p>
The Restaurant Profile Collection stores restaurant
information such as name of the restaurant, the username and password
associated with the restaurant, the customized restaurant goals,
the customized restaurant rewards, and the user profile.
</p>
</ul>
</li>
<li>
<b>Game Goals Collection</b>
<ul>
<p>
The Game Goals Collection stores the premade goals used for
the bingo loyalty game.
</p>
</ul>
</li>
<li>
<b>Game Rewards Collection</b>
<ul>
<p>
The Game Rewards Collection is used for the storing premade rewards
for the bingo loyalty game.
</p>
</ul>
</li>
<li>
<b>Customer Profile Collection</b>
<ul>
<p>
The Customer Profile Database is used for storing customer
user information such as username, active game boards,
goals completed, rewards earned, and friends’ usernames.
</p>
</ul>
</li>
</ul>
</hr>
</div>
</div>
</div>
<div class="card border-dark h-100 mb-4">
<div class="card-header">Changes to System Components</div>
<div class="card-body">
<div class="m-0 px-3 h-100">
<div>
<p>
For this deliverable, we introduced a new subcomponent called Data Access to contain the Database
Communication component. This new subcomponent decouples the Database Communication from Profile Management
and allows for it to be related indirectly. In addition, it allows for future components related to data
access to be introduced without affecting the other components directly. However, this subcomponent is still
a part of C)Backend as it resides in the backend of our system.
</p>
<p>
Also, we changed the names of the Login Interface
in A)Restaurant User Interface and Login Page in B) Customer User Interface to Restaurant Owner Login Page and
Customer Login Page to help distinguish the two interfaces. We changed the names and kept them separate because
even though they are very similar they function differently and belong to different subsystems.
</p>
<p>
In addition, we added new components such as the Goal Modifier, Rewards Modifier, Restaurant Bingo Modifier
for which Restaurant Profile Manager is now dependent on, and Customer Favourites Modifier and Customer Bingo Board Viewer
for which Customer Profile Manager is dependent on. We also combined the Goal and Reward Completion Verification as they function the same.
</p>
</div>
</div>
</div>
</div>
<div class="card border-dark h-100 mb-4">
<div class="card-header">Minimizing Coupling & Maximizing
Cohesion
</div>
<div class="card-body">
<div class="m-0 px-3 h-100">
<div>
<p>
In Deliverable 3, the frontend components all shared the same backend communication,
both on the A) Restaurant User Interface and the B) Customer Interface. In Deliverable 4,
we decoupled these features by creating more specific backend communication components.
That is, each feature has its own backend communication. Thus, we minimized coupling in
our current system diagram.
</p>
<p>
We introduced the subcomponents to group together similar components. For example,
we introduced the Profile Management subcomponent in the C) Backend which contains the
components User Authentication, User Profile Management, Restaurant Profile Management,
and Customer Profile Management. These components are all grouped together since they relate
to the management of profiles in the system. In addition, User Profile Management serves as a parent
component, while Restaurant Profile Management and Customer Profile Management inherit from it.
Thus, with the introduction of subcomponents with some inheritance, we maximized cohesion in our
current system diagram.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="/assets/common/js/main.js"></script>
</body>
</html>