Jak podłączyć Firebase do aplikacji i zacząć z niego korzystać?

Post navigation

Kodowanie

Jak podłączyć Firebase do aplikacji i zacząć z niego korzystać?

Aby używać Firebase w swojej aplikacji należy w głównym pliku strony umieścić kilka linków i kawałek konfiguracji. Jest to na tyle uproszczone, że w ciągu chwili zaczniesz korzystać z pełni funkcjonalności. Jest kilka opcji podłączenia, są podobne, ale jednak różnią się od siebie.

Utwórz projekt

Na początku należy utworzyć własny projekt dla aplikacji poprzez odwiedzenie naszego centrum dowodzenia aplikacją czyli Firebase Console dostępną pod adresem: https://console.firebase.google.com/ Jeśli nie posiadasz jeszcze żadnego projektu kliknij “Dodaj projekt” i uzupełnij pola formularza. Po chwili otrzymasz kawałek kodu do skopiowania. Są to dane potrzebne do tego, aby Twoja aplikacja mogła zalogować się do usługi Firebase – widnieją tam adresy Twojej aplikacji, bazy danych oraz klucze, po których identyfikowana jest Twoja aplikacja. Po tym zabiegu przygotuj sobie pliki bazowe aplikacji takie jak index.html i inne konieczne aby uruchomić projekt. Podstawową aplikację opartą o Firebase możesz wygenerować również za pomocą odpowiedniego CLI.

Kopiuj – Wklej

Pierwszą opcją na uruchomienie Firebase w aplikacji jest zwyczajne skopiowanie fragmentu konfiguracji do swojego pliku index.html. Wkleja się go tak jak proponuje dokumentacja – do sekcji <head>. Kod zawiera link do CDN Firebase jako jednego pliku i obiekt konfiguracyjny z wywołaniem inicjalizacji. Taki fragment kodu uzyskasz poprzez odwiedzenie swojej konsoli Firebase na swoim koncie Google i utworzeniu projektu jeśli go nie masz. Natomiast jeśli posiadasz już utworzony projekt kliknij w “Project overview” w lewym górnym rogu, a następnie ikonę “Dodaj Firebase do swojej aplikacji internetowej”. Oczywiście jeśli tworzysz aplikację na Androida czy iOS wybierasz odpowiednią opcję – “dla systemu Android” lub “dla systemu iOS”. Wyświetli się okienko z kawałkiem kodu. Skopiuj go i wklej do sekcji <head> w swoim pliku index.html. Uruchom swoją aplikację i gotowe! Twoja aplikacja łączy się już z Firebase.

Druga opcja jest podobna do pierwszej. Firebase jest złożony z kilku modułów. Mamy tu bazę danych, autentykację, storage i inne moduły. Nie zawsze wszystkie na raz w swojej aplikacji chcemy używać. W opcji pierwszej podłączenia jest jeden plik podłączany do naszej aplikacji, natomiast w tym przypadku można podłączyć kilka plików – każdy z modułów z osobna, przy czym możemy sobie wybrać które nas interesują. Jeden moduł jest główny: “firebase-app” i tylko ten jest wymagany. Pozostałe czyli np. firestore, database, auth, functions są opcjonalne i nie musimy ich podłączać do aplikacji. Po linkach, musimy dołączyć (tak jak w pierwszym przypadku) obiekt z detalami połączenia i wywołanie inicjalizacji.

Firebase SDK

Trzeci sposób, jak dla mnie najlepszy, to podanie ścieżek do plików z modułami lecz tym razem nie z bazy CDN lecz z Firebase SDK czyli sformatowanych w sposób: “/__/firebase/{version}/{sdk-file}.js”. W tym przypadku nie trzeba już podawać obiektu konfiguracyjnego z tymi wszystkimi dość wrażliwymi danymi. Jest jeden warunek – aplikacja musi być hostowana na hostingu Firebase. Jeśli aplikacja uruchomiona jest na Twoim zewnętrznym hostingu czy serwerze użyj opcji pierwszej lub drugiej. Trzecia opcja jest bardziej rekomendowana ze względu na prędkość i wydajność. Pliki są serwowane z tego samego serwera co Twoja aplikacja przez protokół HTTP/2 i nie ma opóźnień związanych z dociąganiem jakiś zewnętrznych plików konfiguracyjnych czy koniecznych do samego uruchomienia aplikacji. Jak wrzucić aplikację na hosting Firebase i po co się to robi dowiesz się z innego mojego posta.

Bardziej dogłębny opis oraz dokumentacja znajduje się TUTAJ, gdzie znajdziesz przykłady i dodatkowe informacje. O tym czym jest Firebase pisałem we wcześniejszym wpisie.