Problem

Jeg har valgt at lave en vejrapp, fordi det er en praktisk applikation, som kombinerer flere teknologier og koncepter, der er essentielle for moderne webudvikling. Ved at integrere API-opkald til en tjeneste som OpenWeatherMap kan jeg hente realtidsdata og præsentere det i et brugervenligt interface. Det giver mig mulighed for at arbejde med dynamiske data og samtidig skabe en app, der har en reel værdi for brugeren.

Løsning

Løsningen på vejrappen er baseret på en kombination af front-end teknologier som HTML, CSS og JavaScript samt integration af OpenWeatherMap API for at hente realtidsdata. Brugeren indtaster en by i søgefeltet, og applikationen sender derefter en forespørgsel til API'et for at få detaljeret vejrdata som temperatur, luftfugtighed, vindhastighed, og vejrbeskrivelser.

Min rolle

UI Designer & Front-end kodning.

Design

Designet af vejrappen er skabt med fokus på brugervenlighed, enkelhed og æstetik. Målet har været at levere en ren og intuitiv brugeroplevelse, hvor brugeren nemt kan tilgå de ønskede informationer uden unødige distraktioner. Farvepaletten er inspireret af naturlige elementer, med blå og hvide nuancer, der afspejler himlen og vejrforhold, hvilket skaber en behagelig og rolig atmosfære i applikationen.

Realisering af Produktet

Udviklingen startede med opbygningen af grundstrukturen i HTML, hvor jeg sikrede, at alle nødvendige elementer, såsom inputfelt, søgeknap og områder til visning af vejrdata, var korrekt opstillet. Herefter blev der tilføjet styling ved hjælp af CSS for at skabe et æstetisk og responsivt design, som tilpasser sig forskellige skærmstørrelser.

API Integration i Vejrappen

For at skabe en funktionel og dynamisk vejrapp, har jeg valgt at integrere OpenWeatherMap API. Dette API giver adgang til en omfattende samling af globale vejrdata, der opdateres i realtid. Formålet med at bruge dette API var at hente live data såsom temperatur, luftfugtighed, vindhastighed, og detaljer om vejrbetingelser som solopgangs- og solnedgangstider.

Opdatere UI med vejrdata

I udviklingen af min vejrapp har jeg implementeret en funktion, der effektivt opdaterer brugergrænsefladen med de seneste vejrdata, hentet fra OpenWeatherMap API. Dette gøres ved at trække relevante oplysninger, som temperatur, vejrbeskrivelse, luftfugtighed og vindhastighed, og vise dem i et intuitivt layout. Når brugeren indtaster en by og klikker på "Søg" knappen, kaldes en funktion, der henter de nødvendige data fra API'et. Efter en vellykket anmodning modtager vi et JSON-objekt, der indeholder forskellige vejrrelaterede parametre.

Konklusion

I udviklingen af min vejrapp har jeg haft fokus på at skabe en intuitiv og brugervenlig oplevelse, der giver brugerne nem adgang til pålidelige vejrdata. Ved at integrere OpenWeatherMap API har jeg formået at hente og præsentere information om temperatur, vejrforhold, luftfugtighed og vindhastighed på en overskuelig måde. Den dynamiske opdatering af brugergrænsefladen sikrer, at brugeren straks får de oplysninger, de behøver, når de indtaster en by. Jeg har også tilføjet ekstra oplysninger, såsom følt temperatur og lufttryk, hvilket beriger brugerens forståelse af vejret.