Prototype demonstrator applications at Region of …D4.5 Prototype demonstrator applications at...

This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 693319.

Disclaimer: This document reflects the views of the authors only and the Research Executive Agency (REA) is not responsible for any use that may be made of the information it contains.

Enclosed Document to D4.5 Prototype demonstrator application at Region of Central

Macedonia

Project acronym: Mobile-Age

Project full title: Delivering open and personalised mobile access to public services for senior citizens

Grant agreement no.: 611242

Responsible: AUTH

Contributors: AUTH, UPM, FTB

Document Reference: D4.5

Dissemination Level: public

Version: 1.01

Date: 15/07/2019

D4.5 Prototype demonstrator applications at Region of Central Macedonia

2 | P a g e

History

Version Date Modification reason Modified by

0.1 16/03/2018 Initial draft AUTH

0.9 20/03/2018 Ready for internal review AUTH

1.0 23/03/2018 Ready for QC and submission AUTH

1.01 15/07/2019 Updated coversheet AUTH

Peer Review History

Version Date Reviewed By

0.9 22/03/2018 UPM

0.9 22/03/2018 FTB


3 | P a g e

Table of Contents

History ................................................................................................................................................... 2

Table of Contents ................................................................................................................................... 3

List of figures ......................................................................................................................................... 5

List of tables .......................................................................................................................................... 6

List of abbreviations ............................................................................................................................... 7

Executive summary ................................................................................................................................ 8

1 Introduction ................................................................................................................................... 9

1.1 Objectives of WP4 ............................................................................................................................. 9

1.2 Use cases scenarios across the four field sites .................................................................................. 9

1.3 Objectives of this document ............................................................................................................ 10

1.4 Relationship with other deliverables ............................................................................................... 10

1.5 Contributions ................................................................................................................................... 11

1.6 Document Structure ........................................................................................................................ 11

2 The Mobile-Age Ecosystem: Stakeholders and Users ...................................................................... 12

3 Demonstrator Phase: Region of Central Macedonia ....................................................................... 15

3.1 Overview of Application .................................................................................................................. 15

3.2 Specification .................................................................................................................................... 15

3.2.1 Key features ............................................................................................................................. 15

3.2.2 Technical Overview .................................................................................................................. 16

3.2.2.1 Technologies ........................................................................................................................ 16

3.2.2.2 API Endpoints ....................................................................................................................... 16

3.2.3 Navigation-Workflow Diagram (State Diagram) ...................................................................... 18

3.2.4 Application walkthrough ......................................................................................................... 19

3.2.4.1 Search, locate and communicate with Hospitals ................................................................ 21

3.2.4.2 Search, locate and communicate with Doctors ................................................................... 27

3.2.4.3 Search, locate and communicate with Pharmacies ............................................................. 33

3.2.4.4 Prescriptions Service............................................................................................................ 38

3.2.4.5 Panic Button Service ............................................................................................................ 43

3.2.4.6 Application Settings ............................................................................................................. 44

3.3 Link to the demonstrator prototype ............................................................................................... 48


4 | P a g e

4 Conclusions .................................................................................................................................. 49

5 References ................................................................................................................................... 50


5 | P a g e

List of figures

Figure 1 - Overview of the Mobile-Age users and stakeholders in co-creation of open data-based public services ................................................................................................................................................ 13 Figure 2 – MADE users and end users .................................................................................................... 14 Figure 3 - CIDER Users .......................................................................................................................... 14 Figure 4: The navigation-workflow diagram representing all pages of the app ....................................... 18 Figure 5: Application main page (mobile - on the right is when the view is scrolled) ............................... 19 Figure 6: Application main page (tablet) ............................................................................................... 20 Figure 7: Application sidebar (mobile) .................................................................................................. 20 Figure 8: Application sidebar (tablet) .................................................................................................... 21 Figure 9: Search on duty hospitals ........................................................................................................ 22 Figure 10: Hospitals results ................................................................................................................... 24 Figure 11: Hospitals map interaction ..................................................................................................... 26 Figure 12: Doctors search ..................................................................................................................... 28 Figure 13: Doctors results ..................................................................................................................... 30 Figure 14: Doctors map ........................................................................................................................ 32 Figure 15: Pharmacies search container ................................................................................................ 33 Figure 16: Search pharmacies by region or by current location .............................................................. 35 Figure 17: Pharmacies map results ........................................................................................................ 37 Figure 18: Make a new prescription ...................................................................................................... 39 Figure 19: Pharmacist prescription confirmation ................................................................................... 40 Figure 20: History of prescriptions ........................................................................................................ 42 Figure 21: Panic button ........................................................................................................................ 43 Figure 22: Settings panel container ....................................................................................................... 44 Figure 23: Pharmacies settings ............................................................................................................. 45 Figure 24: Prescription settings ............................................................................................................. 46 Figure 25: Panic button settings ............................................................................................................ 47


6 | P a g e

List of tables

Table 1: Overview of the use cases covered by the field sites ................................................................ 10 Table 2: List of contributors .................................................................................................................. 11 Table 3: API Endpoints.......................................................................................................................... 16


7 | P a g e

List of abbreviations

<Abbreviation> <Explanation>

API Application Programming Interface

AUTH Aristotle University of Thessaloniki

JSON JavaScript Object Notation

NGO Non-Governmental Organization

OS Operating System

OSCPSEP Open Senior Citizen Public Service Engagement Platform

PaaS Platform as a Service

RCM Region of Central Macedonia

SaaS Software as a Service

UI User Interface


8 | P a g e

Executive summary

Mobile-Age deliverable D4.5 is a prototype release of the demonstrator application of the field site of Central Macedonia. This document is intended as an enclosed document to the deliverable D4.5. For a link to the corresponding demonstrator application prototype, the reader is referred to section 3.3 of the current document.

As described in the deliverable D4.1 “Technical requirements and specification of demonstrator applications” the requirements and specification were at varying stages for the different field sites and for the different prototype phases on the date of D4.1’s delivery. Both the project overall work plan and the co-creation process made it necessary to refrain from rigid requirements and specification and turn to a more agile development using a rapid development of successive improved prototypes.

This document accompanies the deliverable D4.5 by adding a description of the final demonstrator prototype for the field site of the Region of Central Macedonia. First it presents the basic features of the app and then for each one of them use case is described, accompanied by screenshots of the full interaction. This prototype serves as the specification for the final demonstrator.


9 | P a g e

1 Introduction

1.1 Objectives of WP4

WP4 relates to the development of

1. demonstrator applications for the co-creation processes in the four field sites (a) Bremen (b) South Lakeland (c) Zaragoza (d) Central Macedonia and

2. a set of generic mobile front-end components designed and built for accessibility and the needs of older adults

The objectives of WP4 are as follows:

• Identifying the requirements for the demonstrator applications

• Preparing design studies, mock-ups and prototype as an input to the co-creation process

• specifying and building generic front-end components

• specifying the demonstrator applications under consideration of the requirements of the co-creation process

• building the demonstrator applications reusing generic front-end components

The work in WP4 is divided in to tasks. This deliverable, in the main, describes the demonstrators as the result of the tasks T4.3 and T4.4.

1.2 Use cases scenarios across the four field sites

The following table gives an overview of the use cases covered by the four Mobile-Age field sites. It contains a brief description of the initial planed service and the connection to problem domain and the relevant data sets.

Use Case ID Social Inclusion Extending Independent Living

A safe and accessible city for elderly people

Personal Health Information

Mobile Services

Map-based social networking and mobile open information services

Assessing the needs of older adults to extend independent living

Map-based data curation and collaborative map creation

Health-related open data information services for older adults

Problem Domain

Connecting people, open data & place through social networking for older adults

Assessing and tracking the service provision for older adults to

Empowering older adults to create collaboratively maps with

Consuming open data feeds for older adults


10 | P a g e

support their independent living

accessible routes, alert city

Related public services

“Elderly care” services

“Elderly care” services

Services for older adults

Health services

Datasets

• Health service

• Social security

• Day-to-day activities

• Leisure & culture

• Living

• Social security benefits

• Government services

• NGO services

• City equipment

• Streets

• Agenda

• Suggestions and Complaints

• Open311

• Health Data

• Transportation Data

• Environmental

Trial Sites Bremen, Germany South Lakeland, UK

Zaragoza, Spain

Thessaloniki, Pilaia, Kalamaria and Thermi, Greece

Table 1: Overview of the use cases covered by the field sites

1.3 Objectives of this document

This document is an enclosed document to the deliverable D4.5. It describes the demonstrator application prototype build for the field site of Macedonia. The prototype and its description serve as the specification for the final demonstrator.

The description will focus on the different pages of the app and the API endpoints that are served to satisfy the various services.

1.4 Relationship with other deliverables

This document continues the deliverable 4.1 “Technical requirements and specification of demonstrator applications”. As described in chapter 4 of D4.1 the co-creation process has a deep impact on the development process. This document continues that specification and development process in the way, that it described the final stage of the agile development of the demonstrator’s prototype.

The deliverable is also linked with deliverables D4.2, D4.3 and D4.4, describing the prototype demonstrator applications developed for Bremen, South Lakeland and Zaragoza respectively.


11 | P a g e

1.5 Contributions

This section provides information on the contributions in this document. Table 2 presents the contributors for each chapter, along with their affiliation.

Document Chapter List of Sections Contributors Information

Name Affiliation

1. Introduction All Anastasios Kakouris

Manolis Falelakis AUTH AUTH

2. The Mobile-Age Ecosystem: Stakeholders and Users

All Michail Papamichail


3. Demonstrator Phase: Thessaloniki

All Anastasios Kakouris


4. Conclusions All Anastasios Kakouris


Table 2: List of contributors

1.6 Document Structure

The rest of this document is organised as follows:

Chapter 2 describes roles of the different users and stakeholders in the Mobile-Age ecosystem.

Chapter 3 contains the core content of this deliverable and describes the demonstrator built for the region of central Macedonia.

Chapter 4 concludes the document.


12 | P a g e

2 The Mobile-Age Ecosystem: Stakeholders and Users

Here we provide an overview of the roles of Mobile-Age users. Please note that their roles may be overlapping.

Local/regional governments: These can be managing the co-creation activities, define features of the applications, and serve as experts for a specific service domain. In many cases, local governments are also the data owners.

Software developers: These can be independent developers or companies, or working for IT-departments in public authorities or civil society organizations such as the Open Knowledge Foundation. They develop the applications using the platform and they participate in the co-creation activities, adjusting the applications to accommodate for the participants’ requests and demonstrating the results in an iterative process.

Older adults: They are a key stakeholder of Mobile-Age and the main users of the mobile applications being developed. They may participate in the core project group or engage in the broader co-creation activities.

Service providers such as government, social welfare organizations, religious congregations or NGOs may be part of the core project group or engaged for specific input. Some of the service providers may also provide (open) data.

Intermediaries include professionals and non-professionals that may support the co-creation activities by providing input for specific tasks in the co-creation process. They may become users of the applications developed.

Facilitators are experienced individuals in the work with older adults and/or groups. They support the co-creation activities through e.g. running workshops, focus groups, interviews.

Other organizations & individuals comprise for example senior citizen organizations, senior citizens’ clubs (e.g. computer clubs) but also media and journalists that may report about the co-creation activities, and thereby support engagement as well as dissemination.

Figure 1 on the next page provides an illustration of these roles.


13 | P a g e

Figure 1: Overview of the Mobile-Age users and stakeholders in co-creation of open data-based public services

Based on how these entities interact with the Mobile-Age ecosystem, they can be categorized in two main groups:

• MADE Users: These are users that make direct use of the platform and consist of the following:

• Software Developers

• Service Providers

• End Users: These are users of the prototype mobile applications developed using the Mobile-Age platform.

• Older adults

• Local /regional governments

• Intermediaries (professional and non-professional)

• Facilitators

• Other Organizations and Individuals

Figure 2 illustrates this categorization.

On the other hand, CIDER has been designed to be used by all of the previous stakeholder categories, as depicted in Figure 3.


14 | P a g e

Mobile Age Deployment Environment

App X

Applications

Software Developers

ServiceProviders

Software Developers

Older Citizens

Facilitators

Intermediaries(professionals/

non-professionals)

Local Government

Other Organizations and Individuals

Figure 2: MADE users and end users

Co-creation Information

Documentation EnviRonment

Software Developers

ServiceProviders

Software Developers

Older Citizens

Facilitators

Intermediaries

Local Government

Other Organizations and Individuals

Figure 3: CIDER Users


15 | P a g e

3 Demonstrator Phase: Region of Central Macedonia

3.1 Overview of Application

This demonstrator application phase covers the use case of providing Personal Health information and services to older adults. Specifically, this application provides:

• Searching, locating and communicating with hospitals that are on duty on a particular date/time.

• Searching, locating and communicating with doctors of various specialties.

• Searching, locating and communicating with pharmacies that are on duty on a particular date/time.

• Requesting filling of drug prescriptions online from affiliated pharmacies.

• Making emergency calls through the use of a “panic button”.

• The ability to personalise the application through a number of settings.

3.2 Specification

This section presents how our application works. Specifically, in sub-section 3.2.1, we analyse the key features of our application. Later, in sub-section 3.2.2 we present some technical overview of our application, in order for the reader to better understand our implemented system. In sub-section 3.2.3, we present the navigation-workflow diagram of our application. Finally, in sub-section 3.2.4, we demonstrate a step-by-step screenshot-based walkthrough of our application, in order to explain what procedures a user must perform within the application in order to produce the desired result and satisfy a service.

3.2.1 Key features

The key features of our application are briefly described below as a form of offered services:

1. Hospitals service: Using the application, older adults are able to search for on-duty hospitals in their city of residence. More specifically, she can select multiple clinics and search for nearby on-duty hospitals at any selected date. Additionally, the results can be shown on a map, and if the user wishes to do so, they can see the route to a desired hospital or communicate with it.

2. Doctors service: The app allows older adults to locate doctors of various specialties. More specifically, the user is able to look for one or more specialties, search for doctors and communicate with them. The results are shown on a map and the user can see the route to a desired doctor.

3. Pharmacies service: Using the app a user is able to search for on-duty pharmacies, either by specifying a desired area/neighbourhood, or by using her current location. Again, the results, will be shown on a map where a user can either obtain the route to a specific pharmacy or communicate with it.

4. Prescription service: In our application, a senior user is able to fill a prescription from an affiliated pharmacist, by scanning the corresponding barcode. Then, the pharmacist can confirm the drug


16 | P a g e

availability, and notify the user that they can pick them up by visiting the pharmacy. The procedure will be better understood in section 3.2.4.4.

5. Panic button service: In our application a senior user is able to tap a “panic button” in order to make an emergency call, either to a default city service (police, ambulance, fire department) or to a pre-defined desired call number.

6. Personalisation settings: In our application a senior user is able to personalize the application, by setting some preferences for the aforementioned services. Particularly, preferences can be adjusted for the pharmacy, panic button and prescription services and all will be analysed further in section 3.2.4.6.

3.2.2 Technical Overview

3.2.2.1 Technologies

For the implementation of this demonstrator application we used the MERN stack programming [1]. The various components of our system are described to the following paragraphs.

Firstly, the front-end component of this demonstrator application is built using the React JavaScript library [2]. The application interface is built with a responsive flexbox grid in order to be able to run smoothly in any mobile or desktop web-browser environment with all common display resolutions. Additionally, the application can be installed in an android device, normally as a native app which uses a WebView [3] that contains the web application. For that reason, we also provide a .apk file that a user can install to his android phone.

Furthermore, for the back-end of the application, we implemented a server using Node.JS [4] with Express.JS [5] which serves some API endpoints that are called by the front-end in order to retrieve the required data of the various services. Those data are stored in a Mongo [6] database in the form of JSON documents.

3.2.2.2 API Endpoints

Here we present the API endpoints that are served from our server for the retrieval of the various data that our services require. The endpoints are given in the form of a table below. Note that most of the endpoints require authentication with a token header.

Table 3: API Endpoints

Method Endpoint Request Body Description

POST /api/authenticate “gAuthObject” Authenticates a user to the server via the Google OAuth API

POST /api/users-senior “firstname” “lastname” “phone”

Creates a new user with the provided information


17 | P a g e

GET /api/users-senior/:id - Gets a profile of the user specified by provided id

PATCH /api/users-senior/:id “preferences” Patches (updates) the preferences of a user specified by the provided id

POST /api/doctors “descriptions” “eopyy”

Returns doctors of the specified “descriptions” (specialties) and the specified “eopyy” flag

POST /api/hospitals “date” “specialties”

Returns the on-duty hospitals specified by the provided “date” and including the provided “specialties”

POST /api/pharmacies

“date” “k” “latitude” “longitude” “region”

Returns a number of “k” pharmacies that are on-duty on the particular “date”. If “latitude” and “longitude” are provided then the closest pharmacies will be returned, otherwise if “region” is provided then the pharmacies within this region will be returned

GET /api/users-pharmacist - Returns all affiliated pharmacist users

POST /api/users-pharmacist “firstname” “lastname” “pharmacyinfo”

Creates a new pharmacist user with the provided information

PUT /api/users-pharmacist/edit/:id “phUser” Edits a pharmacist user specified by his “:id”

POST /api/prescriptions/senior/:id “pData” Creates a new prescription defined by “pData” for the user defined by “:id”

GET /api/prescriptions/senior/:id - Gets all the prescriptions of a senior user defined by “:id”

DELETE /api/prescriptions/senior/:id/:pid - Deletes a prescription defined by “:pid” for the senior user defined by “:id”

GET /api/prescriptions/pharmacist/:id - Gets all prescriptions ordered to the particular pharmacist user specified by “:id”

PATCH /api/prescriptions/pharmacist/:id/ “pid” Pharmacist user specified by “id” marks the prescription with specified by“pid” as verified


18 | P a g e

3.2.3 Navigation-Workflow Diagram (State Diagram)

Figure 4: The navigation-workflow diagram representing all pages of the app


19 | P a g e

3.2.4 Application walkthrough

This sub-section demonstrates the various steps involved towards accessing and using the Personal Health information and services from older adults. Each procedure is accompanied by a short description and screenshots that demonstrate the steps of the interaction.

Before diving into the following sub-sections, we present some screenshots (Figure 5, Figure 6, Figure 7 and Figure 8) of the main page and the sidebar of our application. We show both cases for mobile and tablet display screen in order to demonstrate the responsiveness of the application’s view. All the actions that a user can make will start either from the main page or the sidebar, where the user, by taping an appropriate link, can start performing a certain procedure.

Figure 5: Application main page (mobile - on the right is when the view is scrolled)


20 | P a g e

Figure 6: Application main page (tablet)

Figure 7: Application sidebar (mobile)


21 | P a g e

Figure 8: Application sidebar (tablet)

3.2.4.1 Search, locate and communicate with Hospitals

A) Fill hospitals form

Figure 9 demonstrates how a user can navigate to the hospitals search section and from there how he can complete a form to perform a search query

More specifically, the user can access the hospitals search section either by taping the hospitals tile from the main page (action labelled as “a” on the figure) or by taping the hospitals link from the sidebar (action labelled as “b” on the figure). Then a view will appear to him where he can fill a form to perform a search for on-duty hospital clinics. From there he has the following four options:

1. He can select multiple clinics. Note that this field can be left empty, and in that case all hospital clinics that are on-duty will be returned. (action “1” on the figure)

2. He can select a day that the search will be performed. The range of days that he is able to select starts from the current day to the following 6 days (like a 7-day week schedule). (2)

3. He can tap the Search button in order to perform the search. (3)

4. He can tap the Back button in order to be redirected to the main page. (4)


22 | P a g e

Figure 9: Search on duty hospitals


23 | P a g e

B) Display and interact with hospitals results

Figure 10 on the next page depicts the view that is presented to the user, after the search completes. Specifically, it lists the hospitals results and offers some interactions to the user.

At the top of the view, a user can see his search query parameters (day and clinics). Then as we can see a user can see various information about each hospital. Specifically, he can see contact details like phone number and address and also its on-duty clinics for that day. Note that the clinics for a hospital that are on-duty and were included in the search query, are written in a bold font. From this view, a user can perform the following four operations:

1. Call the selected hospital and the mobile phone call procedure will take place (1)

2. Show location of the selected hospital to the map (2)

3. Route to location of the selected hospital by constructing a path via the Mobile-Age Path Component (3)

4. Route to location of the selected hospital by redirecting to the Google Maps service (not shown on the figure) (4)


24 | P a g e

Figure 10: Hospitals results


25 | P a g e

Figure 11 on the next page demonstrates the actions a user can make when a map filled with hospital markers is viewed. Specifically, a user can tap on a hospital marker and then a window with information about this hospital, will be popped up. In this window, a user can view the address and phone number of the hospital and also can perform the following operations:

1. Make a call to that hospital (1)

2. Route to that hospital using Mobile-Age Path Component (2)

3. Route to that hospital using Google Maps (3)

4. Zoom in or zoom out of the map (4)

5. Show the user’s current location on the map (5)


26 | P a g e

Figure 11: Hospitals map interaction


27 | P a g e

3.2.4.2 Search, locate and communicate with Doctors

A) Fill doctors search form

Figure 12 on the next page demonstrates how a user can navigate to the doctors search section and from there how he can complete a form to perform a search query.

Specifically, the user can access the doctors search section either by taping the doctors’ tile from the main page (a) or by taping the doctors link from the sidebar (b). Then a view will appear to him where he can fill a form to perform a search for doctors of various specialties. From this view he can perform the following four (4) operations:

1. He can select to search multiple doctors’ specialties (1). Note that this selection is mandatory and the select area must not be left empty. Additionally, the select area will have the most frequent description search pre-selected, in order to assist the user with a frequent predefined search.

2. He can choose to search only for EOPYY doctors (2). EOPYY is a public authority that manages the subsidised doctor appointments.

3. He can tap the Search button in order to perform the search query. (3)

4. He can tap the Back button in order to be redirected to the main page. (4)


28 | P a g e

Figure 12: Doctors search


29 | P a g e

B) Display and interact with doctors’ results

Figure 13 on the next page depicts the view that is presented to the user, after the search of doctors completes. Specifically, it lists the doctors’ results and from there it offers some interactions that the user can make.

At the top of the view, a user can see the specialties of the doctors that were retrieved. Then, below, a user can see a list of doctors in the form of tiles, where various information about each doctors is presented. He can see a doctor’s medical specialty and contact details such as phone number and address. There is also an option for him to make a call to that doctor, show the doctor’s location on map and route to the location. Below are listed the operations that the user can perform:

1. Call a selected doctor, then the mobile call procedure will take place (1)

2. Show the location of a selected doctor on the map (2)

3. Route to location of a selected doctor by constructing a path via the Mobile-Age Path Component (3)

4. Route to location of a selected doctor by redirecting to the Google Maps service (4)


30 | P a g e

Figure 13: Doctors results


31 | P a g e

Figure 14 on the next page demonstrates the actions a user can make when a map with doctors is viewed. Specifically, a user can tap on a doctor marker and then a window with information about this doctor, will pop up. In this popped up window, a user can view the name, specialty, address and phone number of the selected doctor. Finally, from this window, a user can perform the following operations:

1. Make a call to that doctor (1)

2. Route to that doctor using Mobile-Age Path Component (2)

3. Route using Google Maps service (3)




32 | P a g e

Figure 14: Doctors map


33 | P a g e

3.2.4.3 Search, locate and communicate with Pharmacies

A) Navigate to pharmacies search form

Figure 15 demonstrates how a user can navigate to the pharmacies search section and from there how he can search for on-duty pharmacies.

The user can access the pharmacies search section either by taping the pharmacies tile from the main page (a) or by taping the pharmacies link from the sidebar (b). From there he has the following two options:

1. He can choose to search pharmacies by providing a region (1)

2. He can choose to search pharmacies by providing his current location (2)

Figure 15: Pharmacies search container


34 | P a g e

A-1) Search by region

In the upper section of Figure 16 on the next page, it is demonstrated how a user can search for on-duty pharmacies by providing a region.

Specifically, from this view he can perform the following four operations:

1. He has to select a region where he wants to search pharmacies. Note that this selection must not be left empty (1a)

2. He can select the date in which he wants to search on-duty pharmacies (1b). The options are “Today” or “Tomorrow”, because this is what our senior citizens decided through our workshops.

3. He can tap the search button in order to perform the search (1c)

4. He can tap the back button in order to close this search modal (1d)

A-2) Search by current location

Furthermore, in the lower section of Figure 16 it is demonstrated how a user can search for nearby on-duty pharmacies by his current location. Note that the current location of the user will be computed automatically (via the HTML5 Geolocation API), upon taping the search button.

Specifically, from this search modal he can perform the following three operations:

1. He can select the date in which he wants to search on-duty pharmacies. The options are Today or Tomorrow (2a)

2. He can tap the search button in order to perform the search (2b)

3. He can tap the back button in order to close the search modal (2c)


35 | P a g e

Figure 16: Search pharmacies by region or by current location


36 | P a g e

B) Display and interact with pharmacies results

Figure 17 on the next page depicts the view that is presented to the user, after the search completes. Specifically, it is a map which shows all the pharmacies that resulted from the search.

From this map, a user can tap on a pharmacy marker, and then a pharmacy information window will pop up. From there a user can see some general information about the selected pharmacy, like its brand name, its phone number, its schedule and if it’s active/open at that particular time and he can also perform the following operations:

1. Make a call to the selected pharmacy (1)

2. Route to the selected pharmacy using Mobile-Age Path Component (2)

3. Route to the selected pharmacy using Google Maps service (3)




37 | P a g e

Figure 17: Pharmacies map results


38 | P a g e

3.2.4.4 Prescriptions Service

A) Create a new prescription

Figure 18 on the next page demonstrates how a user can navigate to the prescriptions view section and from there how she can make a new prescription by performing some successive operations.

The successive operations the user must perform are the following:

1. Visits the prescriptions view either by taping the prescriptions tile from the main page, or by taping the prescriptions link from the sidebar.

2. Taps the “I want to make a new prescription” button. She will be redirected to a new page where she can make a new prescription.

3. Taps the “Start” button. The device’s camera will open, and the user will have to scan the medicine barcode. When the scan procedure is completed, the data of the barcode will be sent and saved to the server.


39 | P a g e

Figure 18: Make a new prescription


40 | P a g e

Figure 19 demonstrates the view that the pharmacist user sees from her own application. We created a separate application that can be used only by the pharmacist, where she can view the prescriptions made by older adults. Using this application, the pharmacist can view the orders subscribed to her and perform the following operations:

1. She can logout from the application (1).

2. She can view or edit her profile (2).

3. She can view some general information about the app (3).

4. She can call the older adult who made the prescription (4).

5. She can view the barcode of a particular prescription. From there, with her own barcode scanning device, she can scan the prescription barcode. (5).

6. She can confirm the prescription (6).

7. She can close the current window (7).

Figure 19: Pharmacist prescription confirmation


41 | P a g e

B) View history of ordered prescriptions

Figure 20 on the next page demonstrates how a senior user can navigate to the prescriptions view section and from there how she can see the history of her ordered prescriptions.

More specifically, she can tap the “I want to view my prescriptions” button and be redirected to the prescriptions history view. From there she can perform the following operations:

1. She can remove a selected prescription (1). Then a window will pop up where she can confirm if she really wants to delete the selected prescription (3).

2. She can call the selected affiliated pharmacist (2).

3. She can close the current window (4).


42 | P a g e

Figure 20: History of prescriptions


43 | P a g e

3.2.4.5 Panic Button Service

Make an emergency call

Figure 21 demonstrates how a user can make an emergency call by taping the Panic Button.

Specifically, after the user taps the panic button, a pop up window will appear, where she can use to make a particular phone call. Generally speaking, a user can add or remove any particular call number as she wishes, from the settings section. For the sake of this example, in the particular figure we show four possible calls a user can make:

1. Ambulance (1).

2. Fire department (2).

3. Police (3).

4. Another contact (4).

Figure 21: Panic button


44 | P a g e

3.2.4.6 Application Settings

A) Settings panel container

Figure 22 demonstrates the settings page of our application. The user can access the settings page by taping the settings link from the sidebar. The settings are grouped in three tabs, where each tab represents settings for a different section/service of the application.

In particular, a user can configure settings for the pharmacy service (first thing to see when she visits settings), for the prescriptions service (1) and for the panic button (2).

Figure 22: Settings panel container


45 | P a g e

B) Pharmacies settings

Figure 23 depicts the action a user can perform while on the pharmacies settings tab. From this tab she can select how many pharmacies to return when performing a search query. For example, she can select that she wants the server to return the 10 nearest pharmacies from her location or from the selected region. By taping the save button (1), this configuration is saved on the server.

Figure 23: Pharmacies settings

C) Prescriptions settings

Figure 24 analyses the action a user can perform while on the prescriptions settings tab. Specifically, from this tab the user can set a preferred affiliated pharmacist to whom the prescriptions will be delivered. She can confirm this selection by taping the “Confirm” button (1) and she can go back to main page by taping the “Back” button (2).


46 | P a g e

Figure 24: Prescription settings

D) Panic button settings

Figure 25 demonstrates how a user can personalize the panic button service. Particularly, while on this settings section, the user can add, edit or remove a panic call. From this view, the actions a user can make are the following:

1. By taping on a call (1), an edit tool-box will appear where she can perform the following operations:

a. Edit the alias or the number of the selected call (6).

b. Move the selected call up, so it is shown higher in the “panic button service window” (7).

c. Move the selected call down, so it is shown lower in the “panic button service window” (8).

d. Delete the selected call (9).

2. By taping the button “Add” (2), a window will appear to her where she can fill two input forms with the alias and the number of the new call she wishes to add:

a. She can tap the “add” button to save the results (3).

b. She can tap the “close” button to cancel this procedure and close the popped up window. (4).

She can save the results to the server by taping the “Save” button (5).


47 | P a g e

Figure 25: Panic button settings


48 | P a g e

3.3 Link to the demonstrator prototype

The demonstrator prototype application can be visited or installed in the two following ways:

1. Accessed as a normal website from this link:

https://apps.mobile-age.eu:6050/index-senior

2. Installed in an android device by installing the .apk file from this link:

https://apps.mobile-age.eu:6050/apk/senior

https://apps.mobile-age.eu:6050/index-senior

https://apps.mobile-age.eu:6050/apk/senior


49 | P a g e

4 Conclusions

This document accompanies the release of the demonstrator application prototype for Central Macedonia. It demonstrates its use and shows the steps involved towards a number of use-cases.

In the following weeks the evaluation period of the application is expected to start, as part of Task 3.6 “Mobile Service Evaluation”. The app is planned to incorporate the results and feedback of this evaluation process. That means that the state of the demonstrators presented in this document does not reflect the final version, which will be delivered at the end of the project. During the use of the application by the older adults in the districts, it is to be expected that some bugs or problems will be reported. The improvement of the app will be continued, of course, so the content and the look of the app’s page may change slightly in the future.


50 | P a g e

5 References

[1] "MERN Stack Programming". [Retrieved February 2018]. [Online]. Available: http://mern.io.

[2] "React Javascript Library". [Retrieved February 2018]. [Online]. Available: https://reactjs.org.

[3] "Android WebView". [Retrieved February 2018]. [Online]. Available: https://developer.android.com/reference/android/webkit/WebView.html.

[4] "Node.JS Javascript Runtime". [Retrieved February 2018]. [Online]. Available: https://nodejs.org/en/.

[5] "Express.JS Framework". [Retrieved February 2018]. [Online]. Available: https://expressjs.com.

[6] "MongoDB". [Retrieved February 2018]. [Online]. Available: https://www.mongodb.com.

Prototype demonstrator applications at Region of …D4.5 Prototype demonstrator applications at...

Documents

Transcript of Prototype demonstrator applications at Region of …D4.5 Prototype demonstrator applications at...