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 Uber, Ola 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.‌

Login/Sign up page

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

• Implement push notification in Ionic apps

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

You can find more details on Camera integration in Ionic 4 App in our tutorial here

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

You can find more details on Geolocation integration in Ionic 4 App in our tutorial here

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