Firebase with Flutter beherrschen – Android and IOS

1. FlutterFire: Wenn Sie die linke und einen bereits ausgelagert um ein Full-Stack-Anwendungsentwickler zu werden, dann müssen Sie wissen, wie Sie mit der Datenbank und anderen Backend-Diensten umgehen. Es gibt viele Optionen zur Verfügung, und unter ihnen, Firebase ist die beste Wahl, wenn es darum geht, Anwendungen auf dem Markt innerhalb einer kurzen Zeit zu erstellen und bereitzustellen, durch die uns alles, was wir brauchen, wie Authentifizierung, Datenbank, Posting und Analytics, maschinelles Lernen, Push-Benachrichtigung und vieles mehr. Flutter Fire ist eine Reihe von Plug-Ins, die ein Impuls Florida Apps Firebase Services verwenden, Board Flutter und Firebase sind im Besitz von Google und das ist, warum sie nahtlos zusammenarbeiten. In diesem Kurs werden wir alle wichtigen Themen wie authentifizieren Benutzer vereinbart, E-Mail und Passwort behandeln. Implementieren Sie Google Anmelde-Cred-Operationen mit Firestore Datenbank, Umgang mit Ausnahmen, Hochladen von Dateien in den Speicher, Bildkomprimierung, et cetera. Sind diese Konzepte sind genug, um Ihnen Vertrauen als Entwickler zu geben , so dass Sie sich für Ihren Traumjob bewerben können. 2. Firebase: In dieser Sitzung werden wir unser Firebase-Projekt einrichten. Also zuerst lassen Sie uns eine neue Flut ein Projekt erstellen. Bringen Sie Ihr Verzeichnis, dann ness CMD-Befehlszeile, geben Sie einfach, Flutter, erstellen, und dann Ihren Projektnamen. Ich werde es benennen. Drittens, dritter, fünf Siege, dann drücken Sie die Eingabetaste. Dann werde ich VS Code verwenden. Dann fügen Sie einfach Ihr Projekt in diesem Code an, wie folgt. Jetzt k, v haben unser Projekt. Jetzt. Ok. Gehen Sie nun einfach zu Ihrem Browser und geben Sie Firebase ein. Und hier erhalten Sie die offizielle Seite von firebase dot google.com. Hier können Sie Produkte und Lösungen sehen. Was sind dann die Erweiterungen? Auch? Was sind die großen Unternehmen und Spiele, die sich auf Firebase verlassen. So ist Duolingo berühmt, und Lima von Extremisten und Ihre Panzer ist berühmt. Lift ist auch eine sehr berühmte App. Venmo ist bereit berühmt. Also hier können Sie Firebase sehen, wird er von einer Menge Anwendung verwendet? Jetzt müssen Sie sich nur mit Ihrem Google-Konto hier anmelden und dann auf Gehe zur Konsole klicken. Ja, sehen Sie können mein Google-Konto sehen und klicken Sie dann einfach auf Gehe zur Konsole. Und hier habe ich verschiedene, verschiedene, mehrere Projekte, aber ich nehme an, Sie werden keine haben. Sie müssen einfach auf dieses Projekt klicken und es dann einen Namen geben. Ich werde es Firebase nennen. Und wenn Sie möchten, können Sie aktivieren und analysieren. Ich will jetzt nicht unverschönert werden. Dann können Sie einfach auf Projekt erstellen klicken. Nach dem Projekt wurde diese erfolgreich erstellt. Hier wird es nur ein paar Sekunden dauern. Firebase wird uns mitteilen, dass unser neues Projekt fertig erstellt wird. Und es wird uns zum Projekt-Dashboard leiten. Hier, so. Jetzt haben wir unser Dashboard und hier können Sie Alda Produkte sehen, die es uns zur Verfügung stellt, dass Authentifizierung, Datenbankspeicher ist. Und so wird unsere erste Aufgabe darin bestehen, unsere flirtete Anwendung so zu konfigurieren, dass diese Firebase verwendet wird. Und ich werde entsperren konfiguriert die Android, aber auf jeden Fall, wenn Sie wollen, können Sie iOS und Web als auch konfigurieren. Es liegt an dir. Um es zu konfigurieren. Klicken Sie einfach auf diesen Android-Button. Und jetzt in diesem Bildschirm wird es uns den Android-Paketnamen fragen. Und dieser Paketname. Wir können es von unserem Flattern EPA Projektleiter bekommen, das ist das Android. Dann in dieser App, müssen Sie nur gehen, um Kredit zu erstellen. Hier. Dies ist die Anwendungs-ID unseres Flatterns. Sie müssen es einfach hier einfügen. Ich werde nur in der Flut dort Firebase nennen. Und dieser saure freche SHA-1 Schlüssel ist sehr wichtig, aber wir werden ihn in den späteren Videos verwenden. Dann, nachdem sie einfach einfach auf App registrieren klicken. Der nächste Schritt besteht darin, diese Konflikteinreichung herunterzuladen. Das ist sehr wichtig. Es enthält die API-Schlüssel und kritischen Informationen, die Firebase verwenden kann. Klicken Sie einfach auf diesen Download. Google services.js IN. Und nachdem es erfolgreich heruntergeladen wurde, müssen Sie einfach diese Datei aus dem Download-Ordner ausschneiden und zu Ihrem flacheren Projekt gehen. Dann gehen Sie zu Android, dann gehen Sie zur App und fügen Sie sie einfach hier ein. Das war's. So wird es gemacht. Danach klicken Sie auf das nächste in der Firebase. Der dritte Schritt besteht darin, Firebase SDK hinzuzufügen. Jetzt müssen wir unsere Kreditkonfiguration aktualisieren, um das Google-Dienst-Plugin einzuschließen. Die ersten Änderungen werden in diesem Projektebene Bett vorhanden sein. Net ist, wir haben dieses Android noch. Dann ist die Rechnung auf Projektebene diese. Hier. Wir müssen einfach diesen Klassen-Teil kopieren und ihn hier einfügen. Ok? Und dann ist die App-Ebene Build Schulden hier. Wir haben diesen App-Ordner. Und in diesem Aufbau Gradle müssen wir zuerst diese Implementierung kopieren und hier einfügen. Und als nächstes müssen Sie einfach diese kopieren, anwenden Plugin com, Google GMS, Google-Dienste, und am unteren Rand eingefügt. Das war's. Dieser Code ist bereits da. Es ist bereits in Florida-Projekten vordefiniert. Nun dann der nächste Schritt ist es, Firebase-Plugins in unserem Projekt hinzuzufügen. Da die Affinität wird es einige Abhängigkeiten für Firebase geben. Und hier müssen Sie nur auf Weiter klicken und dann weiter zur Dunkelheit gehen und so weiter. Ok. Für die Abhängigkeiten, wir müssen einfach zu dev gehen und gefeuert mit wird durch eine Reihe von verschiedenen, verschiedenen Verbindlichkeiten zugegriffen. Eine für jedes Firebase-Produkt, d. h., ob es sich um Datenbank, Authentifizierung, Analyse, Speicher handelt. Firebase stellt eine Reihe von verschiedenen Plugins zur Verfügung. Wir müssen nur Firebase Core schreiben. Das erste Plugin, das wir brauchen. Klicken Sie einfach auf die Installation und hier, kopieren Sie dies, fügen Sie es in Ihre Abhängigkeit ein. Ok. Dann ist die nächste Abhängigkeit, die wir brauchen, die Firebase-Kunst. Weil wir lernen, wie man sich mit Firebase Tiefe authentifizieren wird nicht kopiert und in unsere Pub Spezifikation YAML Datei eingefügt. Ok. Jetzt haben wir die Abhängigkeiten erfolgreich hinzugefügt. Dann nächste Änderung, die wir tun müssen, ist im App-Level-Aufbau Gradle hier in dieser Standardkonfiguration, wir müssen nur eine Codezeile schreiben, die mehrere Jahrzehnte ist. Ein böses, wahr. Dies ist also eine Codezeile, die erforderlich ist. Wenn wir es mit Firebase zu tun haben. Das Ding, an das du dich erinnern musst. Es ist ein Konfigurationsteil. Jetzt, okay. Alles ist in Ordnung. Sie können auch in unserer Folie sehen, unser erster Schritt der Einrichtung Firebase-Projekt ist erledigt. Dann ist unsere Konfiguration unserer Anwendung erledigt. Die Konfigurationsdatei wird in diesem Projekt gespeichert. Dann haben wir die Firebase SDKs hinzugefügt, dann auch taube Plug-Ins. Jetzt ist der letzte Schritt, diese Codezeile in sie zu schreiben, Main.jack, so dass unsere Anwendung in Firebase anfänglich initialisiert, wenn unsere App Dad ist, wenn unsere App gestartet wird. Es sollte also wissen, dass es die Firebase-Konfigurationen initialisieren muss, um mit dem Server zu kommunizieren. Also in der Hauptdatei müssen Sie einfach die Hauptfunktion gehen und es zu einer Spüle machen. Dann müssen Sie Widget schreiben, flirten ihre Bindungen beginnen, stellen Sie sicher, initialisieren. Das bedeutet, dass der Code jetzt darunter liegt, initialisiert wird. Und dann ist die nächste Zeile wach, Firebase, Firebase. Und dann initialisieren App, die sagte, dies ist der Code, an den Sie sich erinnern müssen. Vertrau mir einfach, wenn du Firebase verwendest, ist dies das erste, was du schreiben musst. Dann nur unsere App und integrieren Firebase darin. Keiner, das war's. Der letzte Schritt besteht darin, die Anwendung auszuführen. Sie können Ihren Emulator oder Ihr physisches Android-Gerät anschließen, um die Anwendung zu testen. Und klicken Sie einfach auf diesen Run und starten Sie dann mit dem Debuggen. Ihre App ist auf jeden Fall eingestellt. Und in der nächsten Sitzung werden wir die UIs erstellen, die für die Authentifizierungs-App erforderlich sind. Danke. 3. Registrieren und Login: Willkommen. In dieser Sitzung werden wir unseren Login- und Registerbildschirm erstellen. Denn offensichtlich, wenn wir eine Art von Benutzeroberfläche benötigen, um mit Firebase-Datenbank zu interagieren, läuft unsere App jetzt erfolgreich. Wissen gibt es, dass Firebase richtig konfiguriert wurde. Lassen Sie uns zuerst ein paar Ordner in der lib erstellen, weil ich Art gefalteter Strukturen bevorzuge, anstatt nur zufällig Dateien zu löschen. Der erste Ordner, den ich Modelle erstellen werde, dann Bildschirme und dann Dienste, in denen Alda API ist, die Datenbankdienste, werden auf dem Innenbildschirm geschrieben. Lassen Sie uns eine neue dunkle Datei namens Register-Bildschirm erstellen. Lassen Sie uns unseren ersten zustandslosen Bildschirm erstellen. Importieren Sie unser Materialpaket, und erstellen Sie dann eine zustandslose Region und benennen Sie es Register Bildschirm. Es wird ein Gerüst zurückgeben, da es sich um einen Bildschirm handelt. Dann v, Lassen Sie uns AB-Bar geben und dann geben Sie es einen Titel. Textregister. Zentrieren wir den Titan und geben ihm auch die Hintergrundfarbe. Geben Sie ihm Farben, die ausgezeichnet sind. Und im Körper möchte ich ihm diese Spalte geben. Und diese Spalte werden wir Kinder haben, aber davor würde ich gerne zu unserer Hauptpunkt-Punkt-Punkt-Datei gehen. Und wir verschieben diesen PVS-Dummy-Code. Und zu Hause möchte ich Registerbildschirm schreiben. Und darin gebe ich es dort Firebase. Lassen Sie uns unsere App neu starten. Sehen Sie, das ist unser Registerbildschirm. Nun, unser Index und das sieht auch gut aus. Jetzt ist es an der Zeit, dass Kinder, erstellen wir Textfelder zum Sammeln von Benutzerdaten. Lassen Sie uns unseren ersten Text erstellen, wenn Dekoration gegeben. Geben Sie ihm eine Eingabedeklaration von Label, Text , E-Mail, und geben Sie ihnen dann Rahmen, Zeile, Eingaberahmen. Und auch für jedes Textfeld müssen wir Textbearbeitungs-Controller erstellen. Lassen Sie uns zuerst die Text-Ende-Controller erstellen. Lassen Sie uns den ersten E-Mail-Controller erstellen. Dann wird es dann ein Passwort-Controller geben, wie wenn Bus Word-Controller, wie dies. Dann wird die endgültige Passwort-Controller bestätigt werden. Denn wenn wir uns registrieren, möchten wir, dass der Benutzer sein Passwort bestätigt. Höhle. Textbearbeitungs-Controller ist dann neun dieser Text für in Lassen Sie uns diesen E-Mail-Controller geben. Ok. Danach gab uns Größe Box nur einige Abstandshöhe der Türkei zu geben. Dann wieder erstellt TextField. Geben Sie ihm einen Controller des Passwort-Controllers, dann geben Sie ihm Eingabe-Dekoration, Etikett, Text. Sollte Passwort sein und dann geben Sie ihm eine Grenze der Gliederung, setzen Rahmen und Index in diesem Text wird verdeckten Text geben wahr, so dass, was auch immer der Benutzertyp versteckt ist. Dann wieder, geben Sie ihm eine Größe Box. Sagt, dass funktioniert. Dann schließlich, unser TextField aus bestätigen Passwort verdeckt den Überschuss durch. Dann Controller als Passwort-Controller bestätigen. Dann in dieser Deklaration, geben Sie ihm eine Eingabedekoration, Textpasswort. Und dann umrissen. Dann gute Größe Box. Wieder. Speichern wir es und überprüfen Sie es. Sehen Sie alles, was Textfelder vorhanden sind. Jetzt ist es Zeit v gibt einige Polsterung, um es weil sie an Schulden an den Enden des Bildschirms sind. Und ebenso wie ein Submit-Button. So dass, wenn der Benutzer auf die Schaltfläche Senden klickt, wird es gemacht. Es wird auf den Home-Bildschirm oder die Farbe, die wir ausführen möchten, gebracht werden. Also hier im Körper, schnelle Baddie, und geben Sie es eine Polsterung von tun D. Dann in dieser Spalte, gegeben Haupt existiert Ausrichtung von mir nächste Zelle und Mendota Zentrum. Also ist alles zentriert. Jetzt. Lassen Sie uns zunächst einem Behälter eine Höhe von 50. Und in der Breite der Größe des Bildschirms. Der Bildschirm. Dann geben wir ihm die Form eines Spielraums. Aber dann in der On-Premise jetzt werden wir nichts haben. In diesem Kind. Ich würde einen Text schreiben, einreichen und ihm etwas Styling geben, wie Schriftgröße von 25. Und dann warte, warte. Lassen Sie uns speichern und überprüfen Sie es. Siehst du, es sieht gerade so schön aus. Nach diesem Submit-Button möchte ich einen neuen Button haben, einfach hier einloggen wird, damit der Benutzer sich anmelden kann, wenn er sich bereits registriert hat. Weicher dieser Behälter, ich werde eine Größe Box haben. Größe Box der Höhe zwei in der Tat. Und es dauert, aber dann die nächste Schaltfläche, die bereits einen Account Login hier haben wird . Und jetzt speichern Sie es. Sehen Sie, wir haben diese Schaltfläche, so dass, wenn wir darauf klicken, der Benutzer zum Anmeldebildschirm gesendet wird. Also ist es Zeit, dass wir Lobbying-Bildschirm als auch erstellen. also im Ordner Bildschirme Erstellen Siealso im Ordner Bildschirmeeine neue Datei namens non-kin screen dot-dot dot. Wieder einmal, nur in beidem Material. Erstellter Zustand weniger starr des noggin-Bildschirms. Dann gib eine Gerüst-App und die App zurück, aber ich werde diesen Titel geben. Einloggen. Und zentrieren Sie den Titel. Und ich werde Hintergrundfarbe von Bigram Farben Punkt d geben. Es ist eine grünliche Farbe, Farbton Farbe. Nun, in diesem Körper, werde ich wieder zwei Textfelder erstellen. Aber zuerst werde ich Ihnen lesen, weil ich weiß, dass Bettwäsche benötigt wird. Und Einsätze Punkt D. Dann in diesem Glanz, werde ich eine Spalte geben. Dann Haupt existiert Ausrichtung, Hauptausgänge lm.fit Mitte. Dann werde ich in diesen Kindern einfach diese beiden Textfelder, also die E-Mail und das Passwort,vom Registerbildschirm also die E-Mail und das Passwort, kopieren und hier einfügen. Und auch werde ich diese Textbearbeitung Controller kopieren. Ok. Jetzt werden wir nach dieser Größe haben, wieder, diese Schaltfläche, die dieser Container ist, der sagt Absenden. Ok. Wir haben unsere Login-Bildschirme eingerichtet. Jetzt ist es an der Zeit. Wenn Sie jemanden verwenden, klickt hier auf diesen Login. Aber dann sollte er navigiert werden. Dafür. Wir haben heute gerade Navigator Dot Push. Dann in der Route, müssen wir einfach meine tägliche Seite Route hinzufügen. Dann lassen Sie Kontexte und senden Sie es dann an den Anmeldebildschirm. So wie das. Lass es uns retten. Und jetzt überprüfe es. Überprüfen Sie unsere Anwendung. Wir haben diesen Registerbildschirm hier. Jetzt, wenn ich hier auf diesen Login klicke, sehen Sie unseren Login-Bildschirm erscheint. Das ist das E-Mail- und Passwortfeld mit der Schaltfläche „Senden“. Und wenn ich auf diesen Zurück-Button klicke, wieder, ist unser Registerbildschirm da. Das ist also alles für dieses Video. Wir haben die Benutzeroberfläche. In. Dann nächste Sitzung werden wir die Firebase-Authentifizierung mit E-Mail und Passwort implementieren. 4. Authentizität mit E-Mail-Passwort: Willkommen. In dieser Sitzung werden wir Firebase, E-Mail und Passwort Authentifizierung implementieren . dies zuerst zu implementieren, müssen wir zum Firebase-Dashboard gehen und auf diese Authentifizierungsschaltfläche klicken. Dann unter der Unterzeichnung, die hier ist, wenn wir nur erst einmal, klicken Sie auf Erste Schritte und Nachmittag. Und dann diese Unterzeichnung, müssen wir eine Schweißer-E-Mail und Passwort hinzufügen, indem Sie einfach auf diese flink klicken und dann speichern. Aber sehen Sie hier können Sie ältere Erwachsene Anbieter sehen, dass dieses Telefon, Google, Facebook, Twitter, Microsoft. Es gibt uns viele verschiedene Möglichkeiten. Aber okay, wir haben jetzt vor allem, wenn diese E-Mail und Passwort, das ist, was erforderlich ist. Danach müssen wir den Authentifizierungsdienst implementieren. Und dafür müssen wir in unseren Services-Ordner gehen und eine neue Datei namens Art Service Punkt Punkt erstellen . Ok? Und hier werden wir Alda Firebase Authentifizierungslogik implementieren erforderlich. Erstellen Sie jetzt ein neues Benutzerkonto. In Firebase. Wir müssen die Funktion aufrufen, die Benutzer mit E-Mail und Passwort erstellen. Firebase Kunst-Paket gibt uns viele verschiedene Optionen, die wir diskutieren werden. Aber zuerst, lassen Sie uns den Klassennamen Kunstservice erstellen. Und dann müssen wir zuerst eine Instanz der Firebase-Kunst erstellen. Also müssen wir Firebase-Kunst hinzufügen. Dann Firebase Kunst. Und richtig, ich war R-Dot Instanz. Also, jetzt haben wir Instanz. So hier können Sie sehen, es gibt uns Studie. Es gibt uns die verschiedenen Optionen, die wir sehen werden. Aber zuerst, lassen Sie uns eine Funktion erstellen, um Benutzer zu registrieren. Die Funktion wird ein zukünftiger Funktionsname registriert sein. Und diese Funktion wird zuerst akzeptieren, wenn wir E-Mail. Und zweitens wird das Passwort sein. Ok? Jetzt können Sie das hier sehen. Faserkunst gibt uns viele verschiedene Möglichkeiten. Das heißt, Telefonnummern zu überprüfen, mit Telefonnummern zu signieren, sich mit E-Mail und Passwort anzumelden. Also das ist, was wir benötigt E-Mail und Passwort. Und jetzt ist diese E-Mail diese. Dieses Kennwort ist ein Kennwort, da diese Anmeldung mit E-Mail und Passwort auch zwei Parameter von E-Mail und Passwort haben. Und dieses Ergebnis werden wir es in einer Variablen namens Benutzeranmeldeinformationen speichern. Und dann Benutzeranmeldeinformationen. Denn wenn Sie mit dem Mauszeiger über die Signatur mit ihm und Passwort, können Sie sehen, es gibt uns eine Zukunft der Benutzeranmeldeinformationen nicht sterben. Jetzt werde ich einfach Benutzeranmeldeinformationen dot user zurückgegeben. Und dieser Benutzer ist ein Datentyp dieses Benutzers, der eine Funktion ist, die auch null zurückgegeben werden kann. Also werde ich nur gerne statisch Typ oder Typen eingeben. Dies wird dringend empfohlen, damit es später keine Verwirrung gibt. So haben wir erfolgreich unsere erste Funktion erstellt, die uns hilft, unseren Benutzer zu registrieren. Und man kann mit den Chordaten sehr einfach sehen. Es war nur eine Codezeile. So einfach ist es. Nun, von der Benutzeroberfläche, das ist dieser Registerbildschirm, müssen wir diese Funktion auch ausführen. Also gehen wir jetzt zu diesem Behälter und drücken Sie die Taste. Zunächst möchte ich einige IF-Prüfungen geben. Das heißt, ich möchte nicht, dass die E-Mail und das Passwort leer sind. Also werde ich nur schreiben, wenn controller.js Text gleich Mt ist, unser Passwort-Controller dot dx ist gleich leer. Wenn es leer ist, dann werde ich eine Snackbar mit Gerüst Messenger zeigen , dass off Kontexte dot Snackbar zeigen. Und im Inhalt werde ich Dramatiker scheinen, ein Text von Flossen sind erforderlich und geben ihm eine Hintergrundfarbe von Farben dunkler rot. Die nächste Überprüfung, wenn ich überprüfen möchte, ist, ob Passwort-Controller-Punkttext nicht gleich ist, um das Passwort im Controller zu bestätigen, das heißt, ich habe beide Werte gewonnen, die zu sehen sind. Wenn es nicht gleich ist, dann werde ich wieder eine Snackbar mit der Wertrückgabe zeigen. Passwörter stimmen nicht überein. Das war's. In der letzten if-Aussage rief ich unsere Art Service Class an. So wie das. Ich habe dieses Objekt und dieses Objekt erstellt. Wir werden diese Register-Funktion verwenden, die zwei Parameter akzeptiert. Die erste ist E-Mail und die zweite ist das Passwort. Also für die E-Mail, werde ich einfach die Milken zu lambda x schreiben. In für das Passwort, Ich werde Passwort-Controller Punkttext lassen. Und jetzt gibt uns dies zurück, dass ein Benutzer nicht eingegeben hat. Und wir machen es einfach hier. Und ich werde nur überprüfen, ob das Ergebnis nicht gleich null ist. Das heißt, es hat erfolgreich Daten gesendet, dann werde ich nur Druckerfolg schreiben. Und drucken Ergebnis Punkt-E-Mail. Das heißt, okay, unser Code hier ist fertig. Speichern Sie es jetzt und bringen Sie unseren Emulator heraus. Also FASTA Datei, Ich werde nichts eingeben und einfach auf Senden klicken. Siehst du, ich verstehe diesen Hals, aber Phil sagte erforderlich. Dann werde ich einfach Adresse schreiben, nicht gefälscht. Es ist in Ordnung. Ich benutze nicht mein eigenes Passwort und mein Passwort bei jedem Lesen. Daten 1, 2, 3, und dann hier werde ich nur schreiben floh ihre 12. Das heißt, wenn bestätigen Passwort und Passwort sind nicht identisch und klicken Sie auf Senden dann Website, aber nicht übereinstimmen. Und wenn ich auf a klicke, wenn ich das Bestätigungskennwort richtig schreibe, und klicke dann auf die Schaltfläche Absenden. Ich glaube, ich habe einen kleinen Fehler gemacht. Schauen wir es uns an. Im AAD-Dienst denke ich, ich habe gerade die Anmeldung mit E-Mail und Passwort geschrieben, die Benutzer mit E-Mail und Passwort erstellen sollte. Das war also ein sehr dummer Fehler von mir. Aber jetzt können Sie sehen, wie Sie sich auch anmelden können. Dieser Code selbst definiert, was er tut, ist es einen neuen Benutzer erstellt. Also wieder, ich werde einfach E-Mail und Passwort schreiben. Und jetzt, wenn ich auf die Schaltfläche „Senden“ klicke, sehen Sie in der Debug-Konsole, dass es Erfolg zeigt. Gehen Sie nun zu Ihrem Firebase-Authentifizierungsbildschirm und klicken Sie in der Benutzertabelle auf Aktualisieren. Jetzt können Sie diesen Benutzer sehen, was auch immer wir registriert haben. So haben wir erfolgreich ein Wort erstellt und registriert, erster Benutzer. Also der Anbieter unterscheidet sich, es zeigt, dass dies von der E-Mail- und Passwortsignierung auf diesem und dies, es ist, es ist eindeutige UUID. Nun müssen wir auch eine Funktion für diesen Login erstellen. So ähnlich in der Kunst-Bildschirm, oh sorry unsere Dienste dot dot dot. Lassen Sie uns eine Login-Funktion haben, die auch wenn die Zukunft angespannt ist. Ein Benutzer hat nicht so getippt. Und es akzeptiert String und String Passwort. Und jetzt, genau wie oben, haben wir diese DevOps-Benutzer können Zoll. Und es wird warten. Fünf ist ein seltsamer Punkt. Jetzt wird es mit E-Mail und Passwort wie folgt anmelden. Also das obige ist erstellen Sie Benutzer mit E-Mail und Passwort. Und jetzt ist dieser mit E-Mail und Passwort anmelden. Und danach werden wir nur Benutzeranmeldeinformationen Punkt Benutzerwert zurückgeben. Ok? Also haben wir diese Login-Funktion gierig. Wieder. Ähnlich wie vorher. Wir müssen zu unserem Login-Bildschirm gehen. Und hier sollten wir unsere wenn sonst Aussagen haben. Ich gehe einfach zum Registerbildschirm und kopiere diesen Code. Und dann loggen Sie sich ein. Screenshot dunkel, nur innerhalb der auf Presse eingefügt. Also hier wollen wir diese zweite else-if nicht und nur die erforderlichen Bibliotheken importieren. Okay, dann nächste Änderung, die Sie tun müssen, ist anstelle dieses Plugins. Und das war's. Sie einfach diese Art von Anwendung. Überprüfen Sie, ob alles in Ordnung ist. Und jetzt getestet. Jetzt, wenn ich zu diesem Login gehe und meine E-Mail, die ich gerade registriert. Und jetzt, wenn ich auf dem Anmeldebildschirm auf die Schaltfläche „Senden“ klicke, sehen wir, was passiert. Sehen zeigt Erfolg. Das heißt, wir sind jetzt gebaut, um sich auch erfolgreich anzumelden. Das war's also. Das ist sehr einfach. Ich denke, Sie denken vielleicht auch, dass die Verwendung von Firebase ziemlich einfach ist. Code sind sehr minimal und es macht diesen Job in kürzester Zeit. Das ist also alles für dieses Video. Wir sehen uns in der nächsten Sitzung. 5. Exception-Handling: In dieser Sitzung werden wir über Fehlerbehandlung sprechen. Also, bis jetzt haben wir nicht die Szenarien behandelt, in denen der Benutzer möglicherweise ungültige E-Mail oder Passwort eingeben , während entweder die Registrierung versuchen, sich anzumelden. Also im letzten Video, Sie könnten diese Art von Bestellung gesehen haben, wenn ich versehentlich schrieb Anmeldung und Anmeldung mit E-Mail und Passwort statt erstellen Konto oder erstellen Sie mit Benutzernamen und Passwort dort, Firebase Kunst. Also zu dieser Zeit haben wir auch diese Art von Ausnahme. Und das wurde so gezeigt, weil wir nicht alleine damit umgehen konnten. Es könnte also verschiedene Arten von Beispielen geben, wie wir ein ungültiges E-Mail-Format eingeben , während wir unsere Eingabe falsches Passwort während der Anmeldung registrieren, werden wir eine Ausnahme wie unten erhalten. Die Idee so. Und entweder so und unsere Anwendung wird stecken bleiben. Es wird eine sehr schlechte Erfahrung für die Endbenutzer sein. Und deshalb müssen wir damit richtig umgehen. So können wir es einfach tun, indem wir try catch-Block verwenden. Versuchen Sie also catch-Block, den ich benutze, um auszuüben, wie man diese Art von Ausnahmen behandelt. Also zuerst, machen wir es mit unserer dritten Funktion. Ja, genau richtig. Versuchen Sie es. Und dann, da diese mit Ausnahmen gefeuert werden, und ich möchte Ihnen zuerst zeigen, welche Art von Ausnahmen. Also registrieren Bildschirm. Lassen Sie uns versuchen, es zweimal zu benutzen. Nur seitdem das nicht ist. Jetzt bestätigen wir Flow 1, 2, 3. Nun, wenn ich auf das Senden klicke, siehe Ausnahme ist aufgetreten und dies ist, wenn Firebase die Ausnahme sind, heißt es, dass die E-Mail bereits verwendet wird. Also diese Art von Szenarien, über die ich gesprochen habe. Und in der Debug-Konsole können Sie hier wieder die Ausstellung sehen. Und da es eine ungerade Firebase-Ausnahme war. Also müssen wir das einfach in unseren try-catch-Block schreiben. Also hier werde ich versuchen. Dann auf Firebase Art Ausnahme, wie diese, werde ich den Fehler fangen. Und am Ende werde ich wieder fangen, wenn etwas anderes Fehler da sind. Nicht. Schneiden Sie diesen Code aus und fügen Sie ihn in den try-Block ein. Jetzt? Okay, wir haben diesen Versuchsblock. Und wenn eine Ausnahme auftritt, müssen wir dem Benutzer ein Feedback zeigen. Und um eine Snackbar zu zeigen, brauchen wir einen Rechnungskontext. Also werden wir auch nach Bill Kontexten fragen. Und er widersteht roten Pillenkontexten Kontext. Und jetzt zeigt es diesen Fehler in der Register-Skin, weil wir auch Kontext senden müssen. Nun, lesen Sie diese Rechnung Kontexte Gesetzlosigkeit zeigen einfach einen Gerüstboten. Kontext Dot Show Snack Bar. In Bar. Lassen Sie uns Inhalt, Text, Nachricht Punkt zwei Zeichenfolge. Und lasst uns eine Hintergrundfarbe der Farben beginnen zu lesen. Okay, und hier diese Streuung, wir drucken es nur für Sie, wenn Sie wollen, können Sie wieder Gerüst zeigen. Und ich sage das noch einmal, dass wir seltsam verwenden , weil wir wissen, dass die Ausnahme von Firebase sein wird. Und wenn etwas Neues auftaucht, wird es von diesem Catch-Block behandelt. Okay, lassen Sie uns dasselbe noch einmal versuchen und sehen, ob unsere Anwendung stecken bleibt oder nicht. Das Passwort. Ok. Nun, wenn ich auf das Submit klicke, siehe die sofortige, dies wird bereits von einem anderen Elektron verwendet. Also das ist so schön Dann, bevor unsere Anwendung gerade nicht stecken bleibt. Nun lassen Sie uns das gleiche tun, um unsere Login-Funktion ausgeführt wird. Versuchen wir es mal. Dann auf Firebase, ungerade Ausnahme. Lasst uns fangen. Dann die letzte Antwort werden wir einen catch-Block haben. Am einfachsten, habe ich das von hier bekommen. Sie sagen. Auch hier werden wir einen Haken zeigen, aber wie zuvor. Und dafür müssen wir zunächst diesen Rechnungskontext akzeptieren. Und in diesem werde ich nur sagen drucken. Gehen Sie nun auf Skin dot-dot dot. Und hier, wo wir die Login-Funktion aufrufen, müssen wir diesen Kontext senden. Okay? Unser hier, dieser Teil ist fertig. Lassen Sie uns es mit unserem Login überprüfen und etwas geben, das nicht registriert wird. Diese E-Mail ist nicht registriert. Also mal sehen, ob ich auf das Senden klicke. Um einen neuen Benutzerdatensatz zu aktivieren, der dieser Kennung entspricht, kann der Benutzer gelöscht werden. Zumindest wissen sie, dass der Benutzer ungültig ist. Sie sollten sie zuerst registrieren und dann versuchen, sich anzumelden. Also haben wir gelernt, wie man die Ausnahmen wie diese richtig behandelt. Das ist also alles für dieses Video. Ich hoffe, Sie haben heute genossen, indem Sie etwas Neues gelernt haben. Und Q 6. Indikator beim Authentifizieren: Hi. Kein Zweifel, dass Sie Ausnahmen erfolgreich behandelt haben, aber nicht. Jetzt geben wir kein Feedback an den Benutzer, wenn er auf „Senden“ klickt, während er versucht, entweder unser Login zu registrieren. Dies ist keine gute Vorgehensweise, da der Endbenutzer nicht einmal weiß, dass die Anforderung vom Mobilfunknetz gesendet wird. Und er sollte nicht auf andere Tasten klicken, die Basis. Wenn ein Benutzer auf die Schaltfläche „Senden“ klickt, sollte er nicht in der Lage sein, auf die Schaltfläche „Senden“ zu klicken, bis er gibt, er erhält eine Art von Feedback vom Server. Oder es wird einige Fehler weil es mehrere Anfragen mit den gleichen Daten geben wird. So ist der beste Weg, um einige Ladeanzeige zu zeigen , so dass sie auch wissen, dass er warten muss. Und um einen Ladeindikator zu zeigen. Der erste wichtige Schritt ist es, unsere zustandslosen Widget tun Immobilien voll starr zu konvertieren. Also in ihren Registern sauber, Es ist einfach gehen. Und jetzt konvertieren Sie dies in einen Zustand voller, starrer Zustand voll , weil sich der Zustand der Benutzeroberfläche ändert, sobald es einen Ladeindikator zeigt. Und das ist das nächste Mal, es wird die Schaltfläche „Senden“ angezeigt. Und um diese Art von wahren und falschen Werten zu behandeln, müssen wir eine boolesche Variable namens loading erstellen und ihr einen Standardwert von false geben. Wenn ein Benutzer zu diesem Bereich kommt, das heißt, es gibt keine Ladeanzeige, wenn diese Seite gerendert wird. Jetzt müssen wir bedingte Anweisungen verwenden. Das heißt, wenn sonst. Um einen Ladeindikator auszugeben, ist ein Submit-Button. Und da es nur eine Codezeile ist, werde ich einen ternären Operator verwenden. Also werde ich hier einfach klären, laden. Wenn es wahr ist, dann zeigen Sie einen zirkulären Fortschrittsindikator an. Wenn nicht, dann zeigte dieser Container, die die Schaltfläche ist, Schaltfläche Senden. Lass es uns retten. Aber bis jetzt haben wir es gerade gehört dann diesen ternären Operator. Aber wir sollten dieses Datum festlegen, wenn dieser Senden-Knopf gedrückt wird. Also hier haben wir zwei Sets. Das Laden des Zustands ist gleich true. Dann wird dieses Stück Zeile ausgeführt. Und dann, nachdem es erfolgreich ausgeführt wurde, müssen wir die Bühne wieder auf false setzen, so dass, wenn einige Erfolge sind, danach unser Ladefortschrittsindikator entfernt wird. Probieren wir es aus. Lassen Sie uns den Bildschirm runterbringen. In dieser E-Mail. Lasst uns von Airbase schreiben. Mit dem Tempo. Gmail.com gibt Ihnen den Wert 123123. Und jetzt klicken Sie auf so jemand, aber sehen Sie, das ist die Ladeanzeige. Und jetzt nachdem es erfolgreich dieser Ladeindikator ist Feder entfernt. Sie können zur Firebase-Konsole wechseln und aktualisieren, damit Sie dies überprüfen können. Siehe, diese E-Mail-Adresse wird auch registriert. Dieser dritte auf dem Server. Lassen Sie uns dasselbe für den Anmeldebildschirm tun. Das heißt, wir sollten auch hier einen Ladeanzeiger anzeigen. Lassen Sie uns dies zuerst in ein stateful Widget konvertieren. Erstellen Sie dann einen Booleschen Ladevorgang, gab ihm einen falschen Wert, Standardwert. Dann hier, ternärer Operator. Lassen Sie uns schreiben, wenn es wahr ist, dann zeigen Sie einen kreisförmigen Fortschritt in der, Wenn nicht nur der Container. Und wenn dies auf Drücken gedrückt wird, dann wird die Ladeanzeige wahr sein. Und am Ende hat der Ladeindikator es auf false gesetzt, so dass wir wissen, dass die Server-Sache 10 ist. Lass es uns retten. Gehen wir zu unserem Login-Bildschirm. Und das ist richtig. Wo Basis und T min.com und Passwort. Ok. Klicken wir auf die Schaltfläche „Senden“ und sehen Sie die Ladeanzeige. Und wir haben diesen Erfolg. Das ist alles, was wir erfolgreich einen Ladeindikator gezeigt haben , während es eine Anfrage an den Server gibt. Da es sich um sehr kleine, kleine Änderungen handelt, aber es wird sich auf die Leistung auswirken. Oder Sie können sagen, dass die Benutzerfreundlichkeit für Ihre Anwendung ist. Vielen Dank. 7. authentication prüfen: Hallo, willkommen zurück. In dieser Sitzung überprüfen wir, ob der Benutzer bereits angemeldet ist oder nicht. So schön, nehmen wir an, der Benutzer hat sich erfolgreich angemeldet. Aber was ist, wenn er unsere Bewerbung schließt und wieder angefangen hat? In dem Fall möchten wir nicht, dass der Benutzer seine Anmeldeinformationen erneut eingibt. Stattdessen sollten wir überprüfen, ob sich dieser Benutzer bereits zuvor angemeldet hat. Und dies kann sehr einfach mit Firebase implementiert werden. Aber vorher sollten wir das schaffen. Wir sollten eine neue Startbilddatei innerhalb des Bildschirmverzeichnisses erstellen. Gehen wir zu den Bildschirmen und erstellen Sie dann einen neuen Startbildschirm, dot-dot-dot. Ja, importieren wir unser Material wie immer. Lassen Sie uns einen zustandslosen Region-Startbildschirm erstellen. Dann dieses Café. Dann geben wir den Titel. Text. Dann zentriert direkt durch Hintergrundfarben Farben, rosa. Diesmal. Und Aktionen, Ich möchte einen Button von Logout geben. So wird nur ein Textschaltflächenpunktsymbol beim Drücken MD sein. Ich kann, ich werde geben, ich kann Love Out beginnen. Und im Etikett werde ich ihm einfach Text der Abmeldung geben. Okay. Und das melden Sie sich ab. Studieren Sie diese Schaltfläche. Ich möchte dieser Schaltfläche auch etwas Styling geben, nicht die Schaltfläche selbst beschriften. Und ich werde nur Text sagen, aber dann dieser Stil von und in diesem primären. Und wir fangen an, als hätten wir unseren Home-Bildschirm bereit. Aber wir sollten auch sicherstellen , dass, wenn ein neuer Benutzer unseren Login erfolgreich registriert hat, er zu diesem Home-Bildschirm navigiert werden sollte. Früher bekamen wir gerade eine Antwort in der Debug-Konsole. Gehen Sie dazu einfach zum Registrierbildschirm und hören Sie, ob das Ergebnis nicht gleich null ist. Ich werde einfach einfach Navigator-Punkt schreiben , drücken und entfernen. Bis. Und dann neue Route. Ich werde mein Seitenlayout geben. Und ich werde einfach nur Home-Bildschirm schreiben. Das war's. So einfach wie das. Und dasselbe, ich werde es einfach kopieren und einfügen, dann melden Sie sich hier an und importieren Sie unseren Home-Bildschirm. Also VI mit half drücken und entfernen, bis. Du denkst vielleicht, warum verwende ich nicht Push-Ersatz? Weil das einzige Problem hier in diesem Anmeldebildschirm ist. Es ist nicht die endgültige Skala, es verwendet die Push, die ein anderes oben auf einem anderen Bildschirm ist. Es ist, es ist ein Stack und es ist eine Art von Widerstand. Also von hier, wenn ich einen Ersatz drücke, dann wird es auf den Startbildschirm gehen, aber mit der Zurück-Taste. Also die Problemumgehung ist Foster Vater haben Navigator dot zu verwenden. Und dann kann ich Navigator-Punkt verwenden. Drücken Sie die Platzierung in diesem Anmeldebildschirm. Aber ich mag es einfach und ich benutze das einfach. Entfernen Sie alles und drücken Sie einfach den Bildschirm. Das war's. Also lasst es uns ausprobieren. Wenn es funktioniert oder nicht. Warte nur eine Weile. Ich hoffe, Ihr System ist mächtig genug, denn manchmal, während Sie Android Studio oder diese Emulatoren verwenden, ist die RAM-Verwaltung in den meisten Teilen nicht gut. Also lasst es uns ausprobieren. Mal sehen. Geben Sie das richtige Passwort ein. Okay. Klicken Sie auf die Schaltfläche Absenden. Sehen Sie, es funktioniert so gut, dass wir direkt zu unserem Login-Bildschirm hier gesendet hinzufügen. Aber was ist, wenn ich diese Anwendung neu starte? Also, wenn ich diese Anwendung neu starte, ist der Register-Bildschirm da und v werden nicht direkt auf den Home-Bildschirm gesendet. Dies kann also umgesetzt werden, wenn dies geändert werden sollte. Firebase Kunst und ermöglicht es uns, OTT landesweiten Stream abonnieren. Das heißt der Stream bietet ein sofortiges Ereignis des aktuellen Authentifizierungsstatus des Benutzers. Und danach stellt es anschließend Ereignisse bereit, wenn sich der Authentifizierungsstatus ändert. Mit einfachen Worten, Firebase gibt uns die Möglichkeit, diese Änderungen in der Firebase-Authentifizierung zu hören . Lassen Sie uns zu ihnen gehen main.js Datei. Hier. In der Homeschooling. Sie müssen einfach Stream schreiben, wenn sie sind. Dann. So Strom. Wir werden unseren Service Punkt Firebase Punkt Statusänderungen verwenden. Also hier, wenn Sie den Mauszeiger über das Meer bewegen, gibt es uns einen Stream mit den Verwendungen Value benachrichtigt über Änderungen am Anmeldestatus des Benutzers, wie z. B. iodate Unterzeichnung unserer Abmeldung. Und da es eine Zeichenfolge ist, die sie nehmen und die Flüsse kontinuierlich, Builder, haben wir als Kontext und diesen Snapshot hier werde ich einfach schreiben, wenn Snapshot-Punktdaten, dann würden wir den Startbildschirm zurückkehren. Aber wenn nicht, dann werden wir den Registerbildschirm zurückgeben. Dieses Stück Code bedeutet, dass, wenn der Snapshot nicht null ist, dann muss definitiv ein Benutzerwert sein, der sorry, wir sollten den Startbildschirm zurückgeben. Und wenn es null ist, dann sollten wir zurückgeben Debit testet. Nun, da unsere Anwendung, werden Sie sehen, dass wir direkt auf den Home-Bildschirm senden. Siehe hier, da unsere Anwendung bereits weiß, dass der Benutzer zuvor eingeloggt ist. Dies ist sehr wichtiges Konzept, weil die meisten der Anwendung, Sie wollen nicht, dass der Benutzer eine schlechte Erfahrung ausgeliebt automatisch haben . Das war's. Für heute. In der nächsten Sitzung werden wir implementieren, wie zu unterzeichnen, wenn wir kochen, als auch, weil E-Mail und Passwort ist in Ordnung. Aber jetzt die meisten der modernen Anwendung ermöglicht es Benutzern, ihre sozialen Logins als auch zu verwenden. Wir sehen uns in der nächsten Sitzung. Danke. 8. Projekt für Google Sign: Hi. In dieser Sitzung werden wir lernen, wie man Kobalt-Sign-In implementiert. In den letzten Videos lernen wir, wie man Benutzer mit seiner E-Mail und Passwort authentifiziert. Aber heutzutage, in jeder modernen Anwendung, ist die Hilfe eine Option, um Benutzer mit guten sozialen Logins zu authentifizieren. Das heißt, ich habe Google, Facebook, LinkedIn, was auch immer. So heute werden wir lernen, wie Google Anmelden mit Flutter und Firebase zu implementieren. So ist der erste Schritt zu generieren und SHA-Schlüssel. Und Sie fragen vielleicht, wozu SHA der Schlüssel ist? Sie Schlüssel ist erforderlich, um Google zu implementieren, unsere Telefon-Anmelde-Authentifizierung in Firebase, es ist ein eindeutiger Schlüssel für Ihren PC generiert, der für die Signierung verwendet werden kann. Debug-KeyStore ist also für jedes System einzigartig und wird automatisch vom Android SDK verwaltet. Sie müssen also nur daran denken, dass der Debug-Schlüssel benötigt wird, wenn wir testen. Und es gibt ein Pech genannt ein Release-Schlüssel erforderlich ist, wenn wir einreichen, um zu platzieren. Jetzt stellt sich die Frage, wie bekommen wir diesen SHA-1-Schlüssel? Also zuerst müssen Sie einen Speicherort nach dem Debuggen der KeyStore-Datei finden, die sich im Android SDK-Ordner in meinem Windows 10-PC befindet, dieser Speicherort ist Program Files, Android, Android Studio. Gehen wir und schauen es uns an. Gehen wir zum Datei-Explorer. Dann. Also Ground Dateien, Android, Android Studio, GRE, dann lassen Sie uns GRE dann überprüfen, wann. Dann bringen Sie an diesem Ort Ihre Befehlszeile heraus. Und einfach danach musst du diesen Befehl eingeben und das Video pausieren und so aufschreiben. Und dann müssen Sie einfach die Eingabetaste drücken. Das war's. Sie erhalten diese Art von Ausgabewert, finden MD5, SHA-1 und SHA-2 256. Gut. Da es sich also um eine sehr vertrauliche Information handelt, sollten Sie dies nicht mit anderen Leuten teilen. Jetzt kopieren Sie einfach den SHA-1-Schlüssel. Bringen Sie Ihr Firebase-Dashboard heraus. Wechseln Sie zur Projekteinstellung. Und dann hier, Sie müssen es einfach so hinzufügen und dann speichern, laden Sie die neuesten Google-Dienste Jason. Dann schneiden Sie es ab. Dann Android-App, entfernen Sie die vorherige JSON-Datei und stützen Sie diese. Nennen Sie mich? Denken Sie daran, Sie sollten nicht es sollte nicht diese Art von 1 auf wieder geben, einfache Google-Dienste, Jason, das war's. So machst du es also. Stoppen Sie nach ihrem Tod einfach Ihre Debug-Sitzung und starten Sie erneut. Der nächste Schritt besteht darin, die Google-Anmelde-Authentifizierung zu aktivieren. Wechseln Sie zu Ihrem Authentifizierungsbildschirm, d. h. Dashboard. Gehen Sie dann zur Anmeldemethode. Und warte, ich werde es einfach stoppen, weil wir auch Abhängigkeiten installieren müssen. Hier müssen Sie einfach zu Google gehen und es dann aktivieren. Wählen Sie hier eine E-Mail-Adresse und einfach. Klicken Sie auf Speichern. Okay, jetzt haben Sie die Google-Anmeldung erfolgreich aktiviert. Der letzte Schritt besteht darin, zu dev zu gehen und die erforderlichen Abhängigkeiten wie das Signieren des Zentrums von Google zu erhalten. Und die erste, die Sie bekommen, müssen Sie in Ihrem YAML installiert. Und danach ist eine weitere Abhängigkeit erforderlich Google Anmelden Web und installieren Sie es als auch. Also ja, Sie haben erfolgreich und Google anmelden. Dann ist der nächste Schritt, um eine Schaltfläche in unserem Home-Bildschirm für tot zu erstellen. Aber dann verwende ich ein Paket, weil ich keine Schaltfläche in meiner eigenen Datei erstellen möchte , die der Fehler und die Vorlaufzeit läuft. Ich möchte zu dev gehen und den Anmelde-Button erhalten. Ja, das hier. Wie Sie sehen können, erhalten Sie verschiedene Arten von Social Social Login Buttons. So ist es viel einfacher für Sie, dieses Bild und den gewünschten Look mit diesem Plugin zu bekommen. Und kopieren Sie einfach. Und unser Lernen und Debuggen. Nehmen Sie sich etwas Zeit. Authentifizierung ist ein Prozess. Kann Dokumentation erhalten, sind Via Media, mehr Stack Overflow. Ja, viele Optionen. Ich habe diese Art von Fehlern nur ignoriert. Diesmal läuft dein Gradle und hat nicht aufgehört. Bis dahin sind wir gut zu gehen. Okay, also denke ich, unsere App ist jetzt erfolgreich. Und gute Studie ist eine schwere, weichere. Also gehe ich davon aus, dass Ihr System stark genug ist, um die RAM-Verwaltung zu handhaben. Also, da wir das getan haben, überprüfen Sie das Bild, deshalb bekommen wir jetzt den Home-Bildschirm, wir haben dieses Zeichen nicht implementiert, nicht auf diese Weise. Ich werde direkt zum Haupt gehen. Und hier anstelle von H4, weit auf Live-, werde ich den Registerbildschirm zurückgeben, so dass wir daran arbeiten können. Okay, jetzt geh auf den Register-Bildschirm. Und jetzt unter Decks, aber dann geben Sie eine große Box. Höhe. Duan De. Dann geben Sie einen Teiler. Starr. Dann ist wieder Größe Box zu tun, dies oder dass Abstand ist da. Jetzt verwende ich den Anmelde-Button. Also werde ich nur sagen, Unterzeichnung. Ich denke, ich habe nicht , ich habe nicht unsere Abhängigkeiten installiert. Ich werde es einfach kopieren. Und jetzt warten Sie noch ein paar Sekunden. Okay, dann werde ich den Fonds in beiden Unterschriften fördern , aber fertig. Ok. Jetzt hier werde ich vernünftig in schreiben. Aber dann, dann die erste Fledermaus, die ich fertig bin, werde ich nur sagen, aber dann starten Sie Google. Dann der zweite Parameter, Ich werde Text geben und ich werde mit Google fortfahren. Und auf der Presse für jetzt weiter. Ich werde nichts tun, weil wir im nächsten Video die Funktionalität jetzt implementieren werden , es sei denn, wir werden an dem UI-Teil arbeiten. Schauen wir es uns an. Sehen Sie, hier bekommen wir den Button, fahren Sie mit Google fort. Es sieht also anständig aus. Ich werde zumindest sagen, dass es uns das Gefühl gibt, dass wir auch andere Möglichkeiten haben. Ich hoffe, Sie haben verstanden, wie Sie die Google-Anmeldung konfigurieren können. Und dieser SHA-1 Schlüssel, können Sie, wenn Sie es schwierig finden, können Sie gehen und Cuckold hat Lösungen, wenn Sie es nicht in Ihrem System bekommen. Aber das ist sehr erforderlich, wenn Sie Telefonanmeldung verwenden, Google-Anmeldung, oder jede Art von dieser Art von verschiedenen Funktionen, die selbst, Das ist es für dieses Video. Wir sehen uns in der nächsten Sitzung. 9. Google Sign und abmelden: Für jetzt ist es Stil, wenn Sie lernen, wie Sie Google-Anmeldefunktionen implementieren. Weit, dass einfach Ihren VS-Code herausbringen. Gehen Sie zum Kunstservice. Und jetzt im unteren Teil werden wir Code aufschreiben. Gib ihm einfach einen Kommentar von Google. Melden Sie sich an. Okay, jetzt lasst uns es sicher Zukunft spielen, die als Benutzer zurückkehren wird, werde ich die Anmeldung mit Google einschränken. Nun ist der erste Schritt, ein 10 Diktat Dialog auszulösen . Das heißt, die Optionen sind das Dialogfeld, um Ihr Google-Konto auszuwählen. Dafür simulieren. Kocher Signaturkonto kann null sein. Nennen Sie es Google-Benutzer, und warten Sie einfach Glucose Anmelden Benutzer. Google-Anmeldung. Unterschreiben. Okay. Also dieser Code bringt das Pop-up-Menü heraus, um Ihr Google-Konto zu wählen. Es könnte also keine übrig sein, wenn der Benutzer auf die Schaltfläche klickt, ist er kein Konto ausgewählt hat. Also müssen wir überprüfen, ob ein Benutzer nicht gleich null ist. Und überprüfen Sie, ob es nicht gleich null ist, dann erhalten wir Details von der Anfrage. Das heißt, der Code wird endgültig sein. Signaturauthentifizierung entspricht dem Benutzerpunkt, der ein 10-Ticket besucht hat. Okay. Danach erstellen wir eine neue Berechtigung. Neues erstellen. Großartig. Dann Schienbein. Shin entspricht unseren Daten DOT-Anmeldeinformationen. Und dann Zugriffstoken, werden wir Zugriffstoken schreiben. Und ich tat, obwohl Google ID-Token sein kann. Einmal angemeldet. Wir werden Daten von Feuersturm verwenden. Kam das Feuer beginnt 35 Basis. Jetzt ist es Benutzer, Anmeldeinformationen Benutzer und auf Chinesisch wird ein Gewicht zu tun. Jetzt melden wir uns über Firebase an. Früher war es nur der Code, der für diesen Google-Teil erforderlich ist. Jetzt werden wir endlich mit Anmeldeinformationen unterzeichnen, diese Anmeldeinformationen und senden Sie unsere Cadential, Das ist die Berechtigung. Dies wird von Google zurückgegeben. Wir müssen das also an unsere Firebase senden, um sicherzustellen, dass wir rechtlich Zugriff haben. Und einfach bewerten. Schließlich der Benutzer Anmeldeinformationen Punkt Benutzer. Lassen Sie uns auch machen, dass dieses Ding in einem Try Catch-Block ist. Weil man nie weiß, ob so etwas schief geht. Und einfach feuern Timing. Drucken Sie die in dieser Debug-Konsole hinzugefügte. Also die Sache ist, dieser Code, es ist nicht so, als müsste man ihn auswendig lernen. Du musst es nur wissen. Und wann immer erforderlich, erhalten Sie diesen Code. Dies ist ein sehr grundlegender Code. Wird sehr schwer zu erinnern, lernen Sie es, es kommt durch Übung. Also jetzt haben wir die Funktion bereit. Es ist an der Zeit, diese Schaltfläche die Google-Anmeldefunktion zuzuweisen. Diese Schaltfläche, die in diesem Register Bildschirm ist. Also hier in Rot ist die Gegend. Fahren Sie mit Google fort. Ja, hier. Ich werde Sachen bevorzugen. Richtig? Machen Sie es dann zu einer Sink-Funktion. Und Recht davon. Dienste melden sich bei Google an. Aber ich frage mich auch, laden einzeln zu zeigen. Also werde ich nur schreiben, wenn das Laden wahr ist, dann zeigt kühleren Fortschritt an. Ich werde diesen Button so zeigen, wie wir es vorher getan haben. Und ich werde den Staat als wahr festlegen. Und dann sagte, hat Zustand, wie das Laden gleich falsch ist. Okay, probieren wir es aus. Klicken Sie auf die Schaltfläche Weiter mit COVID. Siehst du, jetzt wird das gezeigt. Wählen Sie ein Konto aus. Ich wähle mein Konto aus. Und dann ja, Alden. Sehen Sie, gerade jetzt sind wir nicht gerade aus diesem Grund navigiert. Wir haben diese Änderung im Hauptpunktpunkt einfach wieder machen es Home-Bildschirm. Jetzt können Sie über direkt an den Home-Bildschirm gesendet sehen , weil wir bereits authentifiziert sind. Ich hoffe, Sie haben verstanden, wie Sie die Google-Anmeldung verwenden können. Dieser Code ist genau das, was erforderlich ist. Und dann musst du dieses Stück Metall mit unserer UI so einhaken. Und dieses Laden ist nur so, dass der Benutzer ein Feedback hat. Jetzt endlich müssen wir sicherstellen, dass unser Abmelde-Button funktioniert. Denn ohne sie können wir nicht sehen, können wir nicht üben oder wir können unsere Anwendung nicht testen. Und ich gehe zum Home-Bildschirm. Doch die Bhutanesen in den Aktionen, machen es einfach zu einem Waschbecken. Und richtig, was wir tun sollten, sollten wir eine separate Funktion in diesem Dienst erstellen. Hier. Wir müssen einfach Zukunft schreiben, melden Sie sich so an. Und schreiben Sie einfach auf Googles Unterzeichnung Punkt psi naught, weil es erforderlich ist, wenn wir Google-Paket verwenden, müssen wir sicherstellen, dass wir abmelden, so dass wir ein anderes Konto wählen können, wenn wir wollen. Und auch wir müssen uns von unserer Firebase-Kunst abmelden. So haben wir unsere Funktion gehen zu o bedeutet Home-Bildschirm. Hier, schreiben Sie einfach OT-Dienste, Punkte, melden Sie sich ab. Machen Sie es. Okay. Testen wir es jetzt. Wenn es funktioniert, hoffe ich es. Nun, was passieren sollte, ist, wenn wir auf diese Abmeldung klicken, sollten wir automatisch auf den Anmeldebildschirm wegen dieses Codes gebracht werden. Mal sehen. Siehe. Wir haben nicht regiert und in Navigationscode in unserer Anmeldung. Aber es ist, es ist, es hat uns bereits zu diesem Bildschirm gebracht, nur weil wir unseren Stream Builder haben und es überprüft die Art Zustand ändert sich kontinuierlich. Wenn also etwas passiert, werden wir entweder auf dem Startbildschirm zurückkehren. Nun, endlich, wenn ich wieder auf Weiter mit Google klicke, wählen Sie mein Konto. Und jetzt sehen wir, ob es auf den Home-Bildschirm geleitet wird. Sehen Sie, wir sind direkt auf den Home-Bildschirm navigiert. So ist unser Authentifizierungsteil abgeschlossen und es funktioniert nahtlos. Ich hoffe, Sie haben heute viel gelernt. Im nächsten Modul werden wir über diese Datenbank sprechen, denn jetzt ist es an der Zeit, echte Daten wieder zu integrieren. Und wir werden auch in der nächsten Sitzung eine oder eine sehr einfache Anwendung erstellen. Das war's also. Üben Sie einfach weiter. 10. Erste Schritte mit Fiore: Hallo, willkommen in dieser neuen Rubrik. Wir werden über die flatternde Firestore Datenbank sprechen. So unsere Schicht, haben wir erfolgreich Authentifizierung implementiert. Aber offensichtlich müssen wir eine Art von Datenbankspeicher haben. Das ist eine Datenbank, in der wir alle Benutzer oder die Emissionsdaten speichern. Diese Daten können nicht einfach auf dem Gerät des Benutzers gespeichert werden, da sie in diesem Fall in anderen Geräten abgeschnitten werden. Also Firebase gibt uns Optionen von zwei Datenbanken. Wenn Sie zum Firebase-Dashboard gehen, dort werden Sie sehen, dass es eine Echtzeit-Datenbank und Daten ist eine Cloud Firestore. Cloud Firestore ist die neuesten Daten mit und die wir verwenden werden. Aber wenigstens sollten Sie diesen kleinen Unterschied zwischen den beiden kennen. Ich kaufte Cloud Firestore und Echtzeit-Datenbank. Nosql-Daten mit, dass es keine Joins, keine Spalten oder Tabellen darin gibt. Der Hauptunterschied zwischen den beiden besteht darin, dass Cloud Firestore Sammlungen enthält und in diesen Sammlungen Dokumente enthält. Und auf diese Weise enthält Untersammlungen sind Schnickschnack. Aber in Echtzeit Datenbank, es besteht aus einem großen Jason, die alle diese Daten enthalten wird. Also Schulden ist nichts wie Sammlungen Dokument. Es ist nicht, es ist nicht richtig strukturiert. Es wird als ein großer Jason in Echtzeit Datenbank geworfen. Firestore ist.. firebase, neuestes Datum, das für die Entwicklung mobiler Apps war. Sie baut auf den Erfolgen der Echtzeitdatenbank mit einem neuen, intuitiveren Datenmodell auf. Cloud Firestore bietet auch reichere, schnellere Karies und Skalierungen weiter als die Realtime-Datenbank. Also in einfachen Worten, wir werden Cloud Firestore unter dem blauen wählen. Jetzt wird unser erster Schritt darin bestehen, Firestore in unserer Anwendung einzurichten. So haben wir bereits erfolgreich Firebase in unserem Android eingerichtet und die Google JSON-Datei heruntergeladen und initialisiert. Jetzt ist es an der Zeit, dass wir diese Wolke Firestore aktivieren. Rufen Sie hier Ihr Firebase-Dashboard auf. Klicken Sie auf Firestore Datenbank. Danach werden Sie so etwas wie dieses Grün sehen, das ist Cloud Firestore. Und dann erstellen Sie die Datenbank. Sie müssen einfach auf Datenbank erstellen klicken. Danach müssen Sie den Testmodus starten, da wir die Sicherheitsregeln später konfigurieren. Und danach müssen Sie nur den Standardspeicherort auswählen und auf Konkrete die Datenbank klicken. Und dann wirst du so etwas sehen. Auf diesem Bildschirm werden alle Ihre Daten gespeichert. Nachdem Cloud Firestore erfolgreich aktiviert wurde, müssen wir diese Abhängigkeit auch installieren, ist einfach gut zu haben. Suchen Sie dann nach Cloud. Firestore. Klicken Sie auf die erste und kopieren Sie einfach diese Abhängigkeit. Und in New York ansässig, kommt hier zurück. Also okay, unsere Abhängigkeit wurde richtig installiert. Jetzt ist der nächste Schritt zu verstehen, dass Cloud Firestore Datenmodell. So sind Daten innerhalb dieses Dateispeichers in der Datenbank strukturiert. Bevor wir unseren Code definieren, meine Tests. Im Gegensatz zu SQL-Datenbank, Daten, Tabellen sind Regeln in Firebase. Wenn Sie also von MySQL oder PostgreSQL kommen, regeln die anderen Tabellen das Konzept darin. Aber stattdessen verwenden Sie hier Daten in US TO Daten in Dokumenten, die in Sammlungen organisiert sind. Also hier können Sie Benutzer sehen, dies ist eine Sammlung. In einfachen Worten, versuchen Sie es einfach als Tabelle zu verstehen. Das heißt, was ist der Name der Sammlung, die Benutzer posten. In Produkten. Diese Art von Studie genannt Sammlungen und Insektensammlung, einzelne Daten werden als Dokumente bezeichnet. So hier können Sie sehen, dass es diese Benutzer und eine Dokument-ID dieser zufälligen ID. Und dieses Dokument hat diese Werte. Es ist Adresse, Alter, Immunname. Adresse ist wieder eine Karte, und dies ist eine Ganzzahl und dies ist eine Zeichenfolge. So ist dies, wie eine grundlegende Daten, wie sie im Grunde binden gespeichert in der Feuerstelle. Dokumente müssen in Sammlungen gespeichert werden. Dokumente können Untersammlungen enthalten. Sehen Sie hier ist es. Starten Sie die Sammlung, die sich darin befindet. Wieder haben Sie ist, können Sie richtig gehen? Likes unsere Post Kommentare hier wieder, Sie können eine neue Sammlung schreiben. Und all diese Dokumente können primitive fühlt sich wie Strings enthalten. Sind Objekte komplex, wie Liste, Karte. Dies kann Typvon Werten sein, in denen wir speichern können. Das war's also. Wir haben Firebase erfolgreich installiert und haben auch das Datenmodell verstanden. In der nächsten Sitzung werden wir diskutieren, wie Rohoperationen darin durchgeführt werden können. Vielen Dank. 11. CRUD-Operationen verstehen: Hallo. In dieser Sitzung werden wir verstehen, wie Crud-Operationen durchzuführen. Das heißt, wie Sie Daten in Firebase erstellen , lesen, aktualisieren und löschen. Nur für dieses Beispiel würden wir keine separaten Dienste erstellen, die klassifiziert sind, da wir nur die grundlegenden Konzepte diskutieren und sie auf einfache Weise implementieren. Also zuerst müssen wir eine neue Firestore-Instanz erstellen. So wie wir in der Authentifizierung getan haben, müssen wir Dateien Firebase ungerade Instanz erstellen. Auf die gleiche Weise. Hier, wenn wir eine Firestore Instanz erstellen müssen. Also lasst es uns tun. Bringen Sie Ihren Texteditor heraus. Wechseln Sie zum Startbildschirm. Hier. An der Spitze. Ich werde einfach eine Instanz Firebase erstellen, Firestore. Firestore ist gleich fünf Möglichkeiten. Firestone-Punkt-Instanz wie diese. Unsere Instanz ist erledigt. Als nächstes wird eine Connexon-Referenz bezeichnet. Sammlungsreferenz bedeutet, was dieser Sammlungsname sein sollte, der hier ist, Benutzer oder was auch immer Sie wollen. So Sammlungsreferenz ist auch sehr wichtig. Um mit der Create-Funktion beginnen zu lassen, dass diese Daten in dieser Datenbank erstellen. Um eine neue Dokumentensammlung hinzuzufügen, verwenden wir die Add-Methode, Annette Sammlung Referenz. Lass es uns tun. Lass es uns versuchen. Nach der AB-Balke. Es ist ein Körper, dieser Körper. Nehmen wir einen Behälter. Container, die Medienabfrage, Punkt aus Kontexten, Punktgröße, Punktbreite bedeuten . Dann lass uns ein Kind haben, gib ihm die Spalte. Mittelwert X ist Ausrichtung. Ich meine, existiert Ausrichtung Punkt Mitte, dann Kreuz-Achsen-Ausrichtung, Gras extrazelluläre Mitte. Dann lass uns Kinder haben. Dass Kinder, lassen Sie uns eine begrenzte erstellen aber lassen Sie es ein Kind von Text und Daten zu speichern. Und in der Armpresse, lassen Sie uns das Timing feuern. Halten Sie es leer, damit ich Sie in der Benutzeroberfläche, der Benutzeroberfläche, anzeigen kann. Sehen Sie hier, wir haben, dass Daten zu Firestore hinzufügen. Der erste Schritt bestand darin, eine Instanz zu erstellen, die wir bereits getan haben. Hier. Der zweite Schritt bestand darin, eine Sammlungsreferenz zu erstellen. Also hier, lassen Sie uns eine Sammlungsreferenz erstellen. Benutzer ist gleich Firestore, das ist unsere Instanz, Punktsammlung und nennen Sie es Benutzer. Nun ist dies nur eine weitere Referenz, wo wir die Daten einfügen möchten. Also zum Einfügen, aber sie haben bestimmte Daten. Hier verwenden wir die hinzufügen meine 10. So Add-Methode erstellt Daten mit einer eindeutigen ID, um Anzeige durchzuführen, ob es eine Zukunft ist. So werden wir async await Konzept verwenden. Und wir schreiben einfach warten Benutzer Punkt C hier hinzufügen. Nun, so fügen wir Daten zu Duff Firestore hinzu. Jetzt akzeptiert Add Daten in einer Karte, die tiefgehende geschweifte Klammern enthält. Dann müssen wir Daten in Schlüssel-Wert-Paar senden 7, dieser Name, Ich werde den Schlüssel als Name und Wert als verwenden. So wie das. Dies wird unser erster Benutzer sein. Probieren wir es aus. Wenn ich auf diese Daten hinzufügen klicke, die firestorm. Ich denke, es könnte etwas zeigen, nur aus dem Grund, dass wir unsere Anwendung nicht neu gestartet haben. Wenn Sie also eine neue Abhängigkeit installieren, stellen Sie sicher, dass Sie die Anwendung neu starten. Lassen Sie uns neu starten bedeutet, dass Sie aufhören müssen und dann erneut mit dem Debuggen beginnen. Mal sehen, wird es jetzt funktionieren? Sie verleihen uns warten. Damit sie aufführen können. In Firestore sind sehr einfach. Sehen Sie hier ist es nur mit dem Add. Wir können Daten mit einer eindeutigen Dokument-ID hinzufügen. Und wenn ich den Dokumentenausweis sage, zeige ich Ihnen, was ich damit gemeint habe. Wir müssen noch ein paar Sekunden warten. meiste davon hängt von Ihrem System ab. Jetzt ist es kompiliert, Abhängigkeit, diese Art von Abhängigkeiten. Aber wir verwenden es nicht bei der Authentifizierung, es ist erledigt. Und in den Regeln hier, wie wir es im Testmodus getan haben, sind deshalb die Regeln öffentlich. Aber wenn wir für die Produktion verwenden, sollte das nicht so sein. Okay, wir haben unsere App läuft. Nun, wenn ich auf, dass auf Firebase klicken und dann zu unseren Daten gehen, Ich hoffe, es ist, um Benutzer zu sehen. Dann dokumentieren und dann den Wert, der Nahal genannt wird. So haben wir unsere ersten Daten erfolgreich eingegeben. Und das habe ich erklärt, dass es eine eindeutige Dokument-ID ist , wenn wir die Add-Funktion hier so verwenden. Also denkst du vielleicht, okay, was ist dann die zweite Zusatzfunktion? Abgesehen von AD gibt es eine andere Methode namens dot set. Wenn Sie also Ihre eigene Dokument-ID angeben möchten, sollten wir die set-Methode für diese Sammlungsreferenz verwenden. So wie das. Ich werde das obige loben. Und dann werde ich einfach Benutzer schreiben, das ist wach, Benutzer dot doc, dann geben Sie ihm die Dokument-ID. Ich werde es flattern von 1, 2, 3 nennen. Dann setzen Sie sich so. Dann wieder, innerhalb Set müssen wir eine Karte senden. Ich werde den Wert-Namen geben. Und so ist der Schlüssel Name als Wert wie Google. Ok? Speichern Sie es jetzt und checken Sie es aus. Also erkläre ich noch einmal, wenn wir Add-Methode verwenden, fügt es eine neue automatisch generierte ID hinzu, dh Dokument-ID. Aber wenn wir setzen meinen Stift verwenden, können wir unsere eigene Dokument-ID angeben. Klicken wir nun auf das Hinzufügen von Daten zum Dateispeicher. Gehen Sie zu unseren Daten und sehen wir haben diese Flutter 1, 2, 3. Also das, über das ich gesprochen habe, das ist keine eindeutige ID. Wir haben es selbst spezifiziert. Und dann senden wir einen Wert, der Name Google Flattern ist. So haben wir die Daten erfolgreich erstellt. Jetzt ist es an der Zeit, Daten aus Firestone Cloud-Dateien zu lesen, um Ihnen die Möglichkeit zu geben, den Wert einer Sammlung aus einem Dokument zu lesen. Und das kann hundert sein, hundert zehn Grad werden durch Echtzeit-Updates in einfachen Worten zur Verfügung gestellt. Und wir können eine Sache lesen, die ist, wir gehen in die Datenbank, wir fragten nach w, und dann kehren wir zurück. Wenn sich etwas in der Datenbank ändert, kümmert sich unsere Benutzeroberfläche nicht darum, weil sie einmal vorangegangen ist. Lass es uns tun. Lassen Sie uns auch unsere Lesefunktionen erstellen. Also unterhalb dieser erhöht, aber dann werde ich eine neue Schaltfläche erstellen, neue erhöhte Schaltfläche. Nennen Sie es in lesen Daten von Firestore. Dann wird es in der On-Premise eine Sinc-Funktion sein. Jetzt wieder werden wir eine Sammlung von Freunden haben. Benutzer ist gleich Firestore Sammlung. Und denken Sie daran, dass Sie all dies auch in einer Codezeile tun können. Sie müssen die Sammlungsreferenz nicht so angeben. Und es nur zu tun, um das Konzept zu erklären. Dann, jetzt haben wir, erstellen wir eine Variable. Es ist Ergebnisse und dann warten Benutzer. Holen Sie sich. So wird es eine Sammlung lesen, dass es die Daten der Inkasso erhalten wird, alle Daten, die unabhängig von Wert sie haben. Da sie also mehrere Werte haben, werden wir unsere Ergebnisse dot-docs, dot für jeden schreiben. Dieser Bereich für jedes Dokument. So wird es Dokument-Snapshot-Ergebnis haben. Und dann werden Sie einfach Ergebnispunktdaten wie diese drucken. Schauen wir uns an, was ich getan habe. Dann erkläre ich es dir noch einmal. Wir haben unsere Benutzeroberfläche, die diese Daten aus Dateien lesen. Also, wenn ich darauf klicke, sehen Sie beide, dass Daten, die in diesem Kartentelefon ist, haben Sie vielleicht Ausgabe zurückgegeben? Wenn wir also eine Anfrage für eine Sammlung bekommen, die hier ist, diese Sammlung, wird es uns alle Dokumente geben. Deshalb hatte es unsere Ergebnisse Dot Docs, weil es flüssig ist und Sie sehen können , aber Sie werden verstehen, dass alle Dokumente und dann für jedes V durch die Dokumente schleifen. Da bekommen wir eine Liste aller Dokumente. Es ist so einfach wie das. Nun denken Sie vielleicht, okay, was ist, wenn ich nicht die gesamte Sammlung lesen möchte, aber ich möchte ein bestimmtes Dokument lesen. Das heißt, ich möchte nur diesen Flutter Disvalue lesen, wie man diesen besonderen Wert erhält. Also dafür, nochmal, Lasst es uns ausprobieren. Ich werde die obige Abfrage kommentieren. Und ich werde Dokumente Snapshot, verschiedene Dokumente Snapshot schreiben. Die Momentaufnahme. So Dokumente Snapshot Ergebnis ist gleich warten Benutzer dot doc und welches Dokument wir wollen, wissen wir bereits die ID. Also drittens, 123. Und dann bekommen Knospe so. Und danach werde ich einfach Ergebnisdaten drucken. Lassen Sie uns überprüfen, ob es funktioniert oder nicht. Wenn ich nun auf Daten lesen klicke, wird es uns nur zeigen, dass bestimmten Tag dann nicht alle Dokumente in dieser Sammlung. So holen Sie ein bestimmtes Dokument ab. Wir haben Benutzer-Dokument-ID, Entschuldigung, wir haben Dokument-ID. Also habe ich gesagt, dass Firestore uns zwei Möglichkeiten gibt, Daten zu lesen. Ich habe gelernt, dass es einmal ist, werden wir nur Daten lesen und Echtzeit-Änderungen hören. Von Firestore gibt uns eine Option, um alle Datenänderungen zu hören , die mit den Daten geschieht und dann unsere Aktualisierung unserer Anwendung in Echtzeit reflektieren, das heißt, ohne unsere Seite zu aktualisieren. Dies kann mit diesem Konzept namens Streams erfolgen. Also acht bieten Unterstützung für den Umgang mit Echtzeit-Änderungen entweder an der Sammlung als auch dem jeweiligen Dokument. Sie erinnern sich also nur daran, dass Sie sich von hier aus erinnern, diese Sammlungsreferenz an Bord nehmen und Ihre Freunde dokumentieren, eine Snapshot-Funktion bereitstellen, die eine Zeichenfolge zurückgibt. Sie können StringBuilder Ali verwenden, meine Technik hören, um diesen Stream zu abonnieren und die Änderungen zu hören. Also machen wir es mit dieser Zeit wieder hier. Also, jetzt, was ich einen Login-Kommentar haben werde, dass sowohl tin und dann werde ich einfach Benutzer dot-dot-dot schreiben. Ich höre ein bestimmtes Dokument und wenn es eine Flut dritte, 123 Schnappschüsse. So bekommen wir einen Strom. Und früher, wenn wir Dot Get schreiben, wird es uns eine Zukunft geben. Das ist eine Sache. Und dann werde ich mich verbinden, Hören, das ist was auch immer Änderungen, die der Stream durchmacht, wir werden auf diese Änderungen hören und einfach drucken Ergebnis dot-dot dot schreiben. Jetzt werden Sie verstehen, dass der Unterschied einmalig ist und was in Echtzeit ändert. Jetzt, wenn ich wieder auf, lesen Sie Daten von Firestore, sehen, Sie können den Namen Google flattern sehen. Aber was, wenn ich gehe und den Wert ändere, der im Gegensatz zu Google ist? Und aktualisieren Sie es. Wenn ich nun meine Debug-Konsole sehe, sehen Sie, dass Sie diese Ausgabe auf legal haben. Das heißt, ich habe meinen VS-Code nicht einmal berührt, aber er zeigt alle Echtzeitänderungen an. Und jetzt, wenn ich wieder reingehe, richtig, Google flattern und aktualisieren, dann wird es wieder den neuen Wert zeigen. Dies ist also der sehr grundlegende Unterschied zwischen der Zeichenfolge, wenn Sie überprüfen. So bis jetzt denken Sie vielleicht diese Begriffe, dass dieser Abfrage-Snapshot Dokument Snapshot Wasser diese Dinge. Beim Ausführen von Qualitätsdateispeicher gibt entweder ein Abfrage-Snapshot sind die Dokument-Snapshots. Also, was ist ein Abfrage-Snapshot? Der Snapshot wird von einer Sammlung Abfrage zurückgegeben und ermöglicht es uns, die Sammlung zu überprüfen, wie viele Dokumente existieren, geben durch die Dokumente innerhalb der Sammlung existieren. Alle Änderungen seit der letzten Abfrage und dem Minimum anzeigen. Um auf die Dokumente innerhalb eines Abfrage-Snapshot aufzurufen, dass Hunde Eigenschaft, die eine Liste mit Dokumenten Snapshot zurückgibt. Also müssen Sie sich nur an all diese Konzepte erinnern. Was ist dann ein Dokument-Snapshot? Ein Dokument-Snapshot wird von einer Abfrage zurückgegeben werden, indem Sie direkt auf das Dokument zugreifen. Selbst wenn kein Dokument in der Datenbank vorhanden ist, variiert ein Snapshot immer. Aktivieren Sie diese Option, um festzustellen, ob das Snapshot-Dokument vorhanden ist, Sie die vorhandene Eigenschaft verwenden. Wenn dieses Dokument existiert, das ist ein Layer in unserem Fall, können wir die Daten lesen, indem wir die Datenmethode aufrufen, die eine Karte zurückgibt. Das ist also das Konzept, das wir schreiben, manchmal dokumentieren über das Schreiben, manchmal Abfrage-Snapshot. Sie müssen also diese grundlegenden Konzepte auswendig verstehen. Auch, wenn wir Daten lesen. Firestore, unsere ersten erweiterten Fähigkeiten zum Abfragen von Sammlungen ziemlich Ringe. Schlechte Arbeit mit beiden gelesenen Dingen abonnieren Änderungen per Stream. Also zuerst, was bei dieser Filterung wichtig ist, um Dokumente innerhalb einer Sammlung zu filtern, in der meine Technologie wir ändern können, wechseln einer Sammlungsreferenz. Filterung unterstützt Gleichheitsprüfungen und andere nützliche Abfragen. Filtern Sie beispielsweise Benutzer, deren Alter größer als 20 ist. Also hier können Sie Feuer mit Feuer sehen, speichern Sie Punktinstanz Punktsammlung, Punkt, wo Alter größer ist als Typ D, zwei in D und dann Punkt bekommen diese, es wird nur überprüfen und bleifrei diese Daten. Und zweitens ist eins ein weiteres Beispiel, in dem Sie überprüfen können , ob ein Array einen solchen Wert enthält. Die zweite für die anderen Fähigkeiten sind begrenzt. Das bedeutet, die Anzahl der Dokumente zu begrenzen, die von der Abfrage zurückgegeben werden. Wir können die Limit-Methode auf einer Sammlungsreferenz verwenden. Also einfach müssen wir Firestore Firebase schreiben, Firebase-Dateien gespeichert Punktinstanz Punkt-Sammlung, Benutzer Punkt-Grenze zu dot-dot-dot wird mit Dokumenten unverknüpft zurückgegeben werden. Und das gebundene man ordnet diese beiden Dokumente für den Bias spezifischen Wert um die Reihenfolge BY zu verwenden, ist es entweder absteigend, aufsteigend Reihenfolge sein kann. So hier können Sie Firebase Dateispeicher Punktinstanz, Punktsammlung Benutzer sehen. Aber gibt es nach Alter, sollte absteigende Reihenfolge sein. Das sind die Wege, wie wir sind. Wir können Daten lesen und durch sie gefiltert. So haben wir bisher erfolgreich Daten über erfolgreich gelesene Daten hinzugefügt. Es ist Zeit, dass wir Daten aktualisieren. Also lasst uns gehen und eine neue Schaltfläche erstellen. Und dann Text. Aktualisieren Sie Daten. In Firestone. Dann sollte es in den Achselhöhlen eine Spüle sein. Wir haben unsere Sammlung, sie sind Freunde, aber dieses Mal werde ich einfach direkt schreiben warten Firestore dot Sammlung Benutzer dot doc. Das ist erreichtes Dokument, das ich zu aktualisieren ging, flattern 1, 2, 3, dann Punkt-Update. Also ging ich, es war Anzeige gesetzt, aber dieses Mal ist es Update. Und update akzeptiert wieder Schlüsselwert. Also möchte ich den Namen ändern und ihn ändern, um ihre Firebase zu biegen. Und da drin will ich nicht, dass es zuhört. Ich möchte nur den Wert dieses Dokuments erhalten. Lass es uns speichern und überprüfen. Wenn ich auf Daten lesen klicke. Sehen Sie haben Google hier genannt, aber wenn ich auf Update-Daten klicken, sollte es jetzt sein. Jetzt wieder, wenn ich auf konkrete Daten klicke, sehen Sie jetzt seinen Namen Flutter-Datei mit. Daher wurde unser Wert in dieser Datenbank erfolgreich aktualisiert. Aber so können wir das Dokument aktualisieren, anstatt alle diese Daten nur mit dieser Update-Funktion zu ersetzen. So erstellen Sie crud Operationen, haben wir bereits erstellt, raid und aktualisieren. Die letzte Sache ist, das Dokument aus einer Cloud zu löschen. Firestore. Wieder, erstellen Sie eine neue, aber dann nach dieser Schaltfläche in diesem Kind, lassen Sie es uns Text und Daten schreiben. Firestore. Dann haben wir in der On-Premise eine asynchrone Funktion. Und hier wieder, wir müssen einfach auf Firestore Punkt Sammlung Benutzer warten. Dann Doc, das ist, welches Dokument wir mit dem Reflektor löschen 1, 2, 3, und dann schreiben Sie einfach del dot, del dot update. Es ist nicht nur starten löschen. Und das ist alles, was Code auch zum Löschen erforderlich ist. Lassen Sie uns unsere Anwendung überprüfen. Wenn ich auf Daten lesen klicken, die Name flacher Firebase zeigen wird. Wenn ich nun auf Daten löschen klicke, sollte es jetzt gelöscht werden. Jetzt, wenn ich auf Daten lesen klicke, sagen Sie, es ist null, ich muss Daten hinzufügen. Wenn ich möchte, und klicken Sie dann auf Big Data. Es wird damit einhergehen. So funktionieren Cred-Operationen in Firestore. Und jetzt sind wir bereit, mit Firestore richtig zu arbeiten. Dies baue ich diese Benutzeroberfläche auf Lifo, auf Blatt oder zeige, wie man die Operation durchführt. Im nächsten Video werden wir eine echte Anwendung erstellen und unsere Firestore Datenbank darin verwenden. Danke. 12. Erstelle eine App UI: So, jetzt werden wir in Node Anwendung zu demonstrieren und verwenden Zeug Firestore Datenbank. In diesem vorherigen Modul der Authentifizierung haben wir bereits Login-Register und den Home-Bildschirm erstellt. Es ist an seine 10 gebunden. Um fortzufahren, von wo aus wir gegangen sind, werden wir eine Notiz-App erstellen, um ihre aktuellen Operationen tiefer zu verstehen. Und zu Beginn werden wir alles aus dem Körperabschnitt des Startbildschirms entfernen. Also gehe ich, wir haben diesen Behälter geflossen und auf jetzt einfach alles entfernen. Und nach Dad Emily habe ich auch die Leiche entfernt. Und Sie können hier sehen und dann zu unserem Hauptpunktpunkt gehen. Das erste, was wir tun werden, ist , dass wir diesen Debug-Indikator bald entfernen sie materiell Labor, es wird einfach gehen und schreiben Debug, sollte Banner überprüfen und einen Standardwert geben. Dann, dass Teamdaten, Ich werde einfach schreiben Helligkeit gleich Helligkeit dot.org. Nun, wenn Sie unsere App sehen, sehen wir haben diese dunkle Kim und ich mag es wirklich. Auf dem Startbildschirm. Nach der AB-Leiste werden wir eine schwebende Aktionsschaltfläche erstellen. Und lassen Sie uns Floating Action Button hinzufügen. Hintergrundfarbe der Farben, Punkt orange. Ausgezeichnet. Kind. Kind wird ein Symbolname sein, den ich hinzufügen kann. Und wir haben die OnPause-Funktion. Lassen Sie uns speichern und überprüfen. Sieh dir das an. Aber dann haben wir verwenden, um zu navigieren, um einen Notizbildschirm hinzuzufügen. Definitiv vor dem Hinzufügen von Knoten, v muss eine Farm haben, mit deren Hilfe wir Daten über Twisted zu diesen Daten hinzufügen können. Erstellen Sie also einfach eine neue Datei innerhalb von Bildschirmen und benennen Sie sie, fügen Sie Knoten, Punkt, Punkt hinzu. Erstellen Sie dann eine statusbehaftete Region. Ich benenne es fügen Sie nichts Bildschirm hinzu. Und darüber. Wichtiges Materialpaket Dann Rückkehr ist Gerüst. Darin. Nehmen wir eine AB-Balke. Bauchstange. Lassen Sie uns geben, dass Graham Farbe der Farben transparent und Höhe als 0. Dann in den Körper. Ich werde eine einzelne Kind-Bildlaufansicht haben , so dass wir keine Scrollprobleme haben. Dann wird im Kind eine Polsterregion mit Kanteneinsätzen Punkt haben. Und dann in diesem Kind, werde ich dieses Widget haben. Dann gib es einfach überflüssige Ausrichtung, die diese Klasse existiert und admin dot start. Und dann werden wir unsere Kinder haben. Also zuerst, was wir tun können, ist auf unseren Home-Bildschirm zu gehen. In der Floating-Action-Schaltfläche können wir den Navigator-Punkt aus Kontext navigieren, die ausdrücken Builder und Bildschirm ausdrücken. Okay, lassen Sie uns unseren Add Node Bildschirm hier überprüfen. Siehst du, wir haben das sauber. Lassen Sie uns nun von Linda Spalte Widgets beginnen, die in der Spalte ist. Ich werde mit dem Text und Titel beginnen. Geben Sie ihm etwas Styling von Textil. Schriftgröße. Und Schriftgewicht kann Schriftgewicht, fett sein. Speichern Sie es. Sehen wir, wir haben diesen Titel. Nach dem Toten. Lassen Sie uns beeilen, Größe Box. Dann geben Sie ihm ein Textfeld. Text, Dekoration, Dekoration Geben Rand, umreißt Eingaberahmen. Okay, lass uns retten und sehen. Sehen Sie, wir haben unser Textfeld. Nun nach dem Textfeld, Geben wir ihm eine Größe Feld Höhe von 13. Dann nochmal, lassen Sie es uns schreiben. Dasselbe wie ein Titel. Und sagen wir, ich habe in einem Tag Lieferung wie Beschreibung kopiert. Und dritte Beschreibung hier können Sie sehen, wieder, ich werde ein Textfeld haben. Jetzt werden diese Texte mindestens fünf Zeilen und maximale Länge von 10 haben. In dieser Erklärung. Wie üblich, Rahmen, Umriss, Eingaberahmen. Lassen Sie uns überprüfen, sehen Sie, dass diese maxlength gleich 30 max Linie ist, die es sein sollte. Ok. Jetzt überprüfe es noch einmal. Siehe, wir haben unsere Beschreibung im Textfeld ist nicht so eng. X3, lasst uns unsere Größe Box haben. Größe Box von High-Tech-D. Dann ein Behälter erreichen, um ihm Knopf zu geben. Geben wir ihm eine Höhe von 50. Dann warten Sie, Medienabfrage, diesen Kontext. Dann lassen Sie uns in diesem Kind einen erhöhten Knopf haben. Und dann werden wir diesen Text mögen. Anzeige. Hinweis: Ich werde mit diesem Add-Modus nur etwas ändern. Zuallererst werde ich dem Text Styling geben. Dieser Textstil. Das erste, was Spaß Größe von 25 und Schriftgewicht sein wird. Mutig. Dann werde ich dem erhöhten Styling geben, dann ist das eine Flüssigkeit. Aber dann Punkt-Stil von und dann einfach späten Primärfarben, orange. Siehst du, es sieht jetzt anständig aus. Erstellen, Hinzufügen von Notizen Bildschirm. Ich werde auch einen neuen Bildschirm namens Note erstellen. Das Edit-Notizbuch, das wir eine Datei erstellen müssen. Danach wird es ähnlich sein, Notizen hinzuzufügen. Ich kopiere einfach alles in den Add Node und füge es dann in die Editiernotiz ein. Zuallererst werde ich den Namen ändern. Ich werde Bearbeitungsbildschirm schreiben. Dann haben wir unsere Hintergrundfarbe als transparente Linderung. Dann werde ich es einfach in Aktionen in der App-Taste geben, Schaltfläche Löschen. Das heißt, es sollte Symbolschaltfläche sein. Und in den Symbolen werde ich einfach schreiben. Ich kann, ich kann anfangen zu löschen. Die Warnung ist gleich dem Warnungspunkt. Jetzt haben wir einzelne Kind Scroll-Ansicht. Polsterung Auf nur Unterschied wird im Container sein. Das heißt, es wird Knoten aktualisieren, Knoten hinzufügen. Und abgesehen davon wird alles gleich sein. Also haben wir unseren Add-Knoten, wir haben auch unsere Editiernotiz. Es ist Zeit. Wir wünschen uns. Katie Bildschirm, Florida Home-Bildschirm, die hier ist. Aldennotizen werden aus der Datenbank abgerufen. Also müssen wir etwas dafür bauen. Gehen wir zum Startbildschirm. Nach der Barr-Leiche. Lassen Sie uns zuerst eine Listenansicht erstellen. Dann Kinder. Dann fange mit der Karte an. Beginnen wir zuerst mit dem Karten-Widget. Ich werde die Farben der Karte starten. Dann Linderung. Ich werde es fünf geben. Dann Marge. Ich werde es hinzufügen 10 geben. Dann werde ich eine Liste kaufen. Ok? Jetzt werde ich ihm Inhalt geben, indem ich Randeinsätze symmetrisch hinzufüge. Wie es ist nicht weniger als das, was S. Dann. Geben wir ihm einfach eine Dummy-Daten. Erstellen Sie eine neue App. Lassen Sie uns etwas Färbung das Gewicht geben. Schriftgröße 18. Schriftstärke, Schriftgewicht, fett. Dann lassen Sie uns einen Untertitel haben, wenn dies Lasst uns den Text lesen. Lernen Sie, von Ihnen zu klonen Clubhaus-Anwendung zu lernen. Lassen Sie mich annehmen. Dann. Dann müssen Sie ihm nur den Überlauf geben, nicht den eingefügten Text. Ja, eingefügter Text. Wir müssen Überlaufeigenschaft schreiben und nur Überlauf schreiben. Unsere Grippe Punkt Punkt Ellipse und geben Max Linie sagt zwei Linsen zu. Lassen Sie uns überprüfen, speichern Sie es. Und sehen Sie, dass wir die Benutzeroberfläche bereit haben. Das ist eine einfache Notiz. Es ist ein Dummy up, aber jetzt, aber in der nächsten Sitzung werden wir wirklich abholen stirbt, wenn jetzt was ich will, Wenn jemand BAPS auf dieser Liste Stil, er sollte auf den Bearbeitungsbildschirm navigiert werden navigiert. Also werde ich nur Punkt-Push-Material, Seitenlayout-Builder lesen . Notieren wir den Bildschirm. Okay, speichern Sie es. Jetzt, wenn ich darauf klicke, siehe, ich habe diesen Bearbeitungsmodus-Bildschirm auch. Also mit dieser Benutzeroberfläche ist abgeschlossen. Wir haben unseren Add-Knoten, wir haben unsere neue TUI, und wenn wir darauf klicken, können wir lesen Update sowie Löschen von dieser UIS unlink. Dann nächste Sitzung werden wir die Funktionalitäten für das Feuer zu schaffen, dass wir diese separate Services-Datei erstellen und dann diese Datei mit unserer Benutzeroberfläche anhängen. 13. Note und Modell erstellen: Hallo. So haben wir bis jetzt erfolgreich aus unserer Knotenanwendung aufgebaut. In dieser Sitzung werden wir die Funktionalität erstellen, um diese Daten zu Firebase hinzuzufügen. Firebase, Lassen Sie uns eine neue Datei im Dienstordner erstellen und benennen Sie es. Feuerladen, Service dunkel. So ähnlich, wie ein OT-Dienste, werden wir eine Klasse namens Fires Store Service erstellen. Und jetzt ist das erste, was wir tun müssen, eine Instanz von Firebase Dateispeicher zu erstellen , ist die Firebase Firestore Punkt-Instanz. Ok? Also diese Sache wissen wir bereits, dass wir eine Instanz erstellen müssen. Danach. Lassen Sie uns unsere Funktion erstellen, zukünftige Funktion Knoten einfügen. Ok? Überlegen Sie nun, welche Daten beim Einfügen eines Knotens erforderlich sind. Das ist das erste, was erforderlich ist, ist dieser Titel. Die zweite Sache wird Beschreibung sein. Und die dritte Sache wird die Benutzer-ID sein. So dass, wenn wir die Daten in der Datenbank speichern, zumindest wissen wir, welcher Knoten zu welchem Benutzer gehört. Und dann werden wir nur in der Lage sein, einige bestimmte Knoten zu holen, die nur von Deck Benutzer sind. Wir möchten nicht, dass der Benutzer auf die Daten anderer Personen zugreift. Also tun Sie das zuerst, versuchen Sie catch-Block. Jetzt haben wir hier einen Firestore Punkt Sammlung Knoten. Jetzt, und ich werde die Add-Funktion verwenden. Geben wir dem JSON. Der Titel der Daten wird betitelt. Dies wird ein Beschreibungsdatum sein. Ich sollte auch erwähnen, dass Datum im Krieg, wenn es brachte eingefügt. Also werde ich jetzt nur datetime dot schreiben. Und letzte Sache wird Benutzer-ID sein. Das ist Benutzer-ID 0, k. Unsere Funktion ist also erledigt. Dann ist der nächste Schritt, um sicherzustellen, dass wir unser Benutzermodell übergeben, während Sie zum Home-Bildschirm navigieren. Denn wenn wir gehen, um hinzuzufügen, wenn wir zum Bildschirm Knoten hinzufügen gehen, ist die Benutzer-ID erforderlich. Gehen wir also zum Startbildschirm. Hier. Ich werde sicherstellen, dass das Benutzermodell im Konstruktor akzeptiert wird. Ok? Es ist erledigt. Jetzt im Register Bildschirm. Es zeigt, weil wir hier in dieser Zeile zum Home-Bildschirm navigieren. Also müssen wir definitiv das Benutzermodell übergeben, das ist dieses. Wir müssen einfach gehen und es so passieren. In ähnlicher Weise müssen wir im Anmeldebildschirm dasselbe tun. Wir müssen dieses Ergebnis kopieren und einfügen, das ein Benutzer-Datentyp ist, und dann senden Sie es einfach. Jetzt, wenn wir zu unserem Main.Jack gehen. Hier zeigt es auch Edit. Denn hier sind wir zurück Home-Bildschirm. Also müssen wir nur, da der Stream-Builder uns Daten eines bestimmten Benutzers gibt , das ist Benutzer, sie gebunden dies gesendet werden, sehen, ja, Sie können Benutzer streamen. Also hier müssen Sie nur Snapshot-Punktdaten schreiben, das heißt. Also, jetzt ist unsere Arbeit bis hier erledigt. Als nächstes ist es, diese Insert-Knoten-Funktion aufzurufen, die Services-Datei ist. Wir müssen es von nun an anrufen, Notizen hinzufügen Bildschirm. Also zuerst, was wir tun müssen, ist die Annahme von Benutzerdaten. In dieser Anzeige Hinweis, der männliche Hauptzweck der Weitergabe der Benutzer die Wanne uns für diesen Bildschirm. So dass, wenn wir einen Knoten hinzufügen, können wir auch diese Benutzer-ID senden. Wieder auf dem Home-Bildschirm zeigt Bearbeiten, weil hier in der Wildnis beim Aufheben, müssen wir den Benutzer senden. Ok? So wie das. Jetzt wieder, gehen Sie zu Notizen hinzufügen Bildschirm. Jetzt, da wir jetzt das Textfeld hier verwenden, müssen wir einen Textbearbeitungscontroller erstellen , damit wir den Wert abrufen können, was geschrieben wird. Also werde ich nur Vorname ist Name es Titel. Controller ist gleich dem Textbearbeitungs-Controller. Zweiter Controller wird Description Controller sein. Und wir schreiben einfach einen Schreibtisch. Es ist ein Text Bearbeitung sie, um uns zu warnen, wenn. Und wie üblich, müssen wir ein boolesches Ladesymbol anzeigen, so dass immer, wenn einige, einige Netzwerkanfragen gesendet werden, zirkulär ist, Fortschrittsanzeige angezeigt werden sollte. Und lassen Sie uns diesen Controller kopieren und ihn hier zuweisen, das ist unser Titel und das ist das Textfeld des Titels. Ich werde nur Controller und den Controller eingeben. Dann ist dies unsere Beschreibung darunter. Dies ist unser Textfeld für die Beschreibung, die ich werde, ich werde ihm einfach einen Beschreibungscontroller zuweisen. Ok? Zehn, jetzt geht es Code. Nun, was ich will, ist, wenn der Benutzer tippt und auf diese Schaltfläche Knoten hinzufügen klicken, dann sollte die Funktion aufgerufen werden. Gehen wir also zum erhöhten Knopf machen es zu einer Spüle. Dann hier, das erste, was ich tun werde, ist einen Scheck zu machen. Das ist Titel-Controller dot txt. Wenn es nicht null ist, unsere Beschreibung controller.js, wenn es auch nicht null ist, das heißt, wenn es null ist, dann was wir tun sollten, oder einfach, wenn es null ist, sollten wir einen Gerüstboten zeigen, der eine Snackbar ist. Ok? Und in diesem Inhalt werde ich einfach schreiben. Füllungen sind erforderlich. Erforderlich. Ok. Wenn es falsch ist, das ist dann sonst hat. Zuallererst werde ich den Set-Status machen und sie Ladeindikator auf true setzen. Und da ich eine Ladeanzeige wahr mache, sollte ich die Ladeanzeige in Ewigkeit betrieben anzeigen. Wenn das Laden wahr ist, dann haben wir einen kreisförmigen Fortschrittsindikator eines zentralen Kindes. Wenn nicht, werden wir einen Container zeigen, der die Schaltfläche ist. Nun, so haben wir den Set-Status 2 gemacht, dann müssen wir auf Firestore Dienste warten. Erstellen Sie das Objekt. Dann fahren Sie einfach Punkt einfügen Knoten neun, den Titel werde ich den Leerlauf Controller Punkttext schreiben und die Beschreibung werde ich Beschreibung Controller dot txt schreiben. Jetzt, für die Benutzer-ID, muss ich Widget schreiben. Da es sich um einen Zustand, Stateful Widget ist, müssen wir Widget-Punkt-Benutzer schreiben, um auf diese Instanzvariable und Dendrite Punkt Benutzer-ID zuzugreifen , die UID ist, wie folgt. Und wenn dies getan ist, werden wir wieder Zustand setzen und die Anspielung auf falsch machen. Und danach werde ich einfach aus navigieren, das ist Navigator Dot Pop dieses Bildschirms. Nachdem es fertig ist. Also lasst es uns retten. Und jetzt versuchen Sie, ob es funktioniert oder nicht. Wir haben auch unsere Firebase-Datei gespeichert Konsole. Klicken Sie nun auf Knoten hinzufügen. Doch ich werde schreiben, dass hier eine Beschreibung von Master of Gloss Lead Farm Anwendung. Sie werden kaufen. Gemeint. Das heißt, ich würde einfach auf Knoten hinzufügen klicken C. Laden ist da. Okay, ist rausgekommen. Sehen wir uns unsere Firestore Datenbank an. Wenn einige Daten eingefügt werden oder nicht. Angenommen, Sie können diese Knoten und dann etwa 10 Beschreibung Benutzer-ID und dieses Datum sehen. So bis hier haben wir erfolgreich das Einfügen von Daten erstellt und implementiert. Also natürlich, in der nächsten Sitzung, werden wir diese Daten, all diese Daten von Firebase abrufen . Aber davor, da diese Daten in diesem JSON-Format vorliegen, möchten wir sie in Objekte konvertieren. Das heißt, dafür müssen wir unsere Modelle erstellen, Modelle für die Notiz auch, ich werde es einfach schreiben, einen neuen Dateiknoten Punkt innerhalb von Modellen erstellen. Dann werde ich hier ein Klassenknotenmodell erstellen. Und hier schreiben Sie einfach diese Daten, die erforderlich sind. Es ist String-ID, String-Titel, String-Beschreibung, Zeitstempel aus der Cloud Firestore. Dann Zeichenfolgen-Benutzer-ID. Dann werde ich den Konstruktor erstellen und einfach schauen, Rechts, benötigt diese Punkt-ID. Und es erforderte diese.title diese Beschreibung. Und es erwarb diese punktierte erforderliche this.UserID ID. Und das letzte, was wir haben, um eine Factory-Methode zu erstellen, so dass es den Dokument-Snapshot aus dem Feuerladen nehmen und in dieses Modell konvertiert. Lesen Sie einfach die Fabrik von JSON. Es akzeptiert einen Dokument-Snapshot, Snapshot und dann das Rückgabemodell. Jetzt müssen wir diese Daten schreiben. Das ist der IID-Datenwert wird Snapshot-Punkt-ID sein. Dann wird der Titel Snapshot sein. Titel. Beschreibung wird Snapshot-Beschreibung sein, dann Datum. Ähnlich Snapshot-Datum und Benutzer-ID. Also werde ich Ihnen nur eine Sache erklären. Dass diese Benutzer-ID die eindeutige ID des Benutzers ist , aber diese ID ist die Dokument-ID, die diese ist. Damit wir das Dokument identifizieren und es verwenden können, um das zu manipulieren, aktualisieren oder in Zukunft zu löschen. Also definitiv brauchen wir immer diese Dokument-ID. Es ist sehr nützlich. Das war's also für diese Sitzung. Hier. Heute haben wir gelernt, wie man diese Aufgabe hochlädt und auch erfolgreich eine Modellklasse erstellt. Das sagte 10 Q 14. Note und die Aktualisierung: So haben wir jetzt erfolgreich unsere Daten eingefügt, und das sind die Daten, die wir jetzt auf unserem Home-Bildschirm abrufen und anzeigen werden. Bringen Sie Ihren VS-Code heraus und gehen Sie zum Startbildschirm. Wir werden Stream verwenden, weil wir alle Knoten von den Feuern zu einem Stream holen alle Knoten von den Feuern zu , so dass jede Änderung in Echtzeit reflektiert wird. Und diese Stream-Abfrage werde ich in Häusern sauber selbst schreiben und wird keine separate 10. Mai in Diensten erstellen. Gehen wir zum Startbildschirm. Hier. Das ist unsere Party. Ich werde nur diese Karte kopieren, die dieses Auto von hier geschnitten wird. Wir werden es brauchen. also sicher, dass Sie es in Ihrem System haben, das nur kopieren ist. Hier unten. Ich werde einen String-Builder verwenden. Sie können zukünftige Buildup verwenden, aber ich möchte nur, dass angesichts einer wertvollsten Datenänderungen oder irgendetwas, was wir tun, wir müssen unseren Set-Status nicht aktualisieren. Das heißt, ich werde nur Feuerraum sagen, Firestore diese Instanz. Sammlungsmodi. Dann werden wir die where-Klausel verwenden , so dass wir holen können, wenn bestimmte Benutzer-ID. Indem du es filtrierst. Wir sagen Benutzern Benutzer-ID ist gleich user.email UID, dh user, dieser Benutzer ist dieser. Und dann Schnappschüsse. Okay, wir haben unser Co-Editing. Jetzt in diesem Baumeister. Und wir werden Kontext haben und Snapshot, Snapshot sehen. Und dann werde ich nur schreiben, wenn Snapshot Daten hat, wenn nicht, drehen Sie einfach eine Reihe von farbigen Fortschrittsindikator. Wenn der Snapshot Daten enthält. Danach werde ich jetzt eine weitere Überprüfung durchführen, um zu sehen, ob Snapshot-Punktdaten, Dot Docs Dot Länge größer als 0 ist. Das heißt, wir haben einige Dokumente. Wenn wir kein Dokument haben, werde ich einfach in der sonst werde ich Zentrum zurückkehren. Und hier werde ich Text ohne Notizen erscheinen. Ich bin verfügbar. Das war's. Aber wenn die Dokumentlänge größer als 0 ist, werde ich eine Liste views.py zurückgeben. Dies, wenn sonst, ist sehr wichtig , weil es gewesen sein könnte, dass der Benutzer nichts hochgeladen hat. Also hier müssen wir damit nachsehen. Jetzt werden die Elementanzahl Snapshot-Punktdaten, Punktdokumente, Punktlänge sein. Und dann unten haben wir Kontext. Und dieser Index 0 hat nicht erlaubt. Alles läuft wirklich gut. Diese Daten, die wir in diesem Snapshot erhalten werden, bedeuten also, dass JSON-Format. Also hier werden wir konvertieren haben Takelage Modell. So werde ich nur Node-Modul schreiben, ihm einen Namensknoten geben. Dann werde ich model.fit lassen. Ich bin Jason. Und es ist eine Momentaufnahme. Also haben wir nur großartige Snapshots, Punktdaten, Punkt, Dokumente und Index. Also hier zwischen Balken und konvertieren Sie den JSON in ein Objekt. Nun, in der Return-Anweisung, werde ich einfach einfügen, fügen Sie die Karte, die wir bereits zuvor kopiert haben. Also hier in dem Text, der in diesem Titel ist, werde ich nichts Punkt Titel dieser Notiz schreiben. Und auch in der Beschreibung möchte ich einfach Node.js Schriftart. Okay, Lassen Sie uns speichern und wir starten und überprüfen Sie im Home-Bildschirm, was gezeigt wurde. Siehe gelehrtes Florida. Diese Daten stammen also aus der endgültigen STO-Datenbank. Schließlich hat die Reha auch Daten erfolgreich abgerufen. Sie fragen vielleicht, warum ich StringBuilder verwende. Also sagen wir, ich gehe zu diesem Titel und wie ich schreibe keine. Feuerbasis. Und dann die Operationen in Firebase Feuerladen. Ich werde nur gesagt, Firebase Dateispeicher lernen. Okay, jetzt, wenn ich auf Knoten hinzufügen klicke, sehen Sie, dass es bereits abgerufen wird. Ich muss unseren Set-Status nicht neu starten oder was auch immer. Da es sich um einen StringBuilder handelt, wird er direkt auf dem Startbildschirm angezeigt. Okay? Der nächste Schritt besteht darin, dass Notizfunktionalität hinzugefügt wird. Also für das erste, was wir tun müssen, ist , vergangene Knotendaten vom Startbildschirm und akzeptiert im Bearbeitungsbildschirm. Also lasst uns hier gehen. Ich werde gut aussehen, ich kenne Knoten. Und hier werde ich den Konstruktor verwenden und einfach diesen Punkt Naught schreiben. Jetzt auf dem Home-Bildschirm zeigt geben, weil hier haben wir zwei Chef Daniel. Und dann schon hier bemerken, wir haben bereits einer Variablen zugeordnet. Aber das ist erledigt. Jetzt. Ich kannte den Punkt-Punkt-Bildschirm nicht. Wir müssen zwei Decks erstellen und wieder getan werden, wenn ein Controller, Controller, dann der Controller-Name, Beschreibung, Controller, Decks, Anything Controller. Okay. Und lassen Sie uns boolesche Variable laden. Also wird alles ziemlich sehen. Also, was ich will, ist, wenn der Benutzer darauf klickt, sollten seine Daten hier angezeigt werden, das heißt, wenn wir bearbeiten. In diesem Fall sollte also offensichtlich die Beschreibung des Anziehens in diesem Textfeld angezeigt werden. Weit, Papa, müssen vorab zuweisen und gegeben Anfangswert, dass x und denken und lernen. Und wir können es in diesem Init-Zustand tun. Hier werde ich nur schreiben del Controller dot txt ist gleich Widget dot naught dot dot. In ähnlicher Weise ist Beschreibung Controller Punkt dx gleich H naught dot Beschreibung zurückweisen. Und wir müssen sicherstellen, dass wir diese TI-Token zuweisen, um zum Textfeld zu führen. Also hier so. Und auch hier haben wir Beschreibungen gelesen und zu lernen. Speichern wir es und sehen, ob es funktioniert oder nicht. Wenn ich nun auf das Learn Firebase Flattern klicke, ja, es funktioniert. Wir können sehen, dass ich in der Beschreibung erzähle. Jetzt ist es an der Zeit, dass wir an dieser Schaltfläche „Aktualisieren“ arbeiten. Wie Sie wollen, wir fasten, wir müssen schaffen ist kreative Funktion. So unten in bestimmten täglichen Funktion, aktualisieren, wird es wieder nach drei Dingen fragen. Saite. Als erstes werden wir Dokument-ID lesen, weil wir zumindest wissen, welches Dokument aufgenommen werden soll, dann String Titel, und dann String S um es sinken zu lassen. Jetzt haben wir unseren Fangblock. Ich kann einfach drucken dann beide Helden, so dass Sie Daten drucken können. In diesem try-catch ist das kein try-Block. Wir müssen einfach eine Rate lesen. Firestore Sammlung, Notizen, Dokument, doc, doc, doc, update. Ich habe es wirklich geliebt. Beschreibung, Beschreibung der Spaß Chinesisch getan. Gehen wir zum Bildschirm Notiz bearbeiten. Und unten haben wir unseren Knopf. Machen wir es zu einer Spüle. Plus 10. Wir werden prüfen, ob er nicht geschrieben hat. Es ist del controller.js nicht gleich NP und Beschreibung. Und x ist auch nicht leer. Also hier werden wir schreiben, wenn es leer ist. Also zeigen wir nur eine Snackbar erforderlich ist. Und wenn nicht in diesem Zustand drucken. Lassen Sie uns den Zustand setzen. Das Laden besteht darin, den unären Operator zu verwenden und zu prüfen, ob die Ladung zentriert und dann eine zirkuläre Fortschrittsanzeige angezeigt werden soll. Wenn nicht, dann dieser Knopf. Ja, ich werde warten und Firestore Dienste dot update, doc ID, das ist Dokument UND wird einfach Widget sein. Id. Titel wird L-Controller Punkttext sein. Beschreibung wird Beschreibung controller.js sein. Als Nächstes. Danach werden wir den Zustand wieder setzen und auf false laden. Und ich werde nie rauskommen. Es ist Navigator Punkt Punkt. Speichern wir es und testen Sie es selbst. Bringen Sie den Redakteur raus. Sodium Sie später. Wenn ich gehe zu lernen Firebase überschwemmt und eine endliche, nur lernen Firestore und aktualisiert. C. Es arbeitet in Spanien. Wir können sehen, dass Veränderungen, die gelernt werden. Seitdem ist es ein String-Builder. Deshalb spiegeln sich diese Veränderungen in Echtzeit wider. Das war's also für dieses Video. Im nächsten Video werde ich an diesem Lösch-Button arbeiten. Danke. 15. Sicherheitsregeln: Willkommen zurück. Also schließlich ist die einzige Funktion oder die markierte links, eine bestimmte Notiz zu löschen. Abgesehen davon haben wir erfolgreich erstellt und aktualisiert. Lassen Sie uns also an der Funktionalität arbeiten, um sie auch zu löschen. Gehen Sie zu Firestore Services Punktdatei. Unterhalb des Update-Knotens Ich werde die zukünftige Funktion namens Löschknoten erstellen. Lass es sinken. Also zum Löschen eines Knotens v erforderlich Dokument-ID. Also akzeptiere ich es als Parameter. Verwenden Sie nun diesen try catch-Block. Im try-Block ist es nur eine Codezeile, die erwartet wird, speichert Punktsammlungsknoten, dann Dot Dot Doc-ID und einfach 10 Dot Delete. Das heißt, das ist das einzige, was erforderlich ist. Wir haben unsere Funktion bereit. Lassen Sie uns daran arbeiten, dass verzögert ich Modus Bildschirm bearbeiten kann, das ist dieser. Und auch zeigen Sie es bestätigen Dialogfeld, um sicherzustellen, dass der Benutzer nicht versehentlich gelöscht Knoten durch Drücken auf diese obere Taste. Weil Szenarien passieren können, dass er weniger König sein Bildschirm ist und versehentlich klickt er auf diese Schaltfläche. Wechseln Sie zum Bearbeitungsmodus. In der App-Leiste Aktionen haben wir diese Quaternion. Also in der Vor-Ort-Mich Kid, ein Waschbecken. Und das erste, was wir zeigen werden, ist eine Show. Dialog. In diesem Zusammenhang ist Context Builder. Wir müssen eine Funktion schreiben und es akzeptiert es wird Kontext. Das besagte. Jetzt einfach zurückkehren und warnen Dialogfeld. Das ist ein Warnungsdialog in ihm. In diesem Titel. Geben wir ihm einen Text. Bitte bestätigen Sie das in diesem Inhalt. Geben Sie ihm einfach einen Text namens, Bist du sicher? Sie löschen den Knoten? Das war's. Und danach werden wir einige Knöpfe haben. Zuerst, ja. Aber dann Text. Aber dann und in diesem Kind, schreiben Sie einfach e, s ja. Und Daten-Button wird ein Text-Button sein, aber es wird einfach sein, nein zu sagen. Und wenn der Benutzer auf diese neue Meer glatt klicken sollte einfach navigieren. Also werde ich Navigator Dot Pop in diesem keine Schaltfläche schreiben. Aber in der Ja Taste, Ich werde auf Prezi schreiben Ich werde auf einer Spüle machen und emulieren, warten Firebase. Studieren Sie alle Store-Dienste, die Knoten löschen, und die ID ist starr. Aber Knoten-ID, das war's. Und danach werde ich zuerst diesen Dialog mit Navigator Dot Bob schließen. Und danach werde ich das Grün schließen. Auch weil wir es jetzt nicht mehr bearbeiten können sollten. Ich habe es getan, wie es schon Daley getan hat. Ok. Probieren wir es aus. Ich habe es gerettet. Aus unserem Emulator zu sein. Wenn ich auf Learn Firestore klicke und nun auf die Schaltfläche Löschen klicke. Siehe, ich habe diesen Bestätigungsbildschirm. Wenn ich auf Nein klicke, geht es direkt zurück. Aber wenn ich auf Ja klicke, sehen es bringt uns auf den Startbildschirm und unsere Schuldverschreibung wurde erfolgreich gelöscht. Also schließlich funktionieren die Funktionalitäten und wir haben eine funktionierende ordnungsgemäß abgeschlossen, die Modus-Anwendung abgeschlossen ist. Also das letzte, was wir tun müssen, ein letztes Thema ist das Hinzufügen von Sicherheitsregeln zu Cloud Firestore. Also, wenn wir Firestore für die Produktion verwenden, müssen wir die Sicherheitswurzeln ändern. Wie in der Dezimalstelle kann jeder mit seiner URL darauf zugreifen. Und natürlich, weil welche Daten gefährdet sind und uns auch einen großen Verwendungs-Pin geben können, wenn jemand sie missbraucht. Also, weil es endlich gibt, wollen wir diese Art von Situationen nicht. Wir sollten diese Bedingung ändern und welche Bedingung ich verwenden werde, wird als Authentifizierung erforderlich bezeichnet. Einer der am häufigsten verwendeten Sicherheitsstammdaten ist die Steuerung des Zugriffs basierend auf dem Authentifizierungsstatus des Benutzers. Beispielsweise kann Ihre App zulassen, wenn Sie sich Benutzer nicht anmelden, um Daten zu schreiben. Dafür. Bringen Sie die Firebase-Konsole heraus. Gehen Sie zur Firestore Datenbank und klicken Sie auf diese Regeln. Hier. Das europäische C, das erlaubt allen, auf die Datenbank zuzugreifen, aber wir werden es nicht, wir wollen es nicht. Wir werden es entfernen. Densa hier. Wenn wenn, wenn Anforderung Punkt sind nicht gleich null, Das ist es. Und klicken Sie auf Veröffentlichen. Von jetzt an. Auf. Der Benutzer wurde authentifiziert, dieser Anmeldebenutzer, E-Mail, g-mail, was auch immer, dann würde nur er erlaubt, auf diese Datenbank zugreifen. Hier. Dieser bestimmte Teil bedeutet, dass jeder, es kann jedes Dokument in der gesamten Datenbank entsprechen. Wir können auch solche Regeln ändern, aber ich glaube nicht, dass es im Moment so wichtig ist. Ein weiteres gängiges Muster besteht darin, sicherzustellen, dass Benutzer Lee lesen, ihre eigenen Daten auf Lee lesen und schreiben können. Es gibt nur wenige mehr, die Sie selbst ausprobieren können, indem Sie die offiziellen Dateien in die Dokumentation lesen. Die am häufigsten verwendete Authentifizierung ist jedoch erforderlich. Das war's also. Für dieses Modul. Wir haben viel gelernt. Und das ist, wie man ein Firebase-Konto erstellt, wie man diese cred-Operationen macht. Und schließlich, bauen Sie auch unsere komplette Node App. Und am Ende lernen wir, wie man die Sicherheitsregeln ändert. Im kommenden Modul werden wir also etwas über den Firebase-Speicher erfahren und Dateien darauf hochladen. Bis dahin üben Sie einfach weiter. 16. Firebase Storage: Hallo, willkommen zu diesem neuen Modul, wo wir diskutieren was Firebase Cloud Storage ist und wie es mit Flattern implementiert wird. So bis jetzt haben wir gelernt, wie man den Benutzer authentifiziert, wie man Benutzerdaten in Fire Story speichert, die war, aber jetzt ist es Zeit zu lernen, wie man Dateien in Firebase als auch hochlädt. Jetzt stellt sich die Frage, was ist Firebase Cloud Storage? Cloud Storage ist so konzipiert, dass wir schnell und einfach speichern und für benutzergenerierte Inhalte wie 42 Videos und andere Dateien bereitstellen können. Also in jeder realen Anwendung heutzutage, tot einfach und Notwendigkeit der Verwendung von Speicher. Wenn Sie Instagram sehen, sich alles um Bilder. Und definitiv müssen wir eine Lagerstätte benutzen. Abgesehen davon, wenn Sie WhatsApp sehen, wenn wir nur Text senden, dann verwenden wir nur die Datenbank. Aber nehmen wir an, wir ändern unser Profilbild entweder durch Senden von Bildern oder Videos an andere Benutzer. In diesen Fällen müssen wir eine Art von Speicher verwenden. Also offensichtlich war der erste Schritt, unser Firebase-Projekt zu konfigurieren, was wir bereits getan haben. Der nächste Schritt besteht darin, die Firebase-Speicherabhängigkeit hinzuzufügen. Lassen Sie uns zu unserem Chrome-Browser gehen, oder? Pub Spezifikation, dann, sorry, Pub dot-dot-dot. Und hier, schreiben Sie einfach Firebase-Speicher. Der erste ist, dass Sie es kopieren und in die YAML-Datei einfügen müssen. Hier steht Download, Abhängigkeit und installieren Sie es in unserem Projekt. Jetzt ist der nächste Schritt, um Speicher im Firebase-Projekt zu aktivieren. Das ist die Firebase-Konsole. Wie Va einen Brand mit, Feuerspeicher-Daten erstellt hat, die gleiche Weise, müssen Sie nur den Speicher aus diesem linken Menü auswählen. Und sobald Sie darauf klicken, werden Sie diesen Eimer Teil sehen, das ist dieser. Dies ist unsere einzigartige Eimer Teil und warf dies auf Levy wird das Hochladen von Geldstrafen. Und van wir benutzten Firestore Datenbank-Regeln. Ähnlich in der Lagerung gibt es auch Regeln. Aber da wir Firebase-Authentifizierung verwenden , müssen wir deshalb hier keine Regel ändern. Aber wenn Sie die Regel für Firebase-Speicher ändern müssen, um zum Testen öffentlich zu werden. Das können Sie auch tun, aber definitiv nicht in dieser Produktionsphase. Also haben wir unseren Speicher bereit, wir haben unsere Abhängigkeit bereit. Und wir werden hier nur eine Sache überprüfen. Also das können wir es auch einfach kopieren, da es hier einen Fehler ausgibt. Ich werde nur zur Pub-Spezifikation gehen und eingefügt. Ok. Jetzt ist es an der Zeit. Wir bauen auch einen neuen Bildschirm. Erstellen Sie also eine neue Datei im Milzordner und benennen Sie es, laden Sie Bild Punkt, Punkt. Und jetzt erstellen Sie ein Stateful-Widget. Aber vorher werde ich das Paket importieren und dann einen Zustand voll starr und benennen erstellen. Bildschirm Bild hochladen. Wie immer. Gerüst. Dieser Titel. Ich werde Decks hochladen schreiben, um Wege zu finden. Und ich werde es einfach in den Mittelpunkt stellen. Körper. Zunächst werde ich zwei Schaltflächen erstellen, um ein Bild auszuwählen. Lassen Sie uns diese Spalte löschen. Dann Kinder im Körper, werde ich eine Art von Biegung geben ist, wenn Sie es einfach unabhängig geben. In diesen Kindern. Ich will schnelleren Fall. Zwei Knöpfe dafür. Und es wird die Zeile innerhalb der Spalte erstellen. Geben Sie es Mittelwert x ist ein Element, Mittelwert existieren Verkauf, wenn Punkte Platz gleichmäßig. Und dass Kinder, die ich erhöht haben, aber 10 Artikel, die Schaltfläche Punkt Symbol erhöht ist. Ich werde einfach eine Kamera schreiben. Und Arbeit sollte Kamera sein. Ähnlich und heben Sie sie. Aber dann können und werden wir geben, ich kann, wie ich hinzufügen kann den Text der Sammlunghinzufügen kann. Also, was ich erstellt habe, um dies zu zeigen, müssen Sie zur Datei main.js gehen und den Home-Bildschirm hier kommentieren. Stattdessen werde ich unseren Upload-Bild-Bildschirm drehen. Jetzt speichern Sie es. Mal sehen, ob es funktioniert. Unser Upload-Bild-Bildschirm sieht sehr schön aus. Dieser Bildschirm habe ich zuerst erstellt, nur um zu demonstrieren, wie die Operationen im Speicher zu tun. Nachdem wir es erfolgreich gemacht haben. Implementieren Sie diese Geschichte auch in unserer Knotenanwendung. Aber vorher, die Grundlagen, sollten wir die Grundlagen kennen. Jetzt. Du denkst vielleicht, okay, ich sehe, wir werden Bilder, Bilder und alles hochladen. Aber wie, um auf diese Gerätekategorie zuzugreifen, unsere Kamera und PK-Bild, die wir machen, müssen wir einige Verwendung von Drittanbieter-Paketen machen. Sind viele auf dem Markt, aber wir werden mit Bildauswahl. Lassen Sie uns gehen, um dort zu Pop und Bildauswahl. Also diese Abhängigkeit werden wir verwenden, um auf das Gerät des Benutzers zuzugreifen, das heißt Gallery sind die Kamera und dann das Bild holen und kopieren Sie es einfach. Gehe zum Spezifikationspunkt YAML und füge ihn hier ein und speichere ihn einfach. Unsere Abhängigkeiten sind also alle festgelegt. In diesem Video. Wir haben Firestore erfolgreich konfiguriert und die Benutzeroberfläche erstellt. Im nächsten Video werden wir lernen, wie man Cloud Storage verwendet und welche Terminologien es gibt. Vielen Dank. 17. Cloud-Speicher: In dieser Sitzung werden wir nur verstehen, was diese Cloud Firestore und einige seiner Terminologien. Denn bevor wir Code schreiben, sollten wir zumindest einige der Funktionen oder Funktionen kennen, die es erlaubt. Also direkt für die Verwendung von Cloud Storage. Zunächst einmal haben wir tun Stand-up-Paket, die wir bereits getan haben. nächste Schritt besteht dann darin, eine Speicherinstanz zu erstellen , die als Instance-Getter auf Firebase-Speicher Der Abfallspeicher wird als Firebase-Speicherpunktinstanz bezeichnet. Dies haben wir in fünf besten Kunst sowie im Feuer mit Feuerladen getan. Dann gibt es einen anderen Begriff namens Referenzen. Referenzen. Ein Verweis ist ein Zeiger auf eine Datei in Ihrem angegebenen Speicherbucket. Dies kann eine Datei sein, die bereits vorhanden ist oder eine Datei, die nicht existiert. Um eine Referenz zu erstellen, verwenden Sie die RDF, das heißt href meine zehn auf dieser Firebase-Instanz. Und das ist das Beispiel. In einfachen Worten, dies ist der Speicherort Ihres Dateispeichers. Das heißt, wenn wir hier direkt erwähnt, Schrägstrich und dann den endgültigen Namen. Wenn wir dann zu unserem Speicher gehen, der hier ist , wird diese Datei direkt im Stammverzeichnis gespeichert. Aber ihre Freunde können auch verschachtelte Datei oder Verzeichnis sein. Geben Sie das vollständige Teil an. Rus, dass Kind meinen Kopf auf die Rücklaufdifferenz, es wird Ordner innerhalb des Dielektrikums erstellen. Das bedeutet, wenn Sie einen Ordner erstellen möchten, der Bilder ist, und dann in ihm, laden wir das Bild hoch, nur zum Beispiel hier. Der erste Ordner kann das Profilbild des Benutzers sein. Zweiter Ordner kann Elemente wie diese gesendet werden. Dafür müssen wir einfach eine Referenz erstellen. Dann habe ich das Verzeichnis innerhalb der RDF-Methode erwähnt, wie dies, Bilder Schrägstrich und dann die Bilddatei sind, wir können es auf eine Weise tun, die dot ref ist, dann dot child, das heißt, dies ist der Ordnername und dann dot child, dass ist direkt die Bilddatei. Das ist also dieses Konzept der Referenz. Was ist das Auflisten von Dateien und Verzeichnissen? Firebase bietet die Möglichkeit, die Dateien und Verzeichnisse innerhalb des Verzeichnisses aufzulisten. Es gibt zwei Methoden zur Verfügung, die diese Fähigkeit bieten, Liste und Liste an Bord Funktion meine Steuererklärung, jedes Ergebnis, das alle Dateien, Verzeichnisse und Paginierungs-Token aus der Anfrage enthält . Nehmen wir also an, wir haben das Bild erfolgreich hochgeladen. Jetzt, wenn es Zeit ist, diese Bilder aus dem Speicher abzurufen. In diesem Fall werden wir dieses Material verwenden. Also einfach, was wir tun müssen, ist in B Fall haben wir Konvention. Die Referenztiefe ist, wo diese Datei gespeichert wurde und dann aufgelistet wurde. Es wird uns auf die Dateien in unserem Speicher gespeichert geben. Und da wird es in einer Liste von Elementen kommen. Also müssen wir es einfach durchlaufen. Im Beispiel können Sie sehen, das ist, wie wir es tun. items -Eigenschaft stellt eine Datei in diesem Bucket und die Präfixeigenschaft stellt die verschachtelten Verzeichnisse dar. Für den Fall haben wir eine große Menge von Dateien und Verzeichnissen namens LinkedList. Es kann lange dauern, bis wir unsere Ergebnisse zurückgeben. In diesem Fall kann das Aufrufen der Liste und die Begrenzung ihres Ergebnisses zu einer besseren Benutzererfahrung führen. Also im Beispiel können Sie hier sehen, wir fragen nach den Daten, aber nur für die ersten 10 Daten, Das ist es. Dies ist also das Konzept, Dateien und Verzeichnisse aufzulisten. Dann kommt es das Hochladen von Dateien. Also dieser Dummy-Code, dies ist die Syntax erforderlich, um eine Datei hochzuladen. Fasta Datei müssen wir, wir sollten eine Datei haben. Und dann in diesem Fall Get Data View Hauptkettendaten Freunde wo wir wollen, dass es hochgeladen werden und dann einfach dot-Ausgabedatei lesen. Und innerhalb dieser Datei senden wir unsere Datei, in der sie sich befindet. Dies ist sehr einfach und das ist nur dieser Code oder Flug. Wir werden diesen Code in der nächsten Sitzung implementieren. Ich wollte Ihnen nur einen Überblick geben und wie der Speicher funktioniert und welche Funktionen er bietet. Das letzte, was wirklich wichtig ist, sind heruntergeladene URLs. In den meisten Anwendungsfällen möchten wir möglicherweise Bilder anzeigen, die in einem Bucket gespeichert sind , der in unserer Anwendung gespeichert ist. Und dafür haben wir angefordert, die URL von diesem Speicher herunterzuladen. Es wird uns einen Link geben. Und diesen Link musst du in unserer Vision zeigen. Um das Aryl herunterzuladen, müssen wir einfach die Referenz des Bildes erwähnen und dann meine 10 Punkt Download-URL verwenden. Dies werden wir auch in zukünftigen Videos verwenden. Wenn Sie nun mehr über Cloud Storage erfahren möchten, können Sie einfach auf die offizielle Dokumentation gehen, die hier ist, und Sie lesen alles, welche Referenzen, URLs herunterladen , Dateien hochladen, Rohdaten hochladen, wie Metadaten, sehen, was unsere Aufgabe Farbe, verschiedene Arten von Aufgaben. Eine Menge Dinge. Wenn Sie möchten, können Sie alles durchgehen, da es eine gute Übung ist , die Dokumentation dieses Plug-ins zu lesen. Das ist also in FAR WIR. In der nächsten Sitzung werden wir unser erstes Bild hochladen. Und Q. 18. Image: Hi. So haben wir jetzt die Konzepte und Theorie des Firebase-Speichers verstanden. Es ist Zeit, unsere eigene Funktion zu erstellen. Das ist mein großes Image und dann auf den Server hochladen. Wir haben bereits erwähnt, dass Abhängigkeiten, das ist Firebase-Speicher und die Bildauswahl. Gehen Sie nun einfach zum Bildschirm „Bild hochladen“. Und hier ist das erste, was wir tun müssen, eine Instanz zu erstellen. Einfach unsere Firebase. Firebase-Speicher ist gleich der Abfallspeicherinstanz. Dann definitiv, was ich tue, es wird einige Zeit dauern und wir müssen einige Ladeindikator in der Benutzeroberfläche anzeigen. Deshalb erwähne ich eine Variable. Danach lassen Sie uns unsere Funktion namens Funktion erstellen, die void zurückgibt und ich werde mich in Ruhe lassen. Bild. So hier können Sie sehen, eine Person kann Bild von einer Kamera oder einer Galerie hochladen. Also, wenn wir diese Funktion aufrufen, müssen wir die Eingabequelle senden. Das heißt, ob der Benutzer Kamera gewählt hat, sind die Galerie. Jetzt ist es an der Zeit, dass wir auch unser Bild verwenden. Also bekomme ich eine Variable namens Picker und dann zuweisen ist Bildauswahl. Jetzt muss ich einfach schreiben warten Picker, Bild auswählen. Und hier wird Kraft ein ternärer Operator sein , der überprüft, ob die Eingabequelle Kamera ist. Es wird Bildquelle Kamera sein. Oder sonst wird es Quelle ausgeben. Aber Kelvin. Ok? Wenn wir also unser D sprechen Bild haben, können wir sehen, dass es eine fünfte Zukunft des exe-Dateidatentyps zurückgibt. Also werde ich es einfach hier zeichnen und wir werden einfach die endgültige EXE-Datei schreiben , die im Gesundheitsschutz ist und es großes Image nennen. Also, was sie abgebildet wurden, werden die Benutzerdaten hier gespeichert. Jetzt muss ich zuerst überprüfen, ob ein Benutzer eine große Summe jedes Bild hat oder nicht. Ich werde nur überprüfen, ob Peak-Bild eine Zwei ist. Jetzt werde ich einfach null zurückgeben und die Ausführung stoppen. Und wenn nicht, wenn das Bild nicht null ist, werde ich zuerst einen Dateinamen in diesem großen Bildnamen bekommen einen Dateinamen in . Das zweite, was ich tun muss, ist die Datei zu erstellen, da dieses Format eine EXE-Datei ist. Also ich mag Bilddatei wirklich und dann drehen Sie einfach das Widget, das von diesem Punkt IO ist. Sehen wir, wir haben wichtig, den Punkt IO. Und hier müssen wir einen Teil schicken, der aus kommen wird. Bild Punkt. So haben wir jetzt alle erfolgreich in eine Datei konvertiert. Es ist an der Zeit, dass wir unseren Catch-Block durchführen und die Firebase-Speicherfunktion durchführen. In dieser Krawatte. Das erste, was ich tun werde, ist die Ladeanzeige auf wahr zu bringen. Dann werde ich auf Firebase Storage Dot warten , um ihre Freunde zu referenzieren, wenn wir die Einreichung. Und Ausgabedatei. Und Eingabedatei, werde ich Bilddatei wie folgt schreiben. Und nachdem sie erfolgreich gemacht haben, werde ich wieder auf false gesetzt. Und wie immer zeige ich gerne eine Snackbar. Gerüst AUS, dann zeigen Sie Snackbar, Snackbar und Guide-Tab Inhalt als hochgeladene Geschlechter an. Ok. Ich werde nur auf Firebase-Ausnahme gemacht, fangen und E. Und wenn etwas anderes, dann hier, meine ich wieder drucken. Oh, okay, jetzt ist unser lustiger Chen fertig. Wir müssen einfach zuerst den Ladeindikator hier in unserem Zeilenwidget erwähnen . Wenn das Laden wahr ist, dann zentrieren Sie den kreisförmigen Fortschrittsindikator. Wenn nicht, dann muss ich diese Reihe zeigen. Wir legen Knöpfe ab. Mal sehen, Probieren wir es aus. Dieses Festhalten in der geliebten 10. Aber okay, zuerst, lass mich zu meinem Lager gehen und es deprimieren. Lassen Sie uns überprüfen, ob es ein Bild gibt oder nicht ihr industrielles Alter. Sie können sehen, dass es hier keine Dateien gibt. Bringen Sie einfach Ihren Emulator heraus. Ich werde auf Galiläa klicken, aber vorhermuss ich natürlich unsere Funktion erwähnen, muss ich natürlich unsere Funktion erwähnen um Tasten zu dub. Also werde ich drücken, Ich werde dieses Upload-Bild mit einem Wert von Kamera nennen . Und in diesem Fall werde ich einfach Galerie schreiben. Ok? Da dies ein Amulett ist, das ich nicht die Standardkamera verwenden würde, werde ich wählen. Dann können Sie in diesen Downloads bereits vorhandene Bilder sehen. Ich werde diese Elon Musk wählen und sehen unser Syndikat ist da und dann erfolgreich hochgeladen. Schauen wir uns unseren Speicher an und sehen Sie sich unsere Bilder hier an. Das ist also der Dateiname auf der Referenz, über die ich gesprochen habe. Also hier, dieser dateibasierte Speicher oder Dateiname ist dieser, der direkt in das Stammverzeichnis hochgeladen wurde. So laden wir das Bild in den Speicher hoch. Aber definitiv. Dann haben wir das Bild hochgeladen. Es ist notwendig, dass Wir es auch abrufen. Für das Abrufen der Bilder ist das erste, was wir tun müssen, eine Methode dafür zu erstellen. Gehen Sie einfach auf unseren Bildschirm nur ich werde, ich möchte meine Reihe notieren. Nur in dieser Datei. Wenn Sie möchten, können Sie separate Dateien verwenden. Ich werde einfach nur Zukunft schreiben. Es wird uns eine Liste von Dateien geben. Also werde ich tun, ich lade Bilder und dann machen es eine Spüle. Danach werde ich einfach eine Liste zugeordnete Variableerstellen eine Liste zugeordnete Variable , die alle Daten aus dem Speicher speichert. Nun, das erste, was ich bereits erwähnt habe, dass wir hören müssen, um alle Akten zu bekommen. Also werde ich finite Listenergebnis schreiben. Ergebnis ist gleich der dateibasierten Speicherreferenzliste warten. Danach werde ich einfach richtig kommen. Eine Liste von Dateien wird zu Ergebniselementen. Wie ich in meinen Folien diskutiert, als wenn wir unsere Listing-Dateien haben. Und durch dieses Ergebnis können wir die Gegenstände bekommen. Und Elementeigenschaften stellen Dateien innerhalb des Blocks dar. Also jetzt haben wir das Phi und ich werde es einfach mit Future dot durchschleifen. Für jedes Element werden unsere Dateien sein. Und es wird uns eine Referenz geben. Eine Akte. Wenn wir es durchmachen. Warum dann Schleifen? Ich bekomme nur die Download-URL. Ich reliere Finanzen Schulungsdatei URL ist gleich warten Datei dot Download URL erhalten. Und da, wenn es ein Warten ist, muss ich es zu einer Spüle machen. Und die Datei ist oben Variable. Ich werde Wert in einer Karte hinzufügen, die URL ist, wird in Ordnung URL und wird Dateipunkt voller Teil sein. Und schließlich möchte ich Dateien drucken und Dateien zurückgeben. Das heißt, diese Liste der Karte. Eine Karte enthält die Bilddaten. Url wird verwendet, um zu zeigen, dass es dann dieser Teil verwendet wird, um es später zu löschen. Das ist also alles für dieses Video. Wir haben viel getan. Im nächsten Video werden wir zeigen implementieren diese Funktion in der Benutzeroberfläche. Danke. 19. Bild retten: Hi. Im letzten Video haben wir also erfolgreich die Funktionen, die zum Abrufen von Bildern erforderlich sind. Das ist dieser Laden von Bildern. Jetzt ist es an der Zeit. Wir zeigen auf dem unmittelbaren Stand in diesem Speicher in unserer Benutzeroberfläche. Hier. Lass es uns tun. In unserem Körper. Wir haben Spalte und innerhalb der Spalte haben wir diese Auslosung. Und unter dieser Zeile möchte ich die Bilder zeigen. Zuerst Spaß, werde ich einige Abstände geben. Wir Staub Größe Fox, gegeben eine Höhe von 50. Dann werde ich eine erweiterte Region verwenden, so dass es Reste Stück nehmen wird. Dann hier, jeder Benutzer Zukunft Builder. In der Zukunft, wenn Vogel Zukunft, werden wir Bilder laden und jetzt schreiben unsere Funktion, eine Momentaufnahme. Ok. Lassen Sie uns überprüfen, ob Snapshot-Verbindungsstatus gleich dem Verbindungsstatus ist. Warten. Es ist, es ist nicht abgeschlossen. Dann werde ich Farbfortschrittsanzeige drehen. Und wenn nicht, dann werde ich eine Listenansicht zurückgeben. Jetzt in diesem Biller, Ich DM-Konto wird Snapshot-Punktdaten, Punktland sein. Und ich werde überprüfen, ob es null ist und wir werden es 0 machen. Und ich rendere. Ich werde einen Kontext und diesen Index haben. Jetzt, da die Daten in einer Karte kommen, werde ich sie hier speichern. Kartenbild ist ein Snapshot-Punktdatenindex. Und ich werde einfach zurückkehren ist rho. Rho, dass Kinder. Das erste, was ich jemals benutze, ist eine erweiterte Region. In ihm. Ich werde eine Karte benutzen. Und diese Karte, ich werde Container benutzen. Ich werde ihm eine Höhe von 200 geben. Und Kind, um unser Bild zu zeigen, dieses image.net. Und durch dieses Bildvideo würde ich einfach URL schreiben. Und nach dieser Karte Region, Ich, die eine Schaltfläche zeigen, das ist Icon Button. Und von denen kann ich Huygens dot löschen Farben und sehen ob es funktioniert oder nicht. Wir haben ein Bild in unserem Lager. Diese Folie zeigt einige Azure. Das sollte es nicht sein. Ok. Es zeigt nicht eine Rate war langsam. Aber sehen Sie, wir haben unser Bild. Sie können es in der Debug-Konsole sehen. Da wir auch ihre Ergebnisse vorgestellt haben, haben wir hier unser Image. So rufen wir das Bild aus dem Speicher ab. Und zeigen Sie es in unserer Benutzeroberfläche. Dies erweitert hier benutze ich, so dass es weniger Platz benötigt. Und dann sind die Knöpfe erschienen. Und Höhe ist diese 200. Und wenn es keine Daten gibt, dann wird die Elementanzahl 0 sein und nichts wird angezeigt. Jetzt ist es Zeit, die letzte Sache zu tun, die das Löschbild aus ihren gespeicherten Dateien ist. Lassen Sie uns eine Funktion dafür erstellen. Es wird Zukunft sein. Warten Sie. Dann löschen und löschen. Alles aus dem Lager, das wir brauchen. Referenz. Warten Sie einfach. Firebase-Speicher, Referenz, ref dot löschen. Und nach erfolgreicher Löschung, Lassen Sie uns den Zustand so einstellen, dass diese zukünftige Rechnung, die wieder aufgerufen wird. Und wir werden diesen Speicher überprüfen und die Daten erhalten. Wir haben die Funktion löschen, bereit, es ist Zeit, wir weisen das dem Icon-Button zu. Machen wir es zu einer Spüle. Und das Recht davon. Löschen Sie die Funktion und geben Sie sie so zurück. Und nachdem es gelöscht wurde, zeige ich eine Snackbar. Inhalt. Nächstes Bild. Schauen wir es uns an. Zeug. Was ich tun würde, ist zu versuchen, ein anderes neues Bild auszuwählen. Ich würde wählen. Mark Zuckerberg wurde erfolgreich hochgeladen und siehe. Wir bekommen unser zweites Bild. Wenn ich nun dieses erste Bild löschen möchte, klicke ich einfach auf diesen Lösch-Button und sehe das sofort erfolgreich. Das war also das Bild, das ich gelöscht habe. Nun, wenn ich die Firebase-Konsole aktualisieren, werden Sie nur ein Bild sehen und das ist unsere Marke Zuckerberg. Elon Musk war hässlich sie. Aber so löschen wir Bild aus Staub zu spät. Sie können den Code auschecken. Hier. Es ist, alles ist mit der Referenz verbunden. Ich werde sagen, ich möchte erwähnen, dass diese App so einfach wie möglich sein soll. Soda oder Kabel ist kürzer und Tina, es hat nur einen Bildschirm und verwendet ein stateful Widget für State Management. Ich weiß, dass es viele Produktionsmerkmale wie Bild vor dem Hochladen fehlen. Aber zunächst einmal, unsere Absicht ist es, richtig zu verstehen , wie Dateien aus dem Speicher hochgeladen und abgerufen werden. Das war's also für dieses Video. Ich hoffe, Sie haben viel gelernt. Danke. 20. Komprimieren und Compressing: So bis jetzt haben wir verstanden, wie wir unsere Datei in Firestore Speicher hochladen, abrufen und löschen. Aber jetzt ist es Zeit zu verstehen, wie man Bild beim Hochladen komprimiert. So große, große Bilder dauern länger, um hochzuladen und beleidigende Benutzerfreundlichkeit zu machen. Verwendet immer bevorzugte vernachlässigbare Ladezeiten und möchte nicht den Ladeindikator für sie sehen, um die Bildgröße zu reduzieren , können auch die monatlichen Rechnungen dieses Image-Speicher- und Hosting-Services ableiten , die Sie verwenden. Bildkomprimierungsfunktion ist unvermeidlich, wenn Ihre App über eine Funktion verfügt, in der der Benutzer Bilder hochlädt. Also, in einfachen Worten, sollten wir die Bildvervollständigung verwenden. Und weit, was gesammelt wird, ist ein Paket namens flatterndes natives Bild. Schauen wir es uns an. Wenn ich gehe und natives Bild schreibe. Und dann schauen wir uns das erste an, das ja ist, das ist dieses Flut vorläufig Bild. So können Sie sehen, dass diese beiden erforderlich ist, um die Größe des Bildes zu ändern und ihre Qualität durch Komprimierung zu reduzieren. Also lasst uns zur Installation gehen. Dann kopieren Sie es. Gehen Sie zu unserer Pub Spec Dot YAML Datei, und fügen Sie sie ein. Und dann speichern Sie die Datei, so dass unser flatternd die Arbeit der Installation der Abhängigkeit erledigt. Es wird einige Zeit dauern. Kein Problem. Oh, Höhle. Da es sich um eine neue Abhängigkeit handelt, müssen wir unsere überflutete Anwendung, das Desktop-Debugging, stoppen. Und dann haben Sie wieder neu gestartet, so dass unser überschwemmt weiß, dass ein neues Paket installiert wurde. Ich weiß, das ist ein sehr langwieriger Prozess. Es ist zeitaufwendig, aber so wird es gemacht. Also, bis zu diesem Zeitpunkt meine App läuft, würde ich gerne wieder zu unserem Upload-Bild gehen und versuchen, zu überarbeiten, was wir bisher getan haben. So haben wir unsere Upload-Bild-Funktion, wo wir senden, wenn es eine Kamera ist. Artikel 3. Danach verwenden wir dies nur als Entwurf, der Code findet, um unsere Datei an den Speicher zu senden. Und nachdem es fertig ist, marshaling ESNet. Aber dann war die nächste Funktion, die wir erstellt haben, Bilder zu laden. Das erste, was ich getan habe, war ein leeres Array zu erstellen. Dann erhalten Sie alle Dateien Referenz. Das ist wahr. Dieser Befehl Punkt Liste Stil. Es gibt uns eine Liste der Ergebnisse. Und durch diese Risiken resultieren, bekomme ich alle Referenzen des hochgeladenen Bildes und durchlaufe es dann, schaue es durch und bekomme die Download-URL. Also, und nachdem ich eine dominante Ansicht erhalten habe, und ich speichere diese in dieser Variablen und zeige sie dann nur in der Benutzeroberfläche an. Ui ist auch sehr einfach. Sie können sehen, dass ich diese Zukunft benutzt hatte, wenn es keine gibt. Und wenn etwas, ein paar Details, Vincent, dann werde ich die Liste überprüfen. Sie werden, dass, wenn Delta-Länge nicht ist, jetzt, wenn es keine ist, die nicht einmal ein Bild ist tot. Ich werde 0 auf eigene Faust schreiben. Wir können sehen, dass unser Compiler fertig ist. Also endlich, unsere Anwendung, werden wir fertig sein. Ich weiß, dass Android Studio manchmal viel Zeit in Anspruch nehmen kann. Ja, es ist erledigt. Jetzt lassen Sie uns erstellen. Erforderlich, um ein Bild zu komprimieren. Es wird eine zukünftige Funktion sein, die als Datei zurückgegeben wird. Also jedes Limit komprimieren Bild. Und wir müssen eine Datei Daten senden , während Definition aufruft, denn zumindest durch diese Datei werden wir wissen, welches Bild komprimiert werden soll. Jetzt muss ich native Bildfunktion schreiben. Dafür. Gehen Sie einfach zur Spezifikationspunkt-YAML-Datei und kopieren Sie sie. Fügen Sie es ganz oben ein. Wenn es noch Adder zeigt. Was wir tun können, ist, dass wir zu unserer Pub Spezifikation YAML Datei gehen und dann einfach so speichern können , so dass es tut, es hat wieder versucht, die erforderlichen Pakete zu bekommen. Und jetzt ist C weg. Also in dieser komprimierten Datei, Lassen Sie uns schreiben warten, brauchen div.com Bild. Und hier muss ich den Aktenteil senden. Und dann diese Qualität, das ist der Prozentsatz, den ich diese Schulden reduzieren möchte, ist 50 Prozent ich möchte. Und wenn Sie komprimierte Bild haben, können Sie sehen, es gibt uns eine zukünftige Datei. Also werde ich einfach phi schreiben. Komprimierte Datei ist gleich wie folgt warten. Und danach werde ich die ursprüngliche Dateigröße drucken. Das ist Originalgröße. Diese Datei Punkt nan sinken. Und ich werde Sabrina so eine Brustgröße haben. Komprimieren Sie file.com, finden Sie Land. Und schließlich geben Sie unsere komprimierte Datei zurück. Dies wird also ein zukünftiger Dateidatentyp sein. Okay, diese Arbeit ist erledigt. Jetzt müssen wir einige Änderungen in unserem Upload-Bild vornehmen. Hier. Nach dieser Akte. Nach der Datei komprimiert. Komprimierte Datei ist gleich warten. Und rufen Sie eine andere Funktion von hier aus auf. Ich meine einfach ein komprimiertes Bild und senden Sie diese Datei. Und nachdem wir unsere Firebase-Referenz hier machen, werde ich diese Datei ablegen, nicht die andere Datei. Jetzt lass es uns retten. Jetzt testen wir, ob es funktioniert oder nicht. Wenn ich auf Galerie klicke und nehme an, wählen Sie diese Datei, die normalerweise vier KB ist. Mal sehen, ob es komprimiert wird oder nicht. Hier können Sie die Originaldateigrößen 34 sehen und komprimieren war uns nur 10. Es gibt also einen großen Unterschied. Wenn wir diese Kompression verwenden. Wenn eine Aktualisierung unserer Debug-Konsole, wir können überprüfen, ob es ist, ob es funktioniert hat oder nicht. Sehen Sie, es waren 30, 40 KP, aber jetzt ist es nur 10. Und es sieht schön aus. Aber so wird Kompression gemacht. Nun die nächste Sache, das nächste Thema, das wir diskutieren werden, ist, was ist Cash-Netzwerk-Image, das Caching ist? Jeder weiß also, dass Bilder ein wesentlicher Bestandteil moderner Apps sind. Da die Bandbreite kostspielig ist, kann das Zwischenspeichern von Bildern das Herunterladen des Bildes vom Server jedes Mal verhindern , wenn der Benutzer es auf dem Bildschirm ansieht. Caching ohne so verbessern die Benutzererfahrung, wenn unsere Flanke, weil es die lokale Cache-Kopie verwenden wird , ohne zu versuchen, erneut aus dem Internet herunterzuladen. Doch in diesem Tutorial werden wir das zwischengespeicherte Netzwerk-Image-Paket verwenden, um Input-Bilder zu finanzieren und zu disziplinieren. Die Sache ist beim ersten Start, die App zeigt eine Platzhalter Größe so nah wie möglich an das endgültige Bild zu passen und Übergang, wenn echte Bilder geladen werden. Und danach wird es sofort zu diesem Gerät vor Ort gefangen. Dann wird das nächste Mal, wenn das Bild benötigt wird, dieses Paket es aus dem lokalen holen, anstatt aus dem Internet herunterzuladen. Das ist also das Paket R. Dies ist diese Abhängigkeit, die ich verwenden werde. Lass uns gehen und es installieren. Sie müssen einfach Cache-Bild schreiben. Also denke ich, ich sollte ich das Netzwerkbild einlösen, das ganze Team. Und der erste ist, was wir brauchen. Kopieren Sie es einfach, fügen Sie es in das Spektrum des Jemen ein. Jetzt ist es an der Zeit, dass wir auch Image-Caching implementieren. Da müssen wir einen Platzhalter zeigen, während wir Bilder holen , wenn CAS-Netzwerk verwenden, welches Plug-in. Dieser Platzhalter kann von jedem Widget wie Text, kreisförmig, Fortschrittsanzeige, et cetera sein. Aber ich bevorzuge es das AMI-Bild als Platzhalter. Also einfach, ich gehe zum Browser und dann zu den Bildern und schreibe Platzhalterbild. Und danach werde ich einfach eines der Bilder herunterladen. Angenommen, ich mag diesen hier. Das werde ich sagen, weil ich keinen transparenten Hintergrund möchte. Also dieser hier, ich werde es einfach speichern und es nennen, einen Platzhalter finden. Ok? Es wurde jetzt heruntergeladen, da es eine Säure ist. Also müssen wir es in unserem YAML erwähnen. Davor. Geh einfach in das Verzeichnis. Und im Stammverzeichnis, erstellen Sie einfach einen Ordner namens images. Wir werden das heruntergeladene Bild kopieren und einfügen. Dieser wird nur zu den Bildern gehen und eingefügt herunterladen. Und um sicherzustellen, dass es sein wird. Aktualisiert in unserer überfluteten Anwendung, müssen Sie zu Pub Spec Dot YAML Datei gehen. Im Folgenden haben wir diese Vermögenswerte, die kommentiert wird. Wir müssen es nur entfernen und sicherstellen, dass Sie nur zweimal Rücktaste tippen, weil diese Datei bereit ist, Groß- und Kleinschreibung zu beachten. Und ich werde einfach schreiben, dass wir im Stammordner haben wir diese Bilder. Das war's. Jetzt akzeptiert dieser gecachte Bild-Login Trip Amateure. Eine ist die Bild-URL, die diese URL des Bildes, das zwischengespeichert werden muss. Zweitens ist Platzhalter. Dies ist dieses Widget und der greift den Raum, bevor das Bild geladen wird. Und das Ziel ist jeder Editor Widget Adder, den wir getan haben, wird angezeigt, wenn es eine Bearbeitung, die dieses Bild herunterladen. Also lasst uns gehen und umgesetzt. Als erstes werde ich nur Cash-Networking importieren, die ganz oben. Mal sehen. Sie sollten keinen Editor zeigen. Ok. Jetzt, unten in der Zukunft werden wir in diesem Kind lernen. Anstatt amazed.net Networking-Image zu schreiben. Bild-URL wird dies sein. Aber die anderen Eigenschaften, wie ich bereits erwähnt habe, gibt es einen Platzhalter , der eine Funktion mit Kontext und der URL ist. Und ich beziehe Bild, Punkt-Set-Bilder. Platzhalter dot JPEG Lassen Sie uns überprüfen, ob es die Datei Bilder, die Platzhalter Punkt JPEG. Und im Editor-Widget werde ich einfach zeigen. Ich werde einfach zeigen. Ich kann, ich kann Adder anfangen. Das war's. Nichts viel für hier. So implementieren wir Cache-Netzwerk-Image. Jetzt möchte ich teilen, zeigen Sie die Ausgabe, was und warum wir dies verwenden. Also, jetzt, wenn es geladen wird, warten Sie nur für ein paar Sekunden und sehen, dass es geladen wird. Und natürlich bekommen wir diesen Fehler nur aus diesem Grund, dass wir unsere Anwendung nicht gestartet haben. Lass es uns tun. Klicken Sie einfach auf und starten Sie dann erneut das Debuggen. So haben wir unsere Anwendung läuft. Jetzt sehen wir, ob das Gash-Netzwerk-Image funktioniert oder nicht. Schauen wir uns mal an und sehen, das ist es , wovon ich gesprochen habe. Und, und der Übergang war so glatt. Dies ist also nur ein Platzhalter oder Sie können eine Art von Effekt sagen, dass der Benutzer Feedback erhält und er darauf wartet, dass die Daten ausgelöst werden. Dies ist also eine Verwendung von Cash-Netzwerk-Image. Und jetzt zum zweiten Mal, wenn wir aktualisieren, werden diese Daten nicht aus dem Internet abgerufen. Es wird aus dem zwischengespeicherten verwendet, das bereits dort ist. Und deshalb ist es so schnell. Beim ersten Atom. Es sieht eine posteriori Sekunde jetzt nur 1 Sekunde. Ich hoffe, Sie haben in dieser Sitzung viel gelernt, weil Komprimierung und Caching zwei wichtige Themen sind, während Sie jede Art von Datei-Upload verwenden. Das war's also für dieses Video. Danke. 21. Video 83 Hochladen von mehreren Bildern: Hi. Bis jetzt haben wir nur ein einziges Bild hochgeladen. Aber heute werden wir lernen , wie man auch mehrere Bilder hochlädt. Weil es möglicherweise Szenarien gibt, in denen der Benutzer mehrere Bilder hinzufügen möchte und seine Zeit nicht verschwenden möchte. Wählen Sie einfach ein Bild aus und laden Sie dann hoch und warten Sie dann. Dies ist ein sehr langer, langwieriger Prozess. Also sollte v in solchen Szenarien immer für mehrere Bilder sein . Zunächst lösche ich diese vorherigen Bilder einfach. Dann zeige ich dir noch einmal, wie du sie zusammen auswählst und dann hochlädst. Jetzt erstellen wir hier eine dritte Schaltfläche, die besagt, dass es sich um mehrere Bilder handelt, sodass wir drei Optionen haben. Nur für unsere Referenz machen wir das so. Gehen wir zu unserem Bildschirm zum Hochladen von Bildern. Dann haben wir die Kolumne hier. Dann ist das erste die Reihe. Und unter der Reihe werde ich eine große Box haben. Es sollte Größe Box und dann eine Höhe von 30 sein. Dann habe das Button-Symbol hier erhöht , das ich wählen kann. Ich kann Bild punkten und beschriften würde mehrere Bilder wie dieses sein. Okay? Danach werde ich diese Höhe nur ein bisschen weniger machen. Und dann rette es. Schauen wir es uns an. Siehst du, wir haben auch diese Schaltfläche für mehrere Bilder. Lassen Sie uns nun diese Änderungen vornehmen oder lassen Sie uns eine neue Funktion erstellen , die mehrere Bilder enthält. Ergebnis unter diesem ausgewählten Bild, das Bild hochladen ist, ich erstelle nur eine neue Funktion. Es wird eine Leere zurückgeben und es nennen. Lade mehrere Bilder hoch. Sagen wir mal. Erstellen Sie nun erneut eine Picker-Bildauswahl. Damals hatten wir früher diese EXE-Datei. Aber im Moment werden wir eine Liste von x Phi haben. Weil wir mehrere Bilder bekommen , die in einer Liste erscheinen werden. Wie große Bilder gleich erwarten. Kommissionierer. Wähle mehrere Bilder aus. Hier sehen Sie, dass unsere Bildauswahl uns mehrere Optionen bietet. Wir können Bild auswählen, wir können mehrere Bilder auch Video auswählen. Im Moment liegt unser Fokus darauf, mehrere Bilder auszuwählen. Danach prüfen wir einfach, ob es nicht null ist. Das bedeutet, dass der Benutzer nicht zurückgegangen ist. Wenn es null ist, gebe ich einfach null zurück. Wenn nicht, setze ich den Status auf „Laden“ auf „true“. Dann durchforste ich all die ausgewählten Bilder. Also schreibe ich einfach Future dot für jeden. Dann wird die Zukunft so sein. Das heißt, wir müssen das durchlaufen. Und davon kriegen wir X-Files. Und ich nenne es einfach Bild. Dann machen wir es zu einer Sinc-Funktion. Hier. Hier müssen wir tun, wir müssen diese Bilddatei hochladen. So ähnlich wie im Upload-Bild wie der Dateiname und die Bilddatei. Ich mache das Gleiche hier. Ich schreibe einfach. Der Zeichenfolgenname entspricht dem Namen des Bildpunkts. Und dann ist jede Ebene von Phi Image Phi gleich dem Dateibild. Aber im Moment komprimiere ich das Bild nicht , weil wir bereits wissen, wie es geht. Im Moment liegt mein Fokus darauf, sicherzustellen, dass unser Kinn und unser Kinn funktionieren. Versuchen wir einen Catch Block. Wenn sie „print“ sagen. Und bei diesem Versuch mache ich einfach unsere Firebase-Speicherreferenz, Namen, die Punktdatei und jetzt unsere Image-Datei so. Und danach ist für jedes Looping fertig. Erst danach setze ich diesen Status erneut und lade auf „false“. Und dann zeige ich einen Schal, der ein Snack-Teil des Bildes ist ein Snack-Teil . Dieses Bild wird hochgeladen. Sex ist nur so. Okay? Unsere Funktion ist bereit. Jetzt. Los geht's und auf Knopfdruck führen wir es aus. Das heißt, unser Hintern ist da. Ich führe es einfach so aus. Sparen und probieren wir es aus. Wenn es funktioniert. Genial, ich habe gelesen, ist da? Ich klicke drauf. Ist da. Ich wähle diese beiden Bilder aus und klicke dann auf Öffnen. Silber wird geladen. Ist da. Alle Bilder wurden erfolgreich hochgeladen? Und wir haben unser Image bekommen. Definitiv funktioniert es auch in der Firebase. Diese werden hochgeladen. Wir können von hier aus nur sehen, dass es erfolgreich abgerufen wird. So implementieren Sie mehrere Images im Firebase-Speicher. Das war's. Wir haben alles über das Hochladen von Bildern und wie man Daten zwischenzwischt, wie man sie komprimiert, viel gelernt. Im nächsten Video werden wir diese Funktion auch in unserer Node-App implementieren . Danke. 22. Video 84 Image in der Note: Willkommen zurück. Jetzt haben wir gelernt , Firebase-Speicher zu verwenden. Es ist an der Zeit , dass wir dieselbe Funktion auch in unserer Node-Anwendung implementieren . Diese Anwendung mit sehr merkwürdigem Aufbau bis jetzt sowohl in der Authentifizierung als auch in einem Firestore Bereich. Lassen Sie uns zuerst den Startbildschirm in main.out zum Einstiegsbildschirm machen . Also Schulden, wir können unsere App sehen. Lassen Sie uns nun eine Funktion erstellen, um Bild auszuwählen und es dann in der Vorschau anzuzeigen, bevor Sie die Datei hochladen. Basierend in den vorherigen Abschnitten haben wir erfahren, dass wir das Bild gerade hochladen , indem wir auf eine Schaltfläche klicken. Aber jetzt lernen wir, wie man ein Bild auswählt. Dann kann der Benutzer die Vorschau sehen, was er ausgewählt hat. Und wenn wir auf die Schaltfläche „Senden“ klicken, wird nur dieses Bild in den Speicher hochgeladen. Wechseln Sie zum Bildschirm „Knoten hinzufügen“. Hier. Lassen Sie uns ein paar Variablen erstellen. Zuerst wird eingereicht. Das ist eine Image-Datei. Am Anfang wird es null sein. Und zweitens wird String sein , der Dateiname sein wird. Und am Anfang wird es auch keine sein. Wir wissen bereits , dass diese beiden benötigt werden , wenn wir ein Bild hochladen. Jetzt erstellen wir die Funktion. Funktion ungültig. Nennen Sie es. Bild hochladen. Es wird eine Synchronisierung sein. Dann müssen wir zuerst eine Instanz des Bildauswahl-Plugins erstellen . Dann haben wir unser x phi großes Image gleich erwarten. Kommissionierer. Wähle ein Bild aus. Source wird der Quellpunkt-Cadre emittiert. Als wenn wir Bilder auswählen, werden sie offensichtlich durch die Galerie gehen. Dann haben wir eine if-Anweisung, in der wir prüfen werden , ob sie null ist oder nicht. Wenn es nicht nur von hier zurückgegeben wird , führt bekannt, dass dieser andere Code ausgeführt wird. Wenn nicht, werden wir nur sagen, dass Statusdatei Name nach Namensvariable dem Bildpunktnamen entspricht und das Bild phi gleich Datei und Bild ist.Alles Teil. Hier werden wir diesen Wert dieser Variablen zuweisen. Und du denkst vielleicht darüber nach, warum ich diese Variable hier geschrieben habe und nicht innerhalb der Funktion. Ich, weil ich diese Variable auf dem ganzen Bildschirm verwenden möchte . Das heißt, ich möchte eine Schaltfläche „Bild hochladen“ erstellen. Wir nehmen einen ternären Operator, so dass ein Bild anstelle der Schaltfläche angezeigt wird, wenn es nicht null ist. Und wenn es null ist, das heißt, wenn der Benutzer kein Bild ausgewählt hat. Zeigen Sie in diesem Szenario die Schaltfläche Hochladen an, nicht das Bild. Lass uns gehen und mal sehen , wovon ich rede. Hier. Bei diesem Kind haben wir eine Kolumne in dieser Kinder ganz oben. Lasst uns einen Container haben. Die Behälterhöhe sollte 150 betragen. Dann werde ich in diesem Schüchtern zwei Dinge haben. Das erste ist, wenn die Bilddatei gleich null ist, dann zeige ich ein Zentrum. Und in der Zelle wird es eine Ikone geben. Es wird, ich kann anfangen, Bild sein. Die Größe wird 100 sein. Und wenn nicht, gibt es dennoch einen gewissen Wert. Ich werde nur, ich zeige dann ein Bild , das Image.All ist. Und jetzt zeige ich die Datei , weil sie in dieser Datei gespeichert ist. Hier sage ich einfach eine Bilddatei wie diese. Und es zeigt, dass dies null sein kann. Also gehe ich einfach und tippe diesen Nullcheck ein. Das heißt, Ufer sorgen dafür , dass dies nicht null ist. Und unter dem Container haben wir eine Größenbox. Größte Schachtel mit Höhe. Jetzt probieren wir es aus, ob es funktioniert oder nicht. Um es zu sehen. Da es null ist, zeigt sich unsere Ikone und es sieht sehr gut aus. Wenn ich jetzt darauf klicke, tut mir leid, wenn ich darauf geklickt habe, muss ich diesen Container mit einem Widget namens Inkwell umwickeln . Und hier in der Tab-Funktion schreibe ich Upload-Bild. Dies ist offensichtlich ein sehr wichtiger Schritt. Lassen Sie uns nochmal nachsehen , wann ich darauf klicke. Siehst du, das ist da. Wenn ich nun auf dieses Symbol klicke, sehen Sie, dass es in der Vorschau angezeigt wird. Im Moment wird es also nicht auf Firestore hochgeladen, es ist nur eine Vorschau. Jetzt ist dieser Teil fertig. Nehmen wir nun die Änderungen vor, damit wir hinzufügen können, wenn Notiz hinzufügen abgespielt wird, dann wird das erste Bild hochgeladen und dann werden diese Daten in Firestore mitgeteilt. Also hier im On-Premise haben wir das. Wenn sonst, füge ich in der ersten Bedingung einfach eine Bilddatei hinzu. Wenn es null ist, dann schreibe nur Alpha. Es ist angemessen. Aber weil ich möchte, dass das Bild gefüllt wird. Jetzt im Anderen. Lass es uns versuchen. Lassen Sie uns als Erstes unsere Firebase-Speicherinstanz als in der Referenz erstellen . Und der Verweis wird Dateiname sein. Dann lege die Datei ein. Und wir haben unsere Image-Datei. Hier. Auch hier müssen wir null machen, da ein Fehler angezeigt wird , dass die Datei null sein kann. Aber wir schreiben diesen Ausruf einfach , damit wir sicherstellen, dass die Datei nicht ausreicht. Und offensichtlich haben wir auch hier den Null-Check durchgeführt. Nachdem diese Datei ausgeführt wurde, möchte ich diesen Punkt einfach hinzufügen. Dann. Hier bekomme ich das Ergebnis zurück. Innerhalb dieses Ergebnisses gebe ich einfach Resultat Dot, Ref, Dot Download-URL zurück , da wir diese URL benötigen, damit sie in unserer Firestore-Datenbank mit all diesen Informationen gespeichert wird in unserer Firestore-Datenbank mit all diesen Informationen gespeichert . Wenn wir es zurückgeben, werde ich es hier erwischen. Ich schreibe einfach ein Bild. Es ist schon eine Schnur. Bild-URL ist demnach. Und danach möchte ich, wenn wir einen Knoten einfügen, wir möchten, dass diese Bild-URL ebenfalls gesendet wird. Also hier werde ich zuerst die Bild-URL ausdrucken und speichern, weil ich überprüfe, ob sie funktioniert oder nicht. Bis hier. Ich gehe hier hin, ich wähle aus, ich wähle diese Bilder hier aus. Ich schreibe sie einfach oder flattern. Ich lösche es später. Und eine Beschreibung wie diese und füge einfach Notizen hinzu. Und im Druck können wir sehen, dass etwas im Firebase-Speicher gespeichert ist. Das bedeutet, dass es gut funktioniert. Was ich jetzt will, ist, wenn wir einen Knoten einfügen, möchte ich, dass dieser Wert ebenfalls gesendet wird. Es ist eine Bild-URL wie diese. Und offensichtlich wurde es in unserem Insert-Node in diesem Parameter nicht erwähnt. Also werde ich es hier einfach erwähnen, wie String Image. Und dann werde ich einen neuen Wert von Bild hinzufügen, Bild wie dieses. Okay? Da wir unsere Knotendaten ändern, müssen wir auf jeden Fall zu unserer Modellklasse gehen und sie auch hier ändern. Also hier schreibe auch einfach String-Image. Dann haben wir hier dieses Punktbild benötigt. Und dann im Modell hier, richtig, Snapshot Here, Bild. Weil dies eine sehr wichtige Sache ist. Lassen Sie uns nun das Knotenbild zeigen, das ist auch ein Knoten mit allen Bildern hier. Zuerst lösche ich alle Daten, die bereits vorhanden sind, weil es ein hinzugefügt wird. Ansonsten. Lassen Sie uns alles im feuerbasierten Speicher löschen. Ja. Lösche beide. Und auch im Lager. Ich möchte alles löschen und möchte einfach mit allem Neuen beginnen. Lass uns gehen und ich zeige es. Aber vorher nehmen wir diese Änderungen an unserem Listenstil auf dem Startbildschirm vor. Wenn wir gehen, haben wir diesen Listenstil hier. An der Spitze. Sagen Sie einfach Gast-Netzwerk-Image. in die Bild-URL Schreiben Sie in die Bild-URL einfach das Knotenpunktbild wie folgt. Und das fügte starr hinzu. Das heißt, wir haben unser Cash-Network-Image. Hier. Ich habe die Bild-URL so. Dann wird Platzhalter Kontext sein. Du bist drin. Und ziehen Sie einfach den Bildpunktsatz und Bilder Slash Platzhalterpunkt JPG. Und in diesem hinzugefügten Widget schreibe ich wieder einfach Kontext, in dem Sie sich befinden. Und dann schreibe ich stattdessen ein Icon hier. Und hier wird eine weitere Pandemie hinzugefügt. Okay? Und nach dem Pfeil, genau wie die Breite von 70 zu diesem Bild und die Passform der Boxfüße bedecken. Okay, wir haben den ganzen Code DD. Testen Sie jetzt unsere Anwendung. Lasst uns punkten. Anfangs haben wir keine Notizen. Lass uns gehen und füge unseren ersten ein. Und wir schreiben einfach Steve Jobs Biografie über seine großartige Erfolgsgeschichte. Mal sehen, hier. Wir haben auch das Bild. Davon habe ich gesprochen. Wenn wir eine weitere hinzufügen, die Firebase ist, werde ich einfach schreiben, lernen, Firebase, Firebase, auch Back-End-Dienste beherrschen. Und dann rette es. Und sehen Sie hier auch die Brandrisiko-Bilder. Und deshalb habe ich diese Breite erwähnt, weil ich möchte , dass alles richtig ausgerichtet ist. Das ist auch alles für dieses Modul. Danke, dass du beigetreten bist. Wir haben viel über Firebase gelernt und lasst uns Produkte. Danke.