big project software engineering project name skin disease detection app

LIST OF FIGURESFigure 2-1 Use Case Diagram...5Figure 2-2 Patient Activity Diagram...6Figure 2-3 Patient Activity Diagram of “Make schedules with doctor”...7Figure 2-4 Doctor Activity Dia

HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF ELECTRICAL ENGINEERING

BIG PROJECT

SOFTWARE ENGINEERING

Project Name:

Skin Disease Detection App

Students: Đặng Hoàng Lan (20203801)

Phạm Quang Huy (20200282)

Đỗ Hoàng Khôi (20200332)Class: CTTT Điện tử 01-K65

Instructor: ASSOC PROF LE THI

LAN

TABLES OF CONTENT

LIST OF FIGURES i

INTRODUCTION i

CHAPTER 1: OVERVIEW OF OUR SKIN DISEASES DETECTION SYSTEM 2

CHAPTER 2: SYSTEM DESIGN ANALYSIS 3

2.1 System of Requirements 3

2.1.1 Functional Requirements 3

2.1.2 Non-functional Requirements 3

2.2 Functional Requirement Specifications 4

2.2.1 Use Cases 4

2.2.2 Detailed Use Case 4

2.2.3 Use Case Diagram 5

2.2.4 Activity Diagram for user (patient) 6

2.2.5 Activity diagram for doctor 8

2.3 Database Design 9

2.3.1 Entity-Relationship Diagram (ER Diagram) 9

2.3.2 Relational-Relationship Diagram (RR Diagram) 9

2.3.3 SQL Schemas 10

2.4 Server Architecture 11

2.5 Client-side architecture 11

CHAPTER 3 DEPLOYMENT & TESTING 12

3.1 Testing of functionalities 12

3.1.1 Testing login and register features 12

3.1.2 Testing skin disease detection feature 12

3.1.3 Testing editing profile (both for Patient/Doctor) feature 12

3.1.4 Testing “Appointment” feature (for Doctor) 13

3.1.5 Testing “Appointment” feature (for Patient) 13

3.2 User Interface 13

3.2.1 Login/Register Screens 13

3.2.2 Patient Screens 14

3.2.3 Doctor Screens 16

3.3 Source code 18

CONCLUSIONS 19

Overall Conclusions 19

Future Improvements 19

LIST OF FIGURES

Figure 2-1 Use Case Diagram 5

Figure 2-2 Patient Activity Diagram 6

Figure 2-3 Patient Activity Diagram of “Make schedules with doctor” 7

Figure 2-4 Doctor Activity Diagram 8

Figure 2-5: Entity-Relationship Diagram 9

Figure 2-6 Relational-Relationship Diagram 9

Figure 3-1 From left to right: Welcome Screen, Register Screen, Login Screen 13

Figure 3-2 Patient Main Screen 14

Figure 3-3 Interface of “Take skin photo” and “My detection history” functionalities 14

Figure 3-4 Interface of “Edit Profile” functionality 15

Figure 3-5 Interface of “My Appointments” functionality 15

Figure 3-6 Doctor Main Screen 16

Figure 3-7 Interface of “My Appointments” functionality 16

Figure 3-8 Interface of “Edit Profile” functionality 17

Skin diseases are a prevalent health issue that affects people of all ages andraces These conditions range from benign and easily treatable to life-threatening anddisfiguring, and can have a significant impact on an individual's quality of life Earlydiagnosis and treatment of skin diseases are crucial for avoiding long-termcomplications and reducing their impact on the patient's wellbeing Despite theimportance of early diagnosis, many people, particularly those in rural or resource-limited areas, do not have access to a dermatologist or may face long wait times forappointments Furthermore, dermatologists are often overburdened with a high volume

of patients, making it challenging to provide timely and accurate diagnoses

With the advancements in technology, mobile devices and applications havebecome an indispensable part of our lives, and healthcare is no exception Thedevelopment of mobile health solutions has the potential to transform healthcaredelivery by providing accessible and affordable solutions for various health conditions.Motivated by the need for early skin diseases diagnosis and the widespread use ofpersonal smartphones, we propose a cross-platform smartphone app that can be used

as a camera tool for detecting skin cancers, or skin-related diseases in general Our appaims to provide an accurate, accessible, and affordable way of detecting skin diseases

in their early stages The app leverages the power of machine learning algorithms andcomputer vision technology to analyze skin images and provide a diagnosis in real-time

Due to the nature of this project as a software engineering project, we will notdiscuss about the AI algorithms and computer vision techniques used for the skindiseases detection model Instead, in this report, we will provide a detailed analysis ofthe design and development of the database system and the client-server interaction ofour skin disease detection app We will also present the results of our our app in testmode Finally, we will discuss the limitations and future directions of the app andexplore its potential to improve access to healthcare and early diagnosis of skindiseases

CHAPTER 1: OVERVIEW OF OUR SKIN DISEASES

DETECTION SYSTEM

The skin disease detection system that our team develops and is integrated inour app utilizes a combination of a Deep Learning model (DenseNet, InceptionNet,ResNet, etc) with Soft-Attention, which unsupervisedly extract a heat map of mainskin lesions to identify patterns associated with different diseases

The system can detect seven skin diseases, including:

1 [akiec][VN: Ung thư tế bào vảy khu trú] Actinic Keratoses (Solar Keratoses) and Intraepithelial Carcinoma (Bowen’s disease)

2 [bcc][VN: Ung thư biểu mô tế bào đáy] Basal cell carcinoma

3 [bkl][VN: Dày sừng tiết bã] Benign keratosis

4 [df][VN: U sợi bì] Dermatofibroma

5 [nv][VN: Nốt ruồi] Melanocytic nevi

6 [mel][VN: Ung thư hắc tố da] Melanoma

7 [vasc][VN: U mạch anh đào] Vascular skin lesions

Details about our skin diseases detection system can be found in this paper: Nguyen, V.D.; Bui, N.D.; Do, H.K Skin Lesion Classification on Imbalanced DataUsing Deep Learning with Soft Attention Sensors 2022 22,, 7530

https://doi.org/10.3390/s22197530

CHAPTER 2: SYSTEM DESIGN ANALYSIS

2.1 System of Requirements

2.1.1 Functional Requirements

Identifier Priority Requirement

REQ-1 5 Take high-quality pictures of the skin, in different

lighting conditionsREQ-2 4 Detect the skin area in the pictures and identify

common skin conditions based on visualcharacteristics

REQ-3 5 Provide information on the identified skin condition,

including its symptoms, causes, and treatment options

REQ-4 2 Store and track the user's skin pictures and detection

history, allowing for monitoring and comparison overtime

REQ-5 4 Provide users information on skin care and treatment

optionsREQ-6 3 Customize the app's features and settings based on the

user's preferences, including skin type, skinconditions, and allergies

REQ-7 5 Enable users to set meeting schedules with

dermatologists to seek further adviceREQ-8 3 Ensure the privacy and security of the user's personal

and medical information

2.1.2 Non-functional Requirements

Identifier Priority Requirement

REQ-1 5 High levels of accuracy and reliability in the app's ability to

identify and diagnose skin conditions

REQ-2 4 A user-friendly interface and easy-to-follow instructionsREQ-3 3 Fast processing times and responsive performanceREQ-4 2 Compatibility with a wide range of device types and

operating systemsREQ-5 3 Robust security measures to protect the privacy and

confidentiality of the user's personal and medicalinformation

REQ-6 3 Regular updates and maintenance

REQ-7 2 Support for multiple languages

REQ-8 2 Accessibility features, such as support for screen readers

and large text

2.2 Functional Requirement Specifications

2.2.1 Use Cases

Actor Use Cases

User (Patient) UC1: Take picture of the skin

UC2: Get prediction’s result

UC3: Edit personal information

UC4: Set appointment with doctorsUC5: View prediction’s history

UC6: Login/Register to the app

Doctor UC3: Edit personal information

UC6: Login/Register to the app

UC7: Add available schedulesUC8: Check appointment historyUC9: Request profile validation checkAdmin UC10: Validate doctor’s profile

2.2.2 Detailed Use Case

Use Case UC-2: Get prediction’s result

Related

Requirements:

REQ2, REQ3 stated in Functional Requirements

Initiating Actor: Patient

Actor’s Goal: To send picture of actor’s skin to the server, and get back

prediction’s result

Participating Actors: AI Module

Preconditions: The picture sent to the server is a valid JPEG/PNG picture

The actor has specified background information of the picture (age, gender, location of skin area)

Postconditions: The prediction’s result is sent back to actor

Flow of Events for Main Success Scenario:

1 include:: Take picture of the skin (UC-1)

2 Patient specifies background information for the taken picture (age,

gender, location of skin’s area)

3 Patient sends request to System to get prediction’s result

4 System (a) preprocesses the image and sends it to AI Module to getprediction’s result, and (b) searches database to get related informationabout the diseases (if any)

5 System sends the prediction’s results and related info back to Patient

2.2.3 Use Case Diagram

Figure 0-1 Use Case Diagram

2.2.4 Activity Diagram for user (patient)

Figure 0-2 Patient Activity Diagram

*Activity diagram of “Make schedules with doctor”

Figure 0-3 Patient Activity Diagram of “Make schedules with doctor”

2.2.5 Activity diagram for doctor

Figure 0-4 Doctor Activity Diagram

2.3 Database Design

2.3.1 Entity-Relationship Diagram (ER Diagram)

Figure 0-5: Entity-Relationship Diagram

2.3.2 Relational-Relationship Diagram (RR Diagram)

From entity-relationship diagram in Figure 2.5, we convert to relational- relationship diagram in Figure 2.6

Figure 0-6 Relational-Relationship Diagram

create table flat ent (

flat entID VARCHAR(50) NOT NULL flRIMARY KEY, FullName VARCHAR(50) NOEma l VARCHAR(50) NOT NULL, Gender VARCHAR(50),

B rthday DATE, UNIǪUE(Ema l)

);

create table Doctor (

DoctorID VARCHAR(50) NOT NULL flRIMARY KEY, FullName VARCHAR(50) NOT Ema l VARCHAR(50) NOT NULL,

B rthday DATE, Gender VARCHAR(50),

About TEXT,

WorkAddress VARCHAR(50), flrof lefl cture VARCHAR(500), flhoneNumber VARCIsApproved BOOLEAN NOT NULL DEFAULT false, UNIǪUE(Ema l)

);

create table Record (

RecordID BIGSERIAL NOT NULL flRIMARY KEY, Accuracy DECIMAL(5,2) NOT NU

fl ctureURL VARCHAR(500) NOT NULL,

flat entID VARCHAR(50) NOT NULL REFERENCES flat ent (flat entID),

D seaseID INT NOT NULL REFERENCES D sease (D seaseID), RecordT me TIM);

create table D sease (

D seaseID BIGSERIAL NOT NULL flRIMARY KEY, D seaseName VARCHAR(50) NRelatedInfo TEXT, UNIǪUE(D seaseName)

a) Schema for Patient

b) Schema for Doctor

c) Schema for Record

d) Schema for Disease

e) Schema for AppointDate

Appo n t Da t e ID BIGSE RIAL NOT NULL flRIMARY KEY,

Appo n t Da t e DATE NOT NULL,

Do c t or ID VARCHAR(50 ) REFERENC ES Do ct or ( Do ct o r ID));

f) Schema for AppointTime

c rea t e t ab l e Appo n t T m e (

Appo n t T m e ID BIGSERIAL NOT NULL flRIMAR Y KEY,

Is Boo ked BOO LEAN NOT NULL D EFA ULT fa ls e ,

St a r t T m e TIME NOT NULL,

End T me TIME NO T NULL,

fla t en tI D VARCHAR(50 ) REFERENCES fla t en t (fla t

en tI D), Appo n t Da t e ID INT RE FERENC ES Appo n t Da t e (Appo n t Da t e ID)

);

2.4 Server Architecture

For the development of the server-side functions for our skin disease detection app,

we use the following technical stacks:

NodeJs Express Framework (for utility API)

Flask Framework (for providing skin disease detection API)

Firebase Authentication (for authentication)

Firebase Storage (for image storage)

Hasura GraphQL Engine (for providing instant GraphQL & REST APIs onexisting PostgreSQL data source)

PostgreSQL & nhost (for hosting PostgreSQL database)

2.5 Client-side architecture

For our skin disease detection app, we use React Native (with Expo) as the main framework for developing our graphical interface The details of our core libraries are:

React Native: core UI framework

Expo Go: open-source client for testing React Native apps on Android andiOS without building app locally

NativeBase: UI library, providing styled components

react-native-paper: UI library, providing Material UI styled componentsreact-navigation: routing and navigation for Expo and React Native apps

CHAPTER 3 DEPLOYMENT & TESTING

3.1 Testing of functionalities

Since we develop our app on Expo Go, an user who want to test the app mustinstall Expo Go (available on both Android and iOS) to their smartphone devices andscan the QR Code generated by the app bundler

3.1.1 Testing login and register features

The login and registration features must pass the following test case:

Login successfully with chosen role (Patient/Doctor) and with correct email and password (Pass)

Register a new user with chosen role (Patient/Doctor) (Pass)

After authentication, navigate user to different Main Screen according totheir role (Patient/Doctor) (Pass)

Ensure that user’s password and authentication token are encrypted andsecured (Pass)

3.1.2 Testing skin disease detection feature

Since skin disease detection feature is considered an external feature, the testing

is based on results getting from the detection API Through the API, the skin’s photosare sent to the API via POST request; and the results are also sent back via POSTrequest, as a json file Our test case for this feature contains the following:

User can take picture of their skin’s area, get preview and retake anotherpicture (if necessary) (Pass)

User can specify background information of the picture (gender, age, location of skin’s area) (Pass)

User can receive prediction’s result and prediction’s result is saved todatabase (Pass)

User can see all of their prediction history (Pass)

3.1.3 Testing editing profile (both for Patient/Doctor) feature

User can see their profile information (Pass)

User can edit their profile information and save it (Pass)

3.1.4 Testing “Appointment” feature (for Doctor)

The “Appointment” feature for Doctor must sastify the following test cases:Doctor can see all of their upcoming appointments, the bookedappointments are highlighted and provided with patient’s info (Pass)Doctor can make new schedule slots within 7 days in the future (Pass)

3.1.5 Testing “Appointment” feature (for Patient)

The “Appointment” feature for Patient must sastify the following test cases:Patient can see all of their upcoming appointments with details aboutappointment time, date, and doctor’s info (Pass)

Patient can make new appointment with a chosen doctor (Pass)

3.2 User Interface

In this section, we will present screenshoots of our user interface, tested on Expo

Go version 2.28.3 (Android).

3.2.1 Login/Register Screens

If the user is unauthenticated, he/she must first register/login to use the app

Figure 3-1 From left to right: Welcome Screen, Register Screen, Login Screen

3.2.2 Patient Screens

After successfully register/login as Patient, user is presented with the welcome screen and from here, he/she can choose to navigate to different functionalities

Figure 3-2 Patient Main Screen

Figure 3-3 Interface of “Take skin photo” and “My detection history”

functionalities