Developers: Build D4H Integrations Using our Angular API Client

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.