DEV Community: Manuel Popa

Building an Ionic app using ConfigCat’s Feature Flags

Manuel Popa — Mon, 01 Aug 2022 17:51:11 +0000

We live in a world overflowing with information, where we’re connected and online almost every single day. Informational overload is a real thing, and we should all be aware enough not to fall victim to this behavioral pattern loop.

To-do lists are a real hail-mary in today’s clickbaity and attention-grabbing world, so I figured that it’d be fun for us to build our very own to-do app from scratch, using Ionic and ConfigCat's feature flags.

What is Ionic?

Ionic is a platform for building neat hybrid (PWA) apps for both Android and iOS, using JavaScript.
Up until Ionic 4, we had a perfect symbiosis between the Ionic and Angular frameworks, where Ionic was mostly responsible for providing the UI components while Angular was used as the foundation for the mobile application.
The arrival and adoption of web components broke this symbiosis and Ionic became framework-agnostic, meaning that you can use it with or without any framework.
The core of the Ionic SDK is the Capacitor, a cross-platform native bridge used to turn any web project into a native iOS or Android mobile application. It includes a rich library of plugins that enable easy access to most native device features with basic JavaScript.

What is a feature flag, and why use ConfigCat?

A feature flag is simply a toggle used to activate or deactivate specific features you may have in your application.
Here are some examples of why you may want to use a feature flag:

giving early access to new features to a select few;
targeting specific countries;
various testing purposes.

You could create your own in-house feature flag service or choose from an array of services available online such as ConfigCat.
ConfigCat has everything you need from such a service in the free tier, including all the security features. Check it out here.

Starting our to-do list.

The first thing on our to-do list (pun intended) is to generate a new Ionic project using: 'ionic start ionic-to-do blank'. This command will generate a blank template for our project.
The structure is pretty common. We'll have an src folder where our application will store its components and providers (also known as services).
Inside the src folder, we can find the following folders - app, assets, pages, providers, and theme.
The root component is located in the file src/app/app.component.ts. This file is important because it will be the first component added to the application, and it will be used to display all other components on top of it, just like a tree.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {});
  }
}

Notice that we’re importing our HomePage in the root component so we can set it as the rootPage of our application. We can use the 'any' type since TypeScript is strongly typed which makes the declaration of each variable a little more complicated compared to JavaScript. We use 'any' when the type is not known from the beginning, or when you work with variables that may change over time.
Next, we need to set our rootPage in the template found in src/app/app.html:

<ion-nav [root]="rootPage"></ion-nav>

Having set our root page, we need to take care of the navigation for the other pages. This can be done using 'push' and 'pop' to navigate between the needed views on the top of the main page.
The 'push' method is used to display a new view, while 'pop' will remove the current view and go back to the previous one.

Let's turn our attention to the pages folder, where we add home, item-detail, and add-item folders for each of the respective views.
Each folder will include the template and the class for the view.

The home.html file combines Ionic elements with Angular directives, as you can see from the snippet:

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
        My to-do list
    </ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="addItem()"><ion-icon name="add-circle"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
  </ion-list>
</ion-content>

This file contains some Ionic specific elements like 'ion-header' and 'ion-content' - they are Ionic UI components that can be reused throughout the application. Some of these elements also have specific Ionic attributes.
For example, ‘ion-buttons’ has an ‘end’ attribute used to automatically place that element at the end of the nav bar (right of the screen).

We can attach listeners to these elements by using the parenthesis - in our case, the button element has a click event which will call the method addItem().
On the other hand, *ngFor is an Angular directive used for iterating through an array of objects and creating elements that will be inserted into the DOM.
To control the functionality of the home page, we need the home.ts file which has the class 'HomePage':

import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item/add-item'
import { ItemDetailPage } from '../item-detail/item-detail';
import { Data } from '../../providers/data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public items = [];

  constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) {
    this.dataService.getData().then((items) => {
      if(items){
        this.items = items;
      }
    });
  }

  ionViewDidLoad(){  }

  addItem(){
    let addModal = this.modalCtrl.create(AddItemPage);

    addModal.onDidDismiss((item) => {
       if(item){
          this.saveItem(item);
       }
    });
    addModal.present();
  }

  saveItem(item){
    this.items.push(item);
    this.dataService.save(this.items);
  }

  viewItem(item){
    this.navCtrl.push(ItemDetailPage, {
      item: item
    });
  }
}

In this file, we use ionViewDidLoad - an Ionic lifecycle hook to be triggered when the page is loaded. Also, importing the NavController from 'ionic-angular' helps us control the toggle of our views using 'push' and 'pop' (I mentioned them earlier).
There are also three custom methods which we can use for adding, saving, and viewing our items.
The next view will be constructed in the add-item folder:

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
        Add Item
    </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label floating>Title</ion-label>
      <ion-input type="text" [(ngModel)]="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Description</ion-label>
      <ion-input type="text" [(ngModel)]="description"></ion-input>
    </ion-item>    
  </ion-list>
    <button full ion-button color="secondary" (click)="saveItem()">Save</button> 

</ion-content>

This time we encounter a new Angular specific functionality - [(ngModel)] - which is used for two-way data bindings.

import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-add-item',
  templateUrl: 'add-item.html'
})
export class AddItemPage {
  title: string;
  description: string;

  constructor(public nav: NavController, public view: ViewController) { }

  saveItem(){
    let newItem = {
        title: this.title,
        description: this.description
    };

    this.view.dismiss(newItem);
   }

   close(){
    this.view.dismiss();
   }
}

The class for add-item has a new Ionic service called ViewController, which is imported just like the NavController from 'ionic-angular'. This service helps close the modal using the 'dismiss' method which can also be used to pass the item saved to the home page through this event.
This new component (AddItemPage) will be imported into the home.ts file so we can use it to create the add item modal.

The next item on our to-do list is the item-detail component:

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      {{title}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      {{description}}
    </ion-card-content>
  </ion-card>
  <ion-card *ngIf="dueDate">
    <ion-card-content>
      {{dueDate}}
    </ion-card-content>
  </ion-card>
</ion-content>

Nothing new on this template. However, we will use a feature flag inside the ItemDetailPage class.

ConfigCat will help us toggle our new feature.

Let's say that we want to implement a new application feature and make it available for some beta users. Our new feature will take the form of another element on our to-do card called 'dueDate':

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
  selector: 'page-item-detail',
  templateUrl: 'item-detail.html'
})
export class ItemDetailPage {

  title;
  description;
  dueDate;

  constructor( public navParams: NavParams ) { }

  ionViewDidLoad() {    
    this.title = this.navParams.get( 'item' ).title;
    this.description = this.navParams.get( 'item' ).description;
    this.dueDate = this.navParams.get( 'item' ).dueDate;
  };
}

The change for the feature flag will be made in the add-item.ts file. This is the component used to control what details are added to the item card.

ConfigCat has good documentation. The entire process of setting it up will take about 10 minutes. The first thing to do is to navigate to ConfigCat and sign up for a free account. Then you can create the feature flag:

The next step is to install the configcat-js package via npm - 'npm install configcat-js'. This will give access to the ConfigCat client to use our newly created flag in our application:

import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
import * as configcat from 'configcat-js';

@Component({
  selector: 'page-add-item',
  templateUrl: 'add-item.html'
})
export class AddItemPage {

  title: string;
  description: string;
  dueDate: string;
  configCatClient;
  flag;

  constructor(public nav: NavController, public view: ViewController) {
    this.configCatClient = configcat.createClient( "1K3ZCCa1S0GKW6RN4S5wyA/o33xY-5E_U-aEzyeTlme_g", {} );
    this.configCatClient.getValueAsync( "isMyFirstFeatureEnabled", false ).then( value => { 
      this.flag = value;
    });
}

   saveItem(){
      let newItem = {
         title: this.title,
         description: this.description,
         dueDate: this.dueDate
      };

      this.view.dismiss(newItem);
   }

   close(){
      this.view.dismiss();
   }
}

Notice how we added the three new properties to our AddItemPage class - dueDate, configCatClient, and flag.
AddItemPage.flag is the property that will keep the value which we retrieve from the ConfigCat client. Based on this value, we’ll show or hide the 'Due Date' item using Angular's *ngIf directive.

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
        Add Item
    </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label floating>Title</ion-label>
      <ion-input type="text" [(ngModel)]="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Description</ion-label>
      <ion-input type="text" [(ngModel)]="description"></ion-input>
    </ion-item>
    <ion-item *ngIf="flag">
      <ion-label floating>Due Date</ion-label>
      <ion-input type="text" [(ngModel)]="dueDate"></ion-input>
    </ion-item>
  </ion-list>
    <button full ion-button color="secondary" (click)="saveItem()">Save</button> 
</ion-content>

How do we save our data?

Our application is almost complete. The only problem is that it currently doesn't really save any data - every item you save will be wiped clean on reload. This can be fixed by accessing the local storage.
Ionic provides a service called 'Storage' that can be used for saving data using a native SQLite database. However, if no such plugin is available, it falls back to the browser's local storage.

import { Storage } from '@ionic/storage';
import {Injectable} from '@angular/core';

@Injectable()
export class Data {
  constructor(public storage: Storage){ }

  getData() {
    return this.storage.get('todos');  
  }

  save(data){
    this.storage.set('todos', data);
  }  
}

In home.ts, we can access our data service in the constructor to get our list of items from the local storage. This is done asynchronously, meaning the rest of the application will load the rest of the components and not wait for the completion of this request, thus blocking it in the process.
The link to the sample application can be seen here.

Conclusion

If you want to build a hybrid application with a native touch regardless of the device it is running on, Ionic is the choice to go with.
Ionic 4 breaks away from the restriction of using Angular as the base for your development, giving you the freedom to choose from all those cool frameworks available out there. For more details about Ionic and what they are cooking next, have a look at their website.
Releasing a great application in production doesn't mean the work is done. Any newly added feature may hurt your user base if it is not what they want. This can be avoided by using feature flags, giving access to only a fraction of them for getting some live feedback.

You can read more about ConfigCat on their website, or you could follow them on your Facebook, Twitter, or LinkedIn accounts.

Space Invaders meet ConfigCat and MelonJS

Manuel Popa — Mon, 21 Feb 2022 19:03:25 +0000

Growing up as a child of the ’90s has always been a bitter-sweet kind of experience, but it certainly also came with a multitude of benefits. We’ve been exposed to countless priceless moments that have come and passed, moments that stand to make history and which may never be experienced again by newer generations. One such example of a beautiful lived-through historical moment is growing up with the fabled Space Invaders game.
Simple yet memorable, Space Invaders made waves across the world and undoubtedly served as a catalyst for the revival of a previously stale and dying gaming industry that’s now priced at no less than 173.7 billion USD.

What we're going to do

Nostalgia trip aside, the plan here is to rebuild “Space Invaders” in MelonJS while also taking advantage of ConfigCat's feature flag management service to toggle your player's ship from the default one to another, more custom version.

What is MelonJS ?

Well, silly naming scheme aside (which may or may not give you a craving for melons), it’s an:

actively maintained
open-source
JS-powered game engine that’s licensed under MIT

Personally, I’d go for MelonJS 2, as it’s a modern remake of the engine that's perfectly adapted to support ES6 class, inheritance, as well as many other goodies. If you want to learn more about what it can do, check out their docs right here.

What are Feature Flags?

In short, you can visualize a feature flag as a switch that’s used to activate or deactivate certain functionalities that may be present in your application.

Here are some examples of why you may want to use feature flags:

give early access to new features to only a select few
targeting specific demographics
various other testing purposes
releasing things in a more ordered and stable manner

Why use ConfigCat?

What makes ConfigCat attractive is that they offer a very balanced forever-free plan, which includes a plethora of things, including their entire security stack (while most other competitors would have you pay extra for those). This eliminates any artificial incentive for you to upgrade unless your business organically scales to new requirements.

You could technically create your own in-house feature flag service, but it would make more financial sense to just use an already existent one like ConfigCat’s.

Time to build Space Invaders!

The version of Space Invaders that we’ll be building won’t be anything truly fancy, just your average, stripped-down base game with no extra bells and whistles. We’ll have a set of ships arranged in an 8 by 4 grid rushing toward our ship.

Project structure

The easiest way to start your project is by getting the ES6 boilerplate provided by MelonJS. After that just trim your excess folders and files, and the result should look like this:

src
└── data
|    ├── img
└── js
|    ├── renderables
|    └── stage
├── index.js
├── index.css
├── index.html
├── manifest.js

`
Here's the repo link of the finished game, in case you want to follow along.

Building the game

To start using MelonJS, we’ll just add the following line to the top of each file where we’ll need to use its functionalities:

import * as me from 'melonjs/dist/melonjs.module.js';

For this project, we’ll add three more files under the js folder:

constants.js - used to define things like laser’s width and height
laser.js - used to define the Laser entity
enemy-manager.js - used to manage the creation and movement of the enemy ships

The entry point for your project is the index.js file where the canvas is prepared and all the prerequisites for the game are preloaded by the onReady() method:

me.device.onReady(() => {
    setTimeout(() => {
        if (!me.video.init(
                1218, 562,
                {parent: 'screen', scale: 'auto', scaleMethod: 'flex-width'})) {
            alert('Your browser does not support HTML5 canvas.');
            return;
        };
        me.audio.init('mp3,ogg');
        me.loader.crossOrigin = 'anonymous';
        me.loader.preload(DataManifest, function() {
            me.state.set(me.state.PLAY, new PlayScreen());

            me.pool.register('player', PlayerEntity);
            me.pool.register('ships', EnemyEntity);
            me.pool.register('laser', Laser);

            me.state.change(me.state.PLAY);
        });
    }, 5000);
});

`
Under the renderables folder we have two files important for the movement and interactions of the ships soon to be battling each other:

enemy.js - used to define EnemyEntity
player.js - used to define PlayerEntity

The epic battle will be staged in the stage folder, inside the play.js file where we have the onResetEvent(), onDestroyEvent() and checkIfLoss() methods which will dictate the way our game will work.

All the images we’ll need can be found in the "data/img folder" and we’ll use them in the manifest.js file as such:

const DataManifest = [
    {name: 'player', type: 'image', src: 'data/img/player.png'},
    {name: 'player2', type: 'image', src: 'data/img/player2.png'},
    {name: 'ships', type: 'image', src: 'data/img/ships.png'},
    {name: 'bg', type: 'image', src: 'data/img/bg.jpg'}
];

export default DataManifest;

Tips and Tricks

If you want to add a custom background picture to the game, use the following code to the OnResetEvent() method, located in the play.js file:

 me.game.world.addChild(new me.ImageLayer(0, 0, {
    image: "bg", 
    repeat: "repeat",
    z: 0
 }), 0);

One issue that you may encounter is with the game’s resetting functionality when calling the checkIfLoss() function. The bug seems to be caused by the bounds.bottom argument which may sometimes equal infinity. You can easily go around this bug by just adding the following check at the end of the first if statement in the enemy-manager.js file - at the time of writing, this was at line 40.

if (me.state.current() instanceof PlayScreen) {
me.state.current().checkIfLoss(bounds.bottom);
};

In the end, if all goes well and the Gods of coding are merciful, you should be able to see this:

Using ConfigCat's Feature Flags in Space Invaders

Let's say that I want to change the main ship with a custom version to be displayed to a specific audience. The easiest way to do this without having to change the code and make another deployment of the new version is to implement a feature flag, which can be switched on and off with ease.

I intend to show the custom version of the ship only if the evaluation of the flag is true. And since the application is written in Javascript, I’ll choose ConfigCat's Javascript SDK, for which the process of installing is fairly straightforward and well documented.

Just fire up npm and run npm install configcat-js, after which just import it in constants.js file via the following line:

 import * as configcat from "configcat-js";

The next thing that you need to do is to quickly head over to ConfigCat’s registration page and create a free account for yourself. After which you’re all set to create your first feature flag. I named mine "isMyFirstFeatureEnabled".

I'm now free to go to constants.js and add my SDK key (which you can grab from the ConfigCat Dashboard where you created the flag earlier). Once in the dashboard, you'll see a button in the upper right-hand corner called “View SDK Key”.

I then create the client like this:

  let flag ;
  const client = configcat.createClient(sdkKey);
  const getFlag = () => flag;
  client.getValue("isMyFirstFeatureEnabled", false, value => {
     flag=value;
  });

Now that the client is in order, we should now hop in the player.js file, import the getFlag() method from constants.js and use it to load the player with a new ship depending on the flag’s value:

  if (getFlag()) {
    image = me.loader.getImage("player2");  
  } else {
    image = me.loader.getImage("player"); 
  }

Last but certainly not least, all that’s left to do now is to use the ConfigCat Dashboard, flip the flag to "true" and then reload the game.

BAM! The result should be something like this:

Conclusion

MelonJS is a powerful JS game engine and as a testimony to this stands the vast documentation that you need to read in order to unleash its true power. It certainly can help you in case you want to have a chance at making the next big game hit. Feature Flags can be outstandingly scalable and useful, and I’m glad that I found ConfigCat to help me out with this.

Here’s the git repo link in case you want to check out this tiny Space Invaders remake and I hope you that you'll get to relive some nice childhood memories playing it.

If you are looking for more articles like this, make sure to check out ConfigCat’s blog posts or you could follow them on your Facebook, Twitter or LinkedIn accounts.

DEV Community: Manuel Popa

Building an Ionic app using ConfigCat’s Feature Flags

What is Ionic?

What is a feature flag, and why use ConfigCat?

Starting our to-do list.

ConfigCat will help us toggle our new feature.

How do we save our data?

Conclusion

Space Invaders meet ConfigCat and MelonJS

What we're going to do

What is MelonJS​ ?

What are Feature Flags?

Here are some examples of why you may want to use feature flags:

Why use ConfigCat?

Time to build Space Invaders!

Project structure

Building the game

Tips and Tricks

Using ConfigCat's Feature Flags in Space Invaders

Conclusion​

What is MelonJS ?

Conclusion