I artikeln, Introduktion till Firebase, gavs en översikt över Firebase. Du fick se hur du skapar ett Firebase-konto och skapar ett Firebase-projekt helt utan kostnad! I den här artikeln bygger du på det du lärde dig genom att sätta upp en NoSQL molnbaserad databas och sedan skapa en mycket enkel webbsida för att lägga till objekt till den. Databasen lagrar helt enkelt ordlekar tillsammans med en kategori och identifierare. Figur 1 visar webbsidan som kommer att användas för att lägga till objekten.
Figur 1: En webbsida som skriver till en Firestore NoSQL-databas.
Konfigurera din Cloud Firestore-databas i Firebase
Börja med att gå tillbaka till Firebase och skapa ett nytt projekt. Du kan komma till Firebase genom att gå till https://console.firebase.google.com/. Den här sidan ger dig möjlighet att lägga till ett nytt projekt, som visas i figur 2. Du kan hitta mer information om hur du skapar projektet i föregående artikel.
Figur 2: Lägger till ett nytt Firebase-projekt.
Jag har döpt mitt projekt till "The Pun Project". När du har skapat ett nytt projekt tas du till Firebase-konsolen som visas i figur 3.
Figur 3: Firebase-konsolen
I konsolen kommer du att kunna skapa databasen som webbsidan kommer att använda. Det första steget för att göra detta är att klicka på alternativet Databas i den vänstra navigeringsmenyn. Detta kommer att dra upp en skärm som visas i figur 4 som gör att du kan skapa en Cloud Firestore, som kommer att vara din NoSQL-databas.
Figur 4: Startskärmen för att skapa en Cloud Firestore
Genom att klicka på knappen Skapa databas börjar processen att gå igenom stegen för att skapa databasen. Det första beslutet som måste tas, som visas i figur 5, är om databasen ska startas i produktions- eller testläge. För att hålla den här artikeln enkel och fokuserad på att lägga till data kommer testläge att väljas. När en produktionsklar databasbas skapas, vill du lägga till mer säkerhet till den än vad som tillhandahålls i testläget.
Figur 5: Välja läge för din Firestore-databas
Med läget valt är nästa steg att ange platsen där du vill skapa databasen. Du skapar din databas i molnet, så du har ett val av platser för vilka servrar du vill använda. Genom att klicka på rullgardinsmenyn för Cloud Firestore-plats som visas i figur 6 kan du välja en multiregional eller regional plats. Jag föreslår att om du är i Nordamerika väljer du nam5 (us-central) plats. Om du är någon annanstans väljer du den region som ligger närmast din plats.
Figur 6: Välja en region för din Firestore-databas
Med din region vald klickar du på knappen Klar och Firebase tillhandahåller din Cloud Firestore-databas. När provisioneringen är klar kommer du att föras till databaskonsolsidan som visas i figur 7 där du kan börja använda din databas online.
Figur 7: Databaskonsolen i Firebase
Samlingar och dokument i NoSQL
Om du har följt med har du vid det här laget skapat en NoSQL molnbaserad databas i Firebases Cloud Firestore. Det ligger utanför den här artikelns räckvidd att gå in på detaljerna i NoSQL, men jag ska ge höjdpunkten av vad du behöver veta för att göra det exempeldatatillägg som utlovades i den här artikeln.
En NoSQL-databas består av samlingar som innehåller dokument . Ett dokument innehåller i princip de fält som du planerar att lagra. Till exempel, i den här artikeln skapas en samling ordvitsar. Puns-samlingen kommer att innehålla dokument. Varje dokument kommer att ha olika ordlek.
I Firebase kan du klicka på länken "+ Starta samling" som visas i figur 7 för att få fram en dialogruta som låter dig skapa puns-samlingen. Du uppmanas att lägga till ett samlings-ID enligt figur 8. I det här fallet kallar vi samlingen "Puns".
Figur 8: Skapa en Cloud Firestore-samling
När samlingen väl har skapats kommer du att kunna skapa dokument inom samlingen som visas i figur 9. Återigen är ett dokument i grunden en post i din NoSQL-databas. Eftersom detta är NoSQL finns det inga strikta regler som tvingar dig att se till att varje fält finns i varje dokument (post) eller att varje dokument i en samling till och med matchar. Detta överlåts åt dig att göra.
Figur 9: Lägga till ett dokument i en samling
Varje dokument du skapar måste ha ett dokument-ID. Du kan antingen ange detta ID, eller så kan du välja att lämna det tomt och ett ID kommer att genereras automatiskt. För att göra saker mer läsbara i exemplet med ordlekar, ger jag det första dokumentet ett ID på Pun0001.
När du använder konsolen för att lägga till dokument måste du för varje dokument ange inte bara datavärdena, utan även namnet på fälten och typerna. En rullgardinsmeny låter dig välja vilken datatyp du vill lägga till.
I figur 10 har två strängfält lagts till som kommer att användas för Pun-exemplet. Dessa är en Kategori och texten för ordleken (PunText ).
Figur 10: Konfigurera ett ordleksdokument.
När du klickar på knappen Spara i dialogrutan som visas i figur 10 kommer dokumentet (som i grunden är en post) att skapas som visas i figur 11. Vid denna tidpunkt har en Cloud Firestore-databas skapats på molnet och en post ( dokument) har lagts till! Mer exakt har en samling kallad "Puns" skapats som har ett dokument som heter "Pun0001" som innehåller fält som heter Category och PunText.
Figur 11: Cloud Firestore-databasen med ett dokument lagt till!
Observera att vid det här laget, om du vill lägga till ytterligare poster med hjälp av konsolen, klickar du på länken "+ Lägg till dokument" som visas i mitten av figur 11. Du kan sedan lägga till ytterligare ordvitsar med ID, kategorier och ordlek. Du vill vara noga med att se till att du använder samma fältnamn varje gång du lägger till en ny ordlek.
Även om du kanske tycker att det är tråkigt att behöva ange fältnamn igen, beror detta på flexibiliteten hos NoSQL. Ett sätt att komma runt detta är att skapa en webbapplikation som gör den delen av arbetet åt dig!
Notera:Du kommer att märka i figur 11 att det finns ett par ställen där du kan starta nya samlingar. Det ligger utanför ramen för denna artikel att gräva i strukturen för NoSQL-samlingar och dokument.
Skapa en webbapplikation för åtkomst till Cloud Firestore
Med din Cloud Firestore-inställning kan du nu lägga till data utanför Firebase-webbplatsen. För att göra detta måste du först hämta lite information från Firebase som gör att du kan koppla din webbapp till det Firebase-projekt du har skapat.
Börja med att klicka på länken Projektöversikt i den övre vänstra delen av navigeringsmenyn. Detta tar dig till en översiktssida för ditt projekt som visas i figur 12.
Figur 12: Översiktssidan för Firebase-projektet
På den här sidan ser du att det finns ikoner för fyra projekttyper som kan väljas. Dessa är för iOS, Android, webb och Unity. Klicka på ikonen för att indikera att en webbapp görs. Detta kommer att visa dialogrutan som visas i figur 13 som kommer att fråga efter ett namn för applikationen. Namnet som skapas används för att samordna webbappen du skapar med Firebase-projektet och funktioner i Firebase-projektet. För den här demon använder jag namnet "My Punny Web App" och klickar på knappen Registrera app.
När du klickar på den kommer du att presenteras med en skärm som innehåller HTML-kod som du lägger till i din webbapplikation. Den här HTML-koden är det som knyter Firebase till din app.
Figur 13: Firebase-koden för webbappen.
Du kommer att vilja kopiera den här koden för att klistra in på HTML-sidan som vi kommer att skapa senare i nästa steg i den här artikeln. Om du lämnar sidan som visas i figur 13 kan du alltid komma tillbaka till den här appkoden från Firebase-konsolen. Klicka bara på kugghjulet bredvid länken Projektöversikt i det övre högra hörnet och välj Projektinställningar. Den resulterande sidan kommer att innehålla information om ditt projekt
Skapa webbsidan/appen för att komma åt Firestore
Med allt inställt på Firebase-sidan är det dags att skapa webbsidan som gör att data kan läggas till. Lista 1 innehåller grundläggande HTML för att visa sidan som visades i figur 1 tidigare.
Anteckning 1: Grundläggande HTML för Punny-sidan.
<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>
Lista 1 är grundläggande HTML. Tre fält ställs in för att användaren ska kunna ange data. Var och en får ett ID som kommer att behövas för att associera den inmatade informationen till ett dokument som kommer att läggas till i Firestore. en knapp ingår också i en händelse för att lagra data. För närvarande har den funktionen inte skrivits; det är målet med den här artikeln! Jag har också inkluderat en länk till en extern JavaScript-fil som heter pun.js. Till en början är den filen tom, men det kommer att ändras inom kort!
Det är inom Lista 1 som du vill klistra in koden som kopierades från Firebase tidigare. Koden som visades i figur 13 ska klistras in nära slutet av din body-tagg, i det här fallet precis innan inkluderingen av skriptet puns.js. Jag har klistrat in koden för min ordleksapp i Listing 2.
Anteckning 2: HTML-sidan med Firestore-koden tillagd.
<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>
Med tillägget av skriptet till din HTML har du kopplat din applikation till Firebase. Du behöver dock lägga till ytterligare en rad kod. Den genererade koden tillhandahåller anslutningarna till Firebase, men du måste lägga till en ytterligare länk för att få koden som kommer åt Cloud Firestore-databasen i Firebase. Du vill lägga till följande skriptkällrad till listorna:
Detta kan läggas till direkt efter samtalet till:
Nästa steg är att lägga till logiken som kommer att associera de angivna fälten från användaren med fälten som ska läggas till i Firestore-databasen. Detta kommer att göras i filen puns.js för att hålla koden ren.
Processen är att först skapa en databasvariabel som kommer att kopplas till Firebase Cloud Firestore-databasen. Då kommer det att behöva skapas variabler som kan fyllas med de värden användaren angett på vår sida. Detta kommer att göras med vanliga document.getElementById()-anrop. Slutligen måste variabeln som lyste från webbsidan läggas till i Cloud Firestore-databasen som fält i ett dokument i Puns-samlingen. Lista 3 visar JavaScript som kan åstadkomma allt detta.
Anteckning 3: JavaScript-filen 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);
});
}
Observera att i listning 3, att databasen skapades med variabeln som heter db. Denna variabel används sedan för att skapa det nya dokumentet (posten) genom att ange namnet på samlingen som kallades Puns i processen som visas i figur 8. Detta följs av dokumentnamnet, som i det här fallet är vårt ordleks-ID som samlats in från användaren och lägg in i variabeln, inputPun. Inom dokumentet läggs två fält till, vilket görs inom uppsättningen. För att lägga till fälten listas namnet på fältet, sedan ett kolon och slutligen strängvärdet som ska läggas till. I det här fallet läggs inputCategory till i fältet Category och inputText läggs till i fältet PunText.
Listan innehåller också en del testning och fellogik för att logga ett meddelande till konsolen. Om du öppnar utvecklarkonsolen i din webbläsare, kommer du att se meddelandet "Dokument lyckats" visas när ett dokument läggs till i din Cloud Firestore som visas i figur 14.
Figur 14: Ett framgångsrikt tillagt dokument.
Det kan bekräftas att dokumentet lades till genom att gå tillbaka till projektet i Firebase-konsolen och titta på databasen (görs genom att klicka på Database i den vänstra navigeringsmenyn). Figur 15 visar att tillägget av den nya ordleken lyckades.
Figur 15: Puns-samlingen med det nya pun002-dokumentet
Slutar ihop det
Mycket behandlades i den här artikeln om att lägga till dokument till en Firebase Cloud Firestore NoSQL-databas. Du lärde dig hur du gör detta från både konsolen och från en enkel webbapp. Detta är bara en start för att visa hur enkelt det kan vara att lägga till. Med det sagt, lägga till i bara ett steg i ett CRUD-system. Det finns fortfarande mer att lära! Åh, och om du gillar ordlekar, kolla in min bok, Punny or Not Book of Puns, tillgänglig på Amazon!
# # #