微信客服：xiaoxionga100
微信客服：ITCS521
程序代写案例-S411F
时间：2021-11-03
ELEC S411F (2021/22)
Electronic and Computer Engineering Project
Proposal
A local/overseas watersport pair up mobile application
Project code: F05
Student name Wang jincheng
Supervisor: Farah
Submission Date: 2021.10.20
1ELEC S411F Final Report 2021/2022
Declaration of Originality
I, Wang jincheng, declare that this report and the work reported herein was composed by and
originated entirely from me. This report has not been submitted in any form for another
degree or diploma at any university or other institute of tertiary education. Information
derived from the published and unpublished work of others has been acknowledged in the
text and a list of references is given in the reference section.
[2021.10.7]
2ELEC S411F Final Report 2021/2022
TABLE OF CONTENTS
1. Introduction...................................................................................................................3
1.1 Project Objectives...................................................................................................... 4
1.2 Organization of the Report....................................................................................... 5
2. Literature Review......................................................................................................... 6
2.1 UI Design.....................................................................................................................6
2.2 Design of interactive functions................................................................................13
2.3 Discussion of comment function............................................................................. 13
2.4 User experience oriented app design......................................................................14
3.Methodology.................................................................................................................... 15
3.1 HTML....................................................................................................................... 16
3.2CSS........................................................................................................................... 17
3.3JavaScript................................................................................................................ 18
3.4SSM framework...................................................................................................... 18
3.5PhoneGap................................................................................................................. 20
4.Project Plan..................................................................................................................... 21
References........................................................................................................................... 23
Appendix............................................................................................................................. 24
3ELEC S411F Final Report 2021/2022
1. INTRODUCTION
This project is to make an APP about diving. It is very troublesome to find
diving sites, sea areas and coaches in Hong Kong. At present, most diving
instructors only need to gather a team of more than 20 people to set out for the
trip. If the number is not enough, the trip may be cancelled. Therefore, this
diving APP is to provide more choices for people. A few people can match with
a diving instructor and choose the diving activities they want to go to. The APP
provides the detailed information of the instructor, the items to visit and the
time for tourists to refer to.
Through this APP, tourists can choose the travel time they want and complete
their travel plan with their friends at a reasonable price. The APP gives a lot of
space and puts the right of choice in the hands of tourists.
APP has two systems: Android and IOS. So I chose way of PWA to
implementation website , So all users can have an APP on their phone and be
able to use it.
The whole APP includes the introduction of the UI design, main page,
registration function, login function, booking and payment function, sharing
function, background manager function and switching between Chinese and
English functions.
In this outline and plan, some background information and project details will
also be included in the following sections. Additionally, there are several
specific lists of objectives in the project detail section and a time plan.
4ELEC S411F Final Report 2021/2022
1.1 PROJECT OBJECTIVES
UI design: For an APP that is a play project, the UI design of its main page
needs to be very attractive in order to attract the attention of tourists, increase
the user's stickiness and increase the browsing time of the APP.
The registration function is divided into tourist registration and coach
registration. Tourists only need to fill in the phone number and register an
account, but coaches need to upload their real business license and personal
coach certificates for registration.
Login function: tourists can log in to browse, coaches can log in to view their
orders.
Reservation and payment functions:Visitors are required to pay a deposit to
book their own tour, as well as to secure the instructor's rights.
Background manager function: This function is provided to APP managers, who
can change the design of some pages by viewing user data in the Application
background.
Payment function: for tourists to pay their own travel costs.
Sharing function: Tourists can share their good coaches or projects with their
friends, which can expand the application scope of their APP.
Chinese and English switching function.
5ELEC S411F Final Report 2021/2022
Rating and evaluation functions: After experiencing the project, tourists can
score their coaches and make their own evaluations in the APP to improve
customers' experience and choices.
The goal of this project is to help people who want easy access to the beach for
diving. Instead of wasting time waiting, people can directly pick the right date
and coach through the app.
The rest of the functions are designed to achieve the goal of visitor convenience.
1.2 ORGANIZATION OF THE REPORT
The main difficulty of UI design is to attract the attention of tourists and
increase the time for users to browse the APP, so as to explore the functions of
the APP itself.
The difficulty of registration function lies in how to identify the validity of
business license and coach certificate uploaded by coach.
As for the payment function, I have never learned this function in my previous
study. It may need the third-party payment channel SDK to complete this
payment module.
6ELEC S411F Final Report 2021/2022
2. LITERATURE REVIEW
This APP will use PWA to output android and IOS programs, and the whole
APP will be designed into the UI design.
And using the SSM framework and PhoneGap framework.
2.1 UI DESIGN
Page design needs to make the user easy to operate, free, and can reflect the
personality and positioning of the software.
The visual aspect also needs the card and flat design style to obtain the simple
visual effect.
Figure.1
The UI design in Figure 1 favours bright colors and uses vivid graphics such as
a plane ( ) and a house ( ) to illustrate this function. This is happy for
some people who love to travel.
7ELEC S411F Final Report 2021/2022
Figure.2
Figure 2 shows the specific payment page. The upper part of the page is also
equipped with realistic pictures to illustrate the authenticity, while the lower
part is to illustrate some local supporting facilities. In addition, the payment
figure is placed in the lower left corner to weaken the psychological pressure
brought by payment and improve the purpose of playing.
8ELEC S411F Final Report 2021/2022
Figure.3
The UI design in Figure 3 shows bright colors, but these colors don't clash in
their use, instead creating a sense of gradient. It enlarges the font of the
destination to highlight the destination, and the number of likes in the upper left
corner is a description of how many people have liked it and also provides a
choice for people about to travel.
Click the specific destination, and at the bottom are some comments and travel
experiences, so that people can share their happiness and show the authenticity
of travel. At the bottom are the popular places of the destination, so as to
promote and guide tourists, and also indicate the address, which is easy to find.
9ELEC S411F Final Report 2021/2022
Figure.4
The UI design in Figure 4 is to reduce some unnecessary information, highlight
the scenery of the destination, deepen the impression of tourists, and put some
other items at the bottom, such as the main page. Book, search.
Such a UI design emphasizes the attraction of the scenery to the tourists and
weakens other elements.
10ELEC S411F Final Report 2021/2022
CURRENT UI DESIGN TRENDS
1. Mainstream systems or apps mostly advocate dark mode or custom theme
mode, such as YouTube and QQ Music.
2. For young people, fresh and colorful colors will be adopted and a variety of
colors will be matched. Gradient color is used to enrich the design texture; Or
use contrast color or adjacent color, let tonal generation administrative levels
sense, more fit the trend of younger.
3. Some controls or buttons of UI design, different buttons use different colors
to improve the visual impact, but not too bright, grasp the balance.
4. The new pseudo-object style, mainly through the change of light and shadow
to highlight the content of the area or module design, the overall feeling will be
more atmospheric and visual impact compared with the flat design.
11ELEC S411F Final Report 2021/2022
Figure.5(The text is fictional and can be ignored) Figure.6(The text is fictional and can be ignored)
12ELEC S411F Final Report 2021/2022
Figure.7(The text is fictional and can be ignored)
Summarizing the UI design of the previous three versions, I want to highlight
the goal of this APP ---- diving.
Therefore, IN Figure 5, I put the title at the beginning of the main page. Below
the main page, some articles with words can be placed. Managers can publish
some places that attract tourists, and tourists can also publish by themselves to
share their stories and satisfaction.
In Figure 7, I include time, price and other functions that can be used for search.
Figure 6, facilitation-accessible coaches or locations, when visitors click into
them, there are detailed explanations and supporting facilities.
Of course, this is the original version, not the final version.
Finally, I choose Sketch and Wix to design the UI.
13ELEC S411F Final Report 2021/2022
2.2 DESIGN OF INTERACTIVE FUNCTIONS
Enhance the guidance of the page, the use of soft switching mode, not stiff,
improve the continuity between the interface and the jump interface.
Explain the changes of interactive actions, effectively give users feedback
through dynamic effects, and add some small status hints, such as a small
progress bar in the style of a cruise ship, to remind the normal operation of the
APP.
2.3 DISCUSSION OF COMMENT FUNCTION
After the tourists experience the play project, we can use UGC (useGenerate
Content) mode to comment on this trip. Users can publish text, pictures, videos,
audio and other contents of the trip selected this time, which can reduce the cost
of APP creators to search for introductions. It increases the user's understanding
of this trip, and increases the credibility and playability.
UCG can increase user engagement, reduce costs and meet the needs of social
networking. It can attract three types of users:
1. People who are keen on sharing travel notes, expressing opinions and
comments can also improve the modification of the APP. Users with a fan base
can even share the APP.
2. Someone who likes to leave footprints.
3. It saves some people the trouble of looking for the guide, and can directly
complete the understanding through comments.
This is my idea of reviews and ratings.
14ELEC S411F Final Report 2021/2022
2.4 USER EXPERIENCE ORIENTED APP DESIGN
1. First of all, as an app specially designed for people with diving needs, the
possible weather on that day or in recent days should show that weather changes
have great feelings for diving.
2. The APP should contain the introduction of pictures or videos, so as to have
a more intuitive feeling. In this respect, I also mentioned UGC mode in the
previous introduction of China, which can save some time and cost, and provide
better APP experience for tourists.
3. Add specific map functions, graphic introduction and facility introduction.
For diving enthusiasts, the beauty of the seabed and beautiful photos or videos
on the sea are more attractive parts.
4. In the warning part, safety should not be abandoned for the sake of playing.
Add safety instructions in the position that APP users should be able to see
carefully to prevent accidents.
However, at present, relevant apps or websites only do not highlight the
comment part or do not have this part at all. For example,
https://holimood.com.hk/ only provides reserved functions. Therefore, I added
comments and sharing functions to this APP to improve user stickiness and
enhance user experience.
15ELEC S411F Final Report 2021/2022
3. METHODOLOGY
The application scope of APP includes android and IOS, so I plan to use PWA
to fulfill the requirements.
PWA apps have the following advantages over native apps:
1. Use HTML, CSS, JS development, no need to consider cross-platform
2. Browser compatibility only, url access, no need to publish to the app Store
3. Install the app icon on the home screen of the mobile phone
4. Run it in a browser to access system resources
5. It can be used offline
6. You can obtain notification messages
PWA has the main capabilities of native apps, but the development process is
much simpler than native apps:
A. Better foundation of HTML/CSS/JS and higher development efficiency;
B. Saves a lot of cost of developing separate versions for different systems;
C. Save the tedious process of putting it on the application market;
D. No need to go to the app store to download, making it easier for users to use.
Use of the SSM framework and Adobe PhoneGap can also be added
16ELEC S411F Final Report 2021/2022
3.1 HTML
HyperText Markup Language (HTML) is a standard Markup Language for
creating web pages. I can build my own WEB site using HTML, which runs on
the browser and is parsed by the browser.
Figure.8
17ELEC S411F Final Report 2021/2022
3.2 CSS
CSS refers to Cascading Style Sheets that define how HTML elements are
displayed. CSS is usually stored in style sheets, and CSS was added to HTML
4.0 to address the separation of content and presentation. External stylesheets
can greatly improve productivity.
External style sheets are usually stored in CSS files; Multiple style definitions
can be layered on top of one another.
Stylesheets define how HTML elements are displayed, just as font labels and
color attributes in HTML do. Styles are usually stored in external.css files. You
can change the layout and appearance of all your pages by editing a simple CSS
document.
Figure 9
18ELEC S411F Final Report 2021/2022
3.3 JAVASCRIPT
JavaScript is the programming language for the Web. All modern HTML pages
use JavaScript.
JavaScript is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript, once inserted into an HTML page, can be executed by all modern
browsers.
3.4 SSM FRAMEWORK
SSM (Spring+SpringMVC+MyBatis) framework is a combination of Spring
and MyBatis (SpringMVC is part of Spring).
Spring
Spring is like a large factory for assembly beans throughout the project,
specifying in the configuration file that objects are instantiated by calling the
constructor of the entity class with specific parameters. You can also call it the
glue in a project.
The core idea of Spring is IoC (Inversion of Control), which means that instead
of requiring programmers to explicitly 'new' an object, you let the Spring
framework do it for you.
SpringMVC
SpringMVC intercepts user requests in a project, and its core Servlet, the
DispatcherServlet, acts as an intermediary or foreground to match user requests
to the Controller through HandlerMapping. A Controller is the action that is
19ELEC S411F Final Report 2021/2022
performed for a specific request. SpringMVC is equivalent to Struts in the SSH
framework.
Mybatis
Mybatis is the encapsulation of JDBC, which makes the underlying operation of
the database transparent. Mybatis operates around an instance of
sqlSessionFactory. Mybatis is associated with the Mapper file of each entity
class through the configuration file, and the Mapper file configures the SQL
statement mapping required by each class to the database. Every time you
interact with the database, get a sqlSession through sqlSessionFactory, and then
execute SQL commands.
Using the SSM framework can speed up my project implementation.
1. Cut down on coding
A good development framework writes a lot of basic functionality, and
programmers focus on implementing business logic.
2. Standardization and reuse
The development framework uses many design patterns, such as MVC. When
writing code, programmers can follow the MVC pattern and write
corresponding codes of Controller, Entity and View.
3. Easy to expand and maintain
Mybatis has realized the database encapsulation, when the program from Oracle
to mySQL, do not need to change too much, it can be very convenient to
complete the transformation.
Standardized coding, for maintenance, facilitate the subsequent personnel to
understand and modify the code.
20ELEC S411F Final Report 2021/2022
3.5 PHONEGAP
Theroy：
1. Use webView to render and parse HTML locally
So it's essentially an embedded browser
It's similar to a WebView, but PhoneGap has tweaked the WebView
2. Encapsulate call native API based on plugin pattern
Run as a native app
Call native functions with JS
3. Load the CallbackServer thread when the framework starts for the first time
and listen for data in the front-end XHR request and linked list
When an XHR request comes in and the list is empty, the thread waits for 10
seconds.
If data comes in at that time, the thread wakes up and passes the data to the front
end.
If no data is available 10 seconds later, null data is sent back to the front end.
Cross platform:
In each case, PhoneGap implements a set of backend frameworks that interact
with each platform's API to invoke its native API, and then provide developers
with a unified interface, the PhoneGap API.
As a result, developers can quickly develop mobile platforms using only Web
technologies
21ELEC S411F Final Report 2021/2022
4. PROJECT PLAN
` Website Time
Background and Literature Review
Background and Literature Review 2021.10.5 2021.10.22
Project outline and Planning
Document
2021.10.5 2021.10.22
Submission Proposal 2021.10.22 2021.10.22
UI design
The main page of the APP 2021.10.22 2021.10.23
Visitor Registration page 2021.10.24 2021.10.25
Coach Registration Page 2021.10.26 2021.10.27
Details interface (Tourism is
introduced)
2021.10.28 2021.10.30
Realization of registration Function
The visitor registration function is
realized
2021.11.1 2021.11.8
Coach registration function
realization
2021.11.10 2021.11.17
Implementation of Login Function
The visitor login function is
realized
2021.11.19 2021.11.26
Search function Settings
Search function Settings(i.e time,
price, number of people)
2021.11.28 2021.12.5
Switching between English and Chinese
Switching between English and
Chinese
2021.12.7 2021.12.14
Administrator Permission Setting
Administrator Permission Setting 2021.12.16 2021.12.24
Payment function
Payment function 2021.12.26 2022.1.2
Sharing function for tourists
22ELEC S411F Final Report 2021/2022
Sharing function 2022.1.3 2022.1.17
Comment and rating functions
Comment and rating 2022.1.19 2022.1.27
prepare showcase
prepare showcase 2022.2.20 2022.2.29
Report
Report 2022.3.1 2022.3.8
23ELEC S411F Final Report 2021/2022
REFERENCES
IDfor.(2020. Apr.01), “A detailed analysis of UI design trends for 2020”[online],
Available:http://www.woshipm.com/pd/3622733.html
Anon. (2014. Jun.06), “Phonegap framework principles”[online],Available:
http://pbking1.github.io/blog/2014/06/06/phonegap-kuang-jia-yuan-li/
Fishgrid(2021. Oct.05), “Travelmania - Hotel & Flight Booking App”[online], Available:
https://www.youngem.com/detail/6009
Jane mi Network technology. (2016. Jul.06),“How to choose the appropriate payment
channel for App access to payment function?”[online],Available:
https://www.zhihu.com/question/40945472
Joe Bowser、Michael Brooks, etc(2014. May.23), “PhoneGap(Cordova)”[online], Available:
https://zh.wikipedia.org/wiki/Adobe_PhoneGap
Holimood. , Available:https://holimood.com.hk/
Pete LePage, François Beaufort and Thomas Steiner.(2018. Nov.05),“Add a web app
manifest”[online], Available:https://web.dev/add-manifest/
Shi Xiaodan, Cui Yuhang, “Design and research of urban smart tourism APP oriented to user
experience”[online], Available: https://www.xzbu.com/8/view-15415173.htm
Wang Jincheng. ,(2021. Oct.17), “Hong Kong Diving”[online], Available:
https://manage.wix.com/account/sites
Yan WeiHua. , “Tourism APP interface design based on user experience”[online],Available:
https://www.xzbu.com/1/view-7741506.htm
Zhu Mengnan. , “Research on the design of online tourism APP based on UGC
mode”[online],Available:https://www.xzbu.com/2/view-15197537.htm
珊子想要去 LA. (2016. Aug.20), “20 travel APP interface design appreciation”[online],
Available:https://www.xueui.cn/appreciate/interface-appreciate/20-travel-app-interface-
ui-design-appreciation.html
24ELEC S411F Final Report 2021/2022
APPENDIX
学霸联盟
Electronic and Computer Engineering Project
Proposal
A local/overseas watersport pair up mobile application
Project code: F05
Student name Wang jincheng
Supervisor: Farah
Submission Date: 2021.10.20
1ELEC S411F Final Report 2021/2022
Declaration of Originality
I, Wang jincheng, declare that this report and the work reported herein was composed by and
originated entirely from me. This report has not been submitted in any form for another
degree or diploma at any university or other institute of tertiary education. Information
derived from the published and unpublished work of others has been acknowledged in the
text and a list of references is given in the reference section.
[2021.10.7]
2ELEC S411F Final Report 2021/2022
TABLE OF CONTENTS
1. Introduction...................................................................................................................3
1.1 Project Objectives...................................................................................................... 4
1.2 Organization of the Report....................................................................................... 5
2. Literature Review......................................................................................................... 6
2.1 UI Design.....................................................................................................................6
2.2 Design of interactive functions................................................................................13
2.3 Discussion of comment function............................................................................. 13
2.4 User experience oriented app design......................................................................14
3.Methodology.................................................................................................................... 15
3.1 HTML....................................................................................................................... 16
3.2CSS........................................................................................................................... 17
3.3JavaScript................................................................................................................ 18
3.4SSM framework...................................................................................................... 18
3.5PhoneGap................................................................................................................. 20
4.Project Plan..................................................................................................................... 21
References........................................................................................................................... 23
Appendix............................................................................................................................. 24
3ELEC S411F Final Report 2021/2022
1. INTRODUCTION
This project is to make an APP about diving. It is very troublesome to find
diving sites, sea areas and coaches in Hong Kong. At present, most diving
instructors only need to gather a team of more than 20 people to set out for the
trip. If the number is not enough, the trip may be cancelled. Therefore, this
diving APP is to provide more choices for people. A few people can match with
a diving instructor and choose the diving activities they want to go to. The APP
provides the detailed information of the instructor, the items to visit and the
time for tourists to refer to.
Through this APP, tourists can choose the travel time they want and complete
their travel plan with their friends at a reasonable price. The APP gives a lot of
space and puts the right of choice in the hands of tourists.
APP has two systems: Android and IOS. So I chose way of PWA to
implementation website , So all users can have an APP on their phone and be
able to use it.
The whole APP includes the introduction of the UI design, main page,
registration function, login function, booking and payment function, sharing
function, background manager function and switching between Chinese and
English functions.
In this outline and plan, some background information and project details will
also be included in the following sections. Additionally, there are several
specific lists of objectives in the project detail section and a time plan.
4ELEC S411F Final Report 2021/2022
1.1 PROJECT OBJECTIVES
UI design: For an APP that is a play project, the UI design of its main page
needs to be very attractive in order to attract the attention of tourists, increase
the user's stickiness and increase the browsing time of the APP.
The registration function is divided into tourist registration and coach
registration. Tourists only need to fill in the phone number and register an
account, but coaches need to upload their real business license and personal
coach certificates for registration.
Login function: tourists can log in to browse, coaches can log in to view their
orders.
Reservation and payment functions:Visitors are required to pay a deposit to
book their own tour, as well as to secure the instructor's rights.
Background manager function: This function is provided to APP managers, who
can change the design of some pages by viewing user data in the Application
background.
Payment function: for tourists to pay their own travel costs.
Sharing function: Tourists can share their good coaches or projects with their
friends, which can expand the application scope of their APP.
Chinese and English switching function.
5ELEC S411F Final Report 2021/2022
Rating and evaluation functions: After experiencing the project, tourists can
score their coaches and make their own evaluations in the APP to improve
customers' experience and choices.
The goal of this project is to help people who want easy access to the beach for
diving. Instead of wasting time waiting, people can directly pick the right date
and coach through the app.
The rest of the functions are designed to achieve the goal of visitor convenience.
1.2 ORGANIZATION OF THE REPORT
The main difficulty of UI design is to attract the attention of tourists and
increase the time for users to browse the APP, so as to explore the functions of
the APP itself.
The difficulty of registration function lies in how to identify the validity of
business license and coach certificate uploaded by coach.
As for the payment function, I have never learned this function in my previous
study. It may need the third-party payment channel SDK to complete this
payment module.
6ELEC S411F Final Report 2021/2022
2. LITERATURE REVIEW
This APP will use PWA to output android and IOS programs, and the whole
APP will be designed into the UI design.
And using the SSM framework and PhoneGap framework.
2.1 UI DESIGN
Page design needs to make the user easy to operate, free, and can reflect the
personality and positioning of the software.
The visual aspect also needs the card and flat design style to obtain the simple
visual effect.
Figure.1
The UI design in Figure 1 favours bright colors and uses vivid graphics such as
a plane ( ) and a house ( ) to illustrate this function. This is happy for
some people who love to travel.
7ELEC S411F Final Report 2021/2022
Figure.2
Figure 2 shows the specific payment page. The upper part of the page is also
equipped with realistic pictures to illustrate the authenticity, while the lower
part is to illustrate some local supporting facilities. In addition, the payment
figure is placed in the lower left corner to weaken the psychological pressure
brought by payment and improve the purpose of playing.
8ELEC S411F Final Report 2021/2022
Figure.3
The UI design in Figure 3 shows bright colors, but these colors don't clash in
their use, instead creating a sense of gradient. It enlarges the font of the
destination to highlight the destination, and the number of likes in the upper left
corner is a description of how many people have liked it and also provides a
choice for people about to travel.
Click the specific destination, and at the bottom are some comments and travel
experiences, so that people can share their happiness and show the authenticity
of travel. At the bottom are the popular places of the destination, so as to
promote and guide tourists, and also indicate the address, which is easy to find.
9ELEC S411F Final Report 2021/2022
Figure.4
The UI design in Figure 4 is to reduce some unnecessary information, highlight
the scenery of the destination, deepen the impression of tourists, and put some
other items at the bottom, such as the main page. Book, search.
Such a UI design emphasizes the attraction of the scenery to the tourists and
weakens other elements.
10ELEC S411F Final Report 2021/2022
CURRENT UI DESIGN TRENDS
1. Mainstream systems or apps mostly advocate dark mode or custom theme
mode, such as YouTube and QQ Music.
2. For young people, fresh and colorful colors will be adopted and a variety of
colors will be matched. Gradient color is used to enrich the design texture; Or
use contrast color or adjacent color, let tonal generation administrative levels
sense, more fit the trend of younger.
3. Some controls or buttons of UI design, different buttons use different colors
to improve the visual impact, but not too bright, grasp the balance.
4. The new pseudo-object style, mainly through the change of light and shadow
to highlight the content of the area or module design, the overall feeling will be
more atmospheric and visual impact compared with the flat design.
11ELEC S411F Final Report 2021/2022
Figure.5(The text is fictional and can be ignored) Figure.6(The text is fictional and can be ignored)
12ELEC S411F Final Report 2021/2022
Figure.7(The text is fictional and can be ignored)
Summarizing the UI design of the previous three versions, I want to highlight
the goal of this APP ---- diving.
Therefore, IN Figure 5, I put the title at the beginning of the main page. Below
the main page, some articles with words can be placed. Managers can publish
some places that attract tourists, and tourists can also publish by themselves to
share their stories and satisfaction.
In Figure 7, I include time, price and other functions that can be used for search.
Figure 6, facilitation-accessible coaches or locations, when visitors click into
them, there are detailed explanations and supporting facilities.
Of course, this is the original version, not the final version.
Finally, I choose Sketch and Wix to design the UI.
13ELEC S411F Final Report 2021/2022
2.2 DESIGN OF INTERACTIVE FUNCTIONS
Enhance the guidance of the page, the use of soft switching mode, not stiff,
improve the continuity between the interface and the jump interface.
Explain the changes of interactive actions, effectively give users feedback
through dynamic effects, and add some small status hints, such as a small
progress bar in the style of a cruise ship, to remind the normal operation of the
APP.
2.3 DISCUSSION OF COMMENT FUNCTION
After the tourists experience the play project, we can use UGC (useGenerate
Content) mode to comment on this trip. Users can publish text, pictures, videos,
audio and other contents of the trip selected this time, which can reduce the cost
of APP creators to search for introductions. It increases the user's understanding
of this trip, and increases the credibility and playability.
UCG can increase user engagement, reduce costs and meet the needs of social
networking. It can attract three types of users:
1. People who are keen on sharing travel notes, expressing opinions and
comments can also improve the modification of the APP. Users with a fan base
can even share the APP.
2. Someone who likes to leave footprints.
3. It saves some people the trouble of looking for the guide, and can directly
complete the understanding through comments.
This is my idea of reviews and ratings.
14ELEC S411F Final Report 2021/2022
2.4 USER EXPERIENCE ORIENTED APP DESIGN
1. First of all, as an app specially designed for people with diving needs, the
possible weather on that day or in recent days should show that weather changes
have great feelings for diving.
2. The APP should contain the introduction of pictures or videos, so as to have
a more intuitive feeling. In this respect, I also mentioned UGC mode in the
previous introduction of China, which can save some time and cost, and provide
better APP experience for tourists.
3. Add specific map functions, graphic introduction and facility introduction.
For diving enthusiasts, the beauty of the seabed and beautiful photos or videos
on the sea are more attractive parts.
4. In the warning part, safety should not be abandoned for the sake of playing.
Add safety instructions in the position that APP users should be able to see
carefully to prevent accidents.
However, at present, relevant apps or websites only do not highlight the
comment part or do not have this part at all. For example,
https://holimood.com.hk/ only provides reserved functions. Therefore, I added
comments and sharing functions to this APP to improve user stickiness and
enhance user experience.
15ELEC S411F Final Report 2021/2022
3. METHODOLOGY
The application scope of APP includes android and IOS, so I plan to use PWA
to fulfill the requirements.
PWA apps have the following advantages over native apps:
1. Use HTML, CSS, JS development, no need to consider cross-platform
2. Browser compatibility only, url access, no need to publish to the app Store
3. Install the app icon on the home screen of the mobile phone
4. Run it in a browser to access system resources
5. It can be used offline
6. You can obtain notification messages
PWA has the main capabilities of native apps, but the development process is
much simpler than native apps:
A. Better foundation of HTML/CSS/JS and higher development efficiency;
B. Saves a lot of cost of developing separate versions for different systems;
C. Save the tedious process of putting it on the application market;
D. No need to go to the app store to download, making it easier for users to use.
Use of the SSM framework and Adobe PhoneGap can also be added
16ELEC S411F Final Report 2021/2022
3.1 HTML
HyperText Markup Language (HTML) is a standard Markup Language for
creating web pages. I can build my own WEB site using HTML, which runs on
the browser and is parsed by the browser.
Figure.8
17ELEC S411F Final Report 2021/2022
3.2 CSS
CSS refers to Cascading Style Sheets that define how HTML elements are
displayed. CSS is usually stored in style sheets, and CSS was added to HTML
4.0 to address the separation of content and presentation. External stylesheets
can greatly improve productivity.
External style sheets are usually stored in CSS files; Multiple style definitions
can be layered on top of one another.
Stylesheets define how HTML elements are displayed, just as font labels and
color attributes in HTML do. Styles are usually stored in external.css files. You
can change the layout and appearance of all your pages by editing a simple CSS
document.
Figure 9
18ELEC S411F Final Report 2021/2022
3.3 JAVASCRIPT
JavaScript is the programming language for the Web. All modern HTML pages
use JavaScript.
JavaScript is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript, once inserted into an HTML page, can be executed by all modern
browsers.
3.4 SSM FRAMEWORK
SSM (Spring+SpringMVC+MyBatis) framework is a combination of Spring
and MyBatis (SpringMVC is part of Spring).
Spring
Spring is like a large factory for assembly beans throughout the project,
specifying in the configuration file that objects are instantiated by calling the
constructor of the entity class with specific parameters. You can also call it the
glue in a project.
The core idea of Spring is IoC (Inversion of Control), which means that instead
of requiring programmers to explicitly 'new' an object, you let the Spring
framework do it for you.
SpringMVC
SpringMVC intercepts user requests in a project, and its core Servlet, the
DispatcherServlet, acts as an intermediary or foreground to match user requests
to the Controller through HandlerMapping. A Controller is the action that is
19ELEC S411F Final Report 2021/2022
performed for a specific request. SpringMVC is equivalent to Struts in the SSH
framework.
Mybatis
Mybatis is the encapsulation of JDBC, which makes the underlying operation of
the database transparent. Mybatis operates around an instance of
sqlSessionFactory. Mybatis is associated with the Mapper file of each entity
class through the configuration file, and the Mapper file configures the SQL
statement mapping required by each class to the database. Every time you
interact with the database, get a sqlSession through sqlSessionFactory, and then
execute SQL commands.
Using the SSM framework can speed up my project implementation.
1. Cut down on coding
A good development framework writes a lot of basic functionality, and
programmers focus on implementing business logic.
2. Standardization and reuse
The development framework uses many design patterns, such as MVC. When
writing code, programmers can follow the MVC pattern and write
corresponding codes of Controller, Entity and View.
3. Easy to expand and maintain
Mybatis has realized the database encapsulation, when the program from Oracle
to mySQL, do not need to change too much, it can be very convenient to
complete the transformation.
Standardized coding, for maintenance, facilitate the subsequent personnel to
understand and modify the code.
20ELEC S411F Final Report 2021/2022
3.5 PHONEGAP
Theroy：
1. Use webView to render and parse HTML locally
So it's essentially an embedded browser
It's similar to a WebView, but PhoneGap has tweaked the WebView
2. Encapsulate call native API based on plugin pattern
Run as a native app
Call native functions with JS
3. Load the CallbackServer thread when the framework starts for the first time
and listen for data in the front-end XHR request and linked list
When an XHR request comes in and the list is empty, the thread waits for 10
seconds.
If data comes in at that time, the thread wakes up and passes the data to the front
end.
If no data is available 10 seconds later, null data is sent back to the front end.
Cross platform:
In each case, PhoneGap implements a set of backend frameworks that interact
with each platform's API to invoke its native API, and then provide developers
with a unified interface, the PhoneGap API.
As a result, developers can quickly develop mobile platforms using only Web
technologies
21ELEC S411F Final Report 2021/2022
4. PROJECT PLAN
` Website Time
Background and Literature Review
Background and Literature Review 2021.10.5 2021.10.22
Project outline and Planning
Document
2021.10.5 2021.10.22
Submission Proposal 2021.10.22 2021.10.22
UI design
The main page of the APP 2021.10.22 2021.10.23
Visitor Registration page 2021.10.24 2021.10.25
Coach Registration Page 2021.10.26 2021.10.27
Details interface (Tourism is
introduced)
2021.10.28 2021.10.30
Realization of registration Function
The visitor registration function is
realized
2021.11.1 2021.11.8
Coach registration function
realization
2021.11.10 2021.11.17
Implementation of Login Function
The visitor login function is
realized
2021.11.19 2021.11.26
Search function Settings
Search function Settings(i.e time,
price, number of people)
2021.11.28 2021.12.5
Switching between English and Chinese
Switching between English and
Chinese
2021.12.7 2021.12.14
Administrator Permission Setting
Administrator Permission Setting 2021.12.16 2021.12.24
Payment function
Payment function 2021.12.26 2022.1.2
Sharing function for tourists
22ELEC S411F Final Report 2021/2022
Sharing function 2022.1.3 2022.1.17
Comment and rating functions
Comment and rating 2022.1.19 2022.1.27
prepare showcase
prepare showcase 2022.2.20 2022.2.29
Report
Report 2022.3.1 2022.3.8
23ELEC S411F Final Report 2021/2022
REFERENCES
IDfor.(2020. Apr.01), “A detailed analysis of UI design trends for 2020”[online],
Available:http://www.woshipm.com/pd/3622733.html
Anon. (2014. Jun.06), “Phonegap framework principles”[online],Available:
http://pbking1.github.io/blog/2014/06/06/phonegap-kuang-jia-yuan-li/
Fishgrid(2021. Oct.05), “Travelmania - Hotel & Flight Booking App”[online], Available:
https://www.youngem.com/detail/6009
Jane mi Network technology. (2016. Jul.06),“How to choose the appropriate payment
channel for App access to payment function?”[online],Available:
https://www.zhihu.com/question/40945472
Joe Bowser、Michael Brooks, etc(2014. May.23), “PhoneGap(Cordova)”[online], Available:
https://zh.wikipedia.org/wiki/Adobe_PhoneGap
Holimood. , Available:https://holimood.com.hk/
Pete LePage, François Beaufort and Thomas Steiner.(2018. Nov.05),“Add a web app
manifest”[online], Available:https://web.dev/add-manifest/
Shi Xiaodan, Cui Yuhang, “Design and research of urban smart tourism APP oriented to user
experience”[online], Available: https://www.xzbu.com/8/view-15415173.htm
Wang Jincheng. ,(2021. Oct.17), “Hong Kong Diving”[online], Available:
https://manage.wix.com/account/sites
Yan WeiHua. , “Tourism APP interface design based on user experience”[online],Available:
https://www.xzbu.com/1/view-7741506.htm
Zhu Mengnan. , “Research on the design of online tourism APP based on UGC
mode”[online],Available:https://www.xzbu.com/2/view-15197537.htm
珊子想要去 LA. (2016. Aug.20), “20 travel APP interface design appreciation”[online],
Available:https://www.xueui.cn/appreciate/interface-appreciate/20-travel-app-interface-
ui-design-appreciation.html
24ELEC S411F Final Report 2021/2022
APPENDIX
学霸联盟
