CRUD – Create, Read, Update, Delete – die vier heiligen Grale der Datenbankaktionen. Sie sind das Einzige, was Sie jemals brauchen werden, um etwas Bedeutendes mit Ihrer Datenbank zu tun. Sicher, Sie können die Komplexität der Abfragen erhöhen, aber letztendlich läuft alles auf diese vier Aktionen hinaus.
Firebase ist ein Google-eigenes Cloud-basiertes System, das mit API-Hooks, Dateispeicherplatz, Autorisierungssystem und Hosting-Funktionen ausgestattet ist. Es ist ein viel unterschätztes System, das mehr für das Prototyping und die schnelle Anwendungsentwicklung genutzt werden sollte.
Wenn Sie eine progressive Webanwendung starten möchten, aber nicht über die Backend-Erfahrung mit der Einrichtung von Servern, der Erstellung von APIs und dem Umgang mit Datenbanken verfügen, dann ist Firebase eine fantastische Option für Front-End-Entwickler, die sich isoliert fühlen und von dem riesigen Berg an Informationen, den sie verarbeiten müssen, um ihre Anwendung überhaupt zum Laufen zu bringen, erdrückt werden.
Oder wenn Sie nur wenig Zeit haben, kann Firebase Ihre Entwicklungszeit fast halbieren, so dass Sie sich auf die Benutzererfahrung und die Implementierung dieser UI-Flows konzentrieren können. Es ist auch flexibel genug, um Ihre Front-End-Anwendung zu migrieren und bei Bedarf eine andere Datenbank zu verwenden.
Hier ist eine kurze Anleitung, wie man CRUD-Aktionen mit Angular und Firebase implementiert.
Es handelt sich um eine einfache Kaffeebestellungs-App, bei der man Bestellungen hinzufügen (create), Bestellungen aus der Datenbank auflisten (read), als abgeschlossen markieren (update) und eine Bestellung entfernen (delete) kann.
Der Zweck dieses Tutorials ist es, den Einstieg in Firebase Firestore zu erleichtern und zu sehen, wie einfach es ist, sich mit dem Google-eigenen Dienst zu verbinden und loszulegen. Dies ist keine Werbung für Google (ich bekomme dafür keine Provisionen), sondern lediglich eine Illustration, wie Angular mit der Datenbank zusammenspielt.
Die App, die wir erstellen werden, ist nicht perfekt. Es fehlen Dinge wie Datenvalidierung und eine Million möglicher Funktionen, die ich auch hinzufügen kann. Aber das ist nicht der Punkt. Es geht darum, die App so schnell wie möglich in Angular einzurichten und sie mit einer Live-Datenbank zum Laufen zu bringen.
So, genug der Einführung – hier ist der Code-Gang durch.
Die anfängliche Einrichtung
Richten Sie Ihre Angular-App über das Angular CLI ein. Wenn Sie Angular CLI noch nicht haben, können Sie hier mehr darüber erfahren.
Kurz gesagt, führen Sie einfach diese Befehle in Ihrem Terminal in dem Verzeichnis aus, in dem Sie Ihre Angular-App haben möchten. Hier sind die Befehle und was sie tun.
npm install -g @angular/cli
Installiert Angular CLI auf deinem Terminal, falls du es noch nicht hast.
ng new name-of-app-here
Damit wird ein neues Angular-Projekt mit der neuesten verfügbaren Version von Angular erstellt.
cd name-of-app-here
Wenn du ein neues Projekt über Angular CLI erstellst, wird ein neuer Projektordner für dich erstellt. cd führt Sie über das Terminal in diesen Ordner.
ng serve
So wird Ihr Angular-Projekt gestartet und ausgeführt.
Einrichten von Angular
Wir werden insgesamt 3 neue Teile für diese Angular-App erstellen – orders, order-list und shared/ordersService. Die ersten beiden sind Komponenten, die die Schnittstelle für die App enthalten werden, und der shared/orders Service, der alle Firebase-API-Aufrufe zusammenhalten wird.
Um die erforderlichen Dateien zu erstellen, führen Sie die folgenden Befehle aus:
ng g c orders
g steht für generate und c steht für component. Der letzte Teil des Befehls ist der Name Ihrer Datei, die im obigen Fall orders heißt. Sie können auch ng generate component orders verwenden, um den gleichen Effekt zu erzielen.
Erstellen Sie eine weitere Komponente für order-list mit dem folgenden Befehl:
ng g c order-list
Und schließlich verwenden Sie für den Dienst s anstelle von c wie unten:
ng g s shared/orders
Damit wird eine orders.service.ts-Datei in einem Ordner namens shared erstellt. Stellen Sie sicher, dass Sie orders.service.ts in app.module.ts einfügen, da dies nicht wie bei den Komponenten automatisch geschieht. Sie können dies über import und das Hinzufügen zur providers-Liste wie folgt tun:
import { OrdersService } from "./shared/orders.service";
...
providers:
...
Das CSS
Für dieses Tutorial werden wir Materialize-CSS verwenden, damit unsere endgültige Anwendung besser aussieht als das Standard-CSS. Es ist nicht notwendig und Sie können ein beliebiges CSS-Framework oder Ihr eigenes CSS verwenden, wenn Sie möchten. Sie können die Details von Materialize CSS hier nachlesen.
Wir werden auch Googles Materialicons als Schaltflächen verwenden, um die Kaffeebestellung als abgeschlossen zu markieren oder die Bestellung zu löschen.
Eine Möglichkeit, dies zu implementieren, besteht darin, den nachstehenden Code direkt über dem </head>-Tag in Ihrer index.html-Datei im Ordner src zu platzieren.
<!-- Compiled and minified Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><!-- Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Der anfängliche Angular-Ansichtscode
Löschen Sie in app.component.html den gesamten Startcode. Wir werden unseren eigenen Inhalt dafür verwenden.
Wir werden uns in die Komponente einklinken, die wir gerade erstellt haben, und sie auf dem Bildschirm anzeigen, indem wir die Selektoren app-orders und app-order-list verwenden. Dazu schreiben wir den folgenden Code:
<div class="container">
<div class="row">
<app-orders class="col s6"></app-orders>
<app-order-list class="col s6"></app-order-list>
</div>
</div>
Die Klassen container, row, col und s6 sind Teil des Materialize CSS-Grid-Systems. Alle Klassen, die Sie im Rest dieses Tutorials sehen werden, sind von Materialize CSS, sofern nicht anders erwähnt.
Einrichten des Formulars
Um Formulare einzurichten, importieren Sie ReactiveFormsModule in app.module.ts und denken Sie daran, es in das imports-Array zu importieren.
import { ReactiveFormsModule } from "@angular/forms";
Innerhalb von orders.service.ts importiere FormControl und FormGroup aus @angular/formsund erstelle ein neues Formular außerhalb von constructor, in dem du die Eigenschaften des Formulars wie folgt festlegen kannst:
import { FormControl, FormGroup } from "@angular/forms";
...
...export class OrdersService {
constructor() {}
form = new FormGroup({
customerName: new FormControl(''),
orderNumber: new FormControl(''),
coffeeOrder: new FormControl(''),
completed: new FormControl(false)
})
}
Wir werden diese Werte verwenden, um sie in Firebase zu speichern, etwas später in diesem Tutorial.
Verwendung des Formulars innerhalb einer Komponente
importDie Klasse OrdersService wird in die Komponente eingefügt, so dass das Objekt innerhalb der Komponente verwendet werden kann und dann ein Objekt der Klasse innerhalb der constructor erstellt wird.
import { OrdersService } from "../shared/orders.service";
...
constructor(private ordersService:OrdersService){}
Innerhalb der orders.component.html wird die formGroup-Direktive verwendet, um auf das in OrdersService erstellte Formularobjekt zu verweisen. Jede formControlName referenziert die Namen, die wir in der formGroup verwendet haben, die innerhalb der OrdersService-Klasse erstellt wurde. Dies ermöglicht es dem zugehörigen Controller, die in das Formular eingegebenen Variablen zu verwenden. Siehe nachstehenden Code:
<form ="this.ordersService.form">
<input placeholder="Order Number"
formControlName="orderNumber"
type="text"
class="input-field col s12">
<input placeholder="Customer Name"
formControlName="customerName"
type="text"
class="input-field col s12">
</form>
Im orders.component.ts werden wir ein Array aus Kaffee für die Schleifenbildung in unserem orders.component.html einrichten. Theoretisch könnten Sie dies auch in Ihrer Firestore-Datenbank einrichten, die Sammlung aufrufen und sie dann verwenden. Aus Gründen der Länge werden wir es jedoch als lokales Array einrichten. Richten Sie innerhalb Ihrer OrdersComponent-Klasse das folgende Array ein:
coffees = ;
Durchlaufen Sie in Ihren orders.component.html– und <form>-Tags eine Schleife, indem Sie *ngFor mit einem (click)-Action-Handler verwenden, um neue Kaffees zu Ihrer Bestellung hinzuzufügen. Wir werden die Bestellliste direkt darunter anzeigen, mit der Möglichkeit, einzelne Kaffees wie folgt zu entfernen:
<button class="waves-effect waves-light btn col s4"
*ngFor="let coffee of coffees"
(click)="addCoffee(coffee)">
{{coffee}}
</button><ul class="collection">
<li *ngFor="let coffee of coffeeOrder">
<span class="col s11"> {{ coffee }} </span>
<a class="col s1" (click)="removeCoffee(coffee)">x</a>
</li>
</ul>
Innerhalb von orders.component erstellen Sie ein leeres Array, um die Kaffeebestellung unterzubringen, verwenden die Funktion addCoffee(), um neue Kaffees hinzuzufügen, und removeCoffee(), um ein Getränk aus Ihrer Bestellliste zu entfernen.
coffeeOrder = ;addCoffee = coffee => this.coffeeOrder.push(coffee);removeCoffee = coffee => {
let index = this.coffeeOrder.indexOf(coffee);
if (index > -1) this.coffeeOrder.splice(index, 1);
};
Behandlung der Formularübermittlung
Fügen Sie innerhalb und am Ende des <form>-Tags eine Eingabe für die Bestellung ein und fügen Sie die onSubmit() zu einem Click-Handler wie unten hinzu:
<form ="this.ordersService.form" (ngSubmit)="onSubmit()"> ...
<button
class="waves-effect waves-light btn col s12"
(click)="onSubmit()">
Submit
</button>
</form>
Erstellen Sie in Ihrem orders.component eine leere onSubmit Funktion für die Zwischenzeit. Wir werden ihr bald eine Ereignisbehandlung hinzufügen. An diesem Punkt sollte Ihr Formular bereit sein, sich mit Ihrer Firebase-Datenbank zu verbinden.
Einrichten der Auflistungskomponente
Jetzt brauchen wir nur noch einen Platz, um unsere Kaffeebestellungen aus der Datenbank anzuzeigen. Für den Moment werden wir nur das HTML-Gerüst einrichten.
Navigieren Sie zu Ihrer order-list.component.html und erstellen Sie eine Tabelle mit 3 Überschriften und 5 Datenzellen. Die ersten 3 Datenzellen enthalten die Werte aus der Datenbank und die letzten 2 enthalten zusätzliche Funktionen, mit denen Sie die Bestellung als abgeschlossen markieren oder löschen können.
Einrichten von Firebase
Gehen Sie zu Ihrer Firebase-Konsole und fügen Sie ein neues Projekt hinzu.
Geben Sie einen Projektnamen ein, akzeptieren Sie die Geschäftsbedingungen und klicken Sie auf Projekt erstellen.
Wenn Ihr Firebase-Projekt eingerichtet ist, sehen Sie etwas wie dieses.
Erstellen Sie eine Datenbank, indem Sie auf dem Seitenpanel (unter „Develop“) „Database“ auswählen und dann unter dem Banner „Cloud Firestore“ auf „Create Database“ klicken.
Wählen Sie für die Sicherheitsregeln „Start in test mode“. Sie können sie später ändern.
Sie erhalten eine leere Firestore-Datenbank wie diese.
Verbinden von Firebase Firestore mit Angular
Um deine Angular-App mit Firebase zu verbinden, musst du die Pakete firebase und @angular/fire installieren. Dadurch erhalten Sie Zugriff auf AngularFireModule und AngularFirestoreModule. Verwenden Sie den folgenden Befehl in Ihrem Terminal, um sie zu installieren.
npm i --save firebase @angular/fire
Implementieren der Konnektoren
Gehen Sie zurück zu Ihrer Firebase-Webkonsole und holen Sie sich die Konfigurationsdetails, die Sie in Ihrer Angular-App verwenden möchten. Diese finden Sie auf Ihrer Projektübersichtsseite. Sie sieht in etwa so aus:
Kopieren Sie den hervorgehobenen Abschnitt des Codes, navigieren Sie zu Ihrer environment.ts-Datei (die sich im environments-Ordner befindet) und fügen Sie die Konfigurationsdetails innerhalb des environment-Objekts als firebaseConfig ein. Siehe Beispiel unten:
export const environment = {
production: false,
firebaseConfig: {
apiKey: "xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
projectId: "xxxx",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxxx"
}
};
Importieren Sie die zuvor installierten Pakete und die environment.ts-Datei in Ihr app.module.ts.Sie müssen das AngularFireModule mit dem firebaseConfig initialisieren, für das Sie gerade die Einrichtung vorgenommen haben. Siehe Beispiel unten:
import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
...
@NgModule({
...
imports:
...
})
Einrichten von Firestore in einem Dienst
Importieren Sie AngularFirestore in Ihre orders.service.ts-Datei und deklarieren Sie es im Konstruktor, damit Ihr Dienst davon weiß.
...
import { AngularFirestore } from '@angular/fire/firestore';
...
export class OrdersService {
constructor( private firestore: AngularFirestore ) {}
...
}
Jetzt bist du bereit und kannst mit dem CRUD-Teil dieses Angular + Firebase Firestore Tutorials beginnen.
C steht für Create
Um einen neuen Datensatz in deiner brandneuen Firestore Datenbank zu erstellen, musst du .add() aufrufen. Wir werden dies innerhalb der orders.service.ts-Datei tun.
Dazu müssen Sie den collection-Namen und die Daten angeben, die Sie in die Datenbank übertragen wollen. In unserem Fall handelt es sich um coffeeOrders.
Der folgende Beispielcode verwendet ein Versprechen, um den Firebase-Aufruf zurückzugeben, und überlässt es dann Ihnen, was Sie tun möchten, nachdem alles erledigt ist.
...
createCoffeeOrder(data) {
return new Promise<any>((resolve, reject) =>{
this.firestore
.collection("coffeeOrders")
.add(data)
.then(res => {}, err => reject(err));
});
}
...
Um diese Funktion in Ihrer Komponente aufzurufen, navigieren Sie zu orders.component.ts und rufen Sie innerhalb der onSubmit()-Funktion und des Action-Handlers die createCoffeeOrder() durch ordersService auf.
Im folgenden Beispiel werden die Daten verarbeitet, indem das coffeeOrder-Array dem Formularwert coffeeOrder zugeordnet wird. Ich habe auch eine data-Variable für Destrukturierungszwecke erstellt (damit ich nicht einen sehr langen Namen in createCoffeeOrder() eingeben muss).
...
onSubmit() {
this.ordersService.form.value.coffeeOrder = this.coffeeOrder;
let data = this.ordersService.form.value;
this.ordersService.createCoffeeOrder(data)
.then(res => {
/*do something here....
maybe clear the form or give a success message*/
});
}
...
Und viola! Du hast jetzt einen Datensatz von deiner Angular-App auf dem lokalen Host zu deiner Firestore-Datenbank erstellt.
R steht für Read
Um die Daten deiner Kaffeebestellungen anzuzeigen, benötigst du eine Lesefunktion in deinem orders.service.ts. Das folgende Code-Beispiel liefert Ihnen alle Werte, die in Ihrer coffeeOrders-Sammlung gespeichert sind.
...
getCoffeeOrders() {
return
this.firestore.collection("coffeeOrders").snapshotChanges();
}
...
Um diese Funktion zu verwenden, müssen Sie sie aus Ihrer orders-list.component.ts aufrufen. Sie können dies tun, indem Sie die OrdersService in die Datei importieren und sie in der constructor initialisieren.
...
import { OrdersService } from "../shared/orders.service";
...export class OrderListComponent implements OnInit {
constructor(private ordersService:OrdersService){}
...
}
Erstellen Sie eine Funktion, die Ihren Aufruf enthält, und initialisieren Sie sie in der ngOnInit(), um sie aufzurufen, wenn die Ansicht zum ersten Mal geladen wird. Erstellen Sie eine coffeeOrders-Variable, um die von Ihrer Datenbank zurückgegebenen Ergebnisse über subscribe() abzubilden. Wir werden dies verwenden, um zu iterieren und in order-list.component.html
...
ngOnInit() {this.getCoffeeOrders();}
... coffeeOrders; getCoffeeOrders = () =>
this.ordersService
.getCoffeeOrders()
.subscribe(res =>(this.coffeeOrders = res));...
anzuzeigen. Um coffeeOrders in Ihrem order-list.component.html zu verwenden, verwenden Sie *ngFor, um durch das zurückgegebene Array zu schleifen. Sie müssen auch ein wenig Inception betreiben und eine weitere Schleife für den coffeeOrder-Teil ausführen, um Ihre Liste der Kaffeesorten für jeden Kunden zu erhalten. Es gibt effizientere Möglichkeiten, dies zu tun, aber für dieses Tutorial, siehe den Beispielcode unten:
...
<tbody>
<tr *ngFor="let order of coffeeOrders">
<td>{{ order.payload.doc.data().orderNumber }}</td>
<td>{{ order.payload.doc.data().customerName }}</td>
<td><span
*ngFor="let coffee of order.payload.doc.data().coffeeOrder">
{{ coffee }}
</span>
</td>
</tr>
</tbody>
...
Und da haben Sie es. Sie haben nun Lesefunktionen in Ihre Angular-Anwendung integriert.
U steht für Update
Angenommen, wir möchten die Kaffeebestellung in der Datenbank als abgeschlossen markieren und aufgrund der Änderung etwas mit der Position machen. Da snapshot() alle Änderungen nachverfolgt, müssen Sie keine Nachverfolgung oder Abfrage der Datenbank durchführen.
Wir werden eine weitere Datenzelle in unserer Tabelle mit einem „Häkchen“-Symbol von Google Materialize Icons erstellen und es mit einem (click)-Ereignis verbinden, das die Funktion markCompleted() in Ihrem order-list.component.ts aufruft. Wir werden auch die bestimmte Reihenfolge für diese Schleife übergeben.
Wir werden ein -Attribut mit dem completed-Wert auf die Datenzelle setzen, so dass es dynamisch bestimmen kann, ob wir das „Häkchen“-Symbol auf dem Display haben wollen. Wir haben diesen Wert ursprünglich als false gesetzt, als wir das Formular in orders.service.ts.
...
<td ="order.payload.doc.data().completed"
(click)="markCompleted(order)">
<i class="material-icons">check</i>
</td>
...
Inside order-list.component.ts erstellt haben, erstellen Sie die Funktion markCompleted(), die das injizierte data verwendet, um es an eine Funktion namens updateCoffeeOrder() in orders.service.ts.
...
markCompleted = data =>
this.ordersService.updateCoffeeOrder(data);
...
Inside orders.service.ts zu übergeben. Diese Funktion stellt eine Verbindung zu Ihrer Firestore-Datenbank her und ruft diese auf der Grundlage der ausgewählten Sammlung und der Dokument-ID auf. Wir wissen bereits, dass unsere Sammlung coffeeOrders heißt, und wir können die Dokument-ID anhand der Parameter finden, die vom Aufruf der Komponentenfunktion übergeben wurden.
.set() setzt den spezifischen Datensatz mit den von Ihnen übergebenen Daten. .set() nimmt zwei Parameter entgegen – Ihre Daten und ein Einstellungsobjekt. Wenn Sie merge: true verwenden, bedeutet dies, dass Sie nur das übergebene Wert-Schlüssel-Paar aktualisieren, anstatt das gesamte Dokument durch die übergebenen Daten zu ersetzen.
...
updateCoffeeOrder(data) {
return
this.firestore
.collection("coffeeOrders")
.doc(data.payload.doc.id)
.set({ completed: true }, { merge: true });
}
...
Wenn Sie nun in Ihrer Ansicht auf das Symbol „Prüfen“ klicken, wird Ihre Datenbank aktualisiert und verschwindet, da Ihr -Attribut jetzt auf true gesetzt ist.
D steht für Delete
Für die letzte Aktion werden wir alles auf ähnliche Weise einrichten wie für den Aktualisierungsprozess – aber anstatt den Datensatz zu aktualisieren, werden wir ihn löschen.
Einrichten einer weiteren Datenzelle mit einem Click-Event-Handler, der eine deleteOrder()-Funktion aufruft. Wir werden die Instanz der order-Daten in der Schleife übergeben, wenn das Symbol „delete_forever“ angeklickt wird. Sie benötigen dies für die Dokument-ID. Siehe Code unten für ein Beispiel:
...
<td ="order.payload.doc.data().completed"
(click)="deleteOrder(order)">
<i class="material-icons">delete_forever</i>
</td>
...
Innerhalb Ihrer order-list.component.ts erstellen Sie die zugehörige Funktion, die eine deleteCoffeeOrder()-Funktion innerhalb Ihrer orders.service.ts aufruft.
...
deleteOrder = data => this.ordersService.deleteCoffeeOrder(data);
...
Innerhalb Ihrer orders.service.ts-Datei erstellen Sie die deleteCoffeeOrder()-Funktion und verwenden die data, die injiziert wird, um herauszufinden, was die Dokument-ID ist. Wie bei der Aktualisierung müssen Sie sowohl den Sammlungsnamen als auch die Dokument-ID kennen, um den zu löschenden Datensatz korrekt zu identifizieren. Verwenden Sie .delete(), um Firestore mitzuteilen, dass Sie den Datensatz löschen möchten.
...
deleteCoffeeOrder(data) {
return
this.firestore
.collection("coffeeOrders")
.doc(data.payload.doc.id)
.delete();
}
...
Wenn Sie nun auf das Symbol „delete_forever“ klicken, wird Ihre Angular-App ausgelöst und Firestore angewiesen, den betreffenden Datensatz zu löschen. Ihr Datensatz verschwindet aus der Ansicht, wenn das angegebene Dokument gelöscht wird.
Final Application
Das Github-Repository für das gesamte Arbeitsprojekt finden Sie hier. Sie müssen Ihre eigene Firebase-Datenbank erstellen und sie selbst einbinden, indem Sie die Konfigurationsdateien aktualisieren. Der Code selbst ist nicht perfekt, aber ich habe ihn sehr minimal gehalten, damit Sie sehen können, wie Firestore in einer Angular-App funktioniert, ohne sich durch einen Dschungel von Code wühlen zu müssen.
Ich habe versucht, das Tutorial so weit wie möglich zu komprimieren, ohne irgendwelche Details zu verpassen. Es war eine schwierige Mischung, aber wie du oben sehen kannst, besteht ein großer Teil davon aus dem Angular-Code und nicht viel Firestore. Firebase Firestore kann viel komplexere Abfragen durchführen, aber zu Demonstrationszwecken habe ich es einfach gehalten. Theoretisch kann man, wenn die Datenstruktur gleich bleibt, Firestore auswechseln und andere API-Verbindungen mit minimalem Refactoring einbauen.
Abschließende Worte
Ich persönlich mag Firebase, weil es so einfach ist, schnell produktionsreife Projekte zu erstellen, ohne dass man ein ganzes Backend und einen Server zur Unterstützung erstellen muss. Die Kosten sind nicht allzu hoch, und Testprojekte können kostenlos gestartet werden (und man muss seine Kreditkartendaten erst eingeben, wenn man bereit ist, den Tarif zu wechseln). Insgesamt hat es mehr Zeit gekostet, das Formular und die Schnittstelle zur App zu erstellen, als die eigentliche Verbindung der Anwendung mit Firestore. Aufgrund der Länge dieses Tutorials habe ich keine Formularvalidierung hinzugefügt, werde aber in Zukunft einen weiteren Beitrag darüber verfassen.