Getting to know the Appknobs console

26 March 2019 by Appknobs

This time we take a look at how to set up your project using the Appknobs console. This web application allows you to create new users, register your applications, set features and define the conditions when these features will be visible in your app.

Not sure how feature flags can help you? Read our quick introduction!

After reading this tutorial, you'll understand the core concepts such as Features, Conditions and Payload. Then you'll be ready to start implementing feature flags using our React library and client package.

We'll explain how to

  1. Create a new user
  2. Register your application
  3. Grab your API key
  4. Add a managed feature (so you can decide when it is visible)
  5. Define the specific conditions for the feature

TIP: You can do steps 1 to 4 using our CLI tool if you prefer.

Registering a new user

Registration screen

This one couldn't be simpler: head over to https://console.appknobs.io/register, type your email and a strong password - that's it, your in! Nice 👏

Create an application

No apps yet

Appknobs allows you to work with multiple applications, either independent ones or different versions of the same offering, e.g. a website and a mobile app. All feature flags live under a specific app.

You have no apps defined by default, so let's remedy that: on https://console.appknobs.io/project click "Add app manually":

Add manually

Enter a name like My First App and save.

Add My First App

My First App

Each application is assigned an appId that you will reference in the client implementation. Grab it by clicking "Copy appId".

Copy appId

The other piece of information you'll need is your API key, so let's find it now.

Grab your API key

Hop over to https://console.appknobs.io/apikey and click "Copy API key".

API key

Add a managed feature

It's time to define your first managed feature!

Features are sections or behaviours of your application that you'd like to hide from some users but reveal to others, without having the decision in your codebase. These toggles are usually short-lived and allow you to deploy and evaluate changes and get feedback on them without making it available to all your customers. Without the need for dedicated environments, you can release new sections behind a managed feature flag and then open them up without code changes to select users: developers, testers, stakeholders, select clients - or everyone.

First, visit https://console.appknobs.io/project then click "Edit Features" under the application you have just created.

Add

Since you haven't defined any feature flags, you'll see instructions on how to add them using the Appknobs CLI.

For now, let's focus on the Web Console. Click on "Add feature manually" button and enter a name like My First Feature:

Add feature manually

Type first feature name

Click save, so you get the list of feature flags assigned to the particular application - a single one yet.

One feature

The state of a toggle in any application instance is determined by the conditions you set on the Console. By default, features are turned off: without conditions, they are false (turned off) for everyone, every time. So let's add a simple one to your first feature.

By the way, an application instance is a user session: a visitor using your website or an install of your mobile app.

Define the conditions

Let's continue on the Feature page. To assign conditions to the feature, click "Edit conditions".

Edit

You have no conditions set yet, so let's click "Add condition":

Edit

A simple condition definition form is displayed next:

Form

Let's understand what we're dealing with here.

Whenever you launch an instance of your app, you'll get the change to send a payload to the Appknobs service. The payload is a simple JavaScript object with arbitrary keys and values. For example:

{
  email: 'hello@example.com',
}

Each condition you define will look at this same payload and then

  1. Read the value of a given property from the payload - as defined in the property field
  2. Read the value you set in the argument field
  3. Compare the two values using the selected predicate

As an example, let's define the following condition:

  • Property: email
  • Predicate: Ends with
  • Argument: example.com

Condition form

Once you're happy, click save.

Condition display

Features in action

With the above setup, your My First Feature will be displayed in your app if the email in your payload ends with example.com.

And that's it! You've defined your first feature toggle, and you're ready to implement feature switching using our React library and client package.

Looking at the implementation code examples is a great way to start coding!

Appknobs is feature flags without the work
Read our blog, Twitter and newsletter for tips, updates, tutorials and articles.