Google AI Studio und Firebase

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit Google AI Studio und Firebase eine vollständig funktionierende Web-App entwickelst – ganz ohne klassischen Code. Statt komplizierter Programmierung arbeitest du ausschließlich mit klaren, strukturierten Prompts.

Als praxisnahes Beispiel erstellen wir gemeinsam eine moderne Videobibliothek. Nutzer können sich registrieren, anmelden und ihre eigenen Videos sicher speichern und verwalten. Dabei lernst du verständlich und direkt umsetzbar, wie du Authentifizierung, Datenbank und eine saubere Trennung der Nutzerdaten korrekt einrichtest.

Du bekommst nicht nur die Theorie, sondern baust das Projekt live mit – ideal zum Nachmachen, Experimentieren und Lernen. Alle benötigten Prompts sowie zusätzliche Erklärungen und Ressourcen findest du gesammelt hier im Blogbeitrag.

Perfekt für Einsteiger, Maker und alle, die schnell eigene Web-Apps mit KI-Unterstützung entwickeln möchten.

Bleib auf dem Laufenden

Erhalte regelmäßig kompakte Updates zu neuen Schulungen, Praxisbeispielen und KI-Trends

Maximum number of entries exceeded.

1. Allgemeiner Prompt für Google AI Studio

Rolle: Senior Full-Stack Entwickler & Architekt. Projekt: „TubeVault“ – Eine Web-App zum Speichern und Kategorisieren von YouTube-Videos.

Stack:

Frontend: React (Vite-Setup) mit Tailwind CSS.
State-Management: React Hooks (useState, useEffect, useContext).
Backend: Firebase (Authentication & Firestore).

Detaillierte Feature-Anforderungen:

Landingpage: Erstelle eine moderne Landingpage mit einer klaren Value Proposition und einem prominenten „Registrieren“-Button.
Authentication Flow: * Implementiere ein Registrierungs-Modal (Felder: Name, E-Mail, Passwort).
- Logik: Nach dem Klick auf „Registrieren“ wird der User in Firebase angelegt und eine Verifizierungs-E-Mail via sendEmailVerification ausgelöst.
- Login-Funktionalität für bestehende User.
User-Dashboard (Protected Route):
- Video-Input: Formular mit Feldern für Titel, URL, Beschreibung und eine Kategorie.
- YouTube-Integration: Extrahiere beim Speichern der URL automatisch die Video-ID, um das Thumbnail-Bild (https://img.youtube.com/vi/[VIDEO_ID]/maxresdefault.jpg) zu generieren und anzuzeigen.
- Kategorien-Management: User können eigene Kategorien (Labels) definieren und Videos diesen zuordnen.
- Display: Anzeige der Videos in einem Grid aus Cards. Jede Card zeigt das Thumbnail, den Titel und die Kategorie.
Datenstruktur & Sicherheit:
- Firestore-Struktur: Eine Collection users mit Unter-Collections für videos und categories.
- Schreibe die Firestore Security Rules, die sicherstellen, dass Daten nur vom jeweiligen Eigentümer (basierend auf der uid) gelesen und geschrieben werden können.

Erwartete Ausgabe:

Vollständige Dateistruktur der App.
Inhalt der firebase.config.js.
Code für die Hauptkomponenten (App.js, Navbar.js, Dashboard.js, VideoCard.js).
Anleitung zur Einrichtung der Firestore-Datenbank (Indizes/Rules).

2. Firebase-Authentifizierung

Verbinde meine bestehende Web-App mit Firebase mithilfe dieses SDKs:
[Firebase Initialisierungs-Code hier einfügen]

Anforderungen:

Verwende ausschließlich Firebase-Authentifizierung
Verwende vorerst weder Firestore noch Storage
Gestalte die Benutzeroberfläche nicht neu

Authentifizierungsverhalten:

Benutzer können sich mit E-Mail und Passwort anmelden
Wenn die Anmeldedaten falsch sind, zeige:
„E-Mail oder Passwort ist falsch“
Benutzer können sich mit E-Mail und Passwort registrieren
Wenn die E-Mail bereits existiert, zeige:
„Benutzer existiert bereits. Bitte anmelden“

Für den Moment:

Nur Benutzer authentifizieren
Keine Profildaten speichern

Ablauf:

Nach erfolgreicher Anmeldung oder Registrierung zur Übersichtsseite weiterleiten
Einen Abmelde-Button hinzufügen, der den Benutzer abmeldet und zurück zur Anmeldeseite führt

2. Firebase-Authentifizierung

Verbinde meine bestehende Web-App mit Firebase mithilfe dieses SDKs:
[Firebase Initialisierungs-Code hier einfügen]

Anforderungen:

Verwende ausschließlich Firebase-Authentifizierung
Verwende vorerst weder Firestore noch Storage
Gestalte die Benutzeroberfläche nicht neu

Authentifizierungsverhalten:

Benutzer können sich mit E-Mail und Passwort anmelden
Wenn die Anmeldedaten falsch sind, zeige:
„E-Mail oder Passwort ist falsch“
Benutzer können sich mit E-Mail und Passwort registrieren
Wenn die E-Mail bereits existiert, zeige:
„Benutzer existiert bereits. Bitte anmelden“

Für den Moment:

Nur Benutzer authentifizieren
Keine Profildaten speichern

Ablauf:

Nach erfolgreicher Anmeldung oder Registrierung zur Übersichtsseite weiterleiten
Einen Abmelde-Button hinzufügen, der den Benutzer abmeldet und zurück zur Anmeldeseite führt

3. E-Mail-Adresse prüfen

Implementiere die E-Mail-Verifizierung ausschließlich mit Firebase Authentication.

Wenn sich ein Nutzer mit E-Mail und Passwort registriert, soll er nicht automatisch angemeldet werden. Stattdessen wird eine Verifizierungs-E-Mail versendet und ein Verifizierungsbildschirm angezeigt mit folgender Nachricht: „Wir haben eine Verifizierungs-E-Mail an [E-Mail des Nutzers] gesendet. Bitte bestätige diese und melde dich anschließend an.“ Auf diesem Verifizierungsbildschirm soll außerdem ein Login-Button vorhanden sein. Meldet sich ein Nutzer an und seine E-Mail-Adresse ist noch nicht verifiziert, muss der Zugriff blockiert werden und derselbe Verifizierungsbildschirm angezeigt werden. Firestore oder eine andere Datenbank dürfen dabei nicht verwendet werden, es soll ausschließlich Firebase Authentication zum Einsatz kommen.

4. Google-Anmeldeoption hinzufügen

Füge eine Google-Anmeldeoption hinzu, die mit Firebase verbunden ist.

5. Regeln für Datenbank festlegen

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Erlaubt Zugriff nur im Pfad: users/NUTZER_ID/
    match /users/{uid}/{allPaths=**} {
      allow read, write: if request.auth != null && request.auth.uid == uid;
    }
  }
}

6 Prompt um die Informationen von der App in die Datenbank zu übermitteln

Rolle: Erfahrener Firebase-Entwickler.

Aufgabe: Schreibe die handleSave-Funktion für mein React-Formular "Neues Video speichern", um Daten in Cloud Firestore zu speichern.

Anforderungen:

Ziel-Pfad: Die Daten müssen zwingend unter users/{currentUser.uid}/videos/ gespeichert werden, um meine Sicherheitsregeln zu erfüllen.

Datenstruktur: Speichere folgende Felder aus dem Formular:

youtubeLink (String)

titel (String)

kategorie (String)

beschreibung (String)

createdAt (serverTimestamp von Firebase)

Authentifizierung: Überprüfe, ob ein Nutzer eingeloggt ist, bevor der Speicherprozess startet.

Feedback: > - Deaktiviere den "Speichern"-Button während des Vorgangs (Loading State).

Schließe das Modal nach erfolgreichem Speichern.

Gib bei einem Fehler eine Meldung in der Konsole aus.

Technologie: Nutze die Firebase v9+ Modular SDK Syntax (getFirestore, collection, addDoc, serverTimestamp).

Bleib auf dem Laufenden

1. Allgemeiner Prompt für Google AI Studio

2. Firebase-Authentifizierung

2. Firebase-Authentifizierung

3. E-Mail-Adresse prüfen

4. Google-Anmeldeoption hinzufügen

5. Regeln für Datenbank festlegen

6 Prompt um die Informationen von der App in die Datenbank zu übermitteln

Stell Harald deine persönliche Frage