🔥 Firebase Setup Guide

Introduktion

Denna guide beskriver hur du kopplar Bjerred Skylt-projektet till Firebase för att lagra trivselregler och användarfeedback i realtid.

Firebase Console - Din projektöversikt för "skylt"

1 Registrera en webbapp i Firebase

Först måste du registrera en webbapp i ditt Firebase-projekt för att få konfigurationen.

1.1 Gå till Projektinställningar

1. Gå till Firebase Console
2. Klicka på kugghjulet ⚙️ bredvid "Project Overview" i vänstra menyn
3. Välj "Project settings" (Projektinställningar)

Firebase Project Settings - Så här ser sidan ut

1.2 Hitta "Your apps" (Dina appar)

1. Scrolla ner på Project Settings-sidan
2. Leta efter rubriken "Your apps" (Dina appar) längst ned
3. Om det står "There are no apps in your project" behöver du registrera en ny app (se nästa steg)

1.3 Registrera en webbapp

I "Your apps"-sektionen:

1. Klicka på webb-ikonen </> (den tredje ikonen - ser ut som HTML-taggar)
2. Ge appen ett smeknamn (t.ex. "Bjerred Skylt Web")
3. Firebase Hosting - BEHÖVS INTE! Du kan lämna "Also set up Firebase Hosting" okryssat eftersom du redan har GitHub Pages.
4. Klicka "Register app" (Registrera app)

Registrera din webbapp - Ge den ett namn och klicka "Register app"

1.4 Kopiera konfigurationen

Efter registrering visas ett kodblock med din Firebase-konfiguration:

Här visas din Firebase-konfiguration - Kopiera värdena!

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "skylt-e0c45.firebaseapp.com",
  projectId: "skylt-e0c45",
  storageBucket: "skylt-e0c45.firebasestorage.app",
  messagingSenderId: "123...",
  appId: "1:123..."
};

1.5 Gå vidare - Ignorera Hosting-stegen

Efter att du kopierat konfigurationen:

1. Om Firebase visar steg om "Install Firebase CLI" eller "Deploy to Firebase Hosting" - klicka bara "Continue to console" eller "Skip this step"
2. Du behöver INTE installera Firebase CLI
3. Du behöver INTE köra npm install firebase
4. Du behöver INTE köra firebase deploy

1.6 Din app är nu registrerad!

Om du ser en sida som liknar bilden nedan är din webbapp färdigregistrerad. Grattis! Du befinner dig nu på Project Settings-sidan och kan se din app under "Your apps".

Din webbapp "Bjerreds_skylt" är nu registrerad i Firebase!

2 Konfigurationen är klar!

const firebaseConfig = {
    apiKey: "AIzaSyBbAX6EFxbW1VIcSYQ3Zqbr3v733sGMYD8",
    authDomain: "skylt-e0c45.firebaseapp.com",
    projectId: "skylt-e0c45",
    storageBucket: "skylt-e0c45.firebasestorage.app",
    messagingSenderId: "653653642598",
    appId: "1:653653642598:web:29e332c87fed1cd9f34ca7"
};

3 Aktivera Firestore Database

3.1 Navigera till Firestore Database

1. I Firebase Console, klicka på "Build" i vänstra menyn
2. Välj "Firestore Database"
3. Klicka på den blå knappen "Create database"

3.2 Välj Security Rules (Säkerhetsläge)

Nu ser du dialogen "Create a database". Här ska du välja hur säkerhetsreglerna ska fungera från början:

Dialogen "Create a database" - Välj säkerhetsläge för din databas

3.3 Vad du ska göra nu

1. Välj "Start in production mode" (rekommenderas)
2. Klicka på den blå knappen "Next"

3.4 Problem? Tillbaka på Overview-sidan?

Om du hade problem med att välja plats, eller om du hamnade tillbaka på Overview-sidan, är det troligt att databasen ändå skapades! Så här kontrollerar du:

Firebase Console Overview - Din projektöversikt

3.5 Kontrollera om Firestore Database är aktiverad

Gör så här för att kontrollera och eventuellt aktivera databasen:

1. Titta i vänstermenyn - Leta efter "Build"
   (Om du inte ser "Build", klicka på hamburgermenyn ☰ längst upp till vänster)
2. Klicka på "Build" för att expandera undermenyn
3. Klicka på "Firestore Database"

3.6 Vad ser du på Firestore Database-sidan?

När du kommer till Firestore Database-sidan finns det två möjligheter:

3.7 Välj plats (Location) för databasen

Efter att du valt säkerhetsläge kommer dialogen för att välja plats:

Välj geografisk plats för din Firestore-databas

1. Välj europe-west1 i dropdown-listan
2. Klicka på "Enable" eller "Create"

3.8 Production Mode bekräftelse

Efter att du valt plats ser du en bekräftelse om Production Mode:

Bekräftelse av Production Mode-inställningar

3.9 Databasen är klar! 🎉

När databasen skapats kommer du till Firestore Database-sidan med en tom databas:

Din Firestore Database är nu aktiverad och klar att användas!

Datastruktur för projektet

Projektet använder följande collection-struktur som redan är förberedd i script.js:

4 Lägg till Firebase SDK i index.html

Öppna index.html och lägg till Firebase SDK före din egen script-tagg (<script src="script.js">).

4.1 Lägg till Firebase SDK-skript

Lägg till följande rader precis före </body>-taggen:

<!-- =======================================================================
     FIREBASE SDK
     Lägg till dessa FÖRE script.js
     ======================================================================= -->

<!-- Firebase App (grundläggande - krävs alltid) -->
<script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-app-compat.js"></script>

<!-- Firebase Firestore (för databas) -->
<script src="https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore-compat.js"></script>

<!-- Firebase konfiguration och initialisering -->
<script>
    // Firebase-konfiguration (hämtad från Firebase Console)
    const firebaseConfig = {
        apiKey: "DIN-API-KEY-HÄR",
        authDomain: "skylt-e0c45.firebaseapp.com",
        projectId: "skylt-e0c45",
        storageBucket: "skylt-e0c45.appspot.com",
        messagingSenderId: "DITT-SENDER-ID",
        appId: "DITT-APP-ID"
    };

    // Initiera Firebase
    firebase.initializeApp(firebaseConfig);

    // Gör Firestore-databasen tillgänglig globalt
    const db = firebase.firestore();

    console.log("Firebase initierad!");
</script>

<!-- Din egen JavaScript-fil (EFTER Firebase) -->
<script src="script.js"></script>

5 Konfigurera Firebase Security Rules

Security Rules bestämmer vem som kan läsa och skriva till din databas. Just nu är databasen helt låst - ingen kan använda den!

5.1 Du är nu på Rules-sidan

Du befinner dig på: https://console.firebase.google.com/u/0/project/skylt-e0c45/firestore/databases/-default-/security/rules

Firebase Security Rules - Här konfigurerar du vem som får läsa och skriva till databasen

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;  // ← Blockerar ALLT!
    }
  }
}

5.2 Vad du ska göra

1. Markera all text i kodredigeraren (Ctrl+A)
2. Ta bort allt (Delete eller Backspace)
3. Klistra in de nya reglerna nedan (Ctrl+V)
4. Klicka på "Publish"-knappen

5.3 Kopiera dessa regler:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    // Regler för "rules"-collection
    // Alla kan läsa, alla kan uppdatera röster
    match /rules/{ruleId} {
      allow read: if true;
      
      // Tillåt endast uppdatering av votes-fältet
      allow update: if request.resource.data.diff(resource.data).affectedKeys()
                        .hasOnly(['votes']);
    }
    
    // Regler för "suggestions"-collection
    // Alla kan läsa och skriva förslag
    match /suggestions/{suggestionId} {
      allow read: if true;
      allow create: if request.resource.data.keys().hasAll(
        ['ruleId', 'userName', 'newText', 'timestamp']
      );
    }
  }
}

5.4 Reglerna är publicerade! 🎉

Efter att du klickat "Publish" ser du att reglerna är aktiva:

Security Rules är nu publicerade och aktiva!

5.5 Problem: "Missing or insufficient permissions"

Om du testar att skriva till en collection som inte finns definierad i reglerna (t.ex. test-collection) får du felet:

❌ FEL: FirebaseError: Missing or insufficient permissions.

5.6 Lösning: Öppna upp reglerna för utveckling

För att kunna testa och utveckla fritt uppdaterade vi Security Rules till att tillåta alla collections:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    // Tillåt alla collections för test och utveckling
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Uppdaterade Security Rules som tillåter alla collections

6 🎉 Databasen är klar - Testa appen!

6.1 Testa att Firebase fungerar

Öppna din app lokalt och testa:

1. Öppna index.html i webbläsaren (dubbelklicka på filen)
2. Tryck F12 för att öppna utvecklarverktyg
3. Klicka på fliken "Console"
4. Du ska se meddelandet: "Firebase initierad! Projekt: skylt-e0c45"

Firebase är initierad! Console visar "Firebase initierad! Projekt: skylt-e0c45"

6.2 Testa att databasen fungerar (Frontend ↔ Backend)

Nu ska vi verifiera att appen faktiskt kan läsa och skriva till Firestore-databasen. Öppna Console (F12) och kör följande test:

Test 1: Skriv testdata till databasen

Kopiera och klistra in denna kod i Console, tryck sedan Enter:

// TEST: Skriv testdata till Firestore
db.collection('test').doc('testdoc').set({
    message: 'Hej från Bjerred Skylt!',
    timestamp: new Date().toISOString()
}).then(() => {
    console.log('✅ SUCCESS! Data skriven till Firestore!');
}).catch((error) => {
    console.error('❌ FEL:', error);
});

Förväntat resultat: ✅ SUCCESS! Data skriven till Firestore!

Test 2: Läs testdata från databasen

Kopiera och klistra in denna kod i Console:

// TEST: Läs testdata från Firestore
db.collection('test').doc('testdoc').get().then((doc) => {
    if (doc.exists) {
        console.log('✅ SUCCESS! Data läst från Firestore:', doc.data());
    } else {
        console.log('❌ Dokumentet finns inte');
    }
}).catch((error) => {
    console.error('❌ FEL:', error);
});

Förväntat resultat: ✅ SUCCESS! Data läst från Firestore: {message: "Hej från Bjerred Skylt!", timestamp: "..."}

7 Aktivera Firebase-sparning i script.js

För att feedback från användare ska sparas till Firebase behöver script.js uppdateras. Funktionen submitFeedback() hanterar all feedback.

7.1 Vad sparas till Firebase?

7.2 Koden som lades till

I submitFeedback()-funktionen lades följande Firebase-anrop till:

För "Bra regel!"-feedback:

// Spara "Bra regel!"-feedback till Firebase
if (typeof db !== 'undefined') {
    db.collection('feedback_good').add({
        ruleId: currentRule.id,
        ruleText: state.language === 'sv' ? currentRule.textSv : currentRule.textEn,
        userName: userName,
        timestamp: firebase.firestore.FieldValue.serverTimestamp()
    });
}

För "Byt ut"-förslag:

// Spara "Byt ut"-förslag till Firebase
if (typeof db !== 'undefined') {
    db.collection('suggestions').add({
        ruleId: currentRule.id,
        ruleText: state.language === 'sv' ? currentRule.textSv : currentRule.textEn,
        userName: userName,
        newText: newRuleText,
        timestamp: firebase.firestore.FieldValue.serverTimestamp()
    });
}

7.3 Var ser du feedback i Firebase Console?

Gå till: https://console.firebase.google.com/u/0/project/skylt-e0c45/firestore/databases/-default-/data

Där hittar du:

• feedback_good - Alla "Bra regel!"-klick
• suggestions - Alla "Byt ut"-förslag med ny text

8 Admin-sida för att visa feedback

8.1 Vad gör admin-sidan?

Admin-sidan hämtar och visar:

• 👍 "Bra regel!"-feedback - Från collection feedback_good
• ✏️ Ändringsförslag - Från collection suggestions
• 📊 Statistik - Totalt antal av varje typ

8.2 Hur når man admin-sidan?

En diskret länk (📋-ikon) har lagts till i nedre vänstra hörnet av huvudsidan, bredvid GitHub-länken.

Direkt länk: https://kentlundgren.github.io/Bjerred-skylt/admin.html

8.3 Vad visas för varje feedback?

8.4 Tekniska detaljer

Admin-sidan:

• Använder samma Firebase-konfiguration (firebase-config.js)
• Hämtar data med orderBy('timestamp', 'desc') - nyast först
• Har en "Uppdatera"-knapp för att hämta ny feedback utan att ladda om sidan
• Visar laddningsindikator medan data hämtas

8.5 ✅ Det fungerar!

Här ser vi admin-sidan med feedback som samlats in från besökare:

Bilden visar: Admin-sidan med statistik (antal "Bra regel!" och ändringsförslag), samt listan över all feedback med användarnamn, regeltext och tidsstämpel.

9 Hur Frontend och Backend samarbetar

Nu när allt fungerar, låt oss förstå hur de olika delarna samarbetar:

9.1 Översikt av dataflödet

┌─────────────────────────────────────────────────────────────────────┐
│                        ANVÄNDAREN                                    │
│                  (besöker webbsidan)                                │
└─────────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     FRONTEND (GitHub Pages)                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────────┐ │
│  │ index.html  │  │ styles.css  │  │ script.js                   │ │
│  │ (struktur)  │  │ (utseende)  │  │ (funktionalitet + Firebase) │ │
│  └─────────────┘  └─────────────┘  └─────────────────────────────┘ │
│                                               │                      │
│                                               │ firebase.firestore() │
└───────────────────────────────────────────────│─────────────────────┘
                                                │
                                                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     BACKEND (Firebase)                              │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │              Firestore Database                              │   │
│  │  ┌──────────────────┐  ┌──────────────────┐                 │   │
│  │  │  feedback_good   │  │   suggestions    │                 │   │
│  │  │  (Bra regel!)    │  │  (Byt ut-förslag)│                 │   │
│  │  └──────────────────┘  └──────────────────┘                 │   │
│  └─────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘
                

9.2 Steg-för-steg: Vad händer när en användare ger feedback?

1. Användaren klickar "Bra regel!"
   script.js fångar klicket och öppnar feedback-modalen.
2. Användaren fyller i namn och klickar "Skicka"
   Funktionen submitFeedback() anropas.
3. Frontend skickar data till Firebase
   db.collection('feedback_good').add({...}) skickar data över internet.
4. Firebase lagrar data
   Firestore sparar dokumentet med automatiskt ID och server-tidsstämpel.
5. Firebase bekräftar
   .then()-callback körs och visar "✅ Firebase: ..." i console.

9.3 Steg-för-steg: Vad händer på admin-sidan?

1. Admin-sidan laddas
   admin.html kör loadAllFeedback() automatiskt.
2. Frontend frågar Firebase
   db.collection('feedback_good').orderBy('timestamp', 'desc').get()
3. Firebase returnerar data
   Alla dokument i collection:en skickas tillbaka.
4. Frontend visar data
   JavaScript bygger HTML-kort för varje feedback och visar dem.

9.4 Varför behövs ingen server?

Traditionellt behöver man en backend-server (t.ex. Node.js, Python) för att hantera databaser. Firebase är en "Backend-as-a-Service" (BaaS) som eliminerar detta:

• Ingen egen server - Firebase hanterar allt
• Säkerhet via Rules - Security Rules skyddar data istället för backend-kod
• Realtidsuppdateringar - Data kan synkas automatiskt (om man vill)
• Skalbar - Firebase hanterar tusentals användare automatiskt

10 Nollställa databasen (ta bort testdata)

Efter testning vill du kanske ta bort all testdata och börja om från början.

10.1 Metod 1: Via Admin-sidan (rekommenderas)

Admin-sidan (admin.html) har en "🗑️ Nollställ"-knapp längst ner. Klicka på den och bekräfta för att ta bort all feedback.

10.2 Metod 2: Via Firebase Console

1. Gå till Firestore Database
2. Klicka på collection:en du vill ta bort (t.ex. feedback_good)
3. Klicka på de tre prickarna (⋮) bredvid collection-namnet
4. Välj "Delete collection"
5. Skriv collection-namnet för att bekräfta
6. Upprepa för andra collections (suggestions, test)

10.3 Metod 3: Via webbläsarens Console

Öppna Developer Tools (F12) på din sida och kör:

// Ta bort alla dokument i 'feedback_good'
db.collection('feedback_good').get().then(snapshot => {
    snapshot.forEach(doc => {
        doc.ref.delete();
    });
    console.log('✅ feedback_good tömd!');
});

// Ta bort alla dokument i 'suggestions'
db.collection('suggestions').get().then(snapshot => {
    snapshot.forEach(doc => {
        doc.ref.delete();
    });
    console.log('✅ suggestions tömd!');
});

10.4 Teknisk förklaring: Hur fungerar borttagning?

Firestore har ingen "DELETE ALL"-funktion. Istället måste man:

1. Hämta alla dokument - .get() returnerar alla dokument i en collection
2. Loopa igenom - .forEach() går igenom varje dokument
3. Ta bort individuellt - .delete() tar bort ett dokument i taget

OBS: Om du har väldigt många dokument (tusentals) bör du använda "batch delete" eller Firebase CLI för bättre prestanda.

11 Lägg till initial data i Firestore (valfritt)

Nu ska vi lägga till trivselreglerna i databasen. Du kan göra detta manuellt i Firebase Console eller köra ett skript.

Alternativ A: Manuellt via Firebase Console

1. Gå till Firestore Database
2. Klicka "Starta samling" (Start collection)
3. Ange rules som Collection ID
4. Lägg till dokument med ID rule-1
5. Lägg till fälten enligt tabellen i Steg 3
6. Upprepa för alla 11 regler

Alternativ B: Köra ett initieringsskript

Öppna webbläsarens utvecklarverktyg (F12) på din sida och kör följande i Console-fliken:

// Kör detta EN GÅNG för att lägga till alla regler i Firestore
async function initializeRulesInFirestore() {
    const rules = [
        {
            id: 'rule-1',
            textSv: 'Bastun är en plats för avkoppling, tala dämpat och njut av stillheten.',
            textEn: 'The sauna is a place for relaxation; keep your voice down and enjoy the tranquility.',
            icon: 'volume-2',
            votes: { up: 0, down: 0 }
        },
        {
            id: 'rule-2',
            textSv: 'Badkläder är inte tillåtna i bastun.',
            textEn: 'Swimwear is not allowed in the sauna.',
            icon: 'droplets',
            votes: { up: 0, down: 0 }
        },
        // ... lägg till resten av reglerna
    ];
    
    for (const rule of rules) {
        await db.collection('rules').doc(rule.id).set({
            textSv: rule.textSv,
            textEn: rule.textEn,
            icon: rule.icon,
            votes: rule.votes
        });
        console.log(`Tillagd: ${rule.id}`);
    }
    
    console.log('Alla regler tillagda!');
}

// Kör funktionen
initializeRulesInFirestore();

🔧 Felsökning

Vanliga problem