CT100-3-3-AMCA Advanced Mobile Computing with Android

INDIVIDUAL ASSIGNMENT
TECHNOLOGY PARK MALAYSIA
CT100-3-3-AMCA
ADVANCED MOBILE COMPUTING WITH ANDROID

Module Title Advanced Mobile Computing with Android

Module Code CT100-3-3-AMCA

Intake Code UC3F1902SE

Lecturer Name AMAD ARSHAD

Hand Out Date 3th June 2019

Student Name CHUA TIONG JIANG

Student ID TP042306

1
CT100-3-3-AMCA Advanced Mobile Computing with Android

Table of Contents
1.0 Introduction ................................................................................................................................. 3
1.1 Introduction to System .................................................................................................................. 3
1.2 System Description ....................................................................................................................... 3
1.3 Platform Version Selection ........................................................................................................... 4
2.0 Functionalities ................................................................................................................................... 4
3.0 System Design .................................................................................................................................. 5
3.1 Logical Design .............................................................................................................................. 5
3.1.1 Use Case Diagram.................................................................................................................. 5
3.1.2 State Machine Diagram .......................................................................................................... 6
3.2 Physical Design ............................................................................................................................. 7
3.3 Technologies Used ........................................................................................................................ 9
3.3.1 Android Studio ....................................................................................................................... 9
3.3.2 Java ........................................................................................................................................ 9
3.3.3 Cloud Firestore....................................................................................................................... 9
3.3.4 HTML, CSS, JavaScript....................................................................................................... 10
3.3.5 Firebase Robo Test............................................................................................................... 10
3.3.6 Google Map View .................................................................................................................... 11
4.0 Code Implementation ...................................................................................................................... 12
4.1 Firestore ...................................................................................................................................... 12
4.1.1 Add Data .............................................................................................................................. 12
4.1.2 Read Data ............................................................................................................................. 13
4.1.3 Delete Data........................................................................................................................... 13
4.1.4 Authentication - Login ......................................................................................................... 14
4.1.5 Authentication – Sign Up ..................................................................................................... 14
4.2 Butter Knife ................................................................................................................................ 15
4.3 Picasso (Loading Image) ............................................................................................................. 15
4.4 Espresso Test .............................................................................................................................. 16
4.5 Google Map View ....................................................................................................................... 16
5.0 User Interface .................................................................................................................................. 17
5.1 Mobile Application ..................................................................................................................... 17
5.2 Web Application ......................................................................................................................... 26
6.0 Conclusion ...................................................................................................................................... 29
7.0 References ....................................................................................................................................... 30

2
CT100-3-3-AMCA Advanced Mobile Computing with Android

1.0 Introduction
1.1 Introduction to System
Book4Sport is a sport facility booking application which allows users to book for the
sport facilities like basketball court, badminton court, football court, swimming pool and so on.
This application aims to provide a platform for people who love sports to book a proper sport
complex or facilities. Book4Sport also aims to promote sports among the people, so more and
more sport enthusiasts can have a sport facility with better condition. The users will able to
look for the sport facilities with different type of sports and make booking for the selected sport
facility.

1.2 System Description

Book4Sport is a mobile application built by using Android Studio that running in
Android operating system. Book4Sport used Firestore as database to store and manage data of
the application. Firestore which is a flexible and scalable NoSql cloud database which also
provided offline support that local changes can be synchronized once the device is online. All
the data and information of user, booking and sport facilities will be stored in Firestore. Other
than that, a web application is built with HTML, CSS and JavaScript for the administrative
purpose where the admin can do CRUDS operations with the web application. By using the
web application, admin can create, update, read, delete and search for the user and sport
facilities data.

3
CT100-3-3-AMCA Advanced Mobile Computing with Android

1.3 Platform Version Selection

Figure 1.1 Platform versions

According to Figure 1.1 above, there are not more than 1% of the devices running on
the platform below the version 4.1x, so the Jelly Bean with API level 16 is chosen as the
minimum version of the application development. Therefore, the device with the lower version
than Jelly Bean will not able to run the application as the version will not be supported in
Book4Sport mobile application.

2.0 Functionalities
This purpose of this project is to implement a Sport Facility Booking Mobile
Application with the intent of allowing the sport enthusiasts to book the sport facilities. There
are some functionalities available in this mobile application:

 Allow the users to register with the email in order to access the application.
 Allow the users to search for the sport facilities with the type of sports and location.
 Allow the users to make booking for the sport facilities with specific date.
 Allow the users to view the booking history.
 Allow the users to update and delete the booking information.
 Allow the admin to create, read, update, delete and search (CRUDS) the user
information and the sport facilities information.

4
CT100-3-3-AMCA Advanced Mobile Computing with Android

3.0 System Design

3.1 Logical Design
3.1.1 Use Case Diagram

Figure 3.1 Use Case Diagram

5
CT100-3-3-AMCA Advanced Mobile Computing with Android

3.1.2 State Machine Diagram

Figure 3.2 State Machine Diagram

6
CT100-3-3-AMCA Advanced Mobile Computing with Android

3.2 Physical Design

Wireframe is essential in user interface design which wireframe is done before
developing the mobile application. Wireframe is the user interface blueprint which shows the
design of the application at a structure level. Wireframe aims to shows the functionality on
every page for better visual understanding before implementing the application. Wireframe is
very useful as it saves considerable time during implementation phase since the design is done
in early development phase. There are some wireframes of the Book4Sport mobile application:

Login Page Sign Up Page Navigation Drawer

7
CT100-3-3-AMCA Advanced Mobile Computing with Android

Home Page Booking (1) Booking (2)

History Page Edit Booking Delete Booking

8
CT100-3-3-AMCA Advanced Mobile Computing with Android

3.3 Technologies Used

3.3.1 Android Studio

Android Studio is an integrated development environment (IDE) for Android application

development with Google’s Android operating system. It is developed based on IntelliJ IDEA for
Android mobile application development purpose. Android Studio provides many useful features which
improve the productivity of Android application development. For example, there is a flexible Gradle-
based build system that makes the synchronization process faster. Other than that, Google Cloud
Platform is supported by the Android Studio which make the integration of Google Cloud Messaging
more efficient. Android Studio also ensure accurate programming which the code implementation and
analysis are faster and more accurate (Android Developers, 2019).

3.3.2 Java
Java is a cross-platform object-oriented programming language developed by Sun
Microsystems in 1995 which is platform independent and can be used to develop Android
application, server application, web application, websites and so on. There are two
programming language in Android Studio. The reason of choosing Java for this mobile
application development is because it is object-oriented which allows developer to create
modular programs make the code reusable. Other than that, Java is more popular currently
compared to Kotlin which is new to the market, so the community support for Java is stronger
as there are many active forums which provide solutions and discussion on specific problem
(Javarevisited, 2019). For example, Stack Overflow and GitHub are one of the best
communities which the developers will share their knowledge to the community.

3.3.3 Cloud Firestore

Cloud Firestore is a NoSql and document-oriented cloud database which allows the
developers to store and sync data for both client and server-side application development.
Cloud Firestore is chosen because it is more flexible and scalable for storing the information
of the mobile application. Firestore is different compared to SQL database as there is no table
and rows in the database but there is only collections and documents. With Firestore, we can
retrieve documents from the database by using the queries. Firestore also provide offline
support which the app can write data even if the device is offline and the data will be
synchronized to the database once the device is online (Firebase, 2019). Moreover, the guides
of how to use Firestore are well-documented and make the Firestore implementation easier.

9
CT100-3-3-AMCA Advanced Mobile Computing with Android

3.3.4 HTML, CSS, JavaScript

HTML is the most widely used programming language for creating web pages as it provides
the basic structure of the web page which will be enhanced by using CSS and JavaScript. Cascading
Style Sheets (CSS) is a programming language which used to design the HTML elements by dictating
how they should show on the webpages to make the website more decorative. JavaScript is a logic-
based programming language which is used to modify the website element and create interactive effects
such as sliders, magic zoom, text input effects and so on. Theses programming language is used to
develop the web application for administrative purpose (Lindsay Kolowich, 2018).

3.3.5 Firebase Robo Test

Robo test is an application testing tool in Firebase Test Lab. Robo test helps to analyse
the application’s user interface structure and automatic simulating user activities. Robo test
also helps to validate bug fixes and measure the performance of the application in forms of
CPU, Memory and Network. With Robo test, developer can identify the root which causing
the application crashes by investigating the screenshots and video of simulated user operations
provided by the Robo test (Firebase, 2019).

Figure 3.3 Firebase Robo Test Result (1)

10
CT100-3-3-AMCA Advanced Mobile Computing with Android

Figure 3.3 Firebase Robo Test Result (2)

3.3.6 Google Map View

Google map view is a view which display a map with specific location, and it allows
users to move the map when the view is focused. In this application, map view is implemented
to show the location of selected sport facility. With Google map view, users can have better UI
experience which they can save their time searching for the location of the sport facilities based
on the address (Google Developers, 2019).

11
CT100-3-3-AMCA Advanced Mobile Computing with Android

4.0 Code Implementation

4.1 Firestore
4.1.1 Add Data

Figure 4.1 Firestore-Add Data

To add data into Firestore, DocumentReference is initialized which point to the specific
collection and add new document with specific ID. In Figure 4.1 above, “set” method is used
to overwrite the data in the specific document.

12
CT100-3-3-AMCA Advanced Mobile Computing with Android

4.1.2 Read Data

Figure 4.2 Firestore: Read Data

In Figure 4.2, a list of documents in “product” collection is retrieved by using “get”

method. For each document in the list, the document will be added into a new list which will
be used to populate data into the RecyclerView.

4.1.3 Delete Data

Figure 4.3 Firestore: Delete Data

13
CT100-3-3-AMCA Advanced Mobile Computing with Android

In Figure 4.3, the document path is set into dbBooking and specific document in
specific collection will be deleted by using “delete” method. Once the deletion is successful, a
message will be showed to the users.

4.1.4 Authentication - Login

Figure 4.4 FireAuth: Login

Firebase provided an Authentication SDK called FireAuth which is used to login the
user with their email and password. In Figure 4.4, signInwithEmailAndPassword method is
called to check whether the user email and password match the user record in Firebase
Authentication, the user will navigate to the Home page.

4.1.5 Authentication – Sign Up

Figure 4.5 FireAuth – Sign Up

In Figure 4.4, createUserWithEmailAndPassword method is called to add new user

record into Firebase Authentication. After user signed up successfully, the user will navigate
to the Home page.

14
CT100-3-3-AMCA Advanced Mobile Computing with Android

4.2 Butter Knife

Figure 4.6 Butter Knife

With the help of Butter Knife, a more effective and efficient approach is provided for
developers. By using Butter Knife, the boilerplate code can be reduced. In Figure 4.6 above,
@BindView is used to bind the variables to specific view id.

4.3 Picasso (Loading Image)

Figure 4.7 Picasso: Load Image

Picasso is a powerful image downloading and caching library for Android. Picasso
helps to handle image recycling and cancel the previous download in an adapter. Other than
that, it also helps to transform the image to fit into the layout and reduce the image memory
size. To use Picasso, an image URI should be passed into “load” method and provide the id of
the image view in order to load the provided URI image into correct image view.

15
CT100-3-3-AMCA Advanced Mobile Computing with Android

4.4 Espresso Test

Figure 4.8 Espresso Test

Espresso testing allows the developers to write a reliable UI tests which can save the
time for conducting test for a function. Figure 4.8 above shows a testing on a login activity
which the espresso will input the email and password in the specific editText field and click
the login button.

4.5 Google Map View

Figure 4.9 Google Map View

Google map view is an interactive view that shows the map of specific location an place
a marker on the map. In Figure 4.9 above, a specific latitude and longitude will be pass into the
“addMarker” method along with the title of the selected sport facility.

16
CT100-3-3-AMCA Advanced Mobile Computing with Android

5.0 User Interface

5.1 Mobile Application
Login Page

Figure 5.1 Login Page

In the Login page, if user is registered, they will only need to enter the email, password
and click login button to login to the application. If user I not registered, user can click the
“Don’t have account?” text to proceed to registration.

17
CT100-3-3-AMCA Advanced Mobile Computing with Android

Sign Up Page

Figure 5.2 Sign Up Page

In Sign Up page, if user is not registered, user can enter their email, username and
password then click sign up button to sign up as a new user then user will be navigated to Home
page. If user already have an account, user can simply click on the “Already have an account?”
text to proceed to Login page.

18
CT100-3-3-AMCA Advanced Mobile Computing with Android

Home Page

Figure 5.3 Home page

In Home page, two button and a look book will be showed. User can click on the three-line
button on the menu bar and the navigation drawer will be showed. Those two buttons in the
Home page will navigate the user to specific page such as Booking page and History page. The
look book only shows some quotes for the user for motivation purpose.

19
CT100-3-3-AMCA Advanced Mobile Computing with Android

Navigation Drawer

Figure 5.4 Navigation drawer

In the Navigation Drawer, the username and email will be showed. There will be three
buttons in the navigation drawer which will navigate the user to specific page such as Home
page, Booking page and History page while the Logout button will log the user out and navigate
them to the Login page.

20
CT100-3-3-AMCA Advanced Mobile Computing with Android

Booking Page (1)

Figure 5.5 Booking Page (1)

In the first Booking page, a list of sport facilities will be shown. User can filter the sport
facilities by clicking the search icon and input the type of sport or location of the sport facilities.
Then, user can click on the sport facility they wanted to book and they will be navigated to
second Booking page.

21
CT100-3-3-AMCA Advanced Mobile Computing with Android

Booking Page (2)

Figure 5.6 Booking Page (2)

In second Booking page, the information of selected sport facility from first Booking
page will be shown with the map. The map will be shown the location of the selected sport
facility, so user can have a better understanding on the exact location of the sport facility. User
can select the date they wanted to book for the sport facility and click Book button. The booking
will be made, and the user will be navigated to Home page.

22
CT100-3-3-AMCA Advanced Mobile Computing with Android

History Page

Figure 5.7 History Page

In History page, a list of booking made by user will be shown. User can have a look on
what they have booked previously, and they can choose to edit or delete the booking.

23
CT100-3-3-AMCA Advanced Mobile Computing with Android

Edit Booking

Figure 5.8 Edit booking

In History page, user can simply slide specific booking information to the right, then
the Edit button will be shown. User can click on the Edit button and a dialog will be shown to
user which the old booking will be deleted, and user will be navigated to first Booking page in
order to make a new booking.

24
CT100-3-3-AMCA Advanced Mobile Computing with Android

Delete Booking

Figure 5.9 Delete booking

In History page, user can simply slide specific booking information to the left, then the
Delete button will be shown. User can click on the Delete button and a dialog will be shown to
user for the delete confirmation and the list will be refreshed and the deleted booking
information will be gone.

25
CT100-3-3-AMCA Advanced Mobile Computing with Android

5.2 Web Application

Login Page

Figure 5.10 Login Page

In the Login page, the admin will need to enter the username and password in order to
use the application for CRUDS operations.

Home Page

Figure 5.11 Home page

In the Home page, there will have two buttons at the menu bar and two buttons at the
middle of the web page. These buttons responsible to navigate the admin to the specific page.

26
CT100-3-3-AMCA Advanced Mobile Computing with Android

User Page

Figure 5.12 User page

Figure 5.13 User page

Once the User page loaded, a list of current users in the mobile application will be
shown. Admin can add new user to the Firestore by entering the details of the user then click
Add button. Admin can also search for user by name in the search text box. Admin can update
or delete the selected user from the list.

27
CT100-3-3-AMCA Advanced Mobile Computing with Android

Product Page

Figure 5.14 Product Page

Figure 5.14 Product Page

Similar to User page, a list of current sport facilities in the mobile application will be
shown once the Product page loaded. Admin can add new sport facility to the Firestore by
entering the details of the sport facility then click Add button. Admin can also search for sport
facility by name in the search text box. Admin can update or delete the selected sport facility
from the list.

28
CT100-3-3-AMCA Advanced Mobile Computing with Android

6.0 Conclusion
In conclusion, Book4Sport sport facility booking mobile application has been
developed in native Android environment. Android studio provides few useful libraries and
tools which helps in the application development process. The aim and objectives of the project
are met which all the important functions are implemented in the application and working
without errors. User can create, view, update and delete their booking without any issues. Other
than that, admin can use the web application to perform CRUDS operations on the user and
product information.

There are few limitations in the mobile application which can be further improved in
the future:

 There are no notifications to notify the user when the booking date is close.
 User can only book the sport facilities for the whole day, cannot book based on different
time slot.
 User may not know which sport facilities provide the best condition since they are not
able to compare the sport facilities by rating and comments.
 Messaging services are not provided in the application which the user have to call the
sport facility provider by themselves.

According to the limitations, there are some future enhancements that needed to be done in
order to provide the better user experience for the users:

 Notifications – Notify user when booking date is close.

 Time slot – Allow user to select time slot instead of whole day.
 Rating system – Allow user to rate the sport facilities, so other users can know which
sport facilities provide better condition.
 Chatting channel – Allow user to communicate with the sport facilities provider in order
to get more detailed information about the sport facilities.

29
CT100-3-3-AMCA Advanced Mobile Computing with Android

7.0 References
Android Developers, 2019. Meet Android Studio | Android Developers. [Online]
Available at: https://developer.android.com/studio/intro
[Accessed 25 May 2019].

Firebase, 2019. Cloud Firestore | Firebase. [Online]

Available at: https://firebase.google.com/docs/firestore
[Accessed 25 May 2019].

Firebase, 2019. Firebase Test Lab Robo Test. [Online]

Available at: https://firebase.google.com/docs/test-lab/android/robo-ux-test
[Accessed 25 May 2019].

Google Developers, 2019. Google APIs for Android | Map View. [Online]
Available at:
https://developers.google.com/android/reference/com/google/android/gms/maps/MapView
[Accessed 25 May 2019].

Javarevisited, 2019. 10 Reasons to Learn Java Programming Language and Why Java is Best. [Online]
Available at: https://javarevisited.blogspot.com/2018/07/10-reasons-to-learn-java-
programming.html
[Accessed 25 May 2019].

Lindsay Kolowich, 2018. Web Design 101: How HTML, CSS, and JavaScript Work. [Online]
Available at: https://blog.hubspot.com/marketing/web-design-html-css-javascript
[Accessed 25 May 2019].

30