feedback
feedback er en tjeneste som kan benyttes av alle Origos frontend applikasjoner for å ta i mot tilbakemeldinger fra Tim og sende disse inn til et sett Google regneark. Det kan konfigureres opp hvilket regneark tilbakemeldingene skal havne i slik at f.eks kan ha ulike regneark til ulike applikasjoner og miljøer.
Dette spesifikke repoet er frontend tjenesten til feedback komponenten. Det er mulig å kjøre denne standalone, men det er ment som et bibliotek som kan linkes inn i en annen applikasjon.
Hvis du ønsker å se på backend ligger det her: https://github.oslo.kommune.no/digiskjema/feedback-api
Bruke biblioteket fra en frontend applikasjon
Se mer informasjon her om hvordan tilbakemeldingsløsningen ser ut og hvordan man tar den i bruk: https://confluence.oslo.kommune.no/display/ORIGO/feedback
Importere det i din applikasjon (Endringer fra Angular til Vue)
BREAKING CHANGE:
Fra versjon 2.0 så er html-tagen endret fra <custom-feedback> til <ok-feedback>
Etter omskriving av komponenten fra Angular til Vue, så er det planlagt at det skal fungere som før. Det er bare en endring som må gjøres i prosjektet ditt hvor du importerer komponentent. Css-filen er nå bundlet sammen med .js fila så du trenger ikke å importere den lenger.
Props
| Navn | Type | Default | Required | Eksempel | Beskrivelse |
|---|---|---|---|---|---|
| origin | String | true | dvd-runtime | Backend sender ikke noe til regneark hvis ikke denne har en verdi. | |
| env | String | prod |
false | test,systest,prod | Dersom ikke env spesifiseres så velges prod som default. Verdien her styrer hvilken backend komponenten skal gå mot. Backend for feedback ligger i kubernetes i alle tre miljøer. |
| label | String | Tilbakemelding |
false | Feedback | Dersom ikke label spesifiseres så vil Tilbakemelding være default verdi. Denne teksten settes på knappen som vises nederst til høyre. |
| metadata | String | true | {"id":2, "title":"Test"} | Json med flat struktur (dvs liste med name/value). NB: Denne MÅ være en Streng og ikke Object | |
| gid | String | true | 1ULsDGYIidw0PH5WZQ84bCwq5EXh-fkMmO78-BhwMGiA | google sheet id til regneark som tilbakemeldingen skal havne i | |
| url | String | `` | false | https://feedback-backend-test.api-test.oslo.kommune.no/feedback | I stedet for å spesifisere miljø, så kan du bare sende ned hele urlen |
| showSubmit | Boolean | false |
false | Hvis du vil overskrive håndteringen av submit-knappen. By default så vises den ikke hvis du ikke skriver inn feedback, men hvis du sender med true så blir den vist uansett | |
| titleLabel | String | Hei |
false | Overskriften på modalen | |
| subtitleLabel | String | Hvor fornøyd er du med denne tjenesten |
false | Undertittelen på modalen | |
| firstSmileyLabel | String | Veldig fornøyd |
false | Tekst på smilefjes som er positivt | |
| secondSmileyLabel | String | Passe fornøyd |
false | Tekst på smilefjes som er nøytral | |
| thirdSmileyLabel | String | Lite fornøyd |
false | Tekst på smilefjes som er negativ | |
| goodPlaceholderLabel | String | Har du forslag til forbedringer? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den. |
false | Placeholdertekst hvis du velger positiv/nøytral smilefjes | |
| badPlaceholderLabel | String | Hvorfor er du misfornøyd? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den. |
false | Placeholdertekst hvis du velger negativ smilefjes | |
| submitLabel | String | Send inn |
false | Tekst på submit-knappen |
Styles
Feedback-komponenten har default styles på form og farge, men det er mulig å endre designet fra hovedapplikasjonen som importerer feedback-komponenten. Under har du css-styles som treffer de viktigste delene av applikasjonen:
| navn | beskrivelse |
|---|---|
ok-feedback__header--h2 |
Overskrift |
ok-feedback__header--h3 |
Underskrift |
ok-feedback__feedback--textarea |
Input-feltet for å skrive inn tilbakemeldingen |
ok-feedback__feedback--submit-btn |
Submit-knappen for å sende inn tilbakemeldingen |
ok-feedback__btn |
Tilbakemeldings-knappen for å åpne modalen |
Installere prosjektet
Denne tjenesten er utviklet i Vue2 og har krav om:
- >= Node 12
git clone git@github.oslo.kommune.no:digiskjema/feedback.git
cd feedback
npm install
npm run build:lib
Kjør prosjektet lokalt
Starte frontend
npm run serve
Frontend tjenesten er da tilgjengelig på http://localhost:8080 (hvis 8080 er brukt, så går den videre til 8081 osv)
Rutiner ved koding
Linter og fikser filer
npm run lint
Kjør enhetstester
npm run test:unit
Bygge release til repo
Foreløpig er det ikke lagt inn støtte for Jenkins i dette prosjektet som trigger på merging av branch til master. Du må derfor selv sørge for at ny versjon i master havner i artifact repo.
- Opprett PR på det du har gjort i branchen din og få denne godkjent
- Merge branch inn i master (gjerne via github)
- Sørg for at du ikke har noen utestående endringer og at lokal master branch er i sync med origin/master før du går videre.
For å bygge og deploye ny versjon av feedback til repo gjør du dette:
# Merk at du MÅ ha med slash på slutten av URLen for at login skal virke
# PS. Dersom du ikke får autentisert deg så kan du også prøve å slette inneholdet av ~/.npmrc
# Brukernavn/passord finner du i kryptert dok (under nexus: # artifacts.oslo.kommune.no)
npm login --scope=oslokommune --registry https://registry.npmjs.org/
npm run deploy
Deploy utfører følgende oppgaver:
- Kjører linting
- Bygger tjenesten
- Obfuskerer koden
- Minimaliserer css/less og javascript filer
- Samler alle filer i to filer som kan benyttes av applikasjon som vil dra inn feedback
- Patcher versjonsnummer i package.json
- Publiserer npm release i artifact repo
- Pusher ny tag i git