User App

Check out User app pages and feature explanation

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‌

‌

This page will check the authentication of user from Firebase‌

OTP and Forgot password page

‌

OTP flow is not functional 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

Cab types 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

‌

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

Google map integration

with route shown between origin and destination

‌

Here we are using AGM for showing route in the map

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

You can learn Geolocation and geocoding in detail in our Ionic 4 tutorial here

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