Valgsfag projekt

Som en del af 3. semester kommer der et valgfags projekt. Fordi jeg er på fornt-end er det et projekt hvor vi skal kode. Her på siden gennemgår jeg procesen, fra start til slut. D.21/10/25 kl. 12.15 havde vi intro på opgaven

Introduktion fra projekt beskrivelsen:

“Gennemførelse af projektet er en forudsætning for eksamen ved udgangen af semestret. 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. Opgaven er mundtlig med et dertilhørende produkt. Projektet skal desuden overholde studieordningen.”

Afleveres: N/A

Der er derudover følgende krav til projektet:

Du producerer en del af en datadreven front-end løsning. Husk at det er frontend der tæller, og derfor får du ikke point for at lave din egen back-end.

Du præsenterer din løsning.

Afleveres: Discord

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: o 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.

• Har du selv en idé, skal den godkendes af Kenneth Clausen eller Marc Altfuldisch.Lorem ipsum dolor sit amet, at mei dolore tritani repudiandae. In his nemore temporibus consequuntur, vim ad prima vivendum consetetur. Viderer feugiat at pro, mea aperiam

Afleveres: Præsentationen er afleveringen

Du præsenterer hvad du har lavet og hvordan du har lavet det.

Du gør en live demo af dit produkt tilgængeligt for resten af holdet via Discord.

Strukturér din præsentation således, at det er lærerigt for resten af holdet som ikke har arbejdet med netop dit emne. 

Præsentationen skal vare 4-5 minutter. Efterfølgende vil der være afsat tid hvor holdet kan stille spørgsmål til dig og give feedback.

Ved valg af projekt besluttede mig og Kirja at det ville være en god ide at kode noget som vi kunne bruge i vores eksamens projekt. Der havde vi allerede igennem alt vores forarbejde med eksamen besluttede at vi skulle kode en form for kalender og booking system. Ved nogle gode snakke med Mack og Kenneth, fandt vi ud af hvordan vi kunne opdele de forskellige dele så vi havde hver vores kode del, men stadig noget som giver mening til vores eksamen. 

Kirja skulle kode en kalender oversigt, hvor der bliver tastet indformation ind omkring de forskellige hold/event som bliver ført over til vores database, men som så bliver hentet og vist i en kalender oversigt for brugerne på siden.

Jeg skulle kode en knap, som skulle vise i databasen hvilke hold der er meldt nogen til, knappen ligger så på de event som Kirjas kode del viser.

Vores produkt er en datadreven front-end løsning, der hele tiden snakker sammen med Firebase Realtime Database. Alt data ligger i et stort JSON-træ, og når man f.eks. udfylder en formular eller trykker på tilmeld/afmeld, bliver data sendt videre som API-kald og gemt direkte i databasen.

JSON er bare et tekstformat, der minder om et JavaScript-objekt med keys og values. Vi har brugt CRUD-metoden via Firebase REST API, som handler om fire ting:

• GET → hente data
• POST → lave nyt data
• PUT/PATCH → opdatere data
• DELETE → slette data

Det var super vigtigt, at databasen var sat rigtigt op, for hvis der var en fejl der, så ville vores JavaScript-kode også fejle. Derfor testede vi først alle vores API-kald i Postman, så vi kunne se om databasen virkede, før vi satte det ind i selve projektet.

Vi brugte GitHub til versionsstyring, så vi hele tiden arbejdede i den samme kode.

Vi valgte at bygge projektet i Vue med Vue Router, fordi det gør siden hurtigere og gør det nemmere for os at arbejde med komponenter. I det her projekt skulle vi for første gang bruge den samme database. Derfor oprettede jeg et Firebase-projekt og inviterede Kirja som editor. Selvom det hele var ret nyt og svært i starten, begyndte vi stille og roligt at forstå mere og mere.

For at forbinde vores lokale kode med Firebase kørte vi begge kommandoen firebase init hosting i terminalen. Det gjorde, at vi begge to arbejdede på den samme database og var klar til at kode projektet videre.

Min del af koden er en tilmeldings knap som skal sende information til databasen om at der nu er en som er meldt på det valgte event/hold også opdagtere status i databasen. Derefter skal denne opdatering også blive tydelig for brugeren ved at tilmeld knappen ændre sig til afmeld.

BookBtn.vue er det komponent som har alt koden der skal til for at tilmelde og afmelde et event. Tilmeld knappen sidder i Kirjas kode event.vue for at den bliver synlig det rigtige sted. Det vil sige at for hver gang der bliver oprettet et event ligges min knap sammen med events så man som bruger kan tilmelde sig. 

<BookBtn :id =”ev.id“ /> ligger inde i Kirjas kode som henter alle events fra databasen og viser dem med et v-for, hvor hvert event får sit eget id. BookBtn får det id som prop, så knappen ved præcis hvilket event i databasen den skal tilmelde eller afmelde.

I scrips setup bliver statusen fra den enkle knap hentet direkte fra Firebasen (defineProps). Den tager det id den får udefra der hvor knappen var placeret i Kirjas kode og laver en URL, så den ved hvilket events den skal hente datasen for (PATH).

Med ref er der lavet 3 forskellige værdier som fortæller status (om man er tilmeldt), loading (om vi er i gang med at hente data) og error (hvis noget går galt).

Når komponenten kommer på skærmen, kører onMounted(load), som starter load()-funktionen. Det er her, vi laver et GET-kald til Firebase (fetch(PATH)), henter status og gemmer det i status.value. Så får knappen den rigtige start tilstand, og hvis der sker en fejl, fanges det i catch og viser en fejlbesked. Til sidst sætter finally loading tilbage til false, så knappen kan bruges igen.

I tamplate delen af koden er det den del af koden som bliver synlig altså tilmeld/afmeld. Knappen kalder på onToggle funktionen når der bliver klikket på den (v-on:click=”onToggle”).

Det er den funktion som sender PUT-kaldet til Firebase og skifter tilmeldeingsstatusen. Med v-bind:disabled=”loading” kan man ikke klikke på knappen flere gange når funktionen køre og der stadig hentes data. For at kunne style farven på knappen laves der en klasse ved v-bind:class=”{ active: status === 1 }”.

Også til sidst bliver teksten på knappen ændret automatisk med ({{ status === 1 ? ‘AFMELD’ : ‘TILMELD’ }}), som er en ternary operator der vælger mellem to værdier. Altså om status er 1 så vis tilmeld ellers hvis afmeld.

I den sidste del styles selve Tilmeld/Afmeld-knappen. Den øverste button-blok sætter de generelle styles som farve, størrelse, font og afrundede hjørner. Klassen .active ændrer baggrundsfarven, når brugeren er tilmeldt (status = 1), og button:disabled gør knappen mere gennemsigtig, når den er låst, fordi vi enten henter eller gemmer data.

Det er umuligt at undgå problemer når man koder hvilket der har været små ting af undervej med at udvikle koden, men de største problemer jeg løb ind i var at min local host slet ikke ville køre. Så er det virkelige svært at udvikle kode. For at løse problemet sad jeg ligge og skrev frem og tilbage med chat og sendte screenshots af selve CLI’en hvad den skrev og ikke skrev… Efter mange timeres problemer og forsøg fik jeg slettet og geninstalleret node.modules. Hvilket i første omgang løste problemet, men tilgengeld begynde min GitHub at give mig problemer, den kunne ikke længere finde mit projekt via mine stier. Og igen måtte jeg længe sidde og prøve at fikse det med hjælp fra chat, og fandt ud af hvis man ligger sin kode i mapper som fx dokumenter som jeg havde gjort kan beskrevet af chat “På Mac og Windows kan Documents nogle gange være synkroniseret med OneDrive/iCloud, og det kan forvirre GitHub, fordi filstien ændrer sig eller synkroniseres i baggrunden.”

Så jeg fik flyttede projekt over i min developer mappe som ligger i roden og som fiksede det hele og det skulle vist også hjælp med at fikse det andet problem med local host. I sidste ende lykkedes det hele.

Jeg var nr. 2 oppe at fremlægge efter Kirja. Jeg gennemgik min kode og forklare hvad jeg havde gjort mig af tanker og hvordan det fungerede. Det måtte ikke tage mere end 5 selve fremlæggelsen også var der 5 min til at stille spøgersmål. Det hele gik super fint syntes jeg. Der var flere ting jeg ikke kunne svare på fordi jeg ægte bare gik i sort, men ikke på den uhyggelige måde, bare mere sådan “det ved jeg jo godt” men kunne ikke huske det. 

Der er ingen tvivl om at det er en helt ny måde at kode på. Jeg kan virkelig se hvordan det kan gøre alt kode meget nemmer i fremtiden. Men tilgengæld har der været utrolig meget at lære på virkelig kort tid! Alt den nødvendige undervisning lå meget samlede pga fejl med skemaet, så mit hoved var bare så træt. Syntes virkelig at det var spændene at arbejde med kode på den her måde, og der er ingen tvivl om at jeg syntes det er fedt at blive udfordret. Det er fedt at finde ud at hvor meget men endlige kan nå på så kort tid, og man kan sige det problemer jeg er stødt på nu gør det nemmer for mig i fremtiden. Det var også noget som der blev snakkede om til fremlæggelsen også ved de andre i klasse jo hvis de oplever noget lignede kan de komme at spøger mig så kan jeg måske hjælpe dem. Det har været rat at kunne udvikle noget som er relevant for vores eksamen så man følte det man lavede faktisk kunne bruges til noget.