V článku Úvod do Firebase byl uveden přehled Firebase. Bylo vám ukázáno, jak bezplatně nastavit účet Firebase a vytvořit projekt Firebase! V tomto článku stavíte na tom, co jste se naučili, nastavením cloudové databáze NoSQL a vytvořením velmi jednoduché webové stránky, na kterou do ní můžete přidávat položky. Databáze bude jednoduše ukládat slovní hříčky spolu s kategorií a identifikátorem. Obrázek 1 ukazuje webovou stránku, která bude použita k přidání položek.
Obrázek 1: Webová stránka zapisující se do databáze Firestore NoSQL.
Nastavení databáze Cloud Firestore ve Firebase
Chcete-li začít, vraťte se na Firebase a vytvořte nový projekt. Na Firebase se dostanete na https://console.firebase.google.com/. Tato stránka vám poskytne možnost přidat nový projekt, jak je znázorněno na obrázku 2. Více informací o vytvoření projektu naleznete v předchozím článku.
Obrázek 2: Přidávání nového projektu Firebase.
Svůj projekt jsem nazval „The Pun Project“. Jakmile vytvoříte nový projekt, budete přesměrováni do Firebase Console, jak je znázorněno na obrázku 3.
Obrázek 3: Konzole Firebase
V konzole budete moci vytvořit databázi, kterou bude webová stránka používat. Prvním krokem k tomu je kliknout na volbu Databáze v levé navigační nabídce. Tím se otevře obrazovka, jak je znázorněno na obrázku 4, která vám umožní vytvořit Cloud Firestore, který bude vaší NoSQL databází.
Obrázek 4: Úvodní obrazovka pro vytvoření Cloud Firestore
Kliknutím na tlačítko Vytvořit databázi zahájíte proces procházení kroků pro vytvoření databáze. První rozhodnutí, které je třeba učinit, jak ukazuje obrázek 5, je, zda bude databáze spuštěna v produkčním nebo testovacím režimu. Aby byl tento článek jednoduchý a zaměřený na přidávání dat, bude vybrán testovací režim. Když je vytvořena databázová základna připravená na provoz, budete do ní chtít přidat větší zabezpečení, než jaké je poskytováno v testovacím režimu.
Obrázek 5: Výběr režimu pro vaši databázi Firestore
S vybraným režimem je dalším krokem zadání umístění, kde chcete databázi vytvořit. Vytváříte svou databázi v Cloudu, takže máte na výběr umístění, které servery chcete použít. Kliknutím na rozevírací seznam umístění Cloud Firestore zobrazený na obrázku 6 si budete moci vybrat umístění pro více regionů nebo regionů. Pokud jste v Severní Americe, doporučuji vám vybrat umístění nam5 (us-central). Pokud jste jinde, vyberte oblast, která je nejblíže vaší poloze.
Obrázek 6: Výběr oblasti pro vaši databázi Firestore
S vybranou oblastí klikněte na tlačítko Hotovo a Firebase zajistí vaši databázi Cloud Firestore. Po dokončení zřizování budete připraveni přejít na stránku konzole databáze, jak je znázorněno na obrázku 7, kde můžete začít používat databázi online.
Obrázek 7: Konzole databáze ve Firebase
Sbírky a dokumenty v NoSQL
Pokud jste postupovali, pak jste v tomto bodě vytvořili cloudovou databázi NoSQL v Cloud Firestore Firebase. Je nad rámec tohoto článku jít do podrobností o NoSQL, ale poskytnu to nejdůležitější, co potřebujete vědět, abyste mohli přidat ukázková data, která byla slíbena v tomto článku.
NoSQL databáze se skládá z kolekcí které obsahují dokumenty . Dokument v podstatě obsahuje pole, která plánujete uložit. Například v tomto článku vzniká sbírka slovních hříček. Sbírka Puns bude obsahovat dokumenty. Každý dokument bude jiná slovní hříčka.
Ve Firebase můžete kliknout na odkaz „+ Start collection“ zobrazený na obrázku 7 a otevřít dialogové okno, které vám umožní vytvořit sbírku Puns. Budete vyzváni, jak je znázorněno na obrázku 8, abyste přidali ID kolekce. V tomto případě budeme kolekci nazývat „Hříčky“.
Obrázek 8: Vytvoření kolekce Cloud Firestore
Jakmile je kolekce vytvořena, budete moci vytvářet dokumenty v rámci kolekce, jak je znázorněno na obrázku 9. Dokument je opět v podstatě záznamem ve vaší databázi NoSQL. Protože se jedná o NoSQL, neexistují žádná přísná pravidla, která by vás nutila ujistit se, že každé pole je v každém dokumentu (záznamu) nebo že se každý dokument v kolekci dokonce shoduje. To je ponecháno na vás.
Obrázek 9: Přidání dokumentu do sbírky
Každý dokument, který vytvoříte, bude muset mít ID dokumentu. Toto ID můžete buď zadat, nebo jej můžete nechat prázdné a ID se vygeneruje automaticky. Aby byly věci v příkladu s použitím slovních hříček čitelnější, přidělím prvnímu dokumentu ID Pun0001.
Při používání konzoly k přidávání dokumentů musíte pro každý dokument zadat nejen hodnoty dat, ale také názvy polí a typy. Rozbalovací nabídka vám umožňuje vybrat datový typ, který chcete přidat.
Na obrázku 10 byla přidána dvě pole řetězce, která budou použita pro příklad Pun. Toto jsou kategorie a text slovní hříčky (PunText ).
Obrázek 10: Nastavení slovní hříčky.
Po kliknutí na tlačítko Uložit v dialogovém okně zobrazeném na obrázku 10 se dokument (což je v podstatě záznam) vytvoří, jak je znázorněno na obrázku 11. V tomto okamžiku byla v cloudu vytvořena databáze Cloud Firestore a záznam ( dokument) byl přidán! Přesněji řečeno, byla vytvořena sbírka nazvaná „Puns“, která obsahuje dokument nazvaný „Pun0001“, který obsahuje pole nazvaná Category a PunText.
Obrázek 11: Databáze Cloud Firestore s přidaným dokumentem!
Všimněte si, že v tomto okamžiku, pokud byste chtěli přidat další záznamy pomocí konzoly, klikněte na odkaz „+ Přidat dokument“ zobrazený uprostřed obrázku 11. Poté můžete přidat další slovní hříčky s ID, kategoriemi a textem slovních hříček. Měli byste být opatrní, abyste se ujistili, že pokaždé, když přidáte novou hříčku, použijete stejné názvy polí.
I když si možná myslíte, že je zdlouhavé znovu zadávat názvy polí, je to kvůli flexibilitě NoSQL. Jedním ze způsobů, jak to obejít, je vytvořit webovou aplikaci, která tuto část práce udělá za vás!
Poznámka:Na obrázku 11 si všimnete, že existuje několik míst, kde můžete zakládat nové kolekce. Ponořit se do struktury kolekcí a dokumentů NoSQL je nad rámec tohoto článku.
Vytvoření webové aplikace pro přístup ke Cloud Firestore
S nastavením Cloud Firestore nyní můžete přidávat data mimo web Firebase. Chcete-li to provést, musíte nejprve získat nějaké informace z Firebase, které vám umožní přidružit vaši webovou aplikaci k projektu Firebase, který jste vytvořili.
Začněte kliknutím na odkaz Přehled projektu v levé horní části navigační nabídky. Tím se dostanete na stránku s přehledem vašeho projektu, jak je znázorněno na obrázku 12.
Obrázek 12: Stránka s přehledem projektu Firebase
Na této stránce uvidíte, že existují ikony pro čtyři typy projektů, které lze vybrat. Ty jsou pro iOS, Android, web a Unity. Kliknutím na ikonu označíte, že se webová aplikace právě provádí. Zobrazí se dialogové okno zobrazené na obrázku 13, které bude vyžadovat název aplikace. Vytvářený název se používá ke koordinaci vámi vytvořené webové aplikace s projektem Firebase a funkcemi v rámci projektu Firebase. Pro tuto ukázku používám název „My Punny Web App“ a kliknu na tlačítko Registrovat aplikaci.
Po kliknutí se vám zobrazí obrazovka obsahující kód HTML, který přidáte do své webové aplikace. Tento kód HTML spojuje Firebase s vaší aplikací.
Obrázek 13: Kód Firebase pro webovou aplikaci.
Tento kód budete chtít zkopírovat a vložit na stránku HTML, kterou vytvoříme později v dalších krocích tohoto článku. Pokud opustíte stránku zobrazenou na obrázku 13, můžete se k tomuto kódu aplikace kdykoli vrátit z konzole Firebase. Jednoduše klikněte na ozubené kolo vedle odkazu Přehled projektu v pravém horním rohu a vyberte Nastavení projektu. Výsledná stránka bude obsahovat informace o vašem projektu
Vytvoření webové stránky / aplikace pro přístup k Firestore
Když je vše nastaveno na straně Firebase, je čas vytvořit webovou stránku, která umožní přidávat data. Výpis 1 obsahuje základní HTML pro zobrazení stránky, která byla zobrazena na obrázku 1 dříve.
Zápis 1: Základní HTML pro Punny Page.
<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>
Výpis 1 je základní HTML. Jsou nastavena tři pole, která umožňují uživateli zadávat data. Každému je přiděleno ID, které bude potřeba k přiřazení zadaných dat k dokumentu, který bude přidán do Firestore. součástí události je také tlačítko pro uložení dat. V současné době tato funkce nebyla napsána; to je cílem tohoto článku! Zahrnul jsem také odkaz na externí soubor JavaScript s názvem pun.js. Zpočátku je tento soubor prázdný, ale to se brzy změní!
Kód, který byl dříve zkopírován z Firebase, budete chtít vložit do seznamu 1. Kód zobrazený na obrázku 13 by měl být vložen na konec značky body, v tomto případě těsně před zahrnutím skriptu puns.js. Vložil jsem kód své aplikace slovní hříčky do záznamu 2.
Zápis 2: Stránka html s přidaným kódem Firestore.
<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>
Přidáním skriptu do kódu HTML jste aplikaci napojili na přístup k Firebase. Musíte však přidat ještě jeden řádek kódu. I když vygenerovaný kód poskytne připojení k Firebase, musíte přidat další odkaz, abyste získali kód, který bude přistupovat k databázi Cloud Firestore v rámci Firebase. Do výpisů budete chtít přidat následující zdrojový řádek skriptu:
To lze přidat hned po hovoru na:
Dalším krokem je přidání logiky, která spojí zadaná pole od uživatele s poli, která mají být přidána do databáze Firestore. To bude provedeno v souboru puns.js, aby byl kód zachován.
Proces je nejprve vytvořit proměnnou databáze, která bude svázána s databází Firebase Cloud Firestore. Poté bude potřeba vytvořit proměnné, které lze naplnit hodnotami, které uživatel zadal na naší stránce. To se provede standardním voláním document.getElementById(). Nakonec je třeba proměnnou, která se leskla z webové stránky, přidat do databáze Cloud Firestore jako pole v dokumentu v rámci kolekce Puns. Výpis 3 ukazuje JavaScript, který toho všeho dokáže.
Zápis 3: Soubor JavaScript 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);
});
}
Všimněte si, že ve výpisu 3 byla databáze vytvořena s proměnnou nazvanou db. Tato proměnná se pak použije k vytvoření nového dokumentu (záznamu) zadáním názvu sbírky, která se v procesu znázorněném na obrázku 8 jmenovala Puns. Za ním následuje název dokumentu, což je v tomto případě naše ID slovní hříčky získané z uživatele a vložte do proměnné inputPun. V rámci dokumentu se přidávají dvě pole, což se provádí v rámci sady. Chcete-li přidat pole, je uveden název pole, poté dvojtečka a nakonec hodnota řetězce, která se má přidat. V tomto případě se inputCategory přidává do pole Kategorie a inputText se přidává do pole PunText.
Výpis také obsahuje některé testovací a chybové logiky pro přihlášení zprávy do konzoly. Pokud otevřete vývojářskou konzoli svého prohlížeče, zobrazí se po přidání dokumentu do vašeho Cloud Firestore zpráva „Doc úspěšný“, jak je znázorněno na obrázku 14.
Obrázek 14: Úspěšně přidaný dokument.
To, že byl dokument přidán, lze potvrdit tak, že se vrátíte zpět do projektu v konzole Firebase a podíváte se na databázi (to provedete kliknutím na položku Databáze v levé navigační nabídce). Obrázek 15 ukazuje, že přidání nové slovní hříčky bylo úspěšné.
Obrázek 15: Kolekce Puns s novým dokumentem pun002
Zabalit to
Mnoho bylo popsáno v tomto článku o přidávání dokumentů do databáze Firebase Cloud Firestore NoSQL. Naučili jste se, jak to udělat jak z konzole, tak z jednoduché webové aplikace. Toto je jen začátek, který ukazuje, jak snadné může být přidávání. Jak již bylo řečeno, přidání pouze v jednom kroku v systému CRUD. Stále je co učit! Jo, a pokud máte rádi slovní hříčky, podívejte se na mou knihu Punny or Not Book of Puns, která je dostupná na Amazonu!
# # #