UMM AL-QURA UNIVERSITY

COLLEGE OF COMPUTERS
INFORMATION SYSTEMS DEPARTMENT

Yalla Hiking

Basil Talal Alqarhi

Aseel Rashed Alzahrani
Faisal Abdullah Alziyadi
Abdulaziz Majed Alzahrani
Abdullrahman Esmat Qary
Anas Saeed Al Mousaed

Supervised By
D. Hassan Farid lahza
Submitted for the partial fulfilment of Bachelor of Information Systems degree.
College of Computers, Al-Abdiya Campus

April; 2023
 ABSTRACT

Hiking is a recreational activity that requires skill and strength. But everyone,
whether amateur or professional, can practice it, as it does not require experience
to practice it. When a group of people who love walking and climbing goes
according to a map with a competent person as a guide on the way, the guide must
know the roads and take all safety measures to protect his group from any danger
they may face.

A set of general safety instructions must be followed, providing water, first aid,
and food the application offers social features such as the ability to connect with
other hikers and share hiking experiences, photos, and tips. Users can also leave
reviews and ratings for the trails they have hiked, which can help other hikers
make informed decisions about which trails to choose.

We suggested that we create a mobile application that provides digital services for
hiking practitioners for ease of use and time-saving, and the details will be
clarified.

i
 DECLARATION

Praise be to God for helping us accomplish this work. We worked for the lovers of hiking,
and we thank those who supported us.
Group members:

Name Signature

Basil Talal Alqarhi 441005152

Aseel Rashed Alzahrani 441009799

Faisal Abdullah Alziyadi 439001768

Abdulaziz Majed Alzahrani 439012675

Anas Saeed Al Mousaed 441006034

Abdullrahman Esmat Qary 441009951

ii
 Table of Contents
CHAPTER 1 ......................................................................................................................... 1
1.1 Introduction .................................................................................................................. 1
1.2 Problem domain............................................................................................................ 1
1.3 Problem statement ....................................................................................................... 1
1.4 Proposed system. .......................................................................................................... 2
1.4.1 Aims and Objectives ...................................................................................................................... 2
1.4.2 Proposed system features. ............................................................................................................ 2

1.5 Project Methodology..................................................................................................... 3

1.5.1 Agile Project Methodology ............................................................................................................ 3

1.6 Resource Requirement .................................................................................................. 4

1.6.1 Hardware Resources ..................................................................................................................... 4
1.6.2 Software Resources ....................................................................................................................... 4

1.7 Report Layout ............................................................................................................... 5

CHAPTER 2 ......................................................................................................................... 6
2.1 Introduction .................................................................................................................. 6
2.2 Overview of existing projects......................................................................................... 6
2.3 Limitations of existing projects ...................................................................................... 8
2.4 Innovations of our project ............................................................................................. 8
CHAPTER 3 ....................................................................................................................... 10
3.1 Introduction ................................................................................................................ 10
3.1.1 Purpose ....................................................................................................................................... 10
3.1.2 Document Conventions ............................................................................................................... 10
3.1.3 Intended Audience and Reading Suggestions .............................................................................. 10
3.1.4 Product Scope ............................................................................................................................. 10

3.2 Overall Description...................................................................................................... 11

3.2.1 Product Perspective .................................................................................................................... 11
3.2.2 Product Functions ....................................................................................................................... 11
3.2.3 User Classes and Characteristics .................................................................................................. 19
3.2.4 Operating Environment ............................................................................................................... 19
3.2.5 Design and Implementation Constraints ...................................................................................... 20
3.2.6 User Documentation ................................................................................................................... 20
3.2.7 Assumptions and Dependencies .................................................................................................. 20
3.2.8 BPMN diagram ............................................................................................................................ 20
3.3 External Interface Requirements ................................................................................. 21
3.3.1 User Interfaces ........................................................................................................................ 21
3.3.2 Hardware Interfaces .................................................................................................................... 30
3.3.3 Software Interfaces ................................................................................................................. 30
3.3.4 Communications Interfaces ..................................................................................................... 30

3.4 System Features .......................................................................................................... 31

iii
 3.4.1 Register / Login ........................................................................................................................... 31
3.4.2 choose a personal account or trips. ............................................................................................. 31
3.4.3 provide the hiking spots from lowest to highest price. ................................................................ 32
3.4.4 View descriptive information. ..................................................................................................... 32
3.4.5 choose the guide. ........................................................................................................................ 33
3.4.6 the Google Map feature of the hiking location. ........................................................................... 33
3.4.7 pay fee. ....................................................................................................................................... 34
3.4.8 view events and trips & schedule appointments ......................................................................... 34
3.4.9 View the number of seats available. ............................................................................................ 35
3.4.10 View the safety instructions page............................................................................................ 35
3.4.11 edit profile and view past trips and places with their ratings. .................................................. 36

3.5 Other Non-functional Requirements ............................................................................ 36

3.6 Performance Requirements ......................................................................................... 37
3.7 Safety Requirements ................................................................................................... 37
3.8 Security Requirements ................................................................................................ 37
3.9 Software Quality Attributes ......................................................................................... 38
3.10 Business Rules............................................................................................................. 38
CHAPTER 4 ....................................................................................................................... 39
4.1 Design Overview ......................................................................................................... 39
4.1.1 Introduction ................................................................................................................................ 39
4.1.2 Environment Overview ................................................................................................................ 39
4.1.3 Constraints and Assumptions ...................................................................................................... 39

4.2 Interfaces and Data Stores ........................................................................................... 40

4.2.1 System Interfaces ........................................................................................................................ 40
4.2.2 Data Stores .................................................................................................................................. 40

4.3 Structural Design ......................................................................................................... 44

4.3.1 Class Diagram .............................................................................................................................. 44
4.3.2 Sequence diagram................................................................................................................... 45
4.3.3 ERD Diagrams .............................................................................................................................. 49

CHAPTER 5 ....................................................................................................................... 50
5.1 Introduction ................................................................................................................ 50
5.2 Snapshots of main execution screens of the application ............................................... 50
5.2.1 Login Page ................................................................................................................................... 50
5.2.2 SignUp Page ................................................................................................................................ 52
5.2.3 Enter opt (Email Verification) ...................................................................................................... 54
5.2.4 Create Guide ............................................................................................................................... 55
5.2.5 Customer Dashboard ................................................................................................................... 57
5.2.6 Hiking Destination Detail ............................................................................................................. 59
5.2.7 Route Page .................................................................................................................................. 61
5.2.8 Weather Api ................................................................................................................................ 63
5.2.9 Map Route Page .......................................................................................................................... 65
5.2.10 Reviews Page .......................................................................................................................... 66
5.2.11 Book Hiking Trip ...................................................................................................................... 67
5.2.12 Select Guide ............................................................................................................................ 69
5.2.13 Confirm Details ....................................................................................................................... 70

iv
 5.2.14 User Bookings Page ................................................................................................................. 72
5.2.15 User Booking Details ............................................................................................................... 73
5.2.16 Side Bar ................................................................................................................................... 75
5.2.17 Safety Instructions .................................................................................................................. 76
5.2.18 About Us ................................................................................................................................. 77
5.2.19 Contact Us .............................................................................................................................. 78
5.2.20 Admin Dashboard ................................................................................................................... 79
5.2.21 Admin Booking Details ............................................................................................................ 81

5.3 Program flows ............................................................................................................. 84

5.3.1 User SignUp................................................................................................................................. 84
5.3.2 Become A Guide .......................................................................................................................... 85
5.3.3 User Create Booking .................................................................................................................... 86
5.3.4 Admin Update Payment Status .................................................................................................... 87
5.3.5 Forget Password .......................................................................................................................... 88
5.3.6 User Basic Flow ........................................................................................................................... 89
5.3.7 User Basic Flow 2......................................................................................................................... 90
5.4 Software testing .......................................................................................................... 91
5.4.1 App application testing:............................................................................................................... 91

5.5 Test plan ..................................................................................................................... 91

5.6 Testing type ................................................................................................................ 91
5.6.1 Unit testing: ................................................................................................................................ 91
5.6.2 System testing ............................................................................................................................. 91
5.6.3 Usability Testing: ......................................................................................................................... 92

5.7 Test Tools:................................................................................................................... 92

CHAPTER 6 ....................................................................................................................... 95
6.1 Conclusion .................................................................................................................. 95
6.2 Project achievements .................................................................................................. 95
6.3 Restrictions ................................................................................................................. 96
6.4 Future Work................................................................................................................ 96
6.5 APPENDICES I .............................................................................................................. 97
6.6 APPENDICES II ............................................................................................................. 98
6.7 REFRENCES................................................................................................................ 100

v
 List of Figures

Figure 1. 1: Agile methodology life Cycle .............................................................................................. 3

Figure2. 1: Ootlah website. ................................................................................................................... 6
Figure2. 2: camelsteps website. ............................................................................................................ 6
Figure2. 3: Relive: Run, Ride, Hike & Walk app .................................................................................... 7
Figure2. 4: AllTrails: Hike, Bike & Run app ............................................................................................ 7
Figure3. 1: Use case diagram for registration and login ...................................................................... 11
Figure3. 2: Use case diagram for Choose the type of account. ........................................................... 11
Figure3. 3: Use case diagram for the Search for hiking places. ........................................................... 12
Figure3. 4: Use case diagram for the View descriptive info. ............................................................... 12
Figure3. 5: Use case diagram for Choose the guide with features. ..................................................... 12
Figure3. 6: Use case diagram for the View the google map. ............................................................... 13
Figure3. 7: Use case diagram for the determine guide status............................................................. 13
Figure3. 8: Use case diagram for paying the trip fee & select the guide. ............................................ 13
Figure3. 9: Use case diagram for view the event and trips & appointments. ..................................... 14
Figure3. 10: Use case diagram for view the number of seats trips. .................................................... 14
Figure3. 11: Use case diagram for view the safety instructions. ......................................................... 14
Figure3. 12: Use case diagram for modify the profile. ........................................................................ 15
Figure3. 13: DFD diagram for Yalla Hiking App. .................................................................................. 19
Figure3. 14: BPMN diagram for Yalla Hiking App. ............................................................................... 20
Figure3. 15: UI for Login ...................................................................................................................... 21
Figure3. 16: UI for Sign up & choose type account. ............................................................................ 21
Figure3. 17: UI for opt Email& Successful created account. ............................................................... 22
Figure3. 18: UI for choose guide in the trip. ....................................................................................... 23
Figure3. 19: UI for event and google map & Reviews. ........................................................................ 23
Figure3. 20: UI descriptive information for hiking place, the difficulty of the Place. .......................... 24
Figure3. 21: UI home page for hiking place. ....................................................................................... 24
Figure3. 22: UI for payment and message with guide & Edit profile................................................... 25
Figure3. 23: Weather Api page ........................................................................................................... 25
Figure3. 24: Reviews page .................................................................................................................. 26
Figure3. 25: User trip status page ....................................................................................................... 26
Figure3. 26: Trip receipt page ............................................................................................................. 27
Figure3. 27: Safety instructions page .................................................................................................. 27
Figure3. 28: About us page ................................................................................................................. 28
Figure3. 29: Contact us page............................................................................................................... 28
Figure3. 30: Confirmation for booked trip. ......................................................................................... 29
Figure3. 31: Edit user profile. .............................................................................................................. 29
Figure3. 32: Route map ....................................................................................................................... 30
Figure4. 1: Yalla Hiking Class Diagram. ................................................................................................ 44
Figure4. 2: register to the Yalla Hiking sequence. ............................................................................... 45
Figure4. 3: login to the Yalla Hiking sequence. ................................................................................... 45
Figure4. 4: account type of the Yalla Hiking sequence. ....................................................................... 45
Figure4. 5: hiking spots of the Yalla Hiking sequence. ........................................................................ 46
Figure4. 6: View description of the Yalla Hiking sequence. ................................................................ 46

vi
Figure4. 7: choose the guide of the Yalla Hiking sequence. ............................................................... 46
Figure4. 8: view google map of the Yalla Hiking sequence. ................................................................ 47
Figure4. 9: determine Change the payment status. ............................................................................ 47
Figure4. 10: pay fee. ........................................................................................................................... 47
Figure4. 11: view events & appointments of the Yalla Hiking sequence. ............................................ 48
Figure4. 12: view seats of the Yalla Hiking sequence. ........................................................................ 48
Figure4. 13: view instructions of the Yalla Hiking sequence. ............................................................. 48
Figure4. 14: edit profile & view past trips of the Yalla Hiking sequence. ........................................... 49
Figure4. 15: Yalla Hiking ERD. ............................................................................................................. 49
Figure5. 1: Login page ......................................................................................................................... 50
Figure5. 2: API ..................................................................................................................................... 51
Figure5. 3: SignUp ............................................................................................................................... 52
Figure5. 4: Signup Flow ....................................................................................................................... 53
Figure5. 5: EnterOtp ........................................................................................................................... 54
Figure5. 6: Create Guide ..................................................................................................................... 55
Figure5. 7: Create Guide Flow ............................................................................................................. 56
Figure5. 8: Customer Dashboard ........................................................................................................ 57
Figure5. 9: Hiking Details Page ............................................................................................................ 59
Figure5. 10: Route Page ...................................................................................................................... 61
Figure5. 11: Route Page ...................................................................................................................... 62
Figure5. 12: Route Page ...................................................................................................................... 63
Figure5. 13: Map Route Page .............................................................................................................. 65
Figure5. 14: Reviews Page .................................................................................................................. 66
Figure5. 15: Steps for booking a trip ................................................................................................... 67
Figure5. 16: Enter User Detail Page .................................................................................................... 68
Figure5. 17: Select guide page ............................................................................................................ 69
Figure5. 18: Confirm detail Page. ........................................................................................................ 70
Figure5. 19: User booking Page. ......................................................................................................... 72
Figure5. 20: User booking detail Page................................................................................................. 74
Figure5. 21: Side bar Page................................................................................................................... 75
Figure5. 22: Safety instructions Page .................................................................................................. 76
Figure5. 23: About us Page ................................................................................................................. 77
Figure5. 24: Contact Page ................................................................................................................... 78
Figure5. 25: Admin dashboard Page ................................................................................................... 79
Figure5. 26: Admin booking details Page. ........................................................................................... 81

vii
 List of Tables
Table 2. 1: Compare services and features between other applications and our application............... 9
Table 3. 1: Use case Description for registration and login. ................................................................ 15
Table 3. 2: Use case Description for Choose the type of account. ...................................................... 15
Table 3. 3: Use case Description for the Search for hiking places. ...................................................... 16
Table 3. 4: Use case Description for the View descriptive info ........................................................... 16
Table 3. 5: Use case Description for the Choose the guide with features ........................................... 16
Table 3. 6: Use case Description for the View the google map. .......................................................... 17
Table 3. 7: Use case diagram for the determine guide status. ............................................................ 17
Table 3. 8: Use case Description for paying the trip fee & select the guide. ....................................... 17
Table 3. 9: Use case Description for view the event and trips & appointments.................................. 17
Table 3. 10: Use case Description for view the number of seats trips ................................................ 18
Table 3. 11: Use case Description for view the safety instructions. .................................................... 18
Table 3. 12: Use case Description for modify the profile. ................................................................... 18
Table 4. 1: Users table Data Dictionary ............................................................................................... 40
Table 4. 2: guides table Data Dictionary ............................................................................................. 40
Table 4. 3: trips table Data Dictionary ................................................................................................. 41
Table 4. 4: safety instructions table Data Dictionary .......................................................................... 41
Table 4. 5: Reviews table Data Dictionary ........................................................................................... 42
Table 4. 6: Destination table Data Dictionary ..................................................................................... 42
Table 4. 7: Account table Data Dictionary ........................................................................................... 43
Table 4. 8: Status table Data Dictionary .............................................................................................. 43
Table 4. 9: Hiking Level table Data Dictionary ..................................................................................... 43
Table 4. 10: Supplies table Data Dictionary ........................................................................................ 43
Table 5. 1: component testing ............................................................................................................ 94
Table 6. 1: Program and Software....................................................................................................... 97

viii
 CHAPTER 1
INTRODUCTION

1.1 Introduction

Hiking is widespread sport around the world, as it witnessed many people of all ages come to this
sport to practice it. Like any other sport, it has many health benefits for the human body, and it is a
sport that requires skill and strength. But everyone, whether amateur or professional, can practice
it, as it does not require experience to practice it.

Hiking is the sport of mountain walking or walking in nature, where a group of people who love
walking and climbing go according to a map with a specialized person as a guide on the way, and
they go to rugged wooded or mountainous areas of natural beauty far from the crowds of cities and
overpopulation. Hiking can be with a group of people as it can be done by one person individually,
and the guide must know the routes and take all safety measures to protect his group from any
danger they may face. A set of general safety instructions must be followed, providing water, first
aid, and food, until the team or group reaches the desired place. The guide designs a hike so that it
will ultimately be a reward such as reaching a mountain peak, a spring, a unique landmark, or other
places of special beauty.

We wanted to provide an application for hiking, and the details of the project will be clarified.

1.2 Problem domain

There may not be keeping up with the technical development of such sports and trips
to facilitate services for sports practitioners, it takes longer, and this is a problem, no
developed and modern digital instructions for practicing this sport are clarified .

1.3 Problem statement

Mobile applications are increasing, which makes their owners profits, and this helps
users in providing services to them technically, and when providing an application for
hiking practitioners, this makes it easier to use, provides the best solutions and services
for them, and saves time.

1
1.4 Proposed system.

A hiking application will be created, which contains many features and services that
help to practice this sport with ease of use.

1.4.1 Aims and Objectives

Exploring the sport of hiking revealed that there are many goals and objectives
for this sport, including:

• It contributes to strengthening your mental abilities more than other sports

because it provides the brain with more oxygen-rich blood.
• Hiking provides you with the opportunity to see the green landscapes that bring
feelings of peace, happiness, and reassurance to the soul.
• Strengthening the relationship with others.
• Protect you from diseases.
• Increase user creativity.
• Burn more calories in the body.
• Improve your ability to balance.

1.4.2 Proposed system features.

• The user must be able to register/log in.

• The user should be able to choose a personal account or trips.
• The user must be able to provide the hiking spots from the lowest and the
highest trips price .
• The user must be able to see pictures of the hiking place, descriptive
information, appropriate needs such as supplies, the difficulty of the place, as
well as the evaluation of people who have previously visited this place.
• The user must be able to choose the guide and determine the appropriate time
for him.
• The user must be able to enable the Google map feature of the hiking location.

2
 • The user should be able to see events, excursions, schedule appointments, and
ratings, in addition to the event description.
• The user should be able to see the number of seats available.
• The user should be able to see the safety instructions page.
• User should be able to edit profile and see past trips and places with their
ratings.

1.5 Project Methodology

1.5.1 Agile Project Methodology

Figure 1. 1: Agile methodology life Cycle

Agile is a software development and project management approach focused on flexibility,

collaboration, and customer feedback. It uses iterative and incremental development with
self-organizing cross-functional teams to adapt to changing requirements. Key principles
include iterative development, customer collaboration, and flexibility:

• Iterative and Incremental Development: Agile projects are divided into

small increments, each with its own set of requirements and development cycle. These
increments, often called iterations or sprints, result in a potentially shippable product
at the end of each cycle.

• Customer-Centric: Agile places a strong emphasis on customer collaboration and

feedback. The goal is to create products and features that meet the needs of the end-
users. Customer feedback is sought and integrated throughout the development
process.

3
 • Adaptive and Flexible: Agile recognizes that change is inevitable in the software
development process. It is designed to be adaptive and flexible, allowing teams to
respond to changing requirements and priorities.

• Cross-Functional Teams: Agile teams are typically cross-functional, meaning

they consist of members with a variety of skills, such as developers, testers, designers,
and business analysts. This diversity ensures that all necessary expertise is available
within the team.

• Continuous Delivery: Agile encourages frequent and regular product releases.

This allows stakeholders to see and test the product early and often, which can lead to
faster feedback and improvements.

• Embracing Change: Agile welcomes changes to requirements and priorities,

even late in the development process. This contrasts with traditional methodologies
that resist change in the later stages of a project.

• Working Software Over Documentation: Agile values working software as

the primary measure of progress. While documentation is important, the focus is on
delivering functional, high-quality software.

1.6 Resource Requirement

The project requires several resources for completing the project effectively.

There were 2 types of resources :

1.6.1 Hardware Resources

• Android Mobile for downloading Yalla Hiking Api and Testing.

1.6.2 Software Resources

• The Software Resources were basically categorized into 4 categories :

4
 1. Flutter Mobile Development
o Android Studio
o Dart SDK
o Flutter SDK
o Android Emulator Setup
2. API Development
o Visual Studio 2022
3. Database
o SQL SERVER 2019
o SSMS – SQL Server Management Studio
4. Hosting
o Godady (Windows Hosting) for Api & SQL Server Database
o Godady for domain name

1.7 Report Layout

This project consists of four chapters in addition to references. These chapters are
organized to reflect the scientific steps toward our main objective.
In this chapter, we introduced an introduction with the problem domain, Problem
statement, Proposed system, Aims and Objectives, Proposed system features, Project
Methodology, Resource Requirement, Report Layout
Chapter 2 provides the background and existing work which contains an overview of
existing projects, Limitations of existing projects and Innovations of our project.
While chapter 3 contains Software Requirements Specifications
Chapter 4 provides the Software Design.
Chapter 5 system implementation amd validation
Chapter 6 conclusion and future work

5
 CHAPTER 2
BACKGROUND/EXISTING WORK
(Literature Review, Existing Work)

2.1 Introduction
We searched for mobile applications to practice hiking, and we did not find many
applications that supports practitioners of this sport, and we found sites that show services
that support them as a simple thing. In this technical development, we will keep pace with
our present, and the mobile application will help add distinguished technical services to the
sport of hiking.

2.2 Overview of existing projects

We found some websites and applications that provide simple technical services for hiking
practitioners, such as Ootlah and camelsteps. There are also Saudi hikers, but they only
have a page on Twitter. Registration is coordinated as a traditional thing via a mobile
number or filling out a form via Google.

Figure2. 1: Ootlah website.

Ootlah is the first tourist site that offers many tourist activities that vary in terms of destination
and price to meet all requirements. At Ootlah, we carefully select each offer so that it is
organized by one of the major travel companies. We collect all these offers in a unified list to
make it easier for travel seekers to determine the destination of their next trips.

Figure2. 2: camelsteps website.

Camel Steps is a site for booking internal and external trips that offers tourism activities of
different destinations and prices, as well as the type and duration of the tour and determining

6
the age group. Great customer service is available. It is possible to communicate in any way,
and the response is prompt and confidential.

Figure2. 3: Relive: Run, Ride, Hike & Walk app

Relive is a free app that allows users to create 3D video stories of their outdoor activities such
as running, cycling, hiking, skiing, and snowboarding. The app works with GPS and other
tracker apps to track the user's activity and location in real-time. Users can add photos and
share their videos on social media platforms. Relive Plus is a paid subscription that offers
additional features such as music, more photos, HD video quality, and longer activity
duration.

Figure2. 4: AllTrails: Hike, Bike & Run app

AllTrails was founded on the idea that we’re all made better by spending time in nature.
Today, we continue to be driven by the desire to share the outdoors with as many people in as
many places as possible — and to do so responsibly and respectfully.

7
2.3 Limitations of existing projects

• View trip package prices

• The most popular destinations

• Browse trips based on events.

• Determine the price range from little too expensive.

• Track your ride, run, walk, hike or any activity really.

• See your key stats and location in real time.

• Search by distance from you to find the closest trails.

• Route trail map.

2.4 Innovations of our project

• The user must be able to see pictures of the hiking place, descriptive information,
appropriate needs such as supplies, the difficulty of the place, as well as the evaluation of
people who have previously visited this place.
• The user must be able to enable the Google Map feature of the hiking location.
• The user should be able to see events, excursions, Set a date, and ratings, in addition to
the event description.
• The user should be able to see the number of seats available.
• The user should be able to see the safety instructions page.
• User should be able to edit profile and see past trips and places with their ratings.
• The age of user must be above 18.

8
 Relive AllTrails Ootlah Yalla Hiking
Camelsteps

Trip discounts

Determine the
price range from
little too
expensive

Track your
activities with
GPS
choose the guide

Safety
instructions

choose a
personal account
or a guide

Route Trail map

Table 2. 1: Compare services and features between other applications and our application.

9
 CHAPTER 3
SOFTWARE REQUIREMENTS SPECIFICATION

3.1 Introduction

3.1.1 Purpose

The Yalla Hiking application is an application that contains assistance services for practicing
the sport of hiking, which helps it in many aspects, such as:
• Strengthening mental abilities
• Improve the human psyche.
• Disease protection
• Burn more calories.
This will facilitate the journey for them and provide a good solution. The many advantages of
this application Such as:
• Providing the search for the lowest and highest price.
• The user can choose the guide.
• Determine the appropriate needs of the place.
• Payment of fees

3.1.2 Document Conventions

The document was written according to the instructions of the graduation project supervisor
at Umm Al-Qura University College of Computing and Information Systems in SRS
formatting. The font type is Times New Roman and the font size for headings are 18 bold,
text font size 12, and subtitles font size 14 bold.

3.1.3 Intended Audience and Reading Suggestions

This document is sent to hiking practitioners, and it will be useful to them, and our
application will benefit them, as we provide useful technical services. I suggest hiking read
the Work Background Chapter and Developers See the Software Requirements Specifications
and Software Design chapter.

3.1.4 Product Scope

The Yalla Hiking application helps Hiking by providing technical services that save time and
effort and facilitate the journey for them.

10
3.2 Overall Description
3.2.1 Product Perspective
The Yalla Hiking application is a new application that features technical services and is not
affiliated with a product or alternative group. These details were clarified in the Work
Background chapter.

3.2.2 Product Functions

• Use case Diagram.
is a graphical depiction of a user's possible interactions with a system. A use case diagram
shows various use cases and different types of users the system. The use cases are represented
by either circles or ellipses. The actors are often shown as stick figures.

Figure3. 1: Use case diagram for registration and login

Figure3. 2: Use case diagram for Choose the type of account.

11
 Figure3. 3: Use case diagram for the Search for hiking places.

Figure3. 4: Use case diagram for the View descriptive info.

Figure3. 5: Use case diagram for Choose the guide with features.

12
 Figure3. 6: Use case diagram for the View the google map.

Figure3. 7: Use case diagram for the determine guide status.

Figure3. 8: Use case diagram for paying the trip fee & select the guide

13
 .

Figure3. 9: Use case diagram for view the event and trips & appointments.

Figure3. 10: Use case diagram for view the number of seats trips.

Figure3. 11: Use case diagram for view the safety instructions.

14
 Figure3. 12: Use case diagram for modify the profile.

• Use Case Descriptions

Use case for registration and login

Actor user
Description The application allows users to register by entering a username, password,
email, and confirmation from email. It also allows the user to log into the
application using the username and password to use the services.

Data username, password, email, and confirmation from email

Pre-condition non
Output The system stores user data in the database, and can enable application
services after registration

Table 3. 1: Use case Description for registration and login.

Use case for Choose the type of account.

Actor user
Description The application allows users to choose the type of account, whether it
is personal or trips.

Data personal or trips.

Pre-condition non
Output After selecting the type of account, services based on the type appear for it.

Table 3. 2: Use case Description for Choose the type of account.

15
 Use case for the Search for hiking places
Actor user
Description The application allows the user to search for the lowest and highest
price
Data Search feature write the name of the place
Pre-condition non
Output The application shows the user to search for the lowest and highest to him

Table 3. 3: Use case Description for the Search for hiking places.

Use case for the View descriptive info

Actor user
Description The application allows the user to search for information describing
the hiking location, including pictures and mentioning the
requirements according to the location, the difficulty or ease of the
location, and the people's evaluation of this place.

Data information describing the hiking location, including pictures, the

difficulty or ease of the location.
Pre-condition non
Output The user is shown to search for information describing the picnic site,
including photos

Table 3. 4: Use case Description for the View descriptive info

Use case for the Choose the guide with features

Actor user
Description The application allows the user to choose the appropriate guide for
him on the trip and determine the appropriate date for him and
determine the number of people
Data choose the appropriate guide, determine the appropriate date and number of
people
Pre-condition non
Output It appears in the system for the user to choose the appropriate guide for him
in the trip and to specify the appropriate date

Table 3. 5: Use case Description for the Choose the guide with features

16
 Use case for the View the google map
Actor user
Description The application allows the user to have the Google Maps feature of
the hiking location.

Data Google Map

Pre-condition non
Output Google Map appears to the user

Table 3. 6: Use case Description for the View the google map.

Use case for the determine trip pricing

Actor guide
Description The application allows the guide to change the status for the
customer.

Data Change status of the trip to the customer.

Pre-condition non
Output See the status of the trip for the customer.

Table 3. 7: Use case diagram for the determine guide status.

Use case for paying the trip fee & chat with guide
Actor customer
Description The application allows the customer to pay the trip fee and select
specific guide
Data pay the trip fee, select a guide
Pre-condition non
Output The user can pay the trip fees and select the guide

Table 3. 8: Use case Description for paying the trip fee & select the guide.

Use case for view the event and trips & appointments
Actor user
Description The application allows the user to see events and trips & .schedule
appointments.

Data see events and trips & .schedule appointments.

Pre-condition non
Output The user can see events and trips & .schedule appointments.

Table 3. 9: Use case Description for view the event and trips & appointments

17
 Use case for view the number of seats trips.
Actor user
Description The application allows the user to see the number of seats of the trip.

Data number of seats of the trip

Pre-condition non
Output The user can see the number of seats of the trip.

Table 3. 10: Use case Description for view the number of seats trips

Use case for view the safety instructions

Actor user
Description The application allows the user to see safety instructions.

Data safety instructions

Pre-condition non
Output The user can see safety instructions.

Table 3. 11: Use case Description for view the safety instructions.

Use case for modify the profile

Actor user
Description The application allows the user to modify the profile.
Data username, password, email, Phone number, ID
Pre-condition non
Output The user can modify the profile

Table 3. 12: Use case Description for modify the profile.

18
3.2.2.2 DFD Diagram
A data flow diagram (DFD) maps out the flow of information for any process or system. It
uses defined symbols like rectangles, circles and arrows, plus short text labels, to show data
inputs, outputs, storage points and the routes between each destination. Data flowcharts
can range from simple, even hand-drawn process overviews, to in-depth, multi-level DFDs
that dig progressively deeper into how the data is handled. They can be used to analyse an
existing system or model a new one.

Figure3. 13: DFD diagram for Yalla Hiking App.

3.2.3 User Classes and Characteristics

The categories of users for the Yalla Hiking application are:
• Customer: uses the application and benefits from the services available to it
• Guide: The application is used based on the services allowed to it.
• Technical Support Administrator: Fixes technical problems of the application and
is responsible for technical changes.

3.2.4 Operating Environment

The application environment supports Android operating systems, and the flutter framework,
Dart programming language, and a database will be used SQL Server.

19
3.2.5 Design and Implementation Constraints
The application will support Android operating systems because we will use the Dart
language and the Flutter framework. The Internet must not be provided to obtain
application services, and technical support must be provided to fix any defect that occurs in
the future, to improve the interfaces and user experience.

3.2.6 User Documentation

To take instructions Once the internet is available, the user can download the application
from the application store and use it, and it is possible to advertise and explain its use.

3.2.7 Assumptions and Dependencies

The application must be connected to the Internet for the application to run and work on it.
Also, the user must know how to use the application to benefit from its use.

3.2.8 BPMN diagram

Business Process Modelling Notation (BPMN) is a method for outlining a business process.
Project managers and business analysts use it to visualize how a process works, what’s
included in that process, and what the outcome should be. A BPMN diagram is a visual
representation of this process.

Figure3. 14: BPMN diagram for Yalla Hiking App.

20
3.3 External Interface Requirements
3.3.1 User Interfaces

Figure3. 15: UI for Login

Figure3. 16: UI for Sign up & choose type account.

21
Figure3. 17: UI for opt Email& Successful created account.

22
 Figure3. 18: UI for choose guide in the trip.

Figure3. 19: UI for event and google map & Reviews.

23
Figure3. 20: UI descriptive information for hiking place, the difficulty of the Place.

Figure3. 21: UI home page for hiking place.

24
Figure3. 22: UI for payment and message with guide & Edit profile.

Figure3. 23: Weather Api page

25
 Figure3. 24: Reviews page

Figure3. 25: User trip status page

26
 Figure3. 26: Trip receipt page

Figure3. 27: Safety instructions page

27
Figure3. 28: About us page

Figure3. 29: Contact us page.

28
Figure3. 30: Confirmation for booked trip.

Figure3. 31: Edit user profile.

29
 Figure3. 32: Route map

3.3.2 Hardware Interfaces

We mentioned earlier that the application supports the operation of Android, updates to the
latest versions, Wi-Fi network, GPS system, six-core processor, and storage capacity from 64
to 256.

3.3.3 Software Interfaces

the application supports the operation of Android, update to the latest versions, flutter, Dart,
SQL Server were used as an environment to build the platform.

3.3.4 Communications Interfaces

The application will be connected to the Internet through Wi-Fi, and the database will be
connected to store and fetch data for the application, as well as the HTTP protocol to transfer
data between the server and the client, where communication takes place between them
through request and response,

30
3.4 System Features

3.4.1 Register / Login

a. Description and Priority

The application allows users to register by entering a username, password, email, mobile number,
national ID, and confirmation from email. This process has a high priority. It also allows the user to
log into the application using the username and password to use the services.

b. Stimulus/Response Sequences
stimulus: Make the user access the services after registration.
Response: Save user data in the database and display services.

c. Functional Requirements

REQ-1: The application allows the user to register .

REQ-2: The application allows the user to check the e-mail.

3.4.2 choose a personal account or trips.

a. Description and Priority

The application allows users to choose the type of account, whether it is personal or guide.

b. Stimulus/Response Sequences
stimulus: Make the user get the services of a personal account or account trips.

Response: The response of the data in the application to the account type.

c. Functional Requirements

REQ-1: The app allows the user to choose the account type.
REQ-2: The application allows the user to access account services.

31
3.4.3 provide the hiking spots from lowest to highest price.

a. Description and Priority

The application allows the user to sort from lowest to highest price.

b. Stimulus/Response Sequences
stimulus: The application allows the user to find the lowest to highest price.
Response: The application allows the user to display from lowest to highest price.

c. Functional Requirements
REQ-1: The application allows the user to search for lowest to highest price.

3.4.4 View descriptive information.

a. Description and Priority

The application allows the user to search for information describing the hiking location,
including pictures, and mentioning the requirements according to the location, the difficulty
or ease of the location, and the people's evaluation of this place.

b. Stimulus/Response Sequences
stimulus: The application allows the user to search for information describing the hiking
location.
Response: The application allows the user to respond and display a search for information
describing the hiking location.

c. Functional Requirements
REQ-1: The application allows the user to search information describing the hiking location .

32
3.4.5 choose the guide.

a. Description and Priority

The application allows the user to choose the appropriate guide for him on the trip and
determine the appropriate date.

b. Stimulus/Response Sequences
stimulus: The application allows the user to choose the appropriate guide for him in the trip
with the advantages.
Response: The application allows the user to respond and choose the appropriate guide for
him in the trip with the features mentioned earlier.

c. Functional Requirements
REQ-1: The application allows the user to choose the guide and set a date.

3.4.6 the Google Map feature of the hiking location.

a. Description and Priority

The application allows the user to have the Google Maps feature of the hiking location.

b. Stimulus/Response Sequences
stimulus: The application allows the user to use Google Maps.
Response: The app allows user response to use Google Maps.

c. Functional Requirements
REQ-1: The application allows the user to use Google Maps to show the location of the trip.

33
3.4.7 pay fee.

a. Description and Priority

The application allows the customer to pay the trip fee.

b. Stimulus/Response Sequences
stimulus: The application allows the customer to pay fees.
Response: The application allows the response to pay fees.

c. Functional Requirements
REQ-1: The application allows the user to pay the trip fees.

3.4.8 view events and trips & schedule appointments

a. Description and Priority

The application allows the user to see events and trips & .schedule appointments.

b. Stimulus/Response Sequences
stimulus: The application allows the user to request to see events, trips, and schedule
appointments.
Response: The application allows the responding user to see events, trips and schedule
appointments.

c. Functional Requirements
REQ-1: The application allows the user to view events, trips and schedule appointments .

34
3.4.9 View the number of seats available.

a. Description and Priority

The application allows the user to see the number of seats of the trip.

b. Stimulus/Response Sequences
stimulus: The application allows the user to request to see the number of seats of a trip.
Response: The application allows the responding user to see the number of seats of a trip.

c. Functional Requirements
REQ-1: The application allows the user to see the number of seats for the hiking trip.

3.4.10 View the safety instructions page.

a. Description and Priority

The application allows the user to see safety instructions.

b. Stimulus/Response Sequences
stimulus: The application allows the user to request to see safety instructions.
Response: The application allows the user to appear a safety instructions page.

c. Functional Requirements
REQ-1: The application allows the user to see the safety instructions page.

35
3.4.11 edit profile and view past trips and places with their ratings.

a. Description and Priority

The application allows the user to modify the profile.

b. Stimulus/Response Sequences
stimulus: The application allows the user to request a profile modification.
Response: The application allows the user to responsively modify the profile.

c. Functional Requirements
REQ-1: The application allows the user to modify the profile.
REQ-2: The application allows the user to view previous trips and ratings.

3.5 Other Non-functional Requirements

NFRs are a set of specifications that describe the system’s operation capabilities and
constraints and attempt to improve its functionality. These are basically the requirements that
outline how well it will operate including things like speed, security, reliability, and data
integrity.

• Performance.
Performance defines how fast a software system.
The landing page supporting 3,000 users per hour must provide 4 seconds or response time,
including the rendering of text and images.

• scalability.
Horizontal scaling is provided by adding more machines to the pool of servers.
Vertical scaling is achieved by adding more CPU and RAM to the existing machines.
The system must be scalable enough to support 1,000,000 visits at the same time while
maintaining optimal performance.
• Portability.
it establishes how well actions performed via one platform are run on another. Also, it
prescribes how well system elements may be accessed and may interact from two different
environments.

36
 • compatibility.
Compatibility, system can coexist with another system in the same environment.
• Reliability.
The system must perform without failure in 95 percent of use cases during a month.
• Maintainability.
the time required for a solution or its component to be fixed, changed to increase performance
or other qualities, or adapted to a changing environment.
The mean time to restore the system (MTTRS) following a system failure must not be greater
than 10 minutes. MTTRS includes all corrective maintenance time and delay time.

• Availability.
the system is accessible to a user at a given point in time.
must be available to user’s 99.98 percent of the time every month during hours.
• Security.
Payment must be processed by the Yalla Hiking team.
• Usability.
he errors rate of users submitting their payment details at the checkout page mustn’t exceed
10 percent.

3.6 Performance Requirements

The performance of the application depends on the adoption of the previously mentioned
system requirements and the speed of the Internet.

3.7 Safety Requirements

We will execute the fundamental policy of “Quality First” in our products and services by
prioritizing security and safety over other business functions such as planning, R&D,
production, sales, maintenance, and disposal.
And to ensure user safety, we will provide to our customers plain and clear instructions and
warnings. We will also make available safety training and guidelines to encourage proper
use of our products and services.

3.8 Security Requirements

37
We will comply with all applicable laws, regulations, and standards relating to the quality
and safety of products and services in the countries or regions in which they are sold and
used. And to fulfil our responsibilities to all stakeholders, we will appropriately manage
personal information, company information and information supplied from business
associates.

3.9 Software Quality Attributes

Flexibility in using the application and ease of use, and the speed of repairing any technical
defect, and updating to the latest versions.

3.10 Business Rules

• Customer: uses the application and benefits from the services available to it such as
registration, determining the type of account, purchasing a guide, and choosing a
place.
• Guide: The application is used based on the services allowed to accept or reject trips
and accepted by the customer.
• Technical Support Administrator: Fixes technical problems of the application and is
responsible for technical changes.

38
 CHAPTER 4
SOFTWARE DESIGN

4.1 Design Overview

4.1.1 Introduction
In this chapter, the software design phase will be clarified, including System Architecture,
Constraints and Assumptions, Interfaces and Data Stores, Structural Design (Class &
Sequence and ERD Diagrams).

4.1.2 Environment Overview

The system environment of this project is a mobile application in which the project services
are available, running on two systems, Android.

4.1.3 Constraints and Assumptions

The Constraints of the system have been mentioned in another way in Chapter 3, but we will
mention it as an illustrative and concise way:

• Supports Android System

• You can choose the type of account.
• Hiking locations can appear from the lowest in price to the highest.
• You can choose the guide.
• See google map.
• Scheduling appointments
• The number of trips seats

39
 4.2 Interfaces and Data Stores
4.2.1 System Interfaces
This point is mentioned in 3.3 External Interface Requirements, you can refer to it .

4.2.2 Data Stores

Serial Field name data type constraint description

Number
1 user_id INT PRIMARY KEY, Unique ID for each
user
2 Name NVARCHAR (MAX) NOT NULL The username for each
user
3 password NVARCHAR (MAX) NOT NULL The hashed password
for each user
4 Email NVARCHAR (MAX) NOT NULL, The email address for
UNIQUE each user
5 AccountType INT NOT NULL Indicates whether the
user has a personal or
trip account
6 MobileNumber NVARCHAR (MAX) NOT NULL The Mobile number for
each user

Table 4. 1: Users table Data Dictionary

Serial Field name data type constraint description

Number
1 guide_id INT PRIMARY Unique ID for each
KEY guide
2 User Id INT Foreign KEY relationship with the
User table
3 name NVARCHAR (MAX) NOT NULL The name of the guide
4 City NVARCHAR (MAX) NOT NULL The city information for
the guide
5 country NVARCHAR (MAX) NOT NULL The country information
for the guide
6 GuideDescription NVARCHAR (MAX) NOT NULL The information for the
guide
7 Image IMAGE NOT NULL The image of guide
8 CreatedON DATETIME NOT NULL Guide Account created
by date
9 CreatedBy NVARCHAR (MAX) NOT NULL Guide Account created
10 IsActive BIT NOT NULL Account is active true or
false

Table 4. 2: guides table Data Dictionary

40
 Serial Field name data type constraint description
Number
1 trip_id INT PRIMARY KEY Unique ID for each trip
2 Title NVARCHAR (MAX) NOT NULL Unique Title for each trip
3 HikingLevelId INT FOREIGN KEY References the Hiking
level Id The hiking levels
are:
Easy, Medium, or
Difficult in column in the
Hiking level table
4 destination Id INT FOREIGN KEY References the
Destination Id – column
in the Destination table
5 DAYS INT NOT NULL The days of the trip

5 TripToDate DATETIME NOT NULL The date to the trip

6 TripFromDate DATETIME NOT NULL The date from the trip
7 trip_time TIME NOT NULL The time of the trip
9 price FLOAT NOT NULL The price of the trip
10 MaxGourpSize INT NOT NULL The maximum number of
people in the trip
11 Facilities NVARCHAR (MAX) NOT NULL The facilities of the trip
12 Routeimage NVARCHAR (150) NOT NULL The image of the trip

Table 4. 3: trips table Data Dictionary

Serial Field name data type constraint description

Number
1 instruction_id INT PRIMARY KEY Unique ID for each safety
instruction
2 instruction_title NVARCHAR NOT NULL The title of the safety
(MAX) instruction
3 instruction_description NVARCHAR NOT NULL The description of the
(MAX) safety instruction

Table 4. 4: safety instructions table Data Dictionary

41
 Serial Field name data type constraint description
Number
1 ID INT PRIMARY KEY Unique ID for each rating
2 User_id INT FOREIGN KEY References the User_id
column in the User table
3 TravelTripID INT FOREIGN KEY References the
TravelTripeISD column in
the Travel Trip table
4 Rating INT NULL The rating value provided by
the user
5 Comment NVARCHAR NULL The user's review of the
(MAX) guide or trips
6 GiveON DATETIME NULL The rating given by the user

Table 4. 5: Reviews table Data Dictionary

Serial Field name data type constraint description

Number
1 Id INT PRIMARY KEY Unique ID for each
Destination
2 DestinationCity NVARCHAR NOT NULL The Destination city to the
(150) trip
3 Country NVARCHAR NOT NULL The Country of the trip
(150)
4 Latitude NVARCHAR NOT NULL The Latitude of the trip
(50)
5 Longitude NVARCHAR NOT NULL The Longitude of the trip
(50)
6 Description NVARCHAR NOT NULL The Description from the trip
(MAX)
7 CreatedON DATETIME NOT NULL The time of created the trip
8 CreatedBy NVARCHAR NOT NULL The created the trip
(MAX)
9 UpdateON DATETIME NULL The time of update the trip
10 UpdateBy NVARCHAR NULL The of update the trip
(MAX)

Table 4. 6: Destination table Data Dictionary

42
 Serial Field name data type constraint description
Number
1 Id INT PRIMARY KEY Unique ID for each Account
2 AccountType NVARCHAR NOT NULL Indicates whether the user
(MAX) has a personal or guide or
admin

Table 4. 7: Account table Data Dictionary

Serial Field name data type constraint description

Number
1 Id INT PRIMARY KEY Unique ID for each Status
2 StatusName NVARCHAR NOT NULL The status of the hiking
(50) booking

Table 4. 8: Status table Data Dictionary

Serial Field name data type constraint description

Number
1 Id INT PRIMARY KEY Unique ID for each
HikingLevel
2 HikingLevel NVARCHAR NOT NULL The Hiking level table is used
(MAX) to dislay the level of hiking.

Table 4. 9: Hiking Level table Data Dictionary

Serial Field name data type constraint description

Number
1 Supplies_id INT PRIMARY KEY Unique ID for each
HikingLevel
2 Title NVARCHAR NULL Title for each supply
(MAX)
3 Description NVARCHAR NULL Description for each supply
(MAX)

Table 4. 10: Supplies table Data Dictionary

43
4.3 Structural Design
4.3.1 Class Diagram

Figure4. 1: Yalla Hiking Class Diagram.

44
4.3.2 Sequence diagram

Figure4. 2: register to the Yalla Hiking sequence.

Figure4. 3: login to the Yalla Hiking sequence.

Figure4. 4: account type of the Yalla Hiking sequence.

45
 Figure4. 5: hiking spots of the Yalla Hiking sequence.

Figure4. 6: View description of the Yalla Hiking sequence.

Figure4. 7: choose the guide of the Yalla Hiking sequence.

46
Figure4. 8: view google map of the Yalla Hiking sequence.

Figure4. 9: determine Change the payment status.

Figure4. 10: pay fee.

47
Figure4. 11: view events & appointments of the Yalla Hiking sequence.

Figure4. 12: view seats of the Yalla Hiking sequence.

Figure4. 13: view instructions of the Yalla Hiking sequence.

48
 Figure4. 14: edit profile & view past trips of the Yalla Hiking sequence.

4.3.3 ERD Diagrams

Figure4. 15: Yalla Hiking ERD.

49
 CHAPTER 5
SYSTEM IMPLEMENTAION & VALIDATION

5.1 Introduction
This chapter provides an overview of application interfaces and the implementation phases.
First, we describe these phases and shows their related snapshots. Secondly, we present the
programs used in these implementation phases works. Third, we finalize this chapter by
providing a description of the testing and verification phase to check if the expected results
match the actual results.

5.2 Snapshots of main execution screens of the application

5.2.1 Login Page
The Login page of the application is the entry point of the application. This login page is
the common user interface component in mobile and software application that requires user
authentication. The primary purpose of the page

Figure5. 1: Login page

50
is to authenticate the user and accordingly identify the type of user as customer or admin or
guide to make the appropriate functionalities and resources available as per their role. This
page requires quit a logic for propagating the flow of application.

• User Interface
The page has different components to make it attractive and at the same time full fill
the functionality of the page.
The top part has welcome area for the user to make it appealing and interesting for the
user to proceed.
• Username/Email Field: Users are required to enter their username or email
address which they used for registering in the application, it serves as their unique
identifier within the system.
• Password Field: Users must enter their password, which is typically kept secret and
used to verify their identity. Passwords are often masked (e.g., shown as asterisks or
dots) to protect them from being seen by others.
• Login Button: Users click this button to submit their login credentials for
verification and access to the application. The login button triggers the authentication
process.
• Forgot Password: Users can click this link to initiate the password recovery process
if they forget their password. It will send an otp to your registered email and after
validation it will allow you to setup your password.
• Sign Up: This link takes users to a registration page where they can create a new
account if they don't have one. If the user is new they can proceed to this page to register
themseleves and start using the application.
• Security and Error Messages: The login page provides feedback to users,
informing them if their login attempt was successful or if there was an error.

API interacts with the SQL

Enter User Server Database to
Triggers Login API
Credentials authenticate the login
credentials provided.

If the response is successful it

will proceed to next page as The API Response
The Authentication
the user role. back to the Mobile
Response is
application in JSON
If the Response is Failed it will generated
format
show the error message

Figure5. 2: API

51
5.2.2 SignUp Page
A signup page in a mobile application is an essential element of the user onboarding process.
It allows users to create a new account and gain access to the app's features and services. The
signup page is a critical touchpoint for new users, and it's essential to make the process as
smooth and user-friendly as possible to encourage registration and user engagement with the
mobile application.

Figure5. 3: SignUp

User Interface
The signup page takes in email and password and then sends an otp to the provided email to
verify, once the otp is verified the user account is created. The registration process involves
sending otp for the purpose to identify the email address is authentic and of the provided user,
also it makes is unique so the is no random registration and makes it confidential for both
application and the customer.

• Email Field: Users are required to enter their email address which is going to be
unique itself. The user must note that an otp will be sent to their provided email address
to verify it’s the.
• Password Field: Users must enter their password, which is typically kept secret and
used to verify their identity. Passwords are often masked (e.g., shown as asterisks or
dots) to protect them from being seen by others.

52
• Confirm Password: A field where users re-enter their password to ensure it was
entered correctly.
• Register Button: Users click this button to submit their registration information and
create an account. Once the button is triggered an otp is sent to the given email.
• Error Messages: If there are issues with the registration data (e.g., email format is
incorrect, passwords don't match, empty required feilds), the app will display clear error
messages to guide users in correcting the problems.
• "Already have an account?" Sign In: This link directs users to the login page
if they already have an account or want to access the app without creating a new one.
• User Experience Design: The signup page features a clean, user-friendly design
with a clear layout. It includes branding elements such as the app's logo and color.

The Api first check if the

Flutter after validating email is unique, then
Enter Email And
the data entered, the smtp server sends
Password
triggers Send Otp Api an email with otp to the
given email

The flutter application The flutter application Once the Otp is sent
maps the json format to then receives the successfully it response
dart class response response in json format with success message

On Success the next

page to enter otp is
displayed

Figure5. 4: Signup Flow

53
5.2.3 Enter opt (Email Verification)
Once the user provides the email address and password for registration the data is then
validated and then an otp is sent to the email address provided for verification. This is an
important step to keep the spam users restricted.

Figure5. 5: EnterOtp

User Interface
It is a simple page to take the otp entered by the user and send ahead to validate the otp.

• Enter Otp : User enters the otp received on their email if provided correctly.
• Error Messages: If the provided otp is incorrect then the user will user will be
diplayed with an error message that the otp is incorrect.
• Success : Once the otp is validated and it is successful the account is created
successfully.

54
5.2.4 Create Guide
Create Guide page is for the guides to register themselves as a guide. This helps their identity
to be offered to the user to prefer them as their guide. This form page has fields needed to be
filled out by guide and register themselves as guide.

Figure5. 6: Create Guide

User Interface
Once the user enters the details mentioned below it then validates the email address and then
sends an otp to the provided email address.

• Email Address: Users provide a valid email address, which serves as their username
for logging in and for account-related communication.
• Full Name: Users provide their first name and last name.
• Mobile Number: Users provide their Mobile number to be contacted.
• City: Users provide their city.
• Country: Users provide their Country.
• Description: Users provide their description, a few lines introducing themselves to
make them appealing for trekkers.

55
• Password: Users create a secure password, often with validation rules (e.g., requiring
a combination of letters, numbers, and special characters).
• Confirm Password: A field for users to re-enter their password to ensure accuracy.

The Api first check if the

Flutter Dart Validates the
email is unique, then the
textfeilds and then
Fill the Data In the form smtp server sends an
triggers send otp to
email with otp to the
email api.
given email

The flutter application The flutter application Once the Otp is sent
maps the json format to then receives the successfully it responds
dart class response response in json format with success message

On Success the next

page to enter otp is
displayed

Figure5. 7: Create Guide Flow

56
5.2.5 Customer Dashboard
This is the dashboard page for a customer, where all the trips available for hiking are listed.
Ther are different elements on the page which provides customer specific details to the
customer to interact.

Figure5. 8: Customer Dashboard

User Interface
The page has design to be appealing to the customer and interactive to engage. The customer
can find all his trips initial and relevant information on this page.

Introduction Section : Introduction section contains a background image representing the

theme of the application that is hinking and the Brand name with a slogan.

Service Icons : The service icons have some services displayed for the user to engage like :
• Guide : To view the list of available guides
• Safety : Safety page displays some important information to adhere and keep in mid
while planning the trekking.

57
Trip Cards : The hiking trip card displays information about the trips the card components
are :
• Initially it has an image of the destination for hiking.
• The next is the name of the hiking trip which is more like a sentence with having a
description of the destination of the hiking trip.
• City and Country information is described below the Hiking trip name.
• Hiking description, a part of the hiking description is provided to have a basic
understanding of the trip and the adventures.
• Ratings of the trip & number of ratings
• Price of the trip, the price is of a trip is one important factor of the trip. Like an
ecommerce application where the product cards display the price of the product as it is
one of the essential of the product.
• View Details button redirects to the trip details page where the user can go through the
details of the trip and book the trip.

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. The bloc triggers the API for fetching the list of available trips from
the SQL Server database.
• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. This is particularly useful when
dealing with dynamic or variable-sized content.
• ServiceIconsView() : This is a custom widget created to display the list of icons.
• TripsCard() : The trips card is a custom widget created to display the contents of
the widget.
• AssetImage() : This is a flutter widget which is used to display static image located
inside the flutter directory.
• Stack() : This is a flutter widget which is used to stack the contents in a page, her we
stack the brand name Yalla Hiking and slogan on top of the image.

58
5.2.6 Hiking Destination Detail

Hiking Destination Detail describes the details of the hiking adventure. The name of the trips,
city, country , reviews are the basic details displayed on the page. The page has different
services for the trip and users to get all the details of the trip .

Figure5. 9: Hiking Details Page

User Interface

The page has design to be appealing to the customer and interactive to engage. The user can
attain all the information of the hiking trip and create a booking of the trip.

Banner Area : Image of the Hiking place

Service Icons : The services have important functionalities for the hiking trip :

• Route : Route Image displaying the path of the trip

• Map : The service opens the google map with the location of the hiking destination.
• Weather : The page displays the weather information of the hiking destination.
• Reviews : Reviews page displays the reviews for the hiking trip.

59
Tab Area : The tab area has 3 different tabs :

• Trip Tab : This tab display common information that is trip days, max group size and
hiking level of the trip.
• About : This tab displays the schedule of the trip, from where at what time the trip starts
and then the next stops and events followed after that.
• Facilities : The tab displays the facilitates provided by in the hiking trip like lunch and
dinner , hotels, taxi service, bus ride or flight tickets , etc.

Price : At the bottom of the page has a fixed bar containing price of the trip

Go With Guide Button : This button allows to make the booking.

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. The bloc triggers the Destination Detail api for fetching the details
of the trips from the SQL Server database.
• Positioned(): The flutter widget is used to position the widgets as we are positioning
the back button and Wishlist icon.
• Image.network( () : This is a flutter widget used to fetch the image using a
network URL. Our images are hosted on the GoDaddy domain and can be fetched via
api.
• FeaturesSquareTile () : The is a custom widget created to display the features or
services in a square tile to be clicked and routed to the respective service.
• TabbarView(): This is a flutter widget used to Create a tabbar view with 3 different
tabs named as Trip, About and Facilities.
• TripBadge() : This is custom widget to create horizontal views for days , max
group size and hiking level.

60
5.2.7 Route Page

This page displays the route image sample from the origin to the destination of the hiking trip.
This can guide the user and have a basic understanding of the trip also the page consists of a
Go to maps button which will lead to the google maps from source to destination of the hiking
path with the mode of walking.

Figure5. 10: Route Page

User Interface
The basic UI consist of an image that is stacked at the base of the page, it is an image of the
route of the Hiking trip from source to destination, also there is a button with go to maps
instruction on clicking the button the user is directed to the google maps with the source to
destination walking path of the hiking trip.

Important Dart Widgets Used in the Page

• Image.network () : This is a flutter widget which is being used to fetch the image
of the route from the server. It is displayed as a of a stack widget.
• Stack() : This is a flutter widget which is used to stack the contents in a page, here
we are stacking the image of the route as the base and then the button and back button
on top of it relatively.

61
The Image displays how the Google maps opens the direction of the origin to destination of
the trip.

Figure5. 11: Route Page

62
5.2.8 Weather Api

This page displays the weather information of the hiking destination. The latitude and longitude
of the destination is received in the trip details API that is passed to the weather API to retrieve
the weather information of the location.
This service will help the user to understand the weather information of the destination and
help him take decision-based weather conditions.
For the weather information we are using https://www.weatherapi.com to fetch the details of
the location. The Json data is mapped to dart class and the details are displayed in an elegant
way on the page.

Figure5. 12: Route Page

User Interface
The page displays all the essential information of weather of the hiking destination, the
information is:
▪ Temperature in degree Celsius
▪ Location name and country
▪ Image of weather and time of day
▪ Date and last updated information

63
 ▪ Wind Speed
▪ Wind Direction
▪ Humidity
▪ Uv Index
▪ AQI
▪ Precipitation
▪ Gust
▪ Pressure

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. The bloc triggers the Weather api for fetching the weather details of
the trips from the latitude and longitude information .

• Positioned(): The flutter widget is used to position the widgets as we are

positioning the back button .

• Image.network( () : This is a flutter widget which is being used to fetch the

image of daytime and weather.

• WeatherBoxes () : The is a custom widget created to display the weather details

of aqi, gust, or services in a square tile to be clicked and routed to the respective
service.

64
5.2.9 Map Route Page
This Service in the destination detail page opens the google maps with the latitude and
longitude of the destination received from the trip detail API. The map opens with the
navigation route to the destination location from the current location of the user.
This service will help the user to check the destination location along with the route.
In service we are using URL Launcher plugin of flutter to open or redirect the URL and
Google Maps plugin of flutter to launch the URL to open the maps

Figure5. 13: Map Route Page

User Interface
The Google Maps Navigation screen appears.
Description: The service is using a function to launch the url for google maps with latitude
and longitude details and specifying the mode as direction.

65
5.2.10 Reviews Page
The reviews page in of the destination detail help user gain the experience other had and users
can read feedback, comments, ratings, or reviews about the trip.

Figure5. 14: Reviews Page

User Interface
The Reviews page has different reviews of the user fetched by from the database. The main
components int ht reviews badge are:
1. Review statement of the user
2. Users name who gave the review
3. Rating of the review out of 5

Important Dart Widgets Used in the Page

• ReviewBadge () : The is a custom widget created to display the review information
of the trip given by a user it has the review text stars and the username who gave the
review

66
5.2.11 Book Hiking Trip

After the user has gone through all the hiking trip details, he can conclude to book the hiking
trip which he is interested in. The Booking process is quite simple and user friendly to make it
easy and convenient for the user to book his trip. This page is a critical part of any travel app
and typically includes various features and elements to facilitate the trip booking process.

The Trip booking involves 3 main steps.

Overview of
1.Fill In the basic Select the
your entered
user information guide
details & confirm

Figure5. 15: Steps for booking a trip

Step 1 : Enter User Details

In the first step of the user booking process the user is required to fill in basic user information
that includes :
▪ Booking Note : It displays the information that the user needs to complete the payment
for the trip within 24 hours.
▪ Full Name as in Govt ID.
▪ Mobile Number
▪ ID Number
▪ Select Trip Date
▪ No of people for the trip
▪ Total amount (automatically calculated.

Important Dart Widgets Used in the Page

• SnackBar () : This is a flutter widget which is being used to send a notification widget
to the user and appears for some time to display the information. Here this is used for
form validation, if the input is empty or invalid it displays the notification message to
user accordingly.

• GlobalKey<FormState>(): The global key is used to to identify a form uniquely and

is a commonly used class for managing and interacting with forms created using the
Form widget. This is important when you have multiple forms on a screen or when you
need to reference a specific form's state. To perform form validation, you need access
to the FormState associated with the Form widget. The GlobalKey<FormState> allows
you to access this form state so that you can trigger validation and error handling for
the form fields.

67
 Figure5. 16: Enter User Detail Page

• Form () : The is a flutter widget used to create and manage a form containing various input
fields, such as text fields, checkboxes, radio buttons, and more. Here we are having textfeilds
and date picker within the form that is being managed by the form.
• InstructionsWidget() : This is a custom widget created to display the instruction in the
page. The instruction of payment to be completed within 24hrs.
• MyTextFieldBookingPage() : This is a custom widget mainly of the textfeild widget of
flutter that is used to decorate and store the infromation of fullname, govt id and mobile number.
• MaterialButton() : This is a flutter widget here this widget is used to show the Date Picker.
It triggers a function of date picker, and a date widget is displayed.

68
5.2.12 Select Guide
In third page the list of guides is displayed from the available options of guide, the user can
select any of the guide by clicking on the guide. Guide selection for the trip is important as it
can help you to explore the unknown area and in hiking trips, he can help you be careful and
aware the any wrong path or decision which can lead to getting yourself injured.

Figure5. 17: Select guide page

User Interface
For the user interface it can be seen basically there are guide cards which display the guide
infromation with image name and country. Also, there is a green outline on the cards which
shows your selection and a button at the bottom of the page that is fixed. Once the user hade
made the selection, he can click on confirm and proceed to next page. If the user clicks the
bottom without making the selection a snack bar will appear showing the message that selecting
guide is important.

69
Important Dart Widgets Used in the Page
• BLOC Implementation : As already mentioned above the app is using bloc for sate
management. The bloc triggers the API to fetch the list of guides for the page, the
response is received in Json format, and it is then mapped to a dart class mainly as a list
of the object type, then it is displayed a list .

• SnackBar () : This is a flutter widget which is being used to send a notification widget
to the user and appears for some time to display the information. Here this is used for
form validation, if the user did nat make any selection it will be displayed.

• SingleChildScrollView(): This single child scroll view makes the content inside the
widget scrollable, it can have only one child widget. This is particularly useful when
dealing with dynamic or variable-sized content. The list of guides fetched from the
json response is desplayed in the form of guide cards that are selectable.

• SelectableCard() : This a custom widget created to display the information of the

guides that are available for selection. It displays the image, name, and country of the
guide.

5.2.13 Confirm Details

Confirm details page is esentially an overview page for the user to overview the details he has
provided and the guide he has selected and once he is confirming of the details of the booking,
he can proceed to click confirm button and create the booking.

Figure5. 18: Confirm detail Page.

70
User Interface
The user interface of the screen for confirm booking has read only a value, where the user can
review all his entered details before proceeding to create the booking.
The contents of the details are :
▪ Full Name
▪ Govt Id
▪ Mobile Number
▪ People Count
▪ Trip Date
▪ Selected Guide Name
▪ Total Amount

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. In this page one of the important API is used to create the booking.
After collecting all the details across the pages, the details are retained and finally on
the confirm page they are send to the API and it is created on the database backend. On
the successful creation of the record a success is responded and a success page in the
flutter app is the triggered.

• TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() functionality
and text field in the center.

• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. The widget is used to make
scrollable display of information for the conformation of user details.

71
5.2.14 User Bookings Page
Once the user has finished booking his hiking trip, the trip shall be created successfully.
Initially once the trip is created the payment status of the trip will be in pending state. The
user can continue to complete the payment via a SADDAD number which he can get in the
User Trip Details page and once received on the admin side he will change the status to
confirmed. Also, if the payment is not completed within 24 hrs the status will turn to expired
by the admin.
The user can navigate to the user booking page and he can view the details of the trip he has
booked. He can go to the details of his booking and start preparing for the trip.

Figure5. 19: User booking Page.

User Interface
The user interface is designed to be elegant and appealing to the user and to display all the
necessary information to the user.

Components of the Page

• Top bar
• Booked Trips Card
The Card displays the information for the booking made by the user. The important
information displayed by the user are:
• Trip Date
• Trips Name
• Trips Location – city & country

72
 • Payment Status
• Booked On
• Total Amount
• No. of People.
• Bottom Navigation

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. The page is interacting with the API user booked trips which fetches
the user trips from the database. The Api fetches the trips for the particulare user, and
all the data is received in json format. The response is then parsed into a dart model
class the model class is made as a list to all the trips of the user.
• TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() functionality
and text field in the center.

• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. The widget is used to make
scrollable display of the list of users booked trips.

• UserTripsCard() : This is a custom widget created to display the user booking

details of the trip. The widget uses multiple flutter widget to create the appealing design.

5.2.15 User Booking Details

The Booking details page is to display all the booking details of the user and at any point of
time the user can visit the booking page and check the details.
The booking details page contains the SADDAD number, this saddad number will be used by
the user to complete the booking. Once the payment is completed and received on the other
end the admin will update the status of the booking to confirmed else if it is not completed
within 24 hours the booking payment status will change to expire.
The user can use the customer support email available on the Contact us page to email and
resolve any query if the user faces any issue.

73
 F

Figure5. 20: User booking detail Page.

User Interface
Booking details page is designed to make all the booking information available to the user in a
convenient way. The page has several components like topbar and the data page.

The Detail of the booking includes:

• Trip Name
• City and Country
• Payment Status with relevant icon /image
• Booking Id – unique booking id to identify the booking information.
• Trip Date
• SADDAD Number
• Guide Name
• Full Name
• Government Id
• Booking Date
• Mobile Number
• No of People
• Total amount

74
Important Dart Widgets Used in the Page
• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. When the page loads the page triggers the API to get the booking
details using th booking id. The data is received in the Json format, where.
• TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() fucntionality
and text field in the center.

• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. The widget is used to make
scrollable display of the details of user booked trips.

• LayoutBuilder() : This is a flutter widget that allows you to obtain information

about the layout constraints that are being applied to its child widget. This can be useful
when you need to customize the size or position of a child widget based on the available
space within the parent widget. In the page the builder is used to create the animated
image of trekker icon going from one point to another.

5.2.16 Side Bar

This page is a side menu which has some basic page routes which user may visit
for their reference.

Figure5. 21: Side bar Page

75
User Interface
The Side Bar has few pages route for the user that are :
▪ Logout
▪ Account
▪ Safety Instructions
▪ About Us
▪ Contact
▪ Help

Important Dart Widgets Used in the Page

• NavigationBars() : This is a custom widget which is designed as horizontal bars containing
the page names and on the right side an arrow .

5.2.17 Safety Instructions

This page is generally for the user awareness and the things, precautions and preplanning
he needs to do before going on the hiking trip.

Figure5. 22: Safety instructions Page

76
Important Dart Widgets Used in the Page
• ListView() : This is a flutter widget that is widely used widget and provides a
scrollable list of child widgets. It allows you to create lists of items, whether they are
text, images, custom widgets, or a combination of various elements.

• SafetyBadge () : This is a custom widget which is designed as horizontal bars

containing the title of the instructions and then the details of the instructions in the form
of points also there a vertical yellow bar to make the list items unique and appealing.

5.2.18 About Us
About us page is a page which describes the ambition of the application and their motive and
how they were established.

Figure5. 23: About us Page

User Interface
The user interface displays the icon of the application and some details about the
application ambition and their vision.

Important Dart Widgets Used in the Page

• ListView() : This is a flutter widget that is widely used widget and provides a
scrollable list of child widgets. It allows you to create lists of items, whether they are
text, images, custom widgets, or a combination of various elements.

77
 • TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() fucntionality
and text field in the center.

5.2.19 Contact Us
The contact us page is a user interface screen or section within the app that provides users
with a way to get in touch with the app's developers, support team, or administrators.

Figure5. 24: Contact Page

User Interface
The user interface displays the icon of the application and some details about the
application ambition and their vision.

Important Dart Widgets Used in the Page

• ListView() : This is a flutter widget that is widely used widget and provides a
scrollable list of child widgets. It allows you to create lists of items, whether they are
text, images, custom widgets, or a combination of various elements.

• TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() fucntionality
and text field in the center.

78
5.2.20 Admin Dashboard
The admin can log from an admin account using admin credentials. Once the admin
successfully logs in on the dashboard page, he can see all the bookings of the users. The
bookings details are visible to the admin.

Figure5. 25: Admin dashboard Page

User Interface
The user interface is designed to make it informative and attractive for the admin to engage
easily and navigate to update the payment status.
Components of the Page

• Top bar
• Booked Trips Card
The Card displays the information for the booking made by the user.
The important information displayed by the user are:
• Trip Date
• Trips Name

79
 • Trips Location – city & country
• Customer Name
• Payment Status
• Booked On
• Total Amount
• No. of People.
• Bottom Navigation

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc for
sate management. The page is interacting with the API user booked trips which fetches
the user trips from the database. The Api fetches the trips for the user and all the data
is received in Json format. The response is then parsed into a dart model class the model
class is made as a list to all the trips of the user.
• TopBar() : This is a custom widget this widget is created to commonly mange the
top bar of most of the pages. This widget has a back button with onPress() fucntionality
and text field in the center.

• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. The widget is used to make
scrollable display of the list of users booked trips.

• UserTripsCardAdmin() : This is a custom widget created to display the user

booking details of the trip. The widget uses multiple flutter widget to create the
appealing design.

80
5.2.21 Admin Booking Details

The booking details page in the admin domain is used to update the payment status of the
booking once the admin has received the payment to the SADDAD number provided to the
user while booking the trip. The admin has information displayed of the trip that is booked by
the user.

Figure5. 26: Admin booking details Page.

User Interface
Booking details page is designed to make all the booking information available to the user in a
convenient way. The page has several components like topbar and the data page.
The Detail of the booking includes:

• Trip Name
• City and Country
• Payment Status with relevant icon /image
• Booking Id – unique booking id to identify the booking information.
• Trip Date
• SADDAD Number
• Guide Name
• Full Name

81
 • Government Id
• Booking Date
• Mobile Number
• No of People
• Total amount
The Bottom Navigation Bar of the Page has dropdown function, the admin can view the list of
status and select. Once the selection is done admin can click on the confirm button to update
the payment status of the booking.

Important Dart Widgets Used in the Page

• BLOC Implementation : As already mentioned above the app is using bloc
for sate management. When the page loads the page triggers the API to get
the booking details using the booking id. The data is received in the Json
format, where.
• TopBar() : This is a custom widget this widget is created to commonly
mange the top bar of most of the pages. This widget has a back button with
onPress() fucntionality and text field in the center.

• SingleChildScrollView(): This single child scroll view makes the content inside
the widget scrollable, it can have only one child widget. The widget is used to make
scrollable display of the details of user booked trips.

• LayoutBuilder() : This is a flutter widget that allows you to obtain information

about the layout constraints that are being applied to its child widget. This can be useful
when you need to customize the size or position of a child widget based on the available
space within the parent widget. In the page the builder is used to create the animated
image of trekker icon going from one point to another.

• DropdownButton() : This is a flutter widget which is a dropdown or pop-up menu

of selectable items. It's a user interface element that allows users to choose an option
from a list of available options.

82
The Dropdown Widget has:
Value: The value property specifies the currently selected item from the list. This is typically
a variable that holds the chosen value.

Items: The items property defines the list of options that the user can select from. Each item
is represented by a DropdownMenuItem widget, which includes a value and a child widget
(typically a Text widget to display the option's label).

onChanged: The onChanged callback function is triggered when the user selects an item
from the dropdown. It provides the selected item's value as an argument and is used to update
the value property.

83
 5.3 Program flows

5.3.1 User SignUp

2.Signup Page
1. Login Page

4. Account Created
Successfully 3. Enter Otp
Send to Email

84
5.3.2 Become A Guide

2.Signup Page
1. Login Page 3.Create Guide
Page

4. Account Created 4. Enter Otp

Successfully
Send to Email

85
5.3.3 User Create Booking

1. Login Page 2. User Dashboard 3. User Destnation 4. Booking Step 1

Page Details

5. Booking Step 2
6. Booking Step 3
7. Trip Booked
Successfully

86
5.3.4 Admin Update Payment Status

1. Login Page 2. Admin

Dashboard

4. Status Updated 3. Admin Booking

Details

87
5.3.5 Forget Password

1. Login Page 2. Enter Email 3. Enter Otp

Sent to Email

5. Password Changed 4. Enter New

Successfully Password

88
5.3.6 User Basic Flow

89
5.3.7 User Basic Flow 2

90
 5.4 Software testing
This section describes the project's validation and testing processes, the validation method, and
the validation results.
Going through a functional check list was part of the validation and testing plan. specifications
and carefully check it.

5.4.1 App application testing:

In this section, we will discuss the performance of the application and make sure that all screens
are running smoothly and meet all the requirements that were mentioned earlier, and also test the
usability of the interfaces by the user easily.

5.5 Test plan

The section is mainly for system testing and unit testing, and it will include the requirements for
the application.
Services to be tested:

1. Functional requirements.
2. The basic functions required by the user.

5.6 Testing type

5.6.1 Unit testing:

The process of independently evaluating program components to ensure the safety of the
program and its work. The source code was divided into components, each of which carried
out its own unique work independently and separately to save time and effort and increase the
efficiency of the program and its job quickly.

5.6.2 System testing

During the program's system test, the application system is thoroughly examined and
validated to make sure it satisfies all requirements and criteria that have been previously
addressed throughout the implementation phase. At this stage, it was established that the
Yalla Hiking application met all the requirements. The team members conducted this test.

91
5.6.3 Usability Testing:
For non-functional, we do usability test to make sure that any user may understand the
program fast and easily while using it. The interfaces were tested at this step to make sure
they were straightforward to use, and all their parts made sense.

5.7 Test Tools:

- Hardware: The software will currently only run on an Android emulator.

-Operating System: Android Test Cases. To ensure our app is functioning as expected, to
ensuring that all app interfaces and its interactions are working as documented above.

component ID Test Steps Test description component Test component

Num result pass/fail
Sign-up Enter Email, The user's info When click on Pass
customer password, should be stored the log-in, the
confirm in the database, user navigated
password. when click on successfully to
/*phone no, ID Register the user the login page
no*/ should be
navigated to the
opt page after
putting opt code
user should be
navigated to the
log-in page
Sign-up Guide Enter Email, The user's info When click on Pass
Full Name, should be stored the log-in, the
Mobile Number, in the database, user navigated
City, Country, when click on successfully to
Description, Register the user the login page
password, should be
confirm navigated to the
password. opt page after
putting opt code
user should be
navigated to the
log-in page

92
Log-in customer Enter email, Log-in should be Log-in done Pass
password to done successfully and
Login to the successfully, the user's
platform. when click on redirected to the
Click on log-in. sign-up the user home page.
should be When click on
navigated to the the sign-up, the
Home-screen user navigated
page successfully to
the Home-screen
page

Log-in Admin Enter email, Log-in should be Log-in done Pass

password to done successfully and
Login to the successfully, the admin
admin page. when click on redirected to the
Click on log-in. log-in the admin user trips page.
should be
navigated to the
user trips-page
Log-in Guide Enter email, Log-in should be Log-in done Pass
password to done successfully and
Login to the successfully, the user's
platform. when click on redirected to the
Click on log-in. sign-up the user home page.
should be When click on
navigated to the the sign-up, the
Home-screen user navigated
page successfully to
the Home-screen
page
Sign-out Click on Sign- Signing out Signing out done Pass
out button should be done successfully, and
successfully the user
redirected to the
welcome-screen
page
successfully
Change payment Click on user The status The status Pass
status (admin) trips to change should be should be
the status to the changed changed on
customer successfully booking page
when click on successfully.
user booking
Booking Trip Users go to the Book the trip Book trips is Pass
Home page, should be done done
Click on the view successfully, successfully, and
details button, when click on the user trip will
Press on GO Nest button the be added to the
With Guide user trip will be book page
button, Enter the added to the
user details, book page

93
 number of
people Click on
the Nest button
to book trip
successfully

OTP Click on Sign up The User The OTP should Pass

button enter user received OTP on be sent to user
information, Email email
redirected to successfully.
OTP page

Weather Click on The User check The weather Pass

Weather button, the weather display
Information successfully successfully.
about the Trip
weather

Map Click on Map Map display The User Pass

button that is should be done transfer to
used to display successfully, Google map
the user's when click on successfully
location on map button the
Google Maps to user should be
the hiking place navigated to the
Google-map
page
Route Click on Route Route display When click on Pass
button that is should be done the route button,
used to display successfully, the user
the user's when click on navigated
location on route button the successfully to
hiking place user should be the trail map
navigated to the page
trail map page successfully.

Safety- Click on Safety- Safety- the Safety- Pass

instructions instructions instructions instructions
button that is should be done button, the user
used to display successfully, navigated
the user's Safety- when click on successfully to
instructions page Safety- the Safety-
instructions instructions
button the user page.
should be
navigated to the
Safety-
instructions page

Table 5. 1: component testing

94
 CHAPTER 6
CONCLUSION & FUTURE WORK

6.1 Conclusion
Recently, the number of hiking enthusiasts has increased, and many of them are looking for
an application that can truly meet their needs. This is where Yalla Hiking steps in to provide a
comprehensive solution. With its user-friendly interface, real-time features, and a focus on
enhancing the hiking experience, Yalla Hiking is poised to become an invaluable companion
for hikers of all levels.
In a world where technology is rapidly evolving, Yalla Hiking embraces the latest
advancements to cater to the growing community of nature lovers. The application not only
helps you plan your routes and navigate the trails with ease but also ensures your safety by
offering critical information such as weather updates and Safety instruction.
Our app has the potential to significantly benefit the local hiking community, in our opinion.
We can contribute to the promotion of hiking as a fulfilling and healthful sport by giving
hikers the knowledge and resources they need to organize and carry out safe and enjoyable
treks, we are thrilled to see how hikers in the area are using our app, and we eagerly await
user comments on how we can make it even better.

6.2 Project achievements

In this project, we created (Yalla hiking), which offers a lovely and distinctive experience in
the area and assists individuals who wish to go on hiking tours, whether alone or with a
leader, separately or in a group.
A list of accomplishments for the current project is as follows:
• We began by looking into the issue (Chapter 1).
• To offer a fresh idea in this area, we studied the relevant literature and applications
(Chapter2).
• We identified the necessary software needs and specified them (Chapter 3).
• In this chapter, we talked about designing the software for the application and took an
overview of the design and several other technical things (Chapter 4).
• We implemented this application to complete the project and highlighted the tools we used
(Chapter 5).
Overall, this accomplishment (the Yalla hiking app) helps those who enjoy walking go on
experiences around natural regions and hiking and connects app users with hiking-related
activities.
We gained a lot of knowledge while working on this project, including new research
techniques for problem-solving and the value of ongoing teamwork. We learnt new

95
programming languages, including Flutter, Dart, and the Firebase web server. Over the
previous four years, we have applied what we have learned in our studies.

6.3 Restrictions
This project has a few flaws despite its successes. Our application is only available in
English, but we hoped to be able to add support for other languages so that it could serve the
entire Middle East and broaden the program's reach.

6.4 Future Work

Numerous topics for additional study and advancement are presented by this project. The
following are some methods to improve the application:

• Add many languages to the system.

• The Yalla hiking app will eventually support and feature other languages thanks to
ongoing development.
• Include numerous payment methods.
• Include a full dialogue system that allows sending and receiving for both parties.
We're also planning to develop a full chat system in the future that will allow for
private communication between guides and clients.
• Including an integrated store to assist clients and guides in purchasing extra
equipment for travel.
• The guide must be able to set a price for a trip for the client.
• The user must pay the guide fee to be transferred to the conversation with the guide.
• Track your activities with GPS.
• Download offline maps ahead of time and track your GPS location, even with no cell
service.
• The guide must be able to set a price for a trip for the client.
• The guide must be able to set a schedule for the trips.
• expected time of arrival and how much time it takes in that place.
• The guide must be able to set a price for a trip for the client.
• Add a paid subscription to watch events.

96
6.5 APPENDICES I
Program Use
Lucidchart BPMN diagram

Visual Paradigm o Use case diagram.

o sequence diagram

Flutter Mobile Development o Android Studio

o Dart SDK
o Flutter SDK
o Android Emulator

API Development o Visual Studio 2022

Database o SQL SERVER 2019

o SSMS – SQL Server Management
Studio

Hosting o Godady (Windows Hosting) for Api &

SQL Server Database
o Godady for domain name

Protopie o Interface design

Table 6. 1: Program and Software

97
6.6 APPENDICES II

98
99
 6.7 REFRENCES
[1] the weather information we are using https://www.weatherapi.com to fetch the details of
the location.
[2] Android Studio IDE and the Yalla Hiking API to develop a mobile application for
downloading and testing the API https://developer.android.com/studio?hl=ar.
[3] We used Visual Studio 2022 to develop the API for my mobile application. We the
ASP.NET Core framework to create a RESTful API https://flutter.dev/.
[4] Godady (Windows Hosting) for Api & SQL Server and domain name
https://ae.godaddy.com/.
[5] SQL Server Management Studio https://www.microsoft.com/en-us/sql-server/sql-server-
downloads.
[6] Hiking Safety instructure https://www.parks.ca.gov/?page_id=30043.
[7] Some of information about hiking sourced from https://en.wikipedia.org/wiki/Hiking.
[8] we used this site to find some places designated for hiking
https://www.alltrails.com/saudi-arabia.

[9] The Grammar of Graphics: Elements of Perception and Communication in Charts and
Graphs by Leland Wilkinson.

[10] The data-encryption https://www.c-sharpcorner.com/article/cryptography-data-

encryption-standard-des/

100