-
Notifications
You must be signed in to change notification settings - Fork 0
/
requirements.html
414 lines (386 loc) · 16.5 KB
/
requirements.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
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<title>REPORT WEBSITE</title>
<!-- mobile responsive meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- ** Plugins Needed for the Project ** -->
<!-- Bootstrap -->
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
<!-- slick slider -->
<link rel="stylesheet" href="plugins/slick/slick.css">
<!-- themefy-icon -->
<link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
<!-- Main Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="home.html"><img src="images/logo.png" alt="Myself"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="home.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="requirements.html">REQUIREMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="research.html">RESEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link" href="hci.html">HCI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="design.html">DESIGN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="achievement.html">ACHIEVEMENT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="plan.html">PLAN FOR TERM2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="appendices.html">APPENDICES</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- page title -->
<section class="page-title bg-primary position-relative">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="text-white font-tertiary">Requirements</h1>
</div>
</div>
</div>
</section>
<!-- /page title -->
<!-- project background-->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">Project background</h3>
<p>Networking and attending social events are essential for the businessman, people are looking for jobs and HR. It is vital for them to order tons of business cards and receive a lot from others. Data from the internet shows most people are going to need at least 1000 business cards per year at a minimum. It is not very easy to manage them, find the desired card, and extract useful information. Also, when you need to update personal information on the card, the only solution is to throw all old business cards and order a new one. This is wasteful and troublesome because the new business card cannot finish printing simultaneously. Plus, the typical business card is not attractive and unique enough to get other people's attention.</p>
<p>To overcome these issues, our client requires an Android app with a service that runs on an Android phone system that 'projects' an AR avatar onto a business card. It should have an associated cloud service to enable generated cards and to have cards that can evolve as a person's CV does over time.</p>
</div>
</div>
</div>
</section>
<!-- /project background-->
<!-- requirement gathering -->>
<section class="section position-relative">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">Requirement gathering</h3>
<p>Except for the requirement about how to getting in touch with the owner of the card, other requirements from our client are full of detailed. Hence we only need to discover the feature helping the user to manage card they have already scanned and find the desired card easily. Hence we gathered requirements about that through short interviews with potential users of our applications. Finally, we decided to add a favorite page and a history page, and the user can search for keywords on each page.</p>
<p>For web service, we also add the same features. Based on that, we give the user the option of choosing their own AR image.</p>
</div>
</div>
</div>
<!-- bg image -->
<img class="img-fluid edu-bg-image w-100" src="images/backgrounds/education-bg.png" alt="bg-image">
</section>
<!-- /requirment gathering-->
<!-- persona -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">Persona</h3>
<img src="images/persona/image9.png" class="img-responsive" style= "width: 60%;">
</div>
</div>
</div>
</section>
<!-- /persona-->
<!-- project goals-->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">Project goals</h3>
<p>Our goal its to develop an android app with the front-end app using flutter and the 3D AR interface using Unity. The app can scan the QR code and trigger an AR avatar. It has an associate cloud service that uses IBM Cloud to enable generated cards and to have cards that can evolve as a person's CV does over time(we decided to link the LinkedIn profile and our user account).The database we use in there is SQL. Meanwhile, there is a website that users can update their personal details shown on the business cards and choose their own AR avatar. It builds by Koa and NodeJS. Users can see the details of business cards they set as favorite, and they have already scanned by the android app.</p>
</div>
</div>
</div>
</section>
<!-- /project goals-->
<!-- MosCow list-->>
<section>
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">MosCow requirements list</h3>
</div>
<div class="bg-gray p-5 mb-4">
<div class="media border-bottom py-4">
<div class="media-body">
<h4 class="mt-0">MUST HAVE</h4>
<p>1.Android application that can scan QR code on the business card and 'projects' an AR avatar onto a business card.</p>
<p>2.Cloud service that enables generated cards and to have cards that can evolve as a person's CV does over time.</p>
<p>3.Web service that allows app users to update their card details add additional information such as avatar information and set schedules for the card details to change.</p>
<p>4.The AR avatar can announce itself using Watson Speech to Text and give a 10-second overview of the owner of the card.</p>
<p>5.The AR avatar can offer the user(the one who is viewing the AR) the option of a. Listening to a more detailed work history b.listening to interests and hobbies c.listening to a more detailed education history(this could be Donne using Watson Speech)</p>
<p>6.The AR avatar can offer the user the option of setting the card as favorite.</p>
<p>7.The Android application and web can see the list of business cards that users set it as favorite.</p>
</div>
</div>
</div>
<div class="bg-white p-5 mb-4">
<div class="media-body">
<h4 class="mt-0">SHOULD HAVE</h4>
<p>1.The Android application and web can see the list of business cards that the user has already scanned</p>
<p>2.Search feature in the history page and favorite page</p>
<p>3.User(the one who scan the QR code) can start a conversion with the user(the owner of the card) directly using android phone.</p>
</div>
</div>
</div>
<div class="bg-gray p-5 mb-4">
<div class="media border-bottom py-4">
<div class="media-body">
<h4 class="mt-0">COULD HAVE</h4>
<p>1.User(the one who is viewing the AR) can see the personal information about the owner of card directly in the app and website.</p>
<p>2.The 10-second overview of the owner of the card can be recorded by the user on the website. User can set which voice they want AR avatar use(Watson Speech to text or user’s voice)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ MoScow list-->
<!--User Case Diagram-->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<h3 class="section-title">User Case Diagram</h3>
<table><tr>
<td><img src="images/usercase/3.png" class="img=responsive " width="115%"></td>
<td><img src="images/usercase/4.png" class="img=responsive" width="115%"></td>
</tr></table>
</div>
</div>
</section>
<!-- /User Case Diagram-->
<section class="section">
<div class="container">
<div class = "row">
<div class = "col-lg-10 mx-auto text-center">
<h3 class="section-title">User Case List</h3>
</div>
<div class="text-left">
<table class="table" witdth = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU1</td>
</tr>
<tr>
<th scope="row">Description</th>
<td>a user wants to see the overview of the owner of the card</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>user who receive a new business card</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the application
<br>2.the user scans the QR code on the business card</br>
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td> the application will show the 10-second overview of the owner of the business card</td>
</tbody>
</table>
<br>
<br>
<br>
<table class="table" width = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU2</td>
</tr>
<tr>
<th scope="row">Description</th>
<td> a user which scan the QR code wants to know more details about education history, work history and interests.</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>user who receive a new business card</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the application
<br>2.the user scans the QR code on the business card
<br>3.the application will show the 10- second overview of the owner oof the business card
<br>4.after that, user can choose what he/she want to know more by saying the option to the application
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td> the application will show the 10-second overview of the owner of the business card</td>
</tbody>
</table>
<br>
<br>
<br>
<table class="table" width = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU3</td>
</tr>
<tr>
<th scope="row">Description</th>
<td> a user wants to view his scan history and favorite cards.</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>all users</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the application
<br>2.the user slides right.
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td>the page is split into two parts, one for scan history, the other one is the list of favorite cards. User can switch two lists through press the corresponding icons</td>
</tbody>
</table>
<br>
<br>
<br>
<table class="table" width = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU4</td>
</tr>
<tr>
<th scope="row">Description</th>
<td> a user wants to update personal information.</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>all users</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the application
<br>2.the user slides left
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td>applications shows the setting page.User can change information directly and download their own QR code fo printing business card</td>
</tbody>
</table>
<br>
<br>
<br>
<table class="table" width = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU5</td>
</tr>
<tr>
<th scope="row">Description</th>
<td> a user wants to view scan history and favorite cards using desktop.</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>all users</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the website
<br>2.the user logs into the account
<br>3.the user choose history and favorite in the menu bar
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td>user can view the list of history and favorite card.</td>
</tbody>
</table>
<br>
<br>
<br>
<table class="table" width = 400>
<tbody>
<tr>
<th scope="row" width = 200>ID</th>
<td>UCU6</td>
</tr>
<tr>
<th scope="row">Description</th>
<td> a user wants to update AR avatar details.</td>
</tr>
<tr>
<th scope="row">Actor</th>
<td>user who is the owner of the card</td>
</tr>
<tr>
<th scope="row">Main flow</th>
<td>1.the user opens the website
<br>2.the user logs into the account
<br>3.the user choose setting in the menu bar
</td>
</tr>
<tr>
<th scope="row">Result</th>
<td>user can change the setting about AR image direcly.
</td>
</tbody>
</table>
<br>
<br>
<br>
</div>
</div>
</div>
<!-- footer -->
<footer class="bg-dark footer-section">
<div class="border-top text-center border-dark py-5">
<p class="mb-0 text-light">Copyright ©<script>
var CurrentYear = new Date().getFullYear()
document.write(CurrentYear)
</script> UCL COMPPP16 TEAM13 | a theme by <a href="themefisher.com">themefisher.com</a></p>
</div>
</footer>
<!-- /footer -->
<!-- jQuery -->
<script src="plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="plugins/slick/slick.min.js"></script>
<!-- filter -->
<script src="plugins/shuffle/shuffle.min.js"></script>
<!-- Main Script -->
<script src="js/script.js"></script>
</body>
</html>