Hallo zusammen, an dieser stelle möchte ich euch nach und nach Firebase Vorstellen, Installieren, lesen und mehr.  Dieser Beitrag wird nach und nach immer weiter erweitert mit neuen Videos.

 

Firebase Vorstellung

Mit diesem Video startet eine neue Videoreihe, die Firebase behandelt. Es wird dabei um Authentifizierung/Serverless Computing/NoSQL Datenbanken und vieles mehr gehen.

INHALT:

  • Intro
  • Vorstellung Firebase
  • Firebase Projekt erstellen
  • Projektübersicht
  • Firebase Kosten
  • Ausblick

 

 

Installation and Setup

In diesem Video setzen wir gemeinsam das Firebase Vue.Js Projekt lokal auf. 

INHALT:

  • Intro
  • Vorraussetzungen
  • Vue CLI installieren
  • Firebase Tools installieren
  • Vue Projekt erstellen
  • Firestore Datenbank erstellen
  • Firebase initialisieren
  • Ausblick

 

 

Daten aus Firestore lesen

In diesem Video lesen wir zum ersten Mal Daten direkt aus Firestore aus.

INHALT:

  • Intro
  • Testdaten erstellen
  • Firebase Client SDK installieren
  • Firebase Config erstellen
  • Firebase Client SDK initialisieren
  • Firestore Daten auslesen
  • Firestore Rules anpassen
  • Zusammenfassung & Ausblick

 

Project Cleanup and Refactoring

In diesem Video räumen wir das Projekt auf und abstrahieren die Nutzung von Firebase.

INHALT:

  • Intro
  • firebase.js Datei
  • Zwischentest
  • mounted() in App.vue
  • Projektordner aufräumen
  • Ausblick

Nutzer erstellen und authentifizieren

In diesem Video nutzen wir die Möglichkeit der Authentifizierung mit Firebase und erstellen 

INHALT:

  • Intro
  • Anmeldemethode hinzufügen
  • Auth Modul importieren
  • Auth Nutzer erstellen
  • Auth Nutzer einloggen
  • Demo
  • Fehlerfall abfangen
  • Zusammenfassung und Ausblick

Login Formular erstellen

In diesem Video werden wir die Funktionalität des letzten Videos im Frontend darstellen. Dazu erstellen wir ein Login Formular, das unsere Daten an Firebase sendet und den Nutzer einloggt. 

INHALT:

  • Intro
  • LoginForm erstellen
  • Login Event abfangen und einloggen
  • Frontend eingeloggt/nicht eingeloggt
  • Fehler fixen
  • Demo
  • Ausblick

Vuex und Auth Session States 

In diesem Video den Login Mechanismus umbauen, sodass wir direkt die Auth Session mit Vuex beobachten. 

INHALT: 

  • Intro 
  • Vuex installieren 
  • AuthStateChanged Methode 
  • Vuex Store anlegen 
  • Zwischendemo 
  • Login Action 
  • Zwischendemo 
  • Logout Action 
  • Demo und Zusammenfassung