# Driver App
This Taxi driver app for taxi booking platform is made to provide a great app UI for your own Driver app for taxi booking. Now you can start your own Taxi driver app with these functionalities. This is a great starting point for app development, as more than half the work is done here. All pages and components are set. Hence, all you need here is to integrate your back-end and feed in the data. This app has many features common with popular apps like [Uber](https://play.google.com/store/apps/details?id=com.ubercab\&hl=en_IN), [Ola](https://play.google.com/store/apps/details?id=com.olacabs.customer\&hl=en_IN) etc.
## Vehicle tracking location
%20\(9\).png?alt=media\&token=8581cd47-9ac5-4aa5-b40e-9391291e55f9)
This page does tracking of driver and send location to firebase. Note, this is not a real-time tracking
## Driver offline/Online feature
%20\(7\).png?alt=media\&token=4e2b3ad6-3875-45dd-9f73-06c4e5b449bb)
Driver can change his status from Offline to Online and vice-versa by the toggle in header and change the status in firebase.
## Ride history page with details of past rides
%20\(15\).png?alt=media\&token=7bb1f670-056d-4b07-a75b-ded94382667b)
It will show the Driver ride history with days and price and it will get data from firebase.
## Add Payment/card page
%20\(13\).png?alt=media\&token=03858d5c-3bd0-4f2e-adf2-941386d0f821)
In this Page driver can add the payment card.
## Login/Sign up page
%20\(4\).png?alt=media\&token=e5211dbe-9799-47e7-8afd-0247e0a689ab)
This page will check the authentication of driver from firbase.
## OTP Verification page
%20\(6\).png?alt=media\&token=4bd23335-fe9c-4d09-9368-c190c0d92ce5)
This page will verify the driver OTP which comes on his mobile number.
## Add vehicle page with vehicle list
%20\(24\).png?alt=media\&token=99f5fd54-c5f7-41ab-8b68-58da2e55e3f4)
In this page driver can add his vehicle
## Wallet page
with multiple payment methods option
%20\(12\).png?alt=media\&token=cb754e35-6596-4ba8-a5d8-905d69f37e31)
## Document Mangement page
%20\(26\).png?alt=media\&token=425bc2d0-a440-41a3-8c0c-5d5c07ee0a48)
This page shows the driver Documents.
## Notification page
%20\(17\).png?alt=media\&token=03a5f465-0f76-432a-9e02-78395044426e)
This page show the notification when driver get ride, offers or etc.
## Profile Update page
%2026.png?alt=media\&token=1a8e94c5-ada4-438a-9783-b33aaa064cd3)
Driver can edit profile and it will update on firebase.
## User Request page
%20\(11\).png?alt=media\&token=685810d1-649c-43af-906c-6a307328bf67)
This page show the total current requests of user and driver can pick any one of them.
Also, if you want to implement a push notification feature for booking flow, you can follow our detailed tutorial for the same
* [Implement push notification in Ionic apps](https://enappd.com/blog/implement-ionic-4-firebase-push/34)
## Customer Details page
25.png?alt=media\&token=99cd3ce0-4fd4-489a-972c-157514a0ab80)
After accept the request driver can see the detail of customer and driver can call,Message and cancel the user request
## Chat/Message/Call feature page
29.png?alt=media\&token=839f69da-04b8-495c-838d-6cafdd549b83)
Driver can chat with user directly
## Invite your friend page
%20\(19\).png?alt=media\&token=567af6b2-6836-48bd-bd5f-91333ea4b148)
It will help to invite other user
* Invite sharing with SocialShare plugin
%20\(20\).png?alt=media\&token=b46058d3-9cd1-457c-a922-f8999b8ad443)
This page does the driver contact list which is use to share the invite code of driver
## Code Structure
Driver app Code Structure
The `src/app/pages` folder contains the code related to
* Login - Email login
* Signup - Email signup
* Home - Online & offline feature
* Location - Get Driver Current Location
* Profile - Edit Driver Profile
* Customer -Request - Ride requests show
* History - Show Previous Rides
These files use service data and functions provided in `src/app/`
* `auth.service.ts` - For Authentication functions
* `driver-status.service.ts` - For Driver status purpose
* `firestore.services.ts` - For CRUD functions
## Plugins
* **Camera**
{% hint style="info" %}
You can find more details on Camera integration in Ionic 4 App in [our tutorial here](https://enappd.com/blog/image-picker-in-ionic-4-app/67)
{% endhint %}
We have written this code for access the camera in user device.
```
async openCamera() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
await this.camera.getPicture(options).then((imageData) => {
const base64Image = 'data:image/jpeg;base64,' + imageData;
this.photos.push(base64Image)
}, (err) => {
// Handle error
console.log(err)
});
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/native/camera)
* **Geolocation**
{% hint style="info" %}
You can find more details on Geolocation integration in Ionic 4 App in [our tutorial here](https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45)
{% endhint %}
We have written this code for getting driver Current location
```
public getcurrentLocations() {
this.geolocation
.getCurrentPosition()
.then(resp => {
this.lat = resp.coords.latitude;
this.lng = resp.coords.longitude;
const obj = {};
obj['lat'] = this.lat;
obj['lng'] = this.lng;
this.locationOrigin = obj;
const uid = this.userId.uid;
this.fire.updateData(obj, uid);
})
.catch(err => {
console.error('Error getting location', err);
});
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/enterprise/geolocation)
* **In-app-browser**
We have written this code for open external browser in our app
```
openUrl(url) {
const browser = this.iab.create(url);
browser.show()
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/enterprise/inappbrowser)
* **Background Geolocation**
We have written this code for Continue update the driver Current location
```
geoLocations() {
this.backgroundGeolocation
.configure(config)
.then((location: BackgroundGeolocationResponse) => {
console.log('location', location);
this.backgroundGeolocation.finish(); // FOR IOS ONLY
});
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/native/background-geolocation)
* **Social-sharing**
We have written this code for Share your content on user social media.
```
shareAlert() {
this.socialSharing.share();
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/native/social-sharing)
* **Launch-navigator**
We have written this code for Open Google Map Navigation in user device
```
getnavigations() {
console.log('navigations')
const options: LaunchNavigatorOptions = {
start: 'London, ON',
app: this.launchNavigator.APP.GOOGLE_MAPS,
}
this.launchNavigator.navigate('Toronto, ON', options)
.then(
success => console.log('Launched navigator', success),
error => console.log('Error launching navigator', error)
);
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/native/launch-navigator)
* **Call-number**
We have written this code for open the call window in Driver device.
```
userCall() {
this.callNumber.callNumber('18001010101', true)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err));
}
```
For More Information about this plugin check out [this link](https://ionicframework.com/docs/native/call-number)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://enappd.gitbook.io/ionic-taxi-booking-app-starter/platform-features/driver-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.