Taxi Platform Ionic 4
enappd loader

Taxi booking Platform — User, Driver and Admin app

1. Introduction

2. Benefits

3. Starter Features

4. Initial Setup

5. Running the app

- Run the app on Browser

6. Building App on device

7. How to use this starter?

8. Firebase

- Authentication Using Firebase

- Building a CRUD With Firebase & AngularFire

- Firebase Database Structure

8. The User app

- Initialize

- Features of the app

- Code Structure

- Plugins

9. The Driver app

- Initialize

- Feature of the app‌

- Code Structure

- Plugins

10. The Admin app

- Features of the app

- Code Structure

11. Firebase Functions

- Deploying Firebase functions

- Replace function calls in the app

- Details of Firebase functions used

Taxi booking Platform — User, Driver and Admin app


“Taxi Booking complete platform” is a high-quality starter app template package for Cab/Taxi Booking. Built in Ionic Framework, with pixel perfect design.



Type caption for image (optional)

Title
Subtitle
Kicker


1. Introduction


Ionic 4 is here with huge improvements. This ionic template is built using Angular 7 and Ionic Framework v4 and has everything you need to jump start your app development!

Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.


Title
Subtitle
Kicker


2. Benefits


  • Clients: Get your next app built by developers using Taxi Booking complete platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
  • Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
  • Designers: Customization of layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Taxi Booking complete platform and enjoy lots of carefully designed pages with the most required functionalities!


Title
Subtitle
Kicker


3. Starter Features


Take your Ionic Framework app to the next leveI using this starter app template. Check all the features, designs and beautiful components that you can use on your app!

All in with Ionic 4 and Angular 7

This Ionic 4 Template includes lots of Ionic 4 components coded the angular way and features that you will love. Along this documentation we will explain you how to use each of them.

100% Flexible and Customizable

The template includes lots of pages, features and components but you are free to use just what you need and delete the code you don’t. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables for the win

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Documentation

This documentation was built with a lot of effort to help you get the most out of this Ionic 4 template. If there is anything that you don’t understand please drop us an email at admin@enappd.com and we will try to explain it better.

Main Features and Pages

Go to the our site to see the main Features and Pages of this amazing Ionic 4 Taxi Booking complete platform .


Title
Subtitle
Kicker


4. Initial Setup


This page describes the initial setup steps. Follow the steps to get the app setup and running on your dev environment, as well as on your devices.

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.

Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

Git

Git is a distributed version-control system for tracking changes in source code during software development. Although it’s not required, we highly recommend using Git for your app development.

First, install the command-line utility from the download page. For a GUI client, we recommend SourceTree. To verify the installation, open a new terminal window and run:

$ git --version

You can also use Git CLI to perform all Git related tasks. A good description of all Git CLI commands is given here.

Install the app dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd myApp
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same.

Code Editor

Personally we use VS Code , however, many people like Atom. You are free to choose any code editor you like.

Run the App

Now we have everything installed, we can test our Ionic App.

Go to Running the App section to see how to do it.


Title
Subtitle
Kicker


5. Running the app


Steps to follow for running your app on browser, device or deploy as PWA.


Title
Subtitle
Kicker


- Run the app on Browser


Once you have the initial setup done, it’s time to run your app. First we’ll run the app in development environment. In development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

To run the app on browser, run

$ ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost url (usually it is localhost:8100). Your command line will look like this



Type caption for image (optional)

The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full screen view.

To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode.

More about browser development tools can be found out in following links


Title
Subtitle
Kicker


6. Building App on device


Learn how to build the app on device and how to deploy it on a Firebase based hosting in quick steps

Build the app for Android

Once you have modified your app as per your requirements, you can start building the app for Android. Add an android platform to the project by running

$ ionic cordova platform add android

This step will add an android platform to the project.

Previous step will require Android Studio preinstalled on your system. You can also install Android SDK without Android Studio, but that is not the recommended way.

Now prepare the platform for a build

$ ionic cordova prepare android

And run the app on your device or simulator by running

$ ionic cordova run android
More information in ionic documentation

Build the app for iOS

An iOS app can be built only on an Apple based system. Add an iOS platform to the project by running

$ ionic cordova platform add iOS

This step will add an iOS platform to the project.

Previous step will require Xcode preinstalled on your system. You will also need an Apple developer license and proper provisioning profiles to build the app on device.

Now prepare the platform for a build

$ ionic cordova prepare ios

And run the app on your device or simulator by running

$ ionic cordova run ios

OR, run the app using XCode directly.

More information in ionic documentation

Title
Subtitle
Kicker


7. 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 three apps are connected to each other via firebase. Hence, you just need to change firebase Config in each of the apps. This config can be changed in environment file found in project root.



Type caption for image (optional)

Go to Firebase section to see how Firebase works.

User can confirm his ride from user app



Type caption for image (optional)
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.

Driver confirms the user ride from driver app

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



Type caption for image (optional)
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']);
this.userData = parsedObj;
this.userCard = true;
});
}
}]
});

and this code will handle driver action

Ride details will be shown on admin panel



Type caption for image (optional)
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



Title
Subtitle
Kicker


8. Firebase


Use Firebase authentication, upload, storage, CRUD functionalities


Title
Subtitle
Kicker


- Authentication Using Firebase


This starter provides you with Login, Signup and Reset Password functionality using Firebase Authentication. Along with this, there is a booking functionality connecting all 3 apps together, that is explained in other sections.‌

You can test the authentication in the already provided app code.‌

When you want to attach the authentication process to your own Firebase project, simply get the config parameters from Firebase console.‌



Type caption for image (optional)

Once you have the config parameters, paste them in the environment files in the starter code. There are two environment files, one for dev and one for prod app.‌



Type caption for image (optional)

This configuration can be imported in app.module.ts and main.ts by importing the environment

import { environment } from 'src/environments/environment';


Type caption for image (optional)

Make sure to have the config in the environment.prod.ts when you create a production build‌.

Enable the intended Login methods

Firebase has several Login methods in the console. For this platform to work, you need to enable Email/password method in Firebase Console as shown below



Type caption for image (optional)

Title
Subtitle
Kicker


- Building a CRUD With Firebase & AngularFire


You can open your app.module.ts and import everything we'll be using, this is the only time you'll see this file

import { AngularFireModule } from 'angularfire2';import { AngularFireDatabaseModule } from 'angularfire2/database';
imports: [    AngularFireModule.initializeApp(firebaseConfig),    AngularFireDatabaseModle  ],
AngularFireModule and AngularFireDatabaseModule are both responsible for crud operation in Firebase‌

Code sample for read data flow from Firebase

this.afs.collection('completedRides')
.valueChanges()
.subscribe(res => {this.rides = res;});

Code sample to Write data flow from Firebase

this.db.collection('customers')
.doc(uid)
.set({
name: `${user['first_name']} ${user['last_name']}`,
email: user['email'],
phone: `${user['area']}-${user['phone']}`});

Code sample to Update data flow from Firebase

this.db.collection('drivers')
.doc(uid)
.update({available: status });

Code sample to Delete data flow from Firebase

this.db.collection('drivers').doc(uid).delete()

Title
Subtitle
Kicker


- Firebase Database Structure




Type caption for image (optional)


Type caption for image (optional)


Type caption for image (optional)

Title
Subtitle
Kicker


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


Title
Subtitle
Kicker


- Initialize


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



Type caption for image (optional)


Type caption for image (optional)


Type caption for image (optional)

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


Title
Subtitle
Kicker


- Features of the app


  • Login/Sign up along with social logins


Type caption for image (optional)

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


Type caption for image (optional)

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


Type caption for image (optional)

  • Google auto complete API integration


Type caption for image (optional)

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‌



Type caption for image (optional)
  • Change payment page‌


Type caption for image (optional)

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

  • Estimate fare page‌


Type caption for image (optional)

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

  • Edit profile page


Type caption for image (optional)

This page is not connected To firebase. To make it work, you will have to add new columns in user DB. 

  • History page with details of past ride


Type caption for image (optional)

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

  • Add card page


Type caption for image (optional)

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


Type caption for image (optional)
  • Booking confirmation page


Type caption for image (optional)
  • Google map integration with route shown between origin and destination


Type caption for image (optional)

For here we are using AGM for Showing Route Here‌


Title
Subtitle
Kicker


- Code Structure


Cab app Code Structure



Type caption for image (optional)

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

Title
Subtitle
Kicker


- 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



Type caption for image (optional)

Title
Subtitle
Kicker


9. The Driver app


This app contain the Driver functionality.

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.


Title
Subtitle
Kicker


- Initialize


To begin with, change the Google Maps API_KEY in package.json under uk.co.workingedge.phonegap.plugin.launchnavigator plugin.



Type caption for image (optional)

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


Title
Subtitle
Kicker


- Feature of the app‌


  • Vehicle tracking location


Type caption for image (optional)
  • Driver offline/Online feature


Type caption for image (optional)

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


Type caption for image (optional)

It will show the Driver ride history with days and price and it will get data from firebase.‌

  • Add Payment/card page


Type caption for image (optional)

In this page, driver can add the payment card.‌

  • Login/Sign up page


Type caption for image (optional)

This page will check the authentication of driver from Firebase.‌ You can also add Social logins here. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

  • OTP Verification page


Type caption for image (optional)

This page will verify the driver OTP which comes on his mobile number.‌

  • Add vehicle page with vehicle list


Type caption for image (optional)

In this page, the driver can add his vehicle‌

  • Wallet page with multiple payment methods option


Type caption for image (optional)
  • Document Mangement page


Type caption for image (optional)

This page shows the driver Documents.‌

  • Notification page


Type caption for image (optional)

This page shows all the notifications when driver gets rides, offers etc.‌

  • Profile Update page


Type caption for image (optional)

Driver can edit profile and it will update on firebase.‌

  • User Requests page


Type caption for image (optional)

This page shows the total current requests of user and driver can pick any one of them.‌

  • Ride/Customer Details page


Type caption for image (optional)

After accepting the request, the driver can see the detail of customer and driver can call, Message and cancel the user request‌

  • Chat/Message/Call feature page


Type caption for image (optional)

The driver can chat with the user directly‌

  • Invite your friend page


Type caption for image (optional)

It will help to invite other users

  • Invite sharing with SocialShare plugin


Type caption for image (optional)

This page shows the driver contact list which is used to share the invite code of the driver‌.


Title
Subtitle
Kicker


- Code Structure


Driver app Code Structure‌



Type caption for image (optional)

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

Title
Subtitle
Kicker


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

For More Information about this plugin check out this link

  • 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

  • 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

  • Social-sharing

We have written this code for Share your content on user’s 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



Type caption for image (optional)

Title
Subtitle
Kicker


10. The Admin app


This app contains admin functionality for this platform.

This Admin Dashboard app for taxi booking platform is made by expert UI developers to provide a great app UI for your own Taxi booking, Taxi driver and Admin Dashboard app. Now you can start your own complete Taxi platform app with these functionalities. This is a great starting point for app development, as almost all the work is done here for an MVP. All pages and components are set. Hence, all you need here is to modify the platform further as per your requirements. This app has many features common with popular apps like Uber, Ola, etc.


Title
Subtitle
Kicker


- Features of the app


  • Login


Type caption for image (optional)

This page will check the authentication of the driver from Firebase.

  • Firebase authentication


Type caption for image (optional)
  • Driver details page


Type caption for image (optional)

This page shows the driver details with approved or not approved tabs and this page is connected with firebase. So this will update when it gets new data

  • Driver approval functionality


Type caption for image (optional)

You can approve the driver using the toggle and this page is connected with firebase. So this will update when it gets new data.

  • Rides Records with route map


Type caption for image (optional)

This page shows the total ride history in admin panel and this page is connected with firebase. So this page updates when it gets new data.

  • Map included


Type caption for image (optional)

This page shows the ride details and this page is connected with firebase.

  • Pickup and drop location


Type caption for image (optional)

This page also shows the ride details and this page is connected with firebase.

  • Details of all Drivers and Users


Type caption for image (optional)

This page shows all customer details in our platform and this page is connected with firebase. So this will update when it gets new data.


Title
Subtitle
Kicker


- Code Structure




Type caption for image (optional)

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

  • Login — Email login
  • Ride history — maintain the ride history
  • Driver — check the driver status
  • Customer — show customer details

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

  • rideInfo.service.ts - For all the API calls here

Title
Subtitle
Kicker


11. Firebase Functions


Learn what Firebase functions are used in Taxi booking platform

There are several functions that are performed using Firebase cloud functions. Before making changes in the functions or running the app, make sure you deploy the Firebase functions to your own firebase project.


Title
Subtitle
Kicker


- Deploying Firebase functions


Firebase functions can be used after you install Firebase-tools in your system globally

$ npm install firebase-tools -g

A firebase function can be deployed by running the command

$ firebase deploy --only functions

You can confirm the deployment of your functions by checking in the Firebase console. It will show you a list of all the functions you deployed. For Taxi Booking Platform, it should show you total 5 functions as following



Type caption for image (optional)

Title
Subtitle
Kicker


- Replace function calls in the app


Once you deploy your functions, every function will get a unique URL for calling. Make sure you replace the existing function call URLs with these new URLs, otherwise the app will keep calling the old Firebase project only.

You can find out the existing Function URLs by searching for https://us-central in the whole app. Replace all instances of old URLs you find.

To learn how to deploy a Firebase function in detail, check out our blog — Firebase Cloud function in Ionic 4


Title
Subtitle
Kicker


- Details of Firebase functions used


Following are the cloud function being used in Taxi Booking Platform

  1. getDriver — This function is called when a user books a ride. This function updates the user and Driver data to show that a ride is being requested. The response of this function is the driver’s data.
  2. rejectRide — When the driver rejects a ride, this function is called. This updates user and driver records, showing that Driver is now available for a new ride, and the user can also book a different ride.
  3. acceptRide — When the driver accepts a ride, this function is called. This updates user and driver records, showing that Driver is now not available for a new ride, and the user can also not book a different ride.
  4. drivernotRespond — When the driver does not respond to a ride request for a specific amount of time set in the app, this function is automatically called. This function cancels the ride and shows an alert to the user that “Driver did not respond”
  5. completeRide — This function is called when a ride is completed from Driver’s side. This ends the ride for User and Driver both, updates their record to show that Driver is now available for a new ride and User can now book a new ride.

To know more about how to create, implement, deploy and test Firebase cloud functions, please refer to our blog — Firebase Cloud function in Ionic 4


Title
Subtitle
Kicker



Taxi booking Platform — User, Driver and Admin app

“Taxi Booking complete platform” is a high-quality starter app template package for Cab/Taxi Booking. Built in Ionic Framework, with pixel perfect design.



Type caption for image (optional)

1. Introduction

Ionic 4 is here with huge improvements. This ionic template is built using Angular 7 and Ionic Framework v4 and has everything you need to jump start your app development!

Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.

2. Benefits

  • Clients: Get your next app built by developers using Taxi Booking complete platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
  • Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
  • Designers: Customization of layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Taxi Booking complete platform and enjoy lots of carefully designed pages with the most required functionalities!

3. Starter Features

Take your Ionic Framework app to the next leveI using this starter app template. Check all the features, designs and beautiful components that you can use on your app!

All in with Ionic 4 and Angular 7

This Ionic 4 Template includes lots of Ionic 4 components coded the angular way and features that you will love. Along this documentation we will explain you how to use each of them.

100% Flexible and Customizable

The template includes lots of pages, features and components but you are free to use just what you need and delete the code you don’t. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables for the win

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Documentation

This documentation was built with a lot of effort to help you get the most out of this Ionic 4 template. If there is anything that you don’t understand please drop us an email at admin@enappd.com and we will try to explain it better.

Main Features and Pages

Go to the our site to see the main Features and Pages of this amazing Ionic 4 Taxi Booking complete platform .

4. Initial Setup

This page describes the initial setup steps. Follow the steps to get the app setup and running on your dev environment, as well as on your devices.

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.

Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

Git

Git is a distributed version-control system for tracking changes in source code during software development. Although it’s not required, we highly recommend using Git for your app development.

First, install the command-line utility from the download page. For a GUI client, we recommend SourceTree. To verify the installation, open a new terminal window and run:

$ git --version

You can also use Git CLI to perform all Git related tasks. A good description of all Git CLI commands is given here.

Install the app dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd myApp
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same.

Code Editor

Personally we use VS Code , however, many people like Atom. You are free to choose any code editor you like.

Run the App

Now we have everything installed, we can test our Ionic App.

Go to Running the App section to see how to do it.

5. Running the app

Steps to follow for running your app on browser, device or deploy as PWA.

- Run the app on Browser

Once you have the initial setup done, it’s time to run your app. First we’ll run the app in development environment. In development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

To run the app on browser, run

$ ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost url (usually it is localhost:8100). Your command line will look like this



Type caption for image (optional)

The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full screen view.

To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode.

More about browser development tools can be found out in following links

6. Building App on device

Learn how to build the app on device and how to deploy it on a Firebase based hosting in quick steps

Build the app for Android

Once you have modified your app as per your requirements, you can start building the app for Android. Add an android platform to the project by running

$ ionic cordova platform add android

This step will add an android platform to the project.

Previous step will require Android Studio preinstalled on your system. You can also install Android SDK without Android Studio, but that is not the recommended way.

Now prepare the platform for a build

$ ionic cordova prepare android

And run the app on your device or simulator by running

$ ionic cordova run android
More information in ionic documentation

Build the app for iOS

An iOS app can be built only on an Apple based system. Add an iOS platform to the project by running

$ ionic cordova platform add iOS

This step will add an iOS platform to the project.

Previous step will require Xcode preinstalled on your system. You will also need an Apple developer license and proper provisioning profiles to build the app on device.

Now prepare the platform for a build

$ ionic cordova prepare ios

And run the app on your device or simulator by running

$ ionic cordova run ios

OR, run the app using XCode directly.

More information in ionic documentation

7. 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 three apps are connected to each other via firebase. Hence, you just need to change firebase Config in each of the apps. This config can be changed in environment file found in project root.



Type caption for image (optional)

Go to Firebase section to see how Firebase works.

User can confirm his ride from user app



Type caption for image (optional)
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.

Driver confirms the user ride from driver app

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



Type caption for image (optional)
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']);
this.userData = parsedObj;
this.userCard = true;
});
}
}]
});

and this code will handle driver action

Ride details will be shown on admin panel



Type caption for image (optional)
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


8. Firebase

Use Firebase authentication, upload, storage, CRUD functionalities

- Authentication Using Firebase

This starter provides you with Login, Signup and Reset Password functionality using Firebase Authentication. Along with this, there is a booking functionality connecting all 3 apps together, that is explained in other sections.‌

You can test the authentication in the already provided app code.‌

When you want to attach the authentication process to your own Firebase project, simply get the config parameters from Firebase console.‌



Type caption for image (optional)

Once you have the config parameters, paste them in the environment files in the starter code. There are two environment files, one for dev and one for prod app.‌



Type caption for image (optional)

This configuration can be imported in app.module.ts and main.ts by importing the environment

import { environment } from 'src/environments/environment';


Type caption for image (optional)

Make sure to have the config in the environment.prod.ts when you create a production build‌.

Enable the intended Login methods

Firebase has several Login methods in the console. For this platform to work, you need to enable Email/password method in Firebase Console as shown below



Type caption for image (optional)

- Building a CRUD With Firebase & AngularFire

You can open your app.module.ts and import everything we'll be using, this is the only time you'll see this file

import { AngularFireModule } from 'angularfire2';import { AngularFireDatabaseModule } from 'angularfire2/database';
imports: [    AngularFireModule.initializeApp(firebaseConfig),    AngularFireDatabaseModle  ],
AngularFireModule and AngularFireDatabaseModule are both responsible for crud operation in Firebase‌

Code sample for read data flow from Firebase

this.afs.collection('completedRides')
.valueChanges()
.subscribe(res => {this.rides = res;});

Code sample to Write data flow from Firebase

this.db.collection('customers')
.doc(uid)
.set({
name: `${user['first_name']} ${user['last_name']}`,
email: user['email'],
phone: `${user['area']}-${user['phone']}`});

Code sample to Update data flow from Firebase

this.db.collection('drivers')
.doc(uid)
.update({available: status });

Code sample to Delete data flow from Firebase

this.db.collection('drivers').doc(uid).delete()

- Firebase Database Structure



Type caption for image (optional)


Type caption for image (optional)


Type caption for image (optional)

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



Type caption for image (optional)


Type caption for image (optional)


Type caption for image (optional)

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 the app

  • Login/Sign up along with social logins


Type caption for image (optional)

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


Type caption for image (optional)

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


Type caption for image (optional)

  • Google auto complete API integration


Type caption for image (optional)

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‌



Type caption for image (optional)
  • Change payment page‌


Type caption for image (optional)

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

  • Estimate fare page‌


Type caption for image (optional)

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

  • Edit profile page


Type caption for image (optional)

This page is not connected To firebase. To make it work, you will have to add new columns in user DB. 

  • History page with details of past ride


Type caption for image (optional)

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

  • Add card page


Type caption for image (optional)

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


Type caption for image (optional)
  • Booking confirmation page


Type caption for image (optional)
  • Google map integration with route shown between origin and destination


Type caption for image (optional)

For here we are using AGM for Showing Route Here‌

- Code Structure

Cab app Code Structure



Type caption for image (optional)

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



Type caption for image (optional)

9. The Driver app

This app contain the Driver functionality.

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.

- Initialize

To begin with, change the Google Maps API_KEY in package.json under uk.co.workingedge.phonegap.plugin.launchnavigator plugin.



Type caption for image (optional)

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

- Feature of the app‌

  • Vehicle tracking location


Type caption for image (optional)
  • Driver offline/Online feature


Type caption for image (optional)

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


Type caption for image (optional)

It will show the Driver ride history with days and price and it will get data from firebase.‌

  • Add Payment/card page


Type caption for image (optional)

In this page, driver can add the payment card.‌

  • Login/Sign up page


Type caption for image (optional)

This page will check the authentication of driver from Firebase.‌ You can also add Social logins here. To learn how to setup social logins, check our blogs for Ionic 4 Facebook Login and Ionic 4 Twitter Login

  • OTP Verification page


Type caption for image (optional)

This page will verify the driver OTP which comes on his mobile number.‌

  • Add vehicle page with vehicle list


Type caption for image (optional)

In this page, the driver can add his vehicle‌

  • Wallet page with multiple payment methods option


Type caption for image (optional)
  • Document Mangement page


Type caption for image (optional)

This page shows the driver Documents.‌

  • Notification page


Type caption for image (optional)

This page shows all the notifications when driver gets rides, offers etc.‌

  • Profile Update page


Type caption for image (optional)

Driver can edit profile and it will update on firebase.‌

  • User Requests page


Type caption for image (optional)

This page shows the total current requests of user and driver can pick any one of them.‌

  • Ride/Customer Details page


Type caption for image (optional)

After accepting the request, the driver can see the detail of customer and driver can call, Message and cancel the user request‌

  • Chat/Message/Call feature page


Type caption for image (optional)

The driver can chat with the user directly‌

  • Invite your friend page


Type caption for image (optional)

It will help to invite other users

  • Invite sharing with SocialShare plugin


Type caption for image (optional)

This page shows the driver contact list which is used to share the invite code of the driver‌.

- Code Structure

Driver app Code Structure‌



Type caption for image (optional)

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

For More Information about this plugin check out this link

  • 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

  • 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

  • Social-sharing

We have written this code for Share your content on user’s 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



Type caption for image (optional)

10. The Admin app

This app contains admin functionality for this platform.

This Admin Dashboard app for taxi booking platform is made by expert UI developers to provide a great app UI for your own Taxi booking, Taxi driver and Admin Dashboard app. Now you can start your own complete Taxi platform app with these functionalities. This is a great starting point for app development, as almost all the work is done here for an MVP. All pages and components are set. Hence, all you need here is to modify the platform further as per your requirements. This app has many features common with popular apps like Uber, Ola, etc.

- Features of the app

  • Login


Type caption for image (optional)

This page will check the authentication of the driver from Firebase.

  • Firebase authentication


Type caption for image (optional)
  • Driver details page


Type caption for image (optional)

This page shows the driver details with approved or not approved tabs and this page is connected with firebase. So this will update when it gets new data

  • Driver approval functionality


Type caption for image (optional)

You can approve the driver using the toggle and this page is connected with firebase. So this will update when it gets new data.

  • Rides Records with route map


Type caption for image (optional)

This page shows the total ride history in admin panel and this page is connected with firebase. So this page updates when it gets new data.

  • Map included


Type caption for image (optional)

This page shows the ride details and this page is connected with firebase.

  • Pickup and drop location


Type caption for image (optional)

This page also shows the ride details and this page is connected with firebase.

  • Details of all Drivers and Users


Type caption for image (optional)

This page shows all customer details in our platform and this page is connected with firebase. So this will update when it gets new data.

- Code Structure



Type caption for image (optional)

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

  • Login — Email login
  • Ride history — maintain the ride history
  • Driver — check the driver status
  • Customer — show customer details

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

  • rideInfo.service.ts - For all the API calls here

11. Firebase Functions

Learn what Firebase functions are used in Taxi booking platform

There are several functions that are performed using Firebase cloud functions. Before making changes in the functions or running the app, make sure you deploy the Firebase functions to your own firebase project.

- Deploying Firebase functions

Firebase functions can be used after you install Firebase-tools in your system globally

$ npm install firebase-tools -g

A firebase function can be deployed by running the command

$ firebase deploy --only functions

You can confirm the deployment of your functions by checking in the Firebase console. It will show you a list of all the functions you deployed. For Taxi Booking Platform, it should show you total 5 functions as following



Type caption for image (optional)

- Replace function calls in the app

Once you deploy your functions, every function will get a unique URL for calling. Make sure you replace the existing function call URLs with these new URLs, otherwise the app will keep calling the old Firebase project only.

You can find out the existing Function URLs by searching for https://us-central in the whole app. Replace all instances of old URLs you find.

To learn how to deploy a Firebase function in detail, check out our blog — Firebase Cloud function in Ionic 4

- Details of Firebase functions used

Following are the cloud function being used in Taxi Booking Platform

  1. getDriver — This function is called when a user books a ride. This function updates the user and Driver data to show that a ride is being requested. The response of this function is the driver’s data.
  2. rejectRide — When the driver rejects a ride, this function is called. This updates user and driver records, showing that Driver is now available for a new ride, and the user can also book a different ride.
  3. acceptRide — When the driver accepts a ride, this function is called. This updates user and driver records, showing that Driver is now not available for a new ride, and the user can also not book a different ride.
  4. drivernotRespond — When the driver does not respond to a ride request for a specific amount of time set in the app, this function is automatically called. This function cancels the ride and shows an alert to the user that “Driver did not respond”
  5. completeRide — This function is called when a ride is completed from Driver’s side. This ends the ride for User and Driver both, updates their record to show that Driver is now available for a new ride and User can now book a new ride.

To know more about how to create, implement, deploy and test Firebase cloud functions, please refer to our blog — Firebase Cloud function in Ionic 4

_doc_end_


Title
Subtitle
Kicker