environmental public health · 2018-03-14 · title: environmental public health pages: 34...

www.usn.no

FMH606 Master’s Thesis 2018Industrial IT and Automation

Environmental Public Health

<op onal figure>

fig/HSN_logo_en.pdf

Ola Anton Grytten

Faculty of Technology, Natural Sciences and Mari me SciencesCampus Porsgrunn

http://www.usn.no

www.usn.no

Course: FMH606 Master’s Thesis 2018Title: Environmental Public Health

Pages: 34Keywords: <keyword one, keyword two, …>

Student: Ola Anton GryttenSupervisor: <Supervisor’s Name>

External partner: <Project partner>Availability: Confidential

Summary:

The University College of Southeast Norway accepts no responsibility for the results andconclusions presented in this report.

http://www.usn.no

Preface

Porsgrunn, 18th February 2018

Ola Anton Grytten

5

Contents

Preface

ContentsList of Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9List of Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Introduc on1.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Literature Study2.1 Server and Web Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.1.1 ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.1.2 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2 Mobile-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2.1 Xamarin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2.3 Push notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.3.1 Firebase Cloud Messaging - FCM . . . . . . . . . . . . . . . . . . . 182.3.2 Apple Push Notification Service - APNs . . . . . . . . . . . . . . . 182.3.3 SignalR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.3.4 PushSharp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.3.5 Use Azure Mobile Apps for sending push notifications . . . . . . . 20

2.4 MVC ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.4.1 Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

So ware Requirements, Specifica ons and Design3.1 Requirements and Specifications . . . . . . . . . . . . . . . . . . . . . . . . 25

3.1.1 Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.1.2 WebSite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.1.3 Mobile-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.2 System Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.2.1 Website FURPS+ . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.2.2 Services on Server - FURPS+ . . . . . . . . . . . . . . . . . . . . . 293.2.3 Mobile-App - FURPS+ . . . . . . . . . . . . . . . . . . . . . . . . 293.2.4 Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

7

Contents

3.3 Design sketches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.3.1 Mobile-App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.3.2 Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

8

List of Figures

1.1 English variant of the HSN logo. . . . . . . . . . . . . . . . . . . . . . . . 15

2.1 Descisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.2 PushSharp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.3 MVC block diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.4 MVC example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.1 System overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.2 System overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283.3 Website Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303.4 Mobile-App Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.5 Services Use Cases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313.6 Mobile-App sketches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.7 Website Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.8 Website Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

9

List of Tables

11

Nomenclature

bla

Symbol Explanation

A/D Analogue-Digital-ConverterCMR Common Mode Rejectionfoo Foobar Bar

13

Introduc on

Figure 1.1: English variant of the HSN logo.

. Background

15

Literature Study

There are many technologies and frameworks which could be used in this project.

Figure 2.1: Descisions

. Server and Web Client

. . ASP.NET

Open source framework made by Microsoft. https://www.asp.net/

17

2 Literature Study

. . Bootstrap

Supported in Visual Studio 2017. https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap

. Mobile-App

. . Xamarin

https://docs.microsoft.com/en-us/visualstudio/cross-platform/build-apps-with-native-ui-using-xamarin-in-visual-studio

. Push no fica ons

Push notification library need to be supported in both the framework for the server andfor the mobile-app framework. There are many factors to take into account. Does thenotification appear if the the app runs in the background or even killed, or does the appneed to be open in order to get notifications? How much data will it consume? How muchdelay could be tolerated?

It should be possible to dynamically create notification services for data sources wereusers can choose to subscribe on relevant data sources.

Another important concept is the that it must be supported on both Android and iOS.If the Xamarin framework seems to work properly it should work on both platforms. Ifusing Android Studio to develop an Android app, it is important that the library also issupported in an iOS development framework in case of expanding.

. . Firebase Cloud Messaging - FCM

Firebase Cloud Messaging is a service which can send out push notifications to users.

. . Apple Push No fica on Service - APNs

Apple Push Notification Service.

18

2.3 Push notifications

. . SignalR

https://www.asp.net/signalr SignalR is a library that support real-time functionality inweb applications. Furthermore, the library is also supported on both Android and iOS.

Android(Java): https://github.com/SignalR/java-client

iOS(Swift): https://github.com/AutosoftDMS/SignalR-Swift

Android and iOS(Xamarin(C#)): https://components.xamarin.com/view/signalr

If notifications should be sent using signalR the app always need to be connected to theserver to receive push notifications. What happens if the user terminate the app? It maybe possible to run a background task which could hold the connection open, but then theapp might use more data. SignalR may be more suited for real time communication whenthe user interacts with the app. Depending on the functionality, it might not need realtime communication at all.

SignalR supports differents ways of transporting data:

1. WebSocket

2. Server Sent Event

3. IFrame

4. Ajax long polling

It would choose the must fitted option since old browsers may not support all of them.

https://eraizes.ipsantarem.pt/moodle/pluginfile.php/34078/mod_resource/content/7/How%20ASP.NET%20SignalR%20Works.pdf

. . PushSharp

PushCharp is a library that will send push notifications through FMC and APNs. TheApp need to be registered within the FMC and APNs services in order to work. It iswritten in C# and can be used with the asp.net framework. If an user want to subscribe forpush notifications, the app can register the application token within the server database.This could be done with a traditionally API. https://github.com/Redth/PushSharp

19

2 Literature Study

Figure 2.2: PushSharp

. . Use Azure Mobile Apps for sending push no fica ons

https://developer.xamarin.com/guides/xamarin-forms/cloud-services/push-notifications/azure/

. MVC ASP.NET

MVC is an architecture that separate an application into three components, which ismodel, view and controller. The model handles the logic for the applications, the viewhandles the UI and the controller handles user interactions. A great advantage of thearchitecture is the loose coupling between the three components. Due to this, it is possibleto develop each components more or less separately. Moreover, this also makes testing ofthe application easier.

20

2.4 MVC ASP.NET

Skrive litt om fordela/ulempe MVC vs Webforms.

Figure 2.3 show the flow in a MVC application. When a browser request a page, therouter will direct the traffic to the correct controller, which will then return a view withHTML/JavaScript code and model data.

Figure 2.3: MVC block diagram

. . Example

This section cower a basic example of how MVC work. When the site load it will printout names and age generated in a simple for loop. The example consist of four main partswhich is routing, controller, model and view. Figure 2.1 shows the routing class whichwill route the traffic to desired controller. It also define the default controller of no one isselected, which in this case is the home controller.

This example was created as an empty MVC project with the ASP.NET framework anduses bootstrap as styling.

public class RouteConfig{

public static void RegisterRoutes(RouteCollection routes){

routes .IgnoreRoute(”{resource}.axd/{∗pathInfo}”);

routes .MapRoute(name: ”Default” ,url : ”{controller}/{action}/{id}” ,defaults : new { controller = ”Home” , action = ”Index” , id = UrlParameter.Optional }

);}

}

Listing 2.1: Routing

Figure 2.2 shows the model which will generate names and age in the constructor. If thename were to be fetched from a database it should happen in the model. However, theycould also be fetched in the controller but that may reduce the readability of the code.

public class User{

public string name { get ; set ; }public string age { get ; set ; }public User(string name_, string age_){

name = name_;age = age_;

21

2 Literature Study

}}

public class Users{

public List<User> users = new List<User>();Users(){

for (int i = 0; i < 5; i++){

User user = new User(”Name” + i .ToString() , i .ToString());users .Add(user );

}}

}

Listing 2.2: Model

The view is shown in Figure 2.3. It will print name and age in a table based on the modeldata.@model reportExample.Models. Users<table class=”table␣table−hover␣table−condensed␣col−md−12”>

<thead><tr>

<th>Name</th><th>Age</th>

</tr></thead>@foreach (var item in Model. users){

<tr><td>@item.name</td><td>@item.age</td>

</tr>}

</table>

Listing 2.3: View

Figure 2.4 shows the home controller. As for this example, it will create a new model ofthe type Users and return it with the view.

public class HomeController : Controller{

// GET: Homepublic ActionResult Index(){

Users users = new Users();return View(users );

}}

Listing 2.4: Controller

The layout of the page is placed in a separate file. When creating a view it is possibleto set the layout instead of write the whole layout into the view. The layout is shownin figure 2.5 and contain the code line @RenderBody(), which is were the view will beinserted.<!DOCTYPE html><html><head>

<meta charset=”utf−8” /><meta name=”viewport” content=”width=device−width,␣initial−scale=1.0”><title>@ViewBag. Title − My ASP.NET Application</title><link href=”~/Content/Site . css” rel=”stylesheet” type=”text/css” /><link href=”~/Content/bootstrap .min. css” rel=”stylesheet” type=”text/css” /><script src=”~/Scripts/modernizr−2.6.2. js”></script>

</head><body>

<div class=”navbar␣navbar−inverse␣navbar−fixed−top”><div class=”container”>

<div class=”navbar−header”>

22

2.4 MVC ASP.NET

@Html.ActionLink(”Application␣name” , ”Index” , ”Home” , new { area = ”” }, new { @class = ”navbar−brand” })</div><div class=”navbar−collapse␣collapse”>

<ul class=”nav␣navbar−nav”></ul>

</div></div>

</div><div class=”container␣body−content”>

@RenderBody()<hr /><footer>

<p>© @DateTime.Now.Year − My ASP.NET Application</p></footer>

</div><script src=”~/Scripts/jquery−1.10.2.min. js”></script><script src=”~/Scripts/bootstrap .min. js”></script>

</body></html>

Listing 2.5: Layout

Figure 2.4 shows the result when running the application. The the view and layout ismarked in the figure.

Figure 2.4: MVC example

https://msdn.microsoft.com/en-us/library/dd381412(v=vs.108).aspx

https://xtianguevara.com/creating-your-asp-net-mvc-5-application-from-scratch-for-beginners-using-entity-framework-6-and-identity-with-crud-functionalities/

https://msdn.microsoft.com/en-us/magazine/dd943053.aspx

23

So ware Requirements, Specifica onsand Design

. Requirements and Specifica ons

A website should be able give the users a quick overview of different data sources and givea short indication of the now-value and condition of the data, which for example couldbe air quality. By further investigate the data it should by possible to get a graphicalpresentation of the data by time, which could be for days, weeks, years. It should bepossible to compare data from different time periods, for example compare present yearwith previous years etc.

The users must be logged in in order to gain access to the system and the differentfunctionality for presenting data. It should be able to generate reports based on thegathered data. This functionality should not be available to ordinary users.

The data should also be available through a Mobile-App which should have the samepossibilities as the website when it comes to user functionality. In addition, it should alsobe possible to generate push notifications if the data goes over or under a specific limit.The users should be able to choose to subscribe on the data sources he want to get pushnotifications for.

The system shall be able to create services that will let sensor system send data to thesystem. It also should be possible to generate services that will collect data from externaldata sources which should be presented in the system.

It should be easy to install or move the system.

. . Server

The server will be based on the open source ASP.NET Core framework. The websitefunctionality shall be written based on the MVC architecture. It has different maintasks.

• Run and provide the website functionality.

25

3 Software Requirements, Specifications and Design

Figure 3.1: System overview

• Communicate with Mobile-App and send push notifications.• Provide a solution for receiving data from monitoring stations.• Collecting data from external systems.

Database will be used for data storage.

. . WebSite

The website main purpose is to provide the users with information about data within thesystem and give registered users expanded functionality to perform analytic tasks.

• Provide an quick overview of the data and states within the system.• User login to gain access to analytic functionality.• Login is mutual for both website and Mobile-App.• Register new user.• Generate reports based, which will not be available to ordinary users.

26

3.1 Requirements and Specifications

. . Mobile-App

The main purpose of the mobile-App is to generate push notifications when a data sourceis crossing a specific limit. As a result the user should not need to check the app manuallyfor checking the sources.

• Login• Provide a quick overview of the data within the system.• More detailed information about the data sources.• Subscribe/unsubscribe on data sources.

27


. System Design

Figure 3.2: System overview

. . Website FURPS+

Functional

• Register User.

• Log in.

• Dashboard Overview.

28

3.2 System Design

• Graphical Representation.

• Create reports.

Usability

Reliability

Performance

Supportability The server should target the ASP.NET Core framework.

Design challenges/limitation

. . Services on Server - FURPS+

Functional

• Generate push notifications.

• Get data from external data sources.

• Receive sensor data.

Usability

Reliability

Performance

Supportability


. . Mobile-App - FURPS+

Functional

• Log in.

• Subscribe on Push Notification

• Dashboard Overview.

• Graphical Representation.

29


Usability

Reliability

Performance

Supportability


. . Use Cases

Figure 3.3: Website Use Cases

30

3.2 System Design

Figure 3.4: Mobile-App Use Cases

Figure 3.5: Services Use Cases

31


. Design sketches

. . Mobile-App

Figure 3.6: Mobile-App sketches

. . Website

32

3.3 Design sketches

Figure 3.7: Website Dashboard

Figure 3.8: Website Graph

33

environmental public health · 2018-03-14 · title: environmental public health pages: 34...

Documents