-
Notifications
You must be signed in to change notification settings - Fork 0
/
design.html
323 lines (258 loc) · 20.2 KB
/
design.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href=index.html>Microsoft and Nuffield Health Bot</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="requirements.html">Requirements</a>
</li>
<li>
<a href="research.html">Research</a>
</li>
<li>
<a href="hci.html">HCI</a>
</li>
<li>
<a href="design.html">Design</a>
</li>
<li>
<a href="testing.html">Testing</a>
</li>
<li>
<a href="evaluation.html">Evaluation</a>
</li>
<li>
<a href="management.html">Management</a>
</li>
<li>
<a href="github.html">Github</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</br></br>
<!-- Page Content -->
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Design</h2>
<p class="lead">In this section we will go through the technologies used...</p>
</div>
</div>
</div>
<div class="content-section-a">
<div class="container">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#arch" aria-controls="home" role="tab" data-toggle="tab">Architecture</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Hardware</a></li>
<li role="presentation"><a href="#dev" aria-controls="profile" role="tab" data-toggle="tab">Development Tools</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Design Patterns</a></li>
<li role="presentation"><a href="#messages" aria-controls="settings" role="tab" data-toggle="tab">Database Structure</a></li>
<li role="presentation"><a href="#messages2" aria-controls="settings" role="tab" data-toggle="tab">Implementation Details</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-left: 30px">
<div role="tabpanel" class="tab-pane" id="dev"></br>
Due to the number of people involved in this project and the number of tasks we were all undertaking, it was very important to have dedicated communication channels so that not only the team could stay in touch but also the TA and supervisor for this project. Below we outline the methods we used for communication and collaboration between the team members.
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/ucl.png">
</div>
<div class="col-xs-11">
<h3>Team 31</h3>
<p>Our sister team was Team 31 with whom we had regular meetings to discuss the architecture and also when we were speaking to the representatives from Microsoft. This has added a layer of complexity to the project in that we had to make sure our plans for communications within the architecture model alligned with each other. </p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/slack_icon.png">
</div>
<div class="col-xs-11">
<h3>Slack</h3>
<p>Our primary mode of communication between our supervisor, the client, our TA and fellow team members was slack. We used this service to not only communicate for general needs but also created separate channels in order to break the discussions down into their relevant topics. This made our discussions more efficient and the ability to share and pin files also made it easier to keep track of documents without needing to access our Google Drive storage. It also allowed us to to communicate with our sister team on this project as certain aspects of our project overlapped with theirs.</p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/google_icon.png">
</div>
<div class="col-xs-11">
<h3>Google Drive</h3>
<p>For this project along with our Github repositories for code, we also needed a place to keep track of our written documents such as biweekly reports and research undertaken. Google Docs provided the easiest way for us to store and access these files from a centralised area while also being able to edit documents in google docs itself - also allowing us to all work on files at the same time is a useful feature.</p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/github_icon.png">
</div>
<div class="col-xs-11">
<h3>Github</h3>
<p>We used Github over the course of this project in order to keep track of two main areas - our website and our project code. All members made regular commits as they completed their assigned tasks and it allowed us to easy make updates to our work and add in new features. We would also be able to share this repository with the client in order to show him the progress being made and so we would be able to ask for feedback.</p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/trello_icon.png">
</div>
<div class="col-xs-11">
<h3>Trello</h3>
<p>While the other tools we have used have been useful to communicate and organise our work, we did not want the tasks to be drowned out in the discussions and we did not want to have to put it in a document as this felt rather cumbersome. As a result we decided to use Trello, as it made it easy to assign tasks to people, see the breakdown of the tasks and what categories they belonged to as well as being able to set reminders on the task. This proved a much better way to organise tasks todo than using a document. </p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/skype_icon.png">
</div>
<div class="col-xs-11">
<h3>Skype</h3>
<p>Due to the number of people involved on this project from UCL's side, Microsoft's side and Nuffield's side - it invariably meant that due to tight schedules it would be hard to find a time where everyone would be able to meet in person. As a result we undertook a fair few meetings via Skype calls to make it easier for everyone involved. </p>
</div></div>
<div class="row">
<div class="col-xs-1">
</br><img style="height: 70px" src="img/ms_icon.png">
</div>
<div class="col-xs-11">
<h3>MS Tools</h3>
<p>Since Microsoft was a partner with us in this project, we were able to use some of their tools to aid us. This particular tool was very similar to trello and we used this over Trello when we need to deal with breaking up major tasks into sub tasks as it was more efficient and allowed us to keep Trello for general purpose uses.</p>
</div></div>
</div>
<div role="tabpanel" class="tab-pane active" id="arch"></br>
<h3 class="lead">Description</h3>
<h4 class="lead">Interface and Bot Server Interaction</h4>
<p class="well">
The app.js is the server where the bot lives there. So when the user starts the chat with the bot as long as
there's no need for the bot to interact with the API wrapper, the interaction is limited to the interface user is dealing with
and the bot server. For example when the user asks about the closest nuffield gym.
</p>
<h4 class="lead">API Wrapper and Nuffield Booking Bug</h4>
<p class="well">
We are going to make our own API Wrapper upon Nuffield's API to get the data that we need,
which is basically viewing the classes available in a specific Nuffield gym, booking a gym class providing the parameters
like date, time and type of a class or canceling a certain booking.
</p>
<h4 class="lead">Bot Server and API Wrapper Interaction</h4>
<p class="well">
Whenever the user wants to book a class, cancel a class, give feedback or view a list of bookings, bot server sends a request
depending on user's demand and comes back to the user with confirmation or failure response.
</p>
<h4 class="lead">Bot Server and Messaging Queue Interaction</h4>
<p class="well">
As we are collaborating with Team 31, after the bookings, cancelations and feedbacks, the data would be sent
to their messaging queue for organizations to be able to access the data and do analysation on it.
</p>
<center><img src="img/arch.png" style="width:700px;height:500px;"></center>
<h4 class="lead">Speech Design</h4>
<p class="well">
The picture below depicts the user and the bot interaction in a case that user provides all the information in one go.
</p>
<center><img src="img/speech.png" style="width:700px;height:500px;"></center>
</p>
<h3 class="lead">Final Deliverable Architecture Design</h3>
<center><img src="img/arch%202.png" style="width:700px"></center>
</div>
<div role="tabpanel" class="tab-pane" id="profile"></br><h4 class="lead">Amazon Dot</h4>
<p class="well">
The only hardware needed for this project was the Amazon Dot so that we could test the Alexa Skill on it during development.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages"></br>
The following is a quick schema of our databse:
<div class="well"> <center><img src="img/matin/database.png"></center> </div>
</div>
<div role="tabpanel" class="tab-pane" id="messages2"></br>
<h2>Impelementation of Key Functionalities</h2>
<p>View Available Classes</p>
<div class="well">
We have trained our bot for View Classes intent which understands different formats of “I want to view available classes”. We managed to do this through Microsoft LUIS. Through a waterfall design, the bot tries to get information of the date the user wants to see the available classes for. After recognizing the date as an entity, we make a get request to the endpoint /viewAvailableClasses of our API to get the list of available classes for that certain date, providing the date in the body of the request. Then we display the available classes in a carousel which is implemented with Microsoft bot cards.
</div>
<p>Booking Classes</p>
<div class="well">
The bot is also trained to recognize the intent book a class. After the recognition of this intent, it tries to trigger the entities name and date of the class. After making sure this values are not null fallowing the waterfall design, it shows the desired class in a card which the user needs to authenticate himself by clicking on the button “book class”. After user logging in through their facebook account, within a time interval of 15 seconds, we wait for the access token to be received. If the token was received successfully, we carry on the process of booking the class after getting a confirmation from the user, otherwise it would send a timeout message to the user to let them know they haven’t successfully been authenticated within that interval and they need to try again. After confirmation, we make a HTTP POST request to the endpoint /bookClass, providing the name and the date of the class as well as the userID in the body of the request.
</div>
<p>View Active Bookings</p>
<div class="well">
Our bot allows the users to be able to view their active bookings simply by triggering active bookings intent and making a HTTP GET request to the endpoint /viewActiveBookings providing the userID.
</div>
<p>Cancelling Classes</p>
<div class="well">
The same process as booking the class is applied here.
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings"></br>
<h3 class="lead">Observer Pattern</h3>
<div class="well">
<p>
It’s a design pattern where we have one object which has many observers, whenever the state of that object changes, that object will notify all its observers by calling one of their methods. In our application, we had to implement different intents, like viewing, booking, canceling classes. Each of these intents where observers, whenever user sends a message to the bot that includes any of these intents, the event associated to that certain intent starts running.
</p>
</div>
<h3 class="lead">Middleware/Pipelining</h3>
<div class="well">
<p>
This design pattern is basically passing a function’s output as the next function’s input(parameters) which is technically building a flow of transformation. When implementing an intent, as we had to follow a request-response flow, we used this design pattern. So when we got user’s response, we passed it to the next function to respond with the appropriate answer and this goes on until the conversation ends.
</p>
</div>
<h3 class="lead">Dependency Injection</h3>
<div class="well">
<p>
This design pattern is used to pass any services or dependencies to the dependent object. In our application, to be able to keep track of the user’s responses and the classes information, we had to pass in a session object to every method to be able to get user_session as well as transforming the previous user responses. Also in our API implementation, we had to pass in our database configuration to be able to query to the database.
</p>
</div>
<h3 class="lead">Waterfall design pattern</h3>
<div class="well">
<p>
For designing our dialog, we used waterfall design pattern which lets you collect input from user using sequence of steps, and a bot is always in a state of providing user with information or asking a question and waiting for input. That’s how we got the information about the classes user wants to book and collected the incomplete information in order to proceed the request.
</p>
</div>
<h3 class="lead">Interpreter Pattern</h3>
<div class="well">
<p>
Given a language, this pattern defines a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language. Since we used Microsoft LUIS (natural language processing framework), we had different intents in our model each of them associated with a certain grammar, after the bot recognized that grammar inside a user’s response, it matches that with the associated intent. The same thing with recognizing different entities inside a specific intent.
</p>
</div>
</div>
</div>
</div></div></div></div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>