Interaktiv applikasjon!

Du skal lage en interaktiv applikasjon som løser et konkret behov for en bestemt målgruppe. Du skal bruke Python og Flask, kjøre applikasjonen som en Docker-container på en server i Proxmox, og vise innhold som kommer fra data eller brukerinput.

Eksemplene under er bare ment som inspirasjon. Prøv helst å finne på et eget konsept. Tenk på hvem som skal bruke løsningen, hvilket problem den løser, og hva som gjør den nyttig:

• værmelding for Sandnes med “husk paraply!”
• dagens sitat med innsending og stemmegivning
• busstider eller annen lokal informasjon
• kantine-app med dagens meny og kalender
• digitalt klippekort for kantinen
• skritteller-ledertavle

Forkunnskaper og rammer

Du kan grunnleggende Python, litt Jinja2, SSH, Linux og nano. Du har allerede tilgang til en Proxmox-server. På den skal du opprette eller bruke en Debian- eller Ubuntu-server til applikasjonen. Du har også et domene på formen *.it1.iktim.no, *.it2.iktim.no, *.it3.iktim.no eller *.it4.iktim.no som peker til Unifi ruteren.

Mål for prosjektet

Når prosjektet er ferdig, skal du ha øvd på å:

• planlegge en løsning ut fra et brukerbehov
• beskrive hva løsningen skal gjøre, og lage et enkelt brukergrensesnitt
• bruke Flask-routes, Jinja-templates og data fra Python eller en datakilde
• bygge og starte applikasjonen som Docker-container på serveren
• dokumentere løsningen og vise hvordan den kan driftes videre

Del 1 - Ide og planlegging

Start med å velge et problem eller en målgruppe. Skriv et kort planleggingsdokument med:

• konseptnavn og en kort pitch
• målgruppe og hvilket behov du løser
• minst tre funksjonelle krav
• hvilke data som skal være dynamiske, og hvor de kommer fra
• skisse eller wireframe av hovedsiden og eventuelle ekstra visninger
• en enkel arbeidsplan for de to ukene

Presenter ideen kort for læreren eller en annen gruppe før du går videre. Bruk tilbakemeldingene til å gjøre ideen tydeligere eller enklere.

Del 2 - Lag applikasjonen

Applikasjonen må:

• bruke Python og Flask
• ha en hovedroute og minst én annen route
• bruke minst én Jinja-template med variabler, for-loop og if-sjekk
• vise innhold som kommer fra Python, JSON, database eller et API
• ha minst én tydelig brukerhandling som påvirker resultatet, for eksempel at brukeren sender inn et skjema, søker etter noe, filtrerer en liste, stemmer på et alternativ eller registrerer en oppføring
• ha feilhåndtering eller en tydelig visning når data ikke finnes
• fungere på enhetene målgruppen skal bruke

Du kan bruke JavaScript til små forbedringer, men hovedinnholdet skal genereres av serveren (Flask).

Del 3 - Docker og publisering

Applikasjonen skal kjøres på serveren, ikke bare på din egen datamaskin.

1. Lag en Dockerfile som bygger applikasjonen.
2. Lag en requirements.txt eller tilsvarende oversikt over avhengigheter.
3. Bygg et image og start containeren på Debian- eller Ubuntu-serveren.
4. Test applikasjonen fra en annen maskin på nettverket.
5. Bruk domenet som er satt opp for gruppen din når du tester løsningen. Nginx Proxy Manager brukes som reverse proxy.
6. Dokumenter kommandoene som trengs for å bygge, starte, stoppe og oppdatere løsningen.

Se Docker - Kom i gang, Docker - Dockerfile og Compose og Docker - Publisere applikasjon.

Forslag til fremdrift

Uke 1

• Dag 1: ide, målgruppe, krav og skisser
• Dag 2: Flask-struktur, routes og templates
• Dag 3: dynamiske data og interaktiv funksjon
• Dag 4: design, universell utforming og eventuelle ekstra visninger
• Dag 5: første fungerende versjon og brukertest

Uke 2

• Dag 6: Dockerfile og kjøring lokalt
• Dag 7: server, container og nettverk
• Dag 8: testing, feilsøking og forbedringer
• Dag 9: dokumentasjon, demo og ferdigstilling
• Dag 10: presentasjon og refleksjon

Levering

Lever ved å pushe prosjektet til GitHub. Repositoryet skal inneholde:

1. all kildekode, templates, CSS og eventuelt JavaScript
2. Dockerfile og avhengighetsfil
3. planleggingsdokument med ide, målgruppe, krav og skisser
4. README med installasjon, oppstart og oppdatering
5. lenke til den publiserte applikasjonen og en kort forklaring av hvordan den kjøres
6. kort refleksjon over hva som fungerte, hva som var vanskelig og hva du ville gjort videre

Når du står fast

Følg feilen fra ytterst til innerst: test først Flask lokalt, deretter containeren på serveren, og til slutt domenet gjennom reverse proxyen. Les feilmeldingen og noter hva du har prøvd før du søker etter en løsning. Ressursene i Docker - Kom i gang, Docker - Dockerfile og Compose og Docker - Publisere applikasjon forklarer både begrepene og kommandoene steg for steg.

README-filen skal være skrevet slik at andre kan sette opp prosjektet uten muntlig forklaring. Ta med forutsetninger, installasjon, miljøvariabler, kommandoer, test-URL-er og vanlige feilmeldinger. Ikke legg passord, API-nøkler eller annen sensitiv informasjon i repositoryet.

Vurderingskriterier

• Ide og brukerbehov: Konseptet er forståelig, begrunnet og tilpasset en målgruppe.
• Funksjonalitet: Applikasjonen har fungerende routes, interaksjon og dynamiske data.
• Brukergrensesnitt: Løsningen er ryddig, lesbar og tilpasset målgruppen.
• Teknisk løsning: Flask, Jinja og Docker er brukt på en hensiktsmessig måte.
• Drift og dokumentasjon: Applikasjonen kan startes på serveren, og andre kan følge dokumentasjonen.
• Testing og refleksjon: Du har testet løsningen og kan forklare valg, feil og forbedringer.