The User app

This app contain the user functionality.

This Taxi / cab booking App is made by expert UI developers to provide a great app UI for your own taxi booking app. Now you can start your own taxi 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. You can also choose an Ionic 3 version of this app from our store.

Initialize

To begin with, change the Google Maps API_KEY in index.html and config.xml

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

Features of this app

  • Login/Sign up along with social logins

This page will check the authentication of user from Firebase‌. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

  • OTP and Forgot password page

OTP flow is not working for this app and you can make it working for that you have to remove firebase auth and create your own auth because firebase doesn't support OTP authentication currently.‌

  • Home page for taxi booking with option for manually selecting pickup and destination location or get user current location

​‌

  • Google auto complete API integration

In This page we will get location from Google API.‌

  • Select cab type feature

Here cab type showing here is static you can make it dynamic by making new table is Firebase DB‌

  • Change payment page‌

All payment Type is also static here you can make it dynamic by adding New Table in Firebase DB.‌

  • Estimate fare page‌

Fare estimate Showing here is also Static you camn add your own API for calculating Fare Estimate Here‌

  • Edit profile page

This page is not connected To firebase for make it working you have to add new columns In user DB which we have it already‌

  • History page with details of past ride

History Page is dynamic here and connected to firebase as well.‌

  • Add card page

Add card page just adding card in Your local variables not In Firebase DB. For make it working you have to make new Table in Firebase DB named Card and link it to the used DB with his ID.‌

  • Help page

  • Booking confirmation page

  • Google map integration with route shown between origin and destination

For here we are using AGM for Showing Route Here‌

Code Structure

Cab app Code Structure

​‌

The src/app/pages folder contains the code related to‌

  • Login - Email login

  • Signup - Email signup

  • Pickup - Take Pickup location

  • Drop Off - Take Drop location

  • Profile - Edit Driver Profile

  • Customer -Request - Ride requests show

  • Fare Estimation - Calculate the fare estimation according to Travelling Distance

  • Booking Conformation - Conform the Booking

  • History - Show Previous Rides

These files use service data and functions provided in src/app/

  • auth.service.ts - For Authentication functions

  • ionCab.service.ts - For all the api calls here

Plugins

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

  • Googlemaps

We have written this code for access google map functionality

const geocoder = await new google.maps.Geocoder();
const latlng = await new google.maps.LatLng(lat, lng);
const request = { latLng: latlng };
await geocoder.geocode(request, (results, status) => {
if (status === google.maps.GeocoderStatus.OK) {
const result = results[0];
console.log(result);
const rsltAdrComponent = result.address_components;
console.log(rsltAdrComponent);
if (result !== null) {
if (rsltAdrComponent[0] !== null) {
this.block = rsltAdrComponent[0].long_name; this.street = rsltAdrComponent[2].short_name; console.log(this.street); this.building = rsltAdrComponent[1].short_name; console.log(this.building);
} if (this.serviceProvider.flag === true && this.serviceProvider.pickup !== 'India') { this.serviceProvider.showpickup = this.block + ' ' + this.street + ' ' + this.building; } else if (this.serviceProvider.pickup !== 'India') { this.serviceProvider.showdestination = this.street + this.building; }
} else { alert('No address available!'); }
}
});

For More Information about this plugin check out this link