W miarę jak zagłębiam się w tworzenie własnych aplikacji i projektów internetowych, Firebase wielokrotnie pojawiało się jako jedna z najlepszych usług backendowych. Zapewnia programistom różnorodne narzędzia i usługi, które pomagają im tworzyć wysokiej jakości aplikacje, powiększać bazę użytkowników i zarabiać. Firebase jest zbudowany na infrastrukturze Google i jest sklasyfikowany jako program bazy danych NoSQL, który przechowuje dane w dokumentach podobnych do JSON.

Warunki wstępne

1. Upewnij się, że masz zainstalowany preferowany edytor kodu lub IDE.
2. Zaloguj się do Firebase przy użyciu swojego konta Google

1. Utwórz projekt Firebase

Zanim dodasz Firebase do swojej aplikacji JavaScript, musisz utworzyć projekt Firebase, aby połączyć się ze swoją aplikacją.

1. W konsoli Firebase kliknij Dodaj projekt , a następnie wybierz lub wprowadź nazwę projektu .
2. Jeśli tworzysz nowy projekt, możesz edytować identyfikator projektu . Firebase automatycznie przypisuje do Twojego projektu Firebase unikalny identyfikator. Po udostępnieniu zasobów przez Firebase dla projektu Firebase nie możesz zmienić identyfikatora projektu.
3. Kliknij Kontynuuj .
4. (Opcjonalnie) Możesz skonfigurować Google Analytics dla swojego projektu, korzystając z dowolnej z następujących usług Firebase:
5. Firebase Crashlytics
6. Prognozy Firebase
7. Wiadomości w chmurze Firebase
8. Wysyłanie wiadomości Firebase w aplikacji
9. Zdalna konfiguracja Firebase
10. Testy A/B Firebase

Zawsze możesz skonfigurować Google Analytics później na karcie Integracje w ustawieniach Ustawienia projektu.

5. Kliknij Utwórz projekt, a Firebase automatycznie udostępni zasoby dla Twojego projektu Firebase. Po zakończeniu procesu zostaniesz przeniesiony na stronę przeglądu projektu Firebase w konsoli Firebase.

2. Zarejestruj swoją aplikację w Firebase

Po utworzeniu projektu Firebase możesz dodać do niego swoją aplikację internetową.

1. Na środku strony przeglądu projektu w konsoli Firebase kliknij ikonę sieci Web ( </> ), aby uruchomić konfigurację.
2. Wpisz nazwę swojej aplikacji. Ta nazwa jest identyfikatorem wewnętrznym i jest widoczna tylko dla Ciebie w konsoli Firebase.
3. (Opcjonalnie) Skonfiguruj Hosting Firebase dla swojej aplikacji internetowej. Możesz to ustawić później, jeśli wolisz to zrobić. Możesz też w dowolnym momencie połączyć swoją aplikację internetową Firebase z witryną Hostingu w ustawieniach projektu . Hosting Firebase nie jest wymagany do korzystania z produktów Firebase w swojej aplikacji internetowej.
4. Kliknij Zarejestruj aplikację .

Firebase udostępnia biblioteki JavaScript dla większości produktów Firebase, w tym Remote Config, FCM i innych. Do swojej aplikacji możesz dodać dowolną z dostępnych bibliotek .

Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od tego, czy korzystasz z Hostingu Firebase w swojej aplikacji, jakich narzędzi używasz w swojej aplikacji (np. pakiet modułów) lub od tego, czy konfigurujesz Node.js aplikacja. Aby uzyskać więcej pomocy przy wyborze między tymi alternatywami, zobacz Sposoby dodawania internetowych SDK do aplikacji .

Na potrzeby tego bloga zagłębię się w to, jak dodać Firebase z npm:

1. Zainstaluj pakiet Firebase JavaScript SDK:
2. Jeśli nie masz jeszcze package.jsonpliku, utwórz go, uruchamiając następujące polecenie z katalogu głównego projektu JavaScript:

npm init

npm install --save firebase

// Firebase App (the core Firebase SDK) is always required and must be listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// import * as firebase from "firebase/app"

// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Oto format obiektu konfiguracyjnego z włączonymi wszystkimi niezbędnymi usługami:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

Jeśli chcesz dowiedzieć się więcej o Firebase, poniżej znajdziesz przydatne linki:

• Poznaj przykładowe aplikacje Firebase .
• Zdobądź praktyczne doświadczenie w internetowym laboratorium Firebase .
• Poznaj kod open source w serwisie GitHub .
• Przejrzyj obsługiwane środowiska dla pakietu Firebase JavaScript SDK.
• Przyspiesz programowanie dzięki dodatkowym bibliotekom open source utrzymywanych przez Firebase , takim jak AngularFire , RxFire i FirebaseUI for web .
• Przygotuj się do uruchomienia aplikacji:

Monitoruj panel użycia i rozliczeń w konsoli Firebase, aby uzyskać ogólny obraz wykorzystania projektu w wielu usługach Firebase.

Przejrzyj listę kontrolną uruchamiania Firebase .

6. Dodawanie Firebase do aplikacji, która już istnieje

Jeśli chcesz dodać usługę Firebase do swojej aplikacji, która już istnieje, oto kilka pomocnych linków:

• Hostuj swoją aplikację w Hostingu Firebase .
• Skonfiguruj przepływ uwierzytelniania użytkowników za pomocą uwierzytelniania .
• Przechowuj dane, takie jak informacje o użytkownikach, w Cloud Firestore lub Bazie danych czasu rzeczywistego .
• Przechowuj pliki, takie jak zdjęcia i filmy, w Cloud Storage .
• Uzyskaj wgląd w problemy z wydajnością swojej aplikacji dzięki funkcji Monitorowanie wydajności .
• Wyzwalaj kod backendu, który działa w bezpiecznym środowisku z Cloud Functions .
• Wysyłaj powiadomienia za pomocą Wiadomości w chmurze .