NgSysV.Erstellen eines einfachen Svelte-Informationssystems mit Googles Firestore

Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.

Letzte Bewertung: 24. November

1. Einführung

Die meisten Webapps dienen lediglich der Erstellung und dem Zugriff auf gemeinsame Informationen. Denken Sie an die Website https://www.amazon.co.uk/ von Amazon. Der Hauptzweck dieses Systems besteht darin, dass Sie eine zentrale Sammlung von Produktdetails durchsuchen, Bestellungen aufgeben und den Lieferfortschritt überwachen können. Damit dies funktioniert, muss Amazon:

• Bewahren Sie diese Informationen an einem über das Internet zugänglichen Ort auf
• Strukturieren und verwalten Sie es, um nahezu sofortigen Zugriff und vollständige Integrität sicherzustellen.

In diesem Beitrag dreht sich alles um die „Datenbank“-Technologie, mit der diese Ziele erreicht werden.

Warnung – dies ist ein langer Beitrag, da das Lesen und Schreiben von Datenbanken in Svelte Sie unbarmherzig dazu bringt, die Client-Server-Architektur von SvelteKit zu verwenden. Bisher lief Ihr Code ausschließlich „clientseitig“ in Ihrem Webbrowser. Jetzt führen Sie auch Code auf dem lokalen Server aus, der von npm run dev gestartet wurde. Das hat Konsequenzen...

Ich habe nach Möglichkeiten gesucht, den Beitrag aufzuteilen, aber sie funktionieren nicht. Erschwerend kommt hinzu, dass das von Ihnen verwendete Javascript viele neue Funktionen enthält. Also, es tut mir leid – du musst es einfach aufsaugen.

Aber schauen Sie auf die positive Seite. Sobald Sie damit fertig sind, werden die Dinge einfacher. Gehen Sie es langsam an. Verwenden Sie chatGPT, wenn Sie das Gefühl haben, dass ich etwas nicht klar erklärt habe. Der Bot ist besonders hilfreich, wenn Sie Ratschläge zur JavaScript-Syntax benötigen. Entspannen. Das wird lustig!

2. Konfigurieren Sie Ihr Projekt für die Verwendung von Googles Firestore

Es gibt unzählige Möglichkeiten, geteilte Daten im Web zu speichern. Diese Beitragsreihe verwendet das Firestore-System von Google, da es für Anfänger geeignet ist. Es erfordert nur minimale Einrichtung und fügt sich bequem in die Struktur einer Svelte-Webanwendung ein.

Sie müssen vier erste Schritte ausführen:

1. Erhalten Sie ein Google-Konto
2. Erstellen Sie unter diesem Konto ein Firebase-Projekt
3. Registrieren Sie Ihre „Webapp“
4. Initialisieren Sie eine Firestore-Datenbank für Ihr Firebase-Projekt

Firebase ist Googles Überbegriff für viele verschiedene Dienste, die Sie zum Bereitstellen eines einfachen Projekts im Web verwenden können. Die Dienste für ein bestimmtes Konto werden über die „Firebase Console“ von Google unter https://console.firebase.google.com/ verwaltet. Sie umfassen sowohl einen „Storage“-Dienst, der es Ihnen ermöglicht, Dateien in die Google Cloud hochzuladen, als auch einen „Firestore-Datenbank“-Dienst. Eine Datenbank unterscheidet sich von einer Datei dadurch, dass sie eine konfigurierbare Struktur besitzt. Es ermöglicht Ihnen, auf einzelne Elemente des konfigurierten Datensatzes zuzugreifen und diese zu aktualisieren.

2.1 Einrichten eines Google-Kontos

Wenn Sie eine Gmail-Adresse haben, sind Sie bereits abgesichert, da diese automatisch als Google-Konto zählt. Wenn Sie dies nicht tun, befolgen Sie die Anweisungen unter Erstellen eines Google-Kontos, um eines zu erhalten.

2.2 Erstellen eines Firebase-Projekts für Ihren Code

Starten Sie die Google Firebase-Konsole und melden Sie sich mit Ihrem Google-Konto an (beachten Sie, dass Sie, wenn Sie damit bei Gmail angemeldet sind, auch bereits bei der Firebase-Konsole angemeldet sind). Klicken Sie nun auf das Feld „Projekt erstellen“, um den Vorgang zu starten.

Google möchte, dass Sie einen Namen für Ihr Projekt angeben (ich schlage vor, dass Sie den Projektnamen verwenden, den Sie in VSCode verwenden) und schlägt eine Erweiterung vor, die es zu einem eindeutigen „Projektbezeichner“ innerhalb der Firebase-Welt macht. So ist beispielsweise meine Version des „Svelte-dev“-Projekts, das in dieser Beitragsreihe verwendet wird, bei Google als „Svelte-dev-afbaf“ bekannt.

Nebenbei bemerkt: Da der Projektbezeichner letztendlich Teil der Standard-Live-URL für Ihre Webanwendung sein wird und Google es Ihnen ermöglicht, seinen ursprünglichen Vorschlag zur „Eindeutigkeitserweiterung“ zu bearbeiten, könnten Sie versucht sein, dies zu ändern zu etwas Sinnvollem. Ich empfehle Ihnen jedoch, diese Idee zu vergessen. Erstens wird es Ihnen schwerfallen, eine Kennung auszuwählen, die für beide Parteien geeignet ist. Zweitens werden diese „Standard-URLs“ meiner Erfahrung nach nie von Google indiziert. Eine „benutzerdefinierte URL“, die zu minimalen Kosten erworben und bei der Live-Schaltung mit Ihrer Standard-URL verknüpft wird, ist bei weitem der beste Weg, eine einprägsame URL zu erhalten.

Klicken Sie nun auf „Weiter“, um eine Registrierungsseite für „Google Analytics“ anzuzeigen. Sie können dies hier getrost ignorieren, da es nur für Leistungsprobleme bei Live-Apps relevant ist. Verwenden Sie den Schieberegler, um es abzulehnen, und klicken Sie auf die Schaltfläche „Projekt erstellen“, um fortzufahren.

Die Lichter werden jetzt etwas gedimmt, während Google Ihr Projekt registriert. Sobald Sie schließlich auf eine weitere Schaltfläche „Weiter“ geklickt haben, befinden Sie sich im Firebase-Konsolenfenster Ihres Projekts. Hier ist ein Screenshot der Firestore-Registerkarte für ein „svelte-dev“-Projekt:

Es lohnt sich, sich einen Moment Zeit zu nehmen, um sich mit dieser Seite vertraut zu machen, da sie etwas kompliziert ist. Die Grundstruktur besteht aus einem „Werkzeugmenü“ auf der linken Seite, das bestimmt, was im Hauptfenster auf der rechten Seite angezeigt wird. Das Problem besteht darin, dass das Menü „adaptiv“ ist und einen Abschnitt „Projektverknüpfungen“ enthält, der sich daran erinnert, wo Sie waren. Folglich scheint das Menü jedes Mal anders auszusehen, wenn Sie die Konsole öffnen! Sobald Sie diese Funktion jedoch verstanden haben, funktioniert alles gut. Beachten Sie, dass der komplette Werkzeugsatz in den Untermenüs „Build“, „Run“ und „Analytics“ des übergeordneten Menüpunkts „Product Category“ verborgen ist. Das Set „Build“ enthält alles, was Sie derzeit benötigen.

Bevor Sie fortfahren, beachten Sie Folgendes:

• Die Informationen oben auf dem Bildschirm bestätigen, dass das Svelte-Test-Projekt derzeit im „Spark“-Plan registriert ist. Das bedeutet, dass alles, was Sie derzeit tun, kostenlos ist. Irgendwann werden Sie in dieser Beitragsreihe an einen Punkt gelangen, an dem Sie anfangen müssen, Google zu bezahlen, und Ihr Projekt auf den „Blaze“-Tarif upgraden müssen. Aber keine Sorge – bis dahin ist es noch ein langer Weg, Sie werden nicht viel bezahlen und Sie können ein Monatsbudget erstellen, um den Betrag zu begrenzen, den Google Ihnen möglicherweise in Rechnung stellen möchte.
• Projektdetails werden angezeigt, indem Sie oben in der Symbolleiste auf die Schaltfläche „Projektübersicht“ klicken. Zu den hier verfügbaren Details gehören eine Erinnerung an die Projektkennung und eine Schaltfläche zum Löschen des Projekts. Wenn alles schief geht, können Sie damit jederzeit das Chaos beseitigen und von vorne beginnen. Das kostet Sie nichts

2.3 Registrieren Ihrer Webapp

Firebase muss wissen, wie Ihre Webanwendung heißen wird:

• Klicken Sie auf die Schaltfläche Symbol unter der Meldung „Erste Schritte“ und geben Sie bei Aufforderung einen Spitznamen ein. Ich schlage vor, dass Sie hier erneut Ihren Projektnamen verwenden (z. B. „svelte-dev“).
• Ignorieren Sie das Angebot „Firebase-Hosting für diese App einrichten“, denn wenn wir endlich mit der Bereitstellung beginnen, werden alle Ihre Hosting-Anforderungen von App Engine übernommen.
• Klicken Sie abschließend auf „Registrieren“ und „Weiter zur Konsole“, um zum ersten Konsolenbildschirm zurückzukehren.

2.4 – Initialisieren einer Firestore-Datenbank

Wählen Sie „Firestore-Datenbank“ aus dem Stapel „Erstellen“ im Menü „Werkzeuge“, um die unten gezeigte Firebase-Konsolenansicht zu erhalten:

Sobald Sie auf die Schaltfläche „Datenbank erstellen“ geklickt haben, fordert die Konsole Sie auf:

1. Stellen Sie Ihre Datenbank auf „Name und Ort“ ein. „Name“ ist die Kennung für die Datenbank und ist nur relevant, wenn Sie in Ihrem Projekt mehrere verschiedene Datenbanken erstellen möchten. Lassen Sie dieses Feld vorerst leer, damit Google seine „Standard“-Einstellung verwendet. „Standort“ gibt an, wo sich Ihre Datenbank physisch befindet. Die hier verfügbare Pulldown-Liste der Optionen bietet möglicherweise einen ersten Einblick in die Größe des Google Cloud-Dienstes. Seine Serverfarmen sind rund um den Globus verfügbar. Sie möchten wahrscheinlich einen Server in der Nähe Ihres Standorts auswählen. Beispielsweise verwende ich im Allgemeinen „Europa-West2: Heathrow“, da ich in Großbritannien ansässig bin. Auf anderen Seiten in der Google Cloud Console können Sie Leistungs- und Verfügbarkeitsmerkmale angeben, Sie müssen sich diese jedoch vorerst nicht ansehen.

2. Sichern Sie Ihre Datenbank mit „Regeln“. Der Bildschirm hier bietet Ihnen die Wahl zwischen der Einstellung der anfänglichen „Produktions“- und „Test“-„Regeln“. Das macht natürlich nur dann Sinn, wenn man überhaupt weiß, was „Regeln“ sind – und jetzt ist nicht der richtige Zeitpunkt für mich, sie zu erklären. Sofern Sie es nicht besser wissen, würde ich Sie bitten, hier die Option „Testmodus“ zu aktivieren. Seien Sie versichert, ich werde später darauf zurückkommen, wenn ich über „Autorisierung“ spreche (und, oh Mann, gibt es da viel zu besprechen!).

Sobald Sie diese beiden Phasen durchlaufen haben, wird die Cloud Firestore-Seite in der Firebase-Konsole geöffnet. Was nun?

3. Arbeiten mit einer Firestore-Datenbank

Dieser Abschnitt soll die folgenden Fragen beantworten:

1. Was ist eine Datenbank?
2. Wie sieht eine Firestore-Datenbank aus?
3. Wie kann ich eine Datenbank in der Firestore-Konsole initialisieren?
4. Wie kann ich in Javascript auf eine Firestore-Datenbank zugreifen?
5. Wie kann ich eine Svelte-page.svelte-Datei zum Laden von Daten aus einer Firestore-Datenbank erhalten?
6. Wie kann ich eine Svelte-page.svelte-Datei erhalten, um Daten zu einer Firestore-Datenbank hinzuzufügen?

3.1 Was ist eine Datenbank?

Für unsere unmittelbaren Zwecke ist eine Datenbank eine Reihe von Tabellen, die Wertezeilen für benannte Daten-„Felder“ enthalten. So könnte beispielsweise eine Datenbank „Kundenbestellung“

• Eine „Kunden“-Tabelle voller Feldwerte „Kunden-ID“ und „Kundenadressdetails“
• Eine „Produkte“-Tabelle voller Felder „Produktnummer“ und „Produktdetails“
• eine Tabelle „Kundenbestellungen“ mit Details zu den Bestellungen für eine „Produktnummer“, die von einer „Kunden-ID“ aufgegeben wurden

Wichtig ist, dass eine solche Vereinbarung strukturiert ist und einheitliche Standards für die Benennung und Formatierung von Dateninhalten aufweist

3.2 Wie sieht eine Firestore-Datenbank aus?

In Firestore werden Tabellen „Sammlungen“ und darin enthaltene Zeilen „Dokumente“ genannt. In einer Sammlung gespeicherte Dokumente müssen nicht alle dieselben Felder aufweisen, es wird jedoch erwartet, dass Feldnamen und Inhalte in der gesamten Sammlung einheitlichen Mustern folgen.

Ein wichtiges Merkmal eines Firestore-Dokuments ist, dass es eine eindeutige Kennung oder einen „Schlüssel“ haben sollte. Manchmal gibt es in jedem Dokument ein Feld wie „E-Mail-Adresse“, das Sie zur Bereitstellung eines „natürlichen“ eindeutigen Schlüssels verwenden können. Wenn nicht, kann Firestore aufgefordert werden, automatisch einen künstlichen Schlüssel zu erstellen.

Datenbankdesign ist wahrscheinlich der anspruchsvollste Teil der Systementwicklung, und ich werde mich noch einmal davor drücken, weil die damit verbundenen Probleme erst dann klar werden, wenn man etwas praktische Erfahrung gesammelt hat. Wenn Sie jedoch einen Moment Zeit haben, wird es für Sie hilfreich sein, einen Blick auf die Seite mit dem Cloud Firestore-Datenmodell zu werfen.

3.3 Wie kann ich eine Datenbank in der Firestore-Konsole initialisieren?

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie eine einzelne Produktsammlung in Ihrer Standard-Firestore-Datenbank erstellen. Dies enthält einfache Dokumente, die ein Produktnummernfeld mit einem von Firestore automatisch generierten Schlüssel enthalten.

Klicken Sie auf der Firestore-Seite der Firebase-Konsole auf die Schaltfläche „Sammlung starten“ und geben Sie den Namen „Produkte“ in das Feld „Sammlungs-ID“ des nun angezeigten Popups ein.

Verwenden Sie nun die Dateneingabeseite, um ein Testproduktdokument zu erstellen, das ein Feld „productNumber“ mit dem numerischen Wert „1“ und ein Feld „productDetails“ mit dem Textwert „Product 1“ enthält.

• Geben Sie „productNumber“ in das Eingabefeld „Feld“ ein, um den Feldnamen festzulegen, setzen Sie das Feld „Typ“ auf „Zahl“ und geben Sie „1“ (ohne Anführungszeichen) in das Feld „Wert“ ein.
• Klicken Sie auf „Feld hinzufügen“ und geben Sie „productDetails“ in das Eingabefeld „Feld“ ein, um den Feldnamen festzulegen. Belassen Sie das Feld „Typ“ auf der Standardeinstellung „Zeichenfolge“ und geben Sie „Produkt 1“ ein (ohne Anführungszeichen). ) im Feld „Wert“.

wirklich interessant!

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Zuerst werden die Sammlungs- und Abfragefunktionen, die aus der Firestore-Client-API-Bibliothek stammen, verwendet, um Firebase auf die Produktsammlung zu verweisen und eine darauf auszuführende Abfrage zu definieren. Anschließend wird die Abfrage durch einen getDocs-API-Aufruf gestartet.

Ich werde nicht versuchen, die Mechanik dieser Abfolge von Firestore-API-Aufrufen zu beschreiben. Behandeln Sie diese als ein Stück „Boiler-Plate-Code“ – Code – die Art von Dingen, die Sie einmal schreiben und danach einfach kopieren. Da Sie feststellen werden, dass Sie eine ganze Bibliothek von Vorlagen benötigen, um das gesamte Spektrum der Firestore-Vorgänge „Lesen“, „Aktualisieren“ und „Löschen“ abzudecken, könnte es hilfreich sein, einen Blick auf Post 10.1 – Firestore CRUD-Befehlsvorlagen zu werfen. Wenn Sie sich Googles eigene Beschreibung der API ansehen möchten, finden Sie Links dazu am Ende von Beitrag 10.1.

„CRUD“ ist hier die Abkürzung für „create“, „read“, „update“ und „delete“.

Das getDocs-Ergebnis wird als Array von Dokumenten zurückgegeben, die üblicherweise als „Snapshot“ bezeichnet werden. Beachten Sie jedoch, dass dem getDocs-Funktionsaufruf das Schlüsselwort „await“ vorangestellt ist.

Das Schlüsselwort „await“ ist hier erforderlich, da in Javascript standardmäßig Anweisungen, die auf externe Datenquellen verweisen und deren Ausführung unvorhersehbare Zeit in Anspruch nehmen kann, asynchron verarbeitet werden. Das Schlüsselwort „await“ ermöglicht es Ihnen im Wesentlichen (obwohl dies eine grobe Vereinfachung darstellt), diese Anordnung außer Kraft zu setzen. Wenn Sie mehr Zeit haben, könnte es hilfreich sein, einen Blick auf „Eine einfache Anleitung zur Javascript-fetch()-API und dem Schlüsselwort „await““ zu werfen

Aber jetzt, zurück zu unserem Codeausschnitt oben, schauen Sie sich den Abschnitt an, der mit der const firebaseConfig-Anweisung beginnt.

Die firebaseConfig-Deklaration initialisiert ein Objekt, das die Konfigurationsdetails enthält, die zum Verbinden Ihrer Web-App mit Ihrem spezifischen Firebase-Projekt erforderlich sind. Es enthält verschiedene Schlüssel und Kennungen, die Firebase zum Auffinden und Authentifizieren Ihrer App verwendet. Die Einstellungen für Ihre bestimmte Webanwendung finden Sie unter „Projektübersicht/Projekteinstellungen“ auf der Firebase-Konsole. Die FirebaseConfig-Einstellungen in den Codebeispielen unten wurden „verschleiert“, da sie nur für mein Projekt gelten und nicht leichtfertig weitergegeben werden dürfen (mehr dazu in Kürze). Wenn Sie den folgenden Beispielcode ausprobieren, müssen Sie die FirebaseConfig-Einstellungen aus Ihrem eigenen Projekt kopieren.

Wenn firebaseConfig initialisiert ist, kann die Webanwendung die Datenbankvariable initialisieren, die für die const der Abfrage erforderlich ist. productsCollRef =collection(db, "products"); Aussage:

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Schließlich fragen Sie sich vielleicht, woher diese API-Funktionen kommen. Die Antwort ist, dass sie durch die drei Anweisungen oben im Codeblock von Orten in Ihrem Projekt importiert werden:

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

Hier wird auf „modulare Bibliotheken“ zugegriffen, um Funktionen für Ihren Code bereitzustellen. Benannte Funktionen wie die Sammlung werden aus einem übergeordneten Modul extrahiert, um die später im Code erforderlichen Referenzen zu erfüllen.

Aber dann stellt sich die Frage „Und wie kommen modulare Bibliotheken überhaupt in mein Projekt?“ Die Antwort ist natürlich, dass Sie sie dort platzieren müssen, und das Tool, das Sie dafür verwenden, ist das treue alte npm.

Zurück in einer VSCode Svelte-Test-Terminalsitzung (beenden Sie den Entwicklungsserver bei Bedarf mit ein paar Strg-C-Tastendrücken) und führen Sie die folgende Anweisung aus'

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Nach ein oder zwei Minuten (die Installation erfordert einen umfangreichen Download) können Sie Code ausführen, der eine Firestore-Datenbanksammlung herunterlädt. Sie wissen jedoch immer noch nicht, wie Sie dies in eine Svelte-Webanwendung einbetten können. Also weiter zur nächsten Frage...

3.5 Wie kann ich eine Svelte-Datei page.svelte erhalten, um Daten aus einer Firestore-Datenbank zu laden?

Das war ein langer Weg, aber bleiben Sie dran, Sie sind fast fertig.

Derzeit ist im