Firebase to platforma programistyczna firmy Google, która jest szybka i łatwa w konfiguracji. W tym samouczku zamierzamy skonfigurować podstawową aplikację integrującą Firebase / Firestore i Angular. Będziemy używać pakietu o nazwie AngularFire-oficjalnej Biblioteki Angular dla Firebase-jak również samego SDK Firebase.

Korzystanie z usług w chmurze staje się coraz bardziej popularne, ponieważ oszczędza czas bez konieczności tworzenia własnych zabezpieczeń, konserwacji itp. Dzięki Firebase Google stworzymy darmowy Firestore, który będzie działał jako nasza baza danych.

Firebase oferuje również bazę danych w czasie rzeczywistym, ale przechowuje wszystko w jednym dużym drzewie JSON.

To sprawia, że baza danych jest prostsza, ale dzięki chmurze Firestore, której będziemy używać, istnieją elastyczne dokumenty, dzięki czemu jest bardziej skalowalna dla większych danych. Firestore jest również szybszy i bardziej intuicyjny, jeśli nie znasz baz danych.

Skonfiguruj konsolę Firebase

musisz zacząć od skonfigurowania projektu na konsoli Firebase. Najpierw przejdź tutaj, aby znaleźć konsolę.

Utwórz projekt, nadaj mu nazwę i przejdź przez kolejne kroki. Kiedy skończysz, przejdziesz do przeglądu projektu.

nie musimy dodawać aplikacji. Powinieneś być na stronie przeglądu projektu. Tutaj zobaczysz „rozpocznij, dodając Firebase do swojej aplikacji”.

zrób to, klikając przycisk „<>” (służy do dodania aplikacji internetowej). Możesz skonfigurować hosting tutaj, ale nie omówimy tego w tym samouczku.

Zarejestruj aplikację. Na następnej stronie zobaczysz skrypty do skonfigurowania SDK Firebase. Są one przydatne, ale zobaczymy później, jak uzyskać wszystko, czego potrzebujemy, jeśli przegapisz je na tej stronie. Kontynuuj konsolę.

Zainicjuj Firestore i utwórz pierwsze dokumenty

w konsoli Firebase, w lewym okienku, w obszarze rozwijaj, możesz znaleźć kartę baza danych. Kliknij go, a zostaniesz przeniesiony na stronę, na której możesz kliknąć „Utwórz bazę danych”. Pojawi się modal, w którym możesz wybrać tryb produkcyjny lub testowy; chcemy tryb testowy. Jest niepewny, ale nadaje się do testów.

Jeśli będziesz kontynuować, zostaniesz poproszony o wybranie lokalizacji. Śmiało, wybierz odpowiedni. Po naciśnięciu przycisku Gotowe ustawienie Firestore zajmie kilka minut.

Kiedy skończysz, będziesz na swoim Firestore. Śmiało i wybierz „Rozpocznij kolekcję”.

screengrab konsoli do konfiguracji projektu Firebase.

screengrab konsoli do konfiguracji projektu Firebase.

poprosi Cię o utworzenie identyfikatora kolekcji; dla naszego przykładu nazwijmy go po prostu „testCollection”. Naciśnij Dalej, a przeniesie Cię do formularza do utworzenia pierwszego dokumentu.

identyfikator dokumentu pozostawimy pusty — Firestore automatycznie wygeneruje go dla ciebie. W polu wpisz „pole”. Następnie zobaczysz „string” jako domyślny typ. Na razie nie ma powodu, by to zmieniać, więc zostaw to tak, jak jest. W obszarze Wartość wpisz „wartość1”. Kliknij Zapisz, a zobaczysz, że utworzyłeś swój pierwszy dokument!

dla naszego późniejszego przykładu, stwórzmy drugi dokument. W środkowej kolumnie zobaczysz ” + Dodaj dokument.”śmiało i kliknij to, a zostaniesz przeniesiony z powrotem do formularza tworzenia dokumentu.

Tutaj wpisz „field” pod pole i „value2″pod wartość. Kliknij Zapisz. Teraz mamy dwa dokumenty.

Rozpocznij nowy projekt Angular

zróbmy nasz projekt frontendowy z Angular CLI (command line interface). Otwórz okno terminala i zainstaluj globalnie Angular CLI:

npm install -g @angular/cli

Po zainstalowaniu możesz uruchomić polecenieng.

w terminalu wpisz:

ng new your-app-name

możesz nazwać swój projekt, co chcesz.

Po uruchomieniu, Angular CLI poprowadzi Cię przez kilka opcji konfiguracyjnych.

możesz dodać routing, a następnie wybrać format arkusza stylów, który chcesz wygenerować dla swojej aplikacji.

Po tym przejdzie przez resztę i utworzy Twoją aplikację kątową.

Po zakończeniu możesz zmienić katalog terminala na ten, który właśnie stworzyliśmy:

cd your-app-name

w katalogu aplikacji Angular możesz uruchomić ng serve buduj i obsługuj swoją aplikację lokalnie.

Skonfiguruj Firebase w aplikacji Angular

uzyskajmy SDK Firebase, uruchamiając w terminalu następujące czynności w katalogu projektu Angular:

npm i --save firebase

teraz Firebase zostanie dodany do twojego projektu.

przejdź do konsoli Firebase. W lewym menu zobaczysz „przegląd projektu” z ikoną koła zębatego obok. Kliknij ikonę, a następnie Wyświetl ustawienia w wyskakującym oknie. Przejdź do zakładki Ogólne i przewiń w dół.

w sekcji „Firebase SDK snippet” kliknij na dole radia obok CDN (domyślnie jest on włączony automatycznie). Tutaj znajdziesz wszystko, czego potrzebujesz, aby połączyć aplikację z Firebase. F

Ind firebaseConfig zmienna – będziemy musieli skopiować te informacje do aplikacji kątowej. Wygląda to tak (z wyjątkiem tego, że wszystko zostanie wypełnione poprawnie):

var firebaseConfig = { apiKey: "************************************", authDomain: "*************.firebaseapp.com", databaseURL: "https://************.firebaseio.com", projectId: "***************", storageBucket: "****************.appspot.com", messagingSenderId: "*************", appId: "********************************", measurementId: "****************",};

wewnątrz aplikacji Angular przejdź do wygenerowanego pliku app.module.ts (jeśli utworzyłeś projekt Angular za pomocą CLI: src > app > app.module.ts). W tym pliku możesz wkleić całą zmiennąfirebaseConfig (tuż pod importem jest w porządku).

kolejnym zleceniem jest pobranie pakietu npm angular/fire. Dzięki temu pakietowi będziesz mógł z łatwością współpracować z Firebase.

możesz zainstalować pakiet w swoim projekcie za pomocą następującej linii kodu:

npm i angular/fire

Po zainstalowaniu tego pakietu możemy dodać go tutaj w pliku app.module.ts:

import { AngularFireModule } from @angular/fire';

teraz, w dół w tablicy importu, zainicjuj Firebase w aplikacji, dodając następujący wiersz kodu:

AngularFireModule.initializeApp(firebaseConfig)

Ten import jest dla Firebase w ogóle, ale jeśli chcemy dodać pewne usługi, musisz dodać je indywidualnie.

dla Firestore, dodaj to na górze pliku:

import { AngularFirestoreModule } from '@angular/fire/firestore';

następnie, w tablicy importu na dole:

AngularFirestoreModule

zaimplementuj w aplikacji

w tym momencie może sensowne być utworzenie komponentu lub dwóch w naszej aplikacji kątowej. Możesz utworzyć nowy komponent w aplikacji za pomocą CLI w projekcie.

stwórzmy komponent domowy wpisując polecenie w terminalu:

ng g c home

„G c” oznacza „Generuj komponent”. Spowoduje to wygenerowanie folderu domowego z czterema plikami pod nim: plikiem HTML, plikiem SCSS( lub dowolną stylizacją używaną), plikiem maszynopisu i.plik spec.

Jeśli chcesz pominąć dodawanie .spec plik, propend this flag to your generate command:

ng g c home --skipTests=true

będziemy robić naszą logikę w naszym komponencie domowym, ale nie zapomnijmy dodać go do naszego plikuapp.component.html. Zawsze możesz dodać komponent home do routera, ale dla uproszczenia, po prostu dodaj go w HTML.

jeśli skonfigurujesz komponent domowy tak jak ja, selektorem będzie „app-home”, więc możesz dodać go gdzieś w pliku app.component.html w ten sposób

<app-home></app-home>

Po tym przejdźmy do wykonywania naszych operacji w komponencie domowym.

wcześniej stworzyliśmy kolekcję w naszym Firestore o nazwietestCollection; wewnątrz niej znajdują się dwa dokumenty lub obiekty. Najpierw przyjrzyjmy się” czytaniu ” tych dwóch dokumentów z naszego Firestore.

przeczytaj

w plikuhome.component.ts, możemy zaimportować Firestore za pośrednictwem naszego pakietu kątowego/fire:

import { AngularFirestore } from "@angular/fire/firestore";

Po zaimportowaniu możemy zainicjować go w naszym konstruktorze w następujący sposób:

constructor(private firestore: AngularFirestore) {}

czyli przypisanie naszemu importowanemuAngularFirestore aliasu „FireStore” — nadaj mu dowolną nazwę.

funkcjangOnInit jest idealnym miejscem do odczytu z Firestore tuż przy gitgo.

spójrz na ten kod:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

przejdźmy przez to krok po kroku: jak zapewne wiesz,this.firestoreodnosi się do aliasu, który stworzyliśmy dla naszegoAngularFirestore w naszym konstruktorze.

.collection('testCollection') odnosi się do kolekcji, którą stworzyliśmy wcześniej, a.get() po prostu dostarcza nam całą kolekcję (później zajmiemy się pytaniem o pojedyncze dokumenty w kolekcji).

Kiedy .subscribe do firestore, zasadniczo asynchronicznie czeka na API, aby zwrócić dane. Technicznie Subskrybuj pochodzi z RxJS i jest obserwowalny, który zaktualizuje się, gdy nastąpi zmiana.

teraz Firestore zawsze zwraca migawki danych, dlatego nadaliśmy mu aliasss. Pod migawką naszej bazy danych znajdują się dokumenty, które są danymi, których chcemy, i możemy użyć metody .forEach array, aby zapętlić tablicę dokumentów.

w powyższym przykładzie otrzymaliśmy doc.data() z Firebase Firestore. Będzie to cały dokument, który w naszym przypadku jest obiektem z jedną właściwością. Dlatego, gdy wpychamy go do naszej tablicy, będziemy musieli zainicjalizować naszą tablicę jako następujący kod:

myArray: any = 

To pozwala nam zobaczyć go w naszym HTML, usunąć to, co tam jest, i zastąpić go następującymi:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

pełna lista w HTML z dwie wartości.

pełna lista w HTML z dwiema wartościami.

Super! Udało nam się odczytać dane z naszego Firestore.

napisz

najpierw dodajmyReactFormsModule do app.module.ts, w ten sposób:

import { ReactiveFormsModule } from "@Angular/forms";

Dodaj równieżReactiveFormsModule do tablicy importu u dołu.

w naszym pliku home.component.html dodajmy formularz do przechwytywania i wysyłania nowych danych. Napisz coś takiego:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

teraz, jeśli użyłeś powyższego HTML, Dodaj następujący import do naszego home.component.ts plik:

import { FormControl, FormGroup } from "@Angular/forms";

następnie w naszej klasie dodaj:

form = new FormGroup({ newValue: new FormControl('') })`

to zaakceptuje z HTML, formularz i dane wejściowe, które wprowadziliśmy, z formControlName z newValue.

tak więc otrzymamy łańcuch wprowadzony od użytkownika w HTML i wyślemy go jako wartość nowego dokumentu w naszym Firestore. Możemy to zrobić za pomocą następującej funkcji:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

w ten sam sposób, w jaki czytamy z naszego Firestore, będziemy pisać tym razem używając tego samego odwołania, aby uzyskać naszą kolekcję:

this.firestore.collection('testCollection')

tym razem dodamy dokument o .adddiv>. Chcemy dodać obiekt z otrzymanym tekstem:

.add({field: this.form.valule.newValue})

może to wyglądać dziwnie, ale dzieje się tak dlatego, że otrzymujemy wartość formularza. Tam otrzymujemy właściwość o nazwie newValue. Dlatego jest to value.newValue.

reszta funkcji to po prostu.then I.catch, aby obsłużyć odpowiedź z Firestore.

podczas pisania do Firestore, odpowiedzią (jeśli się powiedzie) będzie duży, dziwny obiekt.

ponieważ nic nie czytamy, jedynym zastosowaniem tych procedur obsługi jest to, że chcemy coś zrobić natychmiast po zapisaniu do Firestore (tak jak to robimy, gdy wywołujemy .reset(), aby wyczyścić formularz).

jeśli uruchomisz aplikację tak, jak jest (ng serve), zauważysz, że nie pojawi się na naszej liście po wprowadzeniu nowej wartości i przesłaniu jej do Firebase. Możesz odświeżyć stronę i powinna się pojawić, jeśli zapis się powiódł. Dlaczego?

To dlatego, że po napisaniu do naszego Firestore ’ a nie przeczytaliśmy nowej zmiany. Przy sposobie konfiguracji naszej aktualnej funkcji ngOnInit nie obserwujemy zmian.

aby zobaczyć nowe dane, musimy zmienić sposób odczytu danych:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

teraz mamy subskrypcję. Zobaczysz, że po dodaniu nowego dokumentu do bazy danych, zostanie on również dodany do listy w naszej aplikacji. Główną różnicą jest to, że jesteśmy teraz subskrybowani na .valueChanges().

zapytanie

dodajmy kolejny formularz, którego możemy użyć do zapytania Firestore na podstawie wartości dokumentu:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

dla uproszczenia, jest dokładnie jak pierwsza forma, ale z różnymi nazwami i inną funkcją. Śmiało i nazwij go jak chcesz, ale upewnij się, że używasz nowych nazw, a nie tych, których użyliśmy w poprzedniej formie.

w pliku maszynopisu upewnij się, że zainicjowałeś formularz na górze klasy:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

również tutaj, gdzie inicjujemy wszystko, dodaj single: any; jako zmienną, aby umieścić nasz zapytany dokument, i message: string; jako zmienną zmienna dla komunikatów o błędach.

dzięki temu zacznijmy budować naszą funkcjęonQuery.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

najpierw sprawdzamy, czy użytkownik w ogóle coś wprowadził. Dane wejściowe można znaleźć w this.secondForm.value.valueToGet.

więc, jeśli jest pusty, chcemy zwrócić wiadomość, a nie wysłać pusty łańcuch do zapytania Firebase. W tym sprawdzeniu ” if ” upewniam się również, że nasza zmienna „single” jest pusta, ponieważ wcześniej mogliśmy pomyślnie odpytywać, ale teraz chcemy tylko wysłać wiadomość, że Formularz nie może być pusty.

Jeśli nie jest pusta, przechodzimy do naszego Firestore. Zauważysz coś nowego w parametrze „collection” — w Angular faktycznie wykonujemy zapytanie bezpośrednio wewnątrz tego parametru. ref jest odniesieniem do kolekcji, a.where jest najczęstszym sposobem odpytywania dokumentów w kolekcji Firestore.

w metodzie najpierw mówimy Firebase, które pole ma odpytywać w każdym dokumencie. Wszystkie nasze pola są po prostu „polem”, więc to ułatwia.

następnie używamy komparatora, ==, który ma zapytać, czy pole isEqual. Możesz również użyć innych komparatorów ,takich jak<>= I tak dalej.

wreszcie, trzeci parametr mówi Firebase, do czego ma porównywać pole-w naszym przypadku chcemy umieścić wartość wejściową od użytkownika tutaj i sprawdzić, czy pojawi się ona jako wartość w dowolnym miejscu naszego Firestore.

krótka notatka o ograniczeniu Firestore: odpytywanie za pomocą .where metoda jest ograniczona.

Możesz sprawdzić, czy coś jest wyłączone jedną literą, lub jest małe, gdzie Firestore ma to zapisane jako wielkie litery i nie zwróci tego. Możesz robić różne rzeczy na frontendzie, aby pomóc, jak na przykład wprowadzanie małych liter przez każdego użytkownika, aby dopasować Firestore, ale to może zajść tak daleko.

oczywiście możesz wyciągnąć cały Firestore do frontendu (tak jak my). Chociaż odpytywanie byłoby lepsze, może nie być idealne, jeśli twój Firerestore jest gigantyczny. Sugerowanym sposobem wyszukiwania pełnotekstowego jest użycie Algolii.

będziemy .get()ponieważ czytamy wartość, i będziemy .subscribe tak jak to zrobiliśmy podczas czytania całej kolekcji.

jednak po pobraniu migawki z Firestore, chcemy umieścić w sprawdzeniu „Jeśli”, aby zobaczyć, czy coś jest zwracane. Możeszconsole.log migawka i sprawdzić, czy nie będzie pusta, nawet jeśli nie było dopasowania w Firestore.

ale właściwość docs na migawce będzie pusta (dokładnie pusta tablica), jeśli nie ma dopasowania do naszego zapytania. W ten sposób możemy stwierdzić, czy nasze zapytanie pasuje do czegokolwiek, czy nie.

ponownie odeślemy wiadomość i ustawimy single zmienną NA null. Jeżeli znajdziemy dopasowanie, wtedy chcemy zrobić odwrotnie, ustawiając wiadomość na empty i ustawiając zmiennąsingle na zwrócone dane.

teraz, gdy mamy dane, wróćmy do home.component.html. Dodajmy trochę HTML, aby obsłużyć nasze zmienne „message” I „single”:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

dość proste tutaj. Używamy dyrektywy*ngIf, aby pokazać dopasowany dokument tylko wtedy, gdy zostanie znaleziony. Jak pamiętasz, ustawiliśmy „single”na null, jeśli nie został znaleziony, więc cały *ngIfdiv byłby Ukryty. To samo z „message” – jeżeli jest ustawiony na pusty łańcuch.

zauważysz również, że dodaliśmy przyciski do naszej następnej sekcji, ponieważ nadal musimy być w stanie edytować i usuwać!

Update

coś, co będzie nam bardzo pomocne od teraz jest uzyskanieid dokumentu, który zapytaliśmy.

wiemy, że będziemy tylko edytować lub usuwać ten zapytany dokument, więc otrzymajmy jego id. Jak można zauważyć, gdy tworzymy dokumenty z naszej aplikacji, nie dajemy im id.

dodatkowo, gdy na początku tworzyliśmy nasze dokumenty w Firestore, pozwoliliśmy Firestore automatycznie wygenerowaćid s; to samo dzieje się z tymi, które tworzymy z naszej aplikacji. Jak więc uzyskać ids?

w naszej funkcji onQuery ustawmy odniesienie do naszego zapytania bazy danych w następujący sposób:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

odłam .get() I wszystko po nim, a następnie, w innej linii, użyj naszego odniesienia, w ten sposób:

docRef.get().subscribe(ss => ...)

…i tak dalej. Jest to zasadniczo to samo.

teraz, pod metodą subscribe, dodajmy kolejną linię, aby uzyskać dokumentid:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

oczywiście będziemy musieli zainicjowaćthis.id na górze: id: string = ''. Ale teraz mamy identyfikator do użycia zarówno w naszych funkcjach edycji i usuwania, które utworzymy.

z powrotem w naszym pliku home.component.html Zmień utworzony wcześniej przycisk edycji na następujący:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

za pomocą tej funkcji openEdit() w naszym pliku maszynopisu możemy zainicjować zmianę zmiennej:

edit: boolean = false

i utwórz funkcję openEdit, aby ją przełączyć:

openEdit() { this.edit = !this.edit};

za każdym razem, gdy funkcja zostanie wywołana, zmieni ona zmienną edycji z false na true lub true na false.

teraz, w naszym pliku HTML, dodaj poniższy formularz. Pojawi się, gdy edycja jest prawdziwa:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

znowu inna forma. Ważne jest to, że nie będziemy nadpisywać całego doc-zachowamy id, ale pole zmieni się na to, co tutaj wprowadzimy — taki jest cel.

whome.component.ts, zainicjuj zmiennąmessage2, aby obsłużyć puste wejście i zainicjować formularz, tak jak zrobiliśmy to z innymi. Następnie utwórz funkcjęonRename.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

jest tu kilka nowych rzeczy do zauważenia.

najpierw używamy.doc i umieszczamy wid otrzymaliśmy z poprzednich kroków. To pobiera dokument oparty na id, a nie zapytanie.

następnie używamy metody .update. Spowoduje to nadpisanie tylko określonej właściwości, zamiast .set, która nadpisuje cały dokument. Innymi słowy, gdybyśmy mieli trzy pola w dokumencie, moglibyśmy nadpisać tylko jedno za pomocą metody update w ten sposób.

ponownie przeczytaliśmy naszą listę dokumentów z Firestore. Następnie możemy zapinać pojedyncze zapytanie, pole edycji i wszelkie wiadomości tam wcześniej.

Delete

usunięcie, które zrobimy, jest w zasadzie takie samo jak nasza aktualizacja, z wyjątkiem tego, że użyjemy metody delete.

najpierw, w naszym html, zmieńmy przycisk delete:

<button style='background-color: red' (click)='delete()'>Delete</button>

teraz wystarczy utworzyć funkcjędelete.

rozsądnie jest umieścić Ostrzeżenie przed zezwoleniem użytkownikowi na usunięcie obiektu. Dodaj następujący kod do pliku maszynopisu:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

confirm('Delete') wyświetli alert, który musi zostać potwierdzony przed usunięciem — po prostu chroni użytkownika przed przypadkowym usunięciem czegoś przypadkowo.

następnie po prostu otrzymujemy dokument za pomocą id, który zapisaliśmy, i wywołujemy na nim metodę delete. To proste.

wniosek

udało Ci się utworzyć aplikację Angular, która może tworzyć, czytać, aktualizować i usuwać dokumenty Firestore! Jak widać, Firebase Firestore jest łatwy w użyciu i gotowy do pracy. Można to łatwo przeskalować do tysięcy złożonych dokumentów.

teraz, gdy masz dobry pomysł na podstawy Firestore, sprawdź oficjalne dokumenty, aby uzyskać bardziej zaawansowane tematy.

poznaj Aplikacje kątowe dokładnie to, co użytkownik robi

debugowanie aplikacji kątowych może być trudne, zwłaszcza gdy użytkownicy doświadczają problemów, które są trudne do odtworzenia. Jeśli jesteś zainteresowany monitorowaniem i śledzeniem stanu kątowego i działań dla wszystkich użytkowników w produkcji, wypróbuj LogRocket. Logrocket Dashboard darmowy baner próbnyhttps://logrocket.com/signup/

LogRocket jest jak rejestrator dla aplikacji internetowych, nagrywając dosłownie wszystko, co dzieje się na twojej stronie, w tym żądania sieciowe, błędy JavaScript i wiele więcej. Zamiast zgadywać, dlaczego pojawiają się problemy, możesz agregować i raportować, w jakim stanie była Twoja aplikacja, gdy wystąpił problem.

wtyczka Logrocket NgRx rejestruje stan kątowy i akcje do konsoli LogRocket, dając kontekst wokół tego, co doprowadziło do błędu i w jakim stanie była aplikacja, gdy wystąpił problem.

Zmodernizuj sposób debugowania aplikacji Angular – Zacznij monitorowanie za darmo.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.