W artykule Wprowadzenie do Firebase przedstawiono omówienie Firebase. Pokazano Ci, jak bezpłatnie skonfigurować konto Firebase i utworzyć projekt Firebase! W tym artykule opierasz się na tym, czego się nauczyłeś, konfigurując bazę danych NoSQL Cloud opartą na chmurze, a następnie tworząc bardzo prostą stronę internetową, aby dodawać do niej elementy. Baza danych będzie po prostu przechowywać kalambury wraz z kategorią i identyfikatorem. Rysunek 1 pokazuje stronę internetową, która zostanie użyta do dodania elementów.
Rysunek 1: Strona internetowa zapisująca do bazy danych Firestore NoSQL.
Konfigurowanie bazy danych Cloud Firestore w Firebase
Aby rozpocząć, wróć do Firebase i utwórz nowy projekt. Możesz przejść do Firebase, przechodząc na https://console.firebase.google.com/. Ta strona daje możliwość dodania nowego projektu, jak pokazano na Rysunku 2. Więcej informacji o tworzeniu projektu znajdziesz w poprzednim artykule.
Rysunek 2: Dodaję nowy projekt Firebase.
Mój projekt nazwałem „The Kalambur Project”. Po utworzeniu nowego projektu zostaniesz przeniesiony do konsoli Firebase, jak pokazano na rysunku 3.
Rysunek 3: Konsola Firebase
W Konsoli będziesz mógł stworzyć bazę danych, z której będzie korzystać strona internetowa. Pierwszym krokiem do tego jest kliknięcie opcji Baza danych w lewym menu nawigacyjnym. Spowoduje to wyświetlenie ekranu, jak pokazano na Rysunku 4, który pozwoli Ci utworzyć Cloud Firestore, który będzie Twoją bazą danych NoSQL.
Rysunek 4: Ekran startowy tworzenia Cloud Firestore
Kliknięcie przycisku Utwórz bazę danych rozpocznie proces przechodzenia przez kolejne etapy tworzenia bazy danych. Pierwszą decyzją, którą należy podjąć, jak pokazano na rysunku 5, jest to, czy baza danych zostanie uruchomiona w trybie produkcyjnym, czy testowym. Aby ten artykuł był prosty i skoncentrowany na dodawaniu danych, zostanie wybrany tryb testowy. Kiedy tworzona jest baza danych gotowa do produkcji, warto dodać do niej więcej zabezpieczeń niż w trybie testowym.
Rysunek 5: Wybór trybu dla bazy danych Firestore
Po wybraniu trybu następnym krokiem jest określenie lokalizacji, w której chcesz utworzyć bazę danych. Tworzysz swoją bazę danych w chmurze, więc masz wybór lokalizacji, z których serwerów chcesz korzystać. Klikając menu rozwijane lokalizacji Cloud Firestore pokazane na rysunku 6, będziesz mógł wybrać lokalizację wieloregionalną lub regionalną. Sugeruję, że jeśli jesteś w Ameryce Północnej, wybierz lokalizację nam5 (centralne nas). Jeśli jesteś gdzie indziej, wybierz region, który jest najbliżej Twojej lokalizacji.
Rysunek 6: Wybór regionu dla bazy danych Firestore
Po wybraniu regionu kliknij przycisk Gotowe, a Firebase udostępni Twoją bazę danych Cloud Firestore. Po zakończeniu udostępniania przejdziesz do strony konsoli bazy danych, jak pokazano na rysunku 7, gdzie możesz rozpocząć korzystanie z bazy danych online.
Rysunek 7: Konsola bazy danych w Firebase
Kolekcje i dokumenty w NoSQL
Jeśli podążałeś dalej, w tym momencie utworzyłeś bazę danych NoSQL Cloud w Firebase Cloud Firestore. Zagłębianie się w szczegóły NoSQL wykracza poza zakres tego artykułu, ale przedstawię najważniejsze informacje, które musisz wiedzieć, aby dodać przykładowe dane, które obiecano w tym artykule.
Baza danych NoSQL składa się z kolekcji zawierające dokumenty . Dokument zasadniczo zawiera pola, które planujesz przechowywać. Na przykład w tym artykule tworzona jest kolekcja kalamburów. Kolekcja Kalambury będzie zawierała dokumenty. Każdy dokument będzie inną grą słów.
W Firebase możesz kliknąć łącze „+ Rozpocznij kolekcję” pokazane na rysunku 7, aby wyświetlić okno dialogowe, które umożliwi utworzenie kolekcji kalamburów. Zostaniesz poproszony, jak pokazano na rysunku 8, o dodanie identyfikatora kolekcji. W takim przypadku nazwiemy kolekcję „Kalambury”.
Rysunek 8: Tworzenie kolekcji Cloud Firestore
Po utworzeniu kolekcji będziesz mógł tworzyć dokumenty w ramach kolekcji, jak pokazano na rysunku 9. Ponownie, dokument jest w zasadzie zapisem w bazie danych NoSQL. Ponieważ jest to NoSQL, nie ma ścisłych reguł zmuszających do upewnienia się, że każde pole znajduje się w każdym dokumencie (rekord) lub że każdy dokument w kolekcji jest nawet zgodny. To Ty musisz zrobić.
Rysunek 9: Dodawanie dokumentu do kolekcji
Każdy tworzony dokument musi mieć identyfikator dokumentu. Możesz wprowadzić ten identyfikator lub pozostawić go puste, a identyfikator zostanie wygenerowany automatycznie. Aby wszystko było bardziej czytelne w przykładzie z kalamburami, nadam pierwszemu dokumentowi identyfikator Pun0001.
Korzystając z konsoli do dodawania dokumentów, dla każdego dokumentu należy określić nie tylko wartości danych, ale także nazwy pól i typy. Lista rozwijana pozwala wybrać typ danych, który chcesz dodać.
Na rysunku 10 dodano dwa pola tekstowe, które zostaną użyte w przykładzie kalamburowym. To są kategoria i tekst kalamburu (PunText ).
Rysunek 10: Tworzenie kalamburu.
Po kliknięciu przycisku Zapisz w oknie dialogowym pokazanym na rysunku 10 zostanie utworzony dokument (który jest w zasadzie rekordem), jak pokazano na rysunku 11. W tym momencie w chmurze została utworzona baza danych Cloud Firestore i rekord ( dokument) został dodany! Dokładniej, stworzono kolekcję o nazwie „Puns”, która zawiera dokument o nazwie „Pun0001”, który zawiera pola o nazwie Category i PunText.
Rysunek 11: Baza danych Cloud Firestore z dodanym dokumentem!
Zauważ, że w tym momencie, jeśli chcesz dodać dodatkowe rekordy za pomocą konsoli, kliknij link „+ Dodaj dokument” pokazany na środku rysunku 11. Możesz wtedy dodać dodatkowe kalambury z identyfikatorami, kategoriami i tekstem kalambury. Chciałbyś być ostrożny, aby upewnić się, że za każdym razem, gdy dodajesz nową grę słów, używasz tych samych nazw pól.
Chociaż może się wydawać, że ponowne wpisywanie nazw pól jest nużące, wynika to z elastyczności NoSQL. Jednym ze sposobów na obejście tego problemu jest stworzenie aplikacji internetowej, która wykona tę część pracy za Ciebie!
Uwaga:Na rysunku 11 zauważysz, że jest kilka miejsc, w których możesz rozpocząć nowe kolekcje. Zagłębienie się w strukturę kolekcji i dokumentów NoSQL wykracza poza zakres tego artykułu.
Tworzenie aplikacji internetowej w celu uzyskania dostępu do Cloud Firestore
Po skonfigurowaniu Cloud Firestore możesz teraz dodawać dane spoza witryny Firebase. Aby to zrobić, musisz najpierw pobrać z Firebase pewne informacje, które pozwolą Ci powiązać Twoją aplikację internetową z utworzonym projektem Firebase.
Zacznij od kliknięcia linku Przegląd projektu w lewej górnej części menu nawigacyjnego. Spowoduje to przejście do strony przeglądu projektu, jak pokazano na rysunku 12.
Rysunek 12: Strona przeglądu projektu Firebase
Na tej stronie zobaczysz, że istnieją ikony czterech typów projektów, które można wybrać. Są to systemy iOS, Android, internetowe i Unity. Kliknij ikonę , aby wskazać, że aplikacja internetowa jest w toku. Spowoduje to wyświetlenie okna dialogowego pokazanego na rysunku 13, które poprosi o nazwę aplikacji. Tworzona nazwa służy do koordynowania tworzonej aplikacji internetowej z projektem Firebase i funkcjami w projekcie Firebase. W tym demo używam nazwy „My Punny Web App” i klikam przycisk Zarejestruj aplikację.
Po kliknięciu zostanie wyświetlony ekran zawierający kod HTML, który dodasz do swojej aplikacji internetowej. Ten kod HTML łączy Firebase z Twoją aplikacją.
Rysunek 13: Kod Firebase aplikacji internetowej.
Będziesz chciał skopiować ten kod, aby wkleić go na stronę HTML, którą utworzymy później w kolejnych krokach tego artykułu. Jeśli opuścisz stronę pokazaną na rysunku 13, zawsze możesz wrócić do kodu tej aplikacji z konsoli Firebase. Po prostu kliknij koło zębate obok linku Przegląd projektu w prawym górnym rogu i wybierz Ustawienia projektu. Strona wynikowa będzie zawierać informacje o Twoim projekcie
Tworzenie strony internetowej/aplikacji, aby uzyskać dostęp do Firestore
Po skonfigurowaniu wszystkiego po stronie Firebase nadszedł czas, aby utworzyć stronę internetową, która umożliwi dodawanie danych. Listing 1 zawiera podstawowy kod HTML do wyświetlania strony pokazanej wcześniej na rysunku 1.
Lista 1: Podstawowy kod HTML strony Punny.
<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 to podstawowy kod HTML. Tworzone są trzy pola umożliwiające użytkownikowi wprowadzanie danych. Każdy otrzymuje identyfikator, który będzie potrzebny do powiązania wprowadzonych danych z dokumentem, który zostanie dodany do Firestore. do zdarzenia dołączony jest również przycisk do przechowywania danych. Obecnie funkcja ta nie została napisana; taki jest cel tego artykułu! Dołączyłem również link do zewnętrznego pliku JavaScript o nazwie pun.js. Początkowo ten plik jest pusty, ale wkrótce zostanie to zmienione!
W ramach Listingu 1 będziesz chciał wkleić kod skopiowany wcześniej z Firebase. Kod pokazany na rysunku 13 należy wkleić pod koniec tagu body, w tym przypadku tuż przed włączeniem skryptu puns.js. Wkleiłem kod mojej aplikacji kalamburowej do Listingu 2.
Lista 2: Strona html z dodanym kodem 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>
Dodanie skryptu do kodu HTML oznacza, że Twoja aplikacja ma dostęp do Firebase. Musisz jednak dodać jeszcze jedną linię kodu. Wygenerowany kod zapewni połączenia z Firebase, ale musisz dodać dodatkowy link, aby uzyskać kod, który będzie miał dostęp do bazy danych Cloud Firestore w Firebase. Do listy należy dodać następujący wiersz źródłowy skryptu:
Można to dodać zaraz po wywołaniu:
Kolejnym krokiem jest dodanie logiki, która skojarzy wprowadzone pola od użytkownika z polami, które mają zostać dodane do bazy danych Firestore. Zostanie to zrobione w pliku puns.js, aby zachować czystość kodu.
Proces polega na utworzeniu najpierw zmiennej bazy danych, która zostanie powiązana z bazą danych Firebase Cloud Firestore. Następnie trzeba będzie stworzyć zmienne, które można wypełnić wartościami wprowadzonymi przez użytkownika na naszej stronie. Zostanie to zrobione za pomocą standardowych wywołań document.getElementById(). Na koniec zmienna błyszcząca ze strony internetowej musi zostać dodana do bazy danych Cloud Firestore jako pola w dokumencie w kolekcji Kalambury. Listing 3 pokazuje JavaScript, który może to wszystko osiągnąć.
Lista 3: Plik 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);
});
}
Zauważ, że na Listingu 3 baza danych została utworzona ze zmienną o nazwie db. Ta zmienna jest następnie używana do utworzenia nowego dokumentu (rekordu) poprzez określenie nazwy kolekcji, która została nazwana Kalambury w procesie pokazanym na Rysunku 8. Po nim następuje nazwa dokumentu, która w tym przypadku jest naszym identyfikatorem kalamburów zebranym z użytkownika i umieścić w zmiennej inputPun. W dokumencie dodawane są dwa pola, co odbywa się w zestawie. Aby dodać pola, wyświetlana jest nazwa pola, następnie dwukropek i na końcu wartość ciągu, która ma zostać dodana. W takim przypadku inputCategory jest dodawany do pola Category, a inputText jest dodawany do pola PunText.
Lista zawiera również logikę testowania i błędów do rejestrowania wiadomości w konsoli. Jeśli otworzysz konsolę programisty swojej przeglądarki, zobaczysz komunikat „Dokument pomyślny” wyświetlany po dodaniu dokumentu do Cloud Firestore, jak pokazano na rysunku 14.
Rysunek 14: Pomyślnie dodany dokument.
Dodanie dokumentu można potwierdzić, wracając do projektu w konsoli Firebase i przeglądając bazę danych (klikając Baza danych w lewym menu nawigacyjnym). Rysunek 15 pokazuje, że dodanie nowej gry słów zakończyło się sukcesem.
Rysunek 15: Kolekcja kalamburów z nowym dokumentem pun002
Zawijanie
W tym artykule dużo omówiono na temat dodawania dokumentów do bazy danych Firebase Cloud Firestore NoSQL. Nauczyłeś się, jak to zrobić, zarówno z konsoli, jak i prostej aplikacji internetowej. To tylko początek, aby pokazać, jak łatwe może być dodawanie. Powiedziawszy to, dodając tylko jeden krok w systemie CRUD. Jest jeszcze więcej do nauczenia! Aha, a jeśli lubisz kalambury, sprawdź moją książkę, Punny or Not Book of Puns, dostępną na Amazon!
# # #
