Official BadgeUp Ionic Client
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
spec
src
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
karma-test-shim.js
karma.conf.js
package-lock.json
package.json
tsconfig.json
tslint.json
webpack.config.js
webpack.test.js

README.md

BadgeUp Ionic Client

Official Ionic client for working with BadgeUp. This client supports Ionic 3.

Build Status

Quickstart

npm install @badgeup/badgeup-ionic-client --save

Polyfills

If you plan to use this client with old browsers, you will likely need to polyfill:

Initialization

Generate an API key for your application from BadgeUp dashboard, and configure @badgeup\badgeup-ionic-client by adding the BadgeUp Ionic module to the imports in app.module.ts.

import {BadgeUpModule} from '@badgeup/badgeup-ionic-client';

@NgModule({
  ...

  imports: [
    ...
    BadgeUpModule.forRoot({apiKey: 'YOUR API KEY HERE'}),
    ...
  ],

  ...
})

Once the module has been registered, inject the service in the root component and configure the subject provider. Here is an example of the root component that demonstrates how to configure the subject provider, emit events, and subscribe to new achievements:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {BadgeUpClient, BadgeUpEvent, BadgeUpEarnedAchievement, BadgeUpNotificationType} from '@badgeup/badgeup-ionic-client';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp implements OnDestroy {
  rootPage:any = HomePage;
  badgeUpClient: BadgeUpClient;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, badgeUpClient: BadgeUpClient) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });

    badgeUpClient.setSubjectProvider((eventKey: string) => {
      return "chris@test.com";
    });

    badgeUpClient.subscribe(this.badgeUpNotificationCallback);
    badgeUpClient.emit({
      key: "amazing"
    });
  }

  ngOnDestroy() {
    this.badgeUpClient.unsubscribe(this.badgeUpNotificationCallback);
  }

  badgeUpNotificationCallback(notificationType: BadgeUpNotificationType, data: any) {
    if(notificationType === BadgeUpNotificationType.NewAchievementEarned) {
      let ea = <BadgeUpEarnedAchievement>data;
      alert("You earned a new achievement! " + ea.achievement.name);
    }
  }
}

⚠️ Don't forget to unsubscribe in ngOnDestroy() as not doing that will cause a memory leak.

Directives

badgeup-click-event

If you want to send events to BadgeUp when a user clicks a button, add a badgeup-click-event directive that has an event key as value. For example, if you want to track list refreshes as event key "list:refresh", you would use the following code:

<button badgeUpClickEvent="list:refresh">Refresh the list</button>

You can also easily pass data using the badgeUpClickEventData attribute:

<button badgeUpClickEvent="list:refresh"
        badgeUpClickEventData="{foo: true}">Refresh the list</button>

You can also provide your own event modifier. The following code would decrement the value by one when you click 'Refresh the list'.

<button badgeUpClickEvent="list:refresh"
        badgeUpClickEventModifier="@dec"
        badgeUpClickEventModifierValue="1">Refresh the list</button>

If you'd like to pass dynamic data to any of the attributes, you'd have to use property binding syntax. Just add square brackets:

<button badgeUpClickEvent="list:refresh"
        [badgeUpClickEventData]="{userRank: getUserRank()}">
        Refresh the list
</button>

Accessing the Underlying Client

You may want to interact with more of the APIs than the Ionic client currently exposes as a high-level interface. You can access the underlying JS client from the client:

const client = this.badgeUpClient.badgeUpJSClient;
const achievements = await client.achievements.getAll();