VALGFAGSPROJEKT

På 3. semester har vi valgt valgfag, hvor vi skal lave et projekt. Som frontender skulle vi producere en del af en datadrevent frontend-løsning. Vi havde kick-off d. 21/10 og skulle præsentere d. 31/10.

Kravene lød således: 

• 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å).

Da vi samtidig havde eksamensprojekt kørende, så Mathilde og jeg det som en oplagt mulighed at lave noget, der også kunne bruges til netop det projekt. Derfor besluttede vi at lave en kalenderoversigt over kommende events og hold, som Odense Idrætspark udbyder ved deres forskellige faciliteter.

Da det var et krav, at man skulle lave det individuelt, delte vi det op således, at jeg lavede oprettelsesformularen som Odense Idrætspark kan udfylde med events og hold, som så bliver vist på selve oversigtssiden, man som bruger har adgang til og kan booke sig på hold. Mathilde lavede knappen, hvor man kan tilmelde sig og afmelde sig et hold.

I udviklingen af kalenderoversigten arbejdede vi aktivt med Command Line Interface (CLI) til at installere afhængigheder, starte udviklingsmiljøet og deploye projektet. CLI’en gav et effektivt workflow og gjorde det muligt at teste, bygge og publicere projektet på en professionel måde. 

Installation af projektet

For at hente alle nødvendige dependencies brugte vi kommandoen:

npm install

Dette installerede alle pakker fra package.json og gjorde projektet klar til at køre lokalt. 

Hele løsningen snakker med Firebase Realtime Database, hvor det kommunikerer med en database i realtime, hvor data ligger i et stort JSON-træ . Så det vil sige, når vi udfylder formularen eller trykker på tilmeld/afmeld-knappen sendes data videre via API-kald, som så gemmes i Firebase. 

JSON (JavaScript Object Notation) er et tekstbaseret dataformat, som bruges til at gemme og udveksle data mellem systemer. Det består af nøgler og værdier (keys og values), som minder om JavaScript-objekter. 

Start af udviklignsserver

Under udviklingen blev projektet startet med:

npm run dev

Dette åbnede en lokal udviklingsserver med live-opdatering, så ændringer i koden kunne ses med det samme uden manuel genindlæsning.

Vi har haft fokus på CRUD-metoden gennem Firebase REST API, hvor akronymet CRUD står for Create, Read, Update og Delete. 

GET → hent/læs data

POST → opret data

PUT/PATCH → opdater data

DELETE → slet data

 

Her ses eksempler i koden, hvor CRUD er anvendt.

Det var vigtigt, at Mathilde og jeg fik sat databasen korrekt op, så vi kunne få projektet op at køre. Vi tjekkede API-kald i Postman, da dette kan gøres uden frontend, og man derved kan tjekke om databasen fungerede korrekt før vi kørte det i koden. Så fordi vores JavaScript-kode laver API-kald, vil enhver fejl i databasen skabe fejl i koden, og omvendt. 

Vi brugte GitHub som versionsstyring, så vi var sikre på, at vi hele tiden havde den samme version af kode, vi arbejdede på.

Fordi vi arbejdede med Vue.js, så arbejdede vi med komponenter og views, som gør, at man ikke arbejder med i samme html/template og i samme styling (css), og derved undgår at overrule hinandens kode – som har været en udfordring i tidligere projekter. På den måde fik vi ikke særlig mange fejl og merge-conflicts med GitHub.  

Build af produktionsklar version

Da projektet var klar til upload, genererede vi en optimeret build med:

npm run build

Kommandoen pakkede projektet til en hurtig og minificeret produktionsversion.

Deployment til Firebase Hosting

Til sidst blev projektet deployet via Firebase med:

firebase deploy

Dette uploadede alle build-filer til Firebase, som derefter hostede den færdige webapplikation online.

Den 31/10 skulle vi op og fremlægge vores projekt, og dette skulle foregår individuelt, da det var et individuelt projekt. Selvom Mathilde og jeg havde arbejdet sammen om noget af løsningen, havde vi stadig hver vores del. Vi ville gerne have det overstået, så jeg startede med at fremlægge foran klassen samt undervisere, da min del giver bedst mening at fremlægge først. Vi havde fem minutter til fremlæggelsen og derefter fem minutter til spørgsmål og feedback. Det gik fint med fremlæggelsen, men var lidt mere udfordrende med spørgsmål, da der var nogle ting jeg ikke vidste og ting jeg ikke kunne huske – klassisk når man er on the spot.

Nedenfor ses den formular, som admin hos Odense Idrætspark kan udfylde for at oprette hold. Her kan man også redigere og slette hold. 

Her ses den oversigt, som brugere ser på hjemmesiden. Her kan de klikke på tilmeld og så afmeld igen. 

Det har været et meget udfordrende, dog lærerigt projekt, hvor vores undervisning til projektet først rigtigt fandt sted efter kick-off af projektet. Derfor var det også ret overvældende at skulle sætte sig ned og gå i gang med noget, der er helt nyt, og ligesom prøve sig frem – hvilket sommetider føltes lidt som at færdes i blinde. Det har har til gengæld bidraget til, at jeg virkelig har skullet gøre mit eget research på det, og prøve mig frem. Der er sket mange fejl, blev vist i localhost, der i starten virkede ret uoverskuelige, men som nu ikke bliver taget så tungt – tværtimod. Jeg er blevet stolt over hvor langt jeg er nået i min læring, og hvordan jeg griber situationer som disse an. Og så synes jeg bare det er nice, at kunne lave sådan et produkt, der virker 😀