@smartface/plugin-firebase

Firebase plugin from Smartface

Firebase plugin

As a plugin, this plugin only works when published. Will not perform any action with regular run-on-device scenarios. Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.

Migration Notice

If your project already has firebase plugin version 6, there are small changes to take care of after migrating to version 7.

Together with version 7.0.0, the module is refactored using TypeScript. There are a few changes to take note of:

• The file imports have been changed. The following changes are:
  1. firebaseAnalytics -> Analytics
  2. firebaseApp -> App
  3. firebaseAuth -> Auth
  4. firebaseCrashlytics -> Crashlytics
  5. firebaseMessaging -> Messaging
  6. firebaseUser -> User

Since the file structure is changed, the file imports have been changed as well.

Old Usage:

import Firebase from '@smartface/plugin-firebase';
import Crashlytics from '@smartface/plugin-firebase/firebaseCrashlytics';
import Analytics from '@smartface/plugin-firebase/firebaseAnalytics';

New Usage:

import Firebase, { Crashlytics, Analytics } from '@smartface/plugin-firebase';

Other usages and functionalities are kept the same. You can use the other parts without changing anything.

Installation

Smartface Firebase plugin can be installed via npm easily from our public npm repository. The installation is pretty easy via Smartface Cloud IDE.

• Run command in terminal on script directory yarn add @smartface/firebase

Configuration

Some plugin configurations are automatically updated by the plugin itself, some need extra actions. Configurations are needed only once within the plugin installation.

iOS

You can manually access the Firebaseios.zip file from the link below.

https://cd.smartface.io/repository/smartfacefirebase/ios/VERSION_NUMBER/firebaseios.zip

Sample link:

https://cd.smartface.io/repository/smartfacefirebase/ios/3.0.2/firebaseios.zip

Step 1

Download GoogleService-Info.plist from Firebase console and placed this file into workspace's assets directory.

Step 2

This step is automatically configured by postinstall script. It is advised to double check on your project.

Add firebase plugin to config/project.json.

"firebaseios": {
  "path": "plugins/iOS/firebaseios.zip",
  "active": true,
  "crashlytics": true
}

Android

Unlike iOS, firebase plugin on Android needs to be built. Please follow this steps to enable Smartface to automatically build the plugin.

Step 1

Download google-services.json from Firebase console

Step 2

This step is automatically configured by postinstall script. It is advised to double check on your project.

• Place google-services.json file into ~/workspace/config/Android
• This repository contains prepared android library project under ~/Native/Android directory.
• Finally, specify firebase plugin library to config/project.json.

"plugins": {
  "modules": {
    "firebaseplugin": {
      "path": "plugins/Android/firebaseplugin",
      "active": true
    }
  }
},

Step 3

• Get senderID from firebase and edit config/project.json's senderID ⇒ (senderID = gcm_defaultSenderId )

"googleCloudMessaging": {
  "senderID": "${senderID}"
}

Step 4

• Open this lines in config/Android/AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Step 5

• By default, crashlytic and its ndk is disabled so enable it, apply plugins & specify library project in dependencies.gradle which is located under ~/workspace/config/Android folder. Such as;

apply plugin: 'com.google.firebase.crashlytics'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.firebase-perf' //(Optional)
dependencies {
implementation project(":firebaseplugin")
}
googleServices.disableVersionCheck = true

• (Optional) Add Firebase Performance Monitoring

apply plugin:  'com.google.firebase.firebase-perf' //(Optional)

• (Optional) Add nativeSymbolUploadEnabled after apply plugin statements. This allows your app to process and upload native symbols to Crashlytics so you can view properly-symbolicated stack traces. Smartface framework contains CPP libraries. To investigate the problems with Smartface professionals, it's recommend.

android {
    buildTypes {
        release {
            firebaseCrashlytics {
                nativeSymbolUploadEnabled true
            }
        }
    }
}

If nativeSymbolUploadEnabled is true then add this below statement to your build process.

//call after assembling the project. eg ./gradlew app:assembleBUILT_TYPES
> ./gradlew app:uploadCrashlyticsSymbolFile$BUILT_TYPES

API docs

After initializing the Firebase, Firebase APIs can be used.

• API Docs - You can use intelliSense on Smartface Cloud IDE for better & faster development.
• Predefined Analytics Events - You can access the values from code via intelliSense on Firebase.analytics.Events

Crashlytics

• Initialize your SDK using the following code snippet: (You must write this code in app.ts)

Firebase has to be initialized before any use.

import Firebase from '@smartface/plugin-firebase';
import File from '@smartface/native/io/file';
import { Crashlytics } from '@smartface/plugin-firebase';
import { AssetsUriScheme } from '@smartface/native/io/path';

const iOSPlistFile = new File({
    path: `${AssetsUriScheme}GoogleService-Info.plist`
});
const firebaseConfig = {
    iosFile : iOSPlistFile
};

if (Firebase.apps().length === 0) {
  Firebase.initializeApp(firebaseConfig);
  Crashlytics.ios.with([new Crashlytics()]);
}

Samples

All of the samples assumes that initialization has been completed

Crashlytics

import { Analytics } from '@smartface/plugin-firebase';

import Page1Design from 'generated/pages/page1'; // Generated default page on ts workspace

export default class Page1 extends Page1Design {
    constructor () {
    super();
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
  }
}

function onShow(superOnShow) {
    superOnShow();
     /*
      You can use Crashlytics.setUserIdentifier to provide an ID number, token, or hashed value that uniquely     
      identifies the end-user of your application without disclosing or transmitting any of their personal 
      information. This value is displayed right in the FirebaseCrashlytics dashboard.
    */
    FirebaseCrashlytics.setUserIdentifier("UserIdentifier");
    
    // If you would like to take advantage of advanced user identifier features, you can additionally use both:
    FirebaseCrashlytics.ios.setUserName("UserName");
    FirebaseCrashlytics.ios.setUserEmail("UserEmail");
    
    /*
      Crashlytics allows you to associate arbitrary key/value pairs with your crash reports, which are viewable 
      right from the Crashlytics dashboard. Setting keys are as easy as calling: Crashlytics.setString(key, value) 
      or one of the related methods. Options are:
    */
    FirebaseCrashlytics.setString("keyString", "value");
    FirebaseCrashlytics.setBool("setBool", true);
    FirebaseCrashlytics.setFloat("setFloat", 15.5);
    FirebaseCrashlytics.setInt("setInt", 12);
}

function onLoad(superOnLoad) {
    superOnLoad();
}

Push Notifications

import Application from '@smartface/native/application';
import Firebase from '@smartface/plugin-firebase';
/*
 * Init code
 */
Application.on(Application.Events.ReceivedNotification) = (e) => {
    alert("Notification: " + typeof e);
    alert("Notification: " + JSON.stringify(e.remote));
};

Firebase.messaging.subscribeToTopic("all"); //this triggers register for notifications

For Push Notification details and more samples&usage on Smartface, please refer to this documentation on Smartface Docs:

Push Notification

Analytics

import Firebase from '@smartface/plugin-firebase';
/*
 * Init code
 */
Firebase.analytics.logEvent(Firebase.analytics.Event.APP_OPEN);

License

This project is licensed under the terms of the MIT license. See the LICENSE file. Within the scope of this license, all modifications to the source code, regardless of the fact that it is used commercially or not, shall be committed as a contribution back to this repository.