...

Denne guide har til formål at give anvendere anvendere et overblik af NAP SDKer SDK'et overblik over disse.

Anvendere er primært projektudviklere, derfor er hvilket betyder at denne guide målrettet disseer anvendt til dem.

På baggrund af følgende guideseksempler, er det muligt at komme hurtigt i gang med anvendelsen af SDKerneSDK'erne. 

Nap-typescript-sdk

Nap-typescript-sdk er det basale SDK. Den Det udstiller en række metoder og interfaces som vil blive beskrevet i følgende:

...

Består af følgende felter, hvor context propertien, som er meget inspireret af FHIR / FHIRcast (https://fhircast.org/specification/Feb2020Ballot/),

...

Dette eventkatalog lægger sig også op af FHIR / FHIRcast, hvilket betyder at eventet har følgende struktur:

...

import { NAPEventCatalogue } from 'nap-typescript-sdk';
const sessionCloseEvent = NAPEventCatalogue.v1.SessionClose;

...

Hjælpe funktioner

Nap-typescript-sdk indeholder derudover en række utility række hjælpe funktioner, som kan være brugbare til at hente værdier eller undgå stavefejl, når der skal laves NAPMessages.

...

Funktioner, som gør det lettere at hente FHIR specifikke værdier ud af en NAPMessage. Disse kan bruges ved at importere namespacet FHIRValueGetter.

Eksempel på anvendelse Fhir-value-getter

...

Følgende eksempel mapper en napMessage NAPMessage til en SAMLassertion og PatientInfo.

...

Nap-angular-sdk

Hvis du ønsker at bruge Angular som udviklingsværktøj, er dette SDK smartere at bruge, da det sørger for håndtering Angulars . SDK'et sørger for at håndtere Angulars "change detection zone for dig".

Da nap-angular-sdk er en angular specifik wrapper af nap-typescript-sdk, har den en "peer dependency" til hertil. 

Eksempel på implementing af nap-angular-sdk

...

import { NapAngularService } from 'nap-angular-sdk';
import { filterEvents, NAPEventCatalogue, NAPMessage } from 'nap-typescript-sdk';
import { v4 as UUID } from 'uuid';
import { NapAngularService } from 'nap-angular-sdk';
import { filterEvents, NAPEventCatalogue, NAPMessage } from 'nap-typescript-sdk';
import { shareReplay } from 'rxjs/operators';
import { v4 as UUID } from 'uuid';

export class MyComponent {
	
	// proxy for SAMLAssertion
	public session$: Observable<NAPMessage | undefined> = 
		this.napSDK.incomming$.pipe(
		filterEvents([NAPEventCatalogue.v1.SessionOpen, NAPEventCatalogue.v1.SessionClose]),
	);

	constructor(private napSK: NapAngularService) {

		//Construct an SessionOpen NAPMessage
		const napMsg: NAPMessage = {
		date: new Date().toISOString(),
		id: UUID(),
		event: { type: NAPEventCatalogue.v1.SessionOpen },
	};

		// Ask for the SAMLassertion in host
		this.napSDK.sendMessage(napMsg);
	}
}

...

Hvis du ønsker at bruge React som udviklingsværktøj, er dette SDK smartere at bruge, da det . SDK'et sørger for håndtering af "state" for dig.

Da nap-react-sdk er en react specifik wrapper af nap-typescript-sdk, har den en peer en "peer dependency" hertil. 

Eksempel på implementing af nap-react-sdk

Følgende eksempel viser hvordan man kan anvende nap-react-sdk til at vise og sende beskeder kunne se således ud:

import { NapContextProvider, NAPEventType, useNap } from 'nap-react-sdk';
import React from 'react';
import { v4 as UUID } from 'uuid';

const IncommingMessageComponent: React.FC = () => {
  const napContext = useNap()

  return <div> {JSON.stringify(napContext.latestIncomming)}</div>
}

const IncommingErrorsComponent: React.FC = () => {
  const napContext = useNap()
  return (
    <div >
      <p> Error received: {JSON.stringify(napContext.latestError)}</p>
    </div>
  )
}


const PostMessageComponent: React.FC = () => {
  const napContext = useNap()
  return (
    <button
      onClick={() => {
        napContext.postMessage({
          date: new Date().toString(),
          id: '123',
          event: { type: NAPEventType.SessionOpen }
        })
      }}
    >
      Send message
    </button>
  )
}

const App = () => {

  return (
    <>
      <NapContextProvider>
        <IncommingMessageComponent></IncommingMessageComponent>
		<IncommingErrorsComponent></IncommingErrorsComponent>
        <PostMessageComponent></PostMessageComponent>
      </NapContextProvider>
    </>
  )
}

export default Appp

...