Jak zbudować aplikację Firebase Angular z uwierzytelnianiem i bazą danych czasu rzeczywistego

Przez długi czas szukałem dobrej aplikacji internetowej Portfolio, która pomogłaby mi łatwo śledzić moje zyski / straty w Kryptowalutach, dopóki nie zdecydowałem się na samodzielne opracowanie takiej aplikacji z pomocą Firebase i Angular ! Tak, to takie proste, pozwól, że wyjaśnię ci dlaczego.

Firebase zapewnia doskonałe narzędzia dla aplikacji wymagających uwierzytelniania użytkowników i przechowywania baz danych w czasie rzeczywistym. Zawiera bogatą dokumentację z różnymi przykładami programistycznymi, aby pomóc każdemu lepiej zrozumieć, jak tworzyć znakomite aplikacje.

Mam objęło kątowa instalacji programów aplikacji, przy użyciu interfejsu CLI Ignite, w innym poście.

Ten artykuł ma na celu:

  • Przejdź przez instalację i konfigurację Firebase.
  • Skonfiguruj uwierzytelnianie Firebase.
  • Wdrażaj przechowywanie i synchronizację bazy danych w czasie rzeczywistym.
  • Dodaj obserwowalne usługi danych.
  • Wizualizuj dane w aplikacji Angular.

Skonfiguruj konto Firebase

Chcę przejść przez kroki, które podjęliśmy, aby skonfigurować konto Portfolio Firebase. Projekty tworzy się w konsoli Firebase, wybierając opcję Dodaj nowy projekt. Po przesłaniu formularza Utwórz projekt zobaczysz następujący przegląd projektu.

W sekcji Przegląd projektu można znaleźć wszystkie narzędzia programistyczne używane do uwierzytelniania i przechowywania danych. Tutaj znajduje się również konfiguracja używana w aplikacji Portfolio Web App. Ta konfiguracja jest generowana przez naciśnięcie Dodaj Firebase do swojej aplikacji internetowej , a później jest dodawana do pliku app.module.ts aplikacji.

Wróćmy do paska bocznego po lewej stronie i wybierz Uwierzytelnianie . Stąd mamy dostęp do metod logowania , których potrzebujemy w aplikacji. Przejdź do zakładki Zaloguj się, gdzie możesz zobaczyć dostawców, którzy są włączeni i używani w aplikacji Portfolio - Google, Facebook i dostawca adresu e-mail / hasła .

Dostawcy logowania umożliwiają użytkownikom uwierzytelnianie w Firebase przy użyciu ich kont Facebook i Google poprzez integrację ich danych logowania z aplikacją. Jeśli chodzi o dostawcę adresu e-mail / hasła, reprezentuje prosty mechanizm uwierzytelniania przy użyciu tylko adresu e-mail i hasła. Firebase Auth zapewnia wbudowane reguły walidacji weryfikujące wpisy użytkowników, więc nie musimy tutaj konfigurować niczego dodatkowego.

Najtrudniejszą częścią tutaj była konfiguracja dostawcy Facebooka, ponieważ potrzebowaliśmy aplikacji Facebooka , aby uwierzytelnić logowanie. Stworzyliśmy aplikację FB od programistów Facebooka, która dostarczyła nam App ID i App Secret żądane od Firebase.

Podczas włączania dostawcy Facebooka należy wypełnić zarówno identyfikator API, jak i tajny . Jeśli chodzi o identyfikator URI przekierowania uwierzytelniania (z okna dostawcy), należy go wkleić pod Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Kontynuujmy z konsolą Firebase. Na stronie widoku bazy danych utworzyliśmy bazę danych czasu rzeczywistego.

W tym widoku możemy znaleźć informacje o elementach danych aplikacji oraz reguły bezpieczeństwa zapisu / odczytu. Poniżej znajdują się zasady używane przez aplikację Portfolio:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Ta konfiguracja reguły bezpieczeństwa pozwoli tylko uwierzytelnionym użytkownikom na odczyt i zapis w naszej bazie danych. Jeśli chcesz dowiedzieć się, jak definiować bardziej zaawansowane reguły, zdecydowanie polecam zapoznanie się z sekcją Oficjalne zasady i zabezpieczenia.

OK, gdzie byliśmy? Skoro już przeszliśmy przez proces tworzenia konta Portfolio Firebase , zobaczmy, jak powstał projekt rozwoju Firebase .

Gdybyśmy nie mieli jeszcze utworzonego projektu, zaleciłbym rozpoczęcie od zainstalowania interfejsu wiersza polecenia Firebase, który zapewnia różnorodne narzędzia do zarządzania i wdrażania projektów Firebase. Ale my bootstrapped portfela kątowa projekt z Ignite interfejsu CLI, więc po prostu potrzebne do zainstalowania AngularFire i Firebase z KMP . Potrzebujemy obu pakietów, aby komunikować się z Firebase. AngularFire to oficjalna biblioteka do programowania Firebase i Angular.

npm install firebase @angular/fire --save

Wszystkie moduły AngularFire, które są używane w aplikacji są dodawane w app.module.tspliku:

  • FirestoreModule jest potrzebny do funkcji bazy danych, takich jak praca z kolekcjami, zapytaniami i usługami przesyłania strumieniowego danych i manipulowania nimi.
  • FireAuthModule jestpotrzebne do funkcji uwierzytelniania, takich jak monitorowanie stanu uwierzytelniania, dostawców logowania i bezpieczeństwo.
  • FireDatabaseModule pozwala nam pracować z bazami danych czasu rzeczywistego. Jest bardzo wydajny w przypadku aplikacji mobilnych i internetowych, które wymagają zsynchronizowanych stanów między klientami w czasie rzeczywistym.
Jedynym typowym modułem, który nie jest używany w aplikacji Portfolio, jest AngularFireStorageModule. Możesz użyć tego modułu, aby szybko i łatwo przechowywać i obsługiwać treści generowane przez użytkowników, takie jak zdjęcia i filmy, a także monitorować przesłane pliki i metadane powiązane z plikami.

Teraz, gdy wiemy, jak początkowo skonfigurowano aplikację, możemy przyjrzeć się innym używanym funkcjom Firebase .

Poświadczenie

UżywamyAngularFireAuth usługado monitorowania stanu uwierzytelniania aplikacji. AngularFireAuth.authzwraca zainicjowaną firebase.auth.Authinstancję, umożliwiając nam logowanie i wylogowywanie użytkowników. Aplikacja demonstruje możliwości logowania przy użyciu trzech dostawców: Facebook, Google i Email.

Wystąpienie użytkownika Firebase jest zachowywane dla każdego dostawcy powiązanego z użytkownikiem, a gdy użytkownik jest zarejestrowany lub loguje się, staje się bieżącym użytkownikiem wystąpienia uwierzytelniania. Instancja utrzymuje stan użytkownika, dzięki czemu odświeżenie strony lub ponowne uruchomienie aplikacji nie powoduje utraty informacji o użytkowniku.

Używamy signInWithRedirectmetody zarówno dla dostawców Facebooka, jak i Google, w celu zalogowania się poprzez przekierowanie na stronę logowania. Tworzenie konta na podstawie hasła jest używane dla dostawcy logowania do poczty e-mail,createUserWithEmailAndPasswordi signInWithEmailAndPasswordto metody odpowiedzialne za tworzenie konta użytkownika i logowanie.

Polecam oficjalną dokumentację Firebase, aby uzyskać bardziej szczegółowe informacje na temat uwierzytelniania i cyklu życia użytkownika.

Akcje bazy danych w czasie rzeczywistym

Firebase oferuje dwa oparte na chmurze rozwiązania bazodanowe dostępne dla klientów i korzystamy z oryginalnej bazy danych Firebase - czasu rzeczywistego. Sprawdź różnice między Realtime i Cloud Firestore na oficjalnej stronie dokumentacji.

AngularFireDatabasei AngularFireListusługi są używane w aplikacji Portfolio do łatwego pobierania, zapisywania i usuwania danych.

AngularFireDatabasemożna wstrzyknąć za pośrednictwem konstruktora komponentu lub @Injectable()usługa. W naszym przypadku stosujemy drugie podejście:

Dane są pobierane za pośrednictwem AngularFireDatabaseusługa, która wypełnia Observable List of BlockItems.AngularFirezapewnia metody takie jak snapshotChanges()ta zwraca Observable danych jako zsynchronizowaną tablicę. Jest to bardzo przydatne, jeśli chcesz ograniczyć akcje związane z wydarzeniami, takie jak dodawanie , zmiana , usuwanie i przenoszenie . Domyślnie słucha wszystkich czterech, jednak możesz być zainteresowany tylko jednym z tych wydarzeń i możesz określić, które z nich chcesz użyć. W naszej aplikacji subskrybujemy je wszystkie.

Dodanie nowego elementu, aktualizację istniejącego lub usunięcie go z listy uzyskuje się stosując push(), update()i remove()metod.

Każda metoda operacji na danych zwraca obietnicę, chociaż nie musimy używać obietnicy ukończenia do wskazania sukcesu, ponieważ baza danych czasu rzeczywistego utrzymuje synchronizację listy.

Observables

Usługa CoinItem

Usługa Cryptocompare API zarządza danymi asynchronicznymi i emituje wiele wartości jednocześnie za pomocą Observables. Używamy HttpClient get()metody, aby zażądać danych z zasobu i subskrybować go, aby przekształcić go w Observable Array ofCoinItemobiektów, które zostaną później wykorzystane przez naszych igxGrid, igxListi igxCardkomponentów.

Rx.js pozwala nam buforować wynik żądania HTTP. Początkowo pobieramy te dane, przechowujemy je w pamięci podręcznej i używamy wersji z pamięci podręcznej w okresie istnienia aplikacji. Połączenie publishReply(1, 300000)i refCount()wykonuje następujące czynności.

PublishingReply (1, 300000) mówi Rx, aby buforował ostatnią wyemitowaną wartość i pozostawał ważny przez 5 minut. Po tym czasie spowoduje to unieważnienie pamięci podręcznej. refCount () mówi Rx, aby utrzymywał Observable przy życiu, o ile istnieją subskrybenci.

Teraz, gdy zasubskrybujemy listę monet, wynik zostanie zapisany w pamięci podręcznej i nie będziemy musieli wysyłać kolejnego żądania HTTP.

Usługa BlockItem

Dane Portfolio Crypto Coins są zapewniane przez getItemsList()metodę, która zwraca BlockItemtablicę Observabledo którego igxGridsubskrybowany jest komponent. Tylko uwierzytelnieni użytkownicy mogą korzystać z tej usługi, ponieważ AngularFireListmanipulowane przez nas są powiązane z unikalnymi identyfikatorami użytkowników.

Wizualizuj dane

Do wizualizacji używamy komponentów UI z Ignite UI dla Angularlibrary. Te komponenty są odpowiedzialne za obsługę danych, zapewniając jednocześnie dostęp do niestandardowych szablonów i aktualizacji w czasie rzeczywistym, z intuicyjnym interfejsem API, przy użyciu minimalnej ilości kodu.

igxGrid

[data]Powiązanie właściwości siatki służy do przekazywania zwróconej BlockItemtablicy. Każdymn> represents a field of the object and it is used to define features like editing and sorting. The columns are templatable, and with the help of Angular pipes, we can declare display-value transformations in them easily. We use a decimal pipe to change the minimum number of integer digits before the decimal point.

The component provides straightforward event handlers and API for CRUD operations. Handlers like updateRow and deleteRow are implementing additional logic like AngularFireList manipulation and coin item restore logic with the igxSnackbar.

igxCard

Cards are used to provide general information of Crypto coins using CSS Flexbox layout. These Card components can be filtered with the igxFilter directive, which can be used to filter different data sources. igxFilter can be applied as a pipe or as a directive.

igxFinancialChart

The Chart offers multiple ways in which the data can be visualized and interpreted, once it is returned by the service. There are several display modes for price and volume, and in our case we use chartType=”candle”.

The financial chart component analyzes and selects data columns automatically:

- Date/Time column to use for x-axis

- Open, High, Low, Close, Volume columns or the first 5 numeric columns for y-axis

Theming

IgniteUI for Angular bases its component designs on the Material Design Principles and with just a few lines of code, we can easily change the colors, sizes, typography, and overall look and feel of our components.

Now that we’ve provided all base definitions needed for the igx-theme, and have configured the igx-dark-theme mixin, we need to only apply .light-theme and .dark-theme CSS classes somewhere at DOM element root level and toggle it on button click.

Result

Original text


Wrapping up

Everything is possible with the right tooling. We have created a Portfolio Web application using the full power of the Angular Framework, Firebase Authentication services, and Cloud Database store/synchronization.

You can find the GitHub repository and the actual portfolio application here.

Feel free to share in the comments below any questions that you have, suggestions as to what can be improved or changed in the app, or any problems that you’ve encountered while configuring your Firebase account or application.