jkisolo.com

Mastering Server-Side Configurations with Firebase Remote Config

Written on

Chapter 1: Introduction to Firebase Remote Config

Have you ever wished to manage your apps after they've been published? Imagine being able to disable a feature that isn't quite right, or conducting A/B testing with select user groups. Perhaps you'd like to switch ad banners without needing a new release. All of this is achievable with Firebase Remote Config. In this guide, I'll walk you through the setup process for both Firebase and your application code, complete with a code example at the end.

Note: For comprehensive insights, consider my ebook on building Flutter applications with Firebase, available for purchase on Gumroad!

What is Firebase Remote Config?

Firebase Remote Config allows you to establish parameter values within the Firebase Console. The data types supported include String, Boolean, Number, and JSON. Your application can retrieve these values and utilize them to toggle features on or off, enabling you to modify app behavior without deploying a new version.

Caution: Avoid storing any confidential information in Firebase Remote Config.

App Setup

To begin, integrate the Firebase Remote Config package into your application using the command flutter pub add firebase_remote_config. Later, we will discuss how to target specific user groups and app instances, which requires the Firebase Analytics package (flutter pub add firebase_analytics). That’s all there is to it! πŸŽ‰

Next, you'll define the connection settings with the backend. A good starting point is to configure this in the main function after initializing Firebase. It's also essential to set default values, which will be used if the Firebase backend is unreachable (for instance, when the device lacks internet connectivity). Make sure your application is functional even under such circumstances.

To retrieve remote values, you can use the functions getBool(), getDouble(), getInt(), or getString(). For example, you can define a string with the key platformString in Firebase. To access this value, you can implement the following code snippet (ensure you're using a StatefulWidget within its initState method).

Your application code is now ready. In the next section, we will establish the values to be downloaded to your app through the Firebase Console.

Chapter 2: Creating Parameters with Conditions in Firebase

πŸ”” Already have a Firebase project? If not, refer to my setup article for a detailed guide on creating one!

Navigate to Remote Config under the Build menu.

Screenshot of Build menu in Firebase by author

πŸ”” Ensure Google Analytics is enabled for your Firebase project. If it isn't, the Firebase Console will prompt you with a notification (see the image below).

Firebase notification if Google Analytics is not activated for the current Firebase project. To enable it, click the link and follow the instructions.

Screenshot by author.

Next, click on "Create Configuration".

Screenshot of Remote Config menu in Firebase by author

Here, you can establish parameters and conditions. Conditions are used to identify groups of app users based on shared attributes. You can assign different values to various groups depending on the conditions. For instance, Android users might see a blue background while iOS users view a gray one. Follow these steps to create a parameter with conditions:

  • Go to the Conditions tab and click on "Add condition". Assign a name and define the condition. For example, I created a condition applicable to all Android users.

Screenshot of the dialog to add or edit a condition for Remote Config in Firebase by author

I created three conditions in total: for Android, iOS, and web users. It should resemble the following image:

Screenshot of created conditions for Remote Config in Firebase by author

Proceed to the Parameters tab to establish a parameter with our conditions. Click "Add parameter" to create a new one. The key should be platformString, which will be used by our app to fetch its value. Add three conditional values and associate them with the conditions you've created. You can set explicit output values or rely on the in-app defaults if specified. Refer to the following image for the parameter creation process.

Screenshot of parameter creation for Remote Config in Firebase by author

Once you click "Save", your overview should look similar to this:

Screenshot of parameter overview for Remote Config by author

An application utilizing this parameter will display "Hello from Android!" on Android devices, "Hello from iOS!" on iPhones, and "Hello from Web!" on web platforms. If the app is running on any other platform, it will revert to the in-app default value set to "Hello!" in the prior section.

When you confirm the changes, they become available immediately. However, users will need to wait for their fetch interval to reset before they see the new values (refer to the section about fetch intervals).

Screenshot of unsaved changes hint banner in Firebase by author

Let’s test the functionality by launching our app. You should observe results similar to the image below.

Screenshot of Android output (left) and Web output (right) in a demo application using Firebase Remote Config by author

Congratulations! Your setup of Firebase Remote Config is now complete and operational! πŸ”₯

Fetch Intervals

The minimumFetchInterval property of the RemoteConfigSettings object determines the timeframe during which subsequent calls to Firebase Remote Config will be disregarded. Since there is a server-side limit, setting this value too low may quickly exhaust that limit among many users. The default interval is 12 hours; however, it’s advisable to use shorter intervals, like 1 minute, during development. Just ensure this is only applied in development mode.

Loading Strategies

Firebase documentation recommends three distinct loading strategies:

  1. Fetch and use: Download the values and immediately update the relevant sections of the app. This is suitable if there are no significant UI changes that may confuse users.
  2. Fetch and use with loading screen: Show a loading screen while fetching values in the background. This is beneficial if the values could significantly alter the UI or essential features. Remember to dismiss the loading screen after a set time, even if the download isn't complete, as users typically dislike prolonged app startup times.
  3. Fetch and use with next app start: Activate previously fetched values when the app starts next. While users are engaged with the app, run an asynchronous call to Firebase Remote Config without activating the fetched results until their next session.

Advanced Options

A Remote Config REST API is available for adding, deleting, or modifying values and templates in Firebase Remote Config without needing the Firebase UI. If you're developing a supplementary tool for managing A/B tests, you could leverage the REST API to adjust parameters for different user groups. The Firebase documentation offers a solid overview to help you get started.

Conclusion

Firebase Remote Config is an effective tool for controlling your application without requiring a new release. You can dynamically load data at runtime and trigger specific behaviors in your app.

You can find the complete source code example on my GitHub page.

This article is part of the Flutter Firebase Compendium, which includes various tutorials and guides on integrating Firebase with Flutter applications.

For more insights tailored for Flutter developers, check out my ebooks.

Level Up Coding

Thank you for being part of our community! Before you leave: πŸ‘ Clap for this article and follow the author πŸ‘‰πŸ“° View more content in the Level Up Coding publication πŸ”” Follow us on: Twitter | LinkedIn | Newsletter πŸš€πŸ‘‰ Connecting developers like you to top startups and tech companies.

This video provides a beginner-friendly introduction to Firebase Remote Config, explaining its key features and benefits.

This video walks you through the process of getting started with Firebase Remote Config on the web, offering practical examples and setups.

Share the page:

Twitter Facebook Reddit LinkIn

-----------------------

Recent Post:

Exploring Fomalhaut: A Glimpse into a Young Star System

Fomalhaut's rings reveal insights into a forming planetary system, showcasing the dynamics of a young star.

# Understanding the Importance of Scrutinizing Nutrition Science Articles

Learn why it's essential to critically evaluate nutrition science articles, especially those funded by industry.

Navigating Emotional Turbulence: Strategies for Meltdowns

Discover effective strategies to manage emotional meltdowns and maintain mental health.