This document provides steps for integrating your Flutter App via the Hackle Flutter SDK. SDK Integration is a must in order to use the functions we provide.

• Step 1: Add Dependencies
• Step 2: Initialize the SDK
• Step3 : A/B test, Feature Flag
• Step4 : Send customer event

Step 1: Add Dependencies

Think of this step as importing and installing our SDK into your codebase. To use our Hackle services add the following dependency code and import our SDK.

dependencies:
    hackle: ^2.1.2

📘

Rebuild your app after Step 1

Flutter SDK includes Android and iOS SDKs.
The app that is being tested has to be newly built in order to complete the Step 1.

Step 2: Initialize the SDK

Once you have imported the dependencies, in order to start using the Hackle SDK you must initialize the SDK. During this step, we get the information needed for SDK integration from the Hackle Server and store it in the SDK.

You need to pass the SDK key to createInstance() to create a HackleReactNativeSDKClient and pass it on to the HackleProvider that wraps the React application.

The SDK key can be found in the SDK integration in the dashboard of Hackle service.

Communication for data synchronization with the Hackle server is carried out during the application initialization stage. Typically, this only takes a few milliseconds. Rendering begins immediately after synchronization is complete.

import "package:hackle/hackle.dart";

// YOUR_APP_SDK_KEY 
await HackleApp.initialize(YOUT_APP_SDK_KEY);

🚧

SDK initialization should only occur once

The Hackle.initialize() method must only be called once.

Recommended initialization method: initialize via loading screen

Instead of starting the app immediately, display a loading screen and initialize the SDK.
The callback then closes the loading screen and allows the user to start interacting with the app.

If you're using this method, it's a good idea to put a time limit on the loading screen.

Add Settings

You can add additional settings in SDK initialization

import "package:hackle/hackle.dart";

HackleConfig config = HackleConfigBuilder()
  .exposureEventDedupIntervalMillis(1000)
  .debug(true)
  .build();

await HackleApp.initialize(YOUT_APP_SDK_KEY, hackleConfig: config);

Find SDK Key

The SDK key can be found in the SDK integration in the dashboard of Hackle. Copy and use the App SDK Key.

Step3. A/B test, Feature Flag

A/B test

Before running an A/B test, you must distribute users to the test group and create the logic corresponding to each test group.
User distribution can then be carried out through the hackle SDK.

📘

Test Group

The test group refers to the existing one (control group) and improvement one (treatment group) to be tested, and there may be more than one treatment group. You can configure in the dashboard and for information on how to manage test groups, visit see the document A/B setting.

useVariation or useLoadableVariation

You can use the components provided by Hackle or use the Hooks API to distribute users to specific test and receive distribution results. The distribution must pass the test key.

Input Experiment key and user identifier to distribute users and receive results. You can implement logic by test group afterwards.

The experiment key is a unique number for each A/B test and can be found on the dashboard within the Hackle service.

The example code below inputs the experiment key 42.

import "package:hackle/hackle.dart";

// Determine which test group to expose to the user in the A/B test with the test key of 42.
// Returns test group A if the test group can not be decided.
Variation variation = await HackleApp.variation(42);

// Logic for Assigned Group
if (variation == Variation.A) {
  // Logic for Group A
} else {
 // Logic for Group B
}

Feature Flag

The feature flags are in the ON state and the OFF state. Different features will be set for each state.
When a user accesses a function with a feature flag applied, the user must be able to receive an on or off state. This status determination can be made via the hackle SDK.

useFeature

You can use the Hooks API provided by Hackle to receive status results for users. The Feature key must be passed and implement logic according to the subsequent state

The Feature key is a unique number for each Feature Flag and can be found on the dashboard within the Hackle service.

The example code below input the Feature key 42.

import "package:hackle/hackle.dart";

// Determine which status to expose to the user in the flag with the flag key of 42.
// Returns off state if the state can not be decided. 
bool featureOn = await HackleApp.isFeatureOn(42);

if (featureOn) {
// logic for ON
} else {
// logic for OFF
}

Check the exposure results

On the [Dashboard Left Menu Bar] - [A/B Test] or [Feature Flag] page, browse to the detail page for the list of exposed A/B tests or feature flags, and click the Real-Time Exposure tab in the middle of the page to view the distribution results from integrated SDK.

Step 4. Send User Events

The Hackle SDK provides the ability to send user events to the hackle.
At each point where changes in user behavior occur, this feature provides meaningful data about user behavior and allows you to analyze user behavior from those collected data.

track

User events can be sent by passing event keys and user identifiers to the 'track()' method. If necessary, when sending user events, numeric values can be put in 'value' to be sent together.

• You can only put the number type for 'value'

Example

Suppose you have defined an event key called 'purchase' to collect events when the user presses the buy button. At this time, you may want to collect the purchase price together. In this case, you can also receive the purchase amount in 'value'.

import "package:hackle/hackle.dart";

/* Example 1: Send event key only */
HackleApp.track(HackleEvent.builder("purchase").build());

/* Example 2: Send event keys and numeric values together */
HackleEvent event = HackleEvent.builder("purchase")
  .value(13200)
  .build();

HackleApp.track(event);

Example 1 only sends event keys; Example 2 shows a case of putting the purchase amount in 'value' to collect the purchase amount together.

Validate the sending of user events

Verify that user events sent by SDK are being collected successfully.
You can check the real-time event collection status by finding events sent to the SDK in the [left menu bar of dashboards] - [Event Management].