Developers: Build D4H Integrations Using our Angular API Client

Developers: Build D4H Integrations Using our Angular API Client

We’re rolling out a new software package that creates an easier path for developers to integrate our API into their own applications and services.

In this age of mobile devices, teams coordinate on the fly over the Internet. Social media and instant messaging services supplement traditional team meetings, while cloud services drive emergency response coordination.

D4H’s API grants developers the ability to connect to our services from any platform or device. Through it, they can perform such tasks as setting on-call status. It forms the heart of our own internal services, where it powers our existing web platform and new Personnel application for iOS and Android.

In this spirit, we’re rolling out a new software package that creates an easier path for developers to integrate our API into their own applications and services. Available now on GitHub and NPM is our Angular API client. Our client allows developers to easily:

  • Retrieve API keys through username/password authentication.
  • Read team activities (exercises, events, and incidents).
  • View and set attendance status on activities.
  • View and set on-call status for team members.
  • Search team members by filters such on-call status, name, or group membership.

Usage

Installation and use of @d4h/angular is a straightforward process:

npm i --save @d4h/angular

After this, you import and call ClientModule.forRoot() with an observable configuration:

import { CLIENT_CONFIG, ClientModule, ConfigProvider } from '@d4h/angular';

const config: ConfigProvider = {
  config$: of({
    region: Region.Staging,
    client: {
      name: 'Minas Tirith Siege Disaster Response',
      version: '3.0.19'
    },
    tokens: {
      account: 'YdRM8Tz78tIfJ3jqhyzz',
      team: 'LKYW5USNLWAwyqy5VNcA'
    }
  })
};

@NgModule({
  imports: [
    ClientModule.forRoot({ provide: CLIENT_CONFIG, useValue: config })
  ]
})
export class AppModule {}

@d4h/angular reads the observable configuration only when the client makes an API request. This allows for cases where the team token may change over time or comes from a store state. For example, in Personnel users can switch between teams, an action it handles internally by dispatching the new active team to the state.

Finally, import services:

import { DutyType, Member, MemberService } from '@d4h/angular';

@Component({})
export class MemberListComponent {
  private members$: Observable<Array<Member>>;

  constructor(private readonly memberService: MemberService) {}

  ngOnInit(): void {
    // Fetch on-call team members.
    this.members$ = this.memberService.index({ on_call: DutyType.On });
  }

  trackByFn(index: number, member: Member): number {
    return member.id;
  }
}
<ul>
  <li *ngFor="let member of members$ | async; trackBy: trackByFn">
    {{ member.name }}: {{ member.duty_status.status }}
  </li>
</ul>

Example: User Calendar

Personnel uses AttendanceService and DutyService to build a user’s agenda and calendar feeds:

  • GET /team/attendance: team activity attendances.
  • GET /team/duties: team on-call status.

EventService combines Attendance and Duty records from the API into a shared calendar event accepted by both the calendar and agenda.

import { Attendance, AttendanceService, Duty, DutyService } from '@d4h/angular';

@Injectable({ providedIn: 'root' })
export class EventService {
  constructor(
    private readonly attendanceService: AttendanceService,
    private readonly dutyService: DutyService,
    private readonly builder: EventBuilder
  ) {}

  query(search: EventSearch = {}): Observable<Array<CalendarEvent>> {
    return forkJoin(
      this.attendanceService.query(search),
      this.dutyService.query(search)
    ).pipe(
      map(this.transform.bind(this))
    );
  }

  private transform(
    [attendances, duties]: [Array<Attendance>, Array<Duty>]
  ): Array<Event> {
    return [
      ...this.builder.attendances(attendances),
      ...this.builder.duties(duties)
    ];
  }
}

Closing

The package offers a compact interface for the core of D4H API services. Our roadmap for the client includes access to organization resources and wider support for equipment, locations, and repairs. Check out the package today on GitHub and NPM.

D4H Technologies Logo
auto_awesomeRecommended Software

Personnel & Training IconD4H Personnel & Training

A highly proactive system designed to allow organizations to easily manage the administration of personnel, qualifications, training, attendance, and availability. It enables performance measurement and allows to collaboratively engage personnel to reach the highest standard of professionalism.

Personnel & Training Devices
D4H Technologies Logo

The cloud platform for emergency response

Join 100,000+ people who use D4H apps for iOS, Android, and Web Browser to professionally manage their incidents, personnel, and equipment.

All content provided on this blog is for informational purposes only. D4H Technologies Limited makes no representations as to accuracy, completeness, currentness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use.