Ionic 5 - Taxi Booking Platform with Firebase
  • Ionic 5 Taxi Complete Platform using Firebase - User, Driver Admin Apps
  • Why use this Starter
  • Setup and Deployment
    • Initial Dev Environment Setup
    • Running the App (Web Browser)
    • Deploying app as PWA
    • Building App on device
  • How to Use this Starter
    • Taxi Booking Complete Setup
    • Taxi User App - Setup
    • Taxi Driver App - Setup
    • Taxi Admin App - Setup
    • Testing Complete Platform
  • Platform Features
    • User App
    • Driver App
    • Admin App
  • Firebase Setup
    • New Firebase Project Setup
    • Firebase Integration Into User App
  • Extra
    • App Specific Requirements
    • Add More Features
    • FAQs
    • Firebase Setup (Ionic 4 Version)
    • Firebase Functions (Ionic 4 version)
      • Overview
      • Firebase Function in Code
      • How to Deploy Firebase Functions
Powered by GitBook
On this page
  • 1. Editing environment files in project
  • 2. Creating database in Firebase
  • 3. Enable Sign In Provider
  • 4. Sign in using our email id
  • 5. Test the user app
  • Taxi driver App

Was this helpful?

  1. Firebase Setup

Firebase Integration Into User App

PreviousNew Firebase Project SetupNextApp Specific Requirements

Last updated 5 years ago

Was this helpful?

1. Editing environment files in project

Open the project in your code editor and navigate as follows:-

Src -> Environments -> “environments.ts”

The code to be replaced is shown and highlighted below. Replace the highlighted code below with the code you copied to text editor from firebase in previous step.

Now open environments.prod.ts file from Environments folder.

The code to be replaced is shown and highlighted below. Cut the highlighted code shown below. Paste the code you copied to text editor from firebase in previous step here.

2. Creating database in Firebase

You should see the following screen where your app will be added to firebase.

Click on “database” shown under the "Develop" section.It should show you the following screen and click on “Create database”

Select “Start in test mode” and click “Next” as shown below.

Click on “Done”. It should show you the following screen.

Open your app running on localhost as shown below and refresh it.

Click on “register” and it should show you the following screen. Fill your details to sign up as a user for the app and click “Next”.

As you can see below the sign in provider is disabled for this firebase project. Click on "Done"

3. Enable Sign In Provider

Let us go to Firebase console to enable "sign in". Click on “Authentication” shown under the "Develop" section. It should show you the following screen.

Click on "Sign in method". It should show you the following screen.

Select the "Email/Password" at the top of this list of "Provider" (which is disabled currently). It should show you the following screen. "Enable" the first option and make sure that second one is "diasbled" and click “Save”.

4. Sign in using our email id

Let us go back to our app running on localhost as shown below and click “Next”.

You should be able to login now. Screen showing your current location on the map should appear now, as shown below.

5. Test the user app

Add a "Pick up location" and a "Destination location". Book a ride and you should be able to see the following screen after waiting for a while.

Taxi driver App

Now we have successfully completed running the Taxi user App. Let us run the taxi driver app so that we can test our Taxi app completely.

The image shown below is the same screen we saw after competing all the steps of section in firebase console. Click on “Continue to console” button.

Go to section to see how to do it.

New Firebase Project Setup
Driver App Setup
Editing environment files in project
Creating database in Firebase
Enable Sign In Provider
Sign in using demo email ID
Test the user app