Firebase Plugin
Plugin Reference: sf-plugin-firebase on GitHub
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.

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 (cd ~/workspace/scripts && npm i -S sf-plugin-firebase)

Configuration

Installation script automatically configures project.json. Please verify following records are in place. Configuration is needed once only

iOS

Step 1
Download GoogleService-Info.plist from Firebase console and placed this file into workspace's /assets directory.
Step 2
Add firebase plugin to config/project.json.
1
"firebaseios": {
2
"path": "plugins/iOS/firebaseios.zip",
3
"active": true,
4
"crashlytics": true
5
}
Copied!

Android

Building Android Plugin It is necessary to place a few files & modification in order to use firebase plugin. Follow the below steps;
Step 1
Download google-services.json from Firebase console
Step 2
  • 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.
1
"plugins": {
2
"modules": {
3
"firebaseplugin": {
4
"path": "plugins/Android/firebaseplugin",
5
"active": true
6
}
7
}
8
},
Copied!
Step 3
  • Get senderID from firebase and edit config/project.json's senderID ⇒ (senderID = gcm_defaultSenderId )
1
"googleCloudMessaging": {
2
"senderID": "${senderID}"
3
}
Copied!
Step 4
  • Open this lines in config/Android/AndroidManifest.xml file.
1
<uses-permission android:name="android.permission.INTERNET" />
2
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
3
<uses-permission android:name="android.permission.WAKE_LOCK" />
Copied!
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;
1
dependencies {
2
implementation project(":firebaseplugin")
3
}
4
apply plugin: 'com.google.gms.google-services'
5
apply plugin: 'com.google.firebase.firebase-perf' //(Optional)
6
apply plugin: 'io.fabric'
7
crashlytics {
8
enableNdk=true
9
}
10
ext.enableCrashlytics = false
Copied!
  • Congrats you have just done Android configuration.
Note: By post-install scripts, Firebase's Android & iOS libraries/zip will be placed to appropriate paths and specify the its configuration to config/project.json

API docs

After initializing the Firebase, Firebase APIs can be used.
  • Full API Docs - You can use intelliSense on Smartface Cloud IDE for better & faster development.
  • Predefined Analitics 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.
1
import Firebase from '@smartface/plugin-firebase';
2
import Fabric from '@smartface/plugin-firebase/fabric';
3
import Crashlytics from '@smartface/plugin-firebase/fabric/crashlytics';
4
import Answers from '@smartface/plugin-firebase/fabric/answers';
5
6
import File from '@smartface/native/io/file';
7
var iOSPlistFile = new File({
8
path: 'assets://GoogleService-Info.plist'
9
});
10
var firebaseConfig = {
11
iosFile : iOSPlistFile
12
};
13
14
15
16
if (Firebase.apps().length === 0) {
17
Firebase.initializeApp(firebaseConfig);
18
Fabric.with([new Crashlytics(), new Answers()]);
19
}
Copied!

Sample Page for Crashlytics

1
import Crashlytics from '@smartface/plugin-firebase/fabric/crashlytics';
2
import Answers from '@smartface/plugin-firebase/fabric/answers';
3
4
import Page1Design from 'generated/pages/page1'; // Generated default page on ts workspace
5
6
export default class Page1 extends Page1Design {
7
constructor () {
8
super();
9
this.onShow = onShow.bind(this, this.onShow.bind(this));
10
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
11
}
12
}
13
14
function onShow(superOnShow) {
15
superOnShow();
16
17
this.statusBar.visible = true;
18
this.headerBar.visible = true;
19
20
/*
21
You can use Crashlytics.setUserIdentifier to provide an ID number, token, or hashed value that uniquely
22
identifies the end-user of your application without disclosing or transmitting any of their personal
23
information. This value is displayed right in the Fabric dashboard.
24
*/
25
Crashlytics.setUserIdentifier("UserIdentifier");
26
27
// If you would like to take advantage of advanced user identifier features, you can additionally use both:
28
Crashlytics.setUserName("UserName");
29
Crashlytics.setUserEmail("UserEmail");
30
31
/*
32
Crashlytics allows you to associate arbitrary key/value pairs with your crash reports, which are viewable
33
right from the Crashlytics dashboard. Setting keys are as easy as calling: Crashlytics.setString(key, value)
34
or one of the related methods. Options are:
35
*/
36
Crashlytics.setString("key", "value");
37
Crashlytics.setBool("key", true);
38
Crashlytics.setFloat("key", 15.5);
39
Crashlytics.setInt("key", 12);
40
41
/*
42
To log a custom event to be sent to Answers, use the following.
43
You can also include a series of custom attributes to get even deeper insight into what’s happening in your
44
app.
45
In addition to the recommended attributes for each event, you can also add custom attributes for any event.
46
To log an event with a custom attribute, use the following.
47
*/
48
Answers.logCustom('Log-Title',
49
[
50
// Value must be only string or number
51
new Answers.CustomAttribute("key1","value1"),
52
new Answers.CustomAttribute("key2",2)
53
]
54
);
55
56
}
57
58
function onLoad(superOnLoad) {
59
superOnLoad();
60
}
Copied!

Samples

All of the samples assumes that initialization has been completed

Push Notifications

1
import * as Application from '@smartface/native/application';
2
import Firebase from '@smartface/plugin-firebase';
3
/*
4
* Init code
5
*/
6
Application.onReceivedNotification = (e) => {
7
alert("Notification: " + typeof e);
8
alert("Notification: " + JSON.stringify(e.remote));
9
};
10
11
Firebase.messaging.subscribeToTopic("all"); //this triggers register for notifications
Copied!

Sample Analytics

1
import Firebase from '@smartface/plugin-firebase';
2
/*
3
* Init code
4
*/
5
Firebase.analytics.logEvent(Firebase.analytics.Event.APP_OPEN);
Copied!
Last modified 4mo ago