[FINAL YEAR PROJECT-(CS-500)]

AUTO RESCUE (NEAR BY MECHANICS)

SESSION 2018-2019

SUBMITTED BY
“NAMRA NAEEM (15FBSCSM51)”
“ASAD HUSSAIN (15FBSCSM11)”

SUPERVISED BY
“PROF. DR. SYED ASIF ALI”

COURSE COORDINATOR
“DR. KAMLESH KUMAR”

DEPARTMENT OF COMPUTER SCIENCE

SINDH MADRESSATUL ISLAM UNIVERSITY

KARACHI
 DEDICATION

This project is dedicated to our parents, siblings, beloved friends and supportive teachers.
They all had great contribution in the form of motivation, strength, love and resources.

1|Page
 ACKNOWLEDGEMENT

First, thanks to ALLAH Almighty who gave us strength and motivation to complete this project
with our all effort.

After thanking ALLAH almighty, we would like to thank our supervisor Dr. Syed Asif Ali for
giving us valuable guidance and advice in this project titled “AutoResque (near by
mechanics)”. He inspired us greatly to work and his willingness to motivate us contributed
tremendously to our project. We would like to express our deepest appreciation to all those who
provided us the possibility to achieve this goal. He tried his best to provide us best content for
our project documentation.

Our Coordinator Dr. Kamlesh Kumar shared his experience and ideas for selecting our project.
He also guided us about selecting a successful project, how many features should be in the
project, what to add in the project and what should be neglected to be on time, etc.

We would also like to thank our families and friends for their understanding and their support
towards us.

2|Page
Table of content Commented [1]: Correct the format of table of contents
SUBMITTED BY................................................................................................................................ 1
TABLE OF CONTENTS OF FIGURES: ................................................................................................. 6
CHAPTER NO 1: INTRODUCTION ...................................................................................................... 8
1.1. PROJECT BACKGROUND: ....................................................................................................... 8
1.2. ACTORS: .................................................................................................................................... 9
1.3. PROBLEM STATEMENT: ......................................................................................................... 9
1.4. AIMS AND OBJECTIVE: ........................................................................................................... 9
1.5. PROJECT SCOPE: .................................................................................................................... 10
1.6. PROPOSED METHODOLOGY: ............................................................................................... 10
1.7. SUMMARY: ............................................................................................................................. 11
CHAPTER NO 2: LITERATURE REVIEW ......................................................................................... 12
2.1. PROJECT GOAL: ..................................................................................................................... 12
2.2. PROJECT OBJECT: .................................................................................................................. 12
2.3. WHY THIS PROJECT: ............................................................................................................. 12
2.4. TOOLS: ..................................................................................................................................... 13
2.4.1. FOR MOBILE APPLICATION:..................................................................................... 13
2.4.2. FOR WEB APPLICATION: ........................................................................................... 13
2.5. WHY CHOOSE THESE TOOLS:.............................................................................................. 14
2.5.1. REACT JS: .................................................................................................................... 14
2.5.2. MATERIAL UI: ............................................................................................................. 14
2.5.3. BOOTSTRAP: ............................................................................................................... 14
2.5.4. REACT NATIVE: .......................................................................................................... 15
2.5.5. NODE JS: ...................................................................................................................... 15
2.5.6. FIREBASE:.................................................................................................................... 15
2.6. EXISTING DEVELOPED APPLICATIONS FOR ONLINE MECHANICS: ............................. 15
2.6.1. BOOK ONLINE MECHANICS ..................................................................................... 15
2.6.2. AUTOCODE.................................................................................................................. 16
2.7. DISADVANTAGES OF THE SYSTEM:................................................................................... 17
2.8. MAIN FEATURES OF PROPOSED SYSTEM AS COMPARE TO OTHER SYSTEMS: .... 17
2.9. EXPERTISE OF THE TEAM MEMBERS ................................................................................ 17

3|Page
 CHAPTER NO 3: REQUIREMENTS SPECIFICATION AND DESIGN: ........................................ 18
3.1. SOFTWARE ENGINEERING PROCESS MODEL................................................................... 18
3.2. DETAILS OF THEORETICAL MODEL: ................................................................................. 18
3.3. ASSUMPTIONS: ...................................................................................................................... 19
3.4. LIMITATIONS: ........................................................................................................................ 19
3.4.1. LESS PREDICTABILITY.............................................................................................. 19
3.4.2. MORE TIME AND COMMITMENT............................................................................. 19
3.4.3. GREATER DEMANDS ON DEVELOPERS AND CLIENTS ....................................... 20
3.4.4. LACK OF NECESSARY DOCUMENTATION ............................................................. 20
3.4.5. PROJECT EASILY FALLS OFF TRACK ..................................................................... 20
3.5. SYSTEM OVERVIEW:............................................................................................................. 20
3.6. REQUIREMENTS:.................................................................................................................... 20
3.6.1. FUNCTIONAL REQUIREMENTS: ............................................................................... 21
b) CLIENT AUTHENTICATION .............................................................................................. 21
3.6.2. NON-FUNCTIONAL REQUIREMENTS: ..................................................................... 23
b) SCALABILITY ......................................................................................................................... 23
c) EXTENSIBILITY ...................................................................................................................... 23
f) MAINTAINABILITY: .............................................................................................................. 24
3.7. SYSTEM SPECIFICATION: ..................................................................................................... 24
a. PROPOSED SYSTEM:.......................................................................................................... 24
b. SEARCH NEARBY MECHANIC: ........................................................................................ 24
c. REAL TIME LOCATION OF CLIENT AND MECHANIC: ................................................. 24
d. APPROACHING MECHANIC: ............................................................................................. 24
e. INTEGRATED GOOGLE MAPS: ......................................................................................... 24
f. ACCEPT/REJECT PROPOSAL: ........................................................................................... 25
g. AVAILABILITY OF MECHANIC: ....................................................................................... 25
h. ESTIMATED DISTANCE COST: ......................................................................................... 25
i. ESTIMATED TIME TO REACH AT CLIENT’S LOCATION: ............................................. 25
j. TIME SAVING AND EFFORT LESS: .................................................................................. 25
3.8. SYSTEM MODEL: ................................................................................................................... 25
3.9. FUNCTIONAL DECOMPOSITION ..................................................................................... 25
3.11. ............................................................................................................. USE CASE MODELS:
28

4|Page
 3.12. ........................................................................................ WORK BREAK DOWN STRUCTURE
29
4.1. INTRODUCTION: .................................................................................................................... 31
4.2. DESIGN OPTION : ................................................................................................................... 31
a. MOBILE APPLICATION:..................................................................................................... 31
4.3. PHYSICAL REALIZATION: .................................................................................................... 32
4.3.1. HARDWARE AND SOFTWARE DESIGN: .................................................................. 32
4.4. DESIGN ASSESMENT ............................................................................................................. 33
4.5. APPLICATION SCREENS: ...................................................................................................... 34
1. APPLICATION SPALSH SCREEN: ..................................................................................... 34
2. SIGN UP FORM SCREEN: ................................................................................................... 35
3. LOG-IN SCREEN: ................................................................................................................ 36
4. USER MAP SCREEN:........................................................................................................... 37
5. USER DASHBOARD SCREEN: ........................................................................................... 38
6. MECHANIC REQUEST SCREEN: ....................................................................................... 39
7. JOB DONE QR CODE SCANNER: ...................................................................................... 40
8. JOB DONE SCREEN: ........................................................................................................... 41
4.6. MODULES:............................................................................................................................... 42
 Empty .................................................................................................................................... 43
 Login ...................................................................................................................................... 43
 MapScreen............................................................................................................................. 43
 ProfileUpdate......................................................................................................................... 43
 QRscnnaer ............................................................................................................................. 43
 QRcode .................................................................................................................................. 43
 RateOrder .............................................................................................................................. 43
 SignUp ................................................................................................................................... 44
 Verify ..................................................................................................................................... 44
5. CHAPTER NO 5 TESTING AND EVALUTION .......................................................................... 45
5.1. INTRODUCTION ...................................................................................................................... 45
5.2. TESTING: .................................................................................................................................. 45
6.2. TESTING PLAN: ....................................................................................................................... 45
5.3. TESTING ENVIORNMENT: .................................................................................................... 45
5.4. LEVEL OF TESTING: .............................................................................................................. 46
5.4.1. Black Box: ..................................................................................................................... 46

5|Page
 5.4.2. UNIT TESTING:............................................................................................................ 46
5.4.3. INTEGRATION ............................................................................................................. 46
5.4.4. SYSTEM........................................................................................................................ 47
5.5. TESTING TYPES: .................................................................................................................... 47
5.5.1. REGRESSION TESTING .............................................................................................. 47
5.5.2. AUTOMATION ............................................................................................................. 47
5.6. TEST CASES: ........................................................................................................................... 48
6. CHAPTER NO 6 CONCLUSION AND FUTURE WORK ......................................................... 50
6.1. CONCLUSION: ........................................................................................................................ 50
6.2. FUTURE WORK:...................................................................................................................... 50
a. BETTER UI: .......................................................................................................................... 50
b. ERROR AND BUGS FREE APPLICATION: ........................................................................ 50
c. SECURITY CONCERN: ....................................................................................................... 51
d. EFFICIENT FUNCTIONALITY AND STRUCTURE: .......................................................... 51
e. REDUCE APPLICATION SIZE: ........................................................................................... 51
7. CHAPTER NO: REFRENCES................................................................................................... 53
10. CHAPTER 8 CODE .................................................................................................................. 54
a. Empty.js .................................................................................................................................... 54
b. LOGIN.JS:................................................................................................................................. 54
c. Map screen: ............................................................................................................................... 61
d. Profileupdate: ............................................................................................................................ 80
e. QRCode ..................................................................................................................................... 82
f. QRScanner ................................................................................................................................ 85
g. RateOrder .................................................................................................................................. 88
h. signUp ....................................................................................................................................... 90
i. Verify ........................................................................................................................................ 93

TABLE OF CONTENTS OF FIGURES:

FIGURE 1 : METHODOLOGY 11
FIGURE 2: BOOK OLINE MECHANIC 16
FIGURE 3: AUTO CODES 16

6|Page
FIGURE 4 26
FIGURE 5: ERD 28
FIGURE 6: SIGN UP 28
FIGURE 7: CALLING MECHANIC 29
FIGURE 8: WORK BREAKDOWN STRUCTURE 30
FIGURE 9: SPLASH SCREEN 35
FIGURE 10: SIGN UP FORM 36
FIGURE 11: LOGIN SCREEN 37
FIGURE 12: MAP SCREEN 38
FIGURE 13: DASHBOARD 39
FIGURE 14: MECHANIC REQUEST 40
FIGURE 15: QR CODE SCANNER 41
FIGURE 16: JOB DONE SCREEN 42

7|Page
 CHAPTER NO 1: INTRODUCTION

1.1. PROJECT BACKGROUND:

Our focus is to help people who stuck on roads and highways due to vehicle machinery malfunction
by calling automotive mechanic on their location through a mobile application. This operation
would be time saving and effort less for the client. Client can see real time location of mechanic
through phone’s GPS. The mobile application has integrated Google Maps. The GPS system can
give an accuracy of about 10 meters. Phone’s GPS will aid in location of both client and mechanic.
However, our aim is to call mechanic on particular location where the vehicle is stuck to repair it
and make it ready to reach its particular destination. Success of this application may help client to
search nearby mechanic and client’s vehicle to work. This application is useful for both mechanic
and client as mechanic can be registered through admin panel. The mechanic does not necessary
to own any repair shop/work shop, so it is also cost effective for him. Currently, there is no such
mobile application for calling mechanic on the roads and highways but there exists some of the
services who send their registered mechanic on the door step. Sometimes it happens that we got
stuck at any place due to uncertain problem in our vehicle. So, through the help of this android
application if someone is stuck at any place due to un certainty in the car they can easily access
the application by logging in and then providing the information and can contact to nearby
mechanics. With this app, car owners will get help in finding nearest car mechanic and get help in
the emergency breakdown on the road. There are many car service centers and repair shops.
Finding the nearest garage is not easy. The application will help users to call them direct. In which
first the user can first login into the application to find the nearest mechanics. Then user can easily
put their current location and then according to the location the app will suggest you about the
nearest mechanics suitable to your current location. The application will then provide you the
contact number of the mechanics, so you can contact the mechanics easily just like you use the
uber and careem application on your cell phones. Through the help of GPS, we can easily use the
application and can find the nearest car mechanics for repairing. Or in other words we can say that
this app is easy search to find the nearest car mechanics. Like the careem and uber they cost some
limited amount for the service this application will also cost some limited amount for the services.
Before you do book, this app will provide your mechanic's certifications, work history, ratings and
reviews from other customers. On this application the mechanics are available 7 days a week from
7am to 9pm. The user has to simply select a time and provide payment information to book your
service. A credit card is required to book your appointment, but this app won’t bill your card until
the work is done, and of course you can always manage your booking 24/7 from our website or
mobile app. The user can find nearby mechanic from user’s location.

8|Page
 1.2. ACTORS:

There are two types of actuators that are playing a main role in this android application they are as
given below:

1.2.1. MECHANIC:

Mechanic sign up this app and application enables his phone’s location.

1.2.2. USER:

User sign up this app and app enable his phone’s location, user find nearby mechanic from his location,
after clicking the pinned location of mechanic, the availability will be shown, if the mechanic accepts the
request, details will be shown (average time to reach & distance) to the client.

1.3. PROBLEM STATEMENT:

Usually the main problem which people face is to deal with the malfunction of vehicles who are
usually stuck in the main roads & highways, which are very problematic for the drivers,& family
members so To deal with this problem by finding nearby mechanic through the online mechanic
application, which can be some relief for those drivers who are daily used to stuck at somewhere
on the main roads & highways with family. It will be very useful for them.
Auto rescue app is a Chains and small, medium and large vehicle repair. It facilitates online
mechanic booking for any vehicles anytime from anywhere. Auto mobile app helps your customers
to book a full auto service or repair by finding nearest car mechanics with just in 2 minutes. This
will also help the users in the emergency breakdown on the road. According to your need you can
select a most experienced mechanic for the repairing of your vehicle.

1.4. AIMS AND OBJECTIVE:

The main objective is the malfunction of vehicles by finding nearby mechanic using mobile
application. On the other hand, the users can easily track their appointments and booking any time
any where they want. The foremost objective is that this application will save your time and money
as well. This app will provide the services to all kind of the vehicles. Through this application the
customer relationships will also increased. It will provide the mobile payment gateway means this
app will charge the cost according to the mobile indications what amount it will show as careem
and uber do. This application will show nearest mechanics list name along with their details you

9|Page
can select suitable one according to your choice and will also show about the previous appointment
and your current one also. This app is very easy to use that can enable the user to login into the
application and then search the mechanics and then contact to the available mechanics.
Following are some main objectives of the projects are as under:
 To provide service to needy people
 To save people time and money
 To provide them best service in less cost
 To repair all kind of (small/huge) vehicles
 To provide you the best and experienced mechanics

1.5. PROJECT SCOPE:

Karachi is one of the cities where the traffic road always remains very heavy where one of the most
important things for the people for their business running or for their private use. So making an auto rescue
service software for your auto service will help you to save your valuable time and to make more income
because you can easily signup into the website and in a very few second you can search the mechanics and
contact them. It will also streamline your mechanic workshop business with San Auto Repair Shop
Management System, Auto connect.
Auto rescue app will develop and help needy people to search a mechanic onGoogle maps for their vehicles
to be repaired. Further, we will register and spread our working areas that increase the area coverage which
makes our App more helpful.

1.6. PROPOSED METHODOLOGY:

The project aims is to develop an android app for finding near by mechanics for vehicles. First off all
the user will sign up this app and app request to enable his phone’s location, find nearby mechanic from his
location using maps, after clicking the pinned location of mechanic, the availability will be shown, if the
mechanic accepts the request, details will be shown (average time to reach & distance) to the client.
Step 1: signup the application means in this step the user fill first come into the environment of the website
and for the further proceeding user first have to sign up into the website by providing their email id and
password.
Step 2: add your phone location means in this step after logging into the website so that you can search and
find the mechanics according to tour current location.
Step 3: find/search nearby mechanics means after adding your current location you have to search for the
mechanics and you have to add your vehicle problem so then according to your location the mechanics
availability list will be displayed so that you can choose the experienced one according to your choice.

10 | P a g e
Step 4: see the availability of the mechanics means once you got the list of the mechanics that are available
at that time now its up to the client that which mechanic they choose and client can also choose the mechanic
by viewing their experience and pervious profile.
Step 5: wait until the mechanics accepts your request means once the client select the particular mechanics
for the vehicle repair the client have to wait for a while until the mechanics accepts your request.
Step 6: details of mechanics will be displayed on the screen along with services charges and average time
the mechanics will take to reach your location and you can also call to the mechanic and can contact to him
as show in the given below figure 1.

SIGN-UP

ADD CURRENT
LOCATION

SEARCH NEAR
BY MECHANICS

WAIT FOR ACCEPTANCE

OF REQUEST

SEE LIST
AVAILIBILITY

CALL TO
MECHANIC

Figure 1 : Methodology

1.7. SUMMARY:

In this chapter we have discussed about the introduction and background of our project its scope
and problem statement. Here we have also defined the aims and objectives and what are goals of
our project. No, the next chapter is based on the literature review of the android application.the
other given below chapter contain different parts like analysis, soecifications, requirements of the
system, testing strategies, design, process model and different modules of the application.

11 | P a g e
 CHAPTER NO 2: LITERATURE REVIEW

The literature review is a written overview of major writings and other sources on a selected topic. Sources
covered in the review may include scholarly journal articles, books, government reports, Web sites, etc.
The literature review provides a description and comparison with each website. It is usually presented as a
distinct section of a graduate thesis or dissertation. In this chapter we will discuss previous work related to
our project. In this chapter we will discuss some websites or projects that are related to our project.

2.1. PROJECT GOAL:

Our project is divided into the following modules:

 Admin Panel for Mechanic Registration Process
 Mobile Application for Client/Mechanic
The goal of this project is to develop an application which is integrated with google maps will be
accessible to public. It will be great help for those vehicle owners who are stuck on the road. They
would call the mechanic rather than finding car lifter. With the help of this application, there would
be no communication gap between client and mechanic. Client can directly contact with mechanic
so that mechanic can reach to client’s location.

2.2. PROJECT OBJECT:

 To help public who stuck on roads and highway with their malfunctioned cars.
 To find nearby mechanic through mobile application.
 It offers real time location of both client and mechanic so that client can search nearby
mechanic and mechanic can reach that particular location.
 To register mechanic through a proper admin panel over web application and a mobile
application for searching the mechanic and reaching to client’s location.

2.3. WHY THIS PROJECT:

 There is no such mobile application from which we can find nearby mechanic on the go.
 Public who owns vehicles will facilitate through this application
 Mechanic do not require to have a work shop to do work on vehicle.

12 | P a g e
 2.4. TOOLS:

We are using here tools for our application that are categorized on the basis of mobile applicants and for
the web applications. They are as discussed below:

2.4.1. FOR MOBILE APPLICATION:

WEBSTORM IDE:

Web Storm is a powerful IDE for modern development. Web Storm provides full support for
JavaScript, Typescript, HTML, and CSS.Frameworks such as React, Angular, and Vue.js right out
of the box. No additional plugins are required. Besides client-side applications, Web Storm helps
to develop server-side applications with Node.js, mobile apps with React Native or Cordova, and
desktop apps with Electron.

GOOGLE MAPS API:

Build customized, agile experiences that bring the real world to your users with static and dynamic
maps. Street View imagery, and 360° views. Features included: Maps, Street View. The API
automatically handles access to Google Maps servers, data downloading, map display, and
response to map gestures. Google Direction API (Routes):
Give your users the best way to get from A to Z with high-quality directions and real-time traffic
updates. Determine the route a vehicle travels to create more precise itineraries. Features included:
Directions, Distance Matrix, Roads.

2.4.2. FOR WEB APPLICATION:

Technologies:

FRONT END FOR WEB APPLICATION:

 Coding: ReactJS
 Designing: Material UI, Bootstrap

13 | P a g e
FRONT END FOR MOBILE APPLICATION:

 Coding: React Native, Redux

 Designing: Native Base

BACK END FOR WEB APPLICATION:

 Coding: NodeJS
 Database: Firebase

BACK END FOR MOBILE APPLICATION:

 Coding: NodeJS
 Database: Firebase

2.5. WHY CHOOSE THESE TOOLS:

2.5.1. REACT JS:

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is
maintained by Facebook and a community of individual developers and companies. React can be
used as a base in the development of single-page or mobile applications. Complex React
applications usually require the use of additional libraries for state management, routing, and
interaction with an API.

2.5.2. MATERIAL UI:

React components that implement Google's Material Design

2.5.3. BOOTSTRAP:

Build responsive, mobile-first projects on the web with the world's most popular front-end
component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
Quickly prototype your ideas or build your entire app with our Sass variables and mixins,
responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery

14 | P a g e
 2.5.4. REACT NATIVE:

React Native is a JavaScript framework for writing real, natively rendering mobile applications for
iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces
Instead of targeting the browser, it targets mobile platforms. In other words: web developers can
now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript
library that we already know and love. Plus, because most of the code to write can be shared
between platforms. React Native makes it easy to simultaneously develop for both Android and
iOS.

2.5.5. NODE JS:

It is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code

outside of a browser. Runtime for easily building fast and scalable network applications. Node.js
uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Perfect for
data-intensive real-time applications that run across distributed devices.Node.js lets developers use
JavaScript to write Command Line tools and for server-side scripting—running scripts server-side
to produce dynamic web page content before the page is sent to the user's web browser.

2.5.6. FIREBASE:

Firebase is a mobile and web application development platform developed by Firebase, Inc.
Firebase provides a real-time database and backend as a service. The service provides application
developers an API that allows application data to be synchronized across clients and stored on
Firebase's cloud.

2.6. EXISTING DEVELOPED APPLICATIONS FOR ONLINE

MECHANICS:

2.6.1. BOOK ONLINE MECHANICS Commented [2]: Figures are not properly cropped and
cite them in paragraph and given figure 2.1 caption

This is the online website that is providing mechanics no matter where you are the user just have
to book the mechanic and he will come to your mentioned location. The additional thing this
website is doing that you can access the maintenance schedule of all your cars, get a fair and
transparent price, book an appointment, make payments, access service history and get
maintenance reminder as shown in figure no 2.

15 | P a g e
 Figure 2: Book Oline Mechanic

2.6.2. AUTOCODE

Figure 3: Auto Codes

16 | P a g e
AutoCodes is a reference tool for mechanics. It lists over 50,000 OBDII(OBD2) codes for a variety of
makes and models. This is useful for those with tools that don't list the whole description of the code. It can
also help you figure out parts and other information. There are even some videos for reference on some of
them. Of course, you need to provide your own OBDII scanner and obtain the codes before this app is
useful. However, it is free with no in-app purchases. It does have ads, but they're not bad.

2.7. DISADVANTAGES OF THE SYSTEM:

 It always needs wifi or data connection to use this android application.

 Result processing takes more time as it is done manually.
 Sometimes it takes few minutes while login in the application.
 If mechanics is far user have to wait until the mechaincs reached.

2.8. MAIN FEATURES OF PROPOSED SYSTEM AS COMPARE TO

OTHER SYSTEMS:

 The all of above applications that are already made don’t have the google map feature while
in our project it contains the google map service through which the user can easily see
where is the mechanic and how much time it takes to reach to the user.
 In the above application they just provide mechanics contact number hile in our application
the whole process is done step step through one-time authentication system as uber and
careem application use.
 In comparison to the other applications the process for contacting the mechanic is very
efficient and less time consuming.
 The application is very much friendly to user and esay to use.
 On comparison to the other application this application doesn’t have the appointment-based
system whenever any user needs any mechanics in near by location the application will
provide mechanics without taking appointment just by adding user current location.

2.9. EXPERTISE OF THE TEAM MEMBERS

We have basic knowledge of HTML, CSS, JavaScript, and Database management and more over
how to run the simple queries on these platforms. We think it will be easy for us to take this topic
and completes with the help of these platforms. We are having more expertise in this so that we
can complete our project.

17 | P a g e
 CHAPTER NO 3: REQUIREMENTS SPECIFICATION AND DESIGN: Commented [3]: Requirements specification and Design
Commented [NN4R3]: We need to write Chapter
number three with it
3.1. SOFTWARE ENGINEERING PROCESS MODEL Commented [NN5R3]:

The Agile methodology for mobile application development seeks to provide an alternative to
traditional methods of project management such as the waterfall methodology. This approach
enables requirements and solutions to evolve through the combined effort of the development team
and the customer.
It promotes adaptive planning, evolutionary development, early delivery and continuous
improvements. This iterative and flexible approach can be used in complex projects where the
customer requirements change frequently.
A big project can be broken down into smaller parts and agile methodology can be applied to each
of these small parts. As this method requires high customer engagement to take in the customer’s
requirements at each step and his feedback after every step into account hence it can be used in
projects where the customer is committing to engage in interactive communication from time to
time.
Now when it comes to understanding the role of agile methodology for mobile application
development then one needs to take into account that the mobile application developers make an
app for a device with small screen, less memory and less processing speed.
Moreover, with the sheer number of mobiles present with different operating systems and different
carriers making a mobile app which is fit on one and all devices becomes quite a difficult task for
the developers. Apart from this the developers also face the issues of Short Software life cycle
development, limited hardware, rapidly changing technology and the changing user demands
according to the changes in technology.
Plus, the developers also need to create an app which can be updated easily, can be downloaded
easily and has an excellent UX design. At the end after seeing all the endless number of
requirements which a mobile app development company has to fulfil in order to build a remarkable
app, the very first question which comes to the mind is that how can the firms then make user
friendly, high quality applications? Well, the answer to this question is – through agile
methodologies for mobile application development.

3.2. DETAILS OF THEORETICAL MODEL:

The Agile SDLC model which includes programming, development and project management
involves breaking down of the software development life cycle into smaller modules. However,
integrating documentation and quality testing is involved at every step.

18 | P a g e
This methodology allows breaking down a large number of requirements into manageable chunks
and thus enables maximum utilization of resources.
Agile software development uses iterative development as a base but it differs from other
traditional software process models as it has more customer-centric viewpoint. Agile process
model uses continuous customer feedback to successively refine and deliver a software system.

3.3. ASSUMPTIONS:

Why Agile is best suitable for mobile applications?

 It follows a combination of iterative and incremental approach where the entire SDLC is
broken into small iterations which helps the project to adapt to changes rapidly.
 It minimizes overall risk.
 It gives importance to Customers and their feedback.
 It believes in self-organizing teams and customer collaboration for developing an amply
satisfied product.
 Numerous cycles of testing and quality assurance increases reliability.

3.4. LIMITATIONS:

3.4.1. LESS PREDICTABILITY

For some software deliverables, developers cannot quantify the full extent of required efforts. This
is especially true in the beginning of the development life cycle on larger products. Teams new to
the agile methodology fear these unknowns.
This fear drives frustration, poor practices, and often poor decisions. The more regimented,
waterfall process makes it easy to quantify the effort, time, and cost of delivering the final product.

3.4.2. MORE TIME AND COMMITMENT

Testers, customers, and developers must constantly interact with each other. This involves
numerous face-to-face conversations, as they are the best form of communication.
All involved in the project must have close cooperation. Daily users need to be available for prompt
testing and sign off on each phase, so developers can mark it off as complete before moving on to
the next feature.

19 | P a g e
This might ensure the product meets user expectations but is onerous and time-consuming. This
demands more time and energy of everyone involved.

3.4.3. GREATER DEMANDS ON DEVELOPERS AND CLIENTS

These principles require close collaboration and extensive user involvement. Though it is an
engaging and rewarding system, it demands a big commitment for the entirety of the project to
ensure success.
Clients must go through training to aid in product development. Any lack of client participation
will impact software quality and success. It also reflects poorly on the development company.

3.4.4. LACK OF NECESSARY DOCUMENTATION

Because requirements for software are clarified just in time for development, documentation is
less detailed.
This means that when new members join the team, they do not know the details about certain
features or how they need to perform. This creates misunderstandings and difficulties.

3.4.5. PROJECT EASILY FALLS OFF TRACK

This method requires very little planning to get started, and assumes the consumer's needs are ever
changing. With so little to go on, you can see how this could limit the agile model.
Then, if a consumer's feedback or communications are not clear, a developer might focus on the
wrong areas of development. It also has the potential for scope creep, and an ever-changing product
becomes an ever-lasting one.

3.5. SYSTEM OVERVIEW:

System overview is based on the requirements of the user and business.

3.6. REQUIREMENTS:

For this project we have two types of requirements:

20 | P a g e
3.6.1. FUNCTIONAL REQUIREMENTS:

Functional requirements specify something the system should do. Typically, functional
requirements will specify a behavior or function.

i. CLIENT ACCOUNT MANAGEMENT:

The client account management comes under the umbrella of the functional requirements of the
applications which contains the information of client’s registration, their authentication, login
procedure.
a) CLIENT REGISTRATION:

The mobile application should allow client to register and create a profile.

b) CLIENT AUTHENTICATION:
When registering, the mobile application should allow client to authenticate using phone number.

c) CLIENT LOGIN:

Client should be able to deactivate their account through mobile application.

Client should be able to log out on mobile application.

ii. CLIENT PROFILE MANAGEMENT:

The client profile management is also working here as the functional requirement and contain all
the information about the client profile, update client profile.

a) PROFILE:

 Profile Picture
 First Name
 Last Name

21 | P a g e
  Email Address
 Mobile Number

b) UPDATE PROFILE:

 Client should be able to edit/delete their profiles.

 Client should be able to can change password.

iii. MECHANIC ACCOUNT MANAGEMENT:

The mechanics account management is also functional requirements and contain all the
information of the mechanics account management like their registration, authentication and login
procedure.

a) MECHANIC REGISTRATION:

This web application should allow admins to register and create a profile of mechanic.

b) MECHANIC AUTHENTICATION:

When registering, the web application should allow mechanic to authenticate using email address.
c) MECHANIC LOGIN:

 Admin should be able to deactivate the mechanic’s account through web application.
 Mechanic should be able to log out from mobile application.
 Mechanic should be able to set the status available or not for work.

iv. MECHANIC PROFILE MANAGEMENT:

This is also a functional requirement of this application and it contain all he information of the
mechanics profile, their profile updation.

a) PROFILE:

22 | P a g e
The following fields should be filled by admin during the registration process of mechanic.
 Profile Picture
 First Name
 Last Name
 National Identity Card Number
 National Identity Card
 Email Address
 Mobile Number
 Documents
 Feedback from client
 Skill Test
 Work Experience on specific car.

b) UPDATE PROFILE:

 Admin should be able to edit/delete mechanic’s profiles.

 Mechanic should be able to change password of their mobile application’s account.

3.6.2.NON-FUNCTIONAL REQUIREMENTS:

The non-functional requirements specify how the system should behave and that it is a constraint
upon the systems behavior. One could also think of non-functional requirements as quality
attributes for of a system.
a) PERFORMANCE:

The system performance should be optimized, and response time is minimized.

b) SCALABILITY:

The system should be scalable; since it is meant to be used by general people.

c) EXTENSIBILITY:

This system should be extensible to allow adding other services in the future, such as to make a
company with the registered mechanics and provide their service through the same application by
adding multiple skills mechanic so they can be available in all areas for example a city, state, or
country.

23 | P a g e
 d) INTEGRATION:

This system should have the ability to extend such as to register mechanics through skill test panel,
adding payment section so if a company use this application, they will be able to hire mechanic
and some percent of the charge, so this can become a business model too.
e) SECURITY:

This system should be secure since only authorized admins have the right to register and
authenticate the mechanic or remove the mechanic if a negative threshold is reached.
f) MAINTAINABILITY:

This system should be easily maintainable to allow for additional upgrades that can be
implemented in the future like using a database that can store big data, like more client’s
information, their locations, mechanic’s skill on every type of vehicle not only car.

3.7. SYSTEM SPECIFICATION:

a. PROPOSED SYSTEM:

We built a solution comprising these core components:

b. SEARCH NEARBY MECHANIC:

Mechanic can be searched through mobile application, by turning on location services of the
mobile phone and internet services.

c. REAL TIME LOCATION OF CLIENT AND MECHANIC:

Real time location of client and mechanic can be seen through google maps.

d. APPROACHING MECHANIC:

Approaching mechanic can be done by sending him “proposal” and some details of malfunctioned
car through phone call.

e. INTEGRATED GOOGLE MAPS:

24 | P a g e
Google Maps are integrated so that client and mechanic can view each other real time locations
and distance between them, time to approach the client’s location and distance cost.

f. ACCEPT/REJECT PROPOSAL:

The mechanic has the right to accept or reject the client’s “proposal”.

g. AVAILABILITY OF MECHANIC:

Mechanic has the option to set his status available or not.

h. ESTIMATED DISTANCE COST:

Mechanic and client both can view estimated distance cost, which is other than the payment of
work by mechanic.

i. ESTIMATED TIME TO REACH AT CLIENT’S LOCATION:

Mechanic and client both can view estimated time to reach at client’s location.

j. TIME SAVING AND EFFORT LESS:

It saves time as well as finding mechanic and contacting him is effort less as it requires just some
easy steps.

3.8. SYSTEM MODEL:

System modeling is the process of developing abstract models of a system, with each model
presenting a different view or perspective of that system.

3.9. FUNCTIONAL DECOMPOSITION Commented [6]: Explain DFD with symbols, its types i.e.
zero, one level

25 | P a g e
 Functional decomposition is the process of resolving functional relationship into its constituent
parts in such a way that the original function can be reconstructed (i.e., recomposed) from those
parts by function composition. This process of decomposition may be undertaken to gain insight
into the identity of the constituent components which may reflect individual physical processes of
interest. Also, functional decomposition may result in a compressed representation of the global
function, a task which is feasible only when the constituent processes possess a certain level
of modularity (i.e., independence or non-interaction).
Our project is based on two types of applications (web-based application and mobile based application).
Web basesd application is totally based on the admin who access the whole process where the main admin
can also assign sub admin. The super admin can register mechanics, show the registered mechanics and
search mechanics. While super admin has the acesss to add/delete the sub-admin. The sub admin can also
register mechanics, show the registered mechanics and search mechanics. The mobile application is based
on mechanics and clients. The mechanics after the login have the acess to approve/reject the request which
mechanic will get from the client, the mechanic can also get the estimate the distance time and can get the
estimate cost of the distance. The client can sign up if they have not created the account by providing their
first name, last name, password, email address, description. And if client have already created the account
then he will directly go to the login page and after login the client will search the near by mechanic on map,
and then contact to the mechanic availabl the client can also get the estimate distance cost and Can also gve
the rating to service of the mechaincs as shown in figure 4 below:

Figure 4: DFD

26 | P a g e
3.10. ENTITY REALTIONSHIP DIAGRAM (ERD):
The figure 3.2. is based on the description of the entity relationship in which we had explained the
whole process and relationship between the entities as user will sign up into the account by
providing their name, email id, password, phone no and NIC and the waits fr the verification for
authentication. The mechanic will sign up by requesting to the admin and providing their personal
information like name, address, email id, password, image, phone number, and NIC and mechanic
type. After providing the required information the user and the mechanic can login into the app.
The user will then find the available mechanic and send request to the mechanic. The mechanic
can accept or decline the request. The mechanic after accepting the request will move toward the
mentioned destination of the user and in the end, mechanic will collect the distance charges and
working charges. As shown in figure no 5 below:

27 | P a g e
 Figure 5: ERD

3.11. USE CASE MODELS: Commented [7]: Before this heading describe the ERD, its
symbols then USE cases

A use case diagram is usually simple. It does not show the detail of the use cases. It only
summarizes some of the relationships between use cases, actors, and systems. It does not show the
order in which steps are performed to achieve the goals of each use case. The given below use case
diagram of the application for sign up system and main system.

Figure 6: Sign Up

28 | P a g e
 Figure 7: Calling Mechanic

3.12. WORK BREAK DOWN STRUCTURE

The WBS is a method for getting a complex, multi-step project done. It's a way to divide and
conquer large projects so you can get things done faster and more efficiently. Work breakdown
structure (or WBS) is a hierarchical tree structure that outlines your project and breaks it down
into smaller, more manageable portions. The given below diagram is describing the work
breakdown structure of the android application

29 | P a g e
 Survey for gathering
useful information

Initilization Documenation

Tool selection

Fesibility

shedule planning
Planning
Resouce Planning
Online Mechanic System

Work Distribution

Client Interface
Design

Mechanic Interface
Designing
Design

DataBase Design

Coding Unit Testing

Implementation
Testing

FYP Documentation

Deployment FYP Presentation

FYP Submission

Figure 8: Work Breakdown Structure

30 | P a g e
 4. CHAPTER NO 4: IMPLEMENTATION

4.1. INTRODUCTION:

The primary technical difference between mobile device operating systems and operating systems
used on laptop and desktop computers is that the mobile operating system is not a true multitasking
system. On mobile devices, only one app can be active at a time.
When another app is started, or the app is interrupted by another app (for example, a phone call),
the app that was running gets put in the background. It remains in the background until the user
specifically accesses it again. If it remains in the background too long, or if available memory gets
too low, the operating system may kill it. This back-and-forth between different states is called the
app’s life cycle.
Mobile user interface (UI) Design is also essential. Mobile UI considers constraints and contexts,
screen, input and mobility as outlines for design. The user is often the focus of interaction with
their device, and the interface entails components of both hardware and software.
User input allows for the users to manipulate a system, and device's output allows the system to
indicate the effects of the users' manipulation. Mobile UI design constraints include limited
attention and form factors, such as a mobile device's screen size for a user's hand.
Mobile UI contexts signal cues from user activity, such as location and scheduling that can be
shown from user interactions within a mobile application. Overall, mobile UI design's goal is
primarily for an understandable, user-friendly interface.
Mobile UIs, or front-ends, rely on mobile back-ends to support access to enterprise systems. The
mobile back-end facilitates data routing, security, authentication, authorization, working off-line,
and service orchestration.

4.2. DESIGN OPTION :

Design is one of the most important aspect of software. The flow between the screens of both
mobile and web application are in linear manner with interacting designs.

a. MOBILE APPLICATION:

 Sign Up
o Mobile Number Authentication

31 | P a g e
 o Code Verification
 Login Screen
 Map to find nearby Mechanic
 Slide panel to settings
o Photo of the client
o Profile Settings
 Update Profile photo
 Update First Name
 Update Last Name
 Update Email Address
 Update Mobile Number
 Change User Type- Mechanic/Client
 Interactive button to Update Record
 For Vehicles Update
 Choose Vehicles of different type
 It is limited to Suzuki, Honda and Toyota
 You can select more than one type as the client can have more than
one car.
 Interactive button to edit vehicles
o Log Out
 An interactive icon that specify client
 Another interaction icon that specify mechanic
 Request pop up on clicking the mechanic.
o That specify, Phone number
o Distance from client
o Reaching time
o An interaction request button
o A pop up for successfully job request
 The mechanic gets the notification for the request
 The mechanic accepts or reject the request
 A pop-up window shows on the client application
 The pop-up contains the accept/rejected message.

4.3. PHYSICAL REALIZATION:

4.3.1. HARDWARE AND SOFTWARE DESIGN:

Design considering device resource constraints such as battery life and memory size. Every design
decision should take into account the memory usage and battery life of mobile devices. With
processors like Snapdragon 800 2.3GHz quad-core and RAM sizes of 2-3 GB already in game,
processor speed and available memory are not of major concerns in mobile application design
today. Battery life is usually the most limiting factor in mobile devices. Backlighting, reading and
writing to memory, wireless connections, network traffic and specialized hardware like GPS

32 | P a g e
(Global Positioning System have an impact on the overall power usage. Although amount of
memory available is not the key constraint, but still the exploitation of memory may lead operating
system to ask your application to shut down or sacrifice cached data, slowing program execution.
Optimize your application to minimize its power and memory footprint while considering
performance during this process. These should be taken into consideration during the design and
development of mobile and web applications.

a. UBIQUITY:

Mobile users must have the ability to receive information and perform Operations in real time,
regardless of location. application can be present in any location or several places simultaneously

b. PERSONALIZATION:

The huge amount of information, services, and applications presented on the internet is of great
importance, but users of mobile devices require different services and applications that should be
personalized according to their preferences.

c. FLEXIBILITY:

Users of mobile devices should be able to engage in activities such as receiving information and
conducting operation with ease.

d. LOCALIZATION:

Mobile users should have access to local information and services. This can be accomplished by
having service providers know the location of mobile users in order to promote their services
directly to their clients in a local environment

4.4. DESIGN ASSESMENT

 Design considering occasionally connected limited-bandwidth scenarios.

Mobile devices are stand-alone devices, this means you will need to account for connection
issues. It is a common case for a mobile application to fall into a case where network
connection is intermittent or not available. Hence it is important to design application
caching, state management and data access mechanisms with intermittent network

33 | P a g e
 connectivity in mind. One very effective approach to handle this case is maintain content
locally (offline mode) with server sync state, then as soon as network connection is
established push local content to the server. Another approach is batch communication for
times of connectivity. Also choose hardware and software protocols based on speed, power
consumption and ‘chattiness’, and not just on ease of programming.
 Design a UI appropriate for mobile devices, taking into account platform constraints.
Mobile devices require a simpler architecture, simpler UI, and other specific design
decisions in order to work within the constraints imposed by the device hardware. Keep
these constraints in mind and design specifically for the device instead of trying to reuse
the architecture or UI from a desktop or Web application. The main constraints are
memory, battery life, ability to adapt to difference screen sizes and orientations, security,
and network bandwidth.
 Design a layered architecture appropriate for mobile devices that improves reuse and
maintainability.
Depending on the application type, multiple layers may be located on the device itself. Use
the concept of layers to maximize separation of concerns, and to improve reuse and
maintainability for your mobile application. However, aim to achieve the smallest footprint
on the device by simplifying your design compared to a desktop or Web application.

4.5. APPLICATION SCREENS:

1. APPLICATION SPALSH SCREEN:

Splash screen is an activity that will show for set time when your app is starting and after set time
period redirect to application main screen. A splash screen is a graphical control
element consisting of a window containing an image, a logo, and the current version of the
software. A splash screen usually appears while app is launching. A splash page is an introduction
page on a website. A splash screen may cover the entire screen or web page; or may simply be a
rectangle near the center of the screen or page. The splash screens of operating systems and some
applications that expect to be run in full screen usually cover the entire screen .

34 | P a g e
 Figure 9: SPLASH SCREEN

2. SIGN UP FORM SCREEN:

User will be able to register using his Name, Email, Age and Sex. On successful registration,
user credentials will be stored on the DB created in our backend server. There will be a link to
Android Login Screen for the already registered user.

35 | P a g e
 Figure 10: SIGN UP FORM

3. LOG-IN SCREEN:

An already registered user can login here. User entered data will be verified against data stored
in backend server before successful login. There will be a link to the android registration form if
the user is not already registered.

36 | P a g e
 Figure 11: LOGIN SCREEN

4. USER MAP SCREEN:

Google Maps is a web mapping service developed by Google. It offers satellite imagery, aerial
photography, street maps, 360° panoramic views of streets (Street View), real-time traffic
conditions, and route planning for traveling by foot, car, bicycle and air (in beta), or public
transportatio

37 | P a g e
 Figure 12: MAP SCREEN

5. USER DASHBOARD SCREEN:

Android dashboard screen is an important element in android apps which provides easy navigation
to prior functionalities of app. The main goal is to achieve dashboard screen layout and provide
navigation to related screens on selecting appropriate icon on the dashboard.

38 | P a g e
 Figure 13: DASHBOARD

6. MECHANIC REQUEST SCREEN:

This screen represents the map screen in which we can see near by mechanics and can send
request to them then if the mechanic accepts the request then job is started.

39 | P a g e
 Figure 14: MECHANIC REQUEST

7. JOB DONE QR CODE SCANNER:

After the completion of job the client application shows a QR scanner screen and mechanic app
shows a QR code on the screen.

40 | P a g e
 Figure 15: QR CODE SCANNER

8. JOB DONE SCREEN:

User scans the QR code from the mechanic screen for completion of job after scanning the code
the total amount will appear on screen of mechanic and user.

41 | P a g e
 Figure 16: JOB DONE SCREEN

4.6. MODULES:

Modules in every project plays a very important role that are used for the description of the
functional areas also contain the small processes or component that describe the functionalities
along with the implementation of those functionalities. Our project is divided into following main
modules:

42 | P a g e
The screen section module is further divided into following nine modules which are given below
as:
 Empty

The coding we have used for the empty screen enables to show the splah screen.

 Login

The coding we have used for the login module enables to represents the login screen to the user.
This module can be placed on any module tab to allow users to log in to the system. LoginModule
describes the interface implemented by authentication technology providers. LoginModules are
plugged in under applications to provide a particular type of authentication.
 MapScreen

The coding we have used for the map screen module enable to represent the google map on the
screen so that user can easily see the mechanic and distance.
 ProfileUpdate

The profile update module coding enable to represent the updation in the profile like this module
will update the client/user image, phone number, email id and password.

 QRscnnaer

The QR scanner module enable the user to give input onto the scanner that will appear on the
screen after the profile update.

 QRcode

The QR code module enable the mechanic to open the QR code on the screen. QR code
(abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-
dimensional barcode).

 RateOrder

This module enable to represent the total rate of the job and charges according to the distance and
time. This module also define the whole flow of the order from starting till ending of the job done.

43 | P a g e
  SignUp

This module will enable to signup the account by filling the different fields like first name, last
name, email id, password and phone number.

 Verify

This module will be used verification for authentication purpose by the help one time password
technique. A one-time password (OTP), also known as one-time pin or dynamic password, is a
password that is valid for only one login session or transaction, on a computer system or other
digital device

44 | P a g e
 5. CHAPTER NO 5 TESTING AND EVALUTION

5.1. INTRODUCTION:
This chapter basically illustrates the or we can say consist on the analysis and design of System
with the additional explanation and knowledge of the Requirement Analysis, Feasibility Study,
Architectural Design which was discussed in previous topics.
Generally, when we talk about the computer programs or bugs will nearly continuously exist in
any program module. But it isn't since of the carelessness or recklessness of software engineer
but since of the complexity. People have as it were restricted capacity to oversee complexity.
This chapter basically covers and examines the arrangement and as well the execution
methodologies.

5.2. TESTING:

The basic purpose of the testing and evaluation is to analyze all the risk management that’s
involved in developing, producing, operating, and sustaining systems and capabilities and to check
that either the project is fulfilling’s the actual requirement or not. In this chapter we are going to
discuss about the testing we had done of our application and type of testing we have applied.

6.2. TESTING PLAN:

A document describing the scope, approach, resources and schedule of intended test activities. It identifies
amongst others test items, the features to be tested, the testing tasks, who will do each task, degree of tester
independence, the test environment, the test design techniques and entry and exit criteria to be used, and
the rationale for their choice,and any risks requiring contingency planning. It is a record of the test planning
process.

5.3. TESTING ENVIORNMENT:

A testing environment is a setup of software and hardware for the testing teams to execute test cases. In
other words, it supports test execution with hardware, software and network configured.

Test bed or test environment is configured as per the need of the Application Under Test. On a few
occasions, test bed could be the combination of the test environment and the test data it operates.

45 | P a g e
Setting up a right test environment ensures software testing success. Any flaws in this process may lead to
extra cost and time to the client.

For the test environment, a key area to set up includes

 System and applications

 Test data
 Database server
 Front-end running environment
 Client operating system
 Browser
 Hardware includes Server Operating system
 Network
 Documentation required like reference documents/configuration guides/installation guides/
user manuals

5.4. LEVEL OF TESTING:

5.4.1. Black Box:

Black Box also known as Behavioral Testing, is a software testing method in which the internal
structure/design/implementation of the item being tested is not known to the tester. These tests can be
functional or non-functional, though usually functional.

5.4.2. UNIT TESTING:

A Unit is a smallest testable portion of system or application which can be compiled, liked, loaded,
and executed. This kind of testing helps to test each module separately.
The aim is to test each part of the software by separating it. It checks that component are fulfilling
functionalities or not. This kind of testing is performed by developers.

5.4.3. INTEGRATION

46 | P a g e
Integration means combining. For Example, In this testing phase, different software modules are combined
and tested as a group to make sure that integrated system is ready for system testing.

Integrating testing checks the data flow from one module to other modules. This kind of testing is performed
by testers.

5.4.4. SYSTEM

System testing is performed on a complete, integrated system. It allows checking system's compliance as
per the requirements. It tests the overall interaction of components. It involves load, performance, reliability
and security testing.

System testing most often the final test to verify that the system meets the specification. It evaluates both
functional and non-functional need for the testing.

5.5. TESTING TYPES:

As testers are aware of the various types of Software Testing such as Functional Testing, Non-
Functional Testing, Automation Testing, Agile Testing, and their sub-types etc.

5.5.1. REGRESSION TESTING

Regression Testing is defined as a type of software testing to confirm that a recent program or code change
has not adversely affected existing features.

Regression Testing is nothing but a full or partial selection of already executed test cases which are re-
executed to ensure existing functionalities work fine.

This testing is done to make sure that new code changes should not have side effects on the existing
functionalities. It ensures that the old code still works once the new code changes are done.

5.5.2. AUTOMATION

Automation Testing means using an automation tool to execute your test case suite.
47 | P a g e
The automation software can also enter test data into the System Under Test, compare expected
and actual results and generate detailed test reports. Test Automation demands considerable
investments of money and resources.

Successive development cycles will require execution of same test suite repeatedly. Using a test
automation tool, it's possible to record this test suite and re-play it as required. Once the test suite
is automated, no human intervention is required. This improved ROI of Test Automation. The goal
of Automation is to reduce the number of test cases to be run manually and not to eliminate Manual
Testing altogether.

Test cases to be automated can be selected using the following criterion to increase the automation
ROI

 High Risk - Business Critical test cases

 Test cases that are repeatedly executed
 Test Cases that are very tedious or difficult to perform manually
 Test Cases which are time-consuming.

5.6. TEST CASES:

TC Scenario to Pre-requisite Steps Expected Results Actual Result

Pass/
ID test Fail
TC1 Open Application Click on the App opens a App opens a Pass
apllication must beapp icon shows slash shows slash
installed screen screen
TC2 User Sign Internet should Click on the Sign up form Sign up form Pass
up be available and user sign up appears appears
location acces link below
login button
TC3 Filling sign Click on sign Fill complete User is registered User is Pass
up details link form and click registered
sign up button
TC4 User login You should a Fill correct User is logged-in User is Pass
registered user creadentials and map screen logged-in and
appears

48 | P a g e
 map screen
appears
TC5 Mechanic User should be Find the Popp up for Popp up for Pass
Search logged-in nearest appers for appers for
mechanic and request request
click on it
TC6 Mechanic User should See mechanic Mechanic Mechanic Pass
Request click on the details and accepts the accepts the
mechanic icon click on the request and job is request and
request button started job is started
TC7 Job Done User should Sfter getting Job will be Job is Pass
request the job done Qr completed, and completed,
mechanic and code shown amount will be and amount is
job is started on the screen visible on the showing on
which will be screen the screen
scanned by
mehcanic

49 | P a g e
 6. CHAPTER NO 6 CONCLUSION AND FUTURE WORK

6.1. CONCLUSION:

Thus, rescue android mobile application is an all in one easy-to use mobile app for your automotive
repair. It is friendly user application that is easy to use. Like considering this mega city Karachi
we have so many areas & long routes in which we are not usually familiar with all the areas &
routes. So, in this kind of situation it can be very dangerous especially in nights, to stuck
somewhere on your vehicles with family & friends at those areas which are unknown.
So online mechanic application can give you some relief to throughout this kind of situation safely
& it can also save some extra money & most important time. It can also use for commercial
transportations as well for the private vehicles. The people can easily solve their car repair problem
by using this android application in a step by step manner.

6.2. FUTURE WORK:

a. BETTER UI:

 Basically, user interface is an android pplication but in future we can also build by using
the (layouts view group objects) and widgets (view objects).
 components like the structured layout, objects and UI controls are provided in Android
Studio which enables user to build a Graphical User Interface (GUI) for their Android app.
 UI modules for special interfaces like dialog box, notifications box, menus etc are also
provide by Android can be also changed and improve.

b. ERROR AND BUGS FREE APPLICATION:

Mobile apps are perceived in various lights depending on how sturdy they appear in front of the
user. What that means is that an app that crashes constantly loses its value, regardless of the quality
of the content inside. That is why developers take extra care to get rid of any problems that might
occur during the app development process. An app that has absolutely no problem whatsoever is
referred to as a bug-free app. But you won’t see any of those any time soon because it is incredibly
hard to provide such a purity percentile with so many variables in play. So, in future we will make
our application so much powerful that will be free from any kind of error or bug.

50 | P a g e
 c. SECURITY CONCERN:

Security is one of the most concerning aspects of app development due to the fact that most of the bugs that
appear are direct results of breaches and issues that occur in this sector. So naturally, developers are extra
careful when dealing with app security, because removing the chances of the app being prone to bugs in
this department can drastically improve the overall product’s stability.

d. EFFICIENT FUNCTIONALITY AND STRUCTURE:

A functional organization structure is a hierarchical organization structure wherein people are

grouped based on their area of specialization. These people are supervised by a functional manager
with expertise in the same field. This expertise helps him to effectively utilize the skills of
employees, which ultimately helps organizations in achieving its business objectives.
People are classified according to the function they perform within the organization in this kind of
organization structure. The organizational chart for a functional organization structure shows the
president, vice president, finance department, sales department, customer service, administration,
etc.
Each department will have a department head who will be responsible for the performance of his
section. This helps the organization control the quality and uniformity of performance.
These various departments are sometimes referred to as “silos.” This means the system is vertical
and disconnected. The communication flows through the department heads to the top management.
Here, all authority (i.e., budget allocation, resource allocation, decision making, etc.) stays with
the functional manager. Usually, the position of the project manager does not exist in this type of
organization structure. Even if this position exists, the role of the project manager will be minimal,
and he will need permission from the functional manager to fulfill his requirements. The project
manager may have the title of a coordinator or an expediter. Similary this whole process will be
implemented in future for this android application to make the application more efficient abd
powerful.

e. REDUCE APPLICATION SIZE:

The easiest way to gain immediate app size savings when publishing to Google Play is by
uploading your app as an Android App Bundle, which is a new upload format that includes all
your app’s compiled code and resources, but defers APK generation and signing to Google Play.
Google Play’s new app serving model, called Dynamic Delivery, then uses your app bundle to
generate and serve optimized APKs for each user’s device configuration, so they download only
the code and resources they need to run your app. You no longer have to build, sign, and manage

51 | P a g e
multiple APKs to support different devices, and users get smaller, more optimized downloads. So
yje google play will compress the size of downloaded file and reduces the size of the application

52 | P a g e
 7. CHAPTER NO: REFRENCES Commented [8]: Just Reference not mention chapter put
it in left indent.
Follow the proper reference format such as [1] Name of the
1. Eric Masiello, January 11, 2017, Mastering React Native, Packt Publishing - ebooks author, title, Published, year, pp 1-10
Account (research paper)
2. Omar Abdulsattar Mahmoud, 3, Mar- 2019, Improvement of Authentication in
Smartphones Using Embedded Pattern-Based Features,
3. Journal of information and computer sciences(website)
4. Capture the error and bugs while testing(website)
5. Project scope.com
6. Reactjs.tutorials point
7. Reduce your app size
8. User interface and navigation
9. Auto code application

53 | P a g e
 10. CHAPTER 8 CODE

a. Empty.js
import {
React,{Com
ponent} reviews:[{comment:"helloooo
from "}]
'react'; }
import {View,Text, Image, )
Dimensions,
TouchableOpacity, //this.setAsyncData();
TextInput, }
DeviceEventEmitter, Button,
Alert, ActivityIndicator,
AsyncStorage, recieverId, async setAsyncData(){
PermissionsAndroid} from let user =
'react-native'; this.props.user;
import MapScreen from let userr =
"../MapScreen/Map"; JSON.stringify(user);
import { connect } from await
'react-redux' AsyncStorage.setItem('user'
import { bindActionCreators , userr);
} from 'redux' }
import {onLogin} from render(){
'../../redux/auth/action' return(
import firebase from <View style =
'react-native-firebase'; {{flex: 1, backgroundColor:
'#4d4d4d', justifyContent:
'center', alignItems:
const db = 'center'}}>
firebase.firestore(); <Text style
export default class Empty = {{fontSize: 30, color:
extends Component { 'white'}}>Map Screen</Text>
</View>
)
componentWillMount(){ }
const mechanicId = }
"JDquVawIckUaxAZNLhF6I5PXDM b. LOGIN.JS:
l2"

db.collection('users').doc(
import
React,{Comp
mechanicId).update(

54 | P a g e
 onent} from import {onLogin} from
'react'; '../../redux/auth/action'
import {View,Text, import CountDown
Image, Dimensions, from 'react-native-
TouchableOpacity, countdown-component';
TextInput,
DeviceEventEmitter,
Button, Alert, const {height, width} =
ActivityIndicator, Dimensions.get('windo
AsyncStorage, w')
recieverId, const
PermissionsAndroid} textFieldPropsObject =
from 'react-native'; {
import PhoneInput from // textAlign: "center",
'react-native-phone- selectionColor:
input'; "#e89225",
import Styles from
'./Styles' underlineColorAndroid:
import {loginUser} "transparent",
from style: [Styles.input],
"../../Config/Firebase";
import MapScreen from placeholderTextColor:
"../MapScreen/Map"; 'white',
import returnKeyType:
LocationServicesDialog "next",
Box from "react-native-
android-location- enablesReturnKeyAuto
services-dialog-box"; maticallly: true
import { connect } from // multiline: true,
'react-redux' // numberOfLines: 1
import { };
bindActionCreators }
from 'redux'

class LoginScreen extends codeInput: '',

Component{ confirmResult:null,
static navigationOptions = { loginLoader: false,
header : null showResend: false,
}; loginConfirmed: false
}
this.login =
constructor(props){ this.login.bind(this);
super(props); this.confirmCode =
this.state = { this.confirmCode.bind(this);
phoneNo: '', }
sendCode: false,

55 | P a g e
 location services popup from
componentWillMount(){ closing when it is clicked
this.autoLogin() outside
this.getPermission(); preventBackClick:
this.resetTimer(); false, //true => To prevent the
} location services popup from
async getPermission() { closing when it is clicked back
button
LocationServicesDialogBox.c providerListener: true
heckLocationServicesIsEnabl // true ==> Trigger
ed({ "locationProviderStatusChang
message: "<h2>Use e" listener when the location
Location ?</h2>This app state changes
wants to change your device })
settings:<br/><br/>Use GPS,
Wi-Fi, and cell network for
location<br/><br/><a
href='#'>Learn more</a>", DeviceEventEmitter.addListe
ok: "YES", ner('locationProviderStatusCh
cancel: "NO", ange', function(status) { //
enableHighAccuracy: only trigger when
true, // true => GPS AND "providerListener" is enabled
NETWORK PROVIDER, console.log(status); //
false => GPS OR NETWORK status => {enabled: false,
PROVIDER status: "disabled"} or
showDialog: true, // {enabled: true, status:
false => Opens the Location "enabled"}
access page directly });
}
openLocationServices: true, // async autoLogin(){
false => Directly catch const value = await
method is called if location AsyncStorage.getItem('user');
services are turned off const user =
preventOutSideTouch: JSON.parse(value);
false, //true => To prevent the if(user){

}
this.props.onLogin(user.id) async login(){
; const {phoneNo,
setTimeout(()=>{ loginLoader} = this.state;

this.props.navigation.navig this.setState({loginLoader:
ate("MapScreen", {screen: true});
"MapScreen"}) setTimeout(()=>{
},3000)
}

56 | P a g e
 if(!this.state.loginConfirme
d){
Alert.alert('',
"First create an account ")
},10000);
let user = await
loginUser(phoneNo);
if(user){
this.setState({loginLoader:
false, phoneNo: '' })
}
// Alert.alert('','Code
send successfully')
//}
}

this.setState({loginLoader:
false, phoneNo: '', confirmCode(){
loginConfirmed: true}); const { codeInput,
user && confirmResult } =
user._docs[0] && this.state;
user._docs[0]._data.id && if (confirmResult &&
this.props.onLogin(user._d codeInput.length) {
ocs[0]._data.id);
setTimeout(()=>{ confirmResult.confirm(cod
eInput)
//this.props.navigation.navi .then((user) => {
gate("Empty", {screen:
"Empty"}) this.props.onLogin(user._u
ser.uid);
this.props.navigation.navig Alert.alert('',
ate("MapScreen", {screen: 'Code confirmed')
"MapScreen"})
},3000) this.setState({codeInput:
} ''});
//if(user){
// setTimeout(()=>{
this.setState({sendCode:
true, confirmResult: user, //this.props.navigation.navi
loginLoader: false, gate("Empty", {screen:
phoneNo: ''}); "Empty"})

this.props.navigation.navig this.setState({codeInput:
ate("MapScreen", {screen: ''})
"MapScreen"}) });
},3000) }
}) }
.catch(error => {
Alert.alert('',
'Unconfirmed Code') resetTimer = () => {

57 | P a g e
 this.setState({ <CountDown
showResend: false }); until={30}
setTimeout(() => { size={20}
this.setState({ onFinish={()
showResend: true }); => alert("Finished")}
}, 30000); digitStyle={{
}; backgroundColor:
'#4d4d4d' }}

digitTxtStyle={{ color:
'white' }}
renderCountDown = ()
=> { timeLabelStyle={{ color:
return( '#ff8c00' }}
<View>
<Text style = timeToShow={["S",
{{color: '#ff8c00', fontSize: "MS"]}
15, textAlign: />
'center'}}>Resend SMS
code in</Text>

</View> 0.1}}>Please enter

) verification code </Text>
} <Text style =
{{color: 'white', fontSize:
13}}>sent to
renderVerificationCode = {this.state.phoneNo}</Text>
() => { </View>
const { showResend } = <TextInput
this.state;
return( {...textFieldPropsObject}
<View style={{flex:
1}}> underlineColorAndroid={"tr
<View style = ansparent"}
{{width: width, height:
height * 0.2, alignItems: placeholderTextColor =
'center', marginTop: height * '#ff8c00'
0.1}}> selectionColor =
<Text style = '#ff8c00'
{{color: 'white', fontSize: maxLength={6}
18}}>Verification
Code</Text> returnKeyType="done"
<Text style =
{{color: 'white', fontSize: 13, autoCapitalize={"none"}
marginTop: height *

58 | P a g e
 autoCorrect={false} onSubmitEditing={() =>
style = this.confirmCode()}
{Styles.codeInput}
placeholder={"_ keyboardType="numeric"
_ _ _ _ _"} />
secureTextEntry {showResend ?
= {false} <Text
value = onPress = {()
{this.state.codeInput} => this.resetTimer()}

onChangeText={(text)=>this
.setState({codeInput:text})}
style =
{{color: '#ff8c00', this.renderCountDow
fontSize: 15, n()
textAlign: }
'center'}}>Resend </View>
SMS code</Text> )
: }

onChangePhoneNo = (text) <Text

=> { style={Styles.headerText}>Ent
const {phoneNo} = er Verification Code</Text>
this.state; :
if(phoneNo.length < 13){ <Text
this.setState({ style={Styles.headerText}>LO
phoneNo: text}) G IN</Text>
} }
} </View>
{sendCode ?

render(){ this.renderVerificationCode()
const { sendCode } = :
this.state; <View>
return( <View
<View style = {{flex: 1, style={{width:width,height:hei
backgroundColor: ght*0.35,alignItems:'center',jus
'#4d4d4d'}}> tifyContent:'flex-end',
<View marginTop: height * 0.05}}>
style={Styles.header}> <Image style =
{{width: width * 0.6, height:
{this.state.sendCode ? height * 0.34, }} source =

59 | P a g e
 {require('../../Images/logo.png')
}/>
</View>
<Text
<PhoneInput style={Styles.footerText}
ref={ref >
=> { Don't
you have an account!
this.phone = ref; Signup
}} </Text>

initialCountry={'pk'} </TouchableOpacity>
value = </View>
{this.state.phoneNo}

flagStyle={{width: 40, <TouchableOpacity

height: 30, borderWidth:0, onPress={()=>
marginLeft: width * this.login()}>
0.03}} <View
style={Styles.loginBtn}>
textStyle={{fontSize:20}}
style = {this.state.loginLoader ?
{Styles.phoneInput}
<ActivityIndicator
textProps={{placeholder: size="small"
'Telephone number'}} color="#800000"/> :
<Text
onChangePhoneNumber= style={{
{(text)=>
this.onChangePhoneNo(te fontSize: 18,
xt) }
/> color: 'white',

fontFamily: 'monospace',

fontWeight: 'bold'

}}>Login</Text>
<View }
style={Styles.footer}> </View>

<TouchableOpacity </TouchableOpacity>
onPress={() =>
this.props.navigation.navi </View>
gate("SignUp", {screen: }
"SignUp"})}> </View>

60 | P a g e
 ) return
} bindActionCreators({
} onLogin: onLogin
}, dispatch)
const mapStateToProps = };
(state) => {
return { export default connect(
user: state.auth.user, mapStateToProps,
}; mapDispatchToProps
}; )(LoginScreen)
const
mapDispatchToProps =
(dispatch) => {
} from 'react-native';
c. Map screen: import {connect} from "react-

mp redux";

or import MapView, { Polyline,

t Marker, AnimatedRegion } from

Re 'react-native-maps';

ac import {filterMechanic,

t, setDeviceToken, SetPosition,

{ pushReq, upateMechaincJobs,

Co getMechanicData, acceptJobReq,

mp createJobReq, JobReqRes,

on CalDistance, updateUserId} from

en './../../Config/Firebase'

t import firebase from 'react-

} native-firebase';

fr import Styles from './Styles'

om const haversine =

'r require('haversine')

ea import MapViewDirections from

ct 'react-native-maps-directions';
'; import { Container, Header,
import { Content, Card, CardItem, Body,

StyleSheet, Button} from "native-base";

Text, import {BoxShadow} from 'react-
View, native-shadow'

Image, import _ from 'underscore';

Alert, import Modal from "react-native-

Platform, Dimensions, modal";

ActivityIndicator, import StarRating from 'react-

TouchableOpacity,AsyncStorage,Toas native-star-rating';

tAndroid, BackHandler

61 | P a g e

const db = firebase.firestore();
var foursquare = require('react-
native-foursquare-api')({
clientID:
'224RPKIX35NN0ZUBWZDK5RAUOTPCVGQBQ
BEVN5WYMRP5RCGQ',
clientSecret:
'55YHEWUZLM2LGM44QVL3IHUAENYVD4QMV
GC2ZFMEIARZAZUX',
style: 'foursquare', //
default: 'foursquare'
version: '20140806' //
default: '20140806'
});
const {height, width} =
Dimensions.get('window');
class MapScreen extends Component{
constructor(props){
super(props);
this.state = {
user: this.props.user,
latitude: '',
longitude: '',
routeCoordinates: [],
distanceTravelled: 0,
prevLatLng: {},
locSet: false,
toggleInfo: false,
onlineMecahics: [],
allMechanics:[],
markers: [],
mechanicDetails:'',
jobNotif: '',
notifOpen: false,
62 | P a g e
distOrigin: '',
distDestination: '',
calDist: 0,
calDistTime:
"00:00:00",
jobAccepted: false,
jobId: '',
jobStatusId: '',
userId: '',
isModalVisible: false
}
this.getDeviceToken =
this.getDeviceToken.bind(this);
this.getMechanicAndUser =
this.getMechanicAndUser.bind(this)
;
this.JobReqResponse =
this.JobReqResponse.bind(this);
//this.updateMap =
this.updateMap.bind(this);
this.jobMapView =
this.jobMapView.bind(this);
this.updateMapLocation =
this.updateMapLocation.bind(this);
}
componentWillMount(){
this.getDeviceToken();
this.getMechanicAndUser();
setInterval(() => {
this.getMechanicAndUser();
},100000);
this.setAsyncData();
this.backButtonHandler()
}
componentDidMount() {
this.watchPosition();
 this.onNotificationOpen(); })
}
this.foregroundNotificationListner
();
} async setPosition(latitude,
longitude){
var params = {
backButtonHandler = () => { "ll":
`${latitude},${longitude}`,
BackHandler.addEventListener('hard "query": 'urdu'
wareBackPress', function () { };
return true
})
}
foursquare.venues.getVenues(params
)
async setAsyncData(){ .then(function(venues)
let user = {
this.props.user; })
let userr = .catch(function(err){
JSON.stringify(user); });
await let userId =
AsyncStorage.setItem('user', this.props.user.id;
userr); let res = await
} SetPosition(userId, latitude,
longitude);

async setToken(token){ //if(this.state.jobAccepted){

let userId = //
this.props.user.id; console.log("Acceptedddddddddddddd
let res = await dddddddddddddd")
setDeviceToken(userId, token); // const {jobId,
} jobStatusId, user, userId} = this.
state;
//
async getDeviceToken(){ if(this.state.user.isMechanic){
const FCM = // let ress = await
firebase.messaging(); updateLocation(jobId, jobStatusId,
const fcmToken = userId, latitude, longitude);
FCM.getToken() // }
.then((token)=>{ // else{

this.setToken(token)

63 | P a g e
 // let ress = await obj.name =
updateLocation(jobId, jobStatusId, mech.firstName + " " +
user.id, latitude, longitude); mech.lastName;
// } obj.description =
//} mech.description;
} obj.id = mech.id;
obj.token =
mech.deviceToken;
async getMechanicAndUser(){ obj.image =
const mechanic = await mech.profilePicture;
filterMechanic(); obj.jobs =
const onlineMechanic = []; mech.jobs ? mech.jobs : [];
const user = obj.phoneNo =
this.props.user; mech.phoneNo;
const userObj = {}; obj.rating =
userObj.coordinates = mech.rating;
{latitude: user.latitude, obj.avgRating =
longitude: user.longitude}; mech.avgRating
userObj.name = markers.push(obj);
user.firstName + " " + }
user.lastName; });
userObj.description =
user.description;
userObj.id = user.id; markers.push(userObj);
userObj.token =
user.deviceToken; this.setState({onlineMecahics:
userObj.image = onlineMechanic, allMechanics:
user.profilePicture; mechanic, markers: markers})
}

let markers = [];

mechanic.map((mech)=>{
if(mech.deviceToken){
onlineMechanic.push(mech);
let obj = {};
obj.coordinates =
{latitude: mech.latitude ,
longitude: mech.longitude};
foregroundNotificationListner(){
this.notificationListener
=
firebase.notifications().onNotific
ation(async (notification:
Notification) => {
const jobData =
notification._data;
const user =
this.props.user;

64 | P a g e
 const userLat =
user.latitude ; notification._data &&
const userLang = this.setState({
user.longitude ;
const jobNotif: obj,
destinationLogitude =
parseFloat(jobData.longitude); notifOpen: true,
const
destinationLatitude = distOrigin: origin,
parseFloat(jobData.latitude);
distDestination: destination,
console.log(jobData.longitude,'///
//////////////') calDist,

console.log(user.latitude,'userrrr calDistTime,},()=>{
rrrrrrrrrrrrrrrrraaaaaaaaaaaa') this.setUserView()
const origin = })
{latitude: userLat, longitude: });
userLang}; }
const destination = onNotificationOpen(){
{latitude: destinationLatitude,
longitude: destinationLogitude}; this.notificationOpenedListener =
const obj = { firebase.notifications().onNotific
coordinates: ationOpened((notificationOpen:
{latitude: destinationLatitude , NotificationOpen) => {
longitude: destinationLogitude}, // Get the action
name: triggered by the notification
jobData.name, being opened
id: jobData.id, const action =
phoneNo: notificationOpen.action;
jobData.phoneNo, // Get information
profilePicture: about the notification that was
jobData.profilePicture opened
} const notification:
let res = await Notification =
CalDistance(userLang, userLat, notificationOpen.notification;
destinationLogitude, const jobData =
destinationLatitude); notification._data;
let calDist = const user =
res.route.distance; this.props.user;
let calDistTime = const userLat =
res.route.formattedTime; user.latitude ;

65 | P a g e
 const userLang = this.watchID =
user.longitude ; navigator.geolocation.watchPositio
const n(
destinationLogitude = position => {
parseFloat(jobData.longitude); const
const {routeCoordinates,
destinationLatitude = distanceTravelled } =
parseFloat(jobData.latitude); this.state;
const { latitude,
longitude } = position.coords;
const origin =
{latitude: userLat, longitude:
userLang}; const
const destination = newCoordinate = {
{latitude: destinationLatitude, latitude,
longitude: destinationLogitude}; longitude
const obj = { };
coordinates:
{latitude: destinationLatitude , this.setPosition(latitude,
longitude: destinationLogitude}, longitude);
name: this.setState({
jobData.name, latitude,
id: jobData.id, longitude,
phoneNo:
jobData.phoneNo, routeCoordinates:
profilePicture: routeCoordinates.concat([newCoordi
jobData.profilePicture nate]),
} prevLatLng:
newCoordinate,
locSet: true
notification._data && },()=>{
this.setState({jobNotif: obj,
notifOpen: true, distOrigin: //setInterval(()=>{
origin, distDestination: //
destination},()=>{ this.setPosition(latitude,
this.setUserView() longitude)
}) //},5000)
}); });
} },
error =>
console.log(error),
watchPosition(){

66 | P a g e
 { enableHighAccuracy: this.showToast('Your
true, timeout: 20000, maximumAge: job send successfully');
1000 } let jobs = [];
); let obj = {};
}; let updateStatusRes =
await createJobReq(res.id,
user.id);
async details(marker){ jobs =
let user = mechanicDetails.jobs;
this.props.user; obj.jobId = res.id;
let userLang = obj.jobStatusId =
user.longitude; updateStatusRes.id;
let userLat = jobs.push(obj);
user.latitude; let ress = await
let mecLang = upateMechaincJobs(jobs,
marker.coordinates.longitude; mechanicDetails.id,
let machLat = updateStatusRes.id);
marker.coordinates.latitude;
let res = await this.JobReqResponse(res.id,
CalDistance(mecLang, machLat, user.id, updateStatusRes.id);
userLang, userLat);
let calDist =
res.route.distance;
let calDistTime = this.setState({toggleInfo: false,
res.route.formattedTime; jobId: res.id, jobStatusId:
updateStatusRes.id,
this.setState({toggleInfo: isModalVisible: false});
true}); }
}
this.setState({mechanicDetails:
marker, calDist, calDistTime,
isModalVisible: true}) JobReqResponse(jobId, userId,
} statusId){
let data = {}

async pushRequest(){ db.collection('users').doc(userId)

const {mechanicDetails, .collection('pushReq').doc(jobId).
user} = this.state; collection('jobStatus').doc(status
let res = await Id)
pushReq(user, mechanicDetails.id, .onSnapshot(async
mechanicDetails.token); (doc) => {
if(res.id){

67 | P a g e
 obj.id =
if(doc.data().jobStatus == doc.data().id;
"Accept"){ obj.token =
doc.data().deviceToken;
Alert.alert('','Your job obj.image =
accepted') doc.data().profilePicture;
let obj.jobs =
updateuserId = await doc.data().jobs ? doc.data().jobs
updateUserId(userId, : [];
this.state.mechanicDetails.id); obj.phoneNo =
doc.data().phoneNo;
//this.updateMap(doc.data()); obj.isMechanic =
doc.data().isMechanic;
this.updateMapLocation(); markers = [];
} markers.push(obj);
});
} db.collection('users').doc(doc.dat
a().jobReqId)
.onSnapshot((doc) => {
updateMapLocation(){ const
const {user} = this.state; destinationLogitude =
let markers = []; parseFloat(doc.data().longitude);
const
db.collection('users').doc(user.id destinationLatitude =
) parseFloat(doc.data().latitude);
.onSnapshot((doc) => { const destination
const originLogitude = = {latitude: destinationLatitude,
parseFloat(doc.data().longitude); longitude: destinationLogitude};
const originLatitude = let obj1 = {};
parseFloat(doc.data().latitude); obj1.coordinates =
const origin = {latitude: doc.data().latitude ,
{latitude: originLatitude, longitude: doc.data().longitude};
longitude: originLogitude}; obj1.name =
let obj = {}; doc.data().firstName + " " +
obj.coordinates = doc.data().lastName;
{latitude: doc.data().latitude , obj1.description =
longitude: doc.data().longitude}; doc.data().description;
obj.name = obj1.id =
doc.data().firstName + " " + doc.data().id;
doc.data().lastName; obj1.image =
obj.description = doc.data().profilePicture;
doc.data().description;

68 | P a g e
 obj1.jobs = const {user, jobNotif} =
doc.data().jobs ? doc.data().jobs this.state;
: []; const res = await
obj1.phoneNo = getMechanicData(user.id);
doc.data().phoneNo; const jobs = res.jobs;
obj1.isMechanic = const currentJob =
doc.data().isMechanic; _.last(jobs);
let updateuserId = await
markers.push(obj1); updateUserId(user.id,
jobNotif.id);
this.setState({distOrigin: origin, let updateStatusRes =
distDestination: destination, await acceptJobReq(currentJob,
jobAccepted: true, markers: jobNotif, user);
markers}) if(updateStatusRes == 'Job
}) Accepted Successfully'){
})
} this.updateMapLocation();

this.setState({jobAccepted: true,
//updateMap(data){ jobId: currentJob.jobId,
// const jobStatusId:
destinationLogitude = currentJob.jobStatusId, userId:
parseFloat(data.mechanicLoc.longit jobNotif.id, notifOpen: false})
ude);
// const this.showToast(updateStatusRes)
destinationLatitude = }
parseFloat(data.mechanicLoc.latitu else{
de); Alert.alert("Something
// const origin = went wrong")
{latitude: 24.87217, longitude: }
67.3529129}; this.setState({notifOpen:
// const destination = false})
{latitude: destinationLatitude, }
longitude: destinationLogitude};
//
this.setState({distOrigin: origin, showToast = (message) =>{
distDestination: destination, ToastAndroid.show(
jobAccepted: true}) message,
//} ToastAndroid.SHORT
);
}
async acceptJob(){

69 | P a g e
 redirectMap = () => {
marginTop: height * 0.03,
this.setState({jobAccepted:
false}) alignItems: 'center',
}
setUserView(){ justifyContent: 'space-between',
const {jobNotif,
notifOpen} = this.state; flexDirection: 'row'}}
return( >
<View style = {{flex: <Text
1}}> numberOfLines = {1}
<Modal
style = {{color: '#ff8c00',
isVisible={notifOpen} fontSize: 16, paddingLeft: width *
> 0.02 }}>Destination distance
time:</Text>
<Text
style = {{color: '#ff8c00',
fontSize: 16,
<View style={{ }}>{this.state.calDistTime}
width: width * 0.9, Min</Text>
height: </View>
height * 0.4,

backgroundColor: 'white', <View

marginLeft: style = {{
width * 0,
width: width *0.8 ,

overflow: height: height * 0.05,

'hidden',
marginTop: alignItems: 'center',
height * 0.2,
alignItems: justifyContent: 'center',
'center'
}}> flexDirection: 'row'}}
<View >
style = {{ <Text
style = {{color: '#ff8c00',
width: width *0.8 , fontSize: 16, width: width *
0.6}}>Destination distance:</Text>
height: height * 0.05, <Text
style = {{color: '#ff8c00',

70 | P a g e
 fontSize: >
16}}>{parseFloat(this.state.calDis <Text
t).toFixed(2)} km</Text> style = {{color: '#ff8c00',
</View> fontSize: 16, width: width *
0.52}}>Vehicle Type:</Text>
<Text
<View style = {{color: '#ff8c00',
style = {{ fontSize: 16, width: width * 0.25,
textAlign: 'right'}}>Car</Text>
width: width *0.8 , </View>

height: height * 0.05,

<View
alignItems: 'center', style = {{width: width,

justifyContent: 'center', height: height * 0.18,

flexDirection: 'row'}} justifyContent: 'center',

>
<Text flexDirection: 'row',
style = {{width: width * 0.27,
color: '#ff8c00', fontSize: alignItems: 'center'
16}}>Phone No:</Text>
<Text }}>
style = {{width: width * 0.5,
textAlign: 'right', color: <TouchableOpacity
'#ff8c00', fontSize:
16}}>{jobNotif.phoneNo}</Text> onPress = {() =>
</View> {this.acceptJob()}}

style = {{
<View
style = {{ height: height * 0.07,

width: width *0.8 , width: width * 0.35,

height: height * 0.05, borderWidth: 2,

alignItems: 'center', borderColor: '#ff8c00',

justifyContent: 'center', borderRadius: 5,

flexDirection: 'row'}} justifyContent: 'center',

71 | P a g e
 height: width * 0.15,
alignItems: 'center' borderRadius: 100}}>

}}> {jobNotif.profilePicture ?

<Text style = {{fontSize: 17, <Image source = {{uri:

fontWeight: 'bold', color: jobNotif.profilePicture}} style =
'#ff8c00'}}>Accept</Text> {{ borderRadius: 100, width: width
* 0.12, height: width * 0.12}}/>:

<Image source =
</TouchableOpacity> {require('./../../Images/profile.p
ng')} style = {{width: width *
<TouchableOpacity style = {{ 0.12, height: width * 0.12}}/>

height: height * 0.07, }

</View>*/}
width: width * 0.35,

borderWidth: 2, {/*<View
style = {{width: width * 0.21,
borderColor: '#ff8c00',
height: width * 0.21,
borderRadius: 5,
borderRadius: 100,
marginLeft: width * 0.06,
marginTop: height * 0.1,
justifyContent: 'center',
marginRight: width * 0.4,
alignItems: 'center'}}>
borderWidth: 5,
<Text style = {{fontSize: 17,
fontWeight: 'bold', color: borderColor: '#ff8c00',
'#ff8c00'}}>Reject</Text>
justifyContent: 'center',

alignItems: 'center'}}>
</TouchableOpacity> <Image
</View> resizeMode = "contain"

resizeMethod = "auto"
{/*<View
style = {{width: width * 0.15, source =

72 | P a g e
 {require('./../../Images/profile_p height:
laceholder.png')} height * 0.7,

style = {{width: width * 0.2, backgroundColor: 'white',

height: width * 0.2}}/> marginLeft:
</View>*/} width * 0.05,
</View> borderRadius:
5,
overflow:
'hidden',
marginTop:
</Modal> height * 0.1
</View> }}>
<View
style = {{width: width * 0.25,
)
} height: width * 0.25,

marginLeft: width * 0.3,

mechanicDetailsView(){
const {mechanicDetails} = borderRadius: 100,
this.state;
return( marginTop: height * 0.0375,
<View style = {{flex:
1}}> borderColor: 'orange',
<Modal
backgroundColor: 'orange',
onBackdropPress = {() =>
this.setState({isModalVisible: borderWidth: 1,
false})}
overflow: 'hidden'}}>
onBackButtonPress = {() =>
this.setState({isModalVisible: {this.state.mechanicDetails &&
false})} this.state.mechanicDetails.image ?

isVisible={this.state.isModalVisib <Image resizeMode = 'cover'

le}
> style = {{

width: width * 0.25,

<View style={{
width: width * 0.8, height: width * 0.25

73 | P a g e
 }} borderBottomWidth:
StyleSheet.hairlineWidth}}>
source={{uri:
this.state.mechanicDetails.image}}
/> </View>
: <View
style = {{width: width * 0.8,
<Image resizeMode = 'cover' height: height * 0.06, marginTop:
height * 0.04, flexDirection:
style = {{ 'row', justifyContent: 'space-
between'}}>
width: width * 0.25,
<Text style={{color: '#11397a',
height: width * 0.25 marginLeft: width * 0.07}}>Phone
no:</Text>
}}
<Text style={{color: '#11397a',
source={require('./../../Images/pr marginRight: width *
ofile_placeholder.png')}/> 0.07}}>{this.state.mechanicDetails
} &&
</View> this.state.mechanicDetails.phoneNo
}</Text>
</View>
<View <View
style = {{width: width * 0.8, style = {{width: width * 0.8,
height: height * 0.05, alignItems: height: height * 0.06,
'center'}}> flexDirection: 'row',
<Text justifyContent: 'space-between'}}>
numberOfLines = {1}
style={{fontSize: 15, color: <Text style={{color: '#11397a',
'orange', fontWeight: marginLeft: width *
'bold'}}>{this.state.mechanicDetai 0.07}}>Distane:</Text>
ls &&
this.state.mechanicDetails.name}</ <Text style={{color: '#11397a',
Text> marginRight: width *
</View> 0.07}}>{this.state.calDist}
<View Km</Text>
style = {{ </View>

borderBottomColor: 'grey',
<View
style = {{width: width * 0.8,

74 | P a g e
 height: height * 0.06,
flexDirection: 'row',
justifyContent: 'space-between'}}>
<Text
style={{color: '#11397a',
marginLeft: width *
0.07}}>Reaching Time:</Text>
<Text
style={{color: '#11397a',
marginRight: width *
0.07}}>{this.state.calDistTime}</T
ext>
</View>
<View
style = {{width: width * 0.8,
height: height * 0.06,
flexDirection: 'row',
justifyContent: 'space-between'}}>
<Text
style={{color: '#11397a',
marginLeft: width *
0.07}}>Rating:</Text>
<StarRating
disabled={true}
maxStars={5}
emptyStar={require('./../../Images
/star.png')}
fullStar={require('./../../Images/
fillStar.png')}
halfStar={require('./../../Images/
fillStar.png')}
rating={mechanicDetails.avgRating
? mechanicDetails.avgRating : 0 }
75 | P a g e
containerStyle = {{marginRight:
width * 0.07}}
starStyle = {{width: width* 0.07,
height: width* 0.07}}
/>
</View>
<TouchableOpacity
onPress = {()=>
this.pushRequest()}
style
= {{
width: width * 0.6,
height: height * 0.08,
backgroundColor: 'orange',
borderRadius: 5,
marginLeft: width * 0.1,
elevation: 4,
marginTop: height * 0.06,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style = {{fontSize: 20,
color: 'white', fontWeight:
'bold'}}>Request</Text>
</TouchableOpacity>
</View>
 </Modal>
</View>
)
} if(this.state.user.id ==
marker.id){

mapView(){ return(
const GOOGLE_MAPS_APIKEY =
'AIzaSyCwjyTFzgxg- <MapView.Marker
wUU5rfcny19N9w7EGlq31M';
var coordinates = coordinate={coordinates}
{latitude: this.state.latitude,
longitude: this.state.longitude}; title={marker.name}
return(
description={marker.description}

<View style = image={require('./../../Images/use

{{flex: 1}}> rPointer.png')}
<MapView
/>
style={styles.map}
)
showUserLocation }
})
followUserLocation :

loadingEnabled this.state.markers.map(marker => (

region={{
latitude:
this.state.latitude,
longitude: marker.coordinates ?
this.state.longitude,
marker.id == this.state.user.id ?
latitudeDelta: 0.015,
<MapView.Marker
longitudeDelta: 0.0121}}
> coordinate={coordinates}

title={marker.name}

{this.state.user.isMechanic ? description={marker.description}

this.state.markers.map(marker => {

76 | P a g e
 const {user} = this.props;
image={require('./../../Images/use const GOOGLE_MAPS_APIKEY =
rPointer.png')} 'AIzaSyCwjyTFzgxg-
wUU5rfcny19N9w7EGlq31M';
/> return(
<View style = {{flex:
: 1}}>
<MapView

style={styles.map}
<MapView.Marker
showUserLocation
coordinate={marker.coordinates.lat
itude && marker.coordinates} followUserLocation
loadingEnabled
title={marker.name} region={{
latitude:
description={marker.description} this.state.latitude,
longitude:
image={require('./../../Images/mec this.state.longitude,
hanicPointer.png')}
latitudeDelta: 0.015,
onPress={()=>
this.details(marker)} longitudeDelta: 0.0121}}
>
/>: null
))
}
<MapViewDirections

</MapView> origin={this.state.distOrigin}
</View>
destination={this.state.distDestin
ation}

apikey={GOOGLE_MAPS_APIKEY}
)
} strokeWidth={4}

strokeColor="#0059b3"
jobMapView(){ />
const {jobId, jobStatusId, {
mechanicDetails} = this.state;

77 | P a g e
 this.state.markers.map((marker) =>
{ }
if(marker.isMechanic){
return(
<MapView.Marker
coordinate={marker.coordinates.lat
itude && marker.coordinates}
title={marker.name}
description={marker.description}
image={require('./../../Images/mec
hanicPointer.png')}
/>
) 0.15}}>
} <Text
else{
return(
<MapView.Marker
coordinate={marker.coordinates.lat
itude && marker.coordinates}
title={marker.name}
description={marker.description}
image={require('./../../Images/use
rPointer.png')}
/>
78 | P a g e
)
})
}
</MapView>
{ user.isMechanic
?
<TouchableOpacity onPress = {() =>
{this.props.navigation.navigate("Q
RScannerScreen", {redirectMap:
this.redirectMap ,userId:
this.state.userId, jobStatusId:
this.state.jobStatusId, jobId:
this.state.jobId, screen:
"QRScannerScreen"})}} style =
{{width: width * 0.7, height:
height * 0.08, alignItems:
'center', justifyContent:
'center', borderRadius: 10,
backgroundColor: 'orange', top:
height * 0.78, left: width *
style = {{fontSize: 17, color:
'white'}}>Complete Job</Text>
</TouchableOpacity>
:
<TouchableOpacity onPress = {() =>
{this.props.navigation.navigate("Q
RCodeScreen", {redirectMap:
this.redirectMap, jobStatusId:
jobStatusId, jobId: jobId, screen:
"QRCodeScreen", mechanicDetails:
mechanicDetails})}} style =
{{width: width * 0.7, height:
height * 0.08, alignItems:
'center', justifyContent:
'center', borderRadius: 10,
backgroundColor: 'orange', top:
 height * 0.78, left: width *
0.15}}>
<Text <View
style = {{fontSize: 17, color: style={{width: width, height:
'white'}}>Job Done</Text> height, alignItems: 'center',
justifyContent: 'center'}}>
</TouchableOpacity>
} <ActivityIndicator size="large"
</View> color="#0000ff" />
) </View>
} }

{/*this.state.jobAccepted ?
render() { this.jobMapView() :
return ( this.mapView()*/}
<View style ={{height: </View>
height, width: width}}> {/*true ?
<View this.setUserView() :
style={{width: width, height: this.state.toggleInfo ?
height* 0.08, backgroundColor: this.mechanicDetailsView() :
'#ff8c00', elevation: 2}}> null*/}

<TouchableOpacity style= {this.state.notifOpen ?

{Styles.headerSubContent} this.setUserView() :
onPress={() => this.state.toggleInfo ?
this.props.navigation.openDrawer() this.mechanicDetailsView() : null}
}>
<Image
source={require('./../../Images/me </View>
nu.png')} style={Styles.menuImg}/> );
}
</TouchableOpacity> }
</View>
<View
style={this.state.toggleInfo || const styles = StyleSheet.create({
this.state.notifOpen ? {height: map: {
height * 0.89, width: width,
backgroundColor:'red'}: {height: ...StyleSheet.absoluteFillObject,
height * 0.89, width: width}}> },
{this.state.locSet });
? this.state.jobAccepted ?
this.jobMapView() : this.mapView()
:

79 | P a g e
 const mapStateToProps = (state) => children: [{
{ name: "Mehran",
return { id: "Mehran",
user: state.auth.user, },{
}; name: "Cultus",
}; id: "Cultus",
export default connect( },{
mapStateToProps name: "Wagon R",
)(MapScreen) id: "Wagon R",
},{
name: "APV",
d. Profileupdate:
id: "APV",
},{
name: "Bolan",
import id: "Bolan",
React, },{
{Compo name: "Jimny",
nent} id: "Jimny",
from }]
'react },
'; {
import {View, Text, name: "Honda",
Dimensions, Image, id: "Honda",
TouchableOpacity,TextInput,Act children: [{
ivityIndicator,Alert} from name: "Civic",
'react-native' id: "Civic",
import Styles from './Styles' },{
import { TextField } from name: "Accord",
'react-native-material- id: "Accord",
textfield'; },{
import SectionedMultiSelect name: "City",
from 'react-native-sectioned- id: "City",
multi-select'; },{
import {updateVehicles} from name: "BR-V",
'./../../Config/Firebase' id: "BR-V",
const {width, height} = }]
Dimensions.get('window'); },
{
name: "Toyota",
const items = [ id: 2,
{ children: [{
name: "Suzuki", name: "Corolla",
id: 0, id: "Corolla",

80 | P a g e
 },{ const {selectedItems,
name: "Fortuner", user} = this.state;
id: "Fortuner", this.setState({loader:
},{ true});
name: "Hiace", const res = await
id: "Hiace", updateVehicles(user.id,
},{ selectedItems);
name: "Hilux", if(res == "Vehicles
id: "Hilux", updated"){
}]
}, this.setState({loader:
] false});

Alert.alert('','Vehicles
export default class Updated')
UpdatePassword extends }
Component{ }

constructor(props){ render(){
super(props);
this.state = {
loader : false, return(
user: <View
this.props.navigation.getParam style={Styles.main}>
('user'), <View
selectedItems: [] style={Styles.headerMain}>
}; <View
this.updateVehicles = style={Styles.headerSub}>
this.updateVehicles.bind(this) <View
; style={Styles.headerBack}>
}
<TouchableOpacity
onPress={()=>
onSelectedItemsChange = this.props.navigation.goBack()
(selectedItems) => { }>
this.setState({
selectedItems }); <Image
} source={require('../../Images/
leftArrow.png')}
style={Styles.headerImg}/>
async updateVehicles(){
</TouchableOpacity>

81 | P a g e
 </View> modalAnimationType = 'fade'
<View
style={Styles.headerHeading}> dropDownToggleIconUpComponent
= {true}
<Text
style={Styles.headerText}>Upda animateDropDowns = {true}
te Profile</Text>
selectLabelNumberOfLines = {4}
</View> />
</View>
</View>
</View>
<View
<View style={{flex:0.2,
style={{width: width, height: alignItems:'center',
height*0.07, marginTop: height justifyContent:'center',
* 0.37}}> marginTop: height * 0.3}}>

<TouchableOpacity

<SectionedMultiSelect onPress={()=>{this.updateVehic
les()}}
items={items}
style={Styles.btn}>
uniqueKey='id'
{this.state.loader ?
subKey='children' <ActivityIndicator
size="small" color="#0000ff"/>
selectText='Choose your :
vehicles...'
<Text
showDropDowns={true} style={Styles.btnText}>Update
Vehicles</Text>}
readOnlyHeadings={true}
</TouchableOpacity>
onSelectedItemsChange={this.on </View>
SelectedItemsChange} </View>
)
selectedItems={this.state.sele }
ctedItems} }

showChips = {true} e. QRCode:

82 | P a g e
 name: "Bolan",
import id: "Bolan",
React, },{
{Compo name: "Jimny",
nent} id: "Jimny",
from }]
'react },
'; {
import {View, Text, name: "Honda",
Dimensions, Image, id: "Honda",
TouchableOpacity,TextInput,Act children: [{
ivityIndicator,Alert} from name: "Civic",
'react-native' id: "Civic",
import Styles from './Styles' },{
import { TextField } from name: "Accord",
'react-native-material- id: "Accord",
textfield'; },{
import SectionedMultiSelect name: "City",
from 'react-native-sectioned- id: "City",
multi-select'; },{
import {updateVehicles} from name: "BR-V",
'./../../Config/Firebase' id: "BR-V",
const {width, height} = }]
Dimensions.get('window'); },
{
name: "Toyota",
const items = [ id: 2,
{ children: [{
name: "Suzuki", name: "Corolla",
id: 0, id: "Corolla",
children: [{ },{
name: "Mehran", name: "Fortuner",
id: "Mehran", id: "Fortuner",
},{ },{
name: "Cultus", name: "Hiace",
id: "Cultus", id: "Hiace",
},{ },{
name: "Wagon R", name: "Hilux",
id: "Wagon R", id: "Hilux",
},{ }]
name: "APV", },
id: "APV", ]
},{

83 | P a g e
 export default class Alert.alert('','Vehicles
UpdatePassword extends Updated')
Component{ }
}

constructor(props){
super(props); render(){
this.state = {
loader : false,
user: return(
this.props.navigation.getParam <View
('user'), style={Styles.main}>
selectedItems: [] <View
}; style={Styles.headerMain}>
this.updateVehicles = <View
this.updateVehicles.bind(this) style={Styles.headerSub}>
; <View
} style={Styles.headerBack}>

<TouchableOpacity
onSelectedItemsChange = onPress={()=>
(selectedItems) => { this.props.navigation.goBack()
this.setState({ }>
selectedItems });
} <Image
source={require('../../Images/
leftArrow.png')}
async updateVehicles(){ style={Styles.headerImg}/>
const {selectedItems,
user} = this.state; </TouchableOpacity>
this.setState({loader:
true}); </View>
const res = await <View
updateVehicles(user.id, style={Styles.headerHeading}>
selectedItems);
if(res == "Vehicles <Text
updated"){ style={Styles.headerText}>Upda
te Profile</Text>
this.setState({loader:
false}); </View>
</View>
</View>

84 | P a g e
 </View>
<View
<View style={{flex:0.2,
style={{width: width, height: alignItems:'center',
height*0.07, marginTop: height justifyContent:'center',
* 0.37}}> marginTop: height * 0.3}}>

<TouchableOpacity

<SectionedMultiSelect onPress={()=>{this.updateVehic
les()}}
items={items}
style={Styles.btn}>
uniqueKey='id'
{this.state.loader ?
subKey='children' <ActivityIndicator
size="small" color="#0000ff"/>
selectText='Choose your :
vehicles...'
<Text
showDropDowns={true} style={Styles.btnText}>Update
Vehicles</Text>}
readOnlyHeadings={true}
</TouchableOpacity>
onSelectedItemsChange={this.on </View>
SelectedItemsChange} </View>
)
selectedItems={this.state.sele }
ctedItems} }

showChips = {true} f. QRScanner:

modalAnimationType = 'fade' impo

rt

dropDownToggleIconUpComponent Reac

= {true} t,{C
ompo

animateDropDowns = {true} nent

}

selectLabelNumberOfLines = {4} from

/> 'rea
ct';

85 | P a g e
 import {View,Text, Image,
Dimensions, TouchableOpacity, showToast = (message) =>{
TextInput, StyleSheet, Alert} ToastAndroid.show(
from 'react-native'; message,
import Styles from './Styles' ToastAndroid.SHORT
import { connect } from 'react- );
redux' }
import { bindActionCreators }
from 'redux'
import firebase from 'react- redirectToMap = () => {
native-firebase'; const redirectMapFunc =
import QRCodeScanner from 'react- this.props.navigation.getParam('r
native-qrcode-scanner'; edirectMap')
redirectMapFunc();

const {height, width} = this.props.navigation.navigate("M

Dimensions.get('window') apScreen", {screen: "MapScreen"})
const db = firebase.firestore(); }

class QRScannerScreen extends jobCompleted = () => {

Component{ Alert.alert('',
static navigationOptions = { 'Your Job is
header : null Completed Successfully',
}; [
{text: 'OK', onPress:
() => this.redirectToMap()}]
constructor(props){ );
super(props); }
this.state = {
jobData: { qrScanner = (data) =>{
jobId: const {jobData} =
this.props.navigation.getParam('j this.state;
obId'), let qrData =
jobStatusId: JSON.parse(data.data);
this.props.navigation.getParam('j if(jobData.jobId ==
obStatusId') , qrData.jobId &&
userId: jobData.jobStatusId ==
this.props.user.id qrData.jobStatusId){
}
} db.collection('users').doc(qrData
} .userId).collection('pushReq').do
c(qrData.jobId).collection('jobSt

86 | P a g e
 atus').doc(qrData.jobStatusId).up
date({ height: height * 0.67,
jobStatus:
"Completed" backgroundColor: 'white',
}).then((res) => {
marginLeft: width * 0.1,
this.jobCompleted()
console.log(res, marginTop: height * 0.1,
'response')
}).catch((err) => { borderRadius: 5}}>

Alert.alert('','Something goes <QRCodeScanner

wrong');
cameraStyle = {{
console.log(err,'errorrrrrrrrrrr'
) width : width * 0.7,
})
} marginLeft: width * 0.05}}
}
onRead={(data) =>
this.qrScanner(data)}

/>
</View>
render(){ </View>
return( </View>
<View style = )
{{backgroundColor: 'grey'}}> }
<View }
style={Styles.header}>
<Text
style={Styles.headerText}>QR const styles =
Scanner</Text> StyleSheet.create({
</View> centerText: {
<View style = flex: 1,
{{width : width, fontSize: 18,
padding: 32,
height: height * 0.9 color: '#777',
},
}}> textBold: {
<View style = fontWeight: '500',
{{width: width * 0.8, color: '#000',

87 | P a g e
 }, TextInput, StyleSheet, Alert}
buttonText: { from 'react-native';
fontSize: 21, import Styles from './Styles'
color: 'rgb(0,122,255)', import { connect } from 'react-
}, redux'
buttonTouchable: { import { bindActionCreators }
padding: 16, from 'redux'
}, import firebase from 'react-
}); native-firebase';
import QRCodeScanner from 'react-
native-qrcode-scanner';
const mapStateToProps = (state)
=> {
return { const {height, width} =
user: state.auth.user, Dimensions.get('window')
}; const db = firebase.firestore();
};
const mapDispatchToProps =
(dispatch) => { class QRScannerScreen extends
return bindActionCreators({ Component{
}, dispatch) static navigationOptions = {
}; header : null
};

export default connect(

mapStateToProps, constructor(props){
mapDispatchToProps super(props);
)(QRScannerScreen) this.state = {
jobData: {
jobId:
g. RateOrder:
this.props.navigation.getParam('j
impo obId'),
rt jobStatusId:
Reac this.props.navigation.getParam('j
t,{C obStatusId') ,
ompo userId:
nent this.props.user.id
} }
from }
'rea }
ct';
import {View,Text, Image,
Dimensions, TouchableOpacity, showToast = (message) =>{

88 | P a g e
 ToastAndroid.show( jobStatus:
message, "Completed"
ToastAndroid.SHORT }).then((res) => {
);
} this.jobCompleted()
console.log(res,
'response')
redirectToMap = () => { }).catch((err) => {
const redirectMapFunc =
this.props.navigation.getParam('r Alert.alert('','Something goes
edirectMap') wrong');
redirectMapFunc();
console.log(err,'errorrrrrrrrrrr'
this.props.navigation.navigate("M )
apScreen", {screen: "MapScreen"}) })
} }
}

jobCompleted = () => {
Alert.alert('',
'Your Job is
Completed Successfully',
[
{text: 'OK', onPress: render(){
() => this.redirectToMap()}] return(
); <View style =
} {{backgroundColor: 'grey'}}>
<View
qrScanner = (data) =>{ style={Styles.header}>
const {jobData} = <Text
this.state; style={Styles.headerText}>QR
let qrData = Scanner</Text>
JSON.parse(data.data); </View>
if(jobData.jobId == <View style =
qrData.jobId && {{width : width,
jobData.jobStatusId ==
qrData.jobStatusId){ height: height * 0.9

db.collection('users').doc(qrData }}>
.userId).collection('pushReq').do <View style =
c(qrData.jobId).collection('jobSt {{width: width * 0.8,
atus').doc(qrData.jobStatusId).up
date({ height: height * 0.67,

89 | P a g e
 fontSize: 21,
backgroundColor: 'white', color: 'rgb(0,122,255)',
},
marginLeft: width * 0.1, buttonTouchable: {
padding: 16,
marginTop: height * 0.1, },
});
borderRadius: 5}}>

<QRCodeScanner const mapStateToProps = (state)

=> {
cameraStyle = {{ return {
user: state.auth.user,
width : width * 0.7, };
};
marginLeft: width * 0.05}} const mapDispatchToProps =
(dispatch) => {
onRead={(data) => return bindActionCreators({
this.qrScanner(data)} }, dispatch)
};

/>
</View> export default connect(
</View> mapStateToProps,
</View> mapDispatchToProps
) )(QRScannerScreen)
}
}
h. signUp:
impo
const styles = rt
StyleSheet.create({ Reac
centerText: { t,{C
flex: 1, ompo
fontSize: 18, nent
padding: 32, }
color: '#777', from
}, 'rea
textBold: { ct';
fontWeight: '500', import {View,Text, Image,
color: '#000', Dimensions, TouchableOpacity,
}, TextInput, StyleSheet, Alert}
buttonText: { from 'react-native';

90 | P a g e
 import Styles from './Styles' ToastAndroid.SHORT
import { connect } from 'react- );
redux' }
import { bindActionCreators }
from 'redux'
import firebase from 'react- redirectToMap = () => {
native-firebase'; const redirectMapFunc =
import QRCodeScanner from 'react- this.props.navigation.getParam('r
native-qrcode-scanner'; edirectMap')
redirectMapFunc();

const {height, width} = this.props.navigation.navigate("M

Dimensions.get('window') apScreen", {screen: "MapScreen"})
const db = firebase.firestore(); }

class QRScannerScreen extends jobCompleted = () => {

Component{ Alert.alert('',
static navigationOptions = { 'Your Job is
header : null Completed Successfully',
}; [
{text: 'OK', onPress:
() => this.redirectToMap()}]
constructor(props){ );
super(props); }
this.state = {
jobData: { qrScanner = (data) =>{
jobId: const {jobData} =
this.props.navigation.getParam('j this.state;
obId'), let qrData =
jobStatusId: JSON.parse(data.data);
this.props.navigation.getParam('j if(jobData.jobId ==
obStatusId') , qrData.jobId &&
userId: jobData.jobStatusId ==
this.props.user.id qrData.jobStatusId){
}
} db.collection('users').doc(qrData
} .userId).collection('pushReq').do
c(qrData.jobId).collection('jobSt
atus').doc(qrData.jobStatusId).up
showToast = (message) =>{ date({
ToastAndroid.show( jobStatus:
message, "Completed"

91 | P a g e
 }).then((res) => {
marginLeft: width * 0.1,
this.jobCompleted()
console.log(res, marginTop: height * 0.1,
'response')
}).catch((err) => { borderRadius: 5}}>

Alert.alert('','Something goes <QRCodeScanner

wrong');
cameraStyle = {{
console.log(err,'errorrrrrrrrrrr'
) width : width * 0.7,
})
} marginLeft: width * 0.05}}
}
onRead={(data) =>
this.qrScanner(data)}

/>
</View>
render(){ </View>
return( </View>
<View style = )
{{backgroundColor: 'grey'}}> }
<View }
style={Styles.header}>
<Text
style={Styles.headerText}>QR const styles =
Scanner</Text> StyleSheet.create({
</View> centerText: {
<View style = flex: 1,
{{width : width, fontSize: 18,
padding: 32,
height: height * 0.9 color: '#777',
},
}}> textBold: {
<View style = fontWeight: '500',
{{width: width * 0.8, color: '#000',
},
height: height * 0.67, buttonText: {
fontSize: 21,
backgroundColor: 'white', color: 'rgb(0,122,255)',

92 | P a g e
 }, import { connect } from
buttonTouchable: { 'react-redux'
padding: 16, import { bindActionCreators
}, } from 'redux'
}); import {onLogin} from
'../../redux/auth/action'
import CountDown from
const mapStateToProps = (state) 'react-native-countdown-
=> { component';
return {
user: state.auth.user,
}; class VerifyScreen extends
}; Component {
const mapDispatchToProps =
(dispatch) => {
return bindActionCreators({ constructor(props){
}, dispatch) super(props);
}; this.state = {
showResend:
false
export default connect( }
mapStateToProps, }
mapDispatchToProps
)(QRScannerScreen)
componentDidMount(){
this.resetTimer()
i. Verify:
}
import
React,{Co
mponent} resetTimer = () => {
from this.setState({
'react'; showResend: false });
import {View,Text, Image, setTimeout(() => {
Dimensions, this.setState({
TouchableOpacity, TextInput, showResend: true });
DeviceEventEmitter, Button, }, 30000);
Alert, ActivityIndicator, };
AsyncStorage, recieverId,
PermissionsAndroid} from
'react-native'; renderCountDown = () =>
import Styles from {
'./Styles' return(
<View>

93 | P a g e
 <Text style 'center', marginTop: height
= {{color: 'orange', * 0.1}}>
fontSize: 15, textAlign: <Text
'center'}}>Resend SMS code style = {{color: 'white',
in</Text> fontSize: 18}}>Verification
<CountDown Code</Text>
<Text
until={30} style = {{color: 'white',
fontSize: 13, marginTop:
size={20} height * 0.1}}>Please enter
verification code </Text>
onFinish={() => <Text
alert("Finished")} style = {{color: 'white',
fontSize: 13}}>sent to
digitStyle={{ {this.state.phoneNo}</Text>
backgroundColor: 'grey' }} </View>
<TextInput
digitTxtStyle={{ color:
'orange' }} {...textFieldPropsObject}

timeLabelStyle={{ color: underlineColorAndroid={"tran

'orange' }} sparent"}

timeToShow={["S", "MS"]} placeholderTextColor =

/> 'orange'

selectionColor = 'orange'
</View>
) maxLength={6}
}
returnKeyType="done"

renderVerificationCode = autoCapitalize={"none"}
() => {
const { showResend autoCorrect={false}
} = this.state; style =
return( {Styles.codeInput}
<View
style={{flex: 1}}> placeholder={"_ _ _ _ _ _"}
<View style
= {{width: width, height: secureTextEntry = {false}
height * 0.2, alignItems: value =
{this.state.codeInput}

94 | P a g e
 export default
onChangeText={(text)=>this.s {VerifyScreen};
etState({codeInput:text})}

onSubmitEditing={() =>
this.confirmCode()}

keyboardType="numeric"
/>
{showResend
?
<Text

onPress = {() =>

this.resetTimer()}

style = {{color: 'orange',

fontSize: 15, textAlign:
'center'}}>Resend SMS
code</Text>
:

this.renderCountDown()
}
</View>
)
}

render(){
return(
<View
style={{flex: 1}}>

{this.renderVerificationCode
()}
</View>
)
}
}

95 | P a g e