Firebase, Realtime Database – jak rozpocząć przygodę?
Firebase to platforma, która wspomaga tworzenie aplikacji mobilnych. Udostępnia wiele przydatnych narzędzi takich jak np. statystyki, autoryzację, bazy danych czy raportowanie. My w tym artykule zajmiemy się wykorzystaniem bazy danych z użyciem JavaScript.
W pierwszej kolejności musimy założyć konto w platformie. Ponieważ jest to narzędzie od firmy Google wystarczy konto Google, które zapewne już posiadasz. Następnie musimy założyć nowy projekt (patrz zrzut ekranu niżej), co możemy uczynić przechodząc do consoli.
Po utworzeniu projektu zostaniemy automatycznie do niego przełączeniu. Jeśli tak się nie stanie możemy do niego przejść klikając w odpowiedni projekt w sekcji „najnowsze projekty”.
Teraz powinniśmy mieć dostęp do wszystkich narzędzi związanych z tym projektem. Na pierwszym planie widzimy ekran powitalny z instrukcją jak rozpocząć pracę z firebase. My wybieramy wersję pod aplikację internetową klikając w ostatnią pozycję.
Teraz powinniśmy zobaczyć kod jaki musimy wkleić do naszej strony (aplikacji) internetowej.
My jednak będziemy korzystać jedynie z narzędzia database dlatego pod swoją stronę podepniemy jedynie niezbędne pliki czyli tzw. core i database. Poniżej zamieszam kod HTML.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase-database.js"></script>
<script src="js/app.js"></script>
</html>
Teraz możemy dodać do pliku app.js, niezbędną konfigurację.
var config = {
apiKey: "your-api-key ",
databaseURL: "https://your-url.firebaseio.com",
};
var app = firebase.initializeApp(config);
Musimy jeszcze przejść do zakładki database w consoli i stworzyć przykładowe dane w naszej bazie. Ja przygotowałem prostą strukturę składającą się z kolekcji książek. W tym miejscu należy nadmienić, że układ danych w bazie jest identyczny jak w plikach JSON czyli klucz-wartość. Nie ma tutaj podziały na kolumny i wiersze jak w relacyjnych bazach danych typu MySQL.
Aby dodać dane do bazy można posłużyć się zielonym plusikiem (+) przy nazwie naszego projektu (w moim przypadki to tutorial-50e7f), który jest widoczny dopiero po najechaniu myszką. Należy pamiętać, aby potwierdzić nasze zmiany guzikiem `dodaj`. Jeśli chcemy, aby wartością była kolejna kolekcja to nie wpisujemy wartości, a znów używamy plusika (+).
Maja struktura wygląda w taki sposób:
Pobieranie danych
Metoda .on(„value”)
Na razie pozostanę przy tak prostej strukturze i postaram się pobrać te wartości do mojego pliku app.js. Poniżej kod dla tej operacji.
var books = app.database().ref('books');
books.on("value", function(data) {
console.log(data.val());
}, function (error) {
console.log("Error: " + error.code);
});
Na zmiennej app uruchamiamy metodę database, a potem ref, która tworzy nam referencję do naszej kolekcji „books”. Ta referencja jest zapisana do zmiennej books, na której wywołujemy metode on (można ją porównać do eventu z jQuery) z trzema parametrami. Pierwszy to typ eventu – w naszym przykładzie to „value” czyli „pobierz wartość”. Dwa pozostałe to funkcje, które są wywoływane w zależności czy dane zostały pobrane lub gdy było to niemożliwe. Ważne! Ten event jest uruchamiany za każdym razem kiedy dane w bazie zostały zmienione.
Permission denied
Jeśli po uruchomieniu tego prostego przykładu pojawił się w konsoli błąd: Error: PERMISSION_DENIED to oznacza, że nie ustaliśmy reguł związanych z czytaniem i zapisem dla naszej bazy.
Musimy przejść do zakładki reguły i tam wprowadzić odpowiednie ustawiania. W zależności od potrzeb możemy zdefiniować różne reguły, o czym można przeczytać w dokumentacji. My na potrzeby tego artykuły pozwolimy na czytanie i zapis dla wszystkich – jest to najmniej bezpieczne rozwiązanie (jak to zrobić lepiej dowiesz się w następnym wpisie, który niebawem powstanie). Pamiętamy, aby zmiany potwierdzić kliknięciem w `publikuj`.
Teraz nasz kod powinien wygenerować w konsoli tablicę 3 elementową.
Przyjrzyjmy się tym razem bardziej rozbudowanej strukturze.
W jaki sposób pobrać same komentarze?
var commets = app.database().ref('comments/books');
commets.on("value", function(data) {
console.log(data.val());
}, function (error) {
console.log("Error: " + error.code);
});
Jak widać jedyne co się zmieniło to wartość parametru w metodzie `ref`. Ukośnik pełni rolę zagłębienia w głąb drzewa. Jeśli chcielibyśmy pobrać tylko wartość dla pierwszego komentarza wystarczyłoby wpisać ‘comments/books/0’. Od razu wyczulam, że tworzenie petli `for` w tym miejscu nie jest najlepszym pomysłem.
Pobieranie danych tylko raz – .once()
Jeśli chcemy pobrać dane tylko raz – bez uruchamiania eventu za każdym razem kiedy dane zostaną zmodyfikowane to wystarczy użyć poniższego kodu:
var books = app.database().ref('books');
books.once("value").then(function(data) {
console.log(data.val());
});
Teraz pobierzemy dane tylko raz – w momencie kiedy kod zostanie wywołany.
Edycja danych
Metoda .set()
Mając już podstawową strukturę wróćmy jeszcze do kolekcji books. Wywołajmy teraz poniższy kod:
var books = app.database().ref('books');
books.set({
'test1': 'React',
'test2': 'Angular'
});
Spowoduje on nadpisanie wartości, które do tej pory były przyporządkowane do books. Efekt obrazuje poniższy zrzut ekranu.
Metoda .update()
Tym razem będziemy chcieli zmodyfikować, któryś z elementów. Rozpoczynamy od stworzenia referencji do odpowiedniego elementu tj. tego, który będziemy modyfikować. Wybieramy pierwszy komentarz i modyfikujemy jego zawartość.
var commentsBooks0 = app.database().ref('comments/books/0');
commentsBooks0.update({
"content": "Nowy komentarz!",
});
Efekt działania tego kodu widać na poniższym zrzucie ekranu.
Dodawanie danych – .push()
var books = app.database().ref('books');
books.push("PHP5");
var commentsBooks = app.database().ref('comments/books');
commentsBooks.push({
author: "Monika",
content: "Super książka!"
});
Jak zwykle tworzymy odpowiednią referencję (w tym przypadku dwie różne) i dodajemy do niej dane. Możemy dodać konkretną wartość lub ich zbór. Zobaczmy jaki efekt będzie po uruchomieniu powyższego kodu.
Dane zostały dodane jednak w miejsce klucza został utworzony dziwny ciąg znaków. Można go porównać to pola ID z relacyjnych baz danych. Jest to unikalna wartość, która pozwala nam zidentyfikować konkretną wartość.
Może się nam wydawać to nieintuicyjne jednak my nie będziemy tego klucza wpisywać z „palca”, a zawsze pobierać do zmiennych więc ta forma nie będzie dla nas uciążliwa.
Aby od razu pobrać klucz dla nowo utworzonego elementy wystarczy wykorzystać poniższy kod:
var books = app.database().ref('books');
var newBook = books.push("HTML5");
console.log(newBook.key);
Usuwanie danych .remove()
Pozostało nam jeszcze usuwanie danych z bazy. Wystarczy, że utworzymy referencje do elementu, który chcemy usunąć i wywołujemy na nim metodę remove(), zobaczmy:
app.database().ref('books/test1').remove();
app.database().ref('books/test2').remove();
Efekt uruchomienia powyższego kodu (pamiętamy, że wcześniej istniały elementy o kluczu test1 i test2 z wartościami odpowiednio React i Angular):
