Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Hinzufügen von Daten zu einer Cloud Firestore-Datenbank

Im Artikel Einführung in Firebase wurde ein Überblick über Firebase gegeben. Ihnen wurde gezeigt, wie Sie kostenlos ein Firebase-Konto einrichten und ein Firebase-Projekt erstellen! In diesem Artikel bauen Sie auf dem auf, was Sie gelernt haben, indem Sie eine Cloud-basierte NoSQL-Datenbank einrichten und dann eine sehr einfache Webseite erstellen, um ihr Elemente hinzuzufügen. Die Datenbank speichert einfach Wortspiele zusammen mit einer Kategorie und einem Identifikator. Abbildung 1 zeigt die Webseite, die zum Hinzufügen der Elemente verwendet wird.

Abbildung 1: Eine Webseite, die in eine Firestore NoSQL-Datenbank schreibt.

Einrichten Ihrer Cloud Firestore-Datenbank in Firebase

Kehren Sie zunächst zu Firebase zurück und erstellen Sie ein neues Projekt. Sie können zu Firebase gelangen, indem Sie zu https://console.firebase.google.com/ gehen. Auf dieser Seite haben Sie die Möglichkeit, ein neues Projekt hinzuzufügen, wie in Abbildung 2 gezeigt. Weitere Informationen zum Erstellen des Projekts finden Sie im vorherigen Artikel.

Abbildung 2: Hinzufügen eines neuen Firebase-Projekts.

Ich habe mein Projekt „The Pun Project“ genannt. Sobald Sie ein neues Projekt erstellt haben, werden Sie zur Firebase-Konsole weitergeleitet, wie in Abbildung 3 gezeigt.

Abbildung 3: Die Firebase-Konsole

In der Konsole können Sie die Datenbank erstellen, die die Webseite verwenden wird. Der erste Schritt dazu besteht darin, im linken Navigationsmenü auf die Option Datenbank zu klicken. Dadurch wird ein Bildschirm wie in Abbildung 4 angezeigt, mit dem Sie einen Cloud Firestore erstellen können, der Ihre NoSQL-Datenbank sein wird.

Abbildung 4: Der Startbildschirm zum Erstellen eines Cloud Firestore

Wenn Sie auf die Schaltfläche „Datenbank erstellen“ klicken, beginnt der Prozess, durch die Schritte zum Erstellen der Datenbank zu gehen. Als erstes muss entschieden werden, wie in Abbildung 5 dargestellt, ob die Datenbank im Produktiv- oder im Testmodus gestartet wird. Um diesen Artikel einfach zu halten und sich auf das Hinzufügen von Daten zu konzentrieren, wird der Testmodus ausgewählt. Wenn eine produktionsbereite Datenbankbasis erstellt wird, möchten Sie ihr sicher mehr Sicherheit hinzufügen als im Testmodus bereitgestellt wird.

Abbildung 5: Auswählen des Modus für Ihre Firestore-Datenbank

Wenn der Modus ausgewählt ist, besteht der nächste Schritt darin, den Speicherort anzugeben, an dem Sie die Datenbank erstellen möchten. Sie erstellen Ihre Datenbank in der Cloud, sodass Sie die Standorte auswählen können, welche Server Sie verwenden möchten. Durch Klicken auf das in Abbildung 6 gezeigte Drop-down-Menü „Cloud Firestore-Standort“ können Sie einen überregionalen oder regionalen Standort auswählen. Ich schlage vor, dass Sie, wenn Sie sich in Nordamerika befinden, den Standort nam5 (us-central) auswählen. Wenn Sie woanders sind, wählen Sie die Region aus, die Ihrem Standort am nächsten liegt.

Abbildung 6: Auswählen einer Region für Ihre Firestore-Datenbank

Klicken Sie bei ausgewählter Region auf die Schaltfläche „Fertig“ und Firebase stellt Ihre Cloud Firestore-Datenbank bereit. Sobald die Bereitstellung abgeschlossen ist, werden Sie zur Seite der Datenbankkonsole weitergeleitet, wie in Abbildung 7 gezeigt, wo Sie beginnen können, Ihre Datenbank online zu verwenden.

Abbildung 7: Die Datenbankkonsole in Firebase

Sammlungen und Dokumente in NoSQL

Wenn Sie dem gefolgt sind, haben Sie an dieser Stelle eine NoSQL Cloud-basierte Datenbank in Cloud Firestore von Firebase erstellt. Es würde den Rahmen dieses Artikels sprengen, auf die Details von NoSQL einzugehen, aber ich werde Ihnen die Highlights dessen geben, was Sie wissen müssen, um das in diesem Artikel versprochene Hinzufügen von Beispieldaten durchzuführen.

Eine NoSQL-Datenbank besteht aus Sammlungen die Dokumente enthalten . Ein Dokument enthält im Wesentlichen die Felder, die Sie speichern möchten. In diesem Artikel wird beispielsweise eine Sammlung von Wortspielen erstellt. Die Puns-Sammlung wird Dokumente enthalten. Jedes Dokument wird ein anderes Wortspiel sein.

In Firebase können Sie auf den in Abbildung 7 gezeigten Link „+ Sammlung starten“ klicken, um ein Dialogfeld aufzurufen, in dem Sie die Wortspielsammlung erstellen können. Sie werden wie in Abbildung 8 gezeigt aufgefordert, eine Sammlungs-ID hinzuzufügen. In diesem Fall nennen wir die Sammlung "Wortspiele".

Abbildung 8: Erstellen einer Cloud Firestore-Sammlung

Sobald die Sammlung erstellt ist, können Sie Dokumente innerhalb der Sammlung erstellen, wie in Abbildung 9 gezeigt. Auch hier ist ein Dokument im Grunde ein Datensatz in Ihrer NoSQL-Datenbank. Da es sich um NoSQL handelt, gibt es keine strengen Regeln, die Sie zwingen, sicherzustellen, dass jedes Feld in jedem Dokument (Datensatz) vorhanden ist oder dass jedes Dokument innerhalb einer Sammlung überhaupt übereinstimmt. Dies bleibt Ihnen überlassen.

Abbildung 9: Hinzufügen eines Dokuments zu einer Sammlung

Jedes Dokument, das Sie erstellen, muss eine Dokument-ID haben. Sie können diese ID entweder eingeben oder leer lassen und es wird automatisch eine ID generiert. Um die Dinge im Beispiel mit Wortspielen besser lesbar zu halten, gebe ich dem ersten Dokument die ID Pun0001.

Beim Verwenden der Konsole zum Hinzufügen von Dokumenten müssen Sie für jedes Dokument nicht nur die Datenwerte, sondern auch die Namen der Felder und die Typen angeben. Über eine Dropdown-Liste können Sie den Datentyp auswählen, den Sie hinzufügen möchten.

In Abbildung 10 wurden zwei Zeichenfolgenfelder hinzugefügt, die für das Wortspielbeispiel verwendet werden. Dies sind eine Kategorie und den Text für das Wortspiel (PunText ).

Abbildung 10: Ein Wortspieldokument einrichten.

Wenn in dem in Abbildung 10 gezeigten Dialogfeld auf die Schaltfläche Speichern geklickt wird, wird das Dokument (das im Grunde ein Datensatz ist) wie in Abbildung 11 gezeigt erstellt. An diesem Punkt wurde eine Cloud Firestore-Datenbank in der Cloud erstellt und ein Datensatz ( Dokument) wurde hinzugefügt! Genauer gesagt wurde eine Sammlung namens „Puns“ erstellt, die ein Dokument namens „Pun0001“ enthält, das Felder namens Category und PunText enthält.

Abbildung 11: Die Cloud Firestore-Datenbank mit einem hinzugefügten Dokument!

Beachten Sie, dass Sie an dieser Stelle, wenn Sie zusätzliche Datensätze mit der Konsole hinzufügen möchten, auf den Link „+ Dokument hinzufügen“ klicken würden, der in der Mitte von Abbildung 11 gezeigt wird. Sie könnten dann zusätzliche Wortspiele mit IDs, Kategorien und Wortspieltext hinzufügen. Sie sollten darauf achten, dass Sie jedes Mal, wenn Sie ein neues Wortspiel hinzufügen, dieselben Feldnamen verwenden.

Auch wenn Sie vielleicht denken, dass es mühsam ist, Feldnamen erneut eingeben zu müssen, liegt dies an der Flexibilität von NoSQL. Eine Möglichkeit, dies zu umgehen, besteht darin, eine Webanwendung zu erstellen, die diesen Teil der Arbeit für Sie erledigt!

Hinweis:Sie werden in Abbildung 11 feststellen, dass es einige Stellen gibt, an denen Sie neue Sammlungen starten können. Es würde den Rahmen dieses Artikels sprengen, sich mit der Struktur von NoSQL-Sammlungen und -Dokumenten zu befassen.

Erstellen einer Webanwendung für den Zugriff auf Cloud Firestore

Wenn Ihr Cloud Firestore eingerichtet ist, können Sie jetzt Daten von außerhalb der Firebase-Site hinzufügen. Dazu müssen Sie zunächst einige Informationen von Firebase abrufen, mit denen Sie Ihre Webanwendung dem von Ihnen erstellten Firebase-Projekt zuordnen können.

Beginnen Sie mit einem Klick auf den Link Projektübersicht im oberen linken Teil des Navigationsmenüs. Dadurch gelangen Sie zu einer Übersichtsseite für Ihr Projekt, wie in Abbildung 12 gezeigt.

Abbildung 12: Übersichtsseite des Firebase-Projekts

Auf dieser Seite sehen Sie, dass es Symbole für vier Projekttypen gibt, die ausgewählt werden können. Diese sind für iOS, Android, Web und Unity. Klicken Sie auf das Symbol , um anzuzeigen, dass eine Webanwendung ausgeführt wird. Dadurch wird der in Abbildung 13 gezeigte Dialog angezeigt, der nach einem Namen für die Anwendung fragt. Der erstellte Name wird verwendet, um die von Ihnen erstellte Web-App mit dem Firebase-Projekt und den Funktionen innerhalb des Firebase-Projekts zu koordinieren. Für diese Demo verwende ich den Namen „My Punny Web App“ und klicke auf die Schaltfläche App registrieren.

Sobald Sie darauf geklickt haben, wird Ihnen ein Bildschirm mit HTML-Code angezeigt, den Sie Ihrer Webanwendung hinzufügen. Dieser HTML-Code verbindet Firebase mit Ihrer App.

Abbildung 13: Der Firebase-Code für die Web-App.

Kopieren Sie diesen Code, um ihn in die HTML-Seite einzufügen, die wir später in den nächsten Schritten dieses Artikels erstellen werden. Wenn Sie die in Abbildung 13 gezeigte Seite verlassen, können Sie jederzeit über die Firebase-Konsole zu diesem App-Code zurückkehren. Klicken Sie einfach auf das Zahnrad neben dem Link Projektübersicht in der oberen rechten Ecke und wählen Sie Projekteinstellungen. Die resultierende Seite enthält Informationen zu Ihrem Projekt

Erstellen der Webseite/App für den Zugriff auf Firestore

Nachdem alles auf der Firebase-Seite eingerichtet ist, ist es an der Zeit, die Webseite zu erstellen, auf der Daten hinzugefügt werden können. Listing 1 enthält grundlegendes HTML zum Anzeigen der Seite, die zuvor in Abbildung 1 gezeigt wurde.

Auflistung 1: Basis-HTML für die Punny-Seite.

<html> 
<head> 
<title>Punny or Not</title> 
</head> 
  
<body> 
<div class="main-form"> 
 <h1 id="punTimes">Punny or Not!</h1> 
    Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br /> 
    Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br /> 
    Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br /> 
  
<br /><br /> 
 <button id="saveButton" onclick="storeData()" >Submit</button> 
</div> 
  
<script src="./pun.js"></script> 
  
</body> 
</html>

Listing 1 ist einfaches HTML. Drei Felder werden eingerichtet, damit der Benutzer Daten eingeben kann. Jeder erhält eine ID, die benötigt wird, um die eingegebenen Daten einem Dokument zuzuordnen, das dem Firestore hinzugefügt wird. Bei einem Ereignis ist auch eine Schaltfläche zum Speichern der Daten enthalten. Derzeit wurde diese Funktion nicht geschrieben; Das ist das Ziel dieses Artikels! Ich habe auch einen Link zu einer externen JavaScript-Datei namens pun.js eingefügt. Anfangs ist diese Datei leer, aber das wird in Kürze geändert!

In Listing 1 möchten Sie den Code einfügen, der zuvor aus Firebase kopiert wurde. Der in Abbildung 13 gezeigte Code sollte nahe dem Ende Ihres Body-Tags eingefügt werden, in diesem Fall direkt vor dem Einfügen des Skripts „puns.js“. Ich habe den Code für meine Wortspiel-App in Listing 2 eingefügt.

Auflistung 2: Die HTML-Seite mit dem hinzugefügten Firestore-Code.

<html> 
<head> 
    <title>Punny or Not</title> 
</head> 
  
<body> 
<div class="main-form"> 
 <h1 id="punTimes">Punny or Not!</h1> 
    Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br /> 
    Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br /> 
    Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br /> 
  
<br /><br /> 
 <button id="saveButton" onclick="storeData()" >Submit</button> 
</div> 
  
<!-- The core Firebase JS SDK is always required and must be listed first --> 
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script> 
  
<!-- TODO: Add SDKs for Firebase products that you want to use 
     https://firebase.google.com/docs/web/setup#available-libraries --> 
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script> 
  
<script> 
  // Your web app's Firebase configuration 
  var firebaseConfig = { 
    apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o", 
    authDomain: "the-pun-project.firebaseapp.com", 
    databaseURL: "https://the-pun-project.firebaseio.com", 
    projectId: "the-pun-project", 
    storageBucket: "the-pun-project.appspot.com", 
    messagingSenderId: "354041199852", 
    appId: "1:354041199852:web:4f9a613485174688f0f9c9", 
    measurementId: "G-4672MVCRK2" 
  }; 
  // Initialize Firebase 
  firebase.initializeApp(firebaseConfig); 
  firebase.analytics(); 
</script> 
  
<script src="./pun.js"></script> 
  
</body> 
</html>

Mit dem Hinzufügen des Skripts zu Ihrem HTML haben Sie Ihre Anwendung für den Zugriff auf Firebase verdrahtet. Sie müssen jedoch eine weitere Codezeile hinzufügen. Während der generierte Code die Verbindungen zu Firebase bereitstellt, müssen Sie einen zusätzlichen Link hinzufügen, um den Code abzurufen, der auf die Cloud Firestore-Datenbank in Firebase zugreift. Sie sollten die folgende Skript-Quellzeile zu den Auflistungen hinzufügen:

Dies kann direkt nach dem Aufruf von:

hinzugefügt werden

Der nächste Schritt besteht darin, die Logik hinzuzufügen, die die eingegebenen Felder des Benutzers mit den Feldern verknüpft, die der Firestore-Datenbank hinzugefügt werden sollen. Dies geschieht in der Datei puns.js, um den Code sauber zu halten.

Der Prozess besteht darin, zunächst eine Datenbankvariable zu erstellen, die an die Firebase Cloud Firestore-Datenbank gebunden wird. Dann müssen Variablen erstellt werden, die mit den Werten gefüllt werden können, die der Benutzer auf unserer Seite eingegeben hat. Dies erfolgt mit Standardaufrufen von document.getElementById(). Schließlich muss die Variable, die von der Webseite glänzt, der Cloud Firestore-Datenbank als Felder in einem Dokument innerhalb der Puns-Sammlung hinzugefügt werden. Listing 3 zeigt das JavaScript, das all dies leisten kann.

Auflistung 3: Die JavaScript-Datei pun.js

var db = firebase.firestore();
 
function storeData() {
 
  var inputPun = document.getElementById("PunID").value;
  var inputCategory = document.getElementById("Category").value;
  var inputText = document.getElementById("PunText").value;
 
     db.collection("Puns").doc(inputPun).set({
         Category: inputCategory,
         PunText: inputText
     })
     .then(function() {
         console.log("Doc successful");
     })
     .catch(function(error) {
        console.error("Error writing doc", error);
     });
}

Beachten Sie, dass in Listing 3 die Datenbank mit der Variablen namens db erstellt wurde. Diese Variable wird dann verwendet, um das neue Dokument (Datensatz) zu erstellen, indem der Name der Sammlung angegeben wird, die in dem in Abbildung 8 gezeigten Prozess Wortspiele genannt wurde. Darauf folgt der Dokumentname, der in diesem Fall unsere Wortspiel-ID ist, aus der wir gesammelt haben den Benutzer und in die Variable inputPun einfügen. Innerhalb des Dokuments werden zwei Felder hinzugefügt, was innerhalb des Sets erfolgt. Um die Felder hinzuzufügen, wird der Name des Felds aufgelistet, dann ein Doppelpunkt und schließlich der hinzuzufügende Zeichenfolgenwert. In diesem Fall wird inputCategory zum Category-Feld und inputText zum PunText-Feld hinzugefügt.

Die Auflistung enthält auch einige Test- und Fehlerlogik zum Protokollieren einer Nachricht an die Konsole. Wenn Sie die Entwicklerkonsole Ihres Browsers öffnen, wird die Meldung „Dokument erfolgreich“ angezeigt, wenn ein Dokument zu Ihrem Cloud Firestore hinzugefügt wird, wie in Abbildung 14 gezeigt.

Abbildung 14: Ein erfolgreich hinzugefügtes Dokument.

Sie können bestätigen, dass das Dokument hinzugefügt wurde, indem Sie in der Firebase-Konsole zum Projekt zurückkehren und sich die Datenbank ansehen (durch Klicken auf Datenbank im linken Navigationsmenü). Abbildung 15 zeigt, dass das Hinzufügen des neuen Wortspiels erfolgreich war.

Abbildung 15: Die Puns-Sammlung mit dem neuen Dokument pun002

Einpacken

In diesem Artikel zum Hinzufügen von Dokumenten zu einer Firebase Cloud Firestore NoSQL-Datenbank wurde viel behandelt. Sie haben gelernt, wie Sie dies sowohl über die Konsole als auch über eine einfache Web-App tun. Dies ist nur ein Anfang, um zu zeigen, wie einfach das Hinzufügen sein kann. Allerdings muss in einem CRUD-System nur ein Schritt hinzugefügt werden. Es gibt noch mehr zu lernen! Oh, und wenn Sie Wortspiele mögen, sehen Sie sich mein Buch Punny or Not Book of Puns an, das bei Amazon erhältlich ist!

# # #