Oppgave 4 — Hent dagens vær fra Yr

Bakgrunn

Noen API-er krever spesielle headers (som User-Agent) eller tillater ikke direkte nettleser-kall på grunn av CORS. I slike tilfeller bruker vi SvelteKit sin server-side load-funksjon.

Filen +page.server.js kjøres kun på serveren — aldri i nettleseren. Den eksporterer en load-funksjon som henter data og sender dem til siden som data-prop.

Server-filen

Opprett src/routes/vaer/+page.server.js (API-dokumentasjon: developer.yr.no):

// Yr / Meteorologisk institutt
// Dok: https://developer.yr.no/doc/GettingStarted/
const SYMBOL_MAP = {
  clearsky_day: { tekst: 'Klarvær', emoji: '☀️' },
  fair_day: { tekst: 'Lettskyet', emoji: '🌤️' },
  partlycloudy_day: { tekst: 'Delvis skyet', emoji: '⛅' },
  cloudy: { tekst: 'Overskyet', emoji: '☁️' },
  fog: { tekst: 'Tåke', emoji: '🌫️' },
  lightrain: { tekst: 'Lett regn', emoji: '🌦️' },
  rain: { tekst: 'Regn', emoji: '🌧️' },
  heavyrain: { tekst: 'Kraftig regn', emoji: '⛈️' },
  // ...legg til flere koder ved behov, se Yr-dokumentasjonen
};

export async function load({ fetch }) {
  // Oslo: lat=59.9139, lon=10.7522
  const url =
    'https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=59.9139&lon=10.7522';

  const res = await fetch(url, {
    headers: { 'User-Agent': 'MittProsjekt/1.0 din@epost.no' }
  });

  if (!res.ok) {
    return { feil: `Yr svarte med ${res.status}` };
  }

  const json = await res.json();
  const nu = json.properties.timeseries[0];
  const detaljer = nu.data.instant.details;
  const symbolKode = nu.data.next_1_hours?.summary?.symbol_code ?? 'ukjent';
  const symbol = SYMBOL_MAP[symbolKode] ?? { tekst: symbolKode, emoji: '🌡️' };

  return {
    temperatur: detaljer.air_temperature,
    vind: detaljer.wind_speed,
    fuktighet: detaljer.relative_humidity,
    symbol
  };
}

Side-filen

Opprett src/routes/vaer/+page.svelte:

<script>
  let { data } = $props();
</script>

<h1>Vær i Oslo</h1>

{#if data.feil}
  <p class="feil">Klarte ikke hente værdata: {data.feil}</p>
{:else}
  <div class="vær-kort">
    <div class="vær-symbol">{data.symbol.emoji}</div>
    <div>
      <p class="vær-tilstand">{data.symbol.tekst}</p>
      <p>{data.temperatur} °C · {data.vind} m/s · {data.fuktighet}% fukt.</p>
    </div>
  </div>
{/if}

<style>
  .feil { color: #dc2626; font-style: italic; }

  .vær-kort {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
  }

  .vær-symbol { font-size: 3rem; line-height: 1; }

  .vær-tilstand {
    font-size: 1.05rem;
    font-weight: 500;
    color: #111827;
    margin: 0 0 0.5rem;
  }

  .vær-kort p { color: #374151; margin: 0; }
</style>

Live eksempel — Oslo akkurat nå

Koden ovenfor produserer dette:

Oppgaven

1. Opprett src/routes/vaer/+page.server.js som vist over.
2. Opprett src/routes/vaer/+page.svelte som viser dataen.
3. Bytt ut Oslo-koordinatene med din egen by — finn koordinater på latlong.net.
4. Bonus: Vis vær for de neste 6 timene ved å loope gjennom timeseries-arrayen med {#each}.

Om Yr-API-et

• Gratis API fra Meteorologisk institutt — ingen API-nøkkel trengs.
• User-Agent-headeren er påkrevd og skal identifisere appen og kontaktinfo.
• Full dokumentasjon: developer.yr.no