I artiklen, Introduktion til Firebase, blev der givet en oversigt over Firebase. Du fik vist, hvordan du opretter en Firebase-konto og opretter et Firebase-projekt helt uden omkostninger! I denne artikel bygger du på, hvad du har lært ved at oprette en NoSQL Cloud-baseret database og derefter oprette en meget simpel webside for at tilføje elementer til den. Databasen vil simpelthen gemme ordspil sammen med en kategori og identifikator. Figur 1 viser den webside, der vil blive brugt til at tilføje elementerne.
Figur 1: En webside, der skriver til en Firestore NoSQL-database.
Opsætning af din Cloud Firestore-database i Firebase
For at begynde skal du vende tilbage til Firebase og oprette et nyt projekt. Du kan komme til Firebase ved at gå til https://console.firebase.google.com/. Denne side giver dig mulighed for at tilføje et nyt projekt, som vist i figur 2. Du kan finde flere oplysninger om oprettelse af projektet i den forrige artikel.
Figur 2: Tilføjer et nyt Firebase-projekt.
Jeg har kaldt mit projekt "The Pun Project". Når du har oprettet et nyt projekt, føres du til Firebase-konsollen som vist i figur 3.
Figur 3: Firebase-konsollen
I konsollen vil du være i stand til at oprette den database, som websiden vil bruge. Det første skridt til at gøre dette er at klikke på Database-indstillingen i venstre navigationsmenu. Dette vil trække en skærm op som vist i figur 4, der giver dig mulighed for at oprette en Cloud Firestore, som vil være din NoSQL-database.
Figur 4: Startskærmen til oprettelse af en Cloud Firestore
Ved at klikke på knappen Opret database starter processen med at gå gennem trinene til oprettelse af databasen. Den første beslutning, der skal tages, som vist i figur 5, er, om databasen vil blive startet i produktions- eller testtilstand. For at holde denne artikel enkel og fokuseret på tilføjelse af data, vil testtilstand blive valgt. Når en produktionsklar databasebase er oprettet, vil du gerne tilføje mere sikkerhed til den, end hvad der leveres i testtilstanden.
Figur 5: Valg af tilstand for din Firestore-database
Med den valgte tilstand er næste trin at angive den placering, hvor du vil oprette databasen. Du opretter din database i skyen, så du har et valg af placeringer for, hvilke servere du vil bruge. Ved at klikke på rullemenuen Cloud Firestore-placering vist i figur 6, vil du være i stand til at vælge en multiregional eller regional placering. Jeg foreslår, at hvis du er i Nordamerika, vælger du placeringen nam5 (us-central). Hvis du er et andet sted, så vælg det område, der er tættest på din placering.
Figur 6: Valg af en region til din Firestore-database
Med dit område valgt, klik på knappen Udført, og Firebase klargør din Cloud Firestore-database. Når klargøringen er udført, vil du blive ført til Database-konsolsiden som vist i figur 7, hvor du kan begynde at bruge din database online.
Figur 7: Databasekonsollen i Firebase
Samlinger og dokumenter i NoSQL
Hvis du har fulgt med, så har du på dette tidspunkt oprettet en NoSQL Cloud-baseret database i Firebases Cloud Firestore. Det er uden for rammerne af denne artikel at gå ind i detaljerne i NoSQL, men jeg vil give højdepunktet for, hvad du behøver at vide for at udføre den eksempeldatatilføjelse, der blev lovet i denne artikel.
En NoSQL-database består af samlinger der indeholder dokumenter . Et dokument indeholder grundlæggende de felter, som du planlægger at gemme. I denne artikel bliver der for eksempel lavet en samling af ordspil. Puns-samlingen vil indeholde dokumenter. Hvert dokument vil have et andet ordspil.
I Firebase kan du klikke på linket "+ Start samling" vist i figur 7 for at trække en dialog frem, som giver dig mulighed for at oprette ordspilssamlingen. Som vist i figur 8 bliver du bedt om at tilføje et samlings-id. I dette tilfælde vil vi kalde samlingen "Puns".
Figur 8: Oprettelse af en Cloud Firestore-samling
Når samlingen er oprettet, vil du være i stand til at oprette dokumenter i samlingen som vist i figur 9. Igen er et dokument dybest set en post i din NoSQL-database. Fordi dette er NoSQL, er der ingen strenge regler, der tvinger dig til at sikre, at hvert felt er i hvert dokument (post), eller at hvert dokument i en samling endda matcher. Dette er overladt til dig.
Figur 9: Tilføjelse af et dokument til en samling
Hvert dokument, du opretter, skal have et dokument-id. Du kan enten indtaste dette ID, eller du kan vælge at lade det stå tomt, og et ID vil automatisk blive genereret. For at gøre tingene mere læselige i eksemplet med ordspil, giver jeg det første dokument et ID på Pun0001.
Når du bruger konsollen til at tilføje dokumenter, skal du for hvert dokument angive ikke kun dataværdierne, men også navnet på felterne og typerne. En dropdown giver dig mulighed for at vælge den datatype, du vil tilføje.
I figur 10 er der tilføjet to strengefelter, som vil blive brugt til ordspilseksemplet. Disse er en Kategori og teksten til ordspillet (PunText ).
Figur 10: Opsætning af et ordspilsdokument.
Når der klikkes på knappen Gem i dialogboksen vist i figur 10, vil dokumentet (som grundlæggende er en post) blive oprettet som vist i figur 11. På dette tidspunkt er der oprettet en Cloud Firestore-database på skyen og en post ( dokument) er blevet tilføjet! Mere præcist er der blevet oprettet en samling kaldet "Puns", som har et dokument kaldet "Pun0001", der indeholder felter kaldet Category og PunText.
Figur 11: Cloud Firestore-databasen med et dokument tilføjet!
Bemærk, at hvis du på dette tidspunkt vil tilføje yderligere poster ved hjælp af konsollen, skal du klikke på linket "+ Tilføj dokument" vist i midten af figur 11. Du kan derefter tilføje yderligere ordspil med ID'er, kategorier og ordspil. Du vil gerne være omhyggelig med at sikre, at hver gang du tilføjer et nyt ordspil, at du bruger de samme feltnavne.
Selvom du måske synes, det er kedeligt at skulle indtaste feltnavne igen, er det på grund af fleksibiliteten i NoSQL. En måde at omgå dette på er at oprette en webapplikation, der vil gøre den del af arbejdet for dig!
Bemærk:Du vil bemærke i figur 11, at der er et par steder, hvor du kan starte nye samlinger. Det ligger uden for rammerne af denne artikel at grave i strukturen af NoSQL-samlinger og -dokumenter.
Oprettelse af en webapplikation til adgang til Cloud Firestore
Med din Cloud Firestore-opsætning kan du nu tilføje data uden for Firebase-webstedet. For at gøre dette skal du først hente nogle oplysninger fra Firebase, som giver dig mulighed for at knytte din webapp til det Firebase-projekt, du har oprettet.
Start med at klikke på linket Projektoversigt i den øverste venstre del af navigationsmenuen. Dette fører dig til en oversigtsside for dit projekt som vist i figur 12.
Figur 12: Firebase-projektoversigtssiden
På denne side kan du se, at der er ikoner for fire projekttyper, der kan vælges. Disse er til iOS, Android, web og Unity. Klik på ikonet for at angive, at en webapp er ved at blive udført. Dette vil vise dialogen vist i figur 13, der vil bede om et navn til applikationen. Navnet, der oprettes, bruges til at koordinere den webapp, du opretter, med Firebase-projektet og funktioner i Firebase-projektet. Til denne demo bruger jeg navnet "My Punny Web App" og klikker på knappen Registrer app.
Når du har klikket på det, vil du blive præsenteret for en skærm, der indeholder HTML-kode, som du vil tilføje til din webapplikation. Denne HTML-kode er det, der binder Firebase til din app.
Figur 13: Firebase-koden til webappen.
Du vil kopiere denne kode for at indsætte den på HTML-siden, som vi vil oprette senere i de næste trin i denne artikel. Hvis du forlader siden vist i figur 13, kan du altid vende tilbage til denne appkode fra Firebase-konsollen. Du skal blot klikke på gear ved siden af linket Projektoversigt i øverste højre hjørne og vælge Projektindstillinger. Den resulterende side vil indeholde oplysninger om dit projekt
Oprettelse af websiden/appen for at få adgang til Firestore
Med alt sat op på Firebase-siden, er det tid til at oprette websiden, der gør det muligt at tilføje data. Liste 1 indeholder grundlæggende HTML til at vise siden, der blev vist i figur 1 tidligere.
Fortegnelse 1: Grundlæggende HTML til Punny-siden.
<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>
Liste 1 er grundlæggende HTML. Tre felter er ved at blive oprettet for at give brugeren mulighed for at indtaste data. Hver får et ID, der er nødvendigt for at knytte de indtastede data til et dokument, der vil blive tilføjet til Firestore. en knap er også inkluderet med en begivenhed til at gemme dataene. I øjeblikket er den funktion ikke blevet skrevet; det er målet med denne artikel! Jeg har også inkluderet et link til en ekstern JavaScript-fil kaldet pun.js. Til at begynde med er den fil tom, men det vil blive ændret snart!
Det er inden for liste 1, at du vil indsætte koden, der blev kopieret fra Firebase tidligere. Koden, der blev vist i figur 13, skal indsættes nær slutningen af dit body-tag, i dette tilfælde lige før medtagelsen af puns.js-scriptet. Jeg har indsat koden til min ordspil-app i Listing 2.
Fortegnelse 2: HTML-siden med Firestore-koden tilføjet.
<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 tilføjelsen af scriptet til din HTML har du forbundet din applikation til at få adgang til Firebase. Du skal dog tilføje en kode mere. Mens den genererede kode vil give forbindelserne til Firebase, skal du tilføje et ekstra link for at få koden, der får adgang til Cloud Firestore-databasen i Firebase. Du vil gerne tilføje følgende scriptkildelinje til fortegnelserne:
Dette kan tilføjes lige efter opkaldet til:
Det næste trin er at tilføje den logik, der vil knytte de indtastede felter fra brugeren til de felter, der skal tilføjes til Firestore-databasen. Dette vil blive gjort i puns.js-filen for at holde koden ren.
Processen er først at oprette en databasevariabel, der vil blive knyttet til Firebase Cloud Firestore-databasen. Så skal der oprettes variabler, der kan udfyldes med de værdier, som brugeren har indtastet på vores side. Dette vil blive gjort med standard document.getElementById()-kald. Endelig skal variablen, der skinnede fra websiden, føjes til Cloud Firestore-databasen som felter i et dokument i Puns-samlingen. Liste 3 viser JavaScript, der kan udføre alt dette.
Fortegnelse 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);
});
}
Bemærk, at i liste 3, at databasen blev oprettet med variablen kaldet db. Denne variabel bruges derefter til at oprette det nye dokument (record) ved at angive navnet på samlingen, der blev kaldt ordspil i processen vist i figur 8. Dette efterfølges af dokumentnavnet, som i dette tilfælde er vores ordspils-id indsamlet fra brugeren og indsætte i variablen, inputPun. Inden i dokumentet tilføjes to felter, hvilket sker inden for sættet. For at tilføje felterne vises navnet på feltet, derefter et kolon og til sidst den strengværdi, der skal tilføjes. I dette tilfælde føjes inputCategory til feltet Kategori, og inputText føjes til feltet PunText.
Listen inkluderer også nogle test- og fejllogik for at logge en besked til konsollen. Hvis du åbner udviklerkonsollen i din browser, vil du se en "Dokument vellykket"-meddelelse, når et dokument tilføjes til din Cloud Firestore som vist i figur 14.
Figur 14: Et vellykket tilføjet dokument.
Det kan bekræftes, at dokumentet blev tilføjet ved at gå tilbage til projektet i Firebase-konsollen og se på databasen (gøres ved at klikke på Database i venstre navigationsmenu). Figur 15 viser, at tilføjelsen af det nye ordspil lykkedes.
Figur 15: Ordspilssamlingen med det nye pun002-dokument
Afslutter det
Meget blev dækket i denne artikel om tilføjelse af dokumenter til en Firebase Cloud Firestore NoSQL-database. Du lærte, hvordan du gør dette fra både konsollen og fra en simpel webapp. Dette er blot en start for at vise, hvor let tilføjelse kan være. Når det er sagt, tilføjer du kun et trin i et CRUD-system. Der er stadig mere at lære! Åh, og hvis du kan lide ordspil, så tjek min bog, Punny or Not Book of Puns, tilgængelig på Amazon!
# # #