22/10/24 – 08/11/24
Klik her for at se den endelige løsning.
Her skulle vi alle arbejde individuelt og til sidst præsenterer det vi havde lavet foran hinanden. Opgaven gik ud på at vi skulle skabe en datadreven frontend-løsning, som bruger API-kald. Og her fik vi også muligheden for at lave en løsning som var relevant for vores eksamensprojekt. Kravene til præsentationen var, at den skulle varer omkring 5 min. og en live-demo af vores løsning skulle være tilgængelig, så resten af holdet kunne prøve den af.
Freya Joy og jeg valgte at vi ville hjælpe hinanden med at lave hver vores opgaver og dermed kunne vi også lave noget som evt. kunne bruges til vores eksamensprojekt. Freya besluttede sig for at kode en applikation i vue, hvor der er et menupunkt i headeren, hvis underpunkter bliver opdateret, ud fra events der bliver lagt ind på Facebook. Jeg valgte også at kode min applikation i vue, da Freya og jeg alligevel har tænkt os bruge vue til at kode vores eksamensprojekt. Jeg gik så i gang med at kode en formular til Cafébiografens nyhedsbrev, hvori du kan skrive navn og mail, hvorefter det bliver gemt i en firestore database. Det var min plan at jeg også ville gøre så man faktisk ville få tilsendt en mail, efter man havde skrevet sit navn og mail ind, men jeg nåede desværre ikke at få det til at virke og det viste jeg også at være noget mere besværligt end jeg havde regnet med.
Til at starte med lavede jeg et komponent-træ for at danne mig et overblik og i starten havde jeg tænkt mig at lave tre komponenter, men efter mere overvejelse gik det op for mig at tre komponenter var for meget og ret unødvendigt.
Så jeg oprettede mit vue-projekt og derefter lavede jeg blot ét dokument, kaldet NewsletterForm.vue. Det er så det her komponent som indeholder mine input-felter, hvor man kan skrive navn og mail, samt en tilmeld-knap. Derefter undersøgte jeg, hvordan jeg kunne lave en funktion inde i mit komponent, som gør at den tekst-værdi der bliver skrevet ind i input-felterne, bliver gemt i en firestore database, efter man trykker på knappen.
Først oprettede jeg et projekt inde i Firebase, hvorefter jeg opsatte min firestore database, med en kollektion ved navn “EmailAddresses”, hvor dokumenterne har to fields: “firstName” og “emailAddress”, som begge er string-typer.
Derefter oprettede jeg også en app i mit Firebase projekt, så jeg kunne hente min firebase konfiguration og bruge den i min kode.
Derefter lavede jeg en asynkron funktion inde i min NewsletterForm.vue, som tilføjer et dokument inde i min kollektion “EmailAdresses”, som så indeholder den strint-værdi man har skrevet ind i mine inputfelter.
Jeg brugte v-on:click, på min tilmeld-knap, så min submit-funktion bliver triggeret når man trykker på knappen.
Denne del af koden fungerede rigtig fint, når jeg skrev noget tekst ind i mine input-felter, kom de også frem inde i min database.
Derefter ville jeg gerne forsøge at sende mails til de her mail-addresser som blev skrevet ind i inputfelterne, men desværre lykkedes det mig ikke at skrive noget kode som rent faktisk virkede. Men jeg forklarer stadig hvad jeg gjorde i mit forsøg på at få det til at virke.
Desværre kan man ikke sende mails gennem firebase, så her var jeg nødt til at bruge en tredje teknologi, hvor jeg så valgte at bruge Mailchimp. Jeg havde ikke prøvet at bruge Mailchimp før, så det tog mig også lidt tid at lære det at kende. Først skulle jeg have nogle informationer fra Mailchimp som ville give mig tilladelse til at sende API-kald, det jeg skulle bruge var en API-key, data center, ID’et til min liste inde på Mailchimp, samt URL’en til min Mailchimp-liste.
Jeg fandt hurtigt ud af at det ikke var muligt for mig at lave API-kald til Mailchimp direkte gennem browseren, af sikkerhedsmæssige årsager, så noget jeg i stedet kunne gøre, var at oprette en server gennem Node.js, som går ind og lytter til ændringer i min firestore database.
Så det forsøgte jeg at gøre. Jeg startede med at installere min server ved at køre følgende kommando i min terminal: npm install firebase-admin node-fetch. Efter det oprettede jeg en JavaScript-fil ved navn mailchimp.js, som så skulle håndterer alt det kode der stod for at lytte til min database og så kalde API’et til Mailchimp og oprette en ny mail, samt navn og status på min liste i Mailchimp. Denne fil lagde jeg så ind i min src-mappe, inde i rodmappen til mit projekt. For at få dette til at virke skulle jeg også hente en såkaldt servicekonto-fil fra Firebase. Dette var en fil, som ville give min Node.js server adgang til at lytte til min database. Den fik jeg hentet og lagt ind i min projekt-mappe, så jeg kunne importere den i min mailchimp.js fil.
Derudover erklæret jeg også nogle variabler med de nødvendige informationer fra Mailchimp, hvorefter jeg forsøgte at lave en funktion, der til at starte med, går ind og lytter til ændringer i min kollektion i min firestore database, specifikt lytter den til om der bliver tilføjet dokumenter. Her bruger jeg metoderne .onSnapShot() til at lytte til ændringer og .forEach() til at køre gennem dokumenterne i kollektionen.
Derefter har jeg mit variabel “response”, som bruger fetch-metoden til at kalde API’et fra Mailchimp og derefter sende en post-anmodning til den. En post-anmodning gør bruges til at oprette en ny mail på min Mailchimp-liste. Derudover definerer jeg også (ud fra “body:”), hvilke oplysninger der skal postes på Mailchimp-listen, i det her tilfælde er det så selve email-adressen, status som “subscribed” og fornavnet. Den sidste stykke kode i bunden af min fil, tjekker om min kode er kørt korrekt og forsøger at fange eventuelle fejl.
Det her var min kode til at starte med og den virkede faktisk, når jeg skrev noget tekst ind i input-felterne, kom det ind i min firebase og derefter endte det på min Mailchimp-liste.
Efter jeg havde det her til at virke, prøvede at jeg lave nogle ændringer i min kode, for at se om jeg kunne sende mails til de email-adresser jeg havde fået ind på min Mailchimp-liste. De eneste ændringer jeg lavede var at jeg ændrede anmodningen til at være en put-anmodning frem for en post-anmodning, da put bruges til at opdaterer eksisterende data.
Og derudover ændrede jeg det til at mails nu skulle blive tildelt tagget “send_email” med en status på “active”. Det gjorde jeg, fordi at jeg inde på Mailchimp havde rodet lidt rundt med at lave et såkaldt automation-flow, som blev triggeret ved at data på min liste var tagget med “send_email”, hvorefter de mails der så havde det tag, ville få tilsendt en mail, som jeg så også designede inde i Mailchimp.
Desværre så virkede det ikke og det billede jeg har vist tidligere af min liste på Mailchimp, kan man se at nogle af de mails der står, har fået tagget “send-email”, men det var kun fordi at jeg manuelt gav dem tagget, inde på Mailchimp.
Jeg prøvede derefter at lave forskellige rettelser i min kode, men det intet virkede og jeg nåede desværre ikke at finde en løsning inden jeg skulle fremlægge. Så i stedet endte jeg med at fremlægge om det jeg havde lavet og den originale kode jeg havde på min mailchimp.js, selvom at den ikke virkede længere.
Inden fremlæggelsen brugte Freya og jeg firebase-hosting til begge vores opgaver, for at vi kunne lave en live-demo.
Klik her for at se den endelige løsning.
Refleksion
Jeg var faktisk rigtig glad for det her projekt, selvom jeg var lidt nervøs i starten. Men jeg synes overordnet at jeg har lært rigtig meget af det her projekt og jeg er blevet mere glad for Firebase og føler også at jeg er blevet stærkerer til at bruge det. Jeg har ikke altid været ved godt mod i løbet af projektet i sær fordi, at jeg vidste fra starten af, at det jeg ville forsøge og lave med min opgave, godt kunne gå hen og blive udfordrende, hvilket det også var. Men efter at jeg havde fremlagt, sagde Kenneth, at jeg eventuelt kunne kigge på, hvorfor dataen gemmes to gange i min Firestore database, med to forskellige id’er. Det var faktisk noget jeg allerede havde opdaget inden fremlæggelsen, men havde ikke tænkt så meget over det. Så hvis jeg skulle arbejde videre med den her opgave, ville jeg helt klart kigge på, hvad det er i min kode som gør, at data bliver gemt to gange og hvordan det kan løses. Udover det kunne man også kigge på, hvordan man kan skrive funktionen, så den både sender en put- og en post-anmodning, så der både kan tilføjes nye mails inde på Mailchimp, men også opdaterer eksisterende data, så den samme email-adresse, kan få tilsendt mails flere gange.
Alt i alt synes jeg at projektet har været vellykket, selvom jeg ikke nåede at blive færdig og lave et produkt der virkede som det skulle, så føler jeg at jeg har lært en masse af processen og er kommet over på den anden side, meget stærkere og mere klar til eksamen. Det var stressende at skulle i gennem det her projekt, mens vi også er i gang med vores eksamensprojekt, men derfor var jeg ret glad for, at vi fik lov til at lave opgaver som var relevante for vores eksamen.