DEV Community: Roxana Halați

Running an A/B Test in Android Kotlin Using ConfigCat and Amplitude

Roxana Halați — Tue, 13 Jun 2023 13:34:10 +0000

Releasing your digital product on the market is both an exciting and terrifying process. Whether you’ve created a mobile app or another type of software product, seeing it in the hands of real users is the ultimate achievement. But, simply building a wonderful product is not enough to ensure its long-term success. Over time, you’ll inevitably want to make changes and updates to your app.

But how can you be sure you’re making the right changes? It’s impossible to read your clients’ minds, but A/B testing might just be the next best thing. In this article, I’ll guide you through conducting an A/B test on an Android (Kotlin) application using ConfigCat’s feature flag management system and Amplitude.

What is A/B Testing?

A/B testing is a marketing and product development strategy that compares two extremely similar versions of a product to see which one performs better. The two versions, known as control and variant, must only differ by one element. Otherwise, while examining the data, you wouldn’t be able to tell which adjustment had which impact. The control, as the name implies, is frequently the current version of the program, whereas the variant is the modification we wish to implement.
In the case of a mobile application, such as the one we'll create in Kotlin, testing involves creating two versions of a screen and releasing both to users.

ConfigCat supports simple feature toggles, user segmentation, and A/B testing and has a generous free tier for low-volume use cases or those just starting out.

The Sample App

For this tutorial, we will work on a very simple page to see which button text performs better. Users of "my AwesomeApp" can listen to music, read books, and watch movies. A premium subscription exists, but few users browse the subscription information page. So I’ve decided that showing the subscription fee ($4.99) could encourage my customers to learn more about the premium plan. Because I’m not sure if it will drive growth, I’ve decided to A/B test my concept.

Follow along to create your own A/B test in Kotlin. If you want to see the completed app, you can check it out on GitHub here.

Prerequisites

Initializing the App

First things first, open Android Studio and create an Empty Activity using Kotlin and Gradle. Then, paste the following code into activity_main.xml:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Not enough entertainment?"
        android:textSize="24sp"
        android:textColor="#333"
        android:gravity="center"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="We know there's never enough to watch, listen or read. But we might have an option. With a premium AwesomeApp account you get access to:"
        android:textSize="16sp"
        android:paddingTop="16dp"/>


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="• Over 100+ new books every month"
        android:textSize="16sp"
        android:paddingTop="8dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="• Undiscovered, new artists right in your playlist"
        android:textSize="16sp"
        android:paddingTop="8dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="• More than 300 new movies each month"
        android:textSize="16sp"
        android:paddingTop="8dp"/>

    <Button
        android:id="@+id/myButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Subscribe to Premium!"
        android:textSize="18sp"
        android:textColor="#fff"
        android:background="#333"
        android:padding="16dp"
        android:layout_marginTop="16dp"/>

</LinearLayout>

As you can see, this is a simple page with some premium plan details and a call to action for the user to subscribe now. This is the button we will run our A/B test on.

Now, heading to MainActivity.kt, we need to add a listener for when the button is clicked in the onCreate() function.

  val myButton: Button = findViewById(R.id.myButton)

  myButton.setOnClickListener {
            println("Button Pressed")
        }

By now, if you run your app, you should get a message in the console every time you press the button.

Connecting to ConfigCat

It’s time to create a feature flag and connect it to our button. If you’re not familiar with feature flags, I suggest reading this tutorial or checking out the ConfigCat Blog to learn more about how to use them on different platforms.

If you haven’t already, head over to ConfigCat, create a free account, login and navigate to the dashboard. Here you can create your new feature flag and set its value.

While you’re here, take a second to locate your SDK key, which you can find in the upper right corner of your screen, as you’ll be needing it in just a moment.

Then, go back to Android Studio and add the Kotlin SDK dependency in your build.gradle file. Don’t forget to re-sync your gradle afterward.

implementation 'com.configcat:configcat-android-client:8.+'

In MainActivity.kt, import the library and create the ConfigCat client using your unique SDK key, which you’ve located in the previous step.

import com.configcat.ConfigCatClient

class MainActivity : AppCompatActivity() {
    var client = ConfigCatClient.get("YOUR-SDK-KEY")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    val priceShown = client.getValue(Boolean::class.java, "priceShown", false)
    System.out.println("priceShown's value from ConfigCat: " + priceShown);

val myButton: Button = findViewById(R.id.myButton)

        if(priceShown){
            myButton.text="Subscribe to Premium!"
        }
        else {
            myButton.text="Subscribe to Premium! $4.99"

        }
    ...
}

Now, you’ve not only made a feature flag, but you’ve also linked it to the button’s text. When the flag is off, the button reads "Subscribe now!". When the flag is turned on, the button reads "Subscribe now! ($4.99)". Take a moment to verify that you’ve done everything correctly by toggling your flag in ConfigCat and running your app.

Because I want some of my users to see the control and others to see the variation, I need to make one more change to my flag. I enabled the TARGET % OF USERS and set it to 50/50, so that half of the people see the variant and half see the control.

Setting up Amplitude

Currently, I have no means of knowing who pressed what and which button performed better. This is where Amplitude comes in. Amplitude is a product analytics platform that helps developers understand user behavior and make feature decisions. In our case, we’re using Amplitude to track the way our users interact with the button.

Go to Amplitude and create a free account. You will be asked to select an SDK and be given instructions on how to connect to your app. You can follow the official tutorial, but I’ll still walk you through every step.

First, we need to import the SDK into our project, so add the following to your build.gradle.

implementation 'com.amplitude:analytics-android:1.+'

In your AndroidManifest.XML add the following line to give the necessary user permissions for Amplitude to work.

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

Next, import the library and create the amplitude client in the onCreate() method. You’ll notice you once again need an SDK key. You can locate that in Amplitude Personal settings -> Projects -> YourProjectName.

val amplitude = Amplitude(
            Configuration(
                apiKey = "YOUR-SDK-KEY",
                context = applicationContext
            )
        )

Furthermore, you’re probably accustomed to every user having a unique ID. While Amplitude tracks this on its own, if you’re also tracking IDs, you can sync your own with amplitude like I did below.

Note: The data I use in this tutorial is mock data, as my application is not live anywhere. If you want to replicate this effect, you need to set this user ID. When gathering data, change this user ID a few times and run the app to simulate real users.

amplitude.setUserId("myuser1@awesomeapp.com")

In order to actually track the click event, add the following code in the button listener.

myButton.setOnClickListener {
            amplitude.track("Subscribe Button Pressed")
}

If I were to run the app now and press the button, Amplitude would receive information about the user, but I would only know who pressed the button, not what sort of button it was. I still need to add the flag’s value to the information sent to Amplitude. To do that, one more property needs to be added to the user.

val identify = Identify()
identify.set("flag", priceShown)
amplitude.identify(identify)

At this point, you can run the app and click the button. In a few seconds, the event will be logged into Amplitude. You can check that out by doing to User_Lookup in the primary menu.

Analyzing the Tracked Events

We’ve tracked events so far, but we aim is to determine which type of button was pressed more frequently. To do so, navigate to Data -> Create New -> Analysis -> Segmentation.

On this page, you can create an analysis that allows you to see which UI performed better. To do so, choose the event on the left side. In our case, the event is named “Subscription Button Pressed”. Then, on the right side, you need to create 2 cases - one in which the user’s feature flag is off and one where the flag is on. You can do so by replicating the setup from the image below.

Scrolling below on this page should reveal a chart with your data. Looking at the graph generated in my case, it appears that showing the price did not cause more users to click on the button. That means this particular change would not lead to bigger sales. Turns out I was wrong in my assumption and this A/B test showed me just that, before I made the mistake of implementing it for good.

In practice, you should allow a few days to collect as much information as possible before making a decision.

Key Takeaways

With that, we’ve successfully ran an A/B test on our Kotlin application and made an informed decision about a possible feature change. To summarize, these are the steps you need to take:

Set up an Android Kotlin application
Create a ConfigCat account and create a flag
Connect the flag to the feature you’re testing and turn TARGET % OF USERS on
Create and Amplitude account and connect it to your app
Track events from within your app
Analyze the data in Amplitude

At first glance, this process was more complicated than it turned out to be. We were able to set up the test in just a few minutes, which in turn will provide us with invaluable information about our customers.
As it turns out, A/B testing is an essential tool in mobile development that can help developers make informed decisions about structural changed to their application. Hopefully, this article helped you take your first steps into the world of user testing.

If you’d like to learn more about feature flags and how they can help in A/B testing and more, be sure check out ConfigCat Blog and follow ConfigCat on Facebook, Linkedin, Twitter and Github.

Using Feature Flags in a Preact Application

Roxana Halați — Fri, 20 Jan 2023 14:31:40 +0000

Sending your code out into the world can be a nerve-wracking experience. Regardless of how much testing you do beforehand, you’re never quite sure if everything will work according to plan. Even if it’s the case, during an applications life-time, you’ll need to redeploy your code many times. Code redeployment means time, money and a lot of hassle.

Fortunately, feature flags are useful tools that can help reduce the need for code redeployment as well as enable you to test your changes in production without affecting the end-user.
In this article, I’ll show you how to make use of feature toggles in a React-like framework. So…

What are feature flags?

Feature flags, also known as feature toggles or switches, are mechanisms that allow the developer to enable or disable a feature remotely, without having to implement a code change. Specifically, by wrapping your feature in a conditional statement that is based on the flag, you get to turn it on or off from outside the development environment.

Basically, they are almost like boolean variables that you can control without changing code.
Besides turning features on and off, feature flags are great for user segmentation, targeting, A/B testing or testing in a live environment.

What is Preact?

I’m sure you’ve heard of React always as it is quickly becoming one of the most popular frameworks for frontend development. Well, Preact aims to be a lightweight alternative to React, as it prides itself on having only 3 kB. Being so small, the JavaScript library is great for embedding, it’s portable, scalable, easy to integrate and easy to switch to from React.
Just like it’s “big brother”, Preact uses a virtual DOM and prides itself on having a modern API and EcmaScript support.

It’s worth nothing that some big companies (e.g. Uber) have chosen to make the switch to Preact, as it is superfast and great if you’re worried about your app’s performance. Besides, it is considered easy to learn if you’ve handled JavaScript or React before and doesn’t need fancy tools in order to run. The best way for me to show you how Preact works is through a clear example.

The Sample App

In our culinary blog app, we’d like to have a feature where we can suggest meals to our readers. All the user has to do is click a button and the app will automatically select a soup, a main course and a dessert. However, I might have users that would like to opt out of seeing deserts as they are watching their sugar intake at the moment. Maybe in the future we’ll want to include vegan-only options.

In this tutorial, I’ll show you how you can disable a feature for some users by targeting them with the use of feature flags. To manage my flag, I’m using ConfigCat’s feature flag management system.

Consult the completed app here.

Create a ConfigCat account and feature flag

Before we start coding, we need to prepare our feature flag management system. In order to do that, head over to ConfigCat and create a free account. Then, log in and head to your dashboard. This is the place where you can manage all your feature flags.

For now, we're going to create a simple flag called dessertOn like in the picture below.

Create the app and add the SDK

Now, we need to create the Preact app. The easiest way to do so is by using the Preact CLI. There are other ways of creating your app which require a bit more knowledge and which you can check out here. So, using the following command, I can initialize a new Preact project using the simple template.

npx preact-cli create simple culinary-site

Next, it’s time to add the corresponding ConfigCat SDK. Since Preact is a JavaScript library, I’m using the JavaScript SDK, which I’m adding with the following terminal command:

cd culinary-site
npm i configcat-js

In order to start the development server, you need to execute the following command in the project folder:

npm run dev

You'll notice that the app doesn't automatically start, so you need to manually open a new browser page with the address localhost:8080.

The SDK we previously added needs to be imported in your code, so head over to index.js and add the import statement.

import * as configcat from "configcat-js";

Now that the app is created and the SDK imported, it’s time to start coding. First, we’ll add some dummy data to represent our foods and a method that randomly selects a dish from each category.

import {useState} from 'react'
...

export default function App() {

    const soupOptions = [ "tomato soup", "mushroom soup", "chicken soup", "ramen", "potato soup"]
    const mainsOptions = ["chicken salad", "wrap", "sandwich", "roasted potatoes", "salad"]
    const dessertOptions = ["cupcake", "blueberry pie", "poached pear with vanilla sauce", "apple pie", "icecream"]

    const [chosenDessert,setChosenDessert] = useState('');
    const [chosenMain,setChosenMain] = useState('');
    const [chosenSoup,setChosenSoup] = useState('');

    const chooseMenu = () => {
        setChosenSoup(soupOptions[Math.floor(Math.random()*soupOptions.length)]);
        setChosenMain(mainsOptions[Math.floor(Math.random()*mainsOptions.length)]);
        setChosenDessert(dessertOptions[Math.floor(Math.random()*dessertOptions.length)]);
        }
}

Then, we need to create the ConfigCat client by pasting the code below.

const [flagValue, setFlagValue] = useState();

let configCatClient = configcat.createClient("YOUR-SDK-KEY");

configCatClient.getValueAsync("dessertOn", false, userObject).then((value) => {
  setFlagValue(value);
});

You’ll notice you need to add an SDK key. In order to find yours, head back to the ConfigCat dashboard and look for it in the upper right corner.

It's time to get into the exciting stuff. Since we want to segment our users based on some criteria, we'll need to create a user object to identify each user by an ID and to have the selection criteria. We're going to assume our users have logged in to our app and have a subscription type, which can be sugarFree or normal. Those with a sugar-free subscription will not be given a dessert option.

Paste the code below which creates a user object with a dummy ID.

var userObject = {
  identifier: "1234", // Unique identifier
  custom: {
    SubscriptionType: "sugarFree",
  },
};

As you can see, in the custom section, I’ve added the subscriptionType and gave it the “sugarFree” value.

Now, let’s actually use the flag. We’re going to use a ternary operator, which is often used in React and is also present in Preact to choose whether the dessert is displayed or not. Alternatively, you could use the flag inside the chooseMenu function so that a dessert is not even selected for sugar-free users.

return (
  <div>
    <button onClick={chooseMenu}>What will I eat today?</button>

    <div>Soup: {chosenSoup}</div>
    <div>Main: {chosenMain}</div>
    {flagValue ? <div>Dessert: {chosenDessert}</div> : null}
  </div>
);

Setting the flag value

Now, we need to give the flag a rule. Head to the dashboard and set the targeting rule like in the picture below. First, select Target Specific Users. Then, from the dropdown, select Custom, input the criteria rule (in our case SubscriptionType) and choose the IS ONE OF(cleartext) comparator, and input the value "sugarFree". Then, turn the flag off for this category of users and on for all the others, and you're done.

Now, for all users with sugarFree SubscriptionType the feature flag will be automatically turned off, while all other users will have an on flag.

If you go to the development server, you should not see a dessert.

If you head back to your code and change subscriptionType to normal, save and reload the app, the dessert option will now be presented.

Pretty cool, right?
This example simulates what happens in real life, where you have multiple users with different IDs and different subscriptionTypes.

Key Takeaways

In this tutorial, I’ve shown you how to do a simple user segmentation for a feature using feature flags in a cool, flexible JavaScript library - Preact. Let’s recap what we’ve walked through so far:

Create a ConfigCat account and log in
Create a feature flag
Create a Preact app using Preact CLI and import the JavaScript SDK
Add the necessary dummy code
Create the ConfigCat client, add your personal SDK key and create a dummy user
Add a flag rule to your flag in the dashboard
Change the custom criteria to see the changes

As intimidating as user segmentation can be at the beginning, I hope this tutorial has given you some insight into the process and shown you how simple it can be when using a feature flag management system like the one provided by ConfigCat.

Since there’s much more you can do with feature flags, be sure to keep up to date with more information by checking out the blog and following ConfigCat on Facebook, Twitter, LinkedIn and GitHub.

Enabling 2-Factor Authentication and Other ConfigCat Tips

Roxana Halați — Thu, 22 Dec 2022 13:12:58 +0000

By now, you’re probably well-acquainted with the suite of useful feature flag tools offered by ConfigCat. In case you aren't, ConfigCat is a developer-centric feature flag service with unlimited team size, awesome support, and a reasonable price tag. Let's play it safe and discuss 3 cool things that ConfigCat allows you to do – which we bet you didn’t know about! I’ll cover:

Purchasing a ConfigCat subscription for someone else
Enabling Two-Factor Authentication (2FA) in ConfigCat
Getting a free feature flag pack for students

Let’s get started!

Buying a ConfigCat subscription for someone else

Are you a software reseller? If so, you’ll be happy to know that you can easily buy a ConfigCat subscription for one of your clients.
Currently, you can resell one (or multiple, for that matter) subscription to a single client.
Here’s a step-by-step guide:

Register on ConfigCat and navigate to Plans.
Click on the Change plan button under the desired plan and follow the instructions.
Navigate to Team Members.
Invite your client to the Administrator group.

And that’s it! If you run into any problem, just drop an email at support@configcat.com.

Enabling Two-Factor Authentication in ConfigCat

Two-Factor Authentication can be broadly defined as a more secure way to gain access to an account, by requiring users to present at least two pieces of evidence (factors), rather than just a single one. This means that should one of these factors be compromised, your account is still protected.

In ConfigCat, the first factor is the password you use to log in to the ConfigCat Dashboard, while the second factor is a random 6-digit string generated via an Authenticator App, such as Google Authenticator.

Here’s how to enable 2FA in ConfigCat:

Go to your Dashboard and then to My Account.
Click Enable Two-Factor Authentication under your profile picture.
Follow the upcoming steps to set up your Authenticator App.

You can use Google Authenticator, Microsoft Authenticator, LastPass Authenticator, or Authy. Next time you log in, you will be prompted to enter your generated 6-digit code.

Getting a free feature flag pack for students

If you happen to be a student, I’ve got good news for you! ConfigCat has partnered with @GitHubEducation and joined the GitHub Student Developer Pack.
What does this mean? Students enrolled in the GitHub Student Developer Pack can access the ConfigCat Pro plan for free!

Here’s a glance at what’s in the pack:

Our Pro plan for free, for as long as you are a student.
Manage up to 1000 feature flags and settings.
Unlimited team size – invite all your classmates!

If you’re just getting started learning about feature flags, here’s a few resources you’ll find useful:

Follow the step-by-step guide on how to implement feature flags.
Copy-paste automatically generated working code examples.
All SDKs are open source, so you can see what's under the hood. Contributions are welcome.
ConfigCat supports .NET (C#), Java, Android, iOS, React, JavaScript, Python, PHP and many more.
Connect with the team on the Community Slack.

ConfigCat supports simple feature toggles, user segmentation, and A/B testing and has a generous free tier for low-volume use cases or those just starting out.

And that’s it! I hope this blog has helped reveal some cool tips and tricks you can use with ConfigCat's feature flag management system that you weren’t aware of before.

Keen to learn more about the power of feature flags? Check out the blog and follow ConfigCat on Facebook, Twitter and Linkedin.

How to build a remote light switch with Raspberry Pi and Feature Flags

Roxana Halați — Thu, 22 Dec 2022 13:10:15 +0000

Got some free time on your hands? Got you covered!

I'm going to show you a more peculiar way of using feature flags. Feature flags enable non-developers to switch on and off application features or change software configuration.

Following this step-by-step tutorial, you'll build a remote light switch using a Raspberry Pi and ConfigCat’s feature flag tools in no time. Let’s get started!

What you’ll need:

A Raspberry Pi 2, 3 or 4
A ConfigCat subscription (ConfigCat is a cloud-based service that lets you release features without code deployments)
Python 3
The ConfigCat Python SDK
(Optional) GPIO Zero integration

Step 1 – Prepare the device to run your code

There are a few things we need to do before we dive in.

You’ll need to set up your Raspberry Pi. I use Raspbian OS on mine, which I prefer as it contains all the necessary components for my projects. However, you can use any distribution you prefer. You can read more about Raspberry Pi OS installation here.

Once your board is set up, you’ll need to install the ConfigCat Python SDK with PIP:

sudo pip3 install configcat-client

Next, you can also install the gpiozero libraries. The Raspbian desktop image already contains the GPIO Zero package by default. If you’re using a different OS, you’ll need to use PIP:

sudo pip3 install gpiozero

Step 2 – Set up your ConfigCat Project

In order to access and manage a feature flag, I'm using ConfigCat's service.

To do that, you’ll need to go to ConfigCat, create an account and login, then head over to your own personal dashboard. Next, create a feature flag called demoswitch.Take a minute to locate your SDK key in the upper right side of the page, as you're going to need it soon.

Step 3 – Code

Time to code! Start by creating a file (e.g. remoteswitch.py) with your favourite editor, and add the following code:

from gpiozero import OutputDevice
import time
import configcatclient

# set GPIO#3 port (you can select any GPIO output port)
relay = OutputDevice(3)

# initialize ConfigCat client to get your setting value
client = configcatclient.create_client_with_manual_poll('YOUR_SDK_KEY')

while True:

# get the latest value
client.force_refresh()

# save into 'my_remoteswitch' variable
my_remoteswitch = client.get_value('demoswitch', False)

# for debug purpose only
print(my_remoteswitch)

# depend on the value the condition turns on/off the output
if my_remoteswitch == True:
relay.on()
else:
relay.off()

time.sleep(5)

pause()

Add your own SDK key on line 9. This solution uses the ConfigCat SDK’s in manual polling mode. You can read more about polling modes here.

Step 4 – Test

To test that your flag is working correctly, simply run your code with the following:

python3 remoteswitch.py

Depending on the setting’s value, the program will print the actual value of your switch on the ConfigCat Dashboard and will turn the Output Device on or off too.

Step 5 – Demo

Time to demo! To integrate the LED, I created a simple circuit using the following components:

A LED diode to show the switch status
One resistor to limit the current (500 Ω)
Two wires to connect the GPIO#3 port and a ground
Raspberry Pi to serve power to the LED (no external power supply required)

Here’s what it looks like:

And that’s it! For further development possibilities, you could set up as program as a daemon (always run after reboot), or you could apply this solution with any wireless power switch on your home.

Feature flags are robust mechanisms that can be used for a variety of different things, from feature management, to A/B testing, canary releases or more. In this post, we've covered a more unusual method of using feature flags to show you once again how many use cases can be covered by a simple flag with ConfigCat's feature flag system.

Want to learn more about the power of feature flags? Connect with ConfigCat on Facebook, Twitter, Linkedin and Github.

Feature Flags in a .NET6 Application

Roxana Halați — Thu, 22 Dec 2022 12:57:37 +0000

Autumn of 2021 saw the release of the newest .NET version, .NET6. This new release brought some updates that could potentially make a developer’s life easier, such as improved performance and a simpler development process. With less code to write and productivity tools like hot reloading, the new .NET was quickly adopted by developers all over the world.

Even before the new release, .NET had a wide range of utilities and has risen to become of the most popular frameworks available. Whether you’re migrating from an older version or just getting started on a new project, you may be wondering what feature management solutions are available to you. I wondered as well, so in this tutorial, I’ll go over one of the best - using feature flags.

What are feature flags?

If you’re unfamiliar with the concept, feature flags are remotely-controlled variables that enable developers to manage features much more easily than previously. If you had to change your code to turn a feature on or off before, these flags could become your new best friends.

In other words, you can use them to manipulate values from “the outside” by simply incorporating them into an if condition and letting them do their thing. Aside from managing a feature, these flags can help with user targeting and segmentation, in-production testing, canary releases, and A/B testing.

Prerequisites:

An IDE (e.g. Visual Studio)
.NET6
Previous knowledge of C#
Basic knowledge of HTML and CSS

The Sample App

To demonstrate how simple using feature flags in .NET is, I’ve created a sample app which you can consult here. If you’d like to see what’s going on step by step, stick around as I’m going to explain in greater detail.

Scenario: A user has just registered on our website, and we want to display a success message. This user is clearly interested in our services, so we’d like to give him or her the opportunity to subscribe to our mailing list, where we send out the coolest newsletter. However, after a while, we’d like to limit the number of new users who join our list, and the simplest way to do so is to remove the subscription button from the page.

In essence, we’re just making a button disappear, but in reality, we’re solving a real-world problem. When the mailing list reopens, our marketing department will notify us, and instead of getting to work and editing the code, we’ll simply push a button.

Creating the Flag

First things first, we need to choose a feature flag management system. I’m using ConfigCat because it’s very user-friendly and simple to integrate. ConfigCat is a feature management service that lets you decouple feature releases from code deployments.

Go to ConfigCat and follow the instructions to sign up. After that, log in, and you’ll be met by your dashboard, where you can create a new feature flag - we’ll call it mailingListEnabled.

Creating the .NET6 application

Now, using your preferred IDE (I used Visual Studio), create an MCV .NET6 application. I’m using an MVC architectural pattern for this app, which stands for Model-View-Controller. This means that responsibility is distributed across three layers that communicate with one another. For this tutorial, we’ll concentrate on View and Controller.

If you’re using Visual Studio, you should already have a Controller (MainController.cs) and a View (Index.cshtml).

Connecting to the SDK

Before we begin writing code, we must first connect the ConfigCat SDK. To do so, open a terminal in the project folder and enter the following command:

Install-Package ConfigCat.Client

Then, import it in HomeController.cs.

using ConfigCat.Client;

We must now create the ConfigCat client. You can do so by copying and pasting the code below.

 public ActionResult Index()
        {
            var client = new ConfigCatClient("YOUR-SDK-KEY");

            var mailingListEnabled = client.GetValue("mailingListEnabled", false);

            Console.WriteLine("mailingListEnabled's value from ConfigCat: " + mailingListEnabled);

            return View("Index");
        }

What this code does is to create a client, create a variable that stored the feature flag value locally and log this value, so we can check everything is running smoothly. You'll notice that an SDK key is required. Head over to ConfigCat dashboard and locate your key in the upper right corner and then replace it in its designated spot in the code.

Node: There are a few options that you can employ when using ConfigCat, such as setting the interval at which the flag's value is refreshed or target specific users. You can learn more about that in the documentation or directly in your dashboard.

Now, navigate to Index.cshtml and paste the code below. This is just some simple HTML code that adds a few elements to the page, including a button. I’ve also added a bit of CSS to style things.

@{ Layout = null; }

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>MainPage</title>
    <style>
      .button {
        color: white;
        border: none;
        text-align: center;
        font-size: 16px;
        padding: 10px;
      }

      body {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <p>Thank you for registering on our site.</p>
    <button class="button">Sign up to our mailing list</button>
  </body>
</html>

If you run the application now, you’ll see a simple static page

It's finally time to put the feature flag to good use. Add the following lines to your Controller:

 if (mailingListEnabled == true)
            {

                ViewBag.display = "display:inline-block";
            }
 else if (mailingListEnabled == false)
            {
                ViewBag.display = "display:none";

            }
 return("Index");

In this section, I've used a conditional statement to wrap the feature flag and created a ViewBag that takes different values depending on the flag. As you may know, display:none causes our button to disappear, whereas display:inline-block places it beneath the paragraph.
ViewBag is a.NET method of sending data from the Controller to the View. Basically, whatever you set in ViewBag in the Controller can also be used within the View as well.

Note: You can also use ViewData. There are some differences between them, but for the limited purpose of this tutorial, both will work just fine.

Now, go to Index and make the following changes to the button:

<button style="@ViewBag.display" class="button">
  Sign up to our mailing list
</button>

Save and restart the application. You won’t be able to see the button as the feature flag in your dashboard is automatically set to false upon creation. You can easily change that by toggling the flag on, saving the changes, and reloading the app. Now, you can give your users the option of signing up for the mailing list or restrict this feature at any time with just a few clicks.

Key Takeaways

In this tutorial, I've covered a very simple use case of feature flags in the latest and improved .NET6. To replicate the sample app, simply follow these steps:

Create a ConfigCat account as well as a feature flag.
Create a .NET6 MVC application.
Connect your application to the .NET SDK.
Create a simple HTML and CSS page.
Incorporate the flag into an if statement using the SDK.
Use ViewBag to propagate its value to the View.
Toggle the flag on and off from the ConfigCat Dashboard.

Feature flags are an excellent way to manage features that are frequently turned on and off. You can also use them if you plan on implementing a feature now but have it roll out later. With these toggles, you have more control of your application and can significantly reduce the need for redeployment, meaning that you can manage your features and configurations without actually deploying new code.

There’s a lot more you can do with feature flags, so check out the other articles on the ConfigCat blog, the official documentation, and the Facebook, Twitter, and LinkedIn pages.

Targeting, Segmentation, and Canary Releases for beginners

Roxana Halați — Mon, 21 Nov 2022 19:24:14 +0000

Picture this: You’ve added a new feature to your software, linked it to a feature flag, and deployed it to production. Now, you’d like to enable this feature for a subset of your users to get their feedback before you take the leap and roll it out to everyone.

But who gets to see this new feature first? How do you choose the first user segment? How do you use feature flag rules to target them?

Good to know: Feature flags let you launch new features and change your software configuration without (re)deploying code.

Let’s look at some typical real-world examples of how you can do canary releases using ConfigCat.

ConfigCat is a developer-centric feature flag service that helps you turn features on and off, change their configuration, and roll them out gradually to your users. It supports targeting users by attributes, percentage-based rollouts, and segmentation. Available for all major programming languages and frameworks. Can be licensed as a SaaS or self-hosted. GDPR and ISO 27001 compliant.

Release based on company or email address

A great first step is to enable the new feature to your colleagues while keeping it hidden from the rest of the world. This enables you to get early feedback from users inside of your company. You'd be surprised how many bugs they'll catch on the first day!

Here is how you can segment and target your colleagues with one simple rule in ConfigCat:

The example above assumes that everyone in your organization has an email address in the form of jane.doe@mycompany.com, or mike@mycompany.com.

Note how we used the Email property, and the CONTAINS operator to target only those users who work for your company.

When coding, you should add the following lines:

var user = new User("<userid>") { Email = "jane.doe@mycompany.com" };
var god_mode_enabled = client.GetValue("god_mode_enabled", false, user);

Note how we used the god_mode_enabled key and the user object to check whether God Mode is enabled for a specific email.

The above example is in C#, but you can do the same in Java, JS, Python, Go, Ruby, Swift, Kotlin, PHP and many others.

Release based on country

Another typical strategy is to release new features to users from a specific country only.
This strategy enables you to get feedback from many users, while still avoiding a global impact.

The image above shows how you can target all users in Germany. This is a large segment of users, and this partial release is probably a good indicator of what would happen if you'd release the new feature to the whole world.

This is pretty similar to what we did before. It makes use of the Country property, and the IS ONE OF operator.

In order to enable your Product Manager to segment users based on their country, just fill the Country property of the user object in your code:

var user = new User("<userid>") { Email = "jane.doe@mycompany.com", Country = "Germany" };
var god_mode_enabled = client.GetValue("god_mode_enabled", false, user);

Let me show you a trick.

You can achieve the same results in an alternative way:

In this example, I've targeted everyone NOT in Germany with an OFF value, while enabling the feature to the rest of the world (which is Germany).

Now let’s explore some more complex examples.

Platform, Country and Version

Let’s see how we can release a feature to Android users in Germany, specifically those who are using version 5.3 and above.

In code, add the keys OS, and AppVersion to the Custom property of your user object:

var user = new User("<userid>") {
               Country = "Germany",
               Custom = { { "OS", "Android" }, { "AppVersion", "5.4" }
           };
var god_mode_enabled = client.GetValue("god_mode_enabled", false, user);

Everyone in My Company, plus Android users from Germany, above v5.3

I'm sure you get it now:

![Alternative targeting by country or geolocation]](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p36caqtnpsmux65r18e8.png)

First, we target our own colleagues with an ON flag. Then we make sure non-Android users will not get the feature. Then we ensure not to release the feature to anyone under version 5.3. Exclude everyone except Germany. Finally, enable the new feature to the rest of the world (which is everyone with apps > 5.3 in Germany).

This is the code:

var user = new User("<userid>") {
               Email = "jane.doe@mycompany.com",
               Country = "Germany",
               Custom = { { "OS", "Android" }, { "AppVersion", "5.4" }
           };
var god_mode_enabled = client.GetValue("god_mode_enabled", false, user);

In this tutorial, we explored how you can target certain types of users in order to test your feature directly in production. Looking to do more? ConfigCat’s feature flags management system allows you to create complex user segmentation scenarios, even in much more depth than I’ve shown you in this tutorial.

If you want to stay up to date with news and find out how feature flags can improve your development process, check out the other articles on the blog as well as
the Facebook, Twitter, and LinkedIn pages. Created by developers for developers with ❤️.

How to use ConfigCat's Feature Flags in Java

Roxana Halați — Mon, 21 Nov 2022 11:17:59 +0000

description: Using feature flags in Java is easy when using the ConfigCat feature management system. This tutorial shows you exactly how to do that.
tags: [java, feature flags, sample app]
image: /assets/java-ff/cover.png

Java is one of the most widely used programming languages. Whether you've used it, know someone who has, studied it in university, or despise it, it's no surprise that many software products are developed in Java. So, keep reading if you want to learn how to quickly enable features in Java, with no redeployment and no fuss.

Feature Flags in a Nutshell

Sometimes, you want features to be easily turned on and off inside your application, but that can force you to redeploy - which leads to downtimes and a lot of headaches. Wouldn’t it be nice to have a variable that can enable things and that you can control from a distance? Well, it would - which is why there are feature flags.

Feature toggles, which are essentially remote-controlled boolean variables, can assist developers in improving workflows and resolving otherwise complex issues.
Simply wrap your code in a conditional statement with the flag, and you're good to go.

Using Feature Flags in Java

As Java is regarded mostly as a backend language, in this tutorial we’re going to focus on functionality. So what will our app do? It's payday, and we'd like our management system to display each employee's pay. We want to give our employees a 10% bonus because we made a lot of money this quarter. It's not uncommon for our imaginary company to award bonuses, so we need a way to quickly enable this feature on an as-needed basis. In order to do that, I will use ConfigCat’s feature flag management system. Let's get started.

Note: You can consult the sample app here.

Setting Up

The first step is creating a Java project. The SDK I'm using supports both Maven and Gradle, but in this tutorial, I'll be using the latter. I've chosen Intellij as an IDE and used it with the settings shown below. This process may differ slightly depending on the IDE you use.

Once the project has been created, it’s time to create the flag. If you haven't already, go to ConfigCat and sign up for a free account. Then, add a new feature flag to your dashboard, which we'll call "bonus."

When the bonus flag is false, no bonus is added to the salary. When it’s turned on we’ll give each employee a 10% raise. It's that easy.
While we're here, locate your SDK key in the upper right-hand corner of the screen. You’re going to need this in just a moment.

In order to connect the SDK to your local project, you need to edit the Gradle settings. This can sound intimidating if you haven’t done it before, but it’s actually quite simple. Go to gradle.settings and add the following lines in dependencies:

dependencies {
    ...
    implementation group: 'com.configcat', name: 'configcat-java-client', version: '7.+'
    implementation group: 'org.slf4j', name: 'slf4j-simple', version: '1.+'
}

Now, go to Main.Java and add the following statement to import the ConfigCat library.

import com.configcat.*;

Hint: You might need to refresh Gradle in order for the library to be imported.

Adding the flag

Now, it’s time to start coding. First, create a ConfigCat client by pasting the code below.

ConfigCatClient client = ConfigCatClient.newBuilder()
                .build("YOUR-SDK-KEY-HERE");

Then, let’s start by getting the value of our flag from the dashboard to check if everything is going according to plan.

boolean bonus = client.getValue(Boolean.class, "bonus", false);
System.out.println("bonus' value from ConfigCat: " + bonus);

Running the program now should print “bonus’ value from ConfigCat: false”.

Great, the feature flag is connected! Let’s use it for something useful.
Add the section below and I’ll walk you through what it does.

public class Main {
    public static void main(String[] args) {
        ...

        displaySalaries(bonus);

    }

    public static void displaySalaries(boolean bonus){
        String[] employees = {"Ada Lovelace", "Alan Turing", "Edsger Dijkstra", "Grace Hopper"};

        int[] salaries = {2500, 1700, 2450, 3500};

        if(bonus){
            for (int i =0; i<employees.length; i++)
            {
                System.out.println(employees[i] + ": " + (salaries[i] + 0.1*salaries[i]));
            }
        }
        else{
            for (int i =0; i<employees.length; i++)
            {
                System.out.println(employees[i] + ": " + salaries[i]);
            }
        }
    }
}

I’ve added some dummy data representing our employees and their salaries. The displaySalaries method then prints each person’s pay on the screen. As you can see, the flag is used in a conditional statement to determine whether or not a bonus is added.
Since the flag was turned off by default when we created it, if you run the program you should see the base salaries displayed.

Toggling the Flag

Head back to the dashboard, enable the flag and apply the changes. When you run the application again, you'll notice that the results have changed - the bonus has been added. There was no need to touch the code again for the flag’s value to change, making changing it the simplest thing ever. Pretty sweet, right?

Key Takeaways

Even in Java, feature flags can be easily added to new projects and integrated into existing apps.

In this article, I walked you through a simple application that toggles a functionality using feature flags. So, let's go over what you need to do to include these fantastic mechanisms in your own Java app.

Create a Java application to handle your needs
Create a ConfigCat account and a feature flag
Add the SDK dependencies in Gradle
Add the flag in a conditional statement to handle your feature
Toggle the flag to see the updated result

Once your product has reached its intended users, making changes implies code redeployment, downtime, and the installation of updates on the users' end, which can result in issues or even revenue loss. By using feature flags, you can ensure a much smoother transition between versions. Plus, you can perform A/B testing, user segmentation based on various criteria, test your code in production, and perform canary releases.

If you want to learn more about the power of feature flags, check out ConfigCat’s blog, as well as Facebook, Linkedin, and Twitter.

Using Feature Flags in React Native

Roxana Halați — Sun, 20 Nov 2022 15:46:00 +0000

React Native is a framework created by Facebook that simplifies development of cross-platform mobile applications. In a nutshell, React Native code is automatically translated to native code for both Android and iOS. It's no wonder that this framework is becoming increasingly popular among developers.
In this article, we’re going to explore how to use feature flags in this environment so you have all the tools necessary for great mobile development.

Note: I am using React Native CLI and TypeScript and developing on Windows for Android. For more information about setting up and developing on other operating systems, you can consult the official documentation.

What are Feature Flags

In mobile development, it’s especially important to avoid redeploying code, as app stores take a while to approve changes. However, sometimes features need to be turned on and off dynamically. That’s where feature switches come into play.
These flags are mechanisms that give you the ability to enable or disable a feature remotely, without having to redeploy the code and wait for its approval. Once integrated into the app, the flag can be turned on and off at any time by simply pressing a button. Plus, feature toggles can be used for A/B testing and user segmentation.
For now, let’s explore how you can quickly integrate feature flags inside a new React Native application.

Feature Flags in React Native

In this tutorial, I’m going to create a simple login page for a mobile app.

Picture this: you have an app where signing up should be restricted - you want to be able to stop people from signing up, but not prevent already-existing users from logging in. A simple solution is to use a feature switch that toggles the “Signup” button on and off. In this way, you get to stop new registrations at any time with no waiting period. Similarly, when you want to allow new users, you can turn it on just as easily.

I’ll be using ConfigCat’s feature flag service to handle my flag and I’ll walk you through every step of the way. Essentially, we’re making a button (the feature) appear or disappear by controlling an outside “variable”. Without further ado - let’s create our app.
You can find the completed code here.

Prerequisites

Node.js 14 or newer
Java SDK 11 or newer
Android Studio
Android SDK 12
JavaScript/TypeScript, HTML, CSS knowledge
An IDE (I’m using VS Code, but anything works)

Setting up

If you haven’t used React Native before, you’ll first need to install its CLI. Open a new command prompt and paste the following command:

npm install -g react-native-cli

Once that’s done, go ahead and create the project. I’m using a TypeScript interface for this.

npx react-native init loginProject --template react-native-template-typescript

This may take a while, but once it’s done, it’s time to install the ConfigCat SDK. Since React Native is a JavaScript framework, we’re going to choose the JavaScript SDK and install it now. In a cmd type:

npm i configcat-js

Next, it’s time to start the app for the first time.

cd loginProject
npx react-native start

First, navigate to the project folder. Then, using the “start” command, open up Metro, the JavaScript bundler that ships with React Native. Now, without closing this cmd, open up another one (still in the project’s folder) and type the following:

npx react-native run-android

The first time, it could take a minute or two for the Android emulator to start up and bundle the application, but once it’s done you should see the following screen:

Great! Now it’s time to get coding. Open up the project in a code editor and head to App.tsx. Go ahead and delete the entire content of this file and then paste the following:

import React, { useState } from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

const App = () => {

    const styles = StyleSheet.create({
      content: {
          flex:1,
          flexDirection:'column',
          justifyContent:'center',
          alignItems: 'center',
      },
      button: {
        backgroundColor: '#4CBE72',
        borderRadius: 10,
        margin: 12,
        height: 40,
        width: 200,
        justifyContent: 'center',
        alignItems:'center'
      },
    })


    return (
        <View style={styles.content}>
            <TouchableOpacity activeOpacity={0.5} style={styles.button}>
                <Text>LOGIN</Text>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.5} style={styles.button}>
                <Text>SIGNUP</Text>
            </TouchableOpacity>
        </View>
    )
}


export default App;

Let’s see what’s going on. First, I’ve imported a bunch of necessary React components and then created my own App component. Inside it, there’s a Login and a Signup button created using TouchableOpacity. To make everything look nicer, I’ve also added a bit of styling to the component. After saving the code, you should see this:

So far, so good. But the fun is just beginning.

Creating a Feature Flag

Naturally, we want to change the signup button so it can be handled dynamically. For that, we first need a flag. Head over to the ConfigCat Dashboard, create an account if you don’t have one already, and log in.
On your dashboard, click the “Add Feature Flag” button and create the new signup flag like in the picture below:

Now, locate your SDK key on the right-hand side of the screen. You’re going to need this to connect your application to your account in just a minute.

Adding the feature flag

To add the flag to your application, you’ll first need to import the SDK into your component.

import * as configcat from "configcat-js";

Then, you need a variable in which the value of the flag is going to be stored locally. To do that, I’ve used useState, a React hook.

const [flagValue, setFlagValue] = useState();

Now, create a ConfigCat client that automatically pools every 10 seconds to check if the flag value has been changed. Don’t forget to add your own SDK key at this step.

let configCatClient = configcat.createClientWithAutoPoll("YOUR-SDK-KEY", {
    pollIntervalSeconds: 10,
  },
);

To get the actual value and store it inside the flagValue variable, add the following function:

const updateFlagValue = () => {
  configCatClient.getValueAsync("signUp", false)
  .then(value => {setFlagValue(value)})
}

Every time this function is called, the ConfigCat client will take the flag value and store inside our local variable. But when should this function be called? Well, every time the flag changes, right? Since we’re checking every 10 seconds, we should update the client to also call the updateFlagValue method every time it detects a change. For this, I used the configChanged callback function like in the lines below:

let configCatClient = configcat.createClientWithAutoPoll("8z7aCC-DZEaPwUCnitpksg/TbJ8oi7sMUynCb8MxtTUDw", {
    pollIntervalSeconds: 10,
    configChanged: () => {
      updateFlagValue();
  },
  });

Every 10 seconds, the client will check if the flag’s value has been changed, and if it has, it will call updateFlagValue, which will update the local variable.

All that is left to do is to modify the return statement of the App component, so that the Signup button is only displayed when the flag is turned on. For that, I made use of React's ternary operator. What this does is check if flagValue is true and display a View which contains the button. Otherwise, nothing is displayed.

 return (
    <View style={styles.content}>
      <TouchableOpacity activeOpacity={0.5} style={styles.button}>
        <Text>LOGIN</Text>
      </TouchableOpacity>

      {
        flagValue
        ?
        <View>
          <TouchableOpacity activeOpacity={0.5} style={styles.button}>
            <Text>SIGNUP</Text>
          </TouchableOpacity>
          <Text>Signing up is now open again! </Text>
        </View>
        : null

      }
    </View>
  )

Toggling Features

When you first created the flag, it was automatically turned off, so you shouldn’t see the Signup button right now. Head over to the dashboard, turn the flag on and publish the results.

Now, if you wait a few seconds, your app will automatically update and the Signup button will appear.

And just like that, you turned on a new feature and made it easy to turn off at any time from the dashboard, with no additional code deployment.

Key Takeaways

In this article, I’ve walked you through using feature flags in a mobile application. Let’s recap the steps:

Create a simple React Native app.
Install the ConfigCat JavaScript SDK.
Create a ConfigCat account and a feature flag.
Add the flag to your app to handle a simple feature.

Feature flags are powerful tools that allow developers to enable features dynamically without redeploying code, but they can also help in a few other scenarios. They can be easily integrated to help with user testing and allow for detailed segmentation. There’s a plenitude of reasons why using them should be on your mind after reading this article.

If you’re looking for more information, check out ConfigCat's website. You can also keep up to date with the newest developments by following ConfigCat on Linkedin, Twitter or Facebook.

Using Feature Flags in an Angular Application

Roxana Halați — Sat, 19 Nov 2022 15:14:36 +0000

In a world where users demand fast, quality software, it is our job as developers to provide them with exactly that. So, what do you do when users need your app to run continuously, you need to add a new feature, but you can’t afford the downtime frequently associated with redeployment? The answer is simple - you use feature flags!

What are feature flags?

Feature Flags are mechanisms that allow developers to enable or disable application features without having to deploy the code. Simply put, they are variables whose values can be changed remotely, without having to touch the code again. It makes integrating new features and customizing user experience simpler than ever. It’s not only easy to use but also easy to integrate into your code, whether you are starting from scratch or integrating into an already existing app.

Using Feature Flags in Angular

I'll show you how to quickly add Feature Flags to an Angular application. To control the flags, I'll use ConfigCat’s feature flag service, and I'll guide you through each step.

We'll create a basic voting page as a sample app, where users may assign a vote to a photo.
In a contest, you might wish to stop the voting at a certain moment, or that feature to be turned back on after a while. It will actually be as easy as pressing a button using ConfigCat's interface. So, let's get started and build an Angular application that showcases the power and simplicity of feature flags.
You can find the completed application here.

Prerequisites:

Node.js and npm package manager
Knowledge of HTML, CSS, and JavaScript

Create the Angular application

The first step in our journey is to install the angular command line that will allow us to then create the Angular project. Head over to the terminal and use the command below.

npm install -g @angular/cli

Next, create the Angular project by using the ng command. Be sure to choose the folder where you want your project to be located. You will be prompted for more information about features, but you can go ahead and accept the defaults by pressing enter.

ng new votingPage

To open the app, simply enter the project folder and run ng serve. The --open flag automatically opens the development server on a new browser page. If you skip this flag, you can manually head over to http://localhost:4200/ to see your app in motion.

cd votingPage
ng serve --open

If everything works correctly, you should be able to see the default Angular project page.

Now, we’re going to build the feature flag before returning to add it to the application.

Creating a Feature Flag using the ConfigCat Dashboard

Head over to the ConfigCat Dashboard, sign up for a free account, and log in to view your dashboard. Start by clicking on “Add Feature Flag” and create a new flag as in the screenshot below.

You can now see the flag in your dashboard. For this sample app, we’re going to enable and disable features for all users. However, there is much more that can be done to target specific users.

One last thing you need to do is look for your SDK key. You can find it in the right upper corner. We’ll use this key in just a moment.

Adding the Feature Flag to the Angular application

Now that we have the flag, it’s time to integrate it with our application. Open your Angular project in a code editor and head over to app.components.ts.
First, we’re going to install the ConfigCat SDK to our project by inputting the following command in the terminal.

npm i configcat-js

Now, let’s import it in the app.components.ts

import * as configcat from "configcat-js";

It’s time to dive into coding. First, we’ll create a local variable that will keep the boolean value of our feature flag.
Then, create the ConfigCat client in the constructor. Remember the SDK key from before? This is where you need to input your own.

  votingFeatureEnabled:boolean = false;

  constructor() {
    let configCatClient = configcat.createClient("YOUR_SDK_KEY");
    configCatClient.getValueAsync("votingOpen",  false)
    .then( value => {
      this.votingFeatureEnabled = value;
    });
  }

So far, you should not notice any changes in your browser. That’s because we have yet to modify the HTML or CSS parts of our application.

Go to app.components.html, delete the preexisting code and replace it with the snippet below.

<div>

  <h1>Welcome to the voting system</h1>


  <img src="https://configcat.com/images/home/logo.svg" alt="ConfigCat Logo" width="200" height="200">

  <div id="votingForm" *ngIf="votingFeatureEnabled; else votingClosed">

    <input type="number" id="vote" name="vote" min="1" max="10">
    <button type="button">Send Vote!</button>

  </div>

  <ng-template #votingClosed>
    <h3>Sorry, voting has ended. Stay tuned to see the results! </h3>
  </ng-template>

</div>

Let’s see what we have done here. We’ve added a photo using the img tag and set a direct link to it.
We want to have two different scenarios for the users: one in case voting is open and one when it’s closed. However, HTML does not have an if statement that would allow us to check whether the flag is enabled or not.

That’s where ngIf comes into play. It’s essentially Angular’s way of adding an if statement into HTML.

In our case, we’re checking whether the votingFeatureEnabled variable is evaluated as true or false. If it is true, the application will display an input and a “Send Vote” button.
Otherwise, we’ll see the contents of the ng-template tag: a message that informs the user that voting is closed.

Now, head to app.component.css and paste the following CSS code. This will arrange elements in the center of the page and place the button underneath the input. This is totally optional, but it will give a nicer look and feel to our application. Feel free to add your personal touch.

  div {
  text-align: center;

}

#votingForm {
    display:flex;
    flex-direction:column;
    width: 10%;
}

Save the changes and head over to the open browser page of your application. The Angular development server automatically updated, so you should already see the following:

The voting feature is off because our feature flag was automatically set as false when created. Head over to ConfigCat dashboard and toggle the flag as On, save and publish the results.

Refreshing the browser page should give the following result:

Just like that, you’ve added your first feature flag to an Angular application using the ConfigCat SDK and dashboard. As I mentioned above, there’s much more that you can do with feature toggles, such as detailed customizations for user segments. You can see more flags in motion on the ConfigCat website.

So what do you think? Pretty easy, right?

You can find more information about ConfigCat on: Facebook, Twitter, and LinkedIn.