Introduktion till generativ AI

Teknisk beskrivning

Detta program är utvecklat med standardtekniker för webb:

• HTML5 - Används för strukturen och innehållet
• CSS3 - Hanterar design och layout
• JavaScript - Ger interaktivitet och funktionalitet

Programstruktur

generativAI/
│
├── index.html          # Huvudfil med HTML-struktur och innehåll
├── css/
│   └── styles.css      # Stilmallar för applikationen
├── js/
│   └── script.js       # JavaScript-funktionalitet
└── images/
    ├── locked.png      # Ikon för låst innehåll
    └── *andra bilder*  # Övriga bilder för applikationen
                

Funktionalitet

Programmet implementerar följande funktioner:

• Navigering mellan flikar med JavaScript
• Interaktivt quiz med validering av svar
• Låst innehåll som endast blir tillgängligt efter godkänt quiz
• Responsiv design för olika skärmstorlekar
• Visualisering av data och koncept

Jämförelse: HTML/CSS/JS vs React med Vite

Detta program är byggt med enbart HTML, CSS och JavaScript, vilket är en lämplig metod för enklare applikationer. För mer komplexa projekt skulle en React-implementation med Vite erbjuda flera fördelar.

HTML/CSS/JS (denna version)

Fördelar:

• Enkelt att komma igång - ingen installation krävs
• Fungerar i alla webbläsare utan byggverktyg
• Lättare att förstå för nybörjare
• Direkt körbar utan byggsystem

Nackdelar:

• Svårare att underhålla när projektet växer
• Ingen komponentbaserad struktur
• Manuell hantering av DOM
• Ingen kodoptimering utan ytterligare verktyg

React med Vite

Fördelar:

• Komponentbaserad arkitektur gör det enklare att organisera kod
• Reaktiv uppdatering av användargränssnittet
• Effektiv renderingsmotor (Virtual DOM)
• Robust ekosystem med färdiga bibliotek
• Hot Module Replacement (HMR) för snabb utveckling
• Automatisk byggprocess med optimering för produktion

Aspekt	HTML/CSS/JS (denna version)	React med Vite
Komponentstruktur	Manuell hantering av DOM-element	Återanvändbara komponenter med tydlig separation
Tillståndshantering	Manuell DOM-manipulation	Reaktiv tillståndshantering med hooks (useState, useEffect)
Byggprocess	Ingen byggprocess	Optimerad bundling, minifiering och koddelning
Utvecklingsupplevelse	Manuell sidladdning	Hot Module Replacement för snabb utveckling

Struktur i en React-app med Vite

En React-app byggd med Vite skulle ha följande mappstruktur:

generativAI-react/
├── node_modules/      # Alla beroenden (installerade paket)
├── public/            # Statiska filer som inte behöver processas
│   └── vite.svg       # Vite-logotyp
├── src/               # Källkod
│   ├── assets/        # Statiska resurser som behöver processas
│   │   └── react.svg  # React-logotyp
│   ├── components/    # Återanvändbara React-komponenter
│   │   ├── Assignment.jsx
│   │   ├── Tips.jsx
│   │   ├── Visual.jsx
│   │   ├── Quiz.jsx
│   │   └── Solution.jsx
│   ├── utils/         # Hjälpfunktioner
│   │   └── dataHelpers.js
│   ├── App.jsx        # Huvudkomponenten
│   ├── App.css        # Stilar för App-komponenten
│   ├── index.css      # Globala stilar
│   └── main.jsx       # Startpunkt för applikationen
├── .eslintrc.cjs      # ESLint-konfiguration
├── index.html         # HTML-mall
├── package.json       # Projektinformation och beroenden
├── vite.config.js     # Vite-konfiguration
└── README.md          # Projektdokumentation
                

När välja React med Vite?

• För större, mer komplexa projekt
• När du jobbar i team
• När du behöver strukturera applikationen i återanvändbara komponenter
• När prestandan är viktig för användarupplevelsen
• När du vill använda moderna JavaScript-funktioner

Ramverk och teknologival

Olika ramverk/bibliotek i Vite

När du kör npm create vite@latest får du välja mellan olika ramverk:

• Vanilla: Ren JavaScript utan ramverk, bra om du vill ha ett minimalt byggverktyg utan ramverk.
• React: Ett populärt UI-bibliotek för att bygga komponentbaserade användargränssnitt.
• Vue: Ett progressivt ramverk för att bygga användargränssnitt, känt för sin enkelhet.
• Preact: En lättviktig alternativ till React med samma API men mindre paketstorlek.
• Lit: Ett litet bibliotek för att bygga snabba webkomponenter.
• Svelte: Ett modernt ramverk som kompilerar till optimerad JavaScript under byggtid.

Du bör inte alltid välja React bara för att du har använt det tidigare. Varje ramverk har sina styrkor:

• Vue kan vara enklare för nybörjare
• Svelte genererar mindre kod
• Preact är bra när prestanda och paketstorlek är kritiskt
• Lit är utmärkt för webkomponenter som kan användas överallt

JavaScript vs TypeScript

Efter att du valt ramverk får du välja mellan olika varianter:

• JavaScript: Enklare att komma igång med om du är bekant med det.
• TypeScript: Lägger till statisk typning, vilket hjälper till att hitta buggar tidigare och förbättrar utvecklarupplevelsen.
• JavaScript/TypeScript + SWC: Använder SWC (Speedy Web Compiler) istället för Babel för snabbare kompilering.

Det är värt att överväga TypeScript även om du är van vid JavaScript, särskilt för större projekt, eftersom det kan fånga fel under utvecklingen och göra koden mer underhållbar.

Komma igång med React och Vite

Steg för att skapa ett React-projekt med Vite

1. Skapa projektet: npm create vite@latest generativAI-react --template react
2. Navigera till projektmappen: cd generativAI-react
3. Installera beroenden: npm install
4. Starta utvecklingsservern: npm run dev

Bygga för produktion

När du är klar med utvecklingen bygger du applikationen för produktion:

npm run build

Detta skapar en dist-mapp med optimerade filer för produktionsmiljö.

Konfigurera bas-URL för webbhosting

För att konfigurera bas-URL:n för en undermapp (t.ex. på din hemsida kentlundgren.se) redigerar du vite.config.js:

export default {
  base: '/program/generativAI-react/',
  // andra konfigurationer...
}

Detta säkerställer att alla resurser (JavaScript, CSS, bilder) får rätt sökvägar i produktionsmiljön.

Användbara verktyg och länkar

• React - Officiell dokumentation
• Vite - Snabbt byggverktyg
• Node.js - JavaScript runtime
• npm - Node Package Manager