The Driver app

This app contain the Driver functionality.

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, Ola etc.

Initialize

To begin with, change the Google Maps API_KEY in package.json under uk.co.workingedge.phonegap.plugin.launchnavigator plugin.

Because the test key is being used by many users, this can exceed the Map API quota. It is always best to use your own Google Map API_KEY. You can follow the instructions here to get the API_KEY

Feature of this app‌

  • Real Time vehicle tracking location

This page does real time tracking of driver and send location to firebase.‌

  • Driver offline/Online feature

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

It will show the Driver ride history with days and price and it will get data from firebase.‌

  • Add Payment/card page

In this Page driver can add the payment card.‌

  • Login/Sign up page

This page will check the authentication of driver from Firebase.‌ You can also add Social logins here. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

  • OTP Verification page

This page will verify the driver OTP which comes on his mobile number.‌

  • Add vehicle page with vehicle list

In this page driver can add his vehicle‌

  • Wallet page with multiple payment methods option

  • Document Mangement page

This page show the driver Documents.‌

  • Notification page

This page show the notification when driver get ride, offers or etc.‌

  • Profile Update page

Driver can edit profile and it will update on firebase.‌

  • User Request page

This page show the total current requests of user and driver can pick any one of them.‌

  • Customer Details page

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

Driver can chat with user directly‌

  • Invite your friend page

It will help to invite other user‌

  • Invite sharing with SocialShare plugi‌

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

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​‌

  • Geolocation

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​‌

  • 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​‌

  • 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​‌

  • 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​‌

  • 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​‌

  • 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