1. Przegląd
W tym laboratorium z programowania dowiesz się, jak używać Firebase do łatwego tworzenia aplikacji internetowych poprzez implementację i wdrażanie klienta czatu przy użyciu produktów i usług Firebase.
Czego się nauczysz
- Synchronizuj dane za pomocą Cloud Firestore i Cloud Storage for Firebase.
- Uwierzytelnij swoich użytkowników za pomocą Uwierzytelniania Firebase.
- Wdróż swoją aplikację internetową w Hostingu Firebase.
- Wysyłaj powiadomienia za pomocą Firebase Cloud Messaging.
- Zbierz dane o wydajności swojej aplikacji internetowej.
Co będziesz potrzebował
- Wybrany edytor IDE/tekstu, taki jak WebStorm , Atom , Sublime lub VS Code
- Menedżer pakietów npm , który zazwyczaj jest dostarczany z Node.js
- Terminal/konsola
- Wybrana przeglądarka, taka jak Chrome
- Przykładowy kod ćwiczenia z programowania (zobacz następny krok ćwiczenia z programowania, aby dowiedzieć się, jak uzyskać kod).
2. Pobierz przykładowy kod
Sklonuj repozytorium GitHub laboratorium kodowania z wiersza poleceń:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatywnie, jeśli nie masz zainstalowanego git, możesz pobrać repozytorium jako plik ZIP .
Zaimportuj aplikację startową
Używając swojego IDE, otwórz lub zaimportuj 📁 katalog web-start
ze sklonowanego repozytorium. Ten katalog web-start
zawiera kod startowy do ćwiczeń z programowania, które będą w pełni funkcjonalną aplikacją do czatowania.
3. Utwórz i skonfiguruj projekt Firebase
Utwórz projekt Firebase
- Zaloguj się do Firebase .
- W konsoli Firebase kliknij Dodaj projekt , a następnie nadaj projektowi Firebase nazwę FriendlyChat . Zapamiętaj identyfikator projektu Firebase.
- Odznacz Włącz Google Analytics dla tego projektu
- Kliknij opcję Utwórz projekt .
Aplikacja, którą zamierzamy zbudować, korzysta z produktów Firebase dostępnych dla aplikacji internetowych:
- Uwierzytelnianie Firebase , aby łatwo umożliwić użytkownikom logowanie się w Twojej aplikacji.
- Cloud Firestore do zapisywania uporządkowanych danych w chmurze i otrzymywania natychmiastowych powiadomień o zmianie danych.
- Cloud Storage dla Firebase do zapisywania plików w chmurze.
- Hosting Firebase do hostowania i obsługi Twoich zasobów.
- Firebase Cloud Messaging do wysyłania powiadomień push i wyświetlania powiadomień w wyskakujących okienkach przeglądarki.
- Monitorowanie wydajności Firebase do zbierania danych o wydajności użytkowników dla Twojej aplikacji.
Niektóre z tych produktów wymagają specjalnej konfiguracji lub muszą być włączone za pomocą konsoli Firebase.
Dodaj do projektu aplikację internetową Firebase
- Kliknij ikonę sieci
aby utworzyć nową aplikację internetową Firebase.
- Zarejestruj aplikację pod pseudonimem Przyjazny czat , a następnie zaznacz pole obok opcji Skonfiguruj też Hosting Firebase dla tej aplikacji . Kliknij Zarejestruj aplikację .
- W następnym kroku zobaczysz obiekt konfiguracyjny. Skopiuj tylko obiekt JS (nie otaczający go HTML) do firebase-config.js
Włącz logowanie przez Google na potrzeby Uwierzytelniania Firebase
Aby umożliwić użytkownikom logowanie się do aplikacji internetowej za pomocą swoich kont Google, użyjemy metody logowania Google .
Musisz włączyć logowanie przez Google :
- W konsoli Firebase znajdź sekcję Build w lewym panelu.
- Kliknij Uwierzytelnianie , a następnie kliknij kartę Metoda logowania (lub kliknij tutaj, aby przejść bezpośrednio do tego miejsca).
- Włącz dostawcę logowania Google , a następnie kliknij Zapisz .
- Ustaw publiczną nazwę swojej aplikacji na Przyjazny czat i wybierz z menu adres e-mail wsparcia projektu .
- Skonfiguruj ekran akceptacji OAuth w Google Cloud Console i dodaj logo:
Włącz Cloud Firestore
Aplikacja internetowa używa Cloud Firestore do zapisywania wiadomości na czacie i odbierania nowych wiadomości na czacie.
Musisz włączyć Cloud Firestore:
- W sekcji Buduj w konsoli Firebase kliknij Baza danych Firestore .
- Kliknij Utwórz bazę danych w panelu Cloud Firestore.
- Wybierz opcję Uruchom w trybie testowym , a następnie kliknij Dalej po przeczytaniu zastrzeżenia dotyczącego reguł bezpieczeństwa.
Tryb testowy zapewnia, że możemy swobodnie pisać do bazy danych podczas tworzenia. W dalszej części tego ćwiczenia z programowania nasza baza danych będzie bezpieczniejsza.
- Ustaw lokalizację, w której przechowywane są Twoje dane Cloud Firestore. Możesz pozostawić to ustawienie domyślne lub wybrać region blisko Ciebie. Kliknij Gotowe , aby udostępnić Firestore.
Włącz przechowywanie w chmurze
Aplikacja internetowa korzysta z Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.
Musisz włączyć Cloud Storage:
- W sekcji Kompilacja konsoli Firebase kliknij Pamięć .
- Jeśli nie ma przycisku Rozpocznij , oznacza to, że przechowywanie w chmurze jest już włączone i nie musisz wykonywać poniższych czynności.
- Kliknij Rozpocznij .
- Przeczytaj zastrzeżenie dotyczące reguł bezpieczeństwa dla swojego projektu Firebase, a następnie kliknij Dalej .
Dzięki domyślnym regułom bezpieczeństwa każdy uwierzytelniony użytkownik może zapisywać wszystko w Cloud Storage. W dalszej części tego ćwiczenia z programowania zwiększymy bezpieczeństwo naszego magazynu.
- Lokalizacja Cloud Storage jest wstępnie wybrana z tym samym regionem, który wybrałeś dla bazy danych Cloud Firestore. Kliknij Gotowe , aby zakończyć konfigurację.
4. Zainstaluj interfejs wiersza poleceń Firebase
Interfejs wiersza poleceń (CLI) Firebase umożliwia korzystanie z Hostingu Firebase do lokalnego udostępniania aplikacji internetowej, a także do wdrażania aplikacji internetowej w projekcie Firebase.
- Zainstaluj interfejs wiersza polecenia, uruchamiając następujące polecenie npm:
npm -g install firebase-tools
- Sprawdź, czy interfejs wiersza polecenia został poprawnie zainstalowany, uruchamiając następujące polecenie:
firebase --version
Upewnij się, że wersja interfejsu Firebase CLI to 4.1.0 lub nowsza.
- Autoryzuj Firebase CLI, uruchamiając następujące polecenie:
firebase login
Skonfigurowaliśmy szablon aplikacji internetowej, aby pobrać konfigurację Twojej aplikacji dla Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium sklonowanego wcześniej w laboratorium programowania). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.
- Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu
web-start
Twojej aplikacji. - Powiąż swoją aplikację z projektem Firebase, uruchamiając następujące polecenie:
firebase use --add
- Po wyświetleniu monitu wybierz identyfikator projektu , a następnie nadaj projektowi Firebase alias.
Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, tymczasowych itp.). Jednak w tym ćwiczeniu z programowania użyjmy po prostu aliasu default
.
- Postępuj zgodnie z pozostałymi instrukcjami w wierszu poleceń.
5. Uruchom aplikację startową lokalnie
Teraz, po zaimportowaniu i skonfigurowaniu projektu, możesz po raz pierwszy uruchomić aplikację internetową.
- W konsoli z katalogu
web-start
uruchom następujące polecenie Firebase CLI:
firebase serve --only hosting
- Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
✔ hosting: Local server: http://localhost:5000
Korzystamy z emulatora Firebase Hosting , aby lokalnie obsługiwać naszą aplikację. Aplikacja internetowa powinna być teraz dostępna pod adresem http://localhost:5000 . Obsługiwane są wszystkie pliki znajdujące się w podkatalogu public
.
- W przeglądarce otwórz aplikację pod adresem http://localhost:5000 .
Powinieneś zobaczyć interfejs użytkownika aplikacji FriendlyChat, który (jeszcze!) nie działa:
Aplikacja nie może teraz nic zrobić, ale z Twoją pomocą wkrótce to zrobi! Jak dotąd przygotowaliśmy dla Ciebie tylko interfejs użytkownika.
Zbudujmy teraz czat w czasie rzeczywistym!
6. Importuj i konfiguruj Firebase
Zaimportuj pakiet SDK Firebase
Musimy zaimportować pakiet Firebase SDK do aplikacji. Można to zrobić na wiele sposobów, zgodnie z opisem w naszej dokumentacji . Na przykład możesz zaimportować bibliotekę z naszego CDN. Możesz też zainstalować go lokalnie za pomocą npm, a następnie spakować w swojej aplikacji, jeśli używasz Browserify.
Pozyskamy pakiet Firebase SDK od npm i użyjemy pakietu Webpack do spakowania naszego kodu. Robimy to, aby Webpack mógł usunąć niepotrzebny kod, utrzymując mały rozmiar pakietu JS, aby nasza aplikacja ładowała się tak szybko, jak to możliwe. Na potrzeby tego ćwiczenia z programowania utworzyliśmy już plik web-start/package.json
, który zawiera pakiet SDK Firebase jako zależność, a także zaimportowaliśmy potrzebne funkcje u góry web-start/src/index.js
.
pakiet.json
"dependencies": {
"firebase": "^9.0.0"
}
index.js
import { initializeApp } from 'firebase/app';
import {
getAuth,
onAuthStateChanged,
GoogleAuthProvider,
signInWithPopup,
signOut,
} from 'firebase/auth';
import {
getFirestore,
collection,
addDoc,
query,
orderBy,
limit,
onSnapshot,
setDoc,
updateDoc,
doc,
serverTimestamp,
} from 'firebase/firestore';
import {
getStorage,
ref,
uploadBytesResumable,
getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';
Podczas tego ćwiczenia z programowania będziemy używać uwierzytelniania Firebase, Cloud Firestore, Cloud Storage, Cloud Messaging i monitorowania wydajności, więc importujemy wszystkie ich biblioteki. W przyszłych aplikacjach upewnij się, że importujesz tylko te części Firebase, których potrzebujesz, aby skrócić czas ładowania aplikacji.
Zainstaluj pakiet Firebase SDK i rozpocznij tworzenie pakietu Webpack
Musimy uruchomić kilka poleceń, aby uruchomić kompilację naszej aplikacji.
- Otwórz nowe okno terminala
- Upewnij się, że jesteś w katalogu
web-start
- Uruchom
npm install
, aby pobrać pakiet Firebase SDK - Uruchom
npm run start
, aby uruchomić pakiet Webpack. Webpack będzie teraz stale przebudowywał nasz kod źródłowy na resztę ćwiczeń z programowania.
Skonfiguruj Firebase
Musimy też skonfigurować pakiet Firebase SDK, aby poinformować go, którego projektu Firebase używamy.
- Przejdź do ustawień projektu w konsoli Firebase
- Na karcie „Twoje aplikacje” wybierz pseudonim aplikacji, dla której potrzebujesz obiektu konfiguracyjnego.
- Wybierz „Konfiguracja” w okienku fragmentu kodu SDK Firebase.
- Skopiuj fragment kodu obiektu config, a następnie dodaj go do
web-start/src/firebase-config.js
.
firebase-config.js
const config = {
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",
};
Teraz przejdź na dół web-start/src/index.js
i zainicjuj Firebase:
index.js
const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);
7. Skonfiguruj logowanie użytkownika
Pakiet Firebase SDK powinien być teraz gotowy do użycia, ponieważ został zaimportowany i zainicjowany w index.js
. Teraz zaimplementujemy logowanie użytkowników przy użyciu Uwierzytelniania Firebase .
Uwierzytelnij swoich użytkowników za pomocą Google Sign-In
W aplikacji, gdy użytkownik kliknie przycisk Zaloguj się przez Google , signIn
jest funkcja logowania. (Już to dla Ciebie skonfigurowaliśmy!) Na potrzeby tego ćwiczenia z programowania chcemy zezwolić Firebase na używanie Google jako dostawcy tożsamości. Użyjemy wyskakującego okienka, ale w Firebase dostępnych jest kilka innych metod .
- W katalogu
web-start
, w podkatalogusrc/
otwórzindex.js
. - Znajdź funkcję
signIn
. - Zastąp całą funkcję następującym kodem.
index.js
// Signs-in Friendly Chat.
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider);
}
Funkcja signOut
jest uruchamiana, gdy użytkownik kliknie przycisk Wyloguj .
- Wróć do pliku
src/index.js
. - Znajdź funkcję
signOutUser
. - Zastąp całą funkcję następującym kodem.
index.js
// Signs-out of Friendly Chat.
function signOutUser() {
// Sign out of Firebase.
signOut(getAuth());
}
Śledź stan uwierzytelniania
Aby odpowiednio zaktualizować nasz interfejs użytkownika, potrzebujemy sposobu na sprawdzenie, czy użytkownik jest zalogowany, czy wylogowany. Dzięki Uwierzytelnianiu Firebase możesz zarejestrować obserwatora w stanie uwierzytelniania, który będzie wyzwalany przy każdej zmianie stanu uwierzytelniania.
- Wróć do pliku
src/index.js
. - Znajdź funkcję
initFirebaseAuth
. - Zastąp całą funkcję następującym kodem.
index.js
// Initialize firebase auth
function initFirebaseAuth() {
// Listen to auth state changes.
onAuthStateChanged(getAuth(), authStateObserver);
}
Powyższy kod rejestruje funkcję authStateObserver
jako obserwatora stanu uwierzytelniania. Będzie wyzwalane za każdym razem, gdy zmieni się stan uwierzytelniania (gdy użytkownik zaloguje się lub wyloguje). W tym momencie zaktualizujemy interfejs użytkownika, aby wyświetlał lub ukrywał przycisk logowania, przycisk wylogowania, zdjęcie profilowe zalogowanego użytkownika i tak dalej. Wszystkie te części interfejsu użytkownika zostały już zaimplementowane.
Wyświetl informacje o zalogowanym użytkowniku
Chcemy wyświetlać zdjęcie profilowe i nazwę zalogowanego użytkownika na górnym pasku naszej aplikacji. W Firebase dane zalogowanego użytkownika są zawsze dostępne w obiekcie currentUser
. Wcześniej skonfigurowaliśmy funkcję authStateObserver
, która ma być wyzwalana, gdy użytkownik się zaloguje, aby nasz interfejs użytkownika odpowiednio się zaktualizował. Po uruchomieniu wywoła getProfilePicUrl
i getUserName
.
- Wróć do pliku
src/index.js
. - Znajdź funkcje
getProfilePicUrl
igetUserName
. - Zastąp obie funkcje następującym kodem.
index.js
// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}
// Returns the signed-in user's display name.
function getUserName() {
return getAuth().currentUser.displayName;
}
Wyświetlamy komunikat o błędzie, jeśli użytkownik próbuje wysyłać wiadomości, gdy użytkownik nie jest zalogowany. (Możesz jednak spróbować!). Musimy więc sprawdzić, czy użytkownik jest rzeczywiście zalogowany.
- Wróć do pliku
src/index.js
. - Znajdź funkcję
isUserSignedIn
. - Zastąp całą funkcję następującym kodem.
index.js
// Returns true if a user is signed-in.
function isUserSignedIn() {
return !!getAuth().currentUser;
}
Przetestuj logowanie do aplikacji
- Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom
firebase serve --only hosting
w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce. - Zaloguj się do aplikacji za pomocą przycisku logowania i swojego konta Google. Jeśli zobaczysz komunikat o błędzie z informacją, że
auth/operation-not-allowed
, upewnij się, że w konsoli Firebase włączono Logowanie przez Google jako dostawcę uwierzytelniania. - Po zalogowaniu powinno zostać wyświetlone Twoje zdjęcie profilowe i nazwa użytkownika:
8. Napisz wiadomości do Cloud Firestore
W tej sekcji zapiszemy pewne dane w Cloud Firestore, abyśmy mogli wypełnić interfejs aplikacji. Można to zrobić ręcznie w konsoli Firebase , ale zrobimy to w samej aplikacji, aby zademonstrować podstawowy zapis w Cloud Firestore.
Model danych
Dane Cloud Firestore są podzielone na kolekcje, dokumenty, pola i podkolekcje. Każdą wiadomość z czatu będziemy przechowywać jako dokument w zbiorze najwyższego poziomu o nazwie messages
.
Dodaj wiadomości do Cloud Firestore
Do przechowywania wiadomości czatu napisanych przez użytkowników użyjemy Cloud Firestore .
W tej sekcji dodasz funkcjonalność umożliwiającą użytkownikom pisanie nowych wiadomości w Twojej bazie danych. Kliknięcie przycisku WYŚLIJ przez użytkownika spowoduje uruchomienie poniższego fragmentu kodu. Dodaje obiekt komunikatu z zawartością pól komunikatów do instancji Cloud Firestore w kolekcji messages
. Metoda add()
dodaje do kolekcji nowy dokument z automatycznie wygenerowanym identyfikatorem.
- Wróć do pliku
src/index.js
. - Znajdź funkcję
saveMessage
. - Zastąp całą funkcję następującym kodem.
index.js
// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
// Add a new message entry to the Firebase database.
try {
await addDoc(collection(getFirestore(), 'messages'), {
name: getUserName(),
text: messageText,
profilePicUrl: getProfilePicUrl(),
timestamp: serverTimestamp()
});
}
catch(error) {
console.error('Error writing new message to Firebase Database', error);
}
}
Przetestuj wysyłanie wiadomości
- Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom
firebase serve --only hosting
w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce. - Po zalogowaniu wpisz wiadomość, na przykład „Cześć!”, a następnie kliknij WYŚLIJ . Spowoduje to zapisanie wiadomości w Cloud Firestore. Jednak nie zobaczysz jeszcze danych w rzeczywistej aplikacji internetowej , ponieważ nadal musimy zaimplementować pobieranie danych (następna sekcja ćwiczenia z programowania).
- Nowo dodaną wiadomość możesz zobaczyć w konsoli Firebase. Otwórz konsolę Firebase. W sekcji Budowanie kliknij Baza danych Firestore (lub kliknij tutaj i wybierz swój projekt) i powinieneś zobaczyć kolekcję wiadomości z nowo dodaną wiadomością:
9. Przeczytaj wiadomości
Synchronizuj wiadomości
Aby czytać wiadomości w aplikacji, musimy dodać detektory, które uruchamiają się po zmianie danych, a następnie utworzyć element interfejsu użytkownika, który pokazuje nowe wiadomości.
Dodamy kod, który nasłuchuje nowo dodanych wiadomości z aplikacji. W tym kodzie zarejestrujemy odbiornik, który nasłuchuje zmian wprowadzonych do danych. Wyświetlimy tylko 12 ostatnich wiadomości czatu, aby uniknąć wyświetlania bardzo długiej historii po załadowaniu.
- Wróć do pliku
src/index.js
. - Znajdź funkcję
loadMessages
. - Zastąp całą funkcję następującym kodem.
index.js
// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
// Create the query to load the last 12 messages and listen for new ones.
const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
// Start listening to the query.
onSnapshot(recentMessagesQuery, function(snapshot) {
snapshot.docChanges().forEach(function(change) {
if (change.type === 'removed') {
deleteMessage(change.doc.id);
} else {
var message = change.doc.data();
displayMessage(change.doc.id, message.timestamp, message.name,
message.text, message.profilePicUrl, message.imageUrl);
}
});
});
}
Aby nasłuchiwać wiadomości w bazie danych, tworzymy zapytanie dotyczące kolekcji, używając funkcji collection
, aby określić, w której kolekcji znajdują się dane, których chcemy nasłuchiwać. W powyższym kodzie nasłuchujemy zmian w messages
kolekcja, w której przechowywane są wiadomości czatu. Stosujemy również limit, słuchając tylko ostatnich 12 wiadomości za pomocą .limit(12)
i porządkując wiadomości według daty za pomocą orderBy('timestamp', 'desc')
aby uzyskać 12 najnowszych wiadomości.
Funkcja onSnapshot
przyjmuje zapytanie jako pierwszy parametr, a funkcję zwrotną jako drugi. Funkcja wywołania zwrotnego zostanie wyzwolona, gdy nastąpią jakiekolwiek zmiany w dokumentach pasujących do zapytania. Może tak być, gdy wiadomość zostanie usunięta, zmodyfikowana lub dodana. Więcej na ten temat możesz przeczytać w dokumentacji Cloud Firestore .
Przetestuj synchronizację wiadomości
- Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom
firebase serve --only hosting
w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce. - Wiadomości utworzone wcześniej w bazie danych powinny być wyświetlane w interfejsie użytkownika FriendlyChat (patrz poniżej). Zapraszam do pisania nowych wiadomości; powinny pojawić się natychmiast.
- (Opcjonalnie) Możesz spróbować ręcznie usunąć, zmodyfikować lub dodać nowe wiadomości bezpośrednio w sekcji Baza danych w konsoli Firebase; wszelkie zmiany powinny być odzwierciedlone w interfejsie użytkownika.
Gratulacje! Czytasz dokumenty Cloud Firestore w swojej aplikacji!
10. Wyślij obrazy
Dodamy teraz funkcję, która udostępnia obrazy.
Chociaż Cloud Firestore dobrze nadaje się do przechowywania uporządkowanych danych, Cloud Storage lepiej nadaje się do przechowywania plików. Cloud Storage dla Firebase to usługa przechowywania plików/obiektów BLOB, której będziemy używać do przechowywania wszelkich obrazów udostępnianych przez użytkownika za pomocą naszej aplikacji.
Zapisz obrazy w Cloud Storage
Na potrzeby tego ćwiczenia z programowania dodaliśmy już dla Ciebie przycisk, który uruchamia okno dialogowe wyboru plików. Po wybraniu pliku wywoływana jest funkcja saveImageMessage
i można uzyskać odwołanie do wybranego pliku. Funkcja saveImageMessage
realizuje następujące czynności:
- Tworzy „zastępczą” wiadomość czatu w kanale czatu, dzięki czemu użytkownicy zobaczą animację „Ładowanie” podczas przesyłania obrazu.
- Przesyła plik obrazu do Cloud Storage na tę ścieżkę:
/<uid>/<messageId>/<file_name>
- Generuje publicznie dostępny adres URL dla pliku obrazu.
- Aktualizuje wiadomość czatu o adres URL nowo przesłanego pliku obrazu zamiast tymczasowego wczytywania obrazu.
Teraz dodasz funkcję wysyłania obrazu:
- Wróć do pliku
src/index.js
. - Znajdź funkcję
saveImageMessage
. - Zastąp całą funkcję następującym kodem.
index.js
// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
try {
// 1 - We add a message with a loading icon that will get updated with the shared image.
const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
name: getUserName(),
imageUrl: LOADING_IMAGE_URL,
profilePicUrl: getProfilePicUrl(),
timestamp: serverTimestamp()
});
// 2 - Upload the image to Cloud Storage.
const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
const newImageRef = ref(getStorage(), filePath);
const fileSnapshot = await uploadBytesResumable(newImageRef, file);
// 3 - Generate a public URL for the file.
const publicImageUrl = await getDownloadURL(newImageRef);
// 4 - Update the chat message placeholder with the image's URL.
await updateDoc(messageRef,{
imageUrl: publicImageUrl,
storageUri: fileSnapshot.metadata.fullPath
});
} catch (error) {
console.error('There was an error uploading a file to Cloud Storage:', error);
}
}
Przetestuj wysyłanie obrazów
- Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom
firebase serve --only hosting
w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce. - Po zalogowaniu kliknij przycisk przesyłania obrazu
i wybierz plik obrazu za pomocą selektora plików. Jeśli szukasz zdjęcia, możesz użyć tego ładnego zdjęcia filiżanki do kawy .
- W interfejsie aplikacji powinna pojawić się nowa wiadomość z wybranym obrazem:
Jeśli spróbujesz dodać obraz, nie będąc zalogowanym, powinieneś zobaczyć powiadomienie Toast z informacją, że musisz się zalogować, aby dodać obrazy.
11. Pokaż powiadomienia
Dodamy teraz obsługę powiadomień przeglądarki. Aplikacja powiadomi użytkowników, gdy na czacie pojawią się nowe wiadomości. Firebase Cloud Messaging (FCM) to wieloplatformowe rozwiązanie do przesyłania wiadomości, które umożliwia niezawodne dostarczanie wiadomości i powiadomień bez żadnych kosztów.
Dodaj pracownika serwisu FCM
Aplikacja internetowa potrzebuje pracownika serwisu, który będzie odbierać i wyświetlać powiadomienia internetowe.
- Z katalogu
web-start
, w katalogusrc
, otwórzfirebase-messaging-sw.js
. - Dodaj następującą zawartość do tego pliku.
firebase-messaging-sw.js
// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';
const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');
Pracownik serwisu musi po prostu załadować i zainicjować pakiet Firebase Cloud Messaging SDK, który zajmie się wyświetlaniem powiadomień.
Uzyskaj tokeny urządzeń FCM
Po włączeniu powiadomień na urządzeniu lub w przeglądarce otrzymasz token urządzenia . Ten token urządzenia jest używany do wysyłania powiadomień do określonego urządzenia lub określonej przeglądarki.
Gdy użytkownik się loguje, wywołujemy funkcję saveMessagingDeviceToken
. Tam otrzymamy token urządzenia FCM z przeglądarki i zapiszemy go w Cloud Firestore.
- Wróć do pliku
src/index.js
. - Znajdź funkcję
saveMessagingDeviceToken
. - Zastąp całą funkcję następującym kodem.
index.js
// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
try {
const currentToken = await getToken(getMessaging());
if (currentToken) {
console.log('Got FCM device token:', currentToken);
// Saving the Device Token to Cloud Firestore.
const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
await setDoc(tokenRef, { uid: getAuth().currentUser.uid });
// This will fire when a message is received while the app is in the foreground.
// When the app is in the background, firebase-messaging-sw.js will receive the message instead.
onMessage(getMessaging(), (message) => {
console.log(
'New foreground notification from Firebase Messaging!',
message.notification
);
});
} else {
// Need to request permissions to show notifications.
requestNotificationsPermissions();
}
} catch(error) {
console.error('Unable to get messaging token.', error);
};
}
Jednak ten kod nie będzie działał początkowo. Aby Twoja aplikacja mogła pobrać token urządzenia, użytkownik musi przyznać Twojej aplikacji uprawnienia do wyświetlania powiadomień (następny krok ćwiczenia z programowania).
Poproś o uprawnienia do wyświetlania powiadomień
Jeśli użytkownik nie przyznał jeszcze Twojej aplikacji uprawnień do wyświetlania powiadomień, nie otrzymasz tokena urządzenia. W tym przypadku wywołujemy metodę firebase.messaging().requestPermission()
, która wyświetli okno dialogowe przeglądarki z prośbą o zezwolenie ( w obsługiwanych przeglądarkach ).
- Wróć do pliku
src/index.js
. - Znajdź funkcję
requestNotificationsPermissions
. - Zastąp całą funkcję następującym kodem.
index.js
// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
console.log('Requesting notifications permission...');
const permission = await Notification.requestPermission();
if (permission === 'granted') {
console.log('Notification permission granted.');
// Notification permission granted.
await saveMessagingDeviceToken();
} else {
console.log('Unable to get permission to notify.');
}
}
Uzyskaj token urządzenia
- Jeśli Twoja aplikacja jest nadal obsługiwana, odśwież ją w przeglądarce. W przeciwnym razie uruchom
firebase serve --only hosting
w wierszu poleceń, aby rozpocząć udostępnianie aplikacji z adresu http://localhost:5000 , a następnie otwórz ją w przeglądarce. - Po zalogowaniu powinno pojawić się okno dialogowe uprawnień do powiadomień:
- Kliknij Zezwól .
- Otwórz konsolę JavaScript w swojej przeglądarce. Powinien pojawić się następujący komunikat:
Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
- Skopiuj token urządzenia. Będziesz go potrzebować w następnym etapie ćwiczenia z kodowania.
Wyślij powiadomienie na swoje urządzenie
Teraz, gdy masz już token urządzenia, możesz wysłać powiadomienie.
- Otwórz kartę Wiadomości w chmurze w konsoli Firebase .
- Kliknij „Nowe powiadomienie”
- Wprowadź tytuł i tekst powiadomienia.
- Po prawej stronie ekranu kliknij „wyślij wiadomość testową”
- Wprowadź token urządzenia skopiowany z konsoli JavaScript przeglądarki, a następnie kliknij znak plus („+”)
- Kliknij "testuj"
Jeśli Twoja aplikacja jest na pierwszym planie, zobaczysz powiadomienie w konsoli JavaScript.
Jeśli Twoja aplikacja działa w tle, w przeglądarce powinno pojawić się powiadomienie, jak w tym przykładzie:
12. Zasady bezpieczeństwa Cloud Firestore
Zobacz zasady bezpieczeństwa bazy danych
Cloud Firestore używa określonego języka reguł do definiowania praw dostępu, zabezpieczeń i sprawdzania poprawności danych.
Konfigurując projekt Firebase na początku tego ćwiczenia z programowania, zdecydowaliśmy się użyć domyślnych reguł bezpieczeństwa „Trybu testowego”, aby nie ograniczać dostępu do magazynu danych. W konsoli Firebase na karcie Reguły w sekcji Baza danych możesz przeglądać i modyfikować te reguły.
W tej chwili powinieneś zobaczyć domyślne reguły, które nie ograniczają dostępu do datastore. Oznacza to, że każdy użytkownik może odczytywać i zapisywać dowolne kolekcje w Twoim magazynie danych.
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Zaktualizujemy zasady, aby ograniczyć pewne rzeczy, korzystając z następujących zasad:
firestore.zasady
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Messages:
// - Anyone can read.
// - Authenticated users can add and edit messages.
// - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
// - Deletes are not allowed.
match /messages/{messageId} {
allow read;
allow create, update: if request.auth != null
&& request.resource.data.name == request.auth.token.name
&& (request.resource.data.text is string
&& request.resource.data.text.size() <= 300
|| request.resource.data.imageUrl is string
&& request.resource.data.imageUrl.matches('https?://.*'));
allow delete: if false;
}
// FCM Tokens:
// - Anyone can write their token.
// - Reading list of tokens is not allowed.
match /fcmTokens/{token} {
allow read: if false;
allow write;
}
}
}
Zaktualizuj reguły bezpieczeństwa bazy danych
Istnieją dwa sposoby edytowania reguł zabezpieczeń bazy danych: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego przy użyciu interfejsu wiersza polecenia Firebase.
Aby zaktualizować reguły bezpieczeństwa w konsoli Firebase:
- Przejdź do sekcji Baza danych z lewego panelu, a następnie kliknij zakładkę Reguły .
- Zastąp domyślne reguły, które są już w konsoli, regułami pokazanymi powyżej.
- Kliknij Opublikuj .
Aby zaktualizować reguły bezpieczeństwa z pliku lokalnego:
- Z katalogu
web-start
otwórzfirestore.rules
. - Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
- Z katalogu
web-start
otwórzfirebase.json
. - Dodaj atrybut
firestore.rules
wskazujący nafirestore.rules
, jak pokazano poniżej. (Atrybuthosting
powinien już znajdować się w pliku).
firebase.json
{
// Add this!
"firestore": {
"rules": "firestore.rules"
},
"hosting": {
"public": "./public"
}
}
- Wdróż reguły zabezpieczeń za pomocą interfejsu wiersza polecenia Firebase, uruchamiając następujące polecenie:
firebase deploy --only firestore
- Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
=== Deploying to 'friendlychat-1234'...
i deploying firestore
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i firestore: uploading rules firestore.rules...
✔ firestore: released rules firestore.rules to cloud.firestore
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
13. Zasady bezpieczeństwa Cloud Storage
Zobacz zasady bezpieczeństwa Cloud Storage
Cloud Storage dla Firebase używa określonego języka reguł do definiowania praw dostępu, zabezpieczeń i sprawdzania poprawności danych.
Podczas konfigurowania projektu Firebase na początku tego ćwiczenia z programowania zdecydowaliśmy się użyć domyślnej reguły zabezpieczeń Cloud Storage, która zezwala na korzystanie z Cloud Storage tylko uwierzytelnionym użytkownikom. W konsoli Firebase na karcie Reguły w sekcji Pamięć masowa możesz przeglądać i modyfikować reguły. Powinna być widoczna domyślna reguła, która umożliwia każdemu zalogowanemu użytkownikowi odczytywanie i zapisywanie dowolnych plików w zasobniku na dane.
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
Zaktualizujemy zasady, aby wykonać następujące czynności:
- Pozwól każdemu użytkownikowi pisać tylko do jego własnych folderów
- Zezwalaj wszystkim na czytanie z Cloud Storage
- Upewnij się, że przesłane pliki są obrazami
- Ogranicz rozmiar przesyłanych obrazów do maksymalnie 5 MB
Można to zrealizować za pomocą następujących zasad:
zasady.magazynowania
rules_version = '2';
// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{messageId}/{fileName} {
allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}
Zaktualizuj reguły bezpieczeństwa Cloud Storage
Istnieją dwa sposoby edytowania reguł zabezpieczeń magazynu: w konsoli Firebase lub z lokalnego pliku reguł wdrożonego przy użyciu interfejsu wiersza polecenia Firebase.
Aby zaktualizować reguły bezpieczeństwa w konsoli Firebase:
- Przejdź do sekcji Przechowywanie z lewego panelu, a następnie kliknij zakładkę Reguły .
- Zastąp domyślną regułę, która jest już w konsoli, regułami pokazanymi powyżej.
- Kliknij Opublikuj .
Aby zaktualizować reguły bezpieczeństwa z pliku lokalnego:
- Z katalogu
web-start
otwórzstorage.rules
. - Zastąp domyślne reguły, które już znajdują się w pliku, regułami pokazanymi powyżej.
- Z katalogu
web-start
otwórzfirebase.json
. - Dodaj atrybut
storage.rules
wskazujący na plikstorage.rules
, jak pokazano poniżej. (Atrybuthosting
idatabase
powinien już znajdować się w pliku).
firebase.json
{
// If you went through the "Cloud Firestore Security Rules" step.
"firestore": {
"rules": "firestore.rules"
},
// Add this!
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./public"
}
}
- Wdróż reguły zabezpieczeń za pomocą interfejsu wiersza polecenia Firebase, uruchamiając następujące polecenie:
firebase deploy --only storage
- Twój wiersz poleceń powinien wyświetlić następującą odpowiedź:
=== Deploying to 'friendlychat-1234'...
i deploying storage
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i storage: uploading rules storage.rules...
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
14. Zbierz dane dotyczące wydajności
Możesz użyć pakietu SDK do monitorowania wydajności, aby zbierać rzeczywiste dane o wydajności aplikacji, a następnie przeglądać i analizować te dane w konsoli Firebase. Monitorowanie wydajności pomaga zrozumieć, gdzie i kiedy można poprawić wydajność aplikacji, dzięki czemu można wykorzystać te informacje do rozwiązania problemów z wydajnością.
Istnieje kilka sposobów integracji z pakietem SDK Firebase Performance Monitoring JavaScript. W tym laboratorium programowania włączyliśmy monitorowanie wydajności z hostowanych adresów URL . Zapoznaj się z dokumentacją , aby poznać inne metody włączania zestawu SDK.
Automatyczne ślady
Ponieważ już importujemy getPerformance
na górze web-start/src/index.js
, musimy tylko dodać jedną linię, aby powiedzieć Monitoringowi wydajności, aby automatycznie zbierał metryki ładowania strony i żądań sieciowych, gdy użytkownicy odwiedzają wdrożoną witrynę!
- W
web-start/src/index.js
dodaj następujący wiersz poniżej istniejącegoTODO
, aby zainicjować Performance Monitoring.
index.js
// TODO: Enable Firebase Performance Monitoring.
getPerformance();
Zmierz opóźnienie pierwszego wejścia (opcjonalnie)
Opóźnienie pierwszego wejścia jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenie na temat responsywności aplikacji.
Opóźnienie pierwszego wejścia rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, np. klika przycisk lub hiperłącze. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie odpowiedzieć na dane wejściowe, co oznacza, że przeglądarka nie jest zajęta ładowaniem ani analizowaniem zawartości Twojej strony.
Jeśli chcesz zmierzyć opóźnienie pierwszego wejścia, musisz bezpośrednio dołączyć poniższy kod.
- Otwórz
public/index.html
. - Odkomentuj tag
script
w następnym wierszu.
<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>
Aby dowiedzieć się więcej na temat pierwszego wypełnienia z opóźnieniem wejściowym, zajrzyj do dokumentacji .
Wyświetl dane o wydajności
Ponieważ witryna nie została jeszcze wdrożona (wdrożysz ją w następnym kroku), oto zrzut ekranu przedstawiający dane dotyczące wydajności wczytywania strony, które zobaczysz w konsoli Firebase w ciągu 30 minut od interakcji użytkowników z wdrożoną witryną :
Po zintegrowaniu zestawu SDK monitorowania wydajności z aplikacją nie musisz pisać żadnego innego kodu, zanim aplikacja zacznie automatycznie monitorować kilka krytycznych aspektów wydajności. W przypadku aplikacji internetowych zestaw SDK rejestruje takie aspekty, jak pierwsze malowanie treści, możliwość interakcji użytkowników z Twoją aplikacją i nie tylko.
Możesz także skonfigurować niestandardowe ślady, metryki i atrybuty, aby mierzyć określone aspekty swojej aplikacji. Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o niestandardowych śladach i metrykach oraz niestandardowych atrybutach .
15. Wdróż aplikację za pomocą Hostingu Firebase
Firebase oferuje usługę hostingu do obsługi Twoich zasobów i aplikacji internetowych. Możesz wdrożyć swoje pliki w Hostingu Firebase za pomocą interfejsu wiersza polecenia Firebase. Przed wdrożeniem musisz określić w pliku firebase.json
, które pliki lokalne mają zostać wdrożone. W przypadku tego ćwiczenia z programowania zrobiliśmy to już za Ciebie, ponieważ ten krok był wymagany do obsługi naszych plików podczas tego ćwiczenia z programowania. Ustawienia hostingu są określone w atrybucie hosting
:
firebase.json
{
// If you went through the "Cloud Firestore Security Rules" step.
"firestore": {
"rules": "firestore.rules"
},
// If you went through the "Storage Security Rules" step.
"storage": {
"rules": "storage.rules"
},
"hosting": {
"public": "./public"
}
}
Te ustawienia informują CLI, że chcemy wdrożyć wszystkie pliki w katalogu ./public
( "public": "./public"
).
- Upewnij się, że wiersz polecenia uzyskuje dostęp do lokalnego katalogu
web-start
Twojej aplikacji. - Wdróż pliki w projekcie Firebase, uruchamiając następujące polecenie:
firebase deploy --except functions
- Konsola powinna wyświetlić następujące informacje:
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- Odwiedź swoją aplikację internetową, która jest teraz w pełni hostowana w globalnej sieci CDN przy użyciu Hostingu Firebase w dwóch własnych subdomenach Firebase:
-
https://<firebase-projectId>.firebaseapp.com
-
https://<firebase-projectId>.web.app
Alternatywnie możesz uruchomić firebase open hosting:site
w wierszu poleceń.
Zapoznaj się z dokumentacją, aby dowiedzieć się więcej o działaniu Hostingu Firebase .
Przejdź do sekcji Hosting konsoli Firebase swojego projektu, aby wyświetlić przydatne informacje i narzędzia dotyczące hostingu, w tym historię wdrożeń, funkcję przywracania poprzednich wersji aplikacji oraz przepływ pracy w celu skonfigurowania domeny niestandardowej.
16. Gratulacje!
Używasz Firebase do tworzenia aplikacji internetowej do czatu w czasie rzeczywistym!
Co omówiliśmy
- Uwierzytelnianie Firebase
- Cloud Firestore
- Pakiet Firebase SDK do przechowywania w chmurze
- Wiadomości w chmurze Firebase
- Monitorowanie wydajności Firebase
- Hosting Firebase