NorgeExplorer 🇳🇴

NorgeExplorer er en mobilvennlig Vue3-applikasjon (Vite + Pinia) som viser geografiske data for norske fylker, kommuner og postnummer hentet fra et delt Google Regneark.

Funksjoner

• Google Regneark Synkronisering
  Data hentes direkte fra nettleseren
  uten API-nøkkel ved bruk av Google Sheets' Visualisering-API (gviz/tq).

• Fuzzy Kolonnesøk
  Synkroniseringen gjenkjenner automatisk
  kolonnenavn uavhengig av om de er skrevet i små/store bokstaver
  eller med forkortelser (f.eks. Fylkesnr, kommunenummer eller Poststed).

• Mobil-First & PWA-kompatibel: Tilrettelagt for mobile enheter med meta-tagger for fullskjerm-kjøring, SVG-favicon, og Apple Touch Icon.

• Robust Demo-modus: Inneholder et innebygd sett med norske geografiske data og kategorikoder som lastes inn hvis ingen Spreadsheet-ID er konfigurert.

Google Regneark

Applikasjonen forventer et Google Regneark med fem spesifikke faner:

1. Fylker med kolonnene:
   • Fylkesnummer (f.eks. 11)
   • Fylkesnavn (f.eks. Rogaland)
2. Kommuner med kolonnene:
   • Kommunenummer (f.eks. 1103)
   • Kommunenavn (f.eks. Stavanger)
   • Fylkesnummer (f.eks. 11)
3. Postnummer med kolonnene:
   • Postnummer (f.eks. 4005)
   • Poststed (f.eks. STAVANGER)
   • Kommunenummer (f.eks. 1103)
   • Kategori (f.eks. G - valgfri kolonne for kategorikode)
4. PostnummerKategori med kolonnene:
   • Kategori (f.eks. G eller B)
   • Beskrivelse (f.eks. Gateadresse eller Postboksadresse)
5. Config med kolonnene:
   • Key (f.eks. LAST_UPDATE)
   • Value (f.eks. 2026-08-06T08:23:45.131Z)

Data kan hentes fra f.eks. https://data.norge.no/datasets

Trinn for oppsett:

1. Åpne regnearket i Google Sheets.

2. Klikk på Fil -> Del -> Publiser på nettet.

3. Velg Hele dokumentet og Webside, og klikk på Publiser.

4. Kopier regnearkets ID fra URL-en i nettleseren din (den lange strengen mellom /d/ og /edit).

5. Opprett en .env-fil i prosjektets rotmappe, og lim inn ID-en:

   VITE_SPREADSHEET_ID=din_regneark_id_her

6. Lag et AppScript i Google Regnearket med følgende kode:

   • Gå til Utvidelser -> AppScript.
   • Lim inn koden nedenfor i editoren, erstatt eksisterende innhold.
   • Klikk på Lagre-ikonet (diskett) øverst til venstre.
   • Klikk på Kjør (play-ikonet) én gang for å autorisere tilgangen.

   functiononEdit(e){if(!e||!e.range)return;vareditedSheet=e.source.getActiveSheet();vareditedRange=e.range;// Unngår at scriptet kjører seg selv i en uendelig loop hvis B2 oppdateresif(editedSheet.getName()==="Config"&&editedRange.getA1Notation()==="B2"){return;}varconfigSheet=e.source.getSheetByName("Config");if(configSheet){// Henter gjeldende tid og konverterer til ISO 8601 (UTC)varisoString=newDate().toISOString();// Setter inn verdien som ren tekst (ved hjelp av en apostrof) // slik at Google Sheets ikke automatisk endrer formatet til lokal tidconfigSheet.getRange("B2").setValue("'"+isoString);}}

   Dette gjør at oppdateringsdatoen i applikasjonen stemmer overens med datoen for sist redigering i regnearket.

Komme i gang

Installasjon

Installer prosjektets avhengigheter:

npm install

Kjøre lokalt (Utvikling)

Start den lokale utviklingsserveren:

npm run dev

Åpne nettleseren på http://localhost:5173/.

TypeScript Type-sjekk

For å verifisere typer på tvers av prosjektet:

npm run type-check

Kjøre Tester

Du kan kjøre enhetstester og end-to-end (E2E) nettlesertester:

• Enhetstester (Vitest):

  npm run test:unit

• Nettlesertester (Playwright E2E):

  npm run test:e2e

Bygge for produksjon

Kompiler og minimer kildekoden for produksjon:

npm run build

Dette oppretter en dist-mappe med produksjonsklare filer, der alle stier er prefikset med /nex/ for hosting under underkatalogen /nex.

Prosjektstruktur

NorgeApp/
├── .env # Inneholder Google Spreadsheet ID
├── index.html # Hovedfil med PWA-meta-tagger og ikoner
├── vite.config.ts # Vite-konfigurasjon med base: '/nex/'
├── src/
│ ├── main.ts # Oppstartsskript og registrering av Pinia
│ ├── App.vue # App-layout og header/footer håndtering
│ ├── assets/
│ │ ├── base.css # Design system variabler og base resets
│ │ └── main.css # Komponenter og stil-definisjoner
│ ├── components/
│ │ ├── explorer/
│ │ │ ├── CountyList.vue # Kolonneliste for Fylker
│ │ │ ├── MunicipalityList.vue # Kolonneliste for Kommuner
│ │ │ └── PostalCodeList.vue # Kolonneliste for Poststeder
│ │ └── inspector/
│ │ └── DetailInspector.vue # Detaljvisning
│ ├── services/
│ │ └── mockData.ts # Offline- og kategorikoder for demo/test
│ └── stores/
│ └── geoData.ts # Pinia store med CSV-parsing, Config og oppdateringstilstand

Utviklingsverktøy

Jeg har brukt følgende verktøy for å utvikle denne applikasjonen:

• Antigravity v2.1.1 med Gemini 3.5 Flash (Medium)
• Google Chrome
• Node v24.18.1
• npm 11.16.0
• git 2.54.0