Valgfagsprojekt

Fredag d. 10/04-2026 havde vi kick-off, hvor vi blev præsenteret for projektet og rammerne samt krav til produkt såvel som præsentation.

Projektbeskrivelsen og de tilhørende krav lød:

Den studerende udarbejder individuelt en præsentation, som beskriver en del af en datadreven front-end løsning. Løsningen skal være produceret af den studerende selv.

•  Produktet skal være en datadreven front-end løsning.
• Du skal bruge API-kald.
• Du skal bruge andre relevante teknologier (enten nogle som vi har kigget på sammen, som f.eks. Vue.js, eller nogle som vi ikke har kigget på).
• Produktet kan eventuelt omhandle et eller flere af følgende emner:
  • Portfolio website med mulighed for at oprette artikler vha. realtime databaser.
  • Registreringssystem til udlån af udstyr i medialab. Det skal være muligt at registrere udstyr af forskellige kategorier, samt udlåne udstyret. Du kan evt. researche behovet i Medialab.
  • Noget som giver mening ift. dit eksamensprojekt.
  • Noget som giver mening ift. din Discord-bot.
  • Har du selv en idé, skal den godkendes af Marc Altfuldisch.

1. ide

Til kick-off havde vi en runde, hvor vi hver især fortalte, hvad vi tænkte at lave. Her havde Freja og jeg på forhånd aftalt, at vi ville bruge dette projekt på at komme videre med vores eksamensprojekt. Vi kom derfor til, at hun ville udarbejde det interaktive kort, der er at finde på hjemmesiden, og jeg ville arbejde med Instagram API, så vi kunne vise de nyeste posts på hjemmesiden også.

Vi fik en lille hestesko af Kenneth, som viste steder man kunne begynde at læse, hvis man var tom for idéer. Jeg synes, at jeg kiggede rundt mange forskellige steder, og synes ikke rigtig, at jeg fik en ide om, hvor eller hvordan jeg skulle starte. Jeg (Kenneth) fandt dog en artikel, der nogenlunde gennemgik processen.

Jeg løber igen ind i en mur, da man skal gøre det på en business/kreatør konto man har login til, og som også er en developer konto. Jeg har ikke login til vores klients konto, og tænker derfor at gøre min egen konto til kreatør og developer. Det virker ikke. Jeg kan ikke få oprettet mig som developer konto. Ifølge chat har Meta midlertidig blokeret mig fra at kunne gøre det, og at det bedste jeg kan gøre, er at vente 😐

I min ventetid, forsøger jeg at planlægge lidt mere af det logiske med hvordan jeg får de nyeste posts vist, og kun de første 2 eller 3 stykker. Her kom jeg i tanke om en opgave vi lavede med at placere objekter efter værdi, og tænke, man kunne bruge samme logik på dato og tid. Jeg tænkte derudover også tilbage på en metode, der tillod at udvælge et stykke data man ville bruge. Nemlig .slice()

Jeg oplevede hen ad vejen flere problematikker, bl.a. at Meta ikke kunne give mig mit token, da den ikke kunne indhente data fra min side. Så efter endnu mere ventetid, var jeg nødt til at indse og acceptere, at med dette tempo, kunne jeg ikke nå at færdiggøre opgaven inden præsentationen.

2. ide

Jeg skrev til Marc, som foreslog et registreringssystem til AI-lab. Det skulle ende med en platform, hvor man kunne underskrive tro og love, læringsobjekter kunne krydes af, og når man har gjort begge dele, være muligt at booke sig ind i labbet. Tanken var derfor, at man skulle oprette en bruger, så der var styr på hvem, der havde klaret hvad. Her valgte jeg, at auth-metoden skulle være email/password

Jeg fik oprettet en database i firebase, der gemte en persons login samt hvorvidt de har tjekket dem af.

Når man registrer sin bruger, er variablene email og password tomme. Funktionen er lavet med async, fordi den arbejder med asynkrone processer som kommunikation med Firebase-serveren. await bruges til at få JavaScript til at vente på, at en handling er færdig, før næste linje bliver kørt. Først oprettes brugeren med email og password, hvorefter brugerens data gemmes i databasen med setDoc(). Til sidst bliver brugeren sendt videre til dashboardet med router.push(“/dashboard”).

Skal man i stedet logge ind, starter email og password igen tomme, der køres en async arrowfunktion, der tjekker henter dataen tilhørende en given bruger, hvorefter de sendes videre til dashboardet med router.push(“/dashboard”).

onAuthStateChanged() lytter efter ændringer i login-status i Firebase Authentication. Hvis en bruger logger ind eller ud, bliver funktionen automatisk kørt igen.

firebaseUser indeholder information om den aktuelle bruger. Disse informationer gemmes i variablen user med user.value = firebaseUser.

docRef opretter en reference til firestore-data, som gemmes i docSnap

Hvis dokumentet findes, hentes dataen fra dokumentet med docSnap.data() og gemmes i userData.

Begge funktioner bruges til at opdatere brugerens data i Firestore-databasen. markDeclaration() markerer, at brugeren har underskrevet en erklæring, mens markLearning() markerer, at brugeren har set læringsmaterialet. Først oprettes en reference til brugerens dokument i databasen ved hjælp af brugerens uid.

Derefter bruges updateDoc() til at ændre værdien i Firestore. Funktionerne er asynkrone, derfor bruges async og await, så programmet venter på, at databasen bliver opdateret korrekt.

Projektet har både haft noget positivt og negativt med sig. Jeg synes, der har været mange ting at se til, og det har derfor været rart, at det er noget man kunne bruge til eksamensprojektet.

Jeg synes dog også, at det har været superfrustrerende ikke at kunne komme i gang. Dels fordi jeg ikke vidste, hvor jeg skulle begynde og ikke havde en ide om, hvad jeg skulle gøre. Men også fordi jeg skulle vente den del tid, og derfor begyndte at stresse en smule over, om jeg overhovedet kunne nå det og der var intet der fungerede.

Jeg synes derfor også, det var en god ide, at jeg skiftede projekt da jeg gjorde.

Selvom jeg klarede mig igennem opgaven, savnede jeg noget mere undervisning. Jeg følte ikke rigtig, jeg kunne trække på noget af den undervisning vi havde haft. Jeg havde lidt svært ved eks. at se, hvordan jeg kunne bruge postman.

Selvom jeg synes, at det var spændende at se, hvad de andre havde lavet, følte jeg ikke det gav mening for content at se vores kode.

Havde jeg haft mere tid til ide nr. 2, ville jeg gerne have lavet mere design på brugerfladen og få ”book”-knappen til at føre til det rigtige sted, da den for nu bare fører tilbage til login-siden. Læringsmaterialet skulle derudover også vises og ikke blot være en knap.

Edit: Det endte faktisk med at vise sig, at jeg kunne bruge noget af koden fra registrerings-delen til at gemme beskeder fra kontaktformularen i eksamensprojektet. Med nogle ændringer, men samme princip.