Skripsi Final V5

JALANYUK!
: NAVIGATION APPLICATION FOR PUBLIC

TRANSPORTATION IN JAKARTA ON WEB AND MOBILE PLATFORM
THESIS
By
Monica Elizabeth 1601211501

Billy Gani 1601239834
Maretta Anggun Safitri 1601269206
School of Computer Science

Bina Nusantara University
Jakarta
2016
A2
JALANYUK! : NAVIGATION APPLICATION FOR PUBLIC

THESIS
Proposed as one of the requirements

for obtaining Bachelor Degree at
Computer Science Program
Bachelor Degree
By


Jakarta
2
A3
2016
Thesis Readiness Statement for Thesis Defense
Thesis Statement
We, Monica Elizabeth
Billy Gani
Maretta Anggun Safitri,
Herewith stating that the Thesis with title:

Is our original work and has not previously been submitted as a scientific result,
as a whole or parts, and contains no materials previously published or written
except where due acknowledgements are made.
Monica Elizabeth Billy Gani Maretta Anggun Safitri

1601211501 1601239834 1601269206
Approved by Thesis Supervisors,

I hereby agree that this Thesis is eligible for Thesis Defense
Lusiana Citra Dewi, S.Kom., MM.

D3658
25 January 2016
A4
4
A5
BINA NUSANTARA UNIVERSITY

Computer Science Program
Computer Science Undergraduate Thesis
Odd Semester 2015/2016


ABSTRACT
Navigation application for public transportation in Jakarta, JalanYuk! is developed

on web, Android, and iOS platform to ease user in obtaining information regarding
public transportation when commuting in Jakarta. JalanYuk! has several features,
such as navigation with best route and alternatives for Transjakarta, Commuter
Line, and angkot, approximation of travel duration, calculation on total cost,
information on schedule and route of selected transportation, information on
interesting places surrounding the stops, and displaying event report from users.
Research methodology used in this thesis is literature study using books, journal, and
theories to support this thesis. Analysis on user by using questionnaires and analysis
on similar application is also conducted to gather valid data for current situation
regarding public transportation and application for public transportation. The end
result for this thesis is a navigation application for public transportation with
additional addition of information such as distance, cost, duration, schedule, route,
interesting places, and user's event report.
Keywords: web, Android, iOS, mapping service, public transportation, navigation

A6
ABSTRAK
Aplikasi navigasi untuk transportasi umum di Jakarta, JalanYuk! ini dibuat untuk
web, Android, dan iOS, dengan tujuan memudahkan pengguna dalam mendapatkan
informasi transportasi umum dalam bepergian di Jakarta. JalanYuk! mempunyai
beberapa fitur, diantaranya navigasi rute terbaik beserta rute alternatif untuk
Transjakarta, Commuter Line, dan angkot, perkiraan waktu perjalanan, kalkulasi total
harga, informasi jadwal dan rute kendaraan, informasi tempat-tempat menarik
disekitar pemberhentian, dan menampilkan laporan-laporan dari sesama pengguna.
Metodologi penelitian yang digunakan dalam skripsi ini adalah metode studi literatur
dengan menggunakan buku, jurnal, dan teori-teori yang digunakan untuk menunjang
skripsi ini. Metodi analisa pengguna dengan menggunakan kuesioner dan analisa
aplikasi sejenis juga digunakan untuk mendapatkan data valid tentang kondisi yang
ada sekarang di kehidupan sehari-hari dalam hal transportasi umum dan aplikasi
transportasi umum. Hasil akhir dari penelitian ini adalah sebuah aplikasi navigasi
kendaraan umum yang juga menyediakan informasi tambahan seperti informasi
jarak, harga, durasi, jadwal, rute, lokasi tempat menarik, dan laporan-laporan
pengguna.
Kata Kunci: web, Android, iOS, layanan pemetaan, transportasi umum, navigasi
6
A7
PREFACE
First of all, we would like to thank God for giving His blessing and strength
for the authors to finish this thesis report entitled JALANYUK! : NAVIGATION
APPLICATION FOR PUBLIC TRANSPORTATION IN JAKARTA ON WEB AND
MOBILE PLATFORM on time. This thesis report was made as the requirement in
completing study of Undergraduate Program Computer Science in Bina Nusantara
University, Jakarta.
This thesis report could not be done without the help from many parties. That
is the reason the authors team expresses our sincere gratitude to:
1. Mr. Prof. Dr. Ir. Harjanto Prabowo, MM, as the Rector of Binus
University
2. Mr. Fredy Purnomo, S.Kom., M.Kom., as the Dean of School of
Computer Science Binus University.
3. Mrs. Yen Lina Prasetio, S.Kom., M.CompSc., as the Head of Computer
Science Program Binus University.
4. Mrs. Rini Wongso, S.Kom., M.T.I. as the Deputy Head of Computer
Science School - Academic and Operation
5. Mrs. Violitta Yesmaya, S.Kom, M.T.I as the Deputy Head of Computer
Science Program Binus University Alam Sutera
6. Mrs. Lusiana Citra Dewi, S.Kom., M.M. as an advisor who has given a lot
of guidance and patience to the authors in writing this thesis.
7. Our Families who have given moral and financial support to the authors
8. Our Friends who have given motivation and feedback to the authors
The authors realize that this thesis report is still far from perfect because of
limited time and the authors ability. The authors are open to all critics and
suggestion that may be useful to improve this report. May God repay the kindness
and sincerity of all people who help the authors finish this project. May this project
become useful to many parties in current and future times.
Jakarta, 25 January 2016
Writers
A8
TABLE OF CONTENTS
Cover Page.....................................................................................................................
Title Page
Thesis Readiness Statement for Thesis Defense.........................................................iii
ABSTRACT................................................................................................................iv
ABSTRAK....................................................................................................................v
PREFACE....................................................................................................................vi
TABLE OF CONTENTS............................................................................................vii
TABLE OF TABLES...................................................................................................xi
TABLE OF FIGURES...............................................................................................xiii
TABLE OF APPENDICES......................................................................................xvii
CHAPTER 1 INTRODUCTION............................................................................1
1.1 Background.....................................................................................................1
1.2 Problem Definition.........................................................................................3
1.3 Scope of Work................................................................................................3
1.4 Objectives and Benefits..................................................................................4
1.5 Research Methodology...................................................................................5
1.6 Systematic Writing.........................................................................................5
CHAPTER 2 LITERATURE REVIEW.................................................................7
2.1 Software Engineering Theory.........................................................................7
12. Software Development Methodology......................................................7
12. Agile Development................................................................7
12. Extreme Programming...........................................................7
12. Unified Modeling Language....................................................................9
12. Use Case Diagram..................................................................9
8
A9
12. Use Case Narrative...............................................................13
123. Activity Diagram..................................................................16
12.3 Human and Computer Interaction.........................................................17
12.3 Eight Golden Rules..............................................................17
12.3 Five Measurable Human Factors..........................................18
2.2 Specific Theory.............................................................................................19
2.1 Android..................................................................................................19
2. iOS.........................................................................................................20
2.3 Java........................................................................................................21
2.4 Google Maps API..................................................................................21
2.5 Foursquare API......................................................................................22
2.6 HTML....................................................................................................22
2.7 CSS........................................................................................................23
2.8 Javascript...............................................................................................23
2.9 jQuery....................................................................................................23
2.10 AJAX.....................................................................................................24
2.1 PHP........................................................................................................24
2.1 MySQL..................................................................................................25
2.13 Bootstrap................................................................................................25
2.14 Greedy Best First Search Algorithm......................................................25
CHAPTER 3 SYSTEM ANAYSIS AND DESIGN..............................................29
3.1 Planning........................................................................................................29
13. User Requirement Analysis...................................................................29
13.2 Similar Application Analysis.................................................................38
13.2 KIRI Smart Public Transport................................................38
132. KeMana: Your Jakarta Transport..........................................39

A10
13. Problem Solving....................................................................................44
3.2 Design...........................................................................................................44
23.1 Application Design................................................................................45
231. Web Interface Design...........................................................45
23.1 Mobile Interface Design.......................................................50
23. System Design.......................................................................................57
231. Use Case...............................................................................57
23. Use Case Narrative...............................................................58
23. Activity Diagram..................................................................67
234. Entity Relationship Diagram................................................73
3.3 Coding..........................................................................................................74
3.1 Refactoring............................................................................................74
3.2 Greedy Best First Search Algorithm......................................................77
3.4 Testing..........................................................................................................83
CHAPTER 4 IMPLEMENTATION AND EVALUATION................................85
4.1 Application Implementation.........................................................................85
14. System Requirement..............................................................................85
14.2 Application Installation Procedure........................................................86
14.2 Android Installation Procedure............................................86
142. iOS Installation Procedure...................................................88
14.3 Application Manual...............................................................................89
14.3 Web Application Manual......................................................89
142.3 Mobile Application Manual.................................................94
4.2 Evaluation...................................................................................................101
24.1 User Evaluation...................................................................................101
241. User Acceptance Test.........................................................101
10
A11
24.1 Five Measurable Human Factor Evaluation.......................117
24. User Interface Evaluation....................................................................119
241. Web Application User Interface Evaluation.......................119
24. Mobile Application User Interface Evaluation...................122
CHAPTER 5 CONCLUSION AND SUGGESTIONS......................................127
5.1 Conclusion..................................................................................................127
5.2 Suggestion..................................................................................................128
BIBLIOGRAPHY...................................................................................................129
APPENDIX...............................................................................................................A1
CURRICULUM VITAE
SURVEY LETTER
A12
TABLE OF TABLES
Table 3.1 Questionnaires Result on Question Number 1..........................................29

Table 3.2 Questionnaire Result on Question Number 2.............................................30
Table 3.3 Questionnaire Result for Question Number 3............................................31
Table 3.4 Questionnaire Result for Question number 4.............................................32
Table 3.9 Comparison Between Similar Application.................................................43
Table 3.10 View Map and Problem Report Use Case Narrative................................58
Table 3.11 Find Nearby Location Use Case Narrative...............................................60
Table 3.12 Open Nearby Locations Website Use Case Narrative.............................61
Table 3.13 Find Path to Nearby Location Use Case Narrative..................................62
Table 3.14 View Route and Schedule Use Case Narrative........................................63
Table 3.15 Login Use Case Narrative........................................................................64
Table 3.16 Logout Use Case Narrative......................................................................65
Table 3.17 Report Problem Use Case Narrative........................................................66
Table 4.1 Questionnaire Result for Question Number 1..........................................102
Table 4.10 Questionnaire Result for Question Number 2........................................109
12
A13

A14
TABLE OF FIGURES
Figure 1.1 Smartphone OS Market Share in Second Quartal of 2015.........................2

Figure 2.1 The Extreme Programming Process...........................................................8
Figure 2.2 An Association Between Actors and Use Case.........................................10
Figure 2.3 Extends Relationship Example.................................................................11
Figure 2.4 Uses/Include Relationship Example.........................................................11
Figure 2.5 Depends on Relationship Example...........................................................12
Figure 2.6 Inheritance on Relationship Example.......................................................13
Figure 2.7 Use Case Narrative Example....................................................................15
Figure 2.8 (cont.) Use Case Narrative Example........................................................16
Figure 3.1 Questionnaire Result on Question Number 1...........................................30
Figure 3.2 Questionnaire Result on Question Number 2...........................................31
Figure 3.3 Questionnaire Result for Question Number 3..........................................32
Figure 3.9 Screenshot of KIRIs Home Page.............................................................38
Figure 3.10 Screenshot of KIRIs Search Results......................................................39
Figure 3.11 Screenshot of KIRIs Step by Step Navigation.......................................39
Figure 3.12 Screenshot of KeManas Main Menu.....................................................40
Figure 3.13 Screenshot of KeManas Buses Tab.......................................................41
Figure 3.14 Screenshot of KeManas Bus Stops Tab.................................................41
Figure 3.15 Screenshot of KeManas Navigation Menu............................................42
Figure 3.16 Screenshot of KeManas Navigation Result...........................................42
Figure 3.17 Home Page Website Design...................................................................45
Figure 3.18 Search Route Website Design.................................................................46
Figure 3.19 Route Detail Website Design..................................................................46
Figure 3.20 Show Nearby Places Website Design.....................................................47
Figure 3.21 Route and Schedule Website Design......................................................48
14
A15
Figure 3.22 After Logged In Page Website Design...................................................48

Figure 3.23 Submit Event Report Website Design....................................................49
Figure 3.24 Home Screen Design on Mobile Application.........................................50
Figure 3.25 Menu Design on Mobile Application.....................................................51
Figure 3.26 Search Result Design on Mobile Application........................................52
Figure 3.27 Route Summary Design on Mobile Application....................................53
Figure 3.28 Nearby Location Design on Mobile Application....................................53
Figure 3.29 Route and Schedule Design on Mobile Application...............................54
Figure 3.30 After Logged in Screen Design on Mobile Application.........................55
Figure 3.31 Submit Event Report Design on Mobile Application.............................56
Figure 3.32 Use Case for JalanYuk!..........................................................................57
Figure 3.33 View Map and Problem Report Activity Diagram.................................67
Figure 3.34 Find Nearby Location Activity Diagram................................................68
Figure 3.35 Open Nearby Locations Website Activity Diagram..............................68
Figure 3.36 Find Path to Nearby Location Activity Diagram....................................69
Figure 3.37 View Route and Schedule Activity Diagram..........................................69
Figure 3.38 Login to Submit Report Activity Diagram.............................................70
Figure 3.39 Report Problem Activity Diagram..........................................................71
Figure 3.40 Logout Activity Diagram........................................................................72
Figure 3.42 Entity Relationship Diagram for JalanYuk!...........................................73
Figure 3.43 Added Code for Get Current Location...................................................75
Figure 3.44 Refactor Code in FindRoute Algorithm.................................................76
Figure 3.45 Class for Find Route Algorithm.............................................................77
Figure 3.46 Function to Find the First Node..............................................................78
Figure 3.47 Main Body of Find Route Algorithm.....................................................79
Figure 3.48 (cont.) Main Body of Find Route Algorithm.........................................80
Figure 3.51 Get Fastest Route....................................................................................83
Figure 4.1 JalanYuk! .apk in Android........................................................................86
Figure 4.2 JalanYuk! .apk Installation in Android.....................................................87
Figure 4.3 Installation Finished in Android...............................................................87
Figure 4.4 Xcode Screen............................................................................................88
A16
Figure 4.5 Home Screen of Device Running iOS with JalanYuk! Installed..............89
Figure 4.6 JalanYuk! Website Homepage..................................................................89
Figure 4.7 Get Current Location in JalanYuk!...........................................................90
Figure 4.8 Get Current Location and Switch Location Icon in JalanYuk!.................90
Figure 4.9 Autocomplete on JalanYuk! Website........................................................91
Figure 4.10 Suggested Routes in JalanYuk! Website.................................................91
Figure 4.11 Summary of the Route and Route Path in JalanYuk! Website................92
Figure 4.12 View Nearby Location in JalanYuk! Website.........................................92
Figure 4.13 Using Gmail Account to Login to JalanYuk! Website............................93
Figure 4.14 Reporting an Event in JalanYuk! Website..............................................93
Figure 4.15 Report an Incident in JalanYuk! Website...............................................94
Figure 4.16 JalanYuk! Icon on iOS............................................................................94
Figure 4.17 JalanYuk! Icon on Android.....................................................................95
Figure 4.18 JalanYuk! Mobile Application................................................................95
Figure 4.19 Autocomplete on JalanYuk! Mobile Application...................................96
Figure 4.20 Route Suggestions on JalanYuk! Mobile Application............................97
Figure 4.21 Route Summary in JalanYuk! Mobile Application.................................98
Figure 4.22 View Nearby Location in JalanYuk! Mobile Application......................99
Figure 4.23 Dropdown Menu of JalanYuks Mobile Application..............................99
Figure 4.24 Login with Gmail Account...................................................................100
Figure 4.25 Reporting an Event in JalanYuk! Mobile Application..........................100
Figure 4.26 Report an Event in JalanYuk! Mobile Application...............................101
Figure 4.27 Questionnaire Result for Question Number 1......................................102
Figure 4.28 Questionnaire Result for Question number 2.......................................103
16
A17
Figure 4.38 Questionnaire Result for Question Number 4.......................................111

Figure 4.45 Side by Side Comparison Between JalanYuk! Main Page...................119
Figure 4.46 JalanYuk! Easy to Understand Icon......................................................119
Figure 4.47 JalanYuk! Auto Complete in Response to User Input..........................120
Figure 4.48 JalanYuk! Redo Search Button at the End of User Search Action.......120
Figure 4.49 JalanYuk! Filter....................................................................................121
Figure 4.50 JalanYuk! Reversing Effect Features....................................................121
Figure 4.51 JalanYuk! Waiting for Users Filter Choice Before Displaying the Result
..................................................................................................................................121
Figure 4.52 JalanYuk! Giving Short yet Easy to Understand Description of What to
Do.............................................................................................................................122
Figure 4.53 Side by Side Comparison Which Shows Same Color Scheme and Size
..................................................................................................................................122
Figure 4.54 Example of JalanYuk! Easily Understandable Icons............................123
Figure 4.55 JalanYuk! Giving Auto Complete in Response to User Input..............123
Figure 4.56 JalanYuk! Provide a New Search Button at the End of User Search
Action.......................................................................................................................124
Figure 4.57 JalanYuk! Filter....................................................................................124
Figure 4.58 JalanYuk! Reversing Effect Features....................................................125
Figure 4.59 JalanYuk! Only Showing the Route After User Has Chosen the Public
Transportation Type..................................................................................................125
Figure 4.60 Shows JalanYuk! Not Closing the Map When Displaying...................126
A18
TABLE OF APPENDICES
Appendix 1 User Requirement Questionnaire...........................................................A1

Appendix 2 User Acceptance Questionnaire.............................................................A3
Appendix 3 List of Available Angkot Route..............................................................A5
Appendix 4 Snippet Code..........................................................................................A6
18
A1
CHAPTER 1
INTRODUCTION
1.1 Background
Jakarta is the Capital City of Indonesia, located in the Java Island. Traffic jam
has becoming a probem that keeps growing at an alarming rate in Jakarta. According
to survey conducted by Castrol, Jakarta is ranked number 1 on the most congested
cities with highest number of stops and starts, with an average of 33,240 per driver
per year (Castrol Start Stop Index, 2015). This has become a huge issue that goes
around Jakarta in last few decades. To tackle this problem, Jakartas Governor Basuki
Tjahaja Purnama via metro.sindonews.com stated that the only working theory to
dissolve the congestion in Jakarta, is to make people willing to commute using public
transportation (Ahok Minta Warga Jakarta Beralih ke Kendaraan Umum, 2013).
There are a lot of public mass transportation in Jakarta, from systematized
ones, Transjakarta Busway and Commuter Line, and the ones that is not systematized
such as angkot. One problem that surfaces is, people still prefers to use their private
vehicle to commute.
With the advance development of Information Technology, human are living in
convenient where Information Technology helps human in many ways. Technology
is considered as one of the term that can be applied in any sector.The growing
population of smartphone users has changed how people react to a missing
information in transportation as cited in following statement. Information and
transportation are so intricately intertwined that smartphones and other
technologies have reshaped how urban dwellers get around in cities all over the
world. (Kaufman, 2012). With the booming of smartphone in society, people starts
integrating smartphone and internet to their everyday life. When the need of
information emerged, internet is the way for people to get the information almost
instantly. People in Indonesia is no exception, from a survey conducted by emarketer
in 2015, 55.4 milions of smartphone users are reported in Indonesia. In 2016,
smartphone users in Indonesia is predicted to reach 65.2 millions (Asia-Pacific
Boasts More Than 1 Billion Smartphone Users, 2015).
A2
Figure 1.1 Smartphone OS Market Share in Second Quartal of 2015

(Smartphone OS Market Share, 2015 Q2, 2015)
As table above depicted, Android is taking the lead for operation systems in the
world for second quartal in 2015, while iOS placed 2nd. The trend is the same in
Indonesia. Sharing Visions founder Dimitri Mahayana via sidomi.com said from
survey conducted by Sharing Vision in 2013, 60% of smartphone user in Indonesia is
using Android as their operating system (60% Smartphone di Indonesia Pakai OS
Android, 2014). While Android still dominates the market, from a survey conducted
by NetApplications, iOS users are seven times more active from Android users in
term of data usage. It occurs because Android targets the low end market, especially
in developing countries. Users in developing countries are using Android device only
to replace their regular phone and not for being active in the internet (Nistanto,
2014).
Based of arguments above, the application JalanYuk! will be developed in
web, android, and iOS platform to ease users when they want to travel in Jakarta with
public transportation, and to increase users interest in taking public transportation in
Jakarta. JalanYuk!s core functionality is to take user to their destination using public
transportation, with approximate duration of travel, calculation of total cost,
suggestion of routes based on duration and distance, added functionality of reporting
situations based on location, and also shows places of interest to look at for tourist or
for those who are visiting that wanted to see interesting places near the stops.
The current state-of-art of the topics regarding navigation no doubt is Google
Map. With its current technology, Google Map features include direction searching,
earth imagery view, real time traffic coloring, transit point, bicycle route, private map
making tool, real time accident information, place recommendation, place name
information, real imagery street view, travel direction, cost and time calculation,
2
A3
terrain view and level information, borders and even the earth and its surrounding
universe imagery. Further explanation of the state-of-art will be explained in second
chapter.
1.2 Problem Definition
The problems defined in this thesis are:

a. How to make an application to help user navigate their way to their destination
with public transportation by presenting user the information about route they
need to take to reach the destination, which include suggested routes that can
be selected based on time or distance in a user friendly manner.
b. How to develop application that will calculate total cost and calculate
approximate travel duration needed to reach the destination.
c. How to provide user the schedule and route for each public transportation.
d. How to get users participation to share their experience with other people in
taking public transportation based on the route they take.
e. How to provide information to nearest place of interest based on
transportations stop within the walking distance.
1.3 Scope of Work
Several boundaries are applied on the development of this application. The

scopes defined for this thesis are:
a. The development of the application is for web, Android, and iOS platform. The
mobile application currently has not been released in Google Play Store and
Apple App Store.
b. The public transportation that will be covered on this thesis is Transjakarta

Busway, Commuter Line, and 17 Angkot routes in Jakarta area.
c. The development of this application uses external resources and APIs, which
include Google Maps Directions API, Google Maps Javascript API, and
Foursquare API. Due to usage limits of Google Maps Directions API Free Plan,
several functionalities will have limitations and may not work as expected.
A4
4
A5
1.4 Objectives and Benefits
The objectives of the application are:

a. To develop web, Android, and iOS application that is able to show user route
suggestions based on time or distance of public transportation to reach the
destination
b. To provide the summary of total cost needed and estimated time to reach the
destination
c. To present user the schedule and route of selected public transportation
d. To provide a platform for sharing location-based report
e. To provide information and navigation to nearest place of interest based on
users stop.
The benefits of the application are:

a. To facilitate user if they want to take public transportation in Jakarta by
providing a simple and easy to use application in web, Android, and iOS to
navigate their trip
b. The user is informed about the total cost needed and approximate travel
duration to reach the destination.
c. The user is informed about the route and the schedule of selected public
transportation
d. Be a platform for reporting events or incidents based on their location and
provide a real-time situation condition of the stops, by the report shared by
another users
e. Enable user to search for places of interest based of transportations stop within
the walking distance.
A6
1.5 Research Methodology
Research Methodology that is used in the development of the application:

A. Literature Study
Literature study is conducted to get information needed in developing the
application. Resource of the literature is achieved from books, journal, and
article. In this thesis, literature study is conducted to gain informations
regarding the programming language to develop website and Android, and to
integrate various APIs such as Google Map API and Foursquare API to the
application.
B. Analysis of Similar Application
Analysis of similar application is used to analyze the features existed in
existing application, so that the features, weaknesses, and strengths of existing
application can be identified and also be compared to JalanYuk!. The analysis
of similar application will be conducted on 2 applications that are already in
the market: KIRI Smart Public Transport and KeMana: Your Jakarta Transport.
C. Questionnaires
Questionnaires are given into respondents in order to get information
regarding public transportation application that is existed today from the
perspective of each respondents. There are 2 questionnaires that will be spread
to respondents, the user requirement questionnaire which used to determine
users needs and user evaluation questionnaire to evaluate JalanYuk! overall
performance in fulfilling the applications purposes. The questionnaires result
will be processed and used for reference in developing the application.
1.6 Systematic Writing
The systematic writing of this thesis is:

A. Chapter 1 Introduction
Chapter 1 covers JalanYuk! background, problem description, scope of
work, objectives and benefits, research methodology and systematic writing.
B. Chapter 2 Literature Review
Chapter 2 explain about theories that support the development of the
application.
6
A7
C. Chapter 3 System Analysis and Design

Chapter 3 will explain about methodology that is implemented, user
requirement analysis, similar application analysis, and problem solving, as well
as UML design of the application.
D. Chapter 4 Implementation and Evaluation
Chapter 4 will explain about the result of this thesis, which is
implementation and evaluation of the application. The implementation covers
system requirements to run and develop the application, installation procedure,
and procedures on operating the application. The evaluation covers evaluation
of user interface and evaluation from user.
E. Chapter 5 Suggestion and Conclusions
This chapter will explain about conclusion and suggestion for further
development of the application.
A7
CHAPTER 2
LITERATURE REVIEW
2.1 Software Engineering Theory

2.1.1Software Development Methodology
2.1.1.1 Agile Development
Agility means rapid. These days business are changing rapidly, customers are
demanding the fast delivery of a product. Ivar Jacobson provides a useful discussion
for defining agility. In Jacobsons view, an agile team is a team that able to responds
to change quickly with appropriate actions. Change is something that is not unusual
in software development. Support for change should be something that a team should
embrace. The ability to collaborate for each member of the team is the core of the
success in the project (Pressman, 2015, p. 68).
Agile Development is a philosophy and set of guidelines for developing
information systems in an unknown, rapidly changing environment (Satzinger,
Jackson, & Burd, 2012, p. 226). The Agile development answers the questions
surrounding the unpredictability of a software development. In order to manage
unpredictability, an agile process must be adaptable (Pressman, 2015, p. 70).
The Manifesto for Agile Software Development (Satzinger, Jackson, & Burd,
2012) identifies four basic values, which represent the core philosophy of Agile
development:
a) Value responding to change over following a plan
b) Value individuals and interactions over processes and tools
c) Value working software over comprehensive documentation
d) Value customer collaboration over contract negotiation
2.1.1.2 Extreme Programming
Agile philosophy has proven as an effective way to approach software

development in todays fast paced society. However, agile development only
proposes principles. To become a methodology, it should have proper action steps
and practices (Satzinger, Jackson, & Burd, 2012).
Extreme Programming (XP) is one of the most widely used approach in agile
software development. Extreme Programming has four key activities (Pressman,
2015, pp. 72-75).
7
A8
Figure 2.2 The Extreme Programming Process (Pressman, 2015, p. 72)
1. Planning
Planning activity begins with a requirements gathering activity that
enables member of XP team to understand the context of the software, the
required output, and major features and functionality of the software from the
customer. This activity leads to the creation of a set of user stories.
2. Design
XP design principle is to keep it simple. A simple design is always
preferred over a complex representation. The design contains implementation
guidance for the user stories as it is.
A9
3. Coding
After stories are developed and preliminary design work is done, the
team develops a series of unit tests that will be implemented from the stories
that is to be included in the current release.
A key concept in coding activity in XP is pair programming. Pair
programming is when two people work together at one computer workstation
to create code for a story. These practices are good for real-time problem
solving and real-time quality assurance. The role of each person is different in
pair programming. For example, one person is focused on the coding details,
and the other ensures that the code will satisfy the user story.
4. Testing
Once the code is complete, a unit test is to be conducted and feedback
can be obtained immediately. Integration and validation testing of the system
can occur on a daily basis. XP acceptance tests are focused on overall system
features and functionality that are visible by the customer.
2.1.2Unified Modeling Language

2.1.2.1 Use Case Diagram
Taken from System Analysis and Design Method (Whitten & Bentley, System
Analysis and Design Methods, 2007, p. 246), use case diagram is a diagram which
graphically depicts the system as a collection of use cases, actors (users), and their
relationships. This diagram communicates at a scope of the business events that must
be processed by the system. In constructing use case diagram, the first step that needs
to be done is the process called functional decomposition, which is the act of
breaking a system apart into its subcomponents.
There are three components of use case diagram (Whitten & Bentley, System
Analysis and Design Methods, 2007, pp. 246-250):
1. Use Cases
Use cases describe the system functions from the perspective of external
users. It is represented graphically by a horizontal ellipse with the name of the
use case appearing above, below, or inside the ellipse. A use case represents a
single goal of the system and describes a sequence of activities and user
interactions in trying to accomplish the goal.
9
A10
2. Actors
Actors are external users that initiate or trigger use cases for the purpose of
completing some business task that produces something of measurable value. An
actor is not limited to human, it can be an organization, another information
system, and external device, or the concept of time. An actor is represented
graphically as a stick figure labeled with the name of the role.
3. Relationships
A relationship is represented by a line between two symbols on the use
case diagram. The following is the types of relationship in use case diagram:
1. Associations
An association is a relationship between an actor and a use case. It is
represented by a solid line connecting the actor and the use case. An association
can contain an arrowhead that indicates the use case was initiated by the actor on
the other end of the line, meanwhile if there is no arrowhead on the line, it
indicates interaction between receiver actor.
Figure 2.3 An Association Between Actors and Use Case

(Whitten & Bentley, System Analysis and Design Methods, 2007, p.
248)
2. Extends
When the functionality becomes more complex, oftentimes it is difficult to
understand. For the purpose of making it easier to understand, another use case can
be extracted from the complex steps, and is called as an extension use case.
Extension use case extends the functionality of the use case. To represent an
extension of a use case, arrowhead line labeled as <<extends>> is used. The
A11
arrowhead is pointing to the use case its extending, and the tail is from the extension
use case.
Figure 2.4 Extends Relationship Example (Whitten & Bentley,

System Analysis and Design Methods, 2007, p. 249)
3. Uses(or Includes)
Uses or Includes is the form of relationship between a use case and an abstract
use case. Abstract use case represents the steps taken by several use case that is
identical. An abstract use case is available for referencing steps that another use cases
require. To represents uses or includes, arrowhead line labeled as <<uses>> begins at
its original use case and points to an abstract use case that is used.
Figure 2.5 Uses/Include Relationship Example (Whitten &

Bentley, System Analysis and Design Methods, 2007, p. 249)
4. Depends On
11
A12
In several cases, a use case has a dependency on another use case to execute
itself. A use case diagram modeling the systems use case dependencies using the
depends on relationship provides a model that is an excellent tool for planning and
scheduling purposes. Depends On relationship is represented by arrowhead line
labeled as <<depends on>> and begins at one use case and points to a use case that it
is dependent on.
Figure 2.6 Depends on Relationship Example (Whitten &

5. Inheritance
Inheritance is applied when two or more actors share the same activity or use
the same use case. It is can be achieved by creating an abstract actor in order to
eliminate such redundancy. Inheritance relationship is depicted using a line with an
arrowhead, beginning from the actor, and pointing to the abstract actor in which the
actor inherited from.
A13
Figure 2.7 Inheritance on Relationship Example (Whitten &

2.1.2.2 Use Case Narrative
Use case narrative is first documented at a high level to paint the picture of a
system. Then for each high-level use case identified, it is expanded to a fully
documented business requirement narrative to include use cases typical course of
events and its alternate courses. (Whitten & Bentley, System Analysis and Design
Methods, 2007, pp. 256-258).
Use case narrative describes the event of a business, which is (Whitten &
Bentley, System Analysis and Design Methods, 2007, p. 258):
1. Author names of the one who write
the use case and whose provide a contact when someone requires additional
information about the use case.
2. Date the date the use case was last
modified.
3. Version the current version of the use
case.
4. Use-case name the use case name
should represent the goal that the use case is trying to accomplish. The name
should begin with a verb.
5. Use-case type in performing use case
modeling, business requirement use cases are constructed first. This type of use
case is business-oriented and reflects a high-level view of the desired behavior
13
A14
of the system. It is free from technical details and may include manual as well
as automated activities.
6. Use-case ID an identifier that
uniquely identifies the use case.
7. Priority communicates the
importance of the use case with the term high, medium, or low.
8. Source defines the entity that
triggered the creation of the use case. This could be a requirement, a specific
document, or a stakeholder.
9. Primary business actor the
stakeholder that primarily benefits from the execution of the use case by
receiving something of measurable or observable value.
10. Other participating actors other
actors that participate in the use case.
11. Interested stakeholder(s) a person
(other than actor) who has a vested interest in the goal of the use cases.
12. Description a short summary
description that consists of a couple of sentences outlining the purpose of the
use case and its activities.
13. Precondition a constraint on the state
of the system before the use case can be executed.
14. Trigger the event that initiated the
execution of the use case.
15. Typical course of events a normal
sequence of activities performed by the actor and the system in order to satisfy
the goal of the use case. These include the interactions between the system and
the actor and the activities performed by the system in response to the
interactions.
16. Alternate courses documents the
behaviors of the use case if an exception or variation to the typical course
occurs.
17. Conclusion specifies when the use
case successfully ends.
18. Postcondition a constraint on the
state of the system after the use case has been successfully executed.
19. Business rules specify policies and
procedures of the business that the new system must follow.
A15
20. Implementation constraints and

specifications specify any nonfunctional requirements that may impact the
realization of the use case and may be helpful in any architectural planning and
scoping.
21. Assumptions any assumptions that
were made by the creator when documenting the use case.
22. Open issues any questions or issues
that need to be resolved or investigated before the use case can be finalized.
Figure 2.8 Use Case Narrative Example (Whitten & Bentley, 2007, p. 259)
15
A16
Figure 2.9 (cont.) Use Case Narrative Example (Whitten & Bentley, 2007, p. 260)
2.1.2.3 Activity Diagram
Activity diagram is an additional diagram to model the process steps or

activities of the system. Activity diagrams are similar to flowcharts while also
different. They are similar in graphically depicts the sequential flow of activities of a
use case. They are different because they provide a mechanism to depict activities
that occur in parallel (Whitten & Bentley, 2007, p. 390).
The followings are the activity diagram notation (Whitten & Bentley, 2007, p.
391):
1. Initial node the solid circle representing the start of the process.
2. Actions the rounded rectangles representing individual steps.
3. Flow the arrows on the diagram indicating the progression through the
actions. If it is coming out of decisions, the flow needs words to identify which
condition is taken.
4. Decision the diamond shapes with one flow coming in and two or more flows
going out.
A17
5. Merge the diamond shapes with two or more flows coming in and one flow
going out. This combines flows that were previously separated by decisions.
Processing continues with any one flow coming into the merge.
6. Fork a black bar with two or more flows coming in and two more flows going
out. Actions on parallel flows beneath the fork can occur in any order or
concurrently.
7. Join a black bar with two or more flows coming in and one flow going out,
noting the end of concurrent processing. All actions coming into the join must be
completed before processing continues.
8. Activity final the solid circle inside the hollow circle representing the end of
the process.
9. Subactivity indicator the rake symbol in an action indicates that this action is
broken out in another separate activity diagram.
10. Connector a letter inside a circle gives you another tool for managing
complexity. A flow coming into a connector jumps to the flow coming out of a
connector with a matching letter
2.1.3Human and Computer Interaction

2.1.3.1 Eight Golden Rules
Taken from Designing the User Interface (Shneiderman, Designing the User
Interface, 2008, pp. 74-75), to improve the usability of an application, it is important
to have a well designed interface.
For an application to have a well designed interface, the followings are the
criteria:
1. Strive for Consistency
Consistent sequences of actions such as using identical terminology are used
in menus, prompts, etc. The commands should be applied consistently throughout
the application.
2. Cater To Universal Usability
Variety of users are expected to use the interface, hence the importance of
recognizing various users from novice to expert, various age range, and
technological diversity needs to be evaluated to enrich the requirements of the
design.
3. Offer informative feedback
For every action initiated by user, there should be a feedback from the
system
17
A18
4. Design dialog to yield closure

Informative feedback can be used to yield the sequences of actions.
Sequence of actions should be organized into groups with a beginning, middle,
and end. Users are informed when a certain actions are done and indicates user to
prepare for the next group of actions.
5. Offer simple error handling
The system should be able to detect the error and give a simple and
understandable solution to handle the error.
6. Permit easy reversal of actions
The system should offer the reverse action if the user makes an error. This
feature relieves anxiety to the user since they know that the error can be undone.
7. Support internal locus of control
Design the system to make users the initiators of actions rather than the
responders, so the user feels that they are in charge of the system and the system
responds to their actions.
8. Reduce short-term memory load
Humans have limitation on their short-term memory. The interface should
be kept simple, multiple page displays be consolidated, window-motion frequency
be reduced, and sufficient training time be allotted for codes, mnemonics, and
sequences of actions.
2.1.3.2 Five Measurable Human Factors
Taken from Designing the User Interface (Shneiderman & Plaisant, 2010, pp.
88-89) there are five measurable human factor for interface usability:
1. Time to learn.
The time taken for a typical user to learn how to use the application, thus
reducing the amount of time to relearn the features.
2. Speed of performance.
The amount of time needed to carry out a benchmark task
3. Rate of errors by users.

The amount of errors made by user, types of error that user made, and the
development of error prevention to reduce the amount of errors..
4. Retention over time.
The ability of user to maintain their knowledge after certain time passed.
The retention is linked closely to time to learn, and frequency of use.
5. Subjective satisfaction.
A19
The satisfaction for the application may be different for each user.
Satisfaction factors may include various aspects of the interface. The answer of
subjective satisfaction can be obtained via survey or interview.
2.2 Specific Theory

2.2.1Android
Android was released in November 2007 by Google, under the Open Handset
Alliance. The goal is to create a more open cell phone environment. Android is a
Java-based operating system that runs on the Linux kernel. The applications are
developed using Java and can be ported easily to the new platform (Dimarzio, 2008,
pp. 5-7).
Android possesses several features that makes it distinguishable from the rest
of mobile operating system. According to (Burnette, 2010, pp. 14-15), these are the
features that makes Android special:
A truly open, free development platform based on Linux and
open source: Handsetmakers can use and customize the platform without paying a
royalty. Developers like it because the platform is not locked into any one vendor
that may go under or be acquired.
A component-based architecture inspired by Internet mashups:
Parts of one application can be used in another in ways not originally envisioned
by the developer.
Tons of built-in services out of the box: Developers can use
whatever service they want such as location-based services using GPS, an SQL
Database to use local storage, or browser and map views that can be embedded
directly to your applications to help raise the bar on functionality while lowering
the budget.
Automatic management of the application life cycle: The end
user will no longer have to worry about what applications are active or close some
programs so that others can run. Android is optimized for low-power, low-
memory devices in a fundamental way that no previous platform has attempted.
High-quality graphics and sound: To support application that
relies heavily on graphics, Android supports them with smooth, antialiased 2D
19
A20
vector graphics and animation inspired by Flash, and the graphics are melded with
3D accelerated OpenGL graphics to enable new kinds of gmes and business
applications.
Portability across a wide range of current and future hardware:
Android applications are written in Java, so the code will be portable across other
architectures.
Android Versions History:

1.5 Cupcake
1.6 Donut
2.0 2.1 Eclair
2.2 2.2.3 Froyo
2.3 2.3.7 Gingerbread
3.0 3.2.6 Honeycomb
4.0 4.0.4 Ice Cream Sandwich
4.1 4.3.1 Jelly Bean
4.4 4.4.2 Kitkat
5.0 5.1.1 Lollipop
6.0 Marshmallow
2.2.2 iOS
iOS was released in 2007 by Apple Inc as a mobile operating system based on
Macintosh OS that works exclusively on Apple hardware like iPhone, iPad, and iPod
Touch. As it is designed for multi-touch devices, iOS supports direct manipulation
input and the system will respond to various user gestures such as pinching, tapping,
and swiping.
As the second most popular mobile operating system platform in the world by
sales, iOS has many features, as described by (Rouse, 2011), such as:
Integrated search support that enables simultaneous search through files, media,
applications, and email.
Gesture recognition supports, for example, shaking the device to undo the most
recent action.
Google Maps direction services.
Push email.
Safari mobile browser.
Integrated camera and video.
Integrated media player.
Direct access to Apple Stores catalogue of applications, music, podcasts,
television shows, and movies.
Compatibility with Apples cloud service, iCloud.
A21
2.2.3Java
Taken from Introduction to Java Language Comprehensive Edition (Liang,
2012, p. 13), Java was developed by a team led by James Gosling at Sun
Microsystems. Sun Microsystems was purchased by Oracle in 2010. Originally
called Oak, Java was designed in 1991 for use in embedded chips in consumer
electronic appliances. In 1995, renamed Java, it was redesigned for developing Web
applications.
The Java Programming Language is a general-purpose, concurrent, strongly
typed, class-based object-oriented language. Javas syntax is similar to C and C++.
Because Java is an interpreted language, the typical C or C++ compile-link-load-test-
debug cycle is reduced. Java development environments actually let the entire
software-development life cycle take place within a Web browser (Singh &
Rajasthan, 2013).
2.2.4Google Maps API
Taken from Beginning Google Maps API 3 (Svennerberg, 2010, pp. 1-4),
Google Maps application programming interface(API) allows developers to utilize
the potentials of Google Maps to use in their applications to display customized data
in an efficient and usable manner. The public API enables mashup of information
from multiple sources to be incorporated into a single mapping solution.
Despite the dynamic complexity that can be observed from the API, Google
Maps actually works with only HTML, CSS, and JavaScript. Initially, as user
navigates throughout the map, the API sends Ajax calls to communicate new
coordinates and zoom levels. A new API, the Google Maps JavaScript v3, was then
developed by Google in response to more extensive JavaScript libraries and
requirements for a better performance on mobile and desktop platforms. Beside the
JavaScript API, Google also developed Google Maps Android v3 for development on
Android platform, with some powerful capabilities such as 3D rendering, vector tiles,
and gesture control.
21
A22
2.2.5Foursquare API
Foursquare API enables programmer to discover places in an area, connecting
with Foursquare users, get global streaming check-in data, and knowing when
another Foursquare users check in. To be able to use Foursquare API, programmer
needs to create an app on Foursquare, so that client ID and client secret can be
obtained in order to use the API (How Do You Want To Use the Foursquare API?).
2.2.6HTML
HTML is a markup language for describing web documents. HTML stands for
Hyper Text Markup Language and is consisted of markup tags. HTML documents
are described by HTML tag and each HTML tag describes different document
content (HTML(5) Tutorial).
The original intent of HTML is different from other language which dictates all
of the presentation details such as font size, font style, and color. HTML is more
designed to specify documents at a higher level, because HTML documents needs to
be displayed in variety of computer systems using different browsers. With the
appearance of style sheets that could be used with HTML in late 1990, HTML
advanced its capabilities by providing ways to include the specification of
presentation details (Sebesta, 2008, p. 34). The newest revision of HTML is HTML5,
which was finalized and published on 28 October 2014 by the World Wide Web
Consortium (HTML(5) Tutorial).
Basic syntax in HTML uses tags as a syntactic units. Tags are used to specify
categories of content. For each tag, browsers have their own way in displaying the
content. The syntax of tag is the tags name surrounded by angle brackets (< and >)
and tags must be written in lowercase letters. Most tags appears in pairs, which has
an opening tag and closing tag. The name of closing tag, when required, is the name
of its corresponding tag with a slash attached to the beginning. For example, if the
tag name is p, its closing tag is </p>. Whatever apperars between an opening and a
closing tag is the content of the tag. Not all tags can have content (Sebesta, 2008, pp.
37-38).
A23
2.2.7CSS
Cascading Style Sheets(CSS) is used to take control of the style of web pages,
by allowing programmers to set rules to the document so that programmers can
control on how the elements within the document appears. CSS works by allowing
programmers to associate rules with the elements that appear in a web page. These
rules govern how the content of the elements should be rendered (Duckett, 2010, pp.
233-244).
CSS can be placed either inside the HTML document, or in a separate file
known as an external style sheet. When placed inside the HTML document, it is
placed inside a <style> element, which sits inside the <head> element of a document,
or as a value of a style attribute on any element that carry the style attribute (Duckett,
2010, p. 250).
2.2.8Javascript
JavaScript is the programming language of the Web. It is a high-level,
dynamic, untyped interpreted programming language that is well-suited to object-
oriented and functional programming syles. The majority of modern websites use
JavaScript, and all modern web browsers include JavaScript interpreters. JavaScript,
alongside HTML and CSS is the essentials on the production of web content.
(Flanagan, 2001, p. 1).
2.2.9jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like
HTML document traversal and manipulation, event handling, animation, and Ajax
much simpler with an easy-to-use API that works across a multitude of browsers
(What is jQuery).
2.2.10 AJAX
AJAX has several key features, which is update a web page without reloading
the page, request data from a server after the page has loaded, receive data from a
server after the page has loaded, and send data to a server in the background (AJAX
Introduction).
23
A24
2.2.11 PHP
PHP is a server scripting language, and a powerful tool for making dynamic
and interactive Web pages. PHP first developed in 1994, when a developer named
Rasmus Lerdorf created a set of CGI scripts to monitor page views for his online
resume. The current version of PHP is PHP 5.3.
PHP has unique features that differs from its competing alternatives like
ASP.NET or JSP. Unique features that is present in PHP are (Vaswani, 2008, pp. 5-6):
1. Performance
The PHP 5.0 engine was completely redesigned with an optimized memory
manager to improve performance, and is noticeably faster than previous versions.
2. Portability
PHP is available on UNIX, Microsoft Windows, Mac OS, and OS/2, and
PHP programs are portable between platforms.
3. Ease of Use
PHPs syntax is clear and consistent, and it comes with documentation for
the functions included with the core distribution. This significantly reduces the
learning curve for both novice and experienced programmers.
4. Open Source
PHP is an open source project, it can be used without payment of licensing
fees or investments in expensive hardware or software. The open source nature of
the code means that any developer can inspect the code tree, spot errors, and
suggest possible fixes.
5. Community Support
PHP is a community-supported language and gives access to the creativity and
imagination of hundreds of developers across the world.
6. Third-Party Application Support

PHP supports a wide range of different databases, including MySQL,
PostgreSQL, Oracle, and Microsoft SQL Server. PHPs extensible architecture an
also allows developers to write custome add-ons to the language.
A25
2.2.12 MySQL
MySQL is the 2nd most popular Open Source SQL database management
system. It is developed, distributed, and supported by Oracle Corporation. SQL
stands for Structured Query Language, which is the most common standardized
language for accessing databases. There are several ways to use SQL for different
programming environment, such as: direct use, embed SQL statement into code in
another language, or by using language-specific API that hides the SQL syntax (DB-
Engines).
2.2.13 Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile first projects on the web. Bootstrap is open source and can be
downloaded for free from the website, and it provides the means for making a front
end web development faster and easier by giving out the modifiable design template
and features. Bootstrap is available with only normal CSS, but if user wanted it,
bootstrap can also gives CSS processor, Less and Sass (Bootstrap).
According to sitepoint (sitepoint), Bootstrap is indeed the most popular
framework and the main strength of Bootstrap comes from the fact that so a lot of
people use it, thus in response, a lot of tutorials and resources are available. Popular
brand that created that utilize Bootstrap for their website includes Twitter, NBA,
Wallmart and Vogue.
2.2.14 Greedy Best First Search Algorithm

Greedy best first search (GBFS) is an algorithm that is quite popular to be used
as path-finding method. The way that GBFS works is, as explained by (Richter &
Westphal, 2010), the greedy best first search always expands a state with minimal
heuristic value h among all open states and never expands a state more than once,
meaning that at a node, GBFS will take the current best next node and that decision
is irreversible. This cause GBFS to be suboptimal, where, as quoted from (Felner,
25
A26
Korf, & Kraus, 2003, pp. 19-39), a solution is said to be optimal if it is a lowest-cost
path from the initial state to a goal state, otherwise it is suboptimal.
GBFS is intended to be use to find a good enough solutions in order to shorten
the calculating time and the path-finding decision made is entirely based on the
current heuristic value, thus while not closing the probability of GBFS finding the
best possible path, it also opens the probability of GBFS finding the worst possible
path, or even stuck on an endless loop.
Google Map is a web mapping service developed by Google Inc. As quoted
from (Hu & Dai, 2013, p. 102), Google Maps launched in 2015 has revolutionized
online mapping service application on the World Wide Web. With over a billion
monthly active users and dozens of function it is no doubt one of the most used and
most famous mapping service as well as one of the most state-of-the art.
The journey of Google Map start of as a C++ program designed by two Danish
brothers, whose company, Where 2 Technologies, later on propose the idea of a
purely web based mapping service to Google. In 2004 the said company is acquired
by Google Inc along with Keyhole, a geospatial data visualization company, and
ZipDash, a traffic analysis provider company, later on.
From its first announcement at 2005, Google Map has evolved tremendously
and has also give birth to many extraordinary application. Google Map incorporate
the imagery of the Moon to its map interface to create Google Moon and Marss
imagery to create Google Mars. Using real time traffic data, Google created Google
Traffic which gives real time traffic speed coloring on Google Map. Google also
created Google My Maps, which let users to create their own costume map. For users
that wanted to see the world, Google created Google Street View, which offers views
of various locations on land, Google Underwater Street View, which showcase the
sea, Google Aerial View, to see the cities on bird eye view, and Google Sky to goes
through the map of the visible universe, and many more.
Current, the short explanation of some of Google Map functions are; direction
searching, earth imagery view, real time traffic coloring, transit point, bicycle route,
private map making tool, real time accident information, place recommendation,
place name information, real imagery street view, travel direction, cost and time
A27
calculation, terrain view and level information, borders and even the earth and its
surrounding universe imagery.
With all of those features, it is no doubt that Google Map can be called one of
the most state-of-the-art web mapping service.
27
A28
CHAPTER 3
SYSTEM ANAYSIS AND DESIGN
3.1 Planning
The planning process consists of user requirement analysis, similar application

analysis, and problem solving.
3.1.1User Requirement Analysis

User requirement analysis for the application is conducted via online
questionnaire (http://goo.gl/forms/ucIQM8GIQr) and has gotten a total 121
respondents. The questionnaire consisted of 8 questions. The followings are the
questions and results from the online questionnaire:
1. What kind of transportation do you usually use?
Table 3.1 Questionnaires Result on Question Number 1

Choices Number of Percentage
Responses
Public transportation 45 37.2%
(continue to no.2)
Private vehicle (continue 76 62.8%
to no.3)
A29
Public Transportation; 45
Private Vehicle; 76
Figure 3.10 Questionnaire Result on Question Number 1
This questions purpose is to find out about the percentage of public

transportation user and private vehicle user. From the result above, private vehicle
user is still dominating. This means there is a problem for private vehicle user to not
take public transportation.
2. If you choose public transportation, what kind of public transportation do you

usually use?
Table 3.2 Questionnaire Result on Question Number 2

Responses
Bus 9 20%
Commuter Line 17 37.8%
Angkot 25 55.6%
Other 9 20%
29
A30
0 5 10 15 20 25 30
Figure 3.11 Questionnaire Result on Question Number 2
From the result of this question, majority of public transportation user is an

Angkot user, meanwhile the second most used is Commuter line. This application
caters both Angkot users and Commuter line users, with the addition of Transjakarta
Bus.
3. If you choose private vehicle, why do you rarely use public transportation?
Table 3.3 Questionnaire Result for Question Number 3

Responses
Do not know about the routes 47 35.6%
Do not know about the total cost 18 13.6%
Do not know about duration to 34 25.7%
arrive on destination
Do not know about the schedule 33 25%
A31
0 5 10 15 20 25 30 35 40 45 50
Figure 3.12 Questionnaire Result for Question Number 3
Based on the results above, respondents that use private vehicle on daily life
are reluctant on using public transportation because of the lack of information
regarding routes, price, duration, and schedule of public transportation. This
application will help user to tackle off these problems to encourage private vehicle
user to take on public transportation.
4. How often do you use internet?
Table 3.4 Questionnaire Result for Question number 4

Choices Number of Percentag
Responses e
Everyday 121 100%
Twice a week 0 0%
Once a week 0 0%
Less than once a week 0 0%
31
A32
Everyday; 121
The purpose of this question is to find out whether the respondent has internet
access with them. This application requires internet connection, which is not a
problem since 100% of the respondents use internet everyday.
5. What kind of device do you use to access internet?

Responses e
PC / Laptop 81 66.9%
Tablet 45 37.2%
Smartphone 119 98.3%
Other 16 13.2%
A33
0 20 40 60 80 100 120 140
This question proves that majority of respondents are accessing internet via
smartphone and PC/Laptop. This application is available both in mobile and web
platform.
6. Have you ever used a navigation application before?

Responses e
Yes 110 91.7%
No 11 8.3%
33
A34
No; 11
Yes; 110
This question is asked to find out about users familiarity on using application
for navigation. Majority of the respondents(91.7%) are already familiar on using
navigation application.
7. What kind of navigation application you have used?

Responses
Google Maps 92 83.6%
Waze 68 61.8%
Other 5 4.5%
0 10 20 30 40 50 60 70 80 90 100
A35
The purpose of this question is to find out what navigation application that user
mostly use, and if there is any other similar application that they use. Majority of the
respondents are familiar with Google Maps(83.6%) and Waze(61.8%). Some
respondents also answer with another application such as Daum map, Naver map,
Hyperdia, and Ovi map.
35
A36
8. In navigation application that geared towards public transportation, what

feature do you find useful?

Responses
Public transportation 108 89.3%
navigation and routes with
shortest duration
Scheduling for Commuter 57 47.1%
Line and Busses
Interesting places that 75 62%
surrounds bus
shelters/railway stations
The estimation of total 47 38.8%
cost
Others 4 3.3%
0 20 40 60 80 100 120
The purpose of this question is to find out whether the proposed feature of this
application is useful for the prospective customer. The result suggests that all
proposed features are essential and will be developed in the application.
A37
3.1.2Similar Application Analysis

3.1.2.1 KIRI Smart Public Transport
KIRI Smart Public Transport is a web-based and mobile application to help

user to navigate using public transportation. This application specializes in finding
the route from selected location to another point which the user desire. This
application is currently available both on web (http://kiri.travel) and android.
Figure 3.18 Screenshot of KIRIs Home Page
On KIRIs main screen, there are two blank text box fields labeled as From
and To, which allow user to input their initial location and destination to reach into
the text box. Once the text box has been filled, another field will appear to allow user
to select the exact location.
The search result will show the route which will be taken and what
transportation to use. The application will also give step by step directions and which
transportation to take for every step.
37
A38
Figure 3.19 Screenshot of KIRIs Search Results
Figure 3.20 Screenshot of KIRIs Step by Step Navigation
3.1.2.2 KeMana: Your Jakarta Transport
KeMana is a mobile based navigation application for Transjakarta Busway.

KeMana features include route, navigation, and user profile. The user profile menu is
still on development and will be updated on the next version.
A39
Figure 3.21 Screenshot of KeManas Main Menu
Route menu will give information about Transjakartas route. It will show two
tabs, busses and bus stops. Tab corridor shows a list of corridors of Transjakarta.
When one of the corridor is selected, the application will show the bus stop list of the
corridor and estimated time on busses arrival. Tab bus stop shows the list of bus stops
and if one of the bus stop is selected, the information of what corridor that goes
through the bus stop and estimated time for reaching each end of the following
corridor is shown.
39
A40
Figure 3.22 Screenshot of KeManas Buses Tab
Figure 3.23 Screenshot of KeManas Bus Stops Tab
Navigation menu will show a map with two blank fields labeled by Current
Location and Where do you want to go? in which user fill with the desired location.
A41
The application then shows the routes to take, total price, time to reach destination,
and the summary of what transportation to take.
Figure 3.24 Screenshot of KeManas Navigation Menu
41
A42
Figure 3.25 Screenshot of KeManas Navigation Result
Table 3.9 Comparison Between Similar Application

KIRI KeMana JalanYuk!
Navigation using
Transjakarta
Navigation using -
Commuter Line
Navigation using -
angkot
Alternative routes to - -
reach destination
Approximation of
duration to arrive at
destination
Calculation of total -
price
Navigation for - -
interesting places near
station / bus shelter
Live update on event - -
reported by users
A43
3.1.3 Problem Solving

From the result of user requirement analysis and analysis of similar
application, there are several points that need to be addressed to give user excellent
service in using JalanYuk!. The followings are the proposed solution to the problem:
1. The main features for JalanYuk! application based on user requirement analysis
are:
Navigation using public transportation, with suggestions of route based on the
duration and distance, and the calculation of total cost
Scheduling for Commuter Line and Transjakarta Buses
Nearby places that surrounds transportation stops
2. What lacks from other navigation application is interaction from users. The
feature added beside the ones defined on user requirement analysis is this
application will show user the live update of event reported based on location
of public transportation stops that is shared from JalanYuk! users.
3. This application requires internet connection in order to work properly. Two
most used device to access the internet is PC / Laptop and smartphone. Current
market leader for mobile Operating System is Android, and then followed by
iOS. This application will be available on web, Android and iOS, so that more
users can access the application despite the differences on the devices.
3.2 Design
In this step, the design of application consisting of interface design for web and
mobile platform is created. The system design such as use case, use case narrative,
activity diagram, and entity relationship diagram is also created.
43
A44
3.2.1 Application Design

3.2.1.1 Web Interface Design
Home Page
Figure 3.26 Home Page Website Design
The home page displays users current location in the map. Three links are
provided to navigate around the website: Home, Route and Schedule, and Login to
Submit Report. A search button is provided on the left side of the screen. Above the
search button, there are two blank fields to type in initial location and destination
location. On the bottom side of the screen, there is live update which shows the
incident reported from users. There are three dropdown menu for filtering the
reports: transportation filter, route filter, and time filter.
A45
Search Result and Route Detail
Figure 3.27 Search Route Website Design
Search result on routes found will be shown on the right side of the screen. The
summary of suggested routes such as route with shortest duration and other
alternative routes, will be found along with duration approximation and total cost.
Each route available can be clicked to reveal the details of the route which contain
step by step navigation, what vehicle to take, estimated duration, and fare for each
step.
45
A46
Figure 3.28 Route Detail Website Design
Show Nearby Places
Figure 3.29 Show Nearby Places Website Design
When user clicked a location on the map which has icon, be it their current
location, the stops between, or their destination, the window for showing nearby
location is shown. The window contains list of places near the location. There are
two buttons, navigate and website. Navigate is used for showing user navigation to
the place, while website button only shown when the place selected has a website.
When clicked, website button will redirect user to places website.
A47
Route And Schedule
Figure 3.30 Route and Schedule Website Design
To search for route path for each public transportation, user can head to Route
and Schedule page that is available via navigation bar. User can choose their desired
transportation then the application will show the list of routes available for the public
transportation.
Submit Event Report
47
A48
Figure 3.31 After Logged In Page Website Design
User can log in to the website by choosing login from the menu. Submit report
and logout button is only available after user logged in with their account. User must
log in first before they can write a report. There are 4 fields that need to be filled,
which is vehicle type, route, report type, and report.
1. Transportation type types of public transportation that wants to be reported

2. Line route of the public transportation
3. Type of Incident type of the incident that will be reported, there are 4 options,
late report, damaged road report, accident report, crowdedness report, and
cleanliness report
4. Message write the incident report on the text box.
Figure 3.32 Submit Event Report Website Design

A49
3.2.1.2 Mobile Interface Design
Home
Figure 3.33 Home Screen Design on Mobile Application
After application starts, the screen will show user current location and also
several boxes to type in initial location and destination location. On the bottom of the
screen, live update is shown and updated at real time to show user incidents reported
in a location.
49
A50
Figure 3.34 Menu Design on Mobile Application
From the home screen of JalanYuk!, there is a menu button on the upper left
side of the screen. When clicked, a dropdown menu will be shown under the menu
button.
A51
Search Result
Figure 3.35 Search Result Design on Mobile Application
When searching for route, the search result will be displayed on the bottom
side of the screen. The route suggestions will be shown along with duration and
distance estimation. When a route is clicked, the route summary will be displayed.
Route summary consisted of step by step navigation with cost for each step.
51
A52
Figure 3.36 Route Summary Design on Mobile Application
Show Nearby Location

A53
Figure 3.37 Nearby Location Design on Mobile Application
When a user selected either their initial location or destination location on the
map, a window of nearby location will be shown to user. From the list of location
shown, user can choose a location and get direction to reach the place. If a place has
a website, the website button will redirect user to the website.
Route and Schedule
Figure 3.38 Route and Schedule Design on Mobile Application
Route and schedule can be accessed via menu button on upper left side of the
screen. To display the route, user needs to select the transportation type from the
dropdown menu. After that, another box containing the list of route of public
transportation is displayed and if user selected one, the route details will be shown on
the map.
53
A54
Submit Event Report
Figure 3.39 After Logged in Screen Design on Mobile Application
User can log in to the application by choosing login from the menu on the
upper left side of the screen. Submit report and logout button is only available after
user logged in with their account. User must log in first before they can write a
report. There are 4 fields that need to be filled, which is vehicle type, route, report
type, and report.
1. Transportation type types of public transportation that wants to be reported
2. Line route of the public transportation
3. Type of Incident type of the incident that will be reported, there are 4 options,
late report, damaged road report, accident report, crowdedness report, and
cleanliness report
4. Message write the incident report on the text box.
A55
Figure 3.40 Submit Event Report Design on Mobile

Application
55
A56
3.2.2System Design
3.2.2.1 Use Case
Figure 3.41 Use Case for JalanYuk!

A57
3.2.2.2 Use Case Narrative
Table 3.10 View Map and Problem Report Use Case Narrative
Use-Case
View Map and Problem Report
Name
Use-Case ID USI-01
This use case describes the event of a user using the website's main
Description
page then use the search route function or problem report filter
User must access the website's home page or open the application
Precondition
and the device is connected to the internet
Trigger User open the website's main page
Typical
Course of
Events User's Action System Response
Step 2 - System generate the
Step 1 - User input the initial
valid location which name is
location
most similar to user's input
Step 3 - User choose one valid
location
Step 4 - User input the destination
valid location which name is
location
most similar to user's input
Step 6 - User choose one valid
location
Step 8 - System take both
Step 7 - User click search button source and destination
location
route from initial to
destination location
Step 10 - System show the
route detail
Step 11 - User click one route route and it's information
detail
Step 14 - System will clear
Step 13 - User click repeat search
the field
57
A58
Step 1 and 4 - System cannot find the route if the user did not input
Alternate
both location, system generate error message and user can either
Courses
input the location or abandons the search
Step 2 and 5 - System cannot find the valid location that

corresponds to the user input, system generate error message and
user can either re-input the location or abandons the route finding
Step 1 - User choose filter problem report function instead of find

route function, user choose the public transportation type, system
will generate route according to the type and if user want to, they
can also choose the route
Step 13 - User does not want to repeat the search, user do not click
repeat search
System will display the route from source to destination and also
Postcondition
it's information detail
Google map api service will always works, user has access to
Assumptions
internet and web browser
A59
Table 3.11 Find Nearby Location Use Case Narrative
Use-Case Find Nearby Location

Name
Use-Case ID USI-02
This use case describes the event of a user clicking the location
Description
point on the route generated by USI-01 (find route)
Precondition User must have done USI-01 (find route)
Trigger User click a point on the generated route

Typical
Course of User's Action System Response
Events
Step 2 - System uses
foursquare api to find nearby
Step 1 - User click a point
location from the clicked
point
Step 3 - System display the
list of nearby location
Alternate Step 2 - System did not found any nearby location, system shows
Courses no location
Postcondition System will display the list of nearby location
Foursquare api service will always works, user has access to
Assumptions
59
A60
Table 3.12 Open Nearby Locations Website Use Case Narrative

Use-Case
Open Nearby Location's Website
Name
Use-Case ID USI-03
This use case describes the event of a user clicking the link from
Description the list of nearby location generated by USI-02 (find nearby
location) then system will open the location's website
Precondition User must have done USI-02 (find nearby location)
Trigger User click the link from the list of nearby location
Typical
Course of
Events User's Action System Response
Step 1 - User click a link
from the list of nearby Step 2 - System open the location's
location website on a new page
Alternate Step 1 - Some places does not have a website, thus it is impossible
Courses to click them
Postcondition The clicked location's website is opened at a new page
Foursquare API service will always works, user has access to
Assumptions
A61
Table 3.13 Find Path to Nearby Location Use Case Narrative

Use-Case
Find Path to Nearby Location
Name
Use-Case ID USI-04
This use case describes the event of a user clicking the location
space from the list of nearby location generated by USI-02 (find
Description
nearby location) the system will find and generate a path from
the chosen location to the chosen nearby location
Precondition User must have done USI-02 (find nearby location)
Trigger User click the location space from the list of nearby location
Typical Course
User's Action System Response
of Events
Step 1 - User click the Step 2 - System generate a path
location space from the list of from the clicked location to the
nearby location clicked nearby location
generated path and it's
information detail
Alternate
-
Courses
System will display the route from source to destination and
Postcondition
also it's information detail
Google map API service and Foursquare API service will
Assumptions
always works, user has access to internet and web browser
61
A62
Table 3.14 View Route and Schedule Use Case Narrative

Use-Case
View Route and Schedule
Name
Use-Case ID USI-05
This use case describes the event of a user using the website to
Description
view the public transportation route and schedule
Precondition User must access the view route and schedule webpage
Trigger User open the webpage
Typical
Events
Step 2 - User
choose the Step 1 - System generate the list of public
type of public transportation type
transportation
Step 3 - System generate the list of public
transportation route detail according to the type
Step 4 - User
choose one of Step 5 - System generate the map of the chosen
the route public transportation route and show it's detail
detail
Alternate Step 2 and 4 - User did not choose one, system won't be able to
Courses generate the route and show the detail
Postcondition System will display the route and show it's detail
Google map API service will always works, user has access to
Assumptions
A63
Table 3.15 Login Use Case Narrative

Use-Case
Login
Name
User-Case ID USI-07
Description This use case describes the event of a user login to the website
Precondition User open the website's page
Trigger User click the login to report
Typical
Events
Step 1 - User
Step 2 - System will check whether the user
click login to
has login to google account or not
report
Step 3 - System display permission page
Step 4 - User
Step 5 - System logged-in the user
click allow
Step 6 - System redirect the user to the
website's main page
Step 2 - System check reveals that user has not login to google
Alternate account, system display google login page then user will login to
Courses google account, and continue step 3 and the rest of the step as
usual
Postcondition User successfully login
Assumptions User has access to internet and web browser
63
A64
Table 3.16 Logout Use Case Narrative

Use-Case
Logout
Name
User-Case ID USI-08
Description This use case describes the event of a user logout of the website
Precondition User must have done USI-07 (login)
Trigger User clicking the logout button
Typical
Events
Step 1 - User click
Step 2 - System log out the user
the logout button
Step 3 - System redirect user to website's
main page
Alternate
-
Courses
Postcondition User is successfully logout
A65
Table 3.17 Report Problem Use Case Narrative

Use-Case
Report Problem
Name
User-Case ID USI-10
This use case describes the event of a user opening the web's main page
Description
and then report the traffic news, event or incident
Precondition User must have done USI-07 (login)
Trigger User click the report menu
Typical Course
User's Action System Response
of Events
Step 1 - Click
Step 2 - Display report form
report problem
Step 2 - Choose
public Step 4 - Generate the chosen public transportation
transportation type route
type
Step 4 - Choose
route
Step 5 - Choose
report type
Step 6 - Input
report
Step 7 - Click
report button
Step 8 - Store user's input to database
Step 9 - Close the report form
Step 5 - If on step 4 user does not choose angkot, then there is an extra
Alternate step. If user choose transjakarta, system will generate the bus stop, else
Courses if user choose KRL, system will generate train station, and then user
have to choose one stop/station before inputting the report
Postcondition User's post is successfully posted
65
A66
3.2.2.3 Activity Diagram
Figure 3.42 View Map and Problem Report Activity Diagram

A67
Figure 3.43 Find Nearby Location Activity Diagram
Figure 3.44 Open Nearby Locations Website Activity Diagram
67
A68
Figure 3.45 Find Path to Nearby Location Activity Diagram
Figure 3.46 View Route and Schedule Activity Diagram

A69
Figure 3.47 Login to Submit Report Activity Diagram
69
A70
A71
Figure 3.48 Report Problem Activity Diagram
71
A72
Figure 3.49 Logout Activity Diagram

A73
3.2.2.4 Entity Relationship Diagram
Figure 3.50 Entity Relationship Diagram for JalanYuk!
73
A74
3.3 Coding
The coding takes place in this step. Each feature is implemented to the program
using selected programming language. Coding is done based on each feature. One
feature is coded after another iteratively.
Pair Programming
One of the key element of Extreme Programming is Pair programming. When a
developer coding the application, there is also another person sitting side by side to
give feedback and ensuring the developer that coded the program does not stray from
the user stories. Then the role can be reserved as needed.
3.3.1Refactoring
Another element needed in XP is refactoring. In each iteration, there will be
continuous improvement on the application whether it is visual design or algorithm
in the core system and it means the existing code will be improved. Rework and
modifying existing code is also called refactoring. Refactoring is needed to enable
developers to maintain and extend the code easily in the recent future. The more
developer get to know the part of the code, the more they will be able to predict
which part of the code will probably be refactored in the next iteration. Therefore, to
make it convenient in future, developers are responsible to code in a way that could
be maintained and extended in the very least effort.
In JalanYuk!, developers also have refactored the source code number of times.
The figure below is the code to add Get Current Location Feature in Jalan Yuk,The
green lines are new codes that are added for the feature. Developers added
geolocation function to get users location based on their IP address.
A75
Figure 3.51 Added Code for Get Current Location
75
A76
Figure below is a refactor code to improve the find route in JalanYuk! app.
Figure 3.52 Refactor Code in FindRoute Algorithm

A77
3.3.2Greedy Best First Search Algorithm

Below is the pseudocode of Greedy Best First Search Algoritm
implementation in JalanYuk!:
Figure 3.53 Class for Find Route Algorithm
77
A78
Figure 3.54 Function to Find the First Node

A79
Figure 3.55 Main Body of Find Route Algorithm
79
A80
Figure 3.56 (cont.) Main Body of Find Route Algorithm

A81
81
A82

A83
Figure 3.59 Get Fastest Route
3.4 Testing
Testing is conducted after the coding process has done. The testing process
consisted of three processes:
Unit Testing
Unit testing is conducted after each feature is coded. Unit testing tests each
feature before implemented into the actual system.
Integration Testing
Integration testing is conducted after unit testing has been done. After being
tested in unit test, the code is implemented into the actual application and integration
testing is conducted.
User Acceptance Testing
User plays a big part in Agile development, once the application has been
through the previous process, the output of the process is given to the customer to get
their response by trying the application and filling the questionnaires regarding the
performance of the application. Further explanation on User Acceptance Test is
explained in Chapter 4.
83
A84
A85
CHAPTER 4
IMPLEMENTATION AND EVALUATION
4.1 Application Implementation

4.1.1System Requirement
Minimum specification for developing JalanYuk!:

Hardware
o RAM : 4GB
o CPU : Intel Core 2 Duo Processor > 1.1 GHZ
o Storage : 500MB Free
Operating System
o Windows : Microsoft Windows XP (32 or 64-bit)
o Mac : Mac OS X 10.9 (Mavericks)
o IDE : Sublime Text 2.0
o Screen Resolution : 1280 x 800
o SDK : Java Development Kit (JDK) 7
o Server : Linux Server
o PHP : 4.3
Minimum specification for browser as user:

Browsers:
o Google Chrome : 37.0.2062
o Mozilla Firefox : 11.0
o Opera : Opera 2014
o Internet Explorer : 9.0
Mobile Smartphones and Tablet
o Google Chrome : 37.0.2062
o Mozilla Firefox : 11.0
o Opera : Opera 2014
o Internet Explorer : 9.0
85
A86
Minimum specification to install the application in mobile:

iOS
o iOS Version : 7.1
o Free Disk Space : 18MB
Android
o Android OS Version : Ice Cream Sandwich(4.0 4.0.4)
o Free Disk Space : 15MB
4.1.2Application Installation Procedure

4.1.2.1 Android Installation Procedure
1. To install JalanYuk! in android, first you need to locate and open the .apk file.
Figure 4.60 JalanYuk! .apk in Android
2. To install the application, tap install, to cancel the installation, tap cancel.
A87
Figure 4.61 JalanYuk! .apk Installation in Android
3. Wait for the installation process to finish and tap done to finish the installation, or
open to open JalanYuk! application.
Figure 4.62 Installation Finished in Android
87
A88
4.1.2.2 iOS Installation Procedure
For iOS installation, it requires PC/Mac with iTunes installed. Apple is very
strict on regulations. To be able to mass distribute JalanYuk!, the application need to
be submitted to the Apple App Store. For the time being, JalanYuk! on iOS can only
be distributed via connecting the desired iOS device to the developers Mac
Computer.
Here are the steps to install JalanYuk! iOS application:
1. Connect iOS Device via USB port

2. Open Xcode and open JalanYuk! Project
Figure 4.63 Xcode Screen
3. Choose Device
4. Click play button to install it in the device
5. JalanYuk! icon will be displayed in the home screen
A89
Figure 4.64 Home Screen of Device Running iOS with JalanYuk! Installed
4.1.3Application Manual
4.1.3.1 Web Application Manual
To use JalanYuk! in website, the steps are:
1. Open a web browser (Google Chrome, Mozilla Firefox,Opera)

2. Type https://www.eannovate.com/dev/map/index2.php in the address bar
Figure 4.65 JalanYuk! Website Homepage
89
A90
3. User can get their current location by clicking the icon on the right side of the map
Figure 4.66 Get Current Location in JalanYuk!
4. User can also get their current location by clicking the icon between From
Mana and Mau Kemana field. The icon on the left side represents user current
location, and the icon on the right side is for switching the contents in From
Mana and Mau Kemanafield. If user clicked get current location, JalanYuk!
will automatically get user location and set it as the initial location on the From
Mana field. User can also fill From Mana field by themself.
Figure 4.67 Get Current Location and Switch Location Icon in

JalanYuk!
5. Now, type the destination location in the Mau Kemana field. Example: Grand
Indonesia, Ancol, Monas, Central Park Mall, etc.
6. There will be an autocomplete list to confirm your destination place. Choose and
click your desired destination place from the list.
A91
Figure 4.68 Autocomplete on JalanYuk! Website
7. Click the rounded red button Cari.

8. JalanYuk! will process the request and find the best possible routes and 3 other
alternative routes.
9. The suggested routes will be displayed on the right side of the map(for PC) and
below the map(for smaller devices such as tablet and smartphone).
Figure 4.69 Suggested Routes in JalanYuk! Website
10. Click one of the routes, the routes path will be displayed on the map and
summary of the route will be displayed. The summary of the routes tells the
approximate duration of the route, number of transit needed, distance, and cost.
The green pin indicates the initial location, while the blue pin indicates the
destination location. The blue dashed lines indicates a walking path and the
brown line is a representation of Commuter Line path.
91
A92
Figure 4.70 Summary of the Route and Route Path in JalanYuk!

Website
11. To view nearby places, click one of the icon (Commuter Line station,
Transjakarta bus shelter, and location pin). Nearby places is in the radius of
100m from the point clicked. To get navigation to the nearby place selected,
click Petunjuk. If a website for the place is available, a button called
Website is displayed. When user clicks Website button, user will be
redirected to the website of the place. To view other routes, click the leftward
arrow beside Ringkasan Perjalanan and repeat the steps. To look for other
routes, click Mulai Pencarian Baru on the bottom of the Summary or refresh
the page.
Figure 4.71 View Nearby Location in JalanYuk! Website
12. To report an incident in JalanYuk!, go to the homepage of JalanYuk! website by

clicking Beranda or by typing the website address
https://www.eannovate.com/dev/map/index2.php.
A93
13. Click Login untuk Lapor, and then login via Google and Gmail account. Click
allow and the website will be redirected back to JalanYuk!.
Figure 4.72 Using Gmail Account to Login to JalanYuk! Website
14. Click your name and click Lapor Masalah.
Figure 4.73 Reporting an Event in JalanYuk! Website
15. You can help fellow user by reporting incidents that you encounter by first,
select the type of transportation (Commuter Line, Transjakarta Bus, or Angkot).
Then, select the line (for example Tangerang - Duri, Kalideres - Harmoni), and
then select the location. Next, choose the type of incident (hygiene, accident,
late/delay, etc) and last, type in your message to notify other users. Click
Lapor to post your report.
93
A94
Figure 4.74 Report an Incident in JalanYuk! Website
4.1.3.2 Mobile Application Manual
JalanYuk! mobile application is available on Android and iOS. To use the

application, the steps are:
1. Tap the JalanYuk! icon in home on your mobile device.
Figure 4.75 JalanYuk! Icon on iOS

A95
Figure 4.76 JalanYuk! Icon on Android
2. To search for routes, user can type in their initial location in From Mana field
and their destination location in Mau Kemana field. There are two buttons
between From Mana and Mau Kemana field. The left button is to get users
current location and set it to From Mana field. The button on the right side is to
switch the contents in From Mana and Mau Kemana field.
Figure 4.77 JalanYuk! Mobile Application
95
A96
3. When typing in the field, there will be an autocomplete list to confirm the
location. Choose and tap your desired location from the list.
Figure 4.78 Autocomplete on JalanYuk! Mobile Application
4. Tap the rounded red button Cari. JalanYuk! will process the request and find the
best possible routes and three other alternative routes. The route suggestions will
be displayed below the map.
A97
Figure 4.79 Route Suggestions on JalanYuk! Mobile Application
5. Click one of the routes, the route path will be displayed on the map and summary
of the route will be displayed. The summary of the routes tells the approximate
duration of the route, number of transit needed, distance, and cost. The green pin
is the initial location and blue pin is the destination location. Blue dashed lines is a
walking path and the brown line is a representation of the Commuter Line path.
97
A98
Figure 4.80 Route Summary in JalanYuk! Mobile Application
6. To view nearby places, click one of the icon (Commuter Line station, Transjakarta
bus shelter, and location pin). Nearby places is in the radius of 100m from the
point clicked. To get navigation to the nearby place selected, click Petunjuk. If a
website for the place is available, a button called Website is displayed. When
user clicks Website button, user will be redirected to the website of the place. To
view other routes, click the leftward arrow beside Ringkasan Perjalanan and
repeat the steps. To look for other routes, click Mulai Pencarian Baru on the
bottom of the Summary or refresh the page.
A99
Figure 4.81 View Nearby Location in JalanYuk! Mobile Application
7. To Report an Event in JalanYuk!, tap Login untuk Lapor from JalanYuk!s menu
that is located in upper left side of the screen.
Figure 4.82 Dropdown Menu of JalanYuks Mobile Application
8. Login via Google and Gmail account. Tap allow and the website will be redirected
back to JalanYuk!.
99
A100
Figure 4.83 Login with Gmail Account
9. Tap your picture and click Lapor Masalah.
Figure 4.84 Reporting an Event in JalanYuk! Mobile Application
10. You can help fellow user by reporting problems that you know or see by first,
select the type of transportation(Commuter Line, Transjakarta Bus, or Angkot).
Then, select the line (for example Tangerang - Duri, Kalideres - Harmoni), and
then select the particular station that has the problem. Next, choose the type of
incident(hygiene, accident, late/delay, etc) and last, type in your message to
notify other users. Tap Lapor to post your report.
A101
Figure 4.85 Report an Event in JalanYuk! Mobile Application
4.2 Evaluation
4.2.1User Evaluation
4.2.1.1 User Acceptance Test
Users of JalanYuk! are given questionnaire in order to assess their experience

on using the application and also to serve as the tool to evaluate users opinion about
the usability and performance of JalanYuk!
The questionnaire is given out via online questionnaire
(http://goo.gl/forms/05iUyMd5wZ) and has gotten a total of 50 respondents.
The questionnaire consisted of 8+5 questions, where the leading 8 are same
question given to everyone, while the remaining 5 are the same questions but divided
into two groups based on the 8th answer on the first 8 questions. The followings are
the questions and results from the online questionnaire:
101
A102
1. Is the navigation information given by this application accurate?

Choices Number of Responses Percentage
Yes 45 10%
No 5 90%
45 out of 50 respondents say that the navigation information given by this

application is accurate. The results indicates that most of the respondents believe that
the navigation information by JalanYuk! is accurate and is satisfied with it.
2. Is the total cost given by this application accurate?

Yes 41 82%
No 9 18%
A103
Figure 4.87 Questionnaire Result for Question number 2
41 out of 50 respondents say that the total cost given by this application is
accurate. The results indicates that most of the respondents believe that the total cost
by JalanYuk! is accurate and is satisfied with it.
3. Is the approximate travel time given by this application accurate?

Yes 32 64%
No 18 36%
103
A104
32 out of 50 respondents say that the approximate travel time given by this
application is accurate. The results indicates that more than half of the respondents
believe that the approximate travel time given by JalanYuk! is accurate and is
satisfied with it.
4. Is the alternative route given by this application accurate?

Yes 41 82%
No 9 18%
41 out of 50 respondents say that the alternative route given by this application
is accurate. The results indicates that most of the respondents believe that the
alternative route by JalanYuk! is accurate and is satisfied with it.
A105
5. Is the schedule information given by this application accurate?

Yes 34 68%
No 16 32%
34 out of 50 respondents say that the schedule information given by this

application is accurate. The results indicates that more than half of the respondents
believe that the schedule information by JalanYuk! is accurate and is satisfied with it.
6. Is the live update report given by this application accurate?

Yes 40 80%
No 10 20%
105
A106
40 out of 50 respondents say that the live update report given by this
application is accurate. The results indicates that most of the respondents believe that
the live update report by JalanYuk! is accurate and is satisfied with it.
7. Is the information about interesting place around the station/stops given by this
application accurate?

Yes 44 88%
No 6 12%
A107
44 out of 50 respondents say that the information about interesting place

around the station/stops given by this application is accurate. The result indicates that
most of the respondents believe that the information about interesting place around
the station/stops by JalanYuk! is accurate and is satisfied with it.
8. From where did you open JalanYuk! ?

Responses e
Website 36 72%
(continue to website evaluation
survey)
Mobile Application 24 28%
(continue to mobile application
evaluation survey)
107
A108
36 out of 50 respondents say that they open JalanYuk! from website and the
rest open them from mobile application. The result might be due to the fact that
mobile application user might also open the website instead of having the application
installed.
Result for website evaluation survey:

1. Do you need a long time to understand how to use this application?

Yes 7 19.4%
No 29 80.6%
A109
29 out of 36 respondents say that they did not need a long time to understand
how to use this application. The results indicates that most of the respondents feels
that JalanYuk! is easy to use.
2. According to you, do the error handling in this application is good enough?

Yes 30 83.3%
No 6 16.7%
30 out of 36 respondents say that the error handling in this application is

accurate. The result indicates that most of the respondents believe that the error
handling in this application is good enough and is satisfied with it.
3. According to you, does this application need a long time to show the route
calculation?

Yes 6 16.7%
No 30 83.3%
109
A110
30 out of 36 respondents say that JalanYuk! does not need a long time to show
route calculation. The result indicates that most of the respondents are satisfied with
the route calculation speed.
A111
4. According to you, does the method to use this application is easy to remember?

Yes 34 94.4%
No 2 5.6%
34 out of 36 respondents say that JalanYuk! is easy to remember. The result

indicates that most of the respondents feels that JalanYuk! is easy to remember and is
satisfied with it.
111
A112
5. How satisfied are you with this application?

Responses
Very Unsatisfied 1 2.8%
Unsatisfied 4 11.1%
Satisfied 24 66.7%
Very Satisfied 7 19.4%
1 out of 36 respondents say that they are very unsatisfied with JalanYuk! 4 out
of 36 respondents says that they are unsatisfied with JalanYuk! probably due to the
fact that JalanYuk! has limited information on the database thus unable to give out a
very accurate calculations. 24 out of 36 respondents says that they are satisfied with
JalanYuk! and 7 out of 36 says theyre very satisfied. Overall most of the respondents
are satisfied with JalanYuk!.
A113
Result for mobile application evaluation survey:


Yes 1 7.1%
No 13 92.9%
13 out of 14 respondents say that they did not need a long time to understand
how to use this application. The results indicates that most of the respondents feels
that JalanYuk! is easy to use.

Yes 11 78.6%
No 3 21.4%
113
A114
11 out of 14 respondents say that the error handling in this application is

accurate. The result indicates that most of the respondents believe that the error
handling in this application is good enough and is satisfied with it.
calculation?

Yes 2 14.3%
No 12 85.7%
A115
12 out of 14 respondents say that JalanYuk! does not need a long time to show
route calculation. The result indicates that most of the respondents are satisfied with
the route calculation speed.
4. According to you, does the method to use this application is easy to remember?

Yes 14 100%
No 0 0%
115
A116
14 out of 14 respondents say that JalanYuk! is easy to remember. The result

indicates that all of the respondents feels that JalanYuk! is easy to remember and is
satisfied with it.

Responses
Very Unsatisfied 0 0%
Unsatisfied 1 7.1%
Satisfied 11 78.6%
Very Satisfied 2 14.3%
A117
0 out of 14 respondents say that they are very unsatisfied with JalanYuk! 1 out
of 14 respondents says that they are unsatisfied with JalanYuk! probably due to the
fact that JalanYuk! has limited information on the database thus unable to give out a
very accurate calculations. 11 out of 14 respondents says that they are satisfied with
JalanYuk! and 2 out of 14 says theyre very satisfied. Overall most of the respondents
are satisfied with JalanYuk!.
4.2.1.2 Five Measurable Human Factor Evaluation
Five measurable human factors were used to measure users satisfaction of

JalanYuk! The five measurable human factors were implemented through application
review questionnaire, in which there are five questions and each one represents one
point on the five measurable human factors with the following explanation:
1. Time to learn
84 percent of all respondents stated that they can quickly learn how to use
JalanYuk! according to question number 1. That means most of the respondents
does not require a long time to learn how to navigate and use JalanYuk!.
2. Speed of performance
66 percent of all respondents stated that JalanYuk! does not need a long time
to show route calculation according to question number 2. That means more than
half of the respondents feel that the time between search function triggered and
the result displayed is not significant enough to cause discomfort. The rest of the
117
A118
respondents answer might come from the fact that JalanYuk! is an online
application that highly depends on the internet connection speed.
3. Rate of errors by users
64 percent of all respondents stated that the error handling in JalanYuk! is
good enough. That means more than half of respondents feel that there is no
annoying or disruptive error on JalanYuk!. The rest of the respondents answer
might come from several reasons, the first being that respondent cannot find any
error thus they cannot measure the error handling, the second one comes from the
fact that JalanYuk! does not give error message for every single action, and the
third comes from the fact that JalanYuk! only have a limited amount of stops info
on the database which cause JalanYuk! to sometimes fail in displaying the correct
route which the respondent might confused with error/bug.
4. Retention over time
96 percent of all respondents stated that JalanYuk! usage method is easy to
remember. That means almost all respondents feel that JalanYuk! is not
complicated and have enough visual clues/help text, thus making it easy to
remember how to use it.
5. Subjective satisfaction
70 percent of all respondents stated that they are satisfied with JalanYuk!
while 18 percent said they are very satisfied, 10 percent said they are unsatisfied,
and 2 percent said they are very unsatisfied. That means most of the respondents
feels that JalanYuk! is satisfying enough, while the rest of the respondents answer
might comes from the the fact that JalanYuk! only have a limited amount of stops
info on the database which cause JalanYuk! to sometimes fail in displaying the
correct route which the respondent might be unhappy with.
A119
4.2.2User Interface Evaluation

JalanYuk! application is analyzed based on the eight golden rules of interface
design by Schneiderman and Plaisant to improve the usability of the application and
make it applicable in most interactive system.
4.2.2.1 Web Application User Interface Evaluation
1. Aim for consistency

JalanYuk! has been designed with consistency in mind. Consistency are
achieved by making sure that the main layout, color, font, and iconography does not
change from page to page, limiting the number of color used, and using universally
acknowledged icons.
Figure 4.104 Side by Side Comparison Between JalanYuk! Main

Page
and Route and Schedule Page
2. Cater to universal usability

JalanYuk! caters to a wide range of user diversity by using simple yet
understandable language and also providing easily understandable icons and
symbols.
Figure 4.105 JalanYuk! Easy to Understand Icon
119
A120
A121

JalanYuk! acknowledge users need for feedback by giving responses for users
action through visual representations and dialogues.
Figure 4.106 JalanYuk! Auto Complete in Response to User Input

JalanYuk! gives closure by providing user with visual clues, changes and
dialogues for every completed action done by user.
Figure 4.107 JalanYuk! Redo Search Button at the End of User Search
Action
5. Prevent errors
121
A122
JalanYuk! is build with the ability to handle errors and in case of error types
which involves the user, JalanYuk! will provide the user with suitable feedback.
Figure 4.108 JalanYuk! Filter

Reversing is easy in JalanYuk! since JalanYuk! provides back and clear for
most option and/or choice.
Figure 4.109 JalanYuk! Reversing Effect Features

JalanYuk! places the user in charge by waiting for user input before taking
action, giving filters and choices.
Figure 4.110 JalanYuk! Waiting for Users Filter Choice Before

Displaying the Result

A123
JalanYuk! reduces users need to memorize by giving menus, visual clues,

guide, and by not clearing the result of users action before they will it.
Figure 4.111 JalanYuk! Giving Short yet Easy to Understand

Description of What to Do
4.2.2.2 Mobile Application User Interface Evaluation
1. Aim for consistency

JalanYuk! has been designed with consistency in mind. Consistency are
achieved by making sure that the main layout, color, font, and iconography does not
change from page to page, limiting the number of color used, and using universally
acknowledged icons.
Figure 4.112 Side by Side Comparison Which Shows Same Color Scheme and Size
2. Cater to universal usability
123
A124
JalanYuk! caters to a wide range of user diversity by using simple yet

understandable language and also providing easily understandable icons and
symbols.
Figure 4.113 Example of JalanYuk! Easily Understandable Icons

JalanYuk! acknowledge users need for feedback by giving responses for users
action through visual representations and dialogues.
Figure 4.114 JalanYuk! Giving Auto Complete in Response to User Input

JalanYuk! gives closure by providing user with visual clues, changes and
dialogues for every completed action done by user.
A125
Figure 4.115 JalanYuk! Provide a New Search Button at the End

of User Search Action
5. Prevent errors
JalanYuk! is build with the ability to handle errors and in case of error types
which involves the user, JalanYuk! will provide the user with suitable feedback.
Figure 4.116 JalanYuk! Filter
125
A126

Reversing is easy in JalanYuk! since JalanYuk! provides back and clear for
most option and/or choice.
Figure 4.117 JalanYuk! Reversing Effect Features

JalanYuk! places the user in charge by waiting for user input before taking
action, giving filters and choices
Figure 4.118 JalanYuk! Only Showing the Route After User Has Chosen the Public
Transportation Type

JalanYuk! reduce users need to memorize by giving menus, visual clues,
guide, and by not clearing the result of users action before they clear it manually.
A127
Figure 4.119 Shows JalanYuk! Not Closing the Map When Displaying
the Route Detail
127
A128
CHAPTER 5
CONCLUSION AND SUGGESTIONS
5.1 Conclusion
Based on the two survey conducted, the first being used to analyze the user
requirement for public transportation navigation service and the second one to review
JalanYuk! finished application, the second survey has shown that JalanYuk!
positively able to fulfill user requirement from the first survey.
The feature of JalanYuk! which represents the solution to the requirement such
as:
1. Generating navigation route with alternatives and giving information about the
route such as distance, travel duration, and total cost. According to the user
evaluation survey, on table 4.1, 90 percent of respondent says that the navigation
information is accurate, on table 4.3, 64 percent of respondent says the
approximate travel time given is accurate, and on table 4.2, 82 percent of
respondent says that the total cost given is accurate.
2. Giving a list of nearby location based on each stop and providing the navigation
to the nearby location. According to the user evaluation survey, on table 4.7, 88
percent of respondent says that the information about interesting place around
the station/stops given by this application is accurate.
3. Letting user read and post public transportation review and event report.
According to the user evaluation survey, on table 4.6, 80 percent of respondent
says that the live update report given by this application is accurate.
4. Making the application available on web, Android, and iOS. According to the
user evaluation survey, on table 4.8, 72 percent of respondent open JalanYuk!
from website and 28 percent open from mobile application.
A129
5.2 Suggestion
JalanYuk! has been made to the best of abilities but due to time constriction, it
is still far from perfect. In response to that, on the next development, the respondent
wishes that:
1. The navigation route, distance, travel time and cost to be made more accurate.
According to the user evaluation survey, on table 4.1, 10 percent of respondent
says that the navigation information is not accurate, on table 4.3, 36 percent of
respondent says the approximate travel time given is not accurate, and on table
4.2, 18 percent of respondent says that the total cost given is not accurate.
2. The public transportation problem report to be made more accurate. According
to the user evaluation survey, on table 4.6, 20 percent of respondent says that the
live update report given is not accurate.
Here are the future works for further refinement and research:
1. Further improvement of the path finding algorithm to produce a more accurate
navigation and information
2. Increasing the number of available public transportation
3. Releasing the mobile application in Google Play Store and Apple App Store.
129
A130
BIBLIOGRAPHY
60% Smartphone di Indonesia Pakai OS Android. (2014, June 10). Retrieved January
08, 2016, from SIDOMI: http://sidomi.com/296610/60-smartphone-di-
indonesia-pakai-os-android/
Ahok Minta Warga Jakarta Beralih ke Kendaraan Umum. (2013, June 11). Retrieved
January 8, 2016, from Sindonews:
http://metro.sindonews.com/read/748446/31/ahok-minta-warga-jakarta-beralih-
ke-kendaraan-umum-1370931551
AJAX Introduction. (n.d.). Retrieved January 23, 2016, from w3schools:

http://www.w3schools.com/ajax/ajax_intro.asp
Asia-Pacific Boasts More Than 1 Billion Smartphone Users. (2015, September 16).
Retrieved January 10, 2016, from eMarketer:
http://www.emarketer.com/Article/Asia-Pacific-Boasts-More-Than-1-Billion-
Smartphone-Users/1012984
Bootstrap. (n.d.). Retrieved January 24, 2014, from Bootstrap:

http://getbootstrap.com/
Burnette, E. (2010). Hello, Android: Introducing Google's Mobile Development

Platform. Pragmatic Bookshelf.
Castrol Start Stop Index. (2015). Retrieved January 8, 2015, from Castrol Web site:
http://www.castrol.com/en_au/australia/products/cars/engine-oils/castrol-
magnatec-brand/stop-start-index.html
DB-Engines. (n.d.). Retrieved January 24, 2016, from DB-Engines: http://db-

engines.com/en/
Dimarzio, J. F. (2008). Android a Programmer's Guide. McGraw-Hill Education.
Duckett, J. (2010). Beginning HTML, XHTML, CSS, and JavaScript . Wrox.
Felner, A., Korf, R. E., & Kraus, S. (2003). KBFS: K-best-first search. Annals of
Mathematics and Artificial Intelligence Journal , 19-39.
A131
Flanagan, D. (2001). JavaScript: The Definitive Guide. O'Reilly Media.
How Do You Want To Use the Foursquare API? (n.d.). Retrieved January 23, 2016,
from Foursquare for developers: https://developer.foursquare.com/start
HTML(5) Tutorial. (n.d.). Retrieved January 23, 2016, from w3schools:

http://www.w3schools.com/html/default.asp
Hu, S., & Dai, T. (2013). Online Map Application Development Using Google Map
API, SQL Database, and ASP.NET. International Journal of Information and
Communication Technology Research , 102.
Kaufman, S. (2012, October 25). Mapping Mobility: The Importance of Information

in Transportation. Retrieved January 8, 2016, from The City Fix:
http://thecityfix.com/blog/mapping-mobility-the-importance-of-information-in-
transportation/
Liang, Y. D. (2012). Introduction to Java Programming, Comprehensive Version (9th

Edition). Pearson.
Nistanto, R. K. (2014, August 6). Menang Jumlah, Android Kalah Eksis ketimbang
iOS. Retrieved January 12, 2016, from
http://tekno.kompas.com/read/2014/08/06/12480067/Menang.Jumlah.Android.
Kalah.Eksis.Ketimbang.iOS
Pressman, R. S. (2015). Software Engineering: A Practitioner's Approach. McGraw-

Hill.
Richter, S., & Westphal, M. (2010). The LAMA Planner: Guiding Cost-Based
Anytime Planning with Landmarks. Journal of Artificial Intelligence
Research , 127-177.
Rouse, M. (2011, December). iOS definition. Retrieved January 24, 2016, from
TechTarget: http://searchmobilecomputing.techtarget.com/definition/iOS
Satzinger, J. W., Jackson, R. B., & Burd, S. D. (2012). Systems Analysis and Design
in a Changing World, 6th Edition. Course Technology.
131
A132
Sebesta, R. W. (2008). Programming the World Wide Web. Pearson Addison Wesley.
Shneiderman, B. (2008). Designing the User Interface. Pearson.
Shneiderman, B., & Plaisant, C. (2010). Designing the User Interface.
Shneiderman, B., & Plaisant, C. (2005). Designing the User Interface: Strategies for
Effective Human-Computer Interaction. Addison Wesley.
Singh, T., & Rajasthan, J. (2013). New Software Development Methodology for
Student of Java Programming Language. International Journal of Computer
and Communication Engineering, Vol. 2, No. 2 , 194.
sitepoint. (n.d.). Retrieved January 24, 2016, from sitepoint:

http://www.sitepoint.com/
Smartphone OS Market Share, 2015 Q2. (2015). Retrieved January 8, 2016, from
IDC.
Svennerberg, G. (2010). Beginning Google Maps API 3. Apress.
Vaswani, V. (2008). PHP: A Beginer's Guide. McGraw-Hill Education.
What is jQuery. (n.d.). Retrieved January 24, 2016, from jQuery: https://jquery.com/
Whitten, J., & Bentley, L. (2007). System Analysis and Design Methods. McGraw-
Hill/Irwin.
Whitten, J., & Bentley, L. (2007). System Analysis and Design Methods. McGraw-
Hill/Irwin.
A1
APPENDIX
Appendix 1 User Requirement Questionnaire
1. What kind of transportation do you usually use?

o Public transportation
o Private vehicle
2. If you choose public transportation, what kind of public transportation do you
usually use?
o Angkot
o Bus
o Commuter Line
o Other
3. If you choose private vehicle, why do you rarely use public transportation?
o Do not know about the routes
o Do not know about the price
o Do not know about estimated time to arrive on destination
o Do not know about the schedule
4. How often do you use internet?
o Everyday
o Twice a week
o Once a week
o Less than once a week
5. What kind of device do you use to access internet?
o PC / Laptop
o Tablet
o Smartphone
o Other
6. Have you ever used a navigation application before?
o Yes
o No
7. What kind of navigation application you have used?
o Google Maps
o Waze
o Other
8. In a navigation application that geared towards public transportation, what features
do you find useful?
o Public transportation navigation and routes with shortest time
A2
o Scheduling for commuter line and busses

o Interesting places that surrounds bus shelters/railway stations
2
A3
Appendix 2 User Acceptance Questionnaire
1. Is the navigation information given by this application accurate?

o Yes
o No
2. Is the total cost given by this application accurate?
o Yes
o No
3. Is the approximate travel time given by this application accurate?
o Yes
o No
4. Is the alternative route given by this application accurate?
o Yes
o No
5. Is the schedule information given by this application accurate?
o Yes
o No
6. Is the live update report given by this application accurate?
o Yes
o No
7. Is the information about interesting place around the station/stops given by this
application accurate?
o Yes
o No
8. From where did you open JalanYuk!?
o Website
o Mobile Application
If user choose website on question 8:

o Yes
o No
o Yes
o No
A4
calculation?
o Yes
o No
4. According to you, do the method to use this application is easy to remember?
o Yes
o No
o Yes
o No
If user choose mobile application on question 8:

o Yes
o No
o Yes
o No
calculation?
o Yes
o No
4. According to you, do the method to use this application is easy to remember?
o Yes
o No
o Yes
o No
4
A5
Appendix 3 List of Available Angkot Route
Below is the list of Angkot Route that this thesis covers:

Mikrolet M 01A Kampung Melayu Pasar Senen
Mikrolet M 03 Kampung Melayu Kompleks PWI
Mikrolet M 04 Cililitan Rawasari
Mikrolet M 06 Kampung Melayu Ganfroma
Mikrolet M 08 Tanah Abang Kota
Mikrolet M 09 Tanah Abang Kebayoran Lama
Mikrolet M 10 Tanah Abang Kota / Jembatan Lima
Mikrolet M 11 Tanah Abang Meruya Ilir
Mikrolet M 12 Pasar Senen Kota
Mikrolet M 14 Tanjung Priok Cilincing
Mikrolet M 15 Tanjung Priok Kota
Mikrolet M 15A Tanjung Priok Kota / Mangga Dua
Mikrolet M 16 Kampung Melayu Pasar Minggu
Mikrolet M 17 Pasar Minggu Lenteng Agung
Mikrolet M 18 Kampung Melayu Pondok Gede
Mikrolet M 19 Cililitan Kranji
Mikrolet M 23 Manggarai Karet Pedurenan
A6
Appendix 4 Snippet Code

php code for the websites main page
<html lang="en">
<head>
<title><?=$seo['title-home'];?></title>
<meta name="keywords" content="<?=$seo['keyword-home'];?>">
<meta name="description" content="<?=$seo['desc-home'];?>">
<?php include("packages/head.php");?>

<link rel="stylesheet" href="<?=$global['absolute-url'];?
>css/swiper.min.css">

<script src="<?=$global['absolute-url'];?>js/swiper.min.js"></script>
</head>
<body>

<?php include("part-header.php");?>



<?php include("part-map2.php");?>



<?php include("part-report.php");?>

6
A7
php code for user to submit problem report
function get_route(){
var type = $("#header-type").val();
var url = "https://www.eannovate.com/dev/map/api/api_route.php?
action=route&type="+type;
$.ajax({url: url, success:function(result){
$("#header-route").html(replace_route(result.data));

if(type=="krl"){
$("#title-station").text("Stasiun");
}else if(type=="transjakarta"){
$("#title-station".text("Halte");
}else{
$("#title-station").text("");
$("#row-station").hide();
}
}});
}
function validRoute(){
var route = $("#header-route").val();
var content = $("#header-content").val();
var type_content = $("#header-type-content").val();
if(type != ""){
$("#header-valid-route").text("");
$("#header-valid-route").hide;
} else {
$("#header-valid-route").text("pilih jenis angkutan terlebih dahulu!");
$("#header-valid-route").show();
$("#header-valid-route").fadeOut(5000);
return false;
}
if(route != ""){
$("#header-valid-route").hide();
} else {
$("#header-valid-route").text("pilih jalur yang anda cari!");
return false;
}
}
if(type_content != ""){
$("#header-valid-route").hide("");
} else {
$("#header-valid-route").text("pilih tipe laporan anda terlebih dahulu!");
return false;
}
if(content != ""){
$("#header-valid-route").hide("");
} else {
A8
$("#header-valid-route").text("isi pesan anda terlebih dahulu!");
$("#header-valid-route").show("");
return false;
}
return true;
}
function get_station(){
var route_station = $("#header-route").val();
var url = "https://www.eannovate.com/dev/map/api/api_station.php?
action=stationn&line_id="+route_station; $.ajax({url:
url,success:function(result){
$("#header-station").html(replace_station(result.data));

if(type!="mikrolet"){
$("#row-station").show();
}
}});
}
function replace_station(datas){
var resultHTML='';
if(datas != null){
var obj = datas;
for(var i=0;i < obj.length ; i++){
if(obj[i].station_id != '' && obj[i].station_name != ''){
resultHTML += "<option
value='"+obj[i].station_id+"'>"+obj[i].station_name+"</option>";
}
}
}
return resultHTML;
}
$("#header-btn-route").click(function(){
if(validRoute()){
var typeInput = $("#header-type").val();
if(typeInput=="mikrolet"){
var stationInput = 0;
} else {
var stationInput = $("#header-station").val();
}
var routeInput = $("#header-route").val();
var contentInput = $("#header-content").val();
var typeContentInput = $("#header-type-content").val();
var data = {
user_id : "<?+$_SESSION['userData']['id'];?>",
auth_code : "<?=$_SESSION['userData']['auth_code'];?>",
type : typeInput,
line_id : routeInput,
station_id : stationInput,
content : contentInput,
type_content : typeContentInput
}
var url = "https://www.eannovate.com/dev/map/api/api_report.php?

action=insert_data";
$.ajax({type: 'POST', url: url, data : data, success:function(result){
console.log(result.message);
alert('Laporan berhasil');
8
A9
$("#modalReport").modal('hide');
$("#header-type").val("");
$("#header-station").val("");
$("#header-route").val("");
$("#header-content").val("");
$("#header-type-content").val("");
$("#row-station").hide("");
location.reload();
php code for displaying map
function initMap() {
//set map in div

map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeControl: false,
center: {lat: -6.208763, lng: 106.845599},
zoom: 13
});
showMyLocation();
//variable for direction google maps
//var directionsService = new google.maps.DirectionsService;

var serviceDetail = new google.maps.places.PlacesService(map);
var geocoder = new google.maps.Geocoder;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
//input form in google maps

var map_form = document.getElementById('map-form');
var origin_input = document.getElementById('origin-input');
var destination_input = document.getElementById('destination-input');
var btn_map = document.getElementById('search-map');
var clear_origin = document.getElementById('clear-origin');
var clear_destination = document.getElementById('clear-destination');
//positioning form input and button in google map

map.controls[google.maps.ControlPosition.TOP_LEFT].push(map_form);
//positioning form input and button in google map
map.controls[google.maps.ControlPosition.TOP_LEFT].push(map_form);
//option to input field origin and destination
var origin_autocomplete = new
google.maps.places.Autocomplete(origin_input,options);
origin_autocomplete.bindTo('bounds', map);
var destination_autocomplete = new
google.maps.places.Autocomplete(destination_input,options);
destination_autocomplete.bindTo('bounds', map);
//x icon click

clear_origin.addEventListener('click', function() {
$("#origin-input").val("");
$("#oriLocation-lat").val("");
$("#oriLocation-lng").val("");
$("#oriLocation-name").val("");
if($("#ori-my").val() != ""){
$("#ori-my").val("");
for (var i = 0; i < mylocationMarker_array.length; i++) {
mylocationMarker_array[i].setMap(null);
}
}
$("#clear-origin").hide();
});
clear_destination.addEventListener('click', function() {
A10
$("#destination-input").val("");
$("#desLocation-lat").val("");
$("#desLocation-lng").val("");
$("#desLocation-name").val("");
if($("#des-my").val() != ""){
$("#des-my").val("");
for (var i = 0; i < mylocationMarker_array.length; i++) {
mylocationMarker_array[i].setMap(null);
}
}
$("#clear-destination").hide();
});
//button search on submit

btn_map.addEventListener('click', function() {
clearMap();
centerMap();
var oriLocation_lat = $("#oriLocation-lat").val();
var oriLocation_lng = $("#oriLocation-lng").val();
var oriLocation_name = $("#oriLocation-name").val();
var desLocation_lat = $("#desLocation-lat").val();

var desLocation_lng = $("#desLocation-lng").val();
var desLocation_name = $("#desLocation-name").val();
//get api from route

var url = "https://www.eannovate.com/dev/map/api/api_route2.php?
action=get_route";
var data = {
from_lat : origin_lat,
from_lang : origin_lng,
to_lat : destination_lat,
to_lang : destination_lng
}
$.ajax({url: url,data : data, success:function(result){
//console.log(result);
var obj = result.data;
var obj2 = result.summary;
$("#detail-map").hide();
$('#choice-map').html(add_choice(obj,obj2,origin_name,destination_name));
document.getElementById('map_canvas').style.width='70%';
document.getElementById('route-choice').style.width='30%';
document.getElementById('route-choice').style.height='450px';
$("#route-choice").show();
}
//clear input function

function clearOrigin(){
$("#ori-my").val("");
$("#origin-input").val("");
$("#oriLocation-lat").val("");
$("#oriLocation-lng").val("");
$("#oriLocation-name").val("");
}
function clearDestination(){
$("#des-my").val("");
$("#destination-input").val("");
$("#desLocation-lat").val("");
10
A11
$("#desLocation-lng").val("");
$("#desLocation-name").val("");
}
A12
//start draw marker and line here
function printMap(num,to_transit){
var url = "https://www.eannovate.com/dev/map/api/api_route2.php?action=get_route";
var data = {
from_lat : origin_lat,
from_lang : origin_lng,
to_lat : destination_lat,
to_lang : destination_lng
}
var obj = result.data[num];
var obj2 = result.summary[num];
$("#route-choice").hide();
$('#summary-
map').html(add_summary(obj,obj2,origin_name,destination_name,to_transit));
document.getElementById('detail-map').style.width='30%';
document.getElementById('detail-map').style.height='450px';
$("#detail-map").show();
var bounds = new google.maps.LatLngBounds();

var linePath = [];
var lineColor = [];
var lineType = [];
var lineIcon = [];
var lineName = [];
var point_origin = new google.maps.LatLng(origin_lat,origin_lng);
var color_origin = "#444";
var type_origin = "empty";
var icon_origin = "https://maps.google.com/mapfiles/ms/icons/green-dot.png";
var name_origin = origin_name;
var point_destination = new google.maps.LatLng(destination_lat,destination_lng);
var color_destination = "#444";
var type_destination = "empty";
var icon_destination = "https://maps.google.com/mapfiles/ms/icons/blue-dot.png";
var name_destination = destination_name;
//save start point to array

linePath.push(point_origin);
lineColor.push(color_origin);
lineType.push(type_origin);
lineIcon.push(icon_origin);
lineName.push(name_origin);
//looping for saving point

for(var i=0;i < obj.length;i++){
if(obj[i].color != ""){
var transColor = obj[i].color;
} else {
var transColor = "green";
}
var transName = obj[i].name;

var transIcon = obj[i].icon;
var transType = obj[i].type;
var lat = obj[i].lat;
var lng = obj[i].long;
var point = new google.maps.LatLng(lat,lng);
linePath.push(point);
lineColor.push(transColor);
lineType.push(transType);
lineIcon.push(transIcon);
lineName.push(transName);
12
A13
bounds.extend(point);//centering zoom out location
}// end looping for saving point
//save end point to array

linePath.push(point_destination);
lineColor.push(color_destination);
lineType.push(type_destination);
lineIcon.push(icon_destination);
lineName.push(name_destination);
//creating variable info window

var infoWindow = new google.maps.InfoWindow();
//Loop and Draw marker on MAP

for (var i = 0; i < linePath.length; i++) {
//creating marker in map

if(lineType[i] != "empty"){
if(lineType[i] != lineType[i + 1]){
lineIcon[i] = icon_walk;
}
}
//creating marker
var marker = new google.maps.Marker({
map: map,
position: linePath[i],
icon: lineIcon[i],
title: lineName[i]
});
//end creating marker
//creating content for infowindow

if(lineName[i] === "" || lineName[i] === "null"){
marker.content = "";
} else {
marker.content = lineName[i];
}
//start marker on click trigger

google.maps.event.addListener(marker, 'click', function () {
//get lat and long marker
var marker_lat = this.position.lat();
var marker_long = this.position.lng();
if(this.content != null){
var marker_name = this.content;
get_places(marker_lat,marker_long,marker_name);
infoWindow.setContent("<strong>"+marker_name+"</strong>");
} else {
var latlngGeo = {lat: parseFloat(marker_lat), lng:
parseFloat(marker_long)};
geocoder.geocode({'location': latlngGeo}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var placeID = results[1].place_id;
serviceDetail.getDetails({ placeId: placeID }, function(place, status)
{
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker_name = place.name;
get_places(marker_lat,marker_long,marker_name);
infoWindow.setContent("<strong>"+marker_name+"</strong>");
}
});
}
A14
});
}
infoWindow.open(this.getMap(), this);
});//end marker on click trigger
//save marker to array

marker_array.push(marker);
//start creating lines

var src = linePath[i];
var des = linePath[i + 1];
if(lineType[i] != "empty"){
if(lineType[i] == lineType[i + 1]){
getDirections(src, des, lineColor[i], map, lineType[i], lineIcon[i]);
} else {
getDirections(src, des, "#0008FF", map, "walk", icon_walk);
}
} else {
getDirections(src, des, lineColor[i], map, lineType[i], lineIcon[i]);
}
//end creating lines
} //end Loop and Draw marker on MAP
map.setCenter(point);
map.fitBounds(bounds);
}});//end on success api result
}
//end create marker and line on map
//create route choice

function add_choice(obj,obj2,ori_name,des_name){
var resultHTML = "";
var start = 0;
if(obj != null) {
resultHTML += "<div class='sum-header'>Pilihan Rute</div>";

resultHTML += "<div class='choice-route'>"+ori_name+" menuju "+des_name+"</div>";
for(var s=0;s < obj.length;s++){

if(s == 0){
var ruteText = "Rute Tercepat";
} else {
var ruteText = "Rute Alternatif "+s;
}
var arr = [];
for(var c=0;c < obj[s].length;c++){
var id = obj[s][c].line_id;
arr.push(id);
}
var a = [], b = [], prev;
console.log(arr);
arr.sort();
for ( var i = 0; i < arr.length; i++ ) {
if ( arr[i] !== prev ) {
a.push(arr[i]);
b.push(1);
} else {
b[b.length-1]++;
}
prev = arr[i];
}
//console.log(b);
14
A15
if(b.length != 0){
var transit = b.length;
} else {
var transit = 1;
}
//console.log(transit);
resultHTML += "<div class='choice-content'>";
resultHTML += "<a href='javascript:;' onclick='printMap("+s+","+transit+")'
class='choice-link'>";
resultHTML += "<img src='<?=$global['absolute-url'];?>img/icon-rute.png'
alt='rute' class='icon-csearch'>";
resultHTML += "<img src='<?=$global['absolute-url'];?>img/next.png' alt='rute'
class='icon-clink'>";
resultHTML += "<div class='choice-title'>"+ruteText+"</div>";
resultHTML += "<div class='choice-time'>";
resultHTML += "<span class='ctime-min'><img src='<?=$global['absolute-url'];?
>img/plus-minus.png' alt='min'>"+obj2[s].total_elt+" min, </span>";
resultHTML += "<span class='ctime-transit'>"+transit+" kali transit, </span>";
resultHTML += "<span class='ctime-transit'>"+obj2[s].total_toEnd+" km</span>";
resultHTML += "</div>";
resultHTML += "</a>";
resultHTML += "</div>";
}
}
return resultHTML;
}
// end create route choice
// start creating lines here

function getDirections(ori, des, color, map, type, icons) {
//create line dash icon

var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
if(type == "krl"){
//create type of krl line
var travel_mode = google.maps.DirectionsTravelMode.TRANSIT;
var opacity = 1;
var iconLine = "";
} else if(type == "transjakarta"){
//create type of transjakarta line
var travel_mode = google.maps.DirectionsTravelMode.TRANSIT;
var opacity = 1;
var iconLine = "";
} else if(type == "mikrolet"){
//create type of mikrolet line
var travel_mode = google.maps.DirectionsTravelMode.DRIVING;
var opacity = 1;
var iconLine = "";
} else if(type == "walk"){
//create type of walk line
var travel_mode = google.maps.DirectionsTravelMode.WALKING;
var opacity = 0;
var iconLine = [{icon: lineSymbol,offset: '0',repeat: '20px'}];
} else {
var travel_mode = google.maps.DirectionsTravelMode.WALKING;
var color = "#0008FF";
var opacity = 0;
var iconLine = [{icon: lineSymbol,offset: '0',repeat: '20px'}];
A16
}
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
service.route({
origin: ori,
destination: des,
travelMode: travel_mode
}, function (result, status) {
//console.log(status);
if (status == google.maps.DirectionsStatus.OK) {
//Intialize the Path Array
var path = [];
for (var i = 0; i < result.routes[0].overview_path.length; i++) {
path.push(result.routes[0].overview_path[i]);
}
//Set the Path Stroke Color
var polyOptions = {
strokeColor: color,
strokeOpacity: opacity,
strokeWeight: 5,
path: path,
scale: 3,
icons: iconLine,
map: map
}
poly = new google.maps.Polyline(polyOptions);
poly_array.push(poly);
poly.setMap(map);
} else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
var reason = "Reason Over Query "+status;
} else {
var reason = "Reason error "+status;
}
}
});
}
//end creating lines here
//start get near place function

function get_places(lat,lng,place_name){
var url = "https://api.foursquare.com/v2/venues/search?";
var data = {
v : "20160107",
oauth_token : "1K3EHPN5ANZQQYTWCIX15KRLWU0BGUUFVHH3M00XH0BXGOI5",
ll : lat+","+lng,
limit : "10",
radius : "100",
categoryId :
"4bf58dd8d48988d181941735,4bf58dd8d48988d182941735,4d4b7105d754a06372d81259,4d4b7105d
754a06373d81259,4d4b7105d754a06374d81259,4d4b7105d754a06375d81259,4bf58dd8d48988d12f9
41735,4bf58dd8d48988d104941735,4bf58dd8d48988d13b941735,4bf58dd8d48988d131941735,4bf5
8dd8d48988d1ed931735,4bf58dd8d48988d1fa931735"
}
var venue = result.response.venues;
$('#place-list').html(add_places(venue));
if(place_name === "" || place_name === null){
$('#place-name').text("");
} else {
$('#place-name').text(place_name);
}
$("#origin-lat").val(lat);
16
A17
$("#origin-lng").val(lng);
$('#modalPlaces').modal('show');
}});
}
function getDetail(param){
var gplace_name = $('#place-'+param).data('name');
var gdestination_lat = $('#place-'+param).data('lat');
var gdestination_lng = $('#place-'+param).data('lng');
var gorigin_lat = $('#origin-lat').val();
var gorigin_lng = $('#origin-lng').val();
$("#guide-list").html("");
$("#guide-name").text(gplace_name);
var serviceDirection= new google.maps.DirectionsService;
var displayDirection = new google.maps.DirectionsRenderer;
displayDirection.setPanel(document.getElementById('guide-list'));
var origin_point = new google.maps.LatLng(gorigin_lat,gorigin_lng);

var destination_point = new google.maps.LatLng(gdestination_lat,gdestination_lng);
serviceDirection.route({
origin: origin_point,
destination: destination_point,
travelMode: google.maps.TravelMode.TRANSIT,
provideRouteAlternatives: false
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
displayDirection.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

Skripsi Final V5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Skripsi Final V5

Uploaded by

Copyright:

Available Formats

JALANYUK!

: NAVIGATION APPLICATION FOR PUBLIC

Monica Elizabeth 1601211501

School of Computer Science

JALANYUK! : NAVIGATION APPLICATION FOR PUBLIC

Proposed as one of the requirements

Monica Elizabeth 1601211501

School of Computer Science

Thesis Readiness Statement for Thesis Defense

JALANYUK! : NAVIGATION APPLICATION FOR PUBLIC

Monica Elizabeth Billy Gani Maretta Anggun Safitri

Approved by Thesis Supervisors,

Lusiana Citra Dewi, S.Kom., MM.

BINA NUSANTARA UNIVERSITY

School of Computer Science

JALANYUK! : NAVIGATION APPLICATION FOR PUBLIC

Monica Elizabeth 1601211501

Navigation application for public transportation in Jakarta, JalanYuk! is developed

Keywords: web, Android, iOS, mapping service, public transportation, navigation

Jakarta, 25 January 2016

Thesis Readiness Statement for Thesis Defense.........................................................iii

1.2 Problem Definition.........................................................................................3

1.3 Scope of Work................................................................................................3

1.4 Objectives and Benefits..................................................................................4

1.5 Research Methodology...................................................................................5

1.6 Systematic Writing.........................................................................................5

CHAPTER 2 LITERATURE REVIEW.................................................................7

2.1 Software Engineering Theory.........................................................................7

12. Software Development Methodology......................................................7

12. Agile Development................................................................7

12. Extreme Programming...........................................................7

12. Unified Modeling Language....................................................................9

12. Use Case Diagram..................................................................9

12. Use Case Narrative...............................................................13

123. Activity Diagram..................................................................16

12.3 Human and Computer Interaction.........................................................17

12.3 Eight Golden Rules..............................................................17

12.3 Five Measurable Human Factors..........................................18

2.2 Specific Theory.............................................................................................19

2.4 Google Maps API..................................................................................21

2.5 Foursquare API......................................................................................22

2.14 Greedy Best First Search Algorithm......................................................25

CHAPTER 3 SYSTEM ANAYSIS AND DESIGN..............................................29

13. User Requirement Analysis...................................................................29

13.2 Similar Application Analysis.................................................................38

13.2 KIRI Smart Public Transport................................................38

132. KeMana: Your Jakarta Transport..........................................39

13. Problem Solving....................................................................................44

23.1 Application Design................................................................................45

231. Web Interface Design...........................................................45

23.1 Mobile Interface Design.......................................................50

23. System Design.......................................................................................57

231. Use Case...............................................................................57

23. Use Case Narrative...............................................................58

23. Activity Diagram..................................................................67

234. Entity Relationship Diagram................................................73

3.2 Greedy Best First Search Algorithm......................................................77

CHAPTER 4 IMPLEMENTATION AND EVALUATION................................85

4.1 Application Implementation.........................................................................85

14. System Requirement..............................................................................85

14.2 Application Installation Procedure........................................................86

14.2 Android Installation Procedure............................................86

142. iOS Installation Procedure...................................................88