Kick off
Fredag den 10. april havde vi kick off til valgfagsprojektet og dermed også den sidste undervisning i front-end. Opgaven blev præsenteret af Kenneth (aka Kato), og den gik ud på, at vi skulle udvikle en del af en datadrevet front-end løsning.
Kravene til produktet var, at der skulle anvendes API-kald, relevante teknologier samt gerne noget, der kunne relateres til vores eksamensprojekt. Der var samtidig mulighed for at inddrage idéer fra underviserne, hvis det gav mening i forhold til projektets retning.
Vi var næsten færdige med at udvikle vores prototype til vores hjemmeside, og her skulle vi integrere API-kald til blandt andet Instagram og et kort. Derfor fordelte vi opgaverne, så Caroline arbejdede med Instagram-delen, mens jeg tog mig af kort-løsningen.
Jeg brugte resten af undervisningen på at undersøge, hvordan man kunne implementere et interaktivt kort via API-kald. Efter en del research og sparring med Kenneth fandt jeg frem til Leaflet. Leaflet er et open source JavaScript-bibliotek til mobilevenlige interaktive kort, som gjorde det relativt overskueligt at komme i gang, da dokumentationen viste en trin-for-trin opsætning.
Projektbeskrivelse
Jeg startede med at oprette projektet via terminalen i Vue.js ved at bruge kommandoen: npm create vue@latest valgfag-mikrobageri Dette gav mig den nyeste version af Vue. Herefter installerede jeg de nødvendige dependencies med npm install samt de ekstra pakker, jeg skulle bruge, nemlig Leaflet og Firebase.
Inden jeg begyndte at kode, opsatte jeg først Firebase-projektet. Dette gjorde jeg via console.firebase.google.com, hvor jeg oprettede et nyt projekt. Herfra fik jeg adgang til vigtige oplysninger som API key, database URL, project ID og lignende, som senere blev brugt i opsætningen.
Herefter kunne jeg begynde selve kodningen. Jeg oprettede en Vue-komponent i components-mappen og navngav den MapView.vue. I denne fil importerede jeg de nødvendige biblioteker og funktioner.
Vue-funktionerne ref og onMounted blev brugt til henholdsvis reaktive data og til at sikre, at koden først blev kørt, når komponenten var indlæst i browseren. Derudover importerede jeg Leaflet-biblioteket samt dets CSS-fil, så kortet kunne vises korrekt. Efterfølgende etablerede jeg forbindelsen til Firebase-databasen. Her brugte jeg Firebase-funktionerne ref og get til at hente data fra databasen under stien “locations”. Da Leaflet i nogle Vue/Vite-projekter kan have problemer med at finde standardikoner til markører, importerede jeg derfor marker-billeder manuelt. Disse blev derefter tilføjet til Leaflets standardindstillinger, så markørerne blev vist korrekt på kortet.
Når komponenten blev mounted i browseren, blev selve kortet initialiseret med L.map(). Kortet blev centreret omkring Odense med et zoomniveau på 16. Herefter tilføjede jeg et tile layer fra OpenStreetMap, som leverer det visuelle kortlag.
Herefter hentede jeg data fra Firebase databasen under stien “locations” ved hjælp af JSON-format via Firebase realtime database, hvor data returneres som et JSON-objekt ved brug af get(). Hvis der fandtes data, blev hver lokation gennemgået i et loop. For hver lokation blev der sendt en forespørgsel til Nominatim API fra OpenStreetMap, som bruges til geocoding, altså omdannelse af en adresse til geografiske koordinater (latitude og longitude).
Når koordinaterne var modtaget, blev der oprettet en markør på kortet ved hjælp af L.marker(). Markøren blev placeret på de fundne koordinater og tilføjet til kortet. Samtidig blev der tilknyttet en popup, som viser navnet på lokationen, når brugeren klikker på markøren.
Til sidst brugte jeg CSS til at style kortet, så det fik den korrekte størrelse og fungerede responsivt på både mobil og desktop. Derudover testede jeg også løsningen på forskellige skærmstørrelse for at sikre en god brugeroplevelse.
Da kortet skulle indgå i vores eksamensprojekt, valgte jeg også at videreudvikle resten af layoutet til kontaktsiden, så design og funktionalitet hang bedre sammen som en helhed. Dette gjorde projektet mere sammenhængende og brugervenligt.
Se hele siden her: https://valgfag-kort-mikrobageri.web.app/
Refleksion
Hvis jeg skulle gøre noget anderledes, ville jeg have brugt mere tid på at fordybe mig i både teknologien og præsentationen af mit arbejde. Jeg følte ikke, at min fremlæggelse gik særlig godt, hvilket blandt andet skyldtes, at jeg ikke havde prioriteret forberedelsen nok.
Samtidig har processen dog været både lærerig og spændende, fordi jeg arbejdede selvstændigt med en løsning, som jeg ikke tidligere havde haft dyb erfaring med. Det har givet mig en bedre forståelse for, hvordan API-kald, databaser og kortintegration fungerer i praksis, og hvordan flere teknologier kan kombineres i et samlet projekt.
Jeg har især lært vigtigheden af at strukturere sit arbejde bedre fra start, så man ikke kun fokuserer på udviklingen, men også på at kunne formidle og forklare sine valg bagefter. Hvis jeg skulle gentage forløbet, ville jeg derfor prioritere mere tid til dokumentation og præsentation undervejs, så det ikke bliver noget, der først skal samles til sidst.