Driver App

This app contains the Driver functionality of the platform

Last updated 5 years ago

Was this helpful?

Driver App

This app contains the Driver functionality of the platform

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

Vehicle tracking location

This page does tracking of driver and send location to firebase.‌ Note, this is not a real-time tracking

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

This page will check the authentication of driver from firbase.‌

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 shows 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.‌

Also, if you want to implement a push notification feature for booking flow, you can follow our detailed tutorial for the same

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 plugin

‌

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)
      });
    }

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);
      });
  }

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()
  }

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
      });
  }

Social-sharing

We have written this code for Share your content on user social media.

shareAlert() {
    this.socialSharing.share();
  }

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)
      );
  }

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));
  }