How to use this starter?

How can you use the elements of this template.

Once you purchase the starter, you have all the code to your disposal. You can modify the app anyway you want, but here are two major ways it can be done.

1. Use the Taxi Booking complete Platform as a base to create your app

This means that the template is itself an Ionic app, so you don't need to create another app. You can use these template apps as a base for your platform required and just delete the pages you don't want, and add what is missing.

If you want only Taxi Booking app for user we have separate starter app for that also Taxi / Cab Booking starter

Similarly we have a separate Driver app as well Taxi Driver app starter

2. Connect your Platform apps with each other

This starter contains three apps in total

  1. Taxi Admin Dashboard

  2. Taxi / Cab Booking starter

  3. Taxi Driver app starter

all these app are connected through firebase. so, you just need to change firebase Config in each of the apps. This config can be changed in environment file found in project root.

Go to Firebase section to see how Firebase works.

User can confirm his ride from user app

User confirms Ride
bookCab() {
const obj = {};
obj['origin'] = this.origin;
obj['destination'] = this.destination;
obj['uid'] = this.userid;
this.http
.post(
'https://us-central1-cab-dashboard.cloudfunctions.net/getDriver',
obj
)
.subscribe(res => {
this.serviceProvider.driverInfo = res;
this.serviceProvider.customerLocation = obj;
});
}

This code is executed when user book a ride and we have one Firebase function which return nearby Active Driver.

When a user books a ride it will show notification on driver app and Driver can confirm the user ride from driver app

this.fire.checkUpdate(this.userId.uid).subscribe(res => {
const checkRide = res['requestRide'];
const available = res['available'];
if (checkRide === true && available === true) {
this.openAction(res);
}
});

This function will open the pop for driver

async openAction(res) {
this.customerId = res.requestedUser;
const alert = await this.alertController.create({
header: 'Alert!',
message: 'A new ride is available',
buttons: [
{
text: 'Reject',
role: 'cancel',
cssClass: 'secondary',
handler: blah => {
// reject ride firebase function
this.http
.post(
'https://us-central1-cab-dashboard.cloudfunctions.net/rejectRide',
{ userid: this.userId.uid || 'AIRmS75lVSZh1W57uk1Sugn6uTh2' }
)
.subscribe(res => {
console.log(res);
});
}
},
{
text: 'Accept',
handler: () => {
// accept ride firebase function
this.http
.post(
'https://us-central1-cab-dashboard.cloudfunctions.net/acceptRide',
{ custId: this.customerId }
)
.subscribe(res => {
const parsedObj = JSON.parse(res['_body']);
console.log(parsedObj);
this.userData = parsedObj;
this.userCard = true;
});
}
}
]
});
await alert.present();
}

and this code will handle driver action

Ride details will be shown on admin panel

this.ride
.getOrigin(this.rideInfo)
.then(res => {
const data = JSON.parse(res['_body']);
this.originAddr = data['results'][0].formatted_address;
})
.catch(err => console.log('error'));
this.ride
.getDestination(this.rideInfo)
.then(res => {
const data = JSON.parse(res['_body']);
this.destinationAddr = data['results'][0].formatted_address;
})
.catch(err => console.log('error'));
this.ride.getDriver(this.rideInfo).then(res => {
this.driver = res['email'];
});
this.ride.getCustomer(this.rideInfo).then(res => {
this.customer = res['name'];
});

3. Things to keep in mind

These apps are created with simplicity in mind. Hence, currently there are no complex logics involved in finding drivers when a ride is booked.

The booking flow can be tested on browser itself (when you are running the app on ionic serve ) .

To test the booking flow,

  • Run both User and Driver apps on ionic serve

  • Create a booking from User app, the booking will appear in Driver app at the same time.

  • When you accept the ride on Driver's app, User app will also show a ride accepted.

  • When you do not respond to a booking for some time, User app will end the booking saying - " The driver is taking too long to respond, please try again"

  • When Driver rejects a ride, User app takes user back to the home page

  • When a ride is successfully completed, the admin app, Driver app and User app show the ride in the Ride history section