Connect Ionic & Firebase using the Web SDK

Connect Ionic & Firebase

Connect Ionic & Firebase Using the Web SDK Before going further be sure that you have installed the required tools for making an ionic app locally on your system.

you need to be able to build this app, this way you will not have to be switching context between coding and fixing.

Install Node.JS

First Things first you need to ensure that you have installed node.js. in your system. if you still didn’t installed that please fo to their website.

Download the current version it will automatically install the node runtime environment and NPM in your system. This will help us to connect ionic & firebase

The second thing you will do is ensure that you have Ionic installed. you will do that by opening your terminal and typing:

npm install -g ionic

Depending on your operating system (mostly if you run on Linux or Mac) you might have to add sudo before the "npm install" command.

Check this Also

Ionic Command Cheatsheets

Create the Ionic App

Now you have installed everything and you are ready to make a ionic app

so to this, go to your terminal window and type CD Desktop It will navigate you to the desktop

cd Desktop
ionic start ionicFirebase blank --type=angular
cd ionicFirebase

The start the command will create a new app, and the –type=angular flag will create an Ionic app using angular as a framework for handling the logic.

The CLI is going to ask you some questions like if you want to add Cordova and Ionic Appflow SDK, choose no in both prompts,

we’re using Capacitor for the native functionality and we’ll cover everything we need to know about it soon.

If you are new to the terminal, what those commands do is to:

  • Move you to the Desktop .
  • Create a new Ionic app using the blank template and calling it ionicFirebase.
  • Move into the new app’s folder.

The packages that come with the project

When you are using the Ionic CLI to create a new project, it is going to do several things for you.

one of those things is making sure your project has the necessary packages it needed for developing an ionic app.

That means, the start command is going to install all of the requirements and more, here’s what package.json should look like:

"dependencies": {
  "@angular/common": "~8.1.2",
  "@angular/core": "~8.1.2",
  "@angular/forms": "~8.1.2",
  "@angular/platform-browser": "~8.1.2",
  "@angular/platform-browser-dynamic": "~8.1.2",
  "@angular/router": "~8.1.2",
  "@ionic-native/core": "^5.0.0",
  "@ionic-native/splash-screen": "^5.0.0",
  "@ionic-native/status-bar": "^5.0.0",
  "@ionic/angular": "^4.7.1",
  "core-js": "^2.5.4",
  "rxjs": "~6.5.1",
  "tslib": "^1.9.0",
  "zone.js": "~0.9.1"
},

Install Firebase to your Ionic Project

To install a new package open your Terminal again and run:

npm install @angular/fire firebase --save

It will install the latest version of the Firebase JavaScript SDK, which is what we will use in this first example. (By the way, if you’re using npm 5 you won’t need to add the –save flag.)

Initializing the Firebase App

The first thing we need to do for our app is to initialize it, which means telling Ionic how to connect to our Firebase database.

For that, we are going to be working on app.component.ts file.

The first thing you’re going to do in that file is to import Firebase, that way the file knows it needs to use it and has access to the methods we need.

We need to add the import line at the top of the file with the other imports:

import * as firebase from 'firebase/app';

This line of code right there imports the Firebase core functionality in the ‘firebase’ namespace, we’ll use it to initialize our app.

After that, we need to go into the constructor and call the initialize app function:

firebase.initializeApp();

That capacity takes a config object as a parameter, and the config object has all the API keys to associate with Firebase.

Now we need to go to our Firebase Console on the web, open a browser and navigate to https://console.firebase.google.com.

You need to login into your firebase console dashboard it looks something like this.

Connect Ionic & Firebase

Once AngularFire has been installed (the plugin that we’ll use to communicate our Ionic app with Firebase),

we need to create a new project in Firebase. To create a project, go to the firebase console, where you’ll see the following menu:

Connect Ionic & Firebase

Click on “Add app ” to see your new Firebase application’s credentials. We’ll specify these credentials to tell our Ionic application to communicate with our Firebase application.

It will ask you how you want to use the firebase SDK to choose web installation through CDN.

it will provide you following credentials somethings like this.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "<API_KEY>",
    authDomain: "<APP_DOMAIN>",
    databaseURL: "<DATABASE_URL>",
    projectId: "<PROJECT_ID>",
    storageBucket: "<STORAGE_BUCKET_URL>",
    messagingSenderId: "<MESSAGING_SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "G-8MHLS1RG7C"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

Connect Ionic & Firebase

GO back to app.component.ts, you can either pass that object to the .initializeApp() function or you can create a different file to hold your credentials and then import them inside the component page.

these credentials in a separate file is a good practice when you plan to keep a public repo of your app,

This way you can keep that file out of source control.

To do this, create a file called credentials.ts inside the src/app/ folder, the entire content of the file will be this:

// Initialize Firebase
export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};

Then, inside the app.component.ts file you can import the "firebaseConfig" object and pass it to the firebase initialization function:

import { firebaseConfig } from './credentials';

initializeApp() {
  firebase.initializeApp(firebaseConfig);
  ...
}

Check This Also

Back up and Restore Mongo DB Database Vue.js + Node: Server Side Pagination Vue.js – Simple Pagination Example React + Node.js App on AWS EC2 HTTP POST Request Angular9 Creating a simple website with Node.js, Express and EJS MEVN Stack For Beginners Why Node Js is First Choice For Deploying Large Applications

Tags: website development company in delhi|| website designing company in delhi || Website Developer in Delhi || magento development company in delhi ||  web developer in delhi