INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan...

38
INTERACTIVE E-MEDICINE APPLICATION USING MOBILE AHMAD NAZMI BIN MAHAMMED BACHELOR OF INFORMATION TECHNOLOGY (INFORMATIC MEDIA) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2018

Transcript of INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan...

Page 1: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

INTERACTIVE E-MEDICINE APPLICATION

USING MOBILE

AHMAD NAZMI BIN MAHAMMED

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATIC MEDIA) WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2018

Page 2: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

INTERACTIVE E-MEDICINE APPLICATION

USING MOBILE

AHMAD NAZMI BIN MAHAMMED

BACHELOR OF INFORMATION TECHNOLOGY (INFORMATIC MEDIA)

WITH HONOURS

Universiti Sultan Zainal Abidin, Terengganu, Malaysia

DECEMBER 2018

Page 3: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

i

DECLARATION

I at this moment declare that this report based on my original work except for

quotations and citations, which have duly acknowledged. I also state that it has not

previously or concurrently submitted for any other degree at Universiti Sultan Zainal

Abidin or other institutions.

Signature :…………………………………

Name : Ahmad Nazmi Bin Mahammed

Date : ...................................................

Page 4: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

ii

CONFIRMATION

This project the E-Medicine Application was prepared and submitted by Ahmad

Nazmi Bin Mahammed (Matric Number: 044685) and has been found satisfactory in

terms of scope, quality, and presentation as partial fulfillment of the requirement for

the Bachelor of Of Information Technology (Informatics Media) with honors in

University Sultan Zainal Abidin.

Signature : …………………………………

Supervisor : Puan Maizan Binti Mat Amin

Date : …………………………………………

Page 5: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

iii

DEDICATION

Firstly and foremost praised to Allah, for giving me the opportunity to

complete my final year project, E-Medicine Application using android smartphone

forgive me the strength and ability to finish this report. I also would like to express my

gratitude to my supervisor, Puan Maizan Binti Mat Amin for valuable advice,

guidance, and ideas given through the development of research until the end of my

final year project. In addition, thanks to my friend and family that give courage and

motivation during my research.

Finally, special thanks to all lecturers that giving a guideline for my research

during my presentation on E-Medicine Application’s project.

Page 6: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

iv

ABSTRACT

In this increasingly advanced age, the need for a knowledge of medicines is

essential for all societies regardless of the children, adolescents, or old colorants. This

is because the community today is very concerned with their own health care and

balance of their body to reduce any likelihood of harmful illnesses to them. However,

some people are less susceptible to medicines recommended by the medical personnel

and the use of the drug in a manner approved by the health ministry. To address such

things, the E-Medicine Application project is built to expose a medicine related

information to all societies so that they know and follow all the procedures of digital

medicine. Additionally, the E-Medicine Application is an application that aims at

learning and teaching to the user by providing brief and fun information. The E-

Medicine application will provide information about medicines by displaying 3D

animation videos where it aims to attract all societies, especially children and

adolescents. In addition, the application will also state the type of drug and the codes

contained in the medication instructions for an image description to facilitate the user

understand what the application is trying to convey. In conclusion, this E-Medicine

Application project is aimed at awareness and dissemination of knowledge about

medicines to the community today to facilitate them to understand the concept of

taking all medicines with proper procedures and recommendations by health

professionals.

Page 7: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

v

ABSTRAK

Pada zaman yang kian maju ini, keperluan sesuatu pengetahuan tentang ubat-

ubatan amatlah penting bagi semua masyarakat tidak kira golongan kanak-kanak,

remaja, dewasan mauhupun golognan tua. Hal ini kerana masyarakat sekarang

sangat mementingkan penjagaan kesihatan diri dan juga daya keseimbangan tubuh

badan mereka bagi mengurangkan sebarang kebarangkalian penyakit-penyakit

yang berbahaya kepada diri mereka. Walau bagaimanapun, ada sesetengah

masyarakat kurang terdedah tentang ubat-ubatan yang disyorkan oleh pihak

perubatan dan prosedur penggunan ubat tersebut dengan cara yang diluluskan oleh

kementerian kesihatan. Untuk mengatasi perkara-perkara sebegini berlaku, projet

Aplikasi E-Medicine dibina bagi mendedahkan sesuatu maklumat yang berkait

dengan ubat-ubatan kepada semua masyarakat supaya mereka mengetahui dan

mengikut segala prosedur ubatan-ubatan secara digital. Selain itu, Aplikasi E-

Medicine ini adalah sesuatu aplikasi yang bertemakan pembelajaran dan juga

pengajaran kepada pengguna itu dengan memberikan sesuatu maklumat secara

ringkas dan menyeronokkan. Aplikasi E-Medicine ini akan memberikan sesuatu

maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia

bertujuan menarik minat semua masyarakat terutamannya golongan kanak-kanak

dan golongan remaja. Di samping itu, aplikasi in juga akan menyatakan jenis

sesuatu ubat dan kod-kod yang terdapat pada arahan ubat tersebut bagi secara

gambaran imej bagi memudahkan pengguna memahami apa yang cuba

disampaikan oleh aplikasi itu. Kesimpulannya, projek Aplikasi E-Medicine ini

Page 8: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

vi

adalah bertujuan ke arah kesedaran dan penyebaran ilmu tentang sesuatu ubat-

ubatan kepada masyarakat sekarang bagi memudahkan mereka memahami konsep

pengambilan segala-ubat-ubatan dengan prosedur yang betul dan disarankan oleh

pihak kesihatan.

Page 9: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

vii

CONTENT

PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vii

LIST OF TABLE ix

LIST OF FIGURES x

CHAPTER I INTRODUCTION

1.1 Project Background 1

1.2 Problem Statement 2

1.3 Objectives 2

1.4 Scope

1.4.1 User Scope

1.4.2 Contents Scope

3

1.5 Expected Result 3

1.6 Limitation 3

1.7 Milestone and Activities 4

1.8 Report Structure 5

CHAPTER II LITERATURE REVIEW

2.1 Introduction 6

2.2 Courseware

2.2.1 2D and 3D Animation Technique

6

2.3 Related Work 7

2.3.1 An Evolutionary Approach to IT Support for

Medical

8

2.3.2 Trend in Interactive Knowledge discovery

Medicine

2.3.3 The Epidemiology of Medical Errors Article

8

8

Page 10: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

viii

2.4 Existing Application 9

2.4.1 Epocrates App 9

2.4.2 Drugbook App 10

2.4.3 Kenali Ubat Anda App 11

2.5 Overall Analysis 12

CHAPTER III

METHODOLOGY

3.1 Introduction 13

3.2 ADDIE Model 13

3.2.1 Analysis Phase 14

3.2.2 Design Phase 14

3.3.3 Development Phase 15

3.3.4 Implementation Phase 15

3.3.5 Evaluation Phase 16

3.3 Hardware and Software Requirements

3.3.1 Hardware

3.3.2 Software

16

3.4 Application Design and Modeling Application 18

3.4.1 Intro for E-Medicine

3.4.2 Login

3.4.3 The Main Menu

3.4.4 Apps Info

3.4.5 Learn Video

3.4.6 Gallery

3.5 Summary 25

REFERENCE 26

Page 11: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

ix

LIST OF TABLES

TABLE CHAPTER I PAGE

1.1 Show the Activities of E-Medicine Apps

4

TABLE CHAPTER II PAGE

2.1 The Comparison Between the Article Source

7

2.1 The Overall Analysis of Application

12

Page 12: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

x

LIST OF FIGURES

FIGURE CHAPTER I PAGE

1.1 The Navigation Map of E-Medicine Apps 3

FIGURE CHAPTER II PAGE

2.1 The Example of Epocrates Apps 9

2.2 The Example of Drugbook Apps 10

2.3 The Example of Kenali Ubat Anda Apps 11

FIGURE CHAPTER III PAGE

3.1 The Rule of ADDIE Model 14

3.2 The Intro Page of E-Medicine Apps 19

3.3 The Login Page of E-Medicine Apps 20

3.4 The Main Menu of E-Medicine Apps 21

3.5 The Info of E-Medicine Apps 22

3.6 The List Video in E-Medicine Apps 23

3.7 The Gallery in E-Medicine Apps 24

Page 13: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

1

CHAPTER 1

INTRODUCTION

1.1 Project Background

The application is one of the systems that operate by requiring a gadget like a

smartphone commonly used by today's society. The smartphone is now familiar with

our society as it is used to communicate online, take pictures, search virtual

information and more. To increase the level of smartphone usage, more applications

are built to provide users with satisfaction and help in finding any information needed

by the user. As you know, apps are helping many users in the form of management,

business and also medicine. Medical applications also help users in many ways

including using the medicine in the right way, especially secondary school students.

With the latest applications, they can study medicine in new ways to show the

difference in the way they learned beforehand such as the use of textbooks and more.

Besides, the application can be an awareness application to the public as well. A

variety of useful applications was created to help users learn and find the important

information in their lives such as health and medication apps (E-Medicine App). The

E-Medicine app is to develop information on the use of medicines recommended by

the medical personnel. For example, coded X is a non-poison medicine (OTC) which

is paracetamol. Additionally, the E-Medicine App will also display information on

general (over the counter) medicines and controlled medicine. By using the E-

Medicine App, we can find out the effects of taking irregular medicine on personal

health. For this application, it will build an app using Adobe Animate CC to build the

interface that is compatible with this application. In addition, the XAMPP will use to

build a database in this application. Furthermore, Adobe Photoshop is also in the

process of generating this application.

Page 14: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

2

1.2 Problem Statement

The problem that occurs such as follow:

1. Lots of information learning about medicine is based only on textbooks.

2. Information in the form of text is difficult to describe for the student.

3. Less exposure in learning proper medication for student.

1.3 Objectives

The objective of this project are as the following :

1. To design E-Medicine application about proper medication.

2. To develop E-Medicine application.

3. To test the functionality of the proposed application.

1.4 Scope

The scope for this project are identified to make the application development

process easier. The scope is divided into two which are user scope and contents

scope.

1.4.1 User scope

Able to login into the application.

Able to use the function of button menu in the application.

Able to see the video in the application.

Page 15: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

3

1.4.2 Contents scope

Have more interactive information about proper medication.

Have a quiz about of medicine for student.

The application get connect to database.

Figure 1.1: The Navigation Map of E-Medicine Apps

1.5 Expected Result

The student can use the E-Medicine App to find information about medicines.

Besides that, this application will show to the student how to take the medicine to

follow the correct procedure in medical. Besides, it also can do attract activity

provided by the application’s E-Medicine.

1.6 Limitation

This application has a login that needs to be filled by the user to enter the main

menu in the E-Medicine application. besides, the E-Medicine has a submenu in it

like as the apps info, types of medicine, procedure learning, safety procedure,

Page 16: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

4

benefit, effect, code medicine, activities, and gallery. Furthermore, this application

has the database using the XAMPP software.

1.7 Milestone and Activities

The guideline of the E-Medicine Application is important to make the process of

this project will smooth and follow the procedure.

Table 1.1 Show the Activities of E-Medicine Apps

Task name

SEPTEMBER OCTOBER NOVEMBER DECEMBER

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Topic Discussion

and Determination

Project Title

Proposal

Proposal writing

Literature Review

Proposal Progress

Presentation &

Evaluation

Discussion

Correction

Proposal

Proposed Solution

Methodology

Proof of Concept

Drafting Report of

the Proposal

Submit draft of

report to

supervisor

Seminar

Page 17: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

5

Presentation

Final Report

Submission

1.8 Report Structure

Thesis structure is a summary of the whole project that divided into 6 chapters.

Chapter 1 will discuss the introduction, problem statement, objective, scope,

expected result and limitation. Chapter 2 will discuss the existing system. In

Chapter 3, design and modeling will also be discussed. Chapter 4 will show

the implementation of the system. Chapter 5 will show testing and result of the

system. Lastly, Chapter 6 is the conclusion of the whole project.

Page 18: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

6

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter discuss about literature review for existing system. There

is 3 existing systems that will by study and analyze that is Epocrates App,

Drugbook App and also Kenali Ubat Anda App. The chapter also discuss

about the algorithm that will be used in mobile app system.

2.2 Courseware

Courseware is one of the approaches that can be used in teaching and

learning process so that it becomes more effective and interesting. This paper

demonstrates the process of development of multimedia courseware that can

be used for teaching and learning for the user. It is integrated with multimedia

elements such as graphics, audio, and video to make it more attractive to be

used by the user in their learning process.

2.2.1 2D and 3D Animation Technique

2D animation is one drawing followed by another in a slightly different

pose, followed by another in a slightly different pose, on and on for 24 frames

a second. Besides, 3D animation has more depth and is more realistic The

texture, lighting, and color of the 3D objects. for E-Medicine application, it has

some knowledgeable video that has to show the user in 3d animation for the

learning process. The object 3D animation will be built in the Autodesk Maya

software.

Page 19: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

7

2.3 Related Work

The article of medicine needs to be focused on adding more references to the

medical in which it will be brought into the app. besides that, more information about

medicine and also medical can take in the article to put in the application.

Table 2.1 The Comparison Between the Article Source

Auther/Year Article Technique Advantages Process

description

Gregor

Endler,Michael

Langer, Jorg

Purucker,

Richard Lenz

(2011)

An

Evolutionary

Approach to

IT Support for

Medical

Suppply

Centers

Acquisition

Medical

Knowledge

Can give an

evaluation of

applicability

of traditional

techniques in

the field.

To increase the

power to

Compete, single

practitioners

often pool their

resources in

both medical

supply

centers and

networked

practices

Andreas

Holzinger

(2014)

Trends in

Interactive

Knowledge

Discovery for

Medicine:

Cognitive

Science meets

Machine

Learning.

Knowledge

Discovery of

Medical

To modelling

the complexity

of patients to

tailor medical

decisions,

health

practices and

therapies to

the individual

patient.

A synergistic

combination of

methodologies

of two areas:

Human–

Computer

Interaction and

Knowledge

Discovery/Data

Mining (KDD).

Page 20: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

8

Nicoletta C.

Laue, David L.

B.

Schwappach,

Christian M.

Koeck

(2003)

The

Epidemiology

of Medical

Errors: A

Review of The

Literature

Disclosure

Medical

Public

The aim is to

give an

overview of the

literature

reporting on

adverse events

(AEs) and their

preventability.

The articles

retrieved were

divided into

two categories

that are four

large scale

retrospective

studies and

four

prospective

studies.

2.3.1 An Evolutionary Approach to IT Support for Medical Article

Cooperation environments are a current trend in health care. To increase their

power in competition, single practitioners often pool their resources in both medical

supply center and networked practices. Both structures create new demands on IT

infrastructure.

2.3.2 Trend in Interactive Knowledge discovery for Medicine Article

The main goal of future medicine is in modeling the complexity of patients to

tailor medical decisions, health practices and also therapies to the individual patient.

This trend towards personalized medicine produces amounts of data, and even though

the fact that human experts are excellent at pattern recognition in various conditions.

2.3.3 The Epidemiology of Medical Errors Article

Medical errors are one of the most important quality problems in healthcare

today. The best way into the incidences and characteristics of medical errors is

through studies on adverse events (AEs) since some fraction of AEs is results of errors

and as such preventable. Even though prevention is where effort should be directed,

only a few studies report on the preventability of AEs. Our aim is to give an overview

of the literature reporting on AEs and their preventability.

Page 21: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

9

2.4 Existing Application

The existing application has been similar for E-Medicine apps in terms of

functions, problem-solving, types of information and other. Such an example of

that app is an Epocrates App, Drugbook Apps, and also Kenali Ubat Anda Apps.

2.4.1 Epocrates App

The Epocrates app is designed for the healthcare of body. Apps user

can check the dose of medicine, a medicine safety details and medical new.

Furthermore, the Epocrates Apps also have a smooth of management guidance

in medical.

Figure 2.1: The Example of Epocrates Apps

Strength

Have a button select that is easy to understand by the user.

Provides information on medicines along with pictures of the

medicines.

Weakness

Lack of detail information on each medicine displayed in the app.

simple interface colors and less user attention.

Page 22: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

10

2.4.2 Drugbook app

One of the function Drugbook app is the user can search all about

medicine just by name or generic name. besides that, the user also can seach

all the company that related to medicine. The Drugbook app also can help user

to set reminder for their medicine along with schedule.

Figure 2.2: The Example of Drugbook Apps

Strength

Have different functions on every button option on the app like as

search, reminder time and learn information.

Design interface is simple but has an orderly set of information.

have information about how to use the medicine with safety.

Weakness

Lack of information in the form of graphics and images on the

application.

Information about medicine is more to text and it will be difficult to

attract the user's attention to read it.

Page 23: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

11

2.4.3 Kenali Ubat Anda App

Kenali Ubat Anda app is designed to give more information about medications for

the user that how to use the medicine with following the schedule of medication.

besides that, this application also can show the user how to use the medicine with

true schedule medical (online).

Figure 2.3: The Example of Kenali Ubat Anda Apps

Strength

Have a list of organized activities on the app (Karnival Kenali Ubat

Anda).

The image gallery is available to show the functionality of the

application to the user.

Weakness

Information on medicines is more than text and this is less attractive to

users to read it.

Lack of information about the use of medicines in the form of videos

and images (offline).

Page 24: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

12

2.5 Overall Analysis

Table 2.2 The Overall Analysis of Application

2D

Animation

Video Text Image Audio Mobile

Based

Epocrates

App

Drugbook

App

Kenali

Ubat Anda

App

Page 25: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

13

CHAPTER 3

METHODOLOGY

3.1 Introduction

In this chapter, it will explain the specific details on the methodology being

used in order to develop this project. In order to make sure the project is in the right

path, methodology plays an important role as a guide for the project to complete and

working well as plan. There is different type of methodology that is used for different

type of application. It is important to choose the right and suitable methodology for

the development of an application thus it is necessary to understand the application

functionality itself. In order to ensure the effective of the E-Medicine application,

good identification is required before the development process begins. Furthermore,

the ADDIE model have five phase involved.

3.2 ADDIE Model

The ADDIE model is the generic process traditionally used by instructional

designers and training developers. The five phases in this model are Analysis, Design,

Development, Implementation, and Evaluation. The ADDIE model relies on each

stage being done in the given order but with a focus on reflection and iteration. This

model will give a streamlined and also focused approach that provides feedback for

continuous improvement.

Page 26: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

14

Figure 3.1: The Rule of ADDIE Model

3.2.1 Analysis Phase

In the analysis phase, the research and categorized about the application are

important to collect the information about this project. The main objective of this

phase is to come out with a new idea or improvements to the existing of a medical

app. The existing application on any of the standards platforms is searched to establish

the novelty of the idea. The differences with the existing application are documented.

The other important task in this phase is to define the time required to develop the E-

Medicine application. The initial requirement gathering should also be completed.

3.2.2 Design Phase

In this phase, the idea for the E-Medicine application is developed into an

initial design of the application. The feasibility of developing the application on all

mobile platforms is determined. Alternatively, the specific target mobile platform is

identified (example: smartphone with Android 8.1.0 (OREO).

Page 27: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

15

The application functionality is broken down into modules and into prototypes

for example combination of modules which are to be released in the prototype design.

The functional requirements are defined. For example are login, application

introduction, view of activities, information about medicine, gallery information of

medicine and more. A very important part of the design phase is to create the

storyboard for the user interface interaction.

3.2.3 Development Phase

In this phase, the application is coded. Coding for different modules of the

same prototype can proceed in parallel. The development process can be in two

stages: Coding for Functional Requirement and Coding for Design Requirements. The

code is developed first for the core functionalities. The parallel development can be

done for modules of the same prototype that are independent of each other.

Subsequently, these modules can be integrated. In the second stage, the user interface

is designed and that can be supported on as many mobile operating application

platforms as possible.

3.2.4 Implementation Phase

Under the implementation phase, the activity that is involved and starts to

develop and also test that project. In this phase, the application will build based on the

information collected and follow the requirements. This project will use a little PHP

language and for the interface, it will use the coding in the software Ionic. The project

also will relate with connecting to a database to store the information.

Page 28: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

16

3.2.5 Evaluation Phase

Evaluation is the final phase after the process of implementation of this E-

Medicine Apps ‘s project. After the testing is completed and fixes the error in this

project, the application will be given to the supervisor to evaluate and give feedback

about this project. The feedback from the supervisor will record and take to improve

the process of building this project.

3.3 Hardware and Software Requirements

In the application development process, the requirements such as software and

hardware are the most important requirement to ensure that all process development

work with smoothly without any interruptions and problems. There are several

requirements that were used to complete this project which include:

3.3.1 Hardware

Minimum hardware requirements needed in the development of this application are:

i. Laptop : ASUS A456U

Processor : Intel Core i5-2.5GHz, 3M Cache

Memory : 8GB DDR4 RAM

Storage : 1TB SATA HDD

Operating system : Window 10 Pro

Page 29: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

17

ii. Android Mobile Phone : XIOMI A1

Used to run, deploy and testing the application.

Android version 8.1.0 (Oreo) Android One.

iii. WD 1TB My Passport Ultra USB 3.0 Hard Disk

Used to backup the project of application.

Storage 1TB.

3.3.2 Software

Software requirement of this project are :

i. Xampp

This software used to manage the connection between

Apache and MySQL for this project.

ii. Adobe Animate CC 2018

This software used to create the movement of graphics

animation.

iii. Ionic Framework

Ionic Framework will be used to develop the interface and

function of the application.

iv. Google Chrome

Google Chrome is used as a platform for this application to

run the Xampp Server.

Page 30: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

18

v. Microsoft Word 2010

Microsoft Word 2010 used to write the proposal and report.

vi. Adobe Photoshop CC 2018

This software used to make an icon, logo and adjust the

coloring image that will be used in the application.

3.4 Application Design and Modeling Application

A storyboard is a graphic organizer in the form of illustrations or images

displayed in sequence for the purpose of pre-visualizing a motion picture, animation,

motion graphic or interactive media sequence. For the application, the E-Medicine

Apps also have a storyboard that will give an example of design and modeling for this

project. The E-Medicine Apps have a standard function of the button like as Apps

Info, Code Medicine, Type of Medicine, Learn Video, Benefit, Effect, Safety

Procedures, Activities, and Gallery.

Page 31: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

19

3.4.1 Intro for E-Medicine

Figure 3.2: The Intro Page of E-Medicine Apps

The homepage of E-Medicine will illustrate the concept of a more formulated

concept to medical. Besides, the simple homepage is very suitable to attract

users.

Page 32: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

20

3.4.2 Login

Figure 3.3: The Login Page of E-Medicine Apps

The login interface is a part for E-Medicine user sign up application. After

signing up, users need to include their email and password.

Page 33: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

21

3.4.3 The Main Menu

Figure 3.4: The Main Menu of E-Medicine Apps

Main menu E-Medicine application has a submenu which has its functions for

each section. It has a simple interface but easy for the user to understand when

using it.

Page 34: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

22

3.4.4 Apps Info

Figure 3.5: The Info of E-Medicine Apps

E-Medicine Info is a section where it describes the information and objective

of the E-Medicine application itself.

Page 35: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

23

3.4.5 Learn Video

Figure 3.6: The List Video in E-Medicine Apps

For this interface, it will show the user about the information of medicine by

default offline video. Besides, it will show some video in 3D animation.

Page 36: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

24

3.4.6 Gallery

Figure 3.7: The Gallery in E-Medicine Apps

The gallery in the E-Medicine Application will show the user some example of

outdoor activities that related to medicine and also about medical in real life.

Page 37: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

25

3.5 Summary

In conclusion, the selection of good methodology is very important to make

sure the development of application can be done within the exact time given.

Furthermore, a good methodology also can provide systematic steps in developing the

application so that the application can be developed with minimum errors and

problem. The methodology that is used by E-Medicine application for this project. It

also explains the required hardware and software that are used in this project that

guides to the success of this project.

Page 38: INTERACTIVE E-MEDICINE APPLICATION USING MOBILE · maklumat tentang ubat-ubatan dengan memaparkan video animasi 3D di mana ia bertujuan menarik minat semua masyarakat terutamannya

26

REFERENCES

1. Gregor Endler,Michael Langer, Jorg Purucker, Richard Lenz (2011), An

Evolutionary Approach to IT Support for Medical Suppply Centers,

http://www.user.tu-berlin.de/komm/CD/paper

2. Andreas Holzinger (2014), Trends in Interactive Knowledge Discovery for

Medicine: Cognitive Science meets Machine Learning,

https://graz.pure.elsevier.com/de/publications/trends-in-interactive-

knowledge-discovery-for-personalized-medici

3. Nicoletta C. Laue, David L. B. Schwappach, Christian M. Koeck (2003),

The Epidemiology of Medical Errors: A Review of The Literature,

https://link.springer.com/article/10.1007/BF03041483

4. Drugbook – All Medicine Guide for PC Window Screenshots 3(2018),

https://appforpcwindows.download/28772/drugbook-all-medicine-guide-

app-apk-for-pc-windows-10-8-7-download/drugbook-all-medicine-guide-

for-pc-windows-screenshots-3

5. Dr. Anne Meneghetti, Jonathan Porter, Jason Bornhorst, Mark Swan,

Epocrates Wikipedia (2014), https://en.wikipedia.org/wiki/Epocrates