FHLRFLIV2-Presentation/Requirements.html at master · mostafaibrahim17/FHLRFLIV2-Presentation · GitHub

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
<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>Requirements</title>

	<!-- Bootstrap core CSS -->
	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

	<!-- Custom fonts for this template -->
	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="css/grayscale.min.css" rel="stylesheet">
	<style style="display:none">
	.table {
    border-collapse: collapse !important; }
    .table td,
    .table th {
      background-color: #fff !important; }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important; } </style>
</head>

<body id="page-top">

	<!-- Navigation -->
	<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
	  <div class="container">
		<a class="navbar-brand js-scroll-trigger" href="#page-top">Team 18</a>
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
		  Menu
		  <i class="fas fa-bars"></i>
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
		  <ul class="navbar-nav ml-auto">
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="index.html">Home</a>
				</li>
				<li class="nav-item">
						<a class="nav-link js-scroll-trigger" href="Research.html">Research</a>
					</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="Requirements.html">Requirements</a>
				</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="HCI.html">HCI</a>
				</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="Design.html">Design</a>
				</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="Testing.html">Testing</a>
				</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="Evaluation.html">Evaluation</a>
				</li>
				<li class="nav-item">
					<a class="nav-link js-scroll-trigger" href="Management.html">Management</a>
				</li>
				</ul>
		</div>
	  </div>
	</nav>

	<!-- about Section -->
	<section id="about" class="about-section ">
	  <div class="container">
		<div class="row">
		  <div class="col-lg-8 mx-auto">
				<strong><h1 style="color:#729E9D"><img src="img/RequirementsIcon.png" class="custrom" alt="pic" height="75" width="75" class="img-fluid" hspace="15">REQUIREMENTS</h1></strong><br>
			<h4 class="text-white mb-4">Background</h4>

			<p class="text-white-50 text">With the development of healthcare industry, people put more and more attention on their heath status. Huge amount of health data is gathered from various approaches, such as gym, wearable equipments, etc, However, it's quite hard for users to make use of it today because it's scattered everywhere. In order to make it easier, we developed FHIR FLI Version 2.0.
			</p>

			<h4 class="text-white mb-4">Goals</h4>

			<p class="text-white-50 text">This project aims to unify and gather the health data from several sources and display it on a dashboard. The graphs should be personlized according to users' needs, and the data should be transformed into a unified version. For further consideration, we aim to implement a decentralized data storage with Solid Inrupt.
			</p>

			<h4 style="color:white;">MoSCoW Requirements List</h4><br>

			<!-- <h5 style="color:white;">Must</h5> -->
				<!-- <ul style="color:grey;">
					<li>The system must have a fully working authentication system where users 2 types of users can signup and sign in</li>
					<ul><li>Corporate users</li><li>Individual users</li></ul><br>
					<li>The system must be able to query data from the Fitbit API</li>
					<li>System must be using HTTPS to allow Fitbit authentication </li>
					<li>The system must be able acquire distinct types of data from the Fitbit API such as </li>
					<ul><li>Heart data</li><li>Activities</li><li>Body Weight</li><li>Sleep data</li></ul><br>
					<li>The system must be able to convert the Fitbit data to the FHiR format</li>
					<li>The design of the login page and the signup page must be improved (from FHiR Fli 1.0)</li>
					<li>The system must be able to store the FHiR data in a database either locally or a decentralized database</li>
					<li>Their must be a custom made API to grab the data from the database and represent the weekly statistics as graphs such as</li>
					<ul><li>BrushLineGraph for Weight & BMI</li><li>Barchart for average heart rate in certain ranges</li></ul> -->
					<!-- <ul><li>Line graph</li><li>Goal Rings</li><li>Line Graph</li><li>Bar Graph</li><li>Doughnut visualization</li><li>Clock View</li></li></ul> -->
					<!-- <li>The data must be real-time data, i.e it must be refreshed every short period of time</li> -->
				<!-- </ul><br> -->

				<img src="img/Requirements.png" alt="pic" height="1080" width="1020" class="req2"  ><br><br>


			<!-- <h5 style="color:white;">Should</h5>

				<ul style="color:grey;">
					<li>Personlized dashboard according to the personality of the user</li> -->
					<!-- <p style="color:#729E9D;">The user will be presented with a set of personality questions that will determine what information that user prefers to see and cares about and therefore according to his answers, some information will be filtered out and some will be highlighted</p> -->

					<!-- <li>More complex and decentralized user data storage system using Solid</li> -->

					<!-- <p style="color:#729E9D;">This can help making storing the users data much more efficient and gives users the ownership of data due to the fact that Solid inrupt offers decentralized databases.</p> -->

				<!-- </ul> -->

				<!-- <h5 style="color:white;">Could</h5> -->

				<!-- <ul style="color:grey;"> -->
					<!-- <li>Implement Docker containers to make deployment easier for future development</li>

						<p style="color:grey;">Deploying this web application and getting it running to start developing it can be tricky and very time-consuming, and so an excellent idea would be to implement a docker container that makes deployment much more simple.</p>
				</ul> -->


		  </div>
		</div>
	  </div>
	</section>

	<!-- Footer -->
	<footer class="bg-black small text-center text-white-50">
	  <div class="container">

	  </div>
	</footer>

	<!-- Bootstrap core JavaScript -->
	<script src="vendor/jquery/jquery.min.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

	<!-- Plugin JavaScript -->
	<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

	<!-- Custom scripts for this template -->
	<script src="js/grayscale.min.js"></script>

</body>

</html>