In het artikel Inleiding tot Firebase werd een overzicht gegeven van Firebase. U heeft laten zien hoe u gratis een Firebase-account kunt opzetten en een Firebase-project kunt maken! In dit artikel bouw je voort op wat je hebt geleerd door een NoSQL Cloud-gebaseerde database op te zetten en vervolgens een heel eenvoudige webpagina te maken om er items aan toe te voegen. De database zal eenvoudig woordspelingen opslaan, samen met een categorie en identificatie. Afbeelding 1 toont de webpagina die zal worden gebruikt om de items toe te voegen.
Figuur 1: Een webpagina die schrijft naar een Firestore NoSQL-database.
Uw Cloud Firestore-database instellen in Firebase
Ga om te beginnen terug naar Firebase en maak een nieuw project. U kunt Firebase bereiken door naar https://console.firebase.google.com/ te gaan. Deze pagina geeft je de mogelijkheid om een nieuw project toe te voegen, zoals weergegeven in figuur 2. Meer informatie over het aanmaken van het project vind je in het vorige artikel.
Figuur 2: Een nieuw Firebase-project toevoegen.
Ik heb mijn project "The Pun Project" genoemd. Nadat u een nieuw project heeft gemaakt, wordt u naar de Firebase-console geleid, zoals weergegeven in afbeelding 3.
Figuur 3: De Firebase-console
In de console kunt u de database maken die de webpagina zal gebruiken. De eerste stap om dit te doen, is door op de optie Database in het navigatiemenu aan de linkerkant te klikken. Hierdoor verschijnt een scherm zoals weergegeven in Afbeelding 4 waarmee u een Cloud Firestore kunt maken, wat uw NoSQL-database zal zijn.
Figuur 4: Het startscherm voor het maken van een Cloud Firestore
Als u op de knop Database maken klikt, begint het proces van het doorlopen van de stappen voor het maken van de database. De eerste beslissing die moet worden genomen, zoals weergegeven in figuur 5, is of de database in productie- of testmodus wordt gestart. Om dit artikel eenvoudig en gericht te houden op het toevoegen van gegevens, wordt de testmodus geselecteerd. Wanneer een productieklare database is gemaakt, wilt u er meer beveiliging aan toevoegen dan in de testmodus wordt geboden.
Figuur 5: De modus voor uw Firestore-database selecteren
Als de modus is geselecteerd, is de volgende stap het opgeven van de locatie waar u de database wilt maken. U maakt uw database in de Cloud, dus u heeft de keuze uit locaties welke servers u wilt gebruiken. Door op de Cloud Firestore-locatievervolgkeuzelijst in Afbeelding 6 te klikken, kunt u een multiregionale of regionale locatie kiezen. Ik stel voor dat als je in Noord-Amerika bent, je de nam5 (us-central) locatie selecteert. Als je ergens anders bent, kies dan de regio die het dichtst bij je locatie ligt.
Figuur 6: Een regio selecteren voor uw Firestore-database
Klik met uw regio geselecteerd op de knop Gereed en Firebase zal uw Cloud Firestore-database inrichten. Zodra de inrichting is voltooid, wordt u naar de databaseconsole-pagina geleid, zoals weergegeven in afbeelding 7, waar u uw database online kunt gaan gebruiken.
Figuur 7: De databaseconsole in Firebase
Collecties en documenten in NoSQL
Als je het hebt gevolgd, heb je op dit moment een NoSQL Cloud-gebaseerde database gemaakt in Firebase's Cloud Firestore. Het valt buiten het bestek van dit artikel om in te gaan op de details van NoSQL, maar ik zal het hoogtepunt geven van wat u moet weten om de voorbeeldgegevens toe te voegen die in dit artikel is beloofd.
Een NoSQL-database bestaat uit verzamelingen die documenten . bevatten . Een document bevat in principe de velden die u wilt opslaan. In dit artikel wordt bijvoorbeeld een verzameling woordspelingen gemaakt. De verzameling Puns zal documenten bevatten. Elk document zal een andere woordspeling zijn.
In Firebase kunt u op de link "+ Start verzameling" klikken die wordt weergegeven in Afbeelding 7 om een dialoogvenster te openen waarmee u de verzameling woordspelingen kunt maken. U wordt gevraagd, zoals weergegeven in Afbeelding 8, om een collectie-ID toe te voegen. In dit geval noemen we de verzameling 'Puns'.
Figuur 8: Een Cloud Firestore-verzameling maken
Zodra de verzameling is gemaakt, kunt u documenten binnen de verzameling maken, zoals weergegeven in afbeelding 9. Nogmaals, een document is in feite een record in uw NoSQL-database. Omdat dit NoSQL is, zijn er geen strikte regels die je dwingen om ervoor te zorgen dat elk veld in elk document (record) staat of dat elk document binnen een verzameling zelfs overeenkomt. Dit wordt aan jou overgelaten.
Figuur 9: Een document aan een verzameling toevoegen
Elk document dat u aanmaakt, moet een document-ID hebben. U kunt deze ID invoeren of u kunt ervoor kiezen om deze leeg te laten en er wordt automatisch een ID gegenereerd. Om de zaken in het voorbeeld met woordspelingen beter leesbaar te houden, geef ik het eerste document een ID van Pun0001.
Als u de console gebruikt om documenten toe te voegen, moet u voor elk document niet alleen de gegevenswaarden specificeren, maar ook de naam van de velden en de typen. Met een vervolgkeuzelijst kunt u het gegevenstype selecteren dat u wilt toevoegen.
In figuur 10 zijn twee stringvelden toegevoegd die zullen worden gebruikt voor het Pun-voorbeeld. Dit zijn een Categorie en de tekst voor de woordspeling (PunText ).
Figuur 10: Een woordspelingdocument opzetten.
Wanneer op de knop Opslaan wordt geklikt in het dialoogvenster dat wordt weergegeven in Afbeelding 10, wordt het document (dat in feite een record is) gemaakt zoals weergegeven in Afbeelding 11. Op dit punt is een Cloud Firestore-database gemaakt op de Cloud en een record ( document) is toegevoegd! Nauwkeuriger gezegd, er is een verzameling met de naam "Puns" gemaakt met een document met de naam "Pun0001" met velden met de naam Categorie en PunText.
Figuur 11: De Cloud Firestore-database met een toegevoegd document!
Merk op dat u op dit punt, als u extra records wilt toevoegen met behulp van de console, op de link "+ Document toevoegen" in het midden van Afbeelding 11 zou klikken. U kunt dan extra woordspelingen toevoegen met ID's, categorieën en woordspelingtekst. U moet ervoor zorgen dat u elke keer dat u een nieuwe woordspeling toevoegt, dezelfde veldnamen gebruikt.
Hoewel je misschien denkt dat het vervelend is om veldnamen opnieuw in te voeren, komt dit door de flexibiliteit van NoSQL. Een manier om dit te omzeilen is door een webtoepassing te maken die dat deel van het werk voor u doet!
Opmerking:in Afbeelding 11 ziet u dat er een aantal plaatsen zijn waar u nieuwe verzamelingen kunt starten. Het valt buiten het bestek van dit artikel om in de structuur van NoSQL-verzamelingen en -documenten te graven.
Een webtoepassing maken voor toegang tot Cloud Firestore
Met uw Cloud Firestore ingesteld, kunt u nu gegevens van buiten de Firebase-site toevoegen. Om dit te doen, moet je eerst wat informatie uit Firebase halen waarmee je je web-app kunt koppelen aan het Firebase-project dat je hebt gemaakt.
Begin door op de link Projectoverzicht linksboven in het navigatiemenu te klikken. Dit brengt u naar een overzichtspagina voor uw project zoals weergegeven in Afbeelding 12.
Figuur 12: De Firebase Project-overzichtspagina
Op deze pagina ziet u dat er pictogrammen zijn voor vier projecttypen die kunnen worden geselecteerd. Deze zijn voor iOS, Android, web en Unity. Klik op het -pictogram om aan te geven dat er een web-app wordt uitgevoerd. Hierdoor wordt het dialoogvenster weergegeven in Afbeelding 13 weergegeven waarin om een naam voor de toepassing wordt gevraagd. De naam die wordt gemaakt, wordt gebruikt om de web-app die u maakt te coördineren met het Firebase-project en functies binnen het Firebase-project. Voor deze demo gebruik ik de naam "My Punny Web App" en klik ik op de knop Registreer app.
Nadat u erop heeft geklikt, krijgt u een scherm te zien met HTML-code die u aan uw webtoepassing kunt toevoegen. Deze HTML-code verbindt Firebase met uw app.
Figuur 13: De Firebase-code voor de web-app.
U wilt deze code kopiëren om in de HTML-pagina te plakken die we later in de volgende stappen van dit artikel zullen maken. Als u de pagina verlaat die wordt weergegeven in Afbeelding 13, kunt u altijd teruggaan naar deze app-code vanuit de Firebase-console. Klik eenvoudig op tandwiel naast de link Projectoverzicht in de rechterbovenhoek en selecteer Projectinstellingen. De resulterende pagina bevat informatie over uw project
De webpagina/app maken voor toegang tot Firestore
Nu alles aan de Firebase-kant is ingesteld, is het tijd om de webpagina te maken waarop gegevens kunnen worden toegevoegd. Listing 1 bevat basis-HTML voor het weergeven van de pagina die eerder in figuur 1 werd getoond.
Vermelding 1: Basis HTML voor de Punny-pagina.
<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 is eenvoudige HTML. Er worden drie velden ingesteld waarin de gebruiker gegevens kan invoeren. Elk krijgt een ID die nodig is om de ingevoerde gegevens te koppelen aan een document dat aan de Firestore wordt toegevoegd. er is ook een knop bij een gebeurtenis om de gegevens op te slaan. Momenteel is die functie niet geschreven; dat is het doel van dit artikel! Ik heb ook een link toegevoegd naar een extern JavaScript-bestand met de naam pun.js. Aanvankelijk is dat bestand leeg, maar dat zal binnenkort worden gewijzigd!
Het is binnen Listing 1 dat u de code wilt plakken die eerder uit Firebase is gekopieerd. De code die in figuur 13 wordt getoond, moet aan het einde van je body-tag worden geplakt, in dit geval net voor het opnemen van het puns.js-script. Ik heb de code voor mijn woordspeling-app in Listing 2 geplakt.
Vermelding 2: De html-pagina met de Firestore-code toegevoegd.
<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>
Met de toevoeging van het script aan uw HTML, hebt u uw toepassing bedraad om toegang te krijgen tot Firebase. U moet echter nog een regel code toevoegen. Hoewel de gegenereerde code de verbindingen met Firebase levert, moet u een extra link toevoegen om de code te krijgen die toegang heeft tot de Cloud Firestore-database in Firebase. U wilt de volgende scriptbronregel aan de lijsten toevoegen:
Dit kan direct na de oproep worden toegevoegd aan:
De volgende stap is het toevoegen van de logica die de ingevoerde velden van de gebruiker koppelt aan de velden die aan de Firestore-database moeten worden toegevoegd. Dit wordt gedaan in het puns.js-bestand om de code schoon te houden.
Het proces is om eerst een databasevariabele te maken die wordt gekoppeld aan de Firebase Cloud Firestore-database. Er moeten dan variabelen worden gemaakt die kunnen worden gevuld met de waarden die de gebruiker op onze pagina heeft ingevoerd. Dit wordt gedaan met standaard document.getElementById()-aanroepen. Ten slotte moet de variabele die van de webpagina straalde, worden toegevoegd aan de Cloud Firestore-database als velden in een document binnen de Puns-verzameling. Lijst 3 toont het JavaScript dat dit allemaal kan bereiken.
Vermelding 3: Het pun.js JavaScript-bestand
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);
});
}
Merk op dat in Listing 3 de database is gemaakt met de variabele db. Deze variabele wordt vervolgens gebruikt om het nieuwe document (record) te maken door de naam op te geven van de verzameling die Puns werd genoemd in het proces dat wordt getoond in Afbeelding 8. Dit wordt gevolgd door de documentnaam, in dit geval onze woordspeling-ID verzameld uit de gebruiker en zet het in de variabele inputPun. Binnen het document worden twee velden toegevoegd, wat binnen de set gebeurt. Om de velden toe te voegen, wordt de naam van het veld weergegeven, dan een dubbele punt en tot slot de toe te voegen stringwaarde. In dit geval wordt inputCategory toegevoegd aan het veld Categorie en inputText wordt toegevoegd aan het veld PunText.
De lijst bevat ook enkele test- en foutlogica om een bericht naar de console te loggen. Als u de ontwikkelaarsconsole van uw browser opent, ziet u het bericht "Doc succesvol" verschijnen wanneer een document wordt toegevoegd aan uw Cloud Firestore, zoals weergegeven in Afbeelding 14.
Figuur 14: Een succesvol toegevoegd document.
U kunt bevestigen dat het document is toegevoegd door terug te gaan naar het project in de Firebase-console en naar de database te kijken (gedaan door te klikken op Database in het linkernavigatiemenu). Afbeelding 15 laat zien dat de toevoeging van de nieuwe woordspeling succesvol was.
Figuur 15: De Puns-collectie met het nieuwe pun002-document
Het afronden
In dit artikel is veel besproken over het toevoegen van documenten aan een Firebase Cloud Firestore NoSQL-database. Je hebt geleerd hoe je dit kunt doen vanuit zowel de Console als vanuit een eenvoudige web-app. Dit is slechts een begin om te laten zien hoe eenvoudig toevoegen kan zijn. Dat gezegd hebbende, het toevoegen van slechts één stap in een CRUD-systeem. Er valt nog meer te leren! Oh, en als je van woordspelingen houdt, bekijk dan mijn boek, Punny or Not Book of Puns, beschikbaar op Amazon!
# # #