Først et link til det færdige projekt: https://front-end-projekt.web.app/

Projektet krav:

• En datadrevent front-end løsning som bruger API-kald og er bygget i et system vi har brugt i forbindelse med valgfaget (ikke et must).

Jeg har bygget min løsning rundt om følgende firebase services:

• Firestore
• Real-time Database
• Firestore Database
• Authentication
• Hosting

Det betyder at alt i min løsning forbinder sig til googles firebase API.

Ud over kravene beskrevet ovenfor, skulle man også finde et retning projektet skulle gå. Oprindeligt ville jeg udvikle en portfolio, hvor en af de ting som var krav til den retning var at oprette artikler. Undervejs blev jeg fanget af at lave den her fake-news avis om UCL, multimediedesignuddannelsen.

Artikel sidens system

Til at uploade og gemme billeder i artikler og andetsteds på siden, har jeg brugt firestorage. Grunden til at det er smart at bruge, er at der bliver genereret et unikt link til hver fil i storage. Det er smart når man gerne vil give sine brugere adgang til at uploade filer via sin hjemmeside. På min side skulle jeg bruge en WYSIWYG (What you see is what you get) editor, som også kunne håndtere billeder. Derfor har jeg brugt Tiptap node module, som er en editor der kan bruges til at genere HTML. Det betyder det er muligt for mig at gemme de artikler man opretter på siden, som de så ud da man oprettede dem.

Når en artikel blev gemt, skulle jeg også håndtere at brugeren højst sandsynligt uploadede billeder i editoren. Derfor har kører der et script som håndtere de billeder der bliver lagt i editoren, ved at den uploader billederne til firestorage, og skifter imgtaggets link ud med firestorage unikke fillink, når brugeren trykker gem artikel.

Artiklens indhold, det vil sige HTML koden der bliver generet af editoren, bliver gemt i et table som hedder articles i firebase database. Det er sådan set meget lig deres realtime database, der er bare ikke indbygget live kald i APIen. Det betyder at scriptet skal opdatere og kalde på indhold hvis man ønsker at hente noget nyt indhold.

Under hver artikel er det muligt at efterlade en kommentar, og det er så her realtime database kommer ind i billedet. Hvis der oprettes en ny kommentar, bliver den automatisk pushet til den aktive side.

Refleksion

Til at starte med frygtede jeg at tiden ville løbe fra mig, men faktisk endte jeg med at ramme godt inden for målet. Projektet virkede til at vokse og vokse, fordi hver gang jeg tænkte “så, der var den”, kom jeg i tanke om en funktionalitet der burde være på siden. Alligevel syntes jeg mit tidsforbrug var inden for skiven. Det sværeste var at sikrer integration med firebase virkede korrekt. Det kræver mere eksperimentering end jeg regnede med, men igen, jeg nåede jo i mål. Det skal jeg huske næste gang jeg piller ved en API. Det sjoveste var at se integrationen med articles databasen og sidens load. Når man besøger siden henter den jo alle artikler som er blevet gemt derinde, og det føles lidt magisk at jeg selv har bygget det. Det er fedt. I fremtiden vil jeg gerne fordybe mig endnu mere i vue 3. Det er et system som er utroligt robust, og har en meget lille belastning på end-userens enhed. Stor fan.