På 3. semester havde vi på valgfaget Frontend Development et projekt, hvor vi skule producere en del af en datadrevent frontend-løsning. Kick-off var d. 21/10 og præsentation d. 31/10.
Krav:
- Produktet skulle være en datadreven front-end løsning.
- Der skulle anvendes API-kald.
- Der skulle 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å).
Dette projekt var sideløbende med vores eksamensprojekt, så Justine og jeg så det som en oplagt mulighed at lave noget, der også kunne bruges i eksamensprojektet.
Frontend-projektet er et individuelt projekt, så vi talte om hvilke muligheder vi havde for en løsning, som kunne bruges senere i eksamensprojektet. Justine lavede en tilmeldingsformular og jeg lavede et eventfeed med filtreringsmuligheder. Vithulan skulle lave en reminder.
Introduktion
Et datadrevet eventfeed, hvor brugerne kan interagere med dette feed ved at tilføje, opdatere, prioritere eller slette events på en favoritliste.
Det tekniske setup:
Projektmappe/Vue med Vite i VSC og GitHub
Projektet er opbygget i Vue.js, så arbejdede arbejdede med komponenter og views, som gør, at man ikke arbejder med én template og én CSS, men at man kan style de forskellige komponenter og views individuelt med <style scoped>
Json-server (localhost) og testede API i Postman – lokal udvikling.
Vue.js – oprettelse af komponenter (der kan anvendes igen og igen) og vite.js (som er ”værktøjet” der skal sørge for at f.eks. opdatering af siden og reagerer med det samme hvis der er fejl).
Vue-app (App.vue og komponenter) henter data fra JSON-serveren via fetch (altså det der står inde i scriptet på den enkelte fil) og viser det i browseren. Det er Read i CRUD.
Backend – Express Server (server.js), som fungerer som mellemled mellem frontend og Firebase. Denne server håndterer API-kald for CRUD-operationer.
- GET: Henter alle favoritter fra Firebase.
- POST: Tilføjer et nyt favorit-event til listen.
- PUT: Opdaterer et eksisterende event (f.eks. ændrer prioritet).
- DELETE: Sletter et event fra favoritlisten.
Backend’en kan kaldes via fetch() i frontend, og er testet med Postman til at sikre, at API-kald fungerer korrekt.
Vue Router, som gør det muligt at have flere sider i én enkeltapplikation. Jeg har to hovedruter:
- Forsiden, som viser en kalender med events (EventKalender).
- Mine favoritter, som viser de events, brugeren har gemt som favoritter (Favorit).
Hver af disse sider er komponenter, der vises dynamisk afhængigt af, hvilken URL brugeren er på.
LocalStorage
- Bruges til at gemme brugerens valg eller favoritter også selvom browseren lukkes: Create: Når brugeren klikker på ❤️-ikonet for at tilføje et event som favorit, bliver eventets ID gemt i localStorage.
- localStorage.setItem(“favorites”, JSON.stringify(favorites));
CSS-styling
Start af udviklingsserver
Under udviklingen blev projektet startet med: “npm run dev“, hvilket åbnede en lokal udviklingsserver med live-opdatering, så ændringer i koden kunne ses med det samme uden manuel genindlæsning.
Firebase Realtime Database – For at gøre dataene tilgængelige online har jeg skiftet til Firebase bruges til cloud-database → så data kan ses online
- I komponenten Favorit.vue gemmes ændringer i favoritlisten via: await set(dbRef(db, ‘favorites/simpleAuto’), favorites.value)
Build af produktionsklar version
Da jeg var færdig med at kode projektet genererede jeg en build med: npm run build og herefter var den klar til at blive deployed til Firebase Hosting: firebase deploy
Mit projekt bruger Vue.js til frontend, hvor brugeren kan interagere med et eventfeed, tilføje favoritter og prioritere dem. Data gemmes både i localStorage og i Firebase, hvilket gør det muligt at opdatere og vise favoritlisten i realtid.
Kør live-demo: https://frontend-eventfeedodeon.web.app/
CRUD operationerne er implementeret:
GitHub
Jeg brugte GitHub som versionsstyring, så jeg var sikker på, at have en back-up af koden og således at vi ville kunne dele koden senere i.f.m. eksamensprojektet.
Refleksion:
Det var et meget intenst forløb, da vi først fik undervisning i firebase m.m. efter præsentation af projektet, hvilket gjorde at projektet var udfordrende på mange måder, men dog lærerigt. Der var tale om et “nyt” kodesprog, som vi skulle lære på kort tid, hvilket nogle dage kunne virke vældig frustrerende. Til gengæld har jeg så lavet min egen research og prøvet mig frem og ChatGpt blev en stor hjælp for at forstå de forskellige kodestykker og jeg nåede frem til et produkt som jeg er stolt af. Det eneste der drillede rigtig meget var det med at få billederne vist efter deploy, hvilket jeg fik feedback på ved præsentationen. Jeg ville gerne have forklaret mere om koden i.f.m. præsentationen, men nervøsiteten tog desværre over, og jeg fik ikke sagt de ting jeg ville, men øvelse gør mester.
I.f.m. præsentationen fik jeg feedback omkring billedernes placering i mappestrukturen og for at billedrne ville blive vist online skal de ligge i mappen public.