Firebase
Configuration

Configuration of Firebase Project with Ensemble App

Application's performance significantly increases with ⁤Integrating Firebase with our Ensemble project. ⁤⁤Firebase offers some services, such as real-time databases, authentication, analytics, and cloud messaging, which can help streamline backend development, improve user engagement, and provide deep insights into user behavior. ⁤⁤Using Firebase with Ensemble allows us to focus more on our application's core features and user experience, while Firebase handles the backend. ⁤Now, let's dive into the configuration steps:

Prerequisites

Before we start configuration, ensure that we have the following in place:

  1. Ensemble project to integrate with Firebase.
  2. Head over to the Firebase console (opens in a new tab) and create a new project or use an existing one.

1. Registering our App with Firebase

Firebase supports integration with various app platforms. Here's a breakdown for each platform:

All Apps

Android

  • Click the Android icon(looks like a little robot) to start the setup.
  • Type the unique "Android Package Name". Make sure it matches our app's exact name, and remember, it's case-sensitive!

To learn more about how to get our Android package name for ensemble application, click here.

  • Click "Register app" to complete this step.
  • Finally, download a file called "google-services.json". This file holds all the secret handshake information Firebase needs to talk to our app.

iOS

  • Click the Apple icon to start the setup.
  • Enter our app's unique ID (called a "bundle ID"). Make sure it matches our app's exact name, and remember, it's case-sensitive!

To learn more about how and where we can find our "Bundle ID" for ensemble application, click here.

  • Click "Register app" to complete this step.
  • Download a file called "GoogleService-Info.plist". This file contains the secret details Firebase needs to work with your app.

Web

  • Click the Web icon(looks like a globe) to start the setup.
  • Give our web app a nickname(this is just for us to see in the Firebase console).
  • Click "Register app" to complete this step.
  • Firebase will provide on-screen instructions where we will find a portion with the name firebaseConfig in code given. Copy that portion and save it in a file with the rest configuration files.

All Apps

2. Configure Ensemble app

Now that we've registered our app with Firebase and downloaded the configuration files, it's time to establish the connection within our Ensemble project.

Make a Configuration File

The first step involves creating a configuration file that stores Firebase project details specific to our chosen platform (iOS, Android, or Web). This file acts as a translator between our app and Firebase, providing the necessary information for them to communicate effectively. The file will look like:

{
  "web": {
    # Just copy past all the values of firebaseCongig variable that we copy from web app and paste it here.
  },
  "android": {
    "apiKey": # In google-services.json, take value of client.api_key.current_key,
    "appId": # In google-services.json, take value of client.client_info.mobilesdk_app_id,
    "messagingSenderId": # In google-services.json, take value of project_info.project_number,
    "projectId": # In google-services.json, take value of project_info.project_id,
    "storageBucket": # In google-services.json, take value of project_info.storage_bucket
  },
  "ios": {
    "apiKey": # In GoogleService-Info.plist, take the value of API_KEY,
    "appId": # In GoogleService-Info.plist, take the value of GOOGLE_APP_ID,
    "messagingSenderId": # In GoogleService-Info.plist, take the value of GCM_SENDER_ID,
    "projectId": # In GoogleService-Info.plist, take the value of PROJECT_ID,
    "storageBucket": # In GoogleService-Info.plist, take the value of STORAGE_BUCKET,
    "iosBundleId": # In GoogleService-Info.plist, take the value of BUNDLE_ID
  }
}

After we have replaced the placeholder hashtags (#) in our configuration file, it will look like this:

Configuration File

Update Environmental Variables

Within our Ensemble application, navigate to the settings section and look for the option to manage environmental variables. Here, we'll create two new variables:

  • api_providers: Set the value of this variable to firestore. This tells our app to use Firebase Firestore as a data provider.
  • firestore_config: This is where you'll paste the complete configuration file we created earlier, including the replaced values from our downloaded configuration files.

Environment Variables

By following these steps, we'll successfully establish a connection between your Ensemble app and Firebase.

App SettingsFirestore