1

A Multimedia Based Hybrid System For Health Care Application

A Project Report Presented to The Faculty of the College of Engineering San Jose State University In Partial Fulfillment Of the Requirements for the Degree Master of Science in General Engineering

By Akash Panwar Vikas Dahuja Yogesh Goyal May, 2012

Copyright 2012 Akash Panwar , Vikas Dahuja , Yogesh Goyal ALL RIGHTS RESERVED

APPROVED FOR THE COLLEGE OF ENGINEERING

Prof. Weider D. Yu, Project Advisor

Mr. Deepak Wadhwani, Industry Advisor, Cisco Systems

Dr. Leonard Wesley, Director, MSE

6 ABSTRACT A Multimedia Based Hybrid System for Health Care Application Healthcare refers to diagnosis and treatment of diseases. Healthcare field is one of the most advanced fields today but it still needs some convergence. Primary health care and secondary health care services are provided all over the world but the gap between doctors, patients, medical staff and inter hospitals needs to be bridged. There is a big amount of information that needs to be transferred and inculcated. This information which needs to be shared is not just vocal and text today. With the advancement in technology, the other file types such as images, videos, X-ray images, MRI results need to be shared as well. Today, the communication cannot be done just by text or documentation. Multimedia plays an important role in such cases. Our goal here is to design a multimedia hybrid system which will help converge all the communication methods and file types for the better communication between hospitals, doctors and patients. This website will provide a single platform for all communication for patients, doctors and the hospital. Everything will be stored on a server and accessible only by authorized users. This will include text, all consultation data, patients detail, patients images such as when they reach the hospital after an accident, their results and surgery videos. This system will not just be accessible through desktops and laptops but also through mobile devices. This will make it a multimedia hybrid system. The idea is to bring different people and devices together through multimedia for better communication to have a better healthcare system.

Acknowledgments We would like to thank our Project Advisor Prof. Weider D. Yu for his guidance throughout this year. We are highly indebted to him for all his support and time in completing this project. We would also like to express our thanks to Prof. Leonard Wesley and Mr. Deepak Wadhwani for their constant motivation and guidance.

8 Table of Contents Chapter 1. Project Overview ............................................................................................1 Introduction .................................................................................................................1 Project goals and objectives ................................................................................1 Problem Statement ..............................................................................................2 Project Motivation ...............................................................................................2 Project application and impact ............................................................................2 Project results and expected deliverables ............................................................3 Economic Aspects, Social and Environment Impacts .........................................4 Proposed Areas of Study and Academic Contribution ................................................5 Current State of the Art ...............................................................................................7 Chapter 2. Project Architecture .....................................................................................13 Introduction ...............................................................................................................13 Architecture Subsystems ...........................................................................................14 Chapter 3. Technology Descriptions ..............................................................................19 Client Technologies ...................................................................................................19 Middle-Tier Technologies .........................................................................................21 Data-Tier Technologies .............................................................................................23 Chapter 4. Project Design ...............................................................................................25 Client Design .............................................................................................................25 Middle-Tier Design ...................................................................................................35 Data-Tier Design .......................................................................................................35 Chapter 5. Project Implementation................................................................................36 Client Implementation ...............................................................................................36 Middle-Tier Implementation .....................................................................................54 Data-Tier Implementation .........................................................................................58 Chapter 6. Performance and Benchmarks ....................................................................63 Benchmark .................................................................................................................63 Testing .......................................................................................................................65 Methodologies ...........................................................................................................65 White Box Testing: ...........................................................................................65 Black Box Testing: ............................................................................................66 Chapter 7. Deployment, Operations, Maintenance ......................................................67 Deployment ...............................................................................................................67 Operations..................................................................................................................67 Maintenance ..............................................................................................................69 Chapter 8. Summary, Conclusions, and Recommendations ........................................70 Summary....................................................................................................................70 Conclusions ...............................................................................................................70 Recommendations for Further Research ...................................................................71

9 References .........................................................................................................................72

10 List of Figures Figure 1 Smartphone Market Share in US in March 2011 ................................................18 Figure 2 Kaiser Permanente ...............................................................................................20 Figure 3 Health Vault.........................................................................................................21 Figure 4 No More Clipboard..............................................................................................21 Figure 5 Curas EMR iPhone App ......................................................................................23 Figure 6 Haiku ...................................................................................................................24 Figure 7 System Architecture ............................................................................................25 Figure 8 Users of the System .............................................................................................26 Figure 9 Interfaces provided to the user ............................................................................26 Figure 10 Modes of communication ..................................................................................26 Figure 11 XAMPP Controller ............................................................................................35 Figure 12 Class Diagram ...................................................................................................36 Figure 13 Registration Activity Diagram ..........................................................................37 Figure 14 Login Activity Diagram ....................................................................................37 Figure 15 View appointment Activity Diagram ................................................................38 Figure 16 Update appointment Activity Diagram .............................................................38 Figure 17 Schedule appointment Activity Diagram ..........................................................39 Figure 18 View image Activity Diagram...........................................................................39 Figure 19 Play video Activity Diagram .............................................................................40 Figure 20 Patient List retrieval Swim Lane Diagram ........................................................40 Figure 21 Prescribing tests Swim Lane Diagram ..............................................................41 Figure 22 Registration State Diagram................................................................................42 Figure 23 View profile page State Diagram ......................................................................42 Figure 24 Schedule appointment State Diagram ...............................................................42 Figure 25 Update appointment State Diagram...................................................................43 Figure 26 Upload images State Diagram ...........................................................................43 Figure 27 Upload videos State Diagram ............................................................................44 Figure 28 Viewing image State Diagram ...........................................................................44 Figure 29 Play video State Diagram ..................................................................................45 Figure 30 Web Application UI Header ..............................................................................46 Figure 31 Dropdown menus...............................................................................................46 Figure 32 Progress bar .......................................................................................................47 Figure 33 Schedule appointment form ...............................................................................47 Figure 34 JavaScript based pop-up calendar .....................................................................48 Figure 35 Only available time slots are shown after a REST call is made to the server ...48 Figure 36 View all appointments .......................................................................................49 Figure 37 Modal - view selected appointment ...................................................................50 Figure 38 Update appointment modal................................................................................50 Figure 39 Delete appointment modal .................................................................................51 Figure 40 Update user profile ............................................................................................52 Figure 41 Confirmation box...............................................................................................52 Figure 42 Upload image.....................................................................................................53 Figure 43 Image gallery thumbnails ..................................................................................53 Figure 44 View image modal .............................................................................................54 Figure 45 Video upload form .............................................................................................54

11 Figure 46 Video gallery thumbnails ..................................................................................55 Figure 47 Pop-ups with message .......................................................................................55 Figure 48 WebUIHelper.java code snippet ........................................................................56 Figure 49 Mobile app home page ......................................................................................57 Figure 50 Dropdown menu in mobile interface .................................................................58 Figure 51 Schedule appointment .......................................................................................59 Figure 52 View all appointments .......................................................................................60 Figure 53 Tablet home page ..............................................................................................61 Figure 54 Tablet schedule an appointment ........................................................................61 Figure 55 Upload image through tablet .............................................................................62 Figure 56 Upload video through tablet ..............................................................................62 Figure 57 Libraries used ....................................................................................................63 Figure 58 web.xml code snippet ........................................................................................64 Figure 59 Ohconstants.java code snippet...........................................................................64 Figure 60 Packages structure .............................................................................................65 Figure 61 Appointment.java code snippet .........................................................................65 Figure 62 SessionHandle.java ............................................................................................66 Figure 63 Database classes ................................................................................................68 Figure 64 Appointment table .............................................................................................68 Figure 65 Doctor table .......................................................................................................68 Figure 66 Media box table .................................................................................................69 Figure 67 Patient table .......................................................................................................70 Figure 68 Timeslot table ....................................................................................................70 Figure 69 Userprofile table ................................................................................................71 Figure 70 JUnit Testcase snippet .......................................................................................75 Figure 71 Testing application - Selenium IDE ..................................................................76

12 List of Tables Table 1 Resources and cost of the project .........................................................................78

13

Chapter 1 Project Overview

Introduction Project Goals and Objectives Today, there are many applications over the web that can be used to improve the appointment system i.e. a patient can go online and take an appointment. But these systems just provide a static interface which has only text and radio buttons and check boxes which can be used to take an appointment and cancel an appointment. What if a patient wants to communicate more with a doctor? What he wants to show an image of his burns or his swollen knee to a doctor? The goal of our system is to bridge this gap between a doctor and a patient. Our goal is to provide a system through which a doctor and a patient can communicate better and during different frames of time and that too more frequently. As per w3schools definition [1], Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more. Therefore, use of multimedia can be really useful for healthcare application because it gives you a chance of interacting with more real time data. For example, in case of an emergency, the doctor can instruct his assistants to provide some very critical first aid while he is driving to the hospital. This can be done over phone of even a video call. This can future be extended to the point where can get the surgery done by skilled sub ordinates, even without being physically present on the spot. Problem Statement Health is the most important thing in a mans life. If one has a million dollars to spend in a month, he can buy anything but health. We have come a long way from the start of computers to design and create world class medical equipments which can help cure people. A man is

14 connected to millions of other people through social networking sites. Half of mans problems can be solved through communicating well. In health care field, if the communication is done better, the problem can be solved early for a patient. But in this hi-tech world, that gap is still there between a patient and a doctor. Project Motivation The gap is not because of the lack of technology, its because of the lack of proper medium. Millions of people are connected through facebook and other social networking sites but one of the most important communications is still limited i.e. between a patient and a doctor. In countries like India, China and Malaysia, a patient can walk-in a doctors place and can talk. But in developed countries like the United States, a patient has to call up and take an appointment and then he/she gets to meet the doctor in a couple of days. During this time, the patients condition may get worse or better and the time at which the doctor sees the patient may not be the best time. Project Application and Impact The project will be used in the Health Care industry. The level at which this project can be used is from a small clinic to a big hospital. Since everyone has to communicate with a doctor, this projects application will be pervasive. Academically, the project will help our team to learn mainly about two things. One is domain and other is technology. The domain is the health care domain which is one of the most important. Project Results and Expected Deliverables The project result will be a system which is accessible by the following kind of users Doctor

15 Patient Guest Admin

These users will be provided with a system which can be deployed over any server and can be accessed through a browser. The project will provide an interface to a patient through which he can see all his details on one application and communicate better with the doctor. The project will also provide the other side of the interface to a doctor through which he can see a patients details and provide prescription, more information to him through this medium. The implementation will provide the support of text, images and videos through this interface. Also, the mobile implementation will provide an easy access to the system through which a patient can inform a doctor about details about his health condition, injuries or other personal details along with the basic appointment system. The main results of the project will be: A web application supporting multimedia. This will enable the patients to upload videos, send videos to doctors, share images related to surgery, injury and talk to the doctor over the same web application. A mobile application will enable the user to access the same application over a mobile phone. The main deliverables of the project will be: Project Demo which will give the visual presentation of the whole project explaining how the whole system works. Project Code will include all the source files and property files.

16 Project Report will include the explanation of each part of the project specifying things like how it was coded, how to configure and the function of each component. Economic Aspects, Social and Environment Impacts As the project is a software application and hence will have economic aspects for different organizations. We are planning to give this application to different organizations free of cost. This will help the smaller organizations who do not have any online system setup to have a platform for their doctors and patients. The social impacts will be beneficial for everyone because rather than putting efforts to go to a doctor and take an appointment. Rather patients and doctors can keep in touch through this application online and through mobile devices. Proposed Areas of Study and Academic Contributions Why Healthcare? As per an article published in New York Times in Aug 15th, 2009[6], Barack Obama said, there is a big debate on future of healthcare in United States. He suggested number of ways by which we can have health care reforms to ensure people get better healthcare services. In this address, he suggested four steps for healthcare reforms, which are being implemented over last two years. After conducting a lot of research on different HealthCare applications present in the market, we realized that there is no one application which provides the complete solution to doctors and patients. Also we realized the main mode of communication between doctors and patients is text or phone. How Multimedia Can Be Useful in Healthcare Several medical schools in United States require students to use iPhone or iPod touch. Joseph Kim [7] is an advocate of using some tablets like iPad and Kindle for educating medical

17 students. For the very simple reason, medical books are usually filled with photos and color rich images and use of these multimedia equipments can add another dimension to their learning. As a conclusion, we can say that if we are developing software for healthcare, it should be compatible on mobile platforms also. Which Mobile Platform to Use Now that we understand the importance of multimedia for healthcare professionals, the milliondolor question is, which mobile platform should our application be developed for? Lets have a look at some numbers, which will help us take the right decision. Nielsen Company conducted a survey [8] of US mobile customers and found out as of march 2011, 37 percent of the Smartphone owners had an Android OS device, 27 percent had an Apple iOS device and BlackBerry claimed 22 percent of market share. The complete breakdown is indicated in the chart below.

18

Figure 1 Smartphone Market Share in US in March 2011

[Source: http://blog.nielsen.com/nielsenwire/online_mobile/u-s-smartphone-market-whos-the-most-wanted/]

How We Are Different Based on our research, there are Web EHR (Electronic Health Record) systems and there are mobile EHR systems, which run only on one platform (mostly iPhone). Our product will be different from the existing on following points: 1. We will be developing our system as web-services. These web-services can be used by both web and mobile devices. The business logic has to be written once and it can be consumed by different platforms and languages.

19 2. Also these web-services can be used in a new system as well as a system which has already been deployed. The advantage of using these web-services is more in case a hospital or clinic already has a system and wants to integrate some new functionality from our application. 3. In case of mobile devices, our focus will be on Android devices as the market of Android devices is flourishing as shown in Fig. 6. 4. Except few web applications, almost all EHR systems are very expensive. Especially mobile applications cost as high as $50 for download and $20 per month [9]. However, our application will available for free. Current State of the Art There are two types of applications, which are already being developed in this field: first web applications and second mobile applications. We will look at them one by one. Top 3 Web Applications in Healthcare [2]: 1. Kaiser Permanente: Kaiser Permanente offers a good interface for the patients. A patient can login to his accounts and see his information. He can book an appointment and also can send an email to his doctor.

20

Figure 2 Kaiser Permanente

[Source:https://members.kaiserpermanente.org/kpweb/securedClusterQuery.do?cluster=mydoctor ]

2. HealthVault: Its a Microsoft company. You get a free account, which includes sharing of personal health records with many Web applications, EMR Systems, fitness devices, physicians, family members or other you choose [2].

21

Figure 3 Health Vault

[Source:http://www.microsoft.com/presspass/emea/presscentre/pressreleases/MSHealthVault.mspx]

3. NoMoreClipboard: This tool helps you in compiling, managing and sharing our medical records easily, which eliminate the doctors clipboard.

Figure 4 No More Clipboards

[Source: http://www.phrstoday.com/nomoreclipboard.html ]

Top 3 Mobile Applications in Healthcare There are around 7000 [4] iPhone and Android healthcare applications. However, there are very few, which are similar to the one we are trying to create. Based on our discussion with Dr

22 Mukesh Goyal, who is an expert in healthcare systems, here is products which are close to our product. 1. Curas EMR Mobile for iPhone: This app is used to connect you to patient information anywhere on cellular network. Its a native iPhone application. With Curas EMR Mobile, you can [5]: View your schedule View and update patient medications Respond to telephone encounters Fax prescriptions Order and view labs/imaging tests Enter Out of Office charges View progress notes

23

Figure 5 Curas EMR iPhone App

[Source: http://www.curas.net/PRODUCTS_EMRMOB.htm]

2. Haiku from Epic Systems It provides the users the Electronic Health Records, clinical schedules, health summaries, test results and notes through secure access.

24

Figure 6 Haiku

[Source: http://mobihealthnews.com/6030/epic-systems-launches-iphone-ehr-app-haiku/4/]

25

Chapter 2 Project Architecture

Introduction The system is an N-Tier application and multi-layer application. The important logical layers of the application are: Client: Sends requests to the Server and expects a return value depending on the result of the operations. Server: All the operations are performed in this layer. The requests received from the Client side are identified and processed. Depending upon the request, calls are made to the functions on the server side. The database is updated according to the function requirement and the reply is sent back to the client with the required results. Database: All the data is saved in this layer. Tables and fields are updated according to the client calls and server operations.

Figure 7 System Architecture

26

Figure 8 Users of the System

Figure 9 Interfaces provided to the user

Figure 10 Modes of communication

Architecture Subsystems The Online Health Care web and mobile application is divided into three subsystems: 1. Front End User subsystem 2. Middleware Web Services 3. Database Subsystem

27 Frontend subsystem This subsystem consists of the user interface that a user sees. A user can access the system in various ways i.e. through web app on desktops and laptops, or through the mobile app on her smart phone or tablet. It provides the user access to the whole system through which he can view, edit, update, and delete the desired information. This interface provides user access to his profile, appointments, medical history and multimedia files. It interacts with the underlying business logic to get that information from the back end database system. When a user logs into the system, his privilege is set depending upon the type of user he is. A doctor can access a lot more information about all the patients under him where as a patient can access only his records. Depending upon the privilege level, a user is shown the information. The following kind of users can access the system: 1. Admin Admin can add new doctors and patients to the system. Doctors and patients need to request admin for the system access. Admin provides doctors and patients with the username and password. Admin needs to make sure that the users are provided privileges accordingly to the doctors and patients. Administrator can perform following functions: Admin can add new patients and doctors in the system. Admin can delete a doctor or patient from the system in case they unsubscribe from the system. 2. Doctor Doctor can perform the following functions: Doctor can access all the appointments for the current day and manage them.

28 Doctor can update or change an appointment i.e. time, date of an appointment. Doctor can view images and videos uploaded by all the patients who have uploaded their images for him. Doctor can view/update his profile and change the information except his username. Doctor can view, update the test results of patients.

3. Patient Patient can perform the following functions: Patient can see all his appointments from the very first appointment to last appointment. Patient can add an appointment according to the time slots available for a particular doctor. Patient can update his appointment for a new time slot according to the time slots available for a particular doctor. Patient can add comments to his appointments. Patient can upload new images and tag an image by a doctors name so that it is visible in that particular doctors gallery. Patient can upload new videos and tag a video by doctors name so that it is visible in that particular doctors gallery. Patient can view his image gallery. Patient can view his video gallery. Patient can view his results and reports. Patient can view and update his profile. He can change all the fields except the noneditable fields like username.

29 Middle ware subsystem This subsystem consists of all the business logic. Middleware provides the front end with the services which are used to provide all the functions to the user at the front end. When a user clicks a button on the front end i.e. the user interface, fires an event which interacts with the business logic. This business logic has the programming logic which takes the input from the front end and returns the output to the front end. Front end has the capability to catch the results from the middleware. The middle ware provides the functional algorithms that exchanges information between front end and the back end i.e. the database. Business logic comprises of different objects to represent different entities in the application. These entities interact with each other and the database through methods. In single tiered applications, where everything is coupled together it becomes problematic sometimes. If the system will be growing in future, it is better to have a multi-tiered architecture which is easy to maintain. Database Subsystem Database or the back end subsystem of the application is where all the data is persisted. In multitier applications, the business logic stores and reads the data from the database only. When a user (patient or a doctor) wants to see all the appointments, this data is fetched from the database by the business logic. All the data and states are stored in the database and are accessed by the user at the front end. The middleware acts as the interface between the front end and the database.

30

Chapter 3 Technology Descriptions

The technologies used for this project are chosen in a way such that that they are really compatible with each other. All these technologies used are open source. Client Technologies For this project, the user can access the system through two application interfaces: 1. Web interface 2. Mobile interface Web Interface Web interface is the interface that a user sees on a desktop or laptop screen when he goes to the specific URL. Since this is a online health care application and will be accessed by doctors as well as patients who are not very good with computers, the interface has to be very user friendly as well easy to use. The following technologies were used to create the client side of the project Web Client : HTML , CSS , AJAX , JavaScript, JQuery HyperText Markup Language (HTML) is the main markup language for web pages. HTML elements are the basic building-blocks of web pages. CSS is used to provide the better look and style to the markup language. AJAX is used to create asynchronous web applications. The benefit of using AJAX is that when a user sends a request to the server and when the server replies, the whole webpage is not loaded; only the required div of the page is loaded. This helps in very smooth transition of data from server. The client side of the application interacts with the web-services through JQuery and JavaScript. JQuery is a cross-browser JavaScript library. JQuery is open source and free

31 to use. It is designed to make it easier to navigate, create animations, handle events and develop AJAX applications. Twitter Bootstrap Twitter Bootstrap is a collection of tools for creating web pages and application. It provides a certain style sheets and JavaScript files. To use the CSS styling in the web pages we need to use its classes in our application in the HTML. Including these classes gets the information from the CSS and JavaScript files and hence let us has that look in our web page. The advantages of Twitter Bootstrap It is very light It is easy to use It provides a good and user friendly interface It is easy to deploy. Only certain files are needed to be included.

Mobile Interface We made this application such as it could be accessed from a desktops, laptops as well as mobile devices such a mobile phone running Android OS or a tablet running the Android OS. The user interface on the mobile devices can be accessed in two ways: Mobile App On the browser

A user can access the application on a mobile device in two ways. He can click on the browser icon and put the URL in the address bar which will take him to the website. The other way is that he can install the app for Online Health Care System on his mobile device and just click on the icon on the mobile interface.

32 The technologies used for the mobile interface are: Android Development Tools (ADT) It is a plugin that is installed in the Eclipse IDE to provide an integrated environment. Using this we can deploy and test the mobile apps on the emulator provided by ADT. WebView WebView class is an extension of Androids view class that helps make the already created web app to be compatible with the mobile devices.

ADT and WebView are used to give a very good user interface to the users. Moreover the CSS is changed according to different size of devices so as to give the best experience to the users. For a mobile device, the front page for example has only limited but sufficient number of buttons so as to guide them to next pages, whereas for tablets that have bigger display than a mobile phone, a full page with all the controls is viewed.

Middle-Tier Technologies Following technologies were used to implement the middle-tier of the application. We tried to work on the latest technologies for both the purpose of learning and making a good stable project. Java EE RESTful web Services Frame: Eclipse Helios/Indigo for Java EE Connector: JDBC in case of MySQL Junit

33 Xuggle APIs for uploading videos

JAX-WS Java programming language API For middle-tier we selected RESTful technologies because our application is more about resources such as a patients profile, his results, reports, images and videos. RESTful works on HTTP protocol where everything can be considered as a resource. The benefits of RESTful APIs are:
REST is simple yet really powerful Provides HTTP caching and help handle high load. A very complex application can be organized as resources. The same APIs can be used by web client as well as a mobile client

Eclipse We used Indigo Version (Build id: 20110615-0604) of Eclipse. Using this we could do all the development of the project at one place only.

JUnit To test the web-services before we moved to the front end of the application, we used JUnit. We wrote test cases in JUnit and verified if the data in the JSON format was being returned correctly by the web-services or not. Version - junit-dep-4.10.jar Android Development Toolkit

34 To develop the interface between the web services and mobile client, we had to use the ADT integrated with eclipse to write the code for the mobile application Version - 17.0.0.v201203161636-291853

Xuggle Xuggle is a free open-source library for Java developers to uncompress, manipulate, and compress recorded or live video in real time. We used this library to compress and encode the video and uncompress it for streaming. This library helps in compressing the video from higher resolution to lower resolution so as to save bandwidth as well. http://www.xuggle.com/

Other tools and libraries used in the middle-tier are apache-tomcat-6.0.33 This will be used as the web-server for the application apache-ant-1.8.2 To make the process of building the .war files easier and also for configuration, we will be using apache-ant apache-wink-1.1.3-incubating This is the container for RESTful services that we will be coding

Data-Tier Technologies MySQL As we know MySQL is worlds mostly used relational database management system, we used it for our project to store text and images.

JDBC Connector

35 JDBC connector was used to connect the database with the Java code in the middle-tier. The database tables in MySQL store all the information about doctors, patients, profiles, test results, reports and appointments. The images are stored as byte code in the tables only. We are storing the videos as compressed videos on our server machine only. To store the videos in MySQL table was not possible because of the size and other technical issues. PHPMyAdmin To have a good user interface to the database, we used XAMPPs PHPMyAdmin. This gives us a very easy to use user interface through which we can make and edit tables in no time.

Figure 11 XAMPP Controller

36

Chapter 4 Project Design

The following class diagram illustrates the project design. In the class diagram, different entities are shown interacting with each other.

Figure 12 Class Diagram

Also the whole project is shown in the form of activity diagrams. We divided the whole project in graphical representations of workflows of activities. These activity diagrams really helped each of us to understand the project better before implementation.

37 Activity Diagrams

Figure 13 Registration Activity Diagram

Figure 14 Login Activity Diagram

38

Figure 15 View appointment Activity Diagram

Figure 16 Update appointment Activity Diagram

39

Figure 17 Schedule appointment Activity Diagram

Figure 18 View image Activity Diagram

40

Figure 19 Play video Activity Diagram

Swim Lane Diagrams Swim Lane Diagrams show the flow of information between various entities in the system and let user understand the flow more clearly.

Figure 20 Patient List retrieval Swim Lane Diagram

41

Figure 21 Prescribing tests Swim Lane Diagram

State Diagrams The state diagrams describe the behavior of a system. In a state diagram, a system is shown as composed of a finite number of states. The behavior is represented in series of events that are called states. Every action or event leads to another state. Since in the web-applications, the state can be changed to any other state from any page, there is no exit state in the following state diagrams.

42

Figure 22 Registration State Diagram

Figure 23 View profile page State Diagram

Figure 24 Schedule appointment State Diagram

43

Figure 25 Update appointment State Diagram

Figure 26 Upload images State Diagram

44

Figure 27 Upload videos State Diagram

Figure 28 Viewing image State Diagram

45

Figure 29 Play video State Diagram

46

Chapter 5 Project Implementation

Following sections cover the project implementation of different tiers. Client Implementation As mentioned in the technologies used and the project design, we used Twitter Bootstrap, HTML, CSS, JavaScript and JQuery for our front end. Through JQuery and AJAX calls, the front end sends request to the server and receives response from the server. Here are some of the screenshots of the code and the UI.

Figure 30 Web Application UI Header

We have a very clean and light top bar for all the pages. This top bar is made using Twitter Bootstrap libraries.

Figure 31 Dropdown menus

We have dropdown menus for all the links. We can add or remove more links in these dropdown menus very easily. For wait time, when the data is being loaded, we show the progress bar. This helps the user know that the data is being processed.

47

Figure 32 Progress bar

Figure 33 Schedule appointment form

48

Figure 34 JavaScript based pop-up calendar

Figure 35 Only available time slots are shown after a REST call is made to the server

49 For every doctor, the visible slots are only those which are visible. To check this, when a doctor is selected by a patient, a GET call goes to the server again to get all the available slots so that there is no conflict in two appointments.

Figure 36 View all appointments

A user can view an appointment in the form of a table with the provision of viewing, updating and deleting a particular appointment with the easy buttons at the bottom.

Modals To view, update or delete an appointment, we are not taking a user to a new page. Everything is done through AJAX; only the required content is loaded. Also rather than loading the content on the same page, we are using Modals. This gives the required information in the highlighted pop-up. CSS and JavaScript are used for its look and feel.

50

Figure 37 Modal - view selected appointment

Figure 38 Update appointment modal

51

Figure 39 Delete appointment modal

Once view all appointments link is clicked, an HTTP GET (get all appointments) call goes to the server. When the server sends the JSON object back to the client, JQuery handler takes the JSON object and puts it into an HTML Table. When a particular appointment is selected for view, update or delete intention, a GET call goes to the server to load the appointment in the Modal. Once the appointment is loaded in a modal, and a person clicks either Update or Delete button, the PUT or DELETE call goes to the server to update the data in the database.

User profile A user can update his profile at anytime. He can update all the details except the username that is provided by the admin.

52

Figure 40 Update user profile

Alert boxes Different CSS styling has been used to give a user feeling of an error or a success.

Figure 41 Confirmation box

53 Multimedia

Figure 42 Upload image

Thumbnails Images are viewed not as links but as thumbnails.

Figure 43 Image gallery thumbnails

If a particular image is selected, it opens in a modal

54

Figure 44 View image modal

Figure 45: Video upload form

55

Figure 46 Video gallery thumbnails

When a video is clicked upon, it plays in a new modal window similar to images. Pop-ups on hovering over We have used hover on pop messages to give user a very good experience. When a user hovers over an image or a video, a pop-up with a relevant message appears on the screen.

Figure 47 Pop-ups with message

WebUIHelper Class One of the most important Java classes we used was WebUIHelper. This class returns the common html code to all the JSP files. This way the maintenance of html and jsp files is easier.

56

Figure 48: WebUIHelper.java code snippet

This class has the common code for top bar, drop down menus and side bar.

57 Mobile front-end

Figure 49: Mobile app home page

58

Figure 50: Dropdown menu in mobile interface

59

Figure 51 Schedule appointment

60

Figure 52 View all appointments

61 Tablet front-end

Figure 53: Tablet home page

Figure 54 Tablet schedule an appointment

62

Figure 55 Upload image through tablet

Figure 56 Upload video through tablet

63 Middle-Tier Implementation Middle-tier is pure RESTful web-services implemented in J2EE. We used Eclipse as the IDE. All the web-services were coded first with dummy data to make end to end connections first. Once we were able to get the JSON response from the web-services, we connected the webservices to the database.

Figure 57 Libraries used

64

Figure 58: web.xml code snippet

Constants The constants that were to be used a lot many times, we used final variables. It is a good programming practice.

Figure 59: Ohconstants.java code snippet

65 Packages Middle-tier is the most complex part of our project and we tried our best to keep everything structured. Everything was kept in a different package so that if want to add a new module it is very easy to add.

Figure 60 Packages structure

Figure 61: Appointment.java code snippet

66 Security

Figure 62 SessionHandle.java

Assumption: our system should be running on https because we are using personal/sensitive data over the internet. Hash table We use hash table to store the session of a user. The advantage of storing a session and validating before any request is catered is that it makes the application much more secure. But security comes with a cost. To store all the sessions for every user means, we are storing a lot of data in memory. To reduce memory usage, we store only userId, privilege, and sessionId. By sessionId we identify the sessions. Every client needs one session so to reduce storage, we store the least information required. Moreover, sessionId is encrypted. So every time a user comes and logs in, we maintain session for all the logged on users on the server side and we use cookies as a method for the user to send his sessionId. The sessionId is encrypted integer from which we retrieve session of the user from the hash table. How it works When the web-server starts, it generates the random number as a base for generating session Ids. It secures the application in a way such that nobody can guess a session Id. When the user provides username and password (we store MD5 hash of the password in the database), we calculate md5 hash of the password, and compare it with the stored password hash in the table in

67 database. Then we create a new session and add that to the session table and generate a corresponding session Id as a key in the hash table. Then that key is encrypted which is an integer value and sent to the user as a cookie. Whenever a user sends a request, the browser automatically sends that cookie to that server. For each HTTP request, the cookie is checked in the hash table. If the session Id in that cookie is valid, then we extract the users information from the session and then on the basis of userId and privilege of that user, corresponding actions such as extracting data from database, are done. If the session Id is invalid, the server returns 401-Unauthorised error. This way only authorized user can log in and request for resources.

Data-Tier Implementation We used MySQL database for our project. There are total of 6 tables in the database 1. appointment 2. doctors 3. mediabox 4. patients 5. timeslots 6. userprofile The images are being stored in the MySQL database only. The videos are being stored on the server and their thumbnails are fetched and shown in the video gallery.

68

Figure 63 Database classes

Figure 64 Appointment table

Figure 65 Doctor table

69

Figure 66 Media box table

70

Figure 67 Patient table

Figure 68 Timeslot table

71

Figure 69 Userprofile table

72

Chapter 6 Performance and Benchmarks

Benchmark This application is built for web interface as well as mobile interface. So it is expected that a lot of people will be accessing this application from desktops as well as mobile devices. Also one of the major concerns is the UI and ease of using the application.

We have kept our focus on the following benchmarks 1. What functions or operations does the application offer to the user? We have worked very well towards this aspect of the project. From scheduling an appointment for a patient to updating his profile, from uploading a photo and video to see the gallery of images and videos are the main components of this project. From text, appointments and multimedia, everything is provided to the patient in their profile.

2. How can a user access the application? Since most of the users like to access their system on the go, we have made this application a hybrid application. This application can be accessed through desktops and laptops with internet connection. Users with android mobile devices such as smart phone and tablets can access it on the go, in the web browser as well as though the mobile app.

3. How user friendly is the application? We have used a very good UI for both the web app and the mobile app. We have used Twitter Bootstrap libraries which are being used by most of the new start ups. It is very to use and

73 provides a 12 grid layout which when used on different devices with the responsive CSS and JavaScript can automatically adjust its size depending upon the type of device. Also the pop-ups, thumbnails, and drop-down menus provide a very easy to navigate interface.

4. How secure is the application? As discussed in the technical implementation, we are using encryption of password and session authentication at the server side at every HTTP request made by the user. The passwords are encoded and then stored in the table. When a user logs in, a new session is generated and the user is provided with the key. At the server side, a hash table is maintained for the session Id and the session. The session comprises of only 3 elements which makes it very light and hence reduces memory consumption when large number of users access the website at the same time.

5. Accuracy? The web-services written are very solid in the term that all the error handling is done pretty well. Since every time a user sends an HTTP request, the session Id is verified and depending upon the user Id and his privilege, the response i.e. the requested data is sent. Also at every logout, the session is destroyed at the server side. Moreover, the algorithm used for the appointment module is written very well. For example, a user cannot select a time slot before he selects a doctor because selecting a doctor will invoke the database and then only the available slots will be viewable at the user end for that doctor.

74 Testing The main goal of the testing activity for our project was to come up with such a test plan that we can fix as many bugs as we could in the initial phases only. We performed both white box and black box testing for our project. Since our project has RESTful web services that require a good white box testing so we needed to cover all the branches and paths using white-box testing Black box testing was needed to test the output on the GUI for a particular input or a request. GUI testing was a very important part of our testing plan because we will have both web-based and mobile-based system. We did the unit testing while developing these web-services. This includes using JUnit test cases and testing methodologies to cover all paths and loops. Functional Testing Functional testing refers to validating the requirements. If the system is not doing what it is supposed to, functional testing captures all the bugs. The behavior of the system should match the requirements and specifications. Non-functional Testing Non-functional testing focuses on aspects like reliability, scalability and availability.

Methodologies To test the system end to end, we used the below mentioned methodologies: White Box Testing In white box testing, the UI is bypassed. Inputs and outputs are tested directly by test drivers and stubs, and the results are compared against specifications. This form of testing ignores the

75 function of the program under test and will focus only on its code and the structure of that code. The test cases that have been generated shall cause each condition to be executed at least once. We used JUnit to write all our test cases for white box testing.

Figure 70 JUnit test case snippet

Black Box Testing Black box testing typically involves running through every possible input to verify that it results in the right outputs using the software as an end-user would. We used Selenium to do the UI testing for our web application. Selenium IDE is an integrated development environment for Selenium scripts. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you too easily and quickly record and play back tests in the actual environment that they will run.

76

Figure 71 Testing application - Selenium IDE

77

Chapter 7 Deployment, Operations, and Maintenance

Deployment The Online Health Care System will be deployed on the following system Server requirements Operating System: Windows 7 Professional Edition / Mac Snow Leopard Processor: Pentium IV or above RAM: 4GB for Demo Hard Disk: Minimum 80GB

Client requirements Web App Client: Mozilla Firefox 11.0, Chrome for WebApp

Mobile App Operating System: Ice Cream Sandwich Client: Chrome or the direct mobile App

Operations The application is made using Java, Eclipse, MySQL, JavaScript, HTML, CSS, Android WebView, JQuery, and Twitter Bootstrap. All these technologies and tools are open source and do not need any expenses. Basis resource requirements for this project would be: a. b. The basic requirement is that that Doctor and the doctor should have internet connection. The main database will be on a central server.

78 c. The client (both doctor and Doctor) needs to have a computer and/or a mobile device to

access the system. d. e. The system should be up and running 24X7. The Doctor and doctor should have camera enabled mobile device, webcam for video

communication.

Resource and Cost

Table 1 Resources and cost of the project

Resource Laptop Windows 7

Cost $800 $5 (for students from department)

Quantity 3 3

Total Cost $2400 $15

Eclipse, Android SDK, Tomcat, MySQL, JUnit, Simulator Android Mobile phone Total Cost

Free

$0

$200

1 (we can do testing on one device only)

$200

$2615

79 Technology requirements The required resources for this project are mainly open source tools. We will be using technologies like Java EE, Web Services, SOAP, RESTful APIs, MySQL, all of which are available without any cost.

Maintenance There is no cost to maintain the site except that the server needs to be running 24x7. If a hardware device fails, then only there will be a maintenance cost. Following are the mandatory maintenance tasks: 1. Availability: The server and website should be available 24*7. It should always be up and running. 2. Performance: Every web page should correspond within the latency rate of three seconds. 3. Capacity: MySQL servers capacity of storing data depends on the free space on the servers hard disk. As the number of users increase, the disk space will need to be increased on the server. 4. Data Backup: The data needs to be backed up periodically so in case of a major catastrophe like flood, earthquake etc, the data should not be lost. And the site can be brought up quickly and data can be restored. 5. Code Backup: The revision history of the code should be saved so that in case of a problem, the website can be reverted back to last good state.

80

Chapter 8 Summary, Conclusions, and Recommendations

Summary Online Health Care is an application which helps patients and doctors interact without meeting each other. Apart from scheduling appointment online, this application provides the provision of sharing multimedia files such as .jpg images and .mp4 videos. This is very useful for patients and doctors as the doctor can see a patients photo online and can judge his condition. This way a doctor can see the progress a patient is making and prescribe him the medicines accordingly. The application can be accessed on both desktops/laptops as well mobile devices. Looking at the market, Android is one of the fastest growing mobile device OS. We have made this application for Android mobile devices such as Smart phones and tablets. This helps the patients and doctors look at the records, schedule/update an appointment on the go. Since this application lets users share very sensitive information, we have done a good job in securing the data through password encryption and session management on the server side. One of the best things about the project is its UI which is very user friendly and easy to navigate.

Conclusions As San Jose State University students, this project has given us a lot of exposure in the latest technologies like RESTful APIs, Twitter Bootstrap, JQuery. Our horizon has definitely broadened. We have done this project from end to end and taken care of the testing as well. Also this project gave us a chance to build an application that runs on both desktops as well as mobile devices. Looking at the market today, there are great opportunities in the market if one know mobile applications development. So along with learning, this project will definitely help us get a good job as software engineer.

81 Recommendations for Further Research This project has been built in module. This approach helps in adding modules in future. There are some features that can be added. 1. Prescription module: A new module which keeps track of all the prescriptions can be included in the application. 2. General Health Guide: A new module which informs the patients about what to and what not to do when they are ill can also be added. 3. News: A news module/page where the patients are informed about the ongoing flu shots camps, free eye care etc, can also be added. 4. Security: Right now we have password encryption and session management in the application. We can add the provision of it running on HTTPS which will make it even more secure.

82 References [1] HTML Multimedia. Retrieved Oct, 2011, from http://www.w3schools.com/html/html_media.asp [2] Erin Johansson. (May 10, 2010) Top 25 Free & Freemium Web Apps to Manage Your Healthcare and Medical Data. Retrieved Oct, 2011, from http://nursepractitionerdegree.org/top-25-free-freemium-web-apps-to-manage-yourhealthcare-and-medical-data.html [3] Kaiser Permanente website [Oct 2011]. Retrieved Oct 2011 from https://members.kaiserpermanente.org/kpweb/securedClusterQuery.do?cluster=mydoctor [4] Brian Dolan. (March 11, 2010) 3 million downloads for Android health apps. Retrieved Oct, 2011, from http://mobihealthnews.com/6908/3-million-downloads-for-android-healthapps/ [5] Curas website. (Oct, 2011) Curas EMR Mobile for iPhone Available Now! Retrieved Oct, 2011, from http://www.curas.net/PRODUCTS_EMRMOB.htm [6] Barack Obama. (Aug 15, 2009) Why we need healthcare reforms. Retrieved Oct, 2011, from http://www.nytimes.com/2009/08/16/opinion/16obama.html?pagewanted=all [7] Joseph Kim. An iPad should be mandatory in medical school. Retrieved Oct, 2011, from http://www.kevinmd.com/blog/2010/04/ipad-mandatory-medical-school.html [8] NielsenWire (April 26, 2011) U.S. Smartphone Market: Whos the Most Wanted? Retrieved Oct, 2011, from http://blog.nielsen.com/nielsenwire/online_mobile/u-s-smartphonemarket-whos-the-most-wanted/ [9] Curas website. (Oct, 2011) Curas EMR Mobile for iPhone Available Now! Retrieved Oct, 2011, from http://www.curas.net/PRODUCTS_EMRMOB.htm

83 [10] Web Standards Project website. Retrieved Jan, 2012, from http://www.webstandards.org/learn/faq/ [11] Rodriquez Alex (Nov 6, 2008) RESTful Web services: The Basics. Retrieved Feb,2012 from http://www.ibm.com/developerworks/webservices/library/ws-restful/

[13] Android Developers. Retrieved March, 2012 from http://developer.android.com/sdk/index.html

[14] Android WebView, Retrieved March, 2012 from http://developer.android.com/reference/android/webkit/WebView.html

[15] Selenium HQ projects. Retrieved April, 2012 from http://seleniumhq.org/projects/ide/

84 Appendices Appendix A. Description of CDROM Contents