Alertme-component-angular NPM

`alertme-component-angular`

This is the angular version of the alertme component. It is dropped onto a company's website to allow their users/customers to sign up for relevant business alerts.

Overview

The alertme system is a SaaS offering that enables end users to subscribe to relevant business alerts. e.g.

Banking
- Alert me when my balance is below $x
- Alert me when a transaction exceeds $x
eCommerce
- Alert me when my order ships
- Alert me of new products
Service provider
- Alert me of planned outages
- Alert me when my usage limit is near.
etc.

The actual business alert topics are configured via an administration site. This component displays these topics and collects the preferences for each customer.

Installation

To pull the alertme component into your Angular project,

npm install alertme-component-angular

Usage

Then place the component onto a page that will be used to subscribe to alerts. Here is an example page that uses the alertme preference component

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-alerts',
  template: `
    <h1>Alerts!!</h1>
    <p>Sign up to be notified of important news and events.</p>
    <div style='background-color: white; padding: 10px'>
      <am-subscriber 
        [token]="token" [publisherId]="publisherId"
        [appId]="applicationId">
      </am-subscriber>
    </div>
    `
})
export class AlertsComponent implements OnInit {
  token: string;
  publisherId = '2f27a22d980134dfc56cf8da5aa1d02ea08802d26804f0db604439281aff14c5';
  applicationId = '5f27a22d980134dfc56cf8da5aa1d02ea08802d26804f0db604439281aff14c6';

  constructor(private userService: UserService) { }

  ngOnInit() {
      this.token = this.userService.alertmeToken;
  });


}

The above example assumes that the existing customer portal has a login process for the customer, and that an Alertme authorization token for that customer is retrieved from the Alertme API and is stored in a service called userService. An authorization token is acquired by making a server-side GET request to https://api.alertmehub.com/api/v1/subscriber/token/[userid] and setting the Authorization header to the alertme API key.

The userid can be any string that uniquely identifies your customer, who is currently logged into your customer portal - such as a customer id, account id, or any unique hashed value.
See the next section for how to get the client id and API key.

Example server-side code to retrieve an Alertme token using the Axios node library.

    var alertmeClient = axios.create({
      baseURL: 'https://api.alertmehub.com/api/v1',
      timeout: 1000,
      headers: {'Authorization': '2f27a22d980134dfc56cf8da5aa1d02ea08802d26804f0db604439281aff14c6'}
    });

    // Retrieve Data
    let amToken = await alertmeClient.get("subscriber/token/" + userId );

It is important that the Alertme API key be treated as a secret and not exposed in client-side code. The example code shown above should only be run via server-side code.

Note: there is also a node package that abstracts the api calls. See https://github.com/alertmehub/alertme-api-node

Alertme Registration

In order to use Alertme, you must first register at https://admin.alertmehub.com.

After registering you'll be assigned a publishing profile and an API key that you can use to obtain customer tokens as described in the previous section.