Design and Development of RunForFun Mobile Application

Race run for 5 km or 10 km has been trending recently in many places in Indonesia, especially in Surabaya where there were at least 11 events of race run. The participant's number also increased significantly compared to years before. However, among several race run events, it was seen that some events tended to be replicative and monotone, while among the participants recently were identified the need for increasing the fun factor. RunForFun is a mobile application which designed for participants to reach new experience when participating in a race run event. The mobile application will run on Android OS. The development method of this mobile application would use Reverse Waterfall method. The development of this mobile application uses Ionic Framework which utilizes Cordova as its base to deploy to smartphone devices. Subsequently, RunForRun was tested on 10 participants, and the test shows a significant increase in the fun factor from run race participants.


Introduction
Daily exercise is one of many ways to maintain health. One kind of exercise that can be used to maintain our health is with running. Race run is so popular lately in Indonesia, especially in Surabaya. In 2016, there is 11 race run that being held in Surabaya registered to www.ayolari.in. The enthusiasm of the participant can be seen on MayBank Bali Marathon 2016 that the participants have increased by 40 % from 2015. But if it was looking closely at the inside of the race run, it is found that replicative and tends to be monotone. The participants participating in race run because it is a lifestyle, they want to look for fun, and they want to socialize with other people. Those race run is lack of variation factor and its fun factor.

Theoretical basis 2.1 HTML5
HTML5 is a markup language to structure and show the content on a website. The main purpose of the HTML5 development is to repair the technology from HTML so the HTML can be connected with the latest multimedia. With the HTML5 then the third party plugin is optional to run an application in a browser [1].

SDLC: reverse waterfall model
Waterfall model is a classic model that is systematic and sequential in building software [2]. But the Reverse Waterfall Model was developed again by Manand D. Shah who is an assistant professor of Information Technology Department at Charusat University. The reverse waterfall gives more flexibility when done with one phase; it allows going back to the previous phase if there is modification needed. Figure 1 illustrates the Reverse Waterfall Model architecture.

Apache Cordova
Apache Cordova is an open source framework to build a mobile application using HTML5 which multiplatform. The founder of Apache Cordova builds this with the purpose that people can make mobile application multiplatform more simple and can be implemented as a combination of native mobile application technology and web application technology. In the making process of an application using Apache Cordova, this research needs a website application. After that it has to wrap it in a native container, testing that application and need to debug the application. Afterward, it can distribute to the user. That wrapping process of the website application is using Apache Cordova [3].

Android
Google, Inc. developed Android as a mobile operating system, based on the Linux kernel and designed predominantly for touchscreen devices such as phones, watches, and tablets.
Android's interface is primarily controlled based on direct operation, using touch movements that imitate natural human actions, such as hand swiping, tapping, dragging, and grasping, to manipulate objects displayed on-screen, along with software generated virtual keyboard for input. Android is an open source software toolkit for future mobile devices; the Android was created by Google partnering with Open Handset Alliance [4]. The architecture diagram of Android mobile operating system can be seen in Figure 2 below.

Application framework
The application framework was code using Java Programming Language which is tools that used by all of the application. Android offers the ability to build an application with more innovative to the developer. The developer is free to take the advantages of the hardware, access location information, run the background services, set the alarm, add a reminder to the status bar, etc. The developer has the full access to the framework API that used by the main application.

Libraries
Android has some library C/C++ which is used by a various component of the Android system. This ability can be seen by the developer via application framework.

Android runtime
Android Runtime is a location where the main component of DVM placed. DVM is specially designed for Android where it is run in the limited environment, where the battery is limited, CPU, memory and the storage is the main focus. Core libraries were code in Java and contain class, I/O, and other tools.

Linux kernel
Android architecture in Linux 2.6 kernel which can be used to set the security, memory management, process management, network stack and driver model. The kernel also acts as an abstract layer between hardware and the entire software stack.

Race run these days
Race run recently in Indonesia if used to compare with the past is already have developed much better. There are many physical variations, but they have not used technology as their variation. The physical variation is namely zombie chase, glow stick run, wet run, and many others. The variations are just thematic and add no significant value. Based on the observation, list requirement analysis can be list as listed below: i) The participant can be categorized into two categories namely competitive and noncompetitive participant. ii) The competitive participant is a serious participant that participate in challenging himself/herself to run as fast as he/she can and usually they have some target. iii) The competitive participant usually is a professional or amateur, usually in group or individual. iv) The non-competitive participant is a non-serious participant, usually participate to have fun or lifestyle, they have no target or pressure. v) The non-competitive participant is usually participating in family, moms, students, etc. vi) The race run for the non-competitive participant based on observation is lack of fun factor and lacks variation.

The solution
The needs were as an opportunity that can be modified and added variation to race run utilizing technology, and the segment of a participant may be targeted to those who are participating because it is a lifestyle for them. That segment was known as a noncompetitive participant. They were chosen as the target of mobile application users because it can be seen when these people running in a race run they habitually bring their phone with them. Some of them use a running application, and some of them bring their smartphone just because they want to take some photos or anything else. The fun factor and the variation will be in the form of mini-games and mapping feature.

Application requirement analysis
This application can be installed on Android OS min. Jelly Bean 4.1 to latest and the mobile must have the internet connection. The mobile devices must have GPS Tracker, Back Camera, Touchscreen and minimum 3G connection to support the real-time geolocation.

Architecture design
The mobile application will be using client-server architecture. Where the client layer will be running on the user smartphone and the server layer is using firebase. The architecture design of Mobile Application RunForFun was shown in Figure 3.

Fig. 3. Architecture Design of RunForFun.
In Figure 3, the client is the user's smartphone, and with the internet connection, they have to request to the server that in this case handled by Google Firebase. After the request success than the server response to the user's smartphone.

Design of database
In mobile application RunForFun, the database will be using real-time database from Firebase. Firebase is using JSON Tree as the base of their real-time database. The mechanism is all the data will be stored as a JSON object. Based on an article from www.json.org, JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language. That database will be considered as a JSON tree which hosted in a cloud. This is not like an SQL database; there is no table or any recorded data else. Because there is no table in JSON tree, hence entity relationship diagram cannot be made. Moreover, the structure has no relationship between the references, consequently cannot force to make the ER-Diagram.
When designing database, the concept of a relational database is referenced but cannot be drawn due to its abstract nature. There will be user reference, location reference, scoreboard reference and game data reference. The inside reference to the four main reference will be decided in the process of development.

Use case diagram
A use case diagram is a graphic depiction of the interactions among the elements of a system. A use case is a methodology used in system analysis to identify, clarify, and organize system requirements. Use case diagram was used to illustrate the functionality that will be implemented to the RunForFun mobile application. In this application there are some features like Register, Login with Email, Login with Google, Scan QR Code, Play Games, Change User Data, Change Avatar, See Map and Logout. Figure 4 shows the use case diagram of RunForFun.

User interface design
The user interfaces mockup design was done using JustInMind desktop application that has many great features and free to use. There is eight user interface which has been designed in the process of development; there is Login Screen, Register Screen, Account Screen, Scanner Screen, Game 1: Multiple Choice Screen, Game 2: Sliding Puzzle 3x3 Screen, Game 3: Guess Word Screen and the last is See Map Screen.

Implementation/development 4.1 Feature implementation
The Ionic Version 1 framework was used for implementing the feature. There is 11 feature referring to the use case diagram in Figure 3.

Register with email
This feature will be used by the user to register himself or herself as a user in RunForFun using their email.

Login with email
This feature will be used by the user to login himself or herself after his/her registered as a user.

Login with Google
This feature will be used by a user who has a google account, so they won't have to do the registration process.

Change user data
This feature will be used by the user to change their basic data include their password.

Change avatar
This feature will be used by the user to change their profile photo.

Scan QR code
This feature will be used by the user to scan the QR code to play the mini-games.

Game 1: multiple choice
This feature will be appeared after the user success to scan the QR code. This feature contains the game 1 which is a multiple choice question game.

Game 2: sliding puzzle 3 × 3
This feature will be appeared after the user success to scan the QR code. This feature contains the game 2 which is a sliding puzzle 3 × 3 game.

Game 3: guess word
This feature will be appeared after the user success to scan the QR code. This feature contains the game 3 which is a guess word game.

See map
This feature will be used by the user to see the map where is his/her position right now.

Logout
This feature will be used by the user to logout from their account.

Database implementation
The database of RunForFun is using real-time database from Firebase that using JSON Tree as the basis. The parent of the database is "runforfun-a01dd" and have four reference which is a user, game, location, and scoreboard. The database implementation can be seen in Figure 5.

Game reference
In this reference, there is Game 1 and Game 3 reference. The Game 1 have two references there is answer and question which is the amount of the data depends on how much the organizer of the race run want to fill. The same goes for the Game 3 reference but the difference is in the name of the reference which is in Game 3 the name of reference is answer and clue.

Location reference
The location reference has reference name userID. The userID is based on the userID of the registered user. In every reference userID, there is two reference that has a value which is lat and long that the value is got by the geolocation of the user's smartphone.

Scoreboard reference
The scoreboard reference is like the location reference, they both have the same type reference that is userID. But in the scoreboard reference, the userID have the total Point reference, and it has value based on whether the user success to playing the game or not.

User reference
In this reference have the same type again as the two references before which is userID. But in every userID reference, there is email, gender, image and username that have value based on the field that user have filled.

User interface implementation
Based on the design user interface before, this research has implemented all of the design. Besides that, one more user interface which is Splash Screen was added when the user opens the application.

Splash screen
In this page, the logo of RunForFun will be shown. This page will remain until the resources of the apps is successfully loaded from the database. From this page, the next page is between login screen or direct to account screen depends on user whether the user already login or not.

Login screen
The login screen is the next page after the splash screen where the user can do the login feature here. There are three buttons which are to login, register, and login to Google. When the user presses the register button, the user will be redirected to register screen. When the user presses the login with Google button, then the user will be redirected to the login with google account using the in-app browser or the main browser on their smartphone.

Register screen
Register screen is the page that user can do the register feature. When the user already filled all the field and pressed the register button, they will be redirected back to the login screen to do the login process.

Account screen
Account screen will be shown if the user has already login. This is the main screen of this application. In this page, the user can do the change user data and change avatar feature. But if the user login with google they can't change the password and can't change the avatar. They can't change avatar because the avatar will be the same with their avatar on their Google account.

Scanner screen
This page will be shown when the user presses the scanner tab, and this page will show the preview of their smartphone's main camera to do the scan QR code feature.

Game 1: multiple choice screen
This page will be shown to the user that successfully scan the QR Code for Game 1. The user has 30 s to answer the question. The user just has one chance to answer the question. When the user press the answer the screen will be closed and back to the scanner screen.

Game 2: sliding puzzle 3 × 3 screen
This page will be shown to the user that successfully scan the QR Code for Game 2. The user just has 45 s to solve the sliding puzzle 3 × 3. When the user success the screen will be closed and back to the scanner screen, but if the user failed and the time is on the screen will be closed and back to the scanner screen too.

Game 3: guess the word
This page will be shown to the user that successfully scan the QR Code for Game 3. The user has 30 s to answer the question. The user have to complete the answer, they just have one clue, and they have to guess the word and answer letter by letter. If the letter is wrong, the points will be decreased. When the user success to complete the word, the screen will be closed and back to the scanner screen. The same condition will happen if they can't guess the word and the time is up.

Map screen
This page will be open when the user press the Map Tab. The map screen will show the position of the user and the other user. The user itself will be shown with the blue run icon and the other user will be shown as the black run icon.

Test result
Mobile application RunForFun is tested using two methods, first method is using the user acceptance test (UAT) to test the feature that already implemented in this application. The second is to test the benefit of the application.

Functional testing
The UAT is done to test all the feature in this application. The scenario was design for the user from the pre-condition until the post condition with the description. This is the result of the UAT.

Register with email (Gmail)
As seen in Figure 6 above, login process can be done using email (Gmail). The functional test result of this feature can be seen at Table 1 below. Table 1. UAT register with an email.

Use Case
Register With Email Actor User

Pre-Condition
The user is on the register page

Post-Condition
User success to do the registration process and being redirect to the login page Description The user has to fill all the data field and press the register button after that

Login with email
The result of this feature can be seen in Table 2. Table 2. UAT login with email.

Use Case Login with Email Actor
User

Pre-Condition
The user is on Login Page

Post-Condition
User Success to Login and redirected to Account Page Description The user has to fill the login field and press the Login button

Login with Google
The result of this feature can be seen in Table 3. Table 3. UAT login with Google.

Use Case Login to Google Actor
User

Pre-Condition
The user is on Login Page

Post-Condition
User Success to Login and redirected to Account Page Description The user has to press the Login with Google Button

Change user data
The result of this feature can be seen in Table 4. Table 4. UAT change user data.

Use Case Change User Data Actor
User

Pre-Condition
The user is on Account Page

Post-Condition Change User Data is success Description
The user must fill all the data field and press the Save Button

Change avatar
The result of this feature can be seen in Table 5. Table 5. UAT change avatar

Use Case
Change Avatar Actor User

Pre-Condition
The user is in Account Page

Post-Condition
Change Avatar is success Description The user has to press the Change Avatar button and choose the picture that the user want to and wait 'till the upload is done and finish

Scan QR code
The result of this feature can be seen in table 6. Table 6. UAT scan QR code.

Use Case Scan QR Code to Play Game Actor
User

Pre-Condition
The user is in Scan Page

Post-Condition
The alert box is pop-up on the screen Description User have to aim the camera to the QR Code

Game 1: Multiple choices
The result of this feature can be seen in Table 7. The result of this feature can be seen in Table 8. User

Pre-Condition
The user is in Scan Page

Post-Condition
User play the game 2 Description User success to scan the QR Code of Game 2 and play the game

Game 3: guess word
The result of this feature can be seen in Table 9. Table 9. UAT Game 3: guess word.

Use Case Game 3: Guess Word Actor
User

Pre-Condition
The user is in Scan Page

Post-Condition
User play the game 3 Description User success to scan the QR Code of Game 3 and play the game

See map
The result of this feature can be seen in Table 10. Table 10. UAT see map.

Use Case See Map Actor
User

Pre-Condition
The user is in Account Page

Post-Condition
The user can see his/her position on the map Description The user has to press the Map Tab to see the map

Logout
The result of this Feature can be seen in Table 11. User

Pre-Condition
The user is in Account Page

Post-Condition
User success to logout Description The user has to press the Logout Button

Benefit testing
The benefit testing is using the Perceived Playfulness principle to testing whether using this mobile application RunForFun can make a race run more varieties and more fun. There is three indicators which were made based on this principle which is: i) I can enjoy the race run in general. ii) Race run which I participate is enjoyable and interesting. iii) I do not feel bored when I just run in a race run. The benefit testing of this application involves ten samples of respondents and using convenience sampling [6]. The respondent will answer the question using a Likert scale from 1 to 5. After the test, data was a recap, and the recap will be processed to find the significance using Paired-samples t-test method. The result can be seen in Table 12.
Based on the result, the value of the sig is 0.001 which is based on the probability value sig ≤ 0.05, it can be concluded that the hypothesis that mobile application RunForFun has a significant effect on adding the fun factor in the race run is acceptable. The benefit testing is using the Perceived Playfulness principle to testing whether using this mobile application RunForFun can make a race run more varieties and more fun. Three indicators were made based on this principle which is: i) I can enjoy the race run in general. ii) Race run which I participate is enjoyable and interesting. iii) I do not feel bored when I just run in a race run.
The benefit testing of this application involves ten samples of respondents and using convenience sampling [6]. The respondent will answer the question using a Likert scale from 1 to 5. After the test, data was a recap, and the recap will be processed to find the significance using Paired-samples t-test method. The result can be seen in Table 12. Based on the result, the value of the significant is 0.001 which is based on the probability value sig ≤ 0.05, it can be concluded that the hypothesis that mobile application RunForFun has a significant effect on adding the fun factor in the race run is acceptable.

Conclusion
The conclusion of design and development of mobile application RunForFun is design and develop this mobile app can be done with the help of these tools: Trello, JustInMind, Ionic Framework Version One, Cordova, Chrome, Firefox, Smartphone Xiaomi Mi4i, Google Firebase, Atom, SPSS, Google Maps API and the QR Scanner plugin. The other conclusion is based on the benefit testing that this mobile application is useful to increase the fun factor in the race run when the participant is running. There are some recommendations based on the experience of designing and developing this project. This research recommends to use the latest version of Ionic Framework, using SASS and deploy it to smartwatch which has higher mobility than a smartphone.