Integrating Firebase with NativeScript

557
SHARES
2.5k
VIEWS

Today we will learn how to integrate firebase with NativeScript. NativeScript is one of the awesome mobile application development platforms. NativeScript uses Angular, XML and CSS for the visual designs, and the magical touch of incorporating native SDKs, the platform has adopted the best of both worlds. Also, nativescript allows apps to be cross-platform, which means you will write your application once and it will run on both Android and iOS devices.

Before we start working on our NativeScript project, we need to make sure that our development environment Node.js ready. So, in order to do so, let’s download Node.js. Head directly to https://nodejs.org/en/download/ and download the LTS most suitable version for your OS.

Let’s Start

First we need to install NativeScript CLI:

npm install -g nativescript

After installing NativeScript successfully, we need to add some dependencies. To know what dependencies your system is missing, simply type the following command:

tns doctor

The above command will test the system and make sure that everything is in place. If not, you’ll get the missing parts. After that, let’s create a new NativeScript Angular application:

# Create a new NativeScript project
$ tns create NativeScriptFirebase --template nativescript-template-ng-tutorial

$ cd NativeScriptFirebase

# This command will install the necessary firebase plugin and do the required configuration.
$ tns plugin add nativescript-plugin-firebase

Now open your package.json file where you will find the NativeScript id, that will look something like this:

"nativescript": {
          "id": "org.nativescript."
       }

Then copy the id value and head over to your Firebase console. Create a new Android/ iOS application (we’ve already discussed how to create a firebase application in the previous tutorials) and paste that ID over your bundle name. Download the google-service.json/GoogleServices-Info.plist files and paste google-server.json in your app/Application_Resources/Android folder if you created an Android project or if you’ve created an iOS project, then paste the GoogleServices-Info.plist in the app/Application_Resources/iOS folder.

Initializing Firebase

After that we’ve appropriately configured the Firebase part, we can initialize it inside of our application like so:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppComponent } from "./app.component";

import firebase = require('nativescript-plugin-firebase');

// We can pass a configuration option here.
firebase
  .init({})
  .then(() => console.log('Firebase is initialized!!!'))
  .catch(() => console.error('Error!'));

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

Then to run the app on your mobile device, simple run the below commands in the terminal:

# Run app on Android
tns run android

# Run app on iOS
tns run ios

If we’ve done everything correctly, we should get Firebase is initialized!!! inside of our console. This means we’ve successfully integrated firebase in our nativescript app. Happy Coding ✌🏻

Best Resources to learn Nativescript and Firebase

Leave a Reply

Your email address will not be published. Required fields are marked *