AULA OG WIDGETS. Leverandørmøde 19/

Transkript

1 AULA OG WIDGETS Leverandørmøde 19/

2 Dagsorden 1. Velkommen 2. Intro til Aula 3. Widgets rolle i Aula 4. Aulas arkitektur 5. Hvordan udvikles en widget 6. Pause og sandwich 7. Governance og Persondataforordningen 8. Spørgsmål 9. Afrunding

3

4 FORMÅL At understøtte børns læring og trivsel med god kommunikation mellem dem og deres fagprofessionelle og forældre

5 Grundlaget for projektet Aula Klar til brug på folkeskolerne i 2019 og i kommunale dagtilbud i 2020 Mere end 2 mio. brugere Fælleskommunalt udbud - 98 kommuner med på skoleområdet 93 på dagtilbudsområdet

6 Succeskriterier Empowerment af barnet 0-18 Brugervenlig, let tilgængelig og relevant Understøttelse af marked for specialløsninger Styr på sikkerhed og dataansvar i alle led Leverance til tiden

7 er det en god funktion? skal det ligge i Aula?

8

9 AULA.DK

10 WIDGETS ROLLE I AULA

11

12

13

14 AULAS ARKITEKTUR

15 Baggrund for arkitektur

16 Arkitektur for Aula Browser Løsningen App Brugergrænseflade Dashboards med Widgets Moduler i Løsningen Profil Beskeder Opslag Kalender Kontakter Galleri Sikker fildeling Grupper Søgning Hjemmeside Infotavle Komme/gå Samtykke SMS Administration Database Stamdata Tilladelser Supplerendestamdata Dokumenter Medier (Billede, lyd, video) Øvrig data Udstilling af Widgets Autentifikation af Brugere Dataintegration Læringsplatforme Fraværsløsninger Uni-Login Skemaplanlægning Serviceplatformen Kommunal fildeling Integrationsplatformen NemLogin/NemID STILs Infotjeneste Vedhæftning af filer fra OneDrive og Google Drive Bibliotekssystemet Lokale/centralt AD Kommunernes adm. systemer

17 HVORDAN UDVIKLES EN WIDGET?

18 Gennemgang af guides til Widget udvikling Dashboards og konfiguration af Widgets i Aula User Interface Guide (Design Guide) Widget Guide (Teknisk vejledning) Teknisk gennemgang Processer for godkendelse m.m.

19 To overordnede dashboard typer i Aula User Profile Dashboards målrettet den enkelte brugertype Barn (opdelt i indskoling, mellemskole og udskoling) Værge Ansat (opdelt i daginstitution, skole og administrativt personale) Gruppe Dashboards oprettet til specifikke grupper, f.eks. Projektgrupper for elever Samarbejdsgrupper for lærere og/eller forældre Afdelingsgrupper Som Widget leverandør kan du selv vælge om din Widget skal kunne placeres på alle eller kun udvalgte Dashboard typer.

20 User Profile Dashboards Eksemplet viser et værgedashboard for en forælder med 3 børn. For forældre aggregeres information på tværs af børnenes skoler (med mulighed for at filtrere). For ansatte aggregeres på tværs af institutioner (med mulighed for at filtrere per institution). Obs: Samme bruger kan være både Værge og Ansat, men vil have to profiler i Aula og vælge aktiv profil-kontekst under login.

21 Konfiguration af User Profile Dashboards Central Aula Administrator Laver den typiske basisopsætning. Kommunal Administrator Tilføjer/fjerner Moduler og Widgets i forhold til hvilke systemer de anvender Institutionens Administrator Kan også tilføje/fjerne Moduler og Widgets i forhold til specifikke behov. Både central og kommunalt kan man låse Moduler og Widgets, hvis det ikke skal være tilladt at fjerne dem på næste niveau. Aula vil automatisk sammensmelte Dashboard konfigurationer, f.eks. hvis en forælder har børn i to institutioner (måske endda i forskellige kommuner).

22 Gruppe Dashboards Gruppe Dashboards vises som overlays, og her er menupunkterne i toppen i stedet for til venstre. Disse dashboards sættes specifikt op til den enkelte gruppe af den lokale gruppe-administrator og har derfor ikke brug for sammensmeltning, aggregering eller låste konfigurationer. Som Widget Leverandør kan du selv vælge om din Widget skal kunne placeres på gruppe dashboards eller ej.

23 Vejledninger til udvikling af Widgets D100 User-Interface Guide: Design guide T0150 Widget Guide: Teknisk vejledning Begge dokumenter vil senere blive lagt ud som et åbent Widget vejlednings-website (i stil med f.eks. Borger.dk). Dokumentationen vil løbende blive opdateret og uddybet.

24 Design guide Skal opfattes som anbefalinger til Widget leverandører for at give Aula brugerne den bedst mulige (og ensartede) brugeroplevelse på tværs af Moduler og Widgets. Indeholder anbefalinger vedrørende: Widget størrelser/placeringer (Responsiveness) Generelle principper Design elementer (farver og fonte) Sideelementer (UI elementer, input felter, fejlbeskeder etc.)

25 Design guide Widget størrelse og placeringer Både på User Profile og Gruppe Dashboards kan Widgets enten: Være indsat som selvstændigt menu-punkt Indsættes i kontekst af et Aula Modul og dette moduls menupunkt Widgets skal være responsive og automatisk skalere til det område de vises i. Der er defineret 3 breakpoints i det responsive design: 1. Full page når en Widget vises på desktop i fuld bredde 2. Medium når en Widget vises på desktop med højrekolonne 3. Narrow/small når en Widget vises mobilt eller I højrekolonne

26 Full page version Benyttes f.eks. til kalendervisninger som indeholder meget information.

27 Medium og Narrow version Kan vises ved siden af hinanden på User Profile Dashboard.

28 Alle widgets skal understøtte Narrow version Ellers kan din Widget nemlig ikke vises i den mobile App! Man kan vælge at en Widget ikke må placeres som Full/Medium (hvis den kun er beregnet som en lille info-widget)

29 Design guide øvrigt indhold Generelle principper: Principper for modale vinduer, genvejstaster, hjælp og fejl Tilgængelighedsprincipper (WCAG 2.0) Support for hjælpeværktøjer (AppWriter, CD-Ord, IntoWords) Design elementer (farver og fonte): Bla. farvepaletter for henholdsvis ansatte og børn/værger Sideelementer (UI elementer, input felter, fejlbeskeder etc.):

30 Widget Guide: Teknisk vejledning Er målrettet udviklere som skal bygge Widgets til Aula. Læsere forventes at have viden om web udvikling, især HTML, JavaScript, CSS og REST Web API er. Desuden beskriver guiden de omkringliggende processer, som indgår i at bygge og vedligeholde Widgets på Aula.

31 Widget-typer Normal Widget Kan kun personalisere i forhold til basal, ikke-personlig information. Secure Widget Kan benytte brugerens UNI-Login ID til at personalisere indhold. SSO Shortcut En særlig, simpel udgave af Secure Widget til Single-Sign-On web links. SSO Shortcuts vises altid nederst i højre kolonne af dashboards.

32 Widget-teknologi Widgets bygges som en samlet Vue.js komponent (HTML, JavaScript og CSS), der afvikles inde i Aula s Single-Page-Application (SPA). Herfra kan Widgets kommunikere med Widget leverandørens egne systemer via web services (altid via https!). Widgets må ikke interagere med de omkringliggende komponenter i Aula s SPA (HTML DOM, cookies etc.).

33 Widget-teknologi: Vue.js Aula SPA er bygget på Vue.js 2.x, et rammeværk i stil med React, Angular, Backbone etc. Vue gør det let at lave brugerinterfaces (view templates), som automatisk reagerer på ændringer i data (JSON model). Templates bygges med HTML som binder sig til properties via tuborg klammer eller binding syntax. Editor plugins for Vue.js finds til bade Emacs, Sublime Text, Visual Studio/Visual Studio Code og Intellij.

34 Single File Components Widgets udvikles som Single File Component som består af både <template>, <script>, and <style>. JSFiddle Demo med UserDB i Vue.js

35 Widgets og input/output En Widget har sit eget isolerede Vue.js scope og kontekst data gives til Widgets via Vue.js properties: Man må ikke snyde og tilgå andet data via f.eks. HTML DOM.

36 Eksempler på Widget parametre Property name Type Description Normal Secure SSO getaulatoken assurancelevel userprofile placement currentweeknumb er childfilter institutionfilter Function Integer String String Integer String array String array Helper function that generates a shortlived Aula JSON Web Token (JWT) that contains the UNI-Login User ID. Is 2 for normal username/password login and 3 for two-factor login (NemID or similar) The currently active user profile (Student, Teacher, Parent). Which area the Widget has been inserted into can be either full, medium or narrow. Will change if the Dashboard pages forward/back between week numbers If the Widget should only display content for specific children, this property will contain the UNI-Login User Id of the chosen children. UNI-Login institution number of the chosen institutions. This can happen if the Aula user is filtering his view or if the Widget has been inserted by a specific institution. X X X Sent as AulaToken parameter. X X X X X X X X X X

37 Secure Widget med eget Web API Hent et Aula Token (JSON Web Token) via JS funktionen the getaulatoken Medsend dette token (som f.eks. Authorization header) Udfør token validering i eget Web API (validere at token er signeret af Aula, er udstedt til deres system og endnu ikke udløbet) Udtræk UNI-Login ID fra Aula token Uanset øvrige parameter i kaldet må en Web Service aldrig returnere data, som ikke bør være tilgængelige for brugeren med det pågældende UNI-Login.

38 Lav altid asynkrone kald vha. Axios Promises, gør det let at lave asynkrone kald og fejlhåndtering JSFiddle Demo

39 Brug af Aula Token i SSO Shortcuts SSO Shortcut er i praksis en lille HTML Form, der POST er et Aula JSON Web Token samt øvrige relevante kontekst parametre i skjulte input felter. Widget leverandører kan også selv lave sådanne links i Vue.js. Den URL hos Widget leverandøren, som modtager POST skal: Udføre same JSON Web Token validering som Web Services Logge brugeren på ud fra UNI-Login Id i token Obs: Aula tilbyder p.t. ikke nogen Single-Log-Out funktion, så brugere skal selv logge ud af de nye vinduer/faner der åbnes.

40 Widget Notifikationer Aula benytter små notifikations-tal til at advisere brugere om nyt, ulæst indhold. I Secure Widgets kan Widget leverandører tilføje en såkaldt Notification Handler funktion for at tilføje deres eget antal ulæste. Antallet lægges så til det menupunkt, den givne Widget er indsat under (dvs. enten sit helt eget menupunkt eller sammen med et Aula modul).

41 Hvordan afgives Widget notifikationer? Sammen med en Widget registreres en Notification Handler. Teknisk set er dette også en Vue.js component, men den har kun <script> delen (altså ikke hverken HTML eller CSS). Notification Handler kan benytte Web API helt ligesom normale Widgets (med same input parameter) for at hente en ulæst tæller som så afgives som Vue.js event til Aula: Notification handlers kan også lave periodisk polling ligesom selve Widget-koden kan opdatere den same tæller i takt med at brugeren får hentet og vist data på selve Widget en.

42 Scenarie med Widget notifikationer En forælder logger på Aula og ser forsiden på sit Værge dashboard. En Widget med Notification Handler slår op at brugeren har 8 ulæste begivenheder, hvilket Aula viser i menuen. Forælderen klikker nu på menupunktet for Widget en. Aula renderer Widget en, og Widget-koden slår denne uges indhold op. Widget-koden afgiver samtidigt en ny tæller, for at angive at der nu kun er 2 ulæste begivenheder.

43 Adgang til 3.parts biblioteker Widgets kan ikke frit benytte eksterne JavaScript biblioteker, CSS filer o.lign. som kan påvirke Aula s funktionalitet og udseende. Widgets må altid benytte: Egne ressourcer Predefinerede ressourcer som Aula stiller til rådighed Eget Web API Egne billed-referencer i <template> delen af Widgets BootstrapVue, Font Awesome, Axois, Moment.js Flere vil løbende blive tilføjet Man må gerne teste nye 3. parts ressourcer i Widget Test Miljøet, men det kræver godkendelse at få sådanne indført i produktionsmiljøet.

44 Spilleregler af hensyn til sikkerhed/stabilitet HTML indhold må kun skrives i <template> delen Man må altså ikke injecte dynamisk HTML Benyt normal Vue.js model binding til dynamisk HTML Alle anchor tags (links) skal åbne i ny tab/window. JavaScript må ikke benytte Jquery og må ikke tilgå/manipulere DOM direkte eller tilgå window.location, window.history m.m. Al adgang til Web API er skal benytte asynkrone kald <style> tag skal indeholde scoped attribute for at afgrænse styling til egen Widget. Så vidt muligt valideres disse spilleregler automatisk når Widget kode opdateres.

45 Proces for at blive leverandør Man ansøger via online formular. Aula s Widget Board (Kombit) tager periodisk stilling til ansøgere for at filtrere helt useriøse henvendelser bort. Straks efter godkendelse modtager Widget leverandøren login til Aula s Widget Test Miljø hvor man kan begynde at bygge/afprøve Widgets.

46 Proces for bygge en ny Widget Widgets uploades of afprøves i Aula s Widget Test Miljø hvor man kan simulere med bestemte UNI- Login ID er, dashboard-placering og størrelse af widget, filtre på børn og institutioner, kalenderbladring med ugenummer m.m. Widgets skal derefter godkendes, dels af Kombit (igen kun som filter), og dels i form af teknisk godkendelse (igen noget som sker periodisk). Widget leverandør notificeres om deployment tidspunkt og er selv ansvarlig for at informere kommuner og institutioner om den nye Widget.

47 Nødvendige data for en ny Widget Alle Widgets: Type (Normal Widget, Secure Widget eller SSO Shortcut) Navn Beskrivelse Ikon (optional) Hvilke typer dashboards den kan anvendes på (User Profile Dashboards / Group Dashboards) For SSO Shortcuts: URL som sign-on token skal POST es til. For Normal og Secure Widgets: Widget Code (Vue.js) Om den kan benyttes på Full page/medium areas Eventuelt Notification Handler

48 Proces for tilrette en Widget Følger samme proces som udvikling af ny Widget dog vil den periodiske godkendelse ske oftere (og typisk kun kræve en teknisk gennemgang, som kigger på forskellen mellem de to udgaver). Leverandøren har mulighed for at angive en pilot-periode hvor både gammel og ny version begge vil være tilgængelige. Leverandøren kan så bede specifikke institutioner om at skifte til pilotudgaven uden at forstyrre de øvrige. Efter pilotperioden skiftes alle til at benytte den nye udgave.

49 Andre processer Midlertidig deaktivering Ved pludselige sikkerhedsrisici, performanceproblemer, nedbrud eller lignende vil den centrale administration i Aula kunne deaktivere en given Widget Den kan enten at skjules helt eller vise en valgfri fejlbesked i stedet Slette en Widget fra Aula Widget leverandører kan bede om at få en Widget fjernet helt fra Aula. Leverandøren er selv ansvarlig for at informere relevante kommuner/institutioner. Widgets fjernes som en del af den normale, periodiske widget deployment rutine.

50 Feedback som allerede er under overvejelse Self-hosted Developer Kit: Komplet Vue.js Developer Kit som kan køre lokalt Inklusive guide-lines til at simulere Aula-parametre Mulighed for i særlige tilfælde at benytte iframes: F.eks. når Widget leverandørers allerede eksisterende komponenter benytter 3.parts komponenter, som af tekniske eller licensmæssige årsager ikke kan placeres i Aula Bør begrænses til sjældne use cases og/eller superbrugere iframes fungerer typisk dårlig med responsivt design og mobil visning iframes fungerer ofte også dårlig med skærmoplæsere og lignende redskaber

51 PAUSE OG SANDWICH

52 GOVERNANCE OG PERSONDATAFORORDNINGEN

53 Governance Kombit godkendelse Seriøs leverandør Netcompany godkendelse Teknisk verifikation

54 Persondataforordningen Databehandleraftaler og Underdatabehandleraftaler Korrekt beskyttelse af persondata (GDPR)

55 Opsamling på Widgets Nemt af lave widgets Udvikles af alle webudviklere. Mål for widgets: Masser af gode widgets i Aula for alle brugere

56 SPØRGSMÅL?

57 AFRUNDING OG TAK FOR I DAG