Modul 1

Opprette app i Studio, sette opp lokalt utviklingsmiljø og local test

I denne modulen skal du basert på kravene fra Sogndal kommune sette opp førstesiden til applikasjonen for tilflyttere og verifisere at ting ser ut som forventet lokalt.

Temaer som dekkes i denne modulen:

  • Opprette ny applikasjon
  • Legge til datamodell og knytte felter
  • Utvikle en app i lokalt utviklingsmiljø
  • Redigering av tekstressurser
  • Teste applikasjon i lokalt utviklingsmiljø (LocalTest)

Oppgaver

Opprett applikasjonen i Altinn Studio med organisasjonen du har tilgang til som eier. Alternativt kan du opprette applikasjonen med deg selv som eier dersom du ikke skal teste den i et testmiljø.

Krav fra kommunen

  • Applikasjonen må ha et fornuftig navn som gjør det enkelt å finne den igjen blant det store antallet repositories Sogndal kommune har i Altinn Studio.

  • Det er ingen foreløpige planer om årlige revisjoner av appen, så man trenger ikke ta hensyn til årstall i navnet.

Det er et ønske om at et eller flere av ordene “tilflytter” og “Sogndal” er med i navnet.

Nyttig dokumentasjon

Sogndal kommune har opprettet en datamodell som representerer data de ønsker å samle inn fra fremtidige innbyggere.

Som applikasjonsutvikler vil man i noen tilfeller måtte opprette datamodell for en tjeneste selv. Da vil man kunne benytte seg av datamodelleringsverktøyet i Altinn Studio (lanseres våren 2022), eller ta utgangspunkt i en eksisterende datamodell og redigere den i f.eks. Visual Studio eller et selvvalgt tekstredigeringsprogram.

  1. Last ned xsd-filen, åpne den i et tekstredigeringsprogram og ta en nærmere titt på innholdet.
  2. Last opp datamodellen i Altinn Studio
  3. Push endringene master og ta en nærmere titt på filene i mappen App/models

Forståelsessjekk

  • Hvilken data er det tjenesteeier ønsker å samle inn her?
  • Hvilken effekt har <minOccurs> i datamodellen? Du vil se at feltet har ulik verdi for Inflytter.Fornavn og Inflytter.Mellomnavn
  • Hvilke andre egenskaper er satt på feltet Innflytter.Mellomnavn?
  • Det er blitt generert en .C#, .metadata.json og .schema.json fil i tillegg til .xsd filen som du lastet opp. Hva er sammenhengen mellom disse filene?
  • Enkelte restriksjoner fra datamodellen overføres ikke til C#-filen, hvilke? Det er og lagt til nye egenskaper, hvilke?

Nyttig dokumentasjon

For at tjenesten skal være brukervennlig og mulig å benytte for de som sitter med synshemninger er det viktig at alle komponenter har gode og beskrivende overskrifter og beskrivelser. Vi ønsker nå at dere legger til tekster som skal brukes for hvert datafelt.

Det er mulig å koble tekster til komponenter både i Altinn Studio og lokalt.

MERK: Visningsnavn for applikasjonen må endres både i App/config/applicationMetadata.json og i tekstressursene.

Krav fra kommunen

  • Alle inputfelter skal ha forklarende labels som beskriver hva som skal fylles inn
  • Applikasjonen må være tilgjengelig både på bokmål, nynorsk og engelsk I en første versjon er det tilstrekkelig at kun ett av disse språkene støttes
  • Det er viktig at applikasjonens visningsnavn klinger godt og er beskrivende for tjenesten

Nyttig dokumentasjon

Forståelsessjekk

I Altinn i dag støtter vi tre skriftspråk: bokmål, nynorsk og engelsk.

  • Hvordan får du inn engelsk språkstøtte i applikasjonen?
  • Hvis vi en dag skal støtte Ukrainsk, hvilken språkkode vil du da måtte annotere filen med?
  • Hvis en tekstnøkkel refert til i FormLayout.json ikke finnes i tekstressursene, hva vil vises da?

Feltene som skal fylles ut på en skjemaside kan settes opp ved hjelp av “drag and drop” i Altinn Studio eller manuelt i json-filen som beskriver utseendet til en skjemaside FormLayout.json.

Basert på kravene fra kommunen klarer du å sette opp den første skjemasiden i Altinn Studio?

Krav fra kommunen

  • Vil ha navn og alder på personen som er tilflytter
    • Fornavn
    • Mellomnavn (valgfritt)
    • Etternavn
    • Alder
  • Vil ha adressen på personen som er tilflytter
    • Gateadresse
    • Postnummer
    • Poststed
  • Vil ha kontaktinformasjon på personen som er tilflytter
    • Epost
    • Telefon

Nyttig dokumentasjon

Forståelsessjekk

I applikasjonsrepoet ditt finner du FormLayout.json i mappen App/ui/layouts. JSON-filen beskriver skjemasiden du har satt opp i Altin Studio, gitt at du har pushet endringene dine til master.

  • Finner du igjen komponenten som er koblet til e-post-feltet?
  • Hvilken endring kreves i denne filen dersom e-post-feltet ikke lenger skal være påkrevd?
  • Ved å endre én linje i FormLayout.json er det mulig å endre komponenten knyttet til mellomnavn til et input felt for et langt svar. Hvilken endring kreves?

Enkelte applikasjonsfeatures er det ikke støtte for å utvikle i Altinn Studio. Disse må utvikles i et lokalt utviklingsmiljø.

Selve utviklingen kan gjøres i ditt foretrukne utviklerverktøy, men trenger du en anbefaling er Visual Studio Code et godt alternativ.

Nyttig dokumentasjon

Ved hjelp av en mock som kan spinnes opp lokalt av Altinn Plaform er det mulig å gjøre enkel testing og verifikasjon av applikasjonen i det lokale utviklingsmiljøet.

I denne oppgaven skal du få kjørt opp applikasjonen lokalt med støtte fra LocalTest. Når du har fått appen opp og kjøre og logget inn med en testbruker, bør du ha et resultat som likner dette:

“Applikasjonen kjørende lokalt”

Et bilde av applikasjonen kjørende lokalt

Videre vil du ønske å teste endringene dine fortløpende i localtest.

  • Ved endringer knyttet til formLayout og andre json-filer holder det med en refresh (F5) i nettleser.
  • Ved endringer i prefill vil man måtte instansiere applikasjonen på nytt.
  • Ved endringer i cs-filer må applikasjonen stoppes og startes på nytt. Alternativt kan du benytte deg av dotnet run watch når du starter applikasjonen for hot reload.

Nyttig dokumentasjon

Oppsummering

I denne modulen har du opprettet en applikasjon i Altinn Studio, lastet opp en datamodell og satt opp en skjemaside som kobler komponenter til noen av feltene i datamodellen. Videre har du klonet repoet lokalt for å kunne videre applikasjonen i ditt lokale utvilkingsmiljø.

Tjenesten skal kunne kjøres opp på din lokale maskin med local test og du skal kunne fylle inn feltene.

Husk å pushe de lokale endringene dine, så de blir tilgjengelig i Altinn Studio når du er fornøyd

Løsningsforslag

Dersom du ikke har fått til alle stegene har vi et løsningsforslag som du kan hente inspirasjon fra.

Skjermbilde av datainnsamlingsside

Skjermbilde av datainnsamlingsside