Opgavebeskrivelse
Der skal individuelt laves en datadreven front-end løsning, men man må gerne hjælpe hinanden og lave hver sin del af samme projekt. Der skal bruges API-kald og andre relevante teknologier, f.eks. Vue. Produktet kan eventuelt omhandle eksamensprojektet eller et andet valgfrit område. Projektet skal præsenteres individuelt, hvor der laves en live-demo af produktet.
Proces
Jeg gik sammen med Vincent fra min gruppe om at prøve at lave noget, der hang sammen, så vi kunne hjælpe hinanden. Vi var ikke langt nok med vores eksamensprojekt til, at vi vidste, hvad vi skulle kode, så vi var nødt til at finde på noget andet. Her tog vi inspiration fra undervisningen, hvor vi har lavet en indkøbsliste, så vi tænkte, at vi ville prøve at lave noget med, at man kunne søge på opskrifter, og så lave en indkøbsliste med ingredienserne.
Vi undersøgte først, om der var nogen sider med opskrifter, hvor man gratis kunne lave API-kald. Her fandt vi en side, der hed Spoonacular, hvor man havde omkring 50 API-kald om dagen. På den her side var der også forskellige former for API-kald, bl.a. at man kunne søge på opskrifter, og at man kunne søge på ingredienser, og der var forskellige parametre, som man kunne få med, når man lavede sit kald, f.eks. Ingredienser i en opskrift, som der ikke var nævnt i søgningen, og ingredienser, der normalt allerede er i hjemmet. Vi blev enige om, at Vincent prøvede at lave en del, hvor man kunne søge efter navnet på en opskrift, og jeg ville lave en del, hvor man kunne søge på ingredienser og få opskrifter, der indeholder de ingredienser.
I starten sad vi sammen og prøvede at oprette projektet, hvor vi hjalp hinanden i gang. Vi benyttede os meget af den undervisning, som vi lige havde haft omkring Vue, hvor vi allerede havde lavet meget af det, som skulle bruges til opgaven. Da vi havde lavet det mere grundlæggende, begyndte vi at sidde mere hver for sig og kode, fordi nu blev hver af vores bid af opgaven mere delt op, men vi sparrede stadig med hinanden efter behov.
Jeg lavede flere funktioner i min kode. Først og fremmest lavede jeg et API-kald, når man trykkede på en søg-knap. Den hentede så noget data i JSON, som skulle laves til JavaScript med “stringify”. Det data lå i et array og blev udskrevet som en liste, som blev gemt i localstorage. I mit API-kald havde jeg også sagt “ignorePantry=false”, hvilket vil sige, at den også skulle hente de ingredienser i en opskrift, som man normalt har i hjemmet, f.eks. salt, ellers ville de blive ignoreret. Når listen blev udskrevet og viste opskrifter, som indeholder de ingredienser, som jeg havde søgt på, ville jeg gerne have, at den skrev alle ingredienser i opskriften. Derfor skulle den altså både vise ingredienserne i søgefeltet, hvis de blev brugt i opskriften, ingredienser, som ikke blev nævnt, samt “pantryitems”, så det blev en rigtig ingrediensliste til en opskrift.
Jeg gjorde også, så man kunne søge på flere ingredienser, hvis bare de var separeret af et komma. Det gjorde altså ikke noget, at der var flere mellemrum imellem, da jeg brugte “trim” til at fjerne dem. Derudover lavede jeg en funktion, som ryddede de viste opskrifter og slettede dem alle fra localstorage. Jeg lavede også en funktion med en gem-knap, så man kunne gemme en specifik opskrift i en ny liste over gemte opskrifter. Hertil havde jeg også en fjern-knap, som kun slettede den specifikke opskrift. Det var dog besværligt at lave, da jeg ikke bare kunne gøre som i den første ryd-knap, hvor jeg satte arrayets værdi til at være et tomt array. Her måtte jeg i stedet gøre brug af id og metoden “splice” for at ramme en bestemt opskrift og kun fjerne den.
Resultat
Link til projektet:
https://frontend-projekt-3fa24.web.app
Min del af projektet er den nederste del, hvor der står “Søg på én eller flere ingredienser separeret af et komma”.
Refleksion
Det har været et lidt kompliceret projekt, fordi vi har skullet benytte os af avancerede metoder og værktøjer, som har været svære at forstå, og så har der været lidt tidspres, da den undervisning, som vi skulle have for at kunne lave projektet, først kom i løbet af de to uger, som vi havde til projektet, fordi der havde været en fejl med skemaet. Så vi kunne først begynde rigtigt på projektet efter den første uge, og så havde vi kun en uge tilbage. Og jeg havde allerede meget at se til med at finde praktik, lave Discord-Bot, og der var et eksamensprojekt hængende over hovedet.
Men da jeg så endelig kom i gang med projektet, fandt jeg ud af, at det måske ikke var ligeså svært, som jeg havde gjort det til i mit hoved, og jeg fik relativt hurtigt lavet et projekt, som faktisk overholdte minimumskravene, hvilket overraskede mig. Jeg lavede dog videre på det, så der var alle de nødvendige funktioner.
Jeg har fået indsigt i, hvordan databaser fungerer, og hvordan man bruger og bygger projekter i Vue. Desuden har jeg lært, at der er andre mere effektive måder at bygge hjemmesider på end med ren HTML, CSS og JavaScript, som er det, jeg hidtil har gjort brug af. Men det har også været et svært forløb, også med undervisningen, hvor jeg har været i tvivl, om det er det, som jeg gerne vil fremadrettet.