Opprette nytt Svelteprosjekt

For å opprette et nytt prosjekt i Svelte kan du følge instruksjonen i videoen under.

I videoen gjør jeg følgende steg:

1. Oppretter enn ny mappe til prosjektet
2. Åpner mappen i Visual Studio Code med menyvalget File → Open Folder
3. Åpner en terminal i Visual Studio Code med menyvalget Terminal → New Terminal
4. Skriver inn kommandoen npm create svelte@latest .
   1. npm er navnet på programmet vi kjører (npm er node package manager)
   2. create betyr at vi skal opprette et nytt prosjekt
   3. svelte@latest betyr at prosjekttypen er Svelte, og at vi skal brukes siste versjon av Svelte
   4. . betyr at vi skal opprette prosjektet i vår nåværende mappe
5. Gjør følgende valg ved hjelp av piltastene, mellomromstasten og enter
   1. Enter for å bekrefte at vi oppretter prosjektet i nåværende mappe
   2. Velger Skeleton project for å få et blankt prosjekt uten innhold
   3. Velger ingen Type checking siden vi ikke bruker dette i IT1
   4. Velger ESLint for å hjelpe oss å finne feil og problemer i koden, samt Prettier som formaterer koden vår på en fin måte
6. Skriver inn npm install for å installere alle pakkene som npm har funnet ut at vi trenger til prosjektet
7. Skriver npm run dev -- --open for å starte en Svelte Server som kompilerer Sveltekoden vår, lager den ferdige HTML-, CSS- og Javascript-koden og viser oss nettsiden. Denne serveren må kjøre på datamaskinen din for at du skal kunne se nettsiden.
   1. run dev kjører et npm script kalt dev som du finner i fila package.json. Hvis du leter her så vil du se at dev egentlig kjører kommandoen vite dev.
   2. -- disse to bindestrekene gjør at Svelte serveren blir tilgjengelig på nettverket på adressen localhost:5173.
   3. --open gjør at nettsidene åpnes i nettleseren automatisk

Svelte

{% raw %}
I Svelte så håndteres promises på følgende måte:

<script>
  const URL = "https://api.chucknorris.io/jokes/random";
  const getActivities = async (URL) => {
    const response = await fetch(URL);
    const results = await response.json();
    return results.value;
    //JSON-objektet inneholder en vits i nøkkelen "value"
  };

  const promise = getActivities(URL);
</script>

{#await promise}
  <p>Laster…</p>
{:then quote}
  <p>
    {quote}
  </p>
{:catch error}
  {error.message}
{/await}

I Svelte bruker vi altså følgende algoritme

1. Vi definerer en async funksjon
2. Vi bruker await fetch til å hente URLen. Vi kan legge til en header som parameter i funksjonskallet til fetch.
3. Vi bruker await promise.json() for å gjøre om innholdet til JSON så fort det er tilgjengelig
4. Vi returnerer verdien vi er interesserte i.
5. Vi tilordner funksjonskallet til promise. Hvis det er aktuelt å gjøre flere API-kall så bør denne variabelen være dynamisk.
6. I Svelte bruker vi en {#await}-blokk som avventer promisen.

Lese inn lokal JSON-fil med Svelte

I Sveltekit så får du problemer dersom du forsøker å bruke fetch – bruk heller følgende framgangsmåte for å lese inn en lokal JSON-fil.

1. Legg JSON-fila i src/lib eller en undermappe som src/lib/data.
2. I Svelte-koden så skriver du import variabelNavn from '$lib/JSONfilnavn.json'.
3. variabelNavn inneholder nå alle dataene fra JSON-fila.

Eksempel på å lese inn lokal JSON-fil

Vi har en JSON-fil kalt objekter.json som inneholder et array med objektene. Objektene er navnet på lærere og bilen de kjører.

[
	{
		"navn": "Ståle",
		"bil": "Audi A3"
	},
	{
		"navn": "Lars",
		"bil": "Volvo XC 70"
	}
]

I Svelte-fila +page.svelte så importerer vi arrayet med objekter til variabelen laerere. Deretter kan vi vise alle lærerne og bilene deres med en {#each}-blokk.

<script>
	import laerere from '$lib/objekter.json'
</script>

{#each laerere as laerer}
	<p>{laerer.navn} kjører {laerer.bil}.</p>
{/each}