Lerne die Rest-API in Flutter zu handhaben - Android & IOS

1. KURSEINFÜHRUNG: Bearbeitung von Netzwerkanfragen und die Integration von APIs ist eines der Probleme, mit denen Flatter-Anfänger konfrontiert sind. In diesem Kurs werden wir eine normale Einkaufsanwendung erstellen, die eine Liste von Produkten anzeigt , die über das Internet abgerufen werden, in unserer flacheren Anwendung wird feste oder APA integriert. Zu diesem Zweck handelt es sich eine kostenlose Online-Rest-APIs , die wir jederzeit verwenden können , um dies für unsere E-Commerce-App zu berücksichtigen , ohne über einen eigenen Backend-Server zu verfügen. Darüber hinaus erhalten wir beim Umgang mit APIs möglicherweise eine große Anzahl von Daten, die zahlreiche Felder haben können. Und so ist es besser, jeden einzelnen Jason in Dart-Objekte umzuwandeln . Dieses Konzept wird als json-Parsing bezeichnet, auf das wir später auch eingehen werden. Also ohne weitere Zeit zu verschwenden, fangen wir an. 2. Was ist Http-Anfrage: Hallo, willkommen zurück zum neuen Video. In diesem Modul werden wir darüber sprechen, wie Rest-API-Aufrufe in Florida implementiert werden können. Wenn Sie Apps entwickeln möchten , die Daten aus dem Internet abrufen, müssen Sie wissen, wie Sie Netzwerkanfragen stellen und wie die Antworten richtig behandeln. wird es auf jeden Fall Wenn Sie also eine reale Anwendung erstellen, viele Szenarien geben, in denen Sie Daten vom Server abrufen müssen oder die Hilfe einiger APIs in Ihrem Anwendung. Ob es verwendet wurde API oder Google API oder was auch immer. In diesen Szenarien müssen Sie wissen, wie Sie mit APIs effektiv umgehen können. Jetzt stellt sich die Frage, was ist eine Netzwerkanfrage? Einfach ausgedrückt, wenn Sie eine App wie WhatsApp, Instagram oder Twitter auf Ihrem Smartphone öffnen . App, versucht, die neuesten Daten von einem Remote-Standort abzurufen , rufen Sie normalerweise diesen Server auf. Server ist ein zentraler Ort , an dem die meisten Benutzerdaten gespeichert werden. Die App, die Sie verwenden, wird als Client bezeichnet. Es gibt also zwei Begriffe, die als Server und Client bezeichnet werden. Client ist die Anwendung, und das ist unabhängig von der App oder Android- oder iOS-App, die Sie verwenden. Und Server ist die Datenbank, die an einem entfernten Ort gespeichert ist. Das ist also ein sehr grundlegendes Konzept. Was ist eine RESTful API? Der Rest steht für Repräsentative Staatstransfer. Es ist eine Anwendungsprogrammschnittstelle, die API ist, das ist diese HTTP-Anfrage zum Abrufen oder Senden von Daten zwischen Computern. Denken Sie also daran, dass die Kommunikation zwischen einem Client und einem Server hauptsächlich über RESTful APIs erfolgt. Das war's. Die grundlegendste Form der realistischen Methode ist eine URL, die der Client verwendet, um eine Anfrage an den Server zu stellen. Wenn Sie also APIs oder ein Essen sehen, erhalten Sie eine URL, die Sie die Anfrage senden mussten. Das heißt, Sie müssen diese bestimmte URL drücken. Und nach Erhalt einer erfolgreichen Anfrage überprüft der Server den Endpunkt der URL, führt einige Verarbeitungen durch und sendet die angeforderten Daten zurück an den Client. Das ist also eine sehr einfache Art zu erklären, definitiv in dieser technischen Kernsache, es mag auch ein wenig komplex sein, aber Sie müssen sich nur daran erinnern, dass wir eine Anfrage an den Server senden werden der Server wird uns einige Daten geben. Das war's. Jetzt gibt es verschiedene Methoden , die Sie in einer Rest-API verwenden. Es gibt also viele von ihnen, aber die am häufigsten verwendeten sind 4. Das erste ist GET-Anfrage. Es bedeutet einfach, dass Sie einige Daten aus einer entfernten Datenbankanforderung mithilfe von „Nur Abrufen von Daten abrufen“ abrufen möchten , was bedeutet, dass sie unter diesen bestimmten Daten keine anderen Auswirkungen haben . Das heißt, Sie werden einfach die Daten lesen. Mit der GET-Anfrage können Sie nichts ändern. Keine Anfrage posten. Post-Anfragen sendet Daten an diese spezifische Ressource. Sie verwenden die Methode, um Daten wie Kundeninformationen oder Dateiuploads an den Server zu senden . Denken Sie also indirekt daran , wenn Sie etwas vom Client zum Server senden etwas vom Client zum und auf dem Server speichern müssen. In diesem Szenario verwenden Sie die Post-Anfrage. Der dritte ist verspätet. Es tut also, was es sagt, dass es die spezifische Ressource vom Server löscht . Und der vierte wird gesetzt, das heißt ersetzt, oder Sie können sagen, aktualisiert alle aktuellen Repräsentationen der Zielressourcen. Das bedeutet, dass Sie bereits einige Daten an den Server gesendet haben , aber später diese spezielle Feldprüfung aktualisieren möchten, insbesondere von Daten wie Alter oder Telefonnummer. In diesem Fall verwenden Sie also die PUT-Anfrage. Es handelt sich also definitiv um eine Patch-Anfrage und noch ein paar mehr. Wenn Sie mehr über alle Anfragen erfahren möchten , können Sie sie einfach googeln. Aber die meiste Zeit , wenn Sie eine Anwendung erstellen, arbeiten Sie damit auf Anfrage. Jetzt im Flattern, auf jeden Fall, wenn Sie etwas tun wollen, müssen wir diese Abhängigkeit bekommen. Also für die HTTP-Anfrage gibt es auch eine Abhängigkeit, die als HTTP-Paket bezeichnet wird. Hängen Sie einfach Ihren Browser an, gehen Sie zu dev und geben Sie einfach http ein. Und dann denk daran, diesen auszuwählen. Das ist von dem Dart-Team selbst. Ja, scrollen Sie nach unten und kopieren Sie diese Abhängigkeit. Und in Ihre Anwendung können Sie es einfügen. Denken Sie daran, wenn Sie ein neues Projekt erstellen möchten, können Sie es auch jetzt tun Ich verwende unser vorheriges Projekt, aber ich werde diese vorherigen Codes entfernen. Wenn du willst, kannst du das Video einfach pausieren und Florida schreiben, ein neues Projekt erstellen und von vorne beginnen. Es liegt an dir. Unser Letter Pub Get läuft. Es wird die Abhängigkeit bekommen und ja, es ist geschafft. Jetzt ist unsere HTTP-Abhängigkeit installiert. Das nächste, was ich tun werde, ist die vorherigen Dateien zu entfernen. Und jetzt werde ich im Ordner mid lib neue Ordner erstellen, wie der erste grün ist und der zweite der Dienste-Ordner. Und innerhalb des Bildschirms werde ich Home Dot Dot- und Insights-Services erstellen . Ich erinnere mich, dass ich APIs service dot dot erstellen werde. Also einfach, was ich getan habe, ist, dass ich unsere Codes sauber organisiert habe. Es ist so, als ob sich alle Screens im Screens-Ordner befinden würden. Alle API-Dienste, bei denen es sich älteren serverseitigen Code handelt oder was auch immer mit der API interagiert, befinden handelt oder was auch immer mit der API interagiert sich im API-Servicepunkt. Auf diese Weise haben Sie eine Trennung von Code und Sie erhalten dieses MVC-Modell, das auch Model View Controller-Muster ist. Es ist eine gute Praxis. Das tust du nicht, du willst nicht alle deine Codes zufällig und in nur einer Datei schreiben . Langfristig wird es für Sie sehr schwierig sein, sie zu organisieren oder zu debuggen. Das war's. Wir haben verstanden, was STDP ist, welche Methoden sich unterscheiden und wie das HTTP-Paket in unserem Projekt installiert wird. In der nächsten Sitzung werden wir einige echte APIs verwenden und diese APIs mithilfe dieser GET-Anfrage aufrufen. Danke. Wir sehen uns im nächsten Video. 3. Implementierung von GET-Anforderung auf einen Server: Hi. In dieser Sitzung werden wir eine echte Rest-API mit dem Namen fixed oder APA verwenden. Im Internet erhalten Sie viele APIs, aber wir werden eine Dummy-API verwenden, damit sie kostenlos verwendet werden kann. Und wir können machen, was wir wollen. Mit dieser API. Wir können ein paar gefälschte E-Commerce-Daten bekommen. Das heißt einfach, wenn Sie Produkte, Kategorien, Benutzer oder was auch immer erhalten möchten Produkte, Kategorien, , können Sie diese von diesem APM erhalten. Bringen Sie Ihren Texteditor mit, während Sie Ihren Browser aufrufen, und geben Sie einfach fixed oder APA ein. Und der erste, der auftaucht, musst du darauf klicken. Die URL lautet gefälschte Shop-API.com. Also ja, das ist es. Sie müssen kein Konto oder irgendetwas erstellen , um es zu verwenden. Dies sind die Ressourcen, die es uns Produkte zur Verfügung stellt. Es gibt uns die Armee gefangen, es gibt uns Benutzer und Login-Token. Und diese anderen Wege. Das heißt, ich habe über Nike gesprochen. Es gibt URLs und Pods. Man kann Endpunkte sagen. Sie müssen eine Anfrage senden. Das sind also die Endpunkte. Also einfach, wenn ich darauf klicke, siehst du oben, dass du gefälschte Shop-API.com Slash-Produkte sehen kannst . Dies ist die URL, und wenn Sie auf diese URL klicken, erhalten Sie diese Antwort. Es ist also in diesem JSON-Format. Es hat einen ID-Titel, dann Beschreibung, Bild, Preis. Das sind also die Daten, die es uns geben wird, und wir werden diese Daten in unserer Benutzeroberfläche verwenden . Denken Sie also daran, dass Sie nach Abschluss dieser gefälschten Shop-API die Nachrichten-API Blog-API haben können. Es gibt viele andere APIs. Wenn du willst, kannst du es selbst ausprobieren. Aber fangen wir mit der APA dieser Woche an. Das erste, was wir tun müssen, ist eine Funktion zu erstellen, die diese GET-Anfrage bearbeitet. bedeutet einfach, dass diese Funktion mit der API interagiert. Von nun an werden wir die API-Dienste schreiben, das sind alle Dienste, die sich auf APIs beziehen. In dieser separaten Datei. Wir wollen nicht alles in die Benutzeroberfläche schreiben. Lassen Sie uns zunächst einfach das HTTP-Paket importieren. Das ist die Art und Weise, wie man es macht. Dann erstelle ich einfach die Klasse des API-Dienstes. Diese Klasse können wir überall in unserer Anwendung verwenden, indem ein Objekt erstellen und diese Funktionen dann direkt aufrufen. Jetzt ist die erste Funktion, die wir erstellen, GET oder post. Es wird also eine Synchronisation sein. Jetzt müssen wir zuerst die URL schreiben. Die URL lautet diese. Sie können die URL einfach von oben abrufen. Sie kopieren es einfach und fügen es hier ein. Um nun eine GET-Anfrage mit diesem HTTP-Paket zu senden, können Sie die Zeichenfolge nicht direkt senden. Sie müssen es in URI-Balken konvertieren. Und drin. Sie müssen Yard und Point erwähnen. Das ist die Methode oder so wird es gemacht. Du erinnerst dich einfach daran. Definitiv. wirst du dich gewöhnen. Jetzt. Jetzt haben wir die URL, auf die wir klicken müssen, um die Anfrage zu senden. Jetzt ist es soweit. Wir erhalten das Ergebnis, das das HTTP-Paket verwendet. Es ist der Punkt. Und dann können Sie sehen, dass es viele Anfragen gibt, die einen Post-Patch erhalten. Aber wir wollen diese GET-Anfrage. Und darin schreiben Sie einfach die Produkt-URL. Okay? Du musst es zurückgeben. Jetzt. Sie können den Statuscode des Ergebnisses ausdrucken. Wenn es 200 sind, haben wir diese Antwort erfolgreich erhalten. Wenn es 404 ist, dann existiert diese Seite nicht. Und wenn du willst, kannst du auch einfach benennen. Es. Reagiert wie möglich mit Namen, nur Sie können verstehen, dass diese Variable die Antwort der GET-Anfrage hat. Und schließlich müssen Sie diesen Antworttext in diesem JSON-Format zurückgeben . Also wirst du einfach, richtig Jason, du musst diese Datenkonvertierung importieren und wir schreiben einfach json dot, decode und response.body hier. Damit ist unsere Funktion oder Methode abgeschlossen. So senden wir eine Anfrage zum Abrufen. Sie können also einfach sehen, als Erstes eine URL zu schreiben. zweite bestand darin, die Antwort mit dieser http.get-Antwort zu erhalten. Und nach diesem STDP-Abruf können wir den Antworttext an die Benutzeroberfläche zurückgeben , die diese Funktion aufruft. Okay? Der nächste Teil ist also die Anzeige dieser Daten auf unserer Homepage. Einfach in home dot, dot create. Einfache UI-Startseite. Dann ist return falsch. Dan, App. In der App-Leiste. Ich bin gestorben. Dann mache ich zentriert. Title ist gleich true, elevation ist gleich 0. Und ich gebe Hintergrundfarbe als Hintergrundfarbe Punkt roten Akzent. Im Körper. Wir werden Future Builder verwenden , da diese Funktion eine Zukunft ist. Und in Zukunft werde ich einfach API-Antwortpunkt schreiben , alle Beiträge bekommen. Sehen Sie hier, wir haben dieses Objekt dieser Klasse erstellt und rufen einfach diese Future-Funktion auf. Dies ist also das erste Mal, dass Sie eine echte Zukunftsfunktion verwenden. In den früheren Videos haben wir diese Funktion nur ausgeflippt. Aber jetzt ist es eine echte Serverfunktion , deren Ausführung einige Zeit in Anspruch nehmen wird. Im Builder haben wir einen Text und einen Schnappschuss. Wie üblich werden wir ganz am Anfang prüfen, ob ein Snapshot Daten oder eine kreisförmige Fortschrittsanzeige für das Zentrum enthält. Und wenn es vorerst Daten enthält, senden wir nur einen Erfolgstext. Weil ich zuerst die Ausgabe sehen möchte, diese Ausgabe zuerst in der Debug-Konsole. Also lass uns neu starten. Bringen Sie unsere Bewerbung herunter. Sehen Sie, wir haben diesen Erfolg hier, aber in der Debug-Konsole können Sie sehen, dass der Code response.status 200 ist und der Antworttext so ist. Das heißt, es ist eine Liste von Karten. Also in den ersten Daten. Dies sind die ersten Daten. Sie haben also einen ID-Titel, eine Beschreibung. Dies ist im JSON-Format. Um diese Daten hier in der Benutzeroberfläche auszugeben, verwenden wir einfach ein Punkt-Builder-Widget für die Listenansicht. Punkt-Builder-Widget der Listenansicht, dasselbe wie das ListView-Widget. Hier. Diese Daten können unbegrenzt sein. Das heißt, wir kennen die Anzahl der Elemente in dieser Liste nicht . Also schreiben wir einfach die Länge dieser Liste hier. Punktegenerator für Listenansichten hat zwei Parameter. Erstens ist die Anzahl der Artikel und zweitens der Item-Builder. Item Builder ist eine Funktion , die Kontexte hat und dieser Index, Index ist die Position dieses Elements in der Liste , die bei 0 beginnt. Der Index beginnt also bei 0123 bis zur Anzahl der Elemente in dieser Liste minus eins. Denn wenn die Liste fünf Elemente enthält, liegt der Index zwischen 0 und vier. Elementanzahl ist also einfach Snapshot-Punktdaten, Punktlänge, weil Snapshot diese Daten sind. Und wir werden seine Länge verwenden. Denken Sie also daran, wenn wir in Zukunft etwas zurückgeben , wird es diese Zukunft tun. Diese Daten werden in dieser Snapshot-Variablen gespeichert. Okay, jetzt haben wir einen Punktegenerator für Listenansichten. Und im Item Builder müssen wir zurückgeben, was in dieser Benutzeroberfläche starr sein sollte? Das heißt, was sollten wir zum UI-Bildschirm zurückkehren? Und ich werde die Listenkachel zurückgeben. Jetzt schreibe ich einfach in diesem Titel Snapshot-Punktdaten. Dann index das ist, weil es eine Liste ist, wir müssen diesen Index verwenden , der bei 0 beginnt. Das stellt sich vor, dass 0 Verschmutzung diese ist. Okay? Also hier sind wir gerade hier in diesen Daten als diese. Das wird also von hier aus einer sein. Das wird einer sein, ich schätze immer noch hier. Ja. Ja, immer noch hier, es ist der zweite, der der eine Index ist. Also hier werde ich einfach den Titel hier ausgeben. Das ist Checkout. Wenn ich das mache, haben wir einen Fehler oder erhalten wir die Daten? Wir hatten diesen Fehler, okay, okay, tut mir leid. Wir müssen es nur ausschneiden und hier einfügen. Und wenn es keine Daten gibt, geben wir einfach die Fortschrittsanzeige zurück. Es war ein sehr dummer Fehler. Aber diese Dinge passieren. Okay. Jetzt schauen wir nochmal nach. Sieh zu, dass es geladen wird und dann haben wir diese Daten. Und da es sich um eine Listenansicht handelt, kann ich scrollbar sein. Wir haben diesen Rucksack, dünnes Hemd, eine Baumwolljacke und vieles mehr. Wir haben also alle Daten. Und ich hoffe du hast verstanden, wie ich das Jason Ding benutzt habe. Einfach Snapshot-Punktdaten sind diese Liste , dieser ausführliche Listenindex. Ich bin in die Dämmerung 0 gegangen, was das ist. Und von der Position 0 aus habe ich diesen Titelschlüssel ausgegeben, habe ich diesen Titelschlüssel ausgegeben weil ich weiß, dass er sich in der Map im JSON-Format befindet, also muss ich nur diesen Schlüsselwert verwenden. Jetzt mit dem Titel an der Spitze werde ich die Eigenschaft image verwenden. Bild-Punkt-Netzwerk. Dann schreibe einfach hier Snapshot-Punktdatenindex als Bild. Und ich schreibe einfach die Höhe als 5030. Lassen Sie uns jetzt sparen und sehen. Prüfen Sie erneut, ob es ordnungsgemäß funktioniert. Ja. Wir haben die Bilder vom Server. Es ist also das erste Mal, dass Ihre Daten echt sind, dass sie vom Server kommen und Ihre Anwendung ziemlich gut aussieht. Als Nächstes würde ich diesen Untertitel verwenden. Und in diesem Text werde ich den Snapshot-Punktdatenindex verwenden, und dann werde ich diese Preissache verwenden. Und da es sich um eine Ganzzahl handelt, werde ich sie in eine Zeichenfolge konvertieren, C 1091. Aber ich möchte auch ein Dollarzeichen hinzufügen. Und um Dollar zu schreiben. Und man kann dieses Symbol nicht einfach schreiben, weil Florida dafür eine andere Bedeutung hat. Sie müssen also einen Backslash-Dollar wie diesen verwenden. Und ich werde einfach erhöhen Preis ist gleich Backslash Dollar dann plus. Und wenn Sie die Ausgabe überprüfen, sieht sie sehr gut aus. Es sieht ziemlich gut aus. Ich hoffe du hast verstanden. Bis jetzt. Wir haben diese Anfrage zum Abrufen verwendet. Das ist das erste, bei dem wir alle Produkte bekommen. Diese zweite HTTP-Methode oder die Route sind Produkte, dann ein bestimmtes Produkt, was einfach bedeutet, wie Sie diese einzelnen Produktdetails erhalten können. Das ist also auch sehr wichtig. Wenn Sie darauf klicken, können Sie die Ausgabe sehen. Dies ist nur das Detail eines Produkts, das nur ein Produkt ist. Wenn Sie also eine E-Commerce-Anwendung verwendet haben als Sie auf dieses Produkt klicken, eine weitere Seite angezeigt, auf der Sie detaillierte Produktdetails, Produktbilder, Produktkategorie und dann auch in den Warenkorb legen. Um dies erneut verwenden zu können, müssen Sie eine neue Funktion erstellen. Was wird also einfach ein einzelnes Produktdetail sein. Um das einzelne Produktdetail zu erfahren, wie es gemacht wird. Versuchen wir es zu tun. Zuerst. Nach diesem Gitarrenbeitrag kopiere ich das einfach, füge es ein und nenne es, bekomme ein einzelnes Produkt. Und der Variablenname wird ein einzelnes Produkt sein, URL. Und auch diese URL-API ist ID hier. Und auf jeden Fall ist es einzigartig , weil wir nicht wissen , auf welchen Benutzer der Benutzer klicken wird. Also müssen wir ihm die ID senden während wir diese Funktion als Argument aufrufen. Also einfach, das ist der Maktab. Um dieses Detail eines bestimmten Produkts zu erhalten. Alles wird gleich sein. Nur die URL ist jetzt anders und wir senden auch die ID. jetzt im Bildschirmordner Erstellen Sie jetzt im Bildschirmordner einen anderen Dateinamen, den Produktdetailbildschirm. Wenn der Benutzer also auf dieses bestimmte Produkt klickt, sollte er zu diesem Produktdetailbildschirm weitergeleitet werden indem er die ID des Produkts trägt. Also einfach Material eingeben. Dann haben Sie ein statusbehaftetes Widget namens Produktdetail. Und jetzt denk daran, dass es akzeptiert und identifiziert. und wir werden es an den Konstruktor senden. Schreiben Sie jetzt in dieser Rechnungsfunktion einfach ein Gerüst. Dann wieder dasselbe, AB-Bar. Dann färbt innerhalb einer Hintergrundfarbe der rote Akzent ein. Und in ihrem Körper. Wir müssen diesen zukünftigen Builder erneut verwenden , um unsere Funktion der API-Umfragen aufzurufen. Dot erhält ein einzelnes Produkt und diese ID, und diese ID kommt durch den Konstruktor. Im Kontext. Momentaufnahme. Überprüfen Sie dann den Schnappschuss , der Daten enthält Wenn nicht, geben Sie eine kreisförmige Fortschrittsanzeige zurück. Das war's. Nochmals, ich werde einfach den nächsten Erfolg hierher zurückbringen, nur um Ihnen zu zeigen, wie es gemacht wird. Funktioniert es oder nicht? Auf dem Startbildschirm? In der Listenansicht müssen Sie diese Eigenschaft beim Tippen verwenden. Sie werden das senden und den Benutzer zum Bildschirm „Produktdetail“ weiterleiten. Adl füge diesen Code ein. Sie müssen sich nur daran erinnern, wie man Code und all seine sehr grundlegenden Produktdetails pusht . Und in der ID muss man einfach dieser Index sein und dann einfach ID schreiben. Wenn ich es jetzt speichere und auf das erste Element, C, klicke, wird es angezeigt. Und dann können Sie in der Debug-Konsole die Ausgabe sehen. Das ist wieder ID-Titel, dasselbe. Man muss also einfach präsentieren. Verwenden Sie dieses Detail, um diese in der Benutzeroberfläche anzuzeigen, wie wir es auf der Homepage getan haben. also auf dem Produktbildschirm Entfernen Sie also auf dem Produktbildschirm einfach diesen Text und senden Sie einen Behälter zurück. Und der Container gibt ganz am Anfang nur Spielraum. Dann wird das Kind eine Spalte sein , weil es viele Daten gibt. Jetzt ganz am Anfang werde ich dieses Bildpunktnetzwerk haben, als es scheint Punktdaten. Und der Index wird jetzt nicht da sein , weil es statisch eine Map ist, keine Liste. Richtig? Bild als Höhe von 200 und Gewicht von Doppelpunkt-Unendlichkeit, das ist das gesamte Gewicht des Bildschirms. Und dann verwendet zentriertes VJ und ein Kind zeigte den Preis. Also wieder, ich werde Dollars dasselbe verwenden als Snapshot-Punktdaten und versuche, auch etwas zu stylen und etwas Styling zu geben. Jetzt hat der Stil eine Schriftgröße von 25 und eine Schriftgröße. Schriftgewicht, fett. Sparen wir es uns. Hütte. Sehen. Es sieht so gut aus. Nun, was ich tun werde, ist, dass ich oben mit diesem großen Feld einen gewissen Abstand gebe und Typ D Das Bild wird also tödlich sein und zwischen dem Bild und den Preisen werde ich auch geben eine Höhe von zehn, damit wir hier diesen Abstand haben. Und in der Spalte werde ich Main Exists Alignment verwenden, das beginnt. Sie werden in den nächsten Widgets, die wir verwenden werden, wissen, warum ich es getan habe. Aber vorerst haben wir eine sehr schön aussehende Benutzeroberfläche, der alle Produkte auf dem ersten Bildschirm zu sehen sind. Und wenn ich auf dieses Produkt klicke, heißt das Baumwolljacke. Sehen Sie mit dem Bild, dass das Produktbild ist und dass der Preis angezeigt wird. Also das war's. Ich hoffe, Ihnen hat Erstellen dieses Videos Spaß gemacht. Hier. Wir haben diese HTTP-GET-Anfrage verwendet. Denken Sie also daran, dass dies der einzige Code ist, der benötigt wird. Erstens ist diese URL an zweiter Stelle http.get. Und schließlich müssen Sie die Antwort zurückgeben und sie in ein benachbartes Format dekodieren. Das war's. Im nächsten Video werden wir diese ganze Seite mit allen Details wie Beschreibung, Kategorie und Schaltfläche In den Warenkorb vervollständigen allen Details wie Beschreibung, . Versuchen Sie bis dahin einfach, den Code richtig zu verstehen. Wenn Sie es nicht verstanden haben, sich das Video einfach noch einmal an. Aber bitte überspringe kein Konzept. Danke. 4. Abfrage von Json-Daten aus der API: In der letzten Sitzung konnten wir die Details eines bestimmten Produkts abrufen. Und wir konnten es in der Benutzeroberfläche rendern. Bisher wird nur das Bild im Preis angezeigt. Aber heute, in dieser Sitzung, werden wir weiterhin alle Details wie Beschreibung, Kategorie zeigen. Und wenn ich auch einen „In den Einkaufswagen“ -Button habe. Beginnen wir mit der Produktdetailseite. Wir haben dieses Bild. Dann in der Mitte. Wir haben diesen Preis. Dann lassen Sie uns eine große Box haben, um gewissen Abstand zu haben und eine Höhe von zehn zu haben. Dann haben Sie ein Widget, in dem wir diesen Titel zeigen werden. Verschiedene haben diesen Titel gezeigt und lassen Sie uns ihm etwas Stil geben. Wir wollen nur, dass die Schriftgröße 25 beträgt. Mal sehen. Okay, wir haben es. Jetzt. Der Textbereich. Lass es uns Chip-Widget haben. Wenn Sie nicht billig sind, werden Sie, wenn Sie das sehen, wissen Sie, dass es sich um Tags handelt. Wenn Sie ein Tag gesehen haben, das Elektronik oder die Kategorie Tagging oder Hashtags ist. Diese Art von Starr wird benutzt. Also hier werden wir zeigen , dass wir den Abschluss bekommen. Und lass uns Decks haben. Lass uns den nächsten Tag haben. Schriftart, Größe 15 und kühlere Farben punkten weiß. Und in dieser Form. Lass uns eine Hintergrundfarbe haben. Farben, das Blau, Grau. Schauen wir es uns an. Siehst du, ich habe über dieses Widget gesprochen. Ebenfalls. Wenn Sie möchten, können Sie die Querachsenausrichtung als dunkel festlegen, damit alles hierher kommt. Diese Seite, so. Es liegt an dir, was auch immer du willst. Das, das sind sehr einfache Stylingsachen. Keine große Sache. Haben Sie wieder eine Größenbox. Und dann werden wir endlich diese Beschreibung zeigen. Alle Schlüssel sind da. In der Antwort. Sie können das Bild mit der Beschreibung sehen. Und jetzt werde ich speichern und sehen, dass dies die Beschreibung ist. Wenn Sie möchten, können Sie ein gewisses Styling oder eine Schriftgröße vornehmen. Ich lasse es einfach so. Jetzt. Lass uns hier einen „In den Einkaufswagen“ -Button haben. Ich gebe es als Floating Button, Floating Action Button. wir also einen schwebenden Action-Button. Dann Kind. Bei dem Kind. Lass uns das Icon haben. Einkaufswagen hinzufügen, Einkaufskarte in der Brust umrissen. Wir tun nichts. Siehst du, wir haben das hier. Ich gebe ihm einfach die Hintergrundfarbe, grün gefärbt. Und ich werde auch die Position der schwebenden Aktionstaste ändern . Ich gebe ihm die Position des schwebenden Action-Buttons, den mittleren Schwimmer. Siehst du, es sieht anständig aus. Unsere Produktdetailseite ist ebenfalls fertig. Wenn Sie zu einem anderen Produkt gehen, finden Sie alle Details hier. Der Titel der Kategorie, der Preis, alles sieht perfekt aus. Wenn wir jetzt zur Fake-Store-API gehen, können wir sehen, dass wir diesen Endpunkt erreicht haben , nämlich ältere Produkte zu bekommen, ein bestimmtes Produkt zu erhalten. Jetzt ist es an der Zeit, dass wir die Kategorien bekommen. Mal sehen, ob wir darauf klicken, es gibt 12344 Kategorien. Wir werden diese Kategorien also in unserer Benutzeroberfläche anzeigen. Zunächst werden wir eine Funktion erstellen, die interagiert. Ich werde einfach kopieren und richtig, mach das Grobkörnig. Es akzeptiert nichts. Dies wird eine URL erhalten. Hier. Dies ist der Endpunkt. Jetzt geht diese Funktion auf den Server und ruft die Kategorie Gegenwart Indus EPI ab. Auf keinen Fall. Dafür müssen wir wieder einen neuen Bildschirm erstellen. Ich nenne alles Kategorie dot, dot. Ich hoffe, Sie verstehen das, all das ist jetzt sehr einfach, GET request zu implementieren. Im Grunde ist alles gleich. Wir sind gerade dabei, unsere Benutzeroberfläche fertigzustellen, damit sie sehr gut aussieht. In der alten Kategorie war Punkt Punkt einfach wichtiges Material. Erstellen Sie dann ein zustandsloses Widget namens Get a Goodie. Habe jetzt eine Gerüstleiste. Gestorben an. Weiter. Holen Sie sich die Leckereien haben eine Hintergrundfarbe von roten Farben und senden Sie sie im Körper durch. Wir werden diese Zukunft haben. Wird das nochmal? Da wird es mit unserer Funktion interagieren. Verwenden Sie nun das Objekt unserer Klasse, um die Funktion get all category aufzurufen. Im Baumeister. Wir werden Kontext und einen Senken-Snapshot haben. Wir müssen einfach überprüfen, ob der Snapshot-Punkt Daten enthält. Wenn nicht, geben wir eine Reihe von kühleren Fortschrittsanzeigen zurück. Wenn ein Schnappschuss, der den Teufel hat, wird dies für die Zeit zurückgegeben, einen Erfolg zurückgeben. Was Sie jetzt tun können, ist, dass wir zum Bildschirm navigieren müssen. Und dafür werde ich auf der Homepage einige Buttons erstellen. Das wird es sein, ich kann, aber es wird ein Symbol haben. Ich kann die Liste anzeigen starten. Jetzt navigieren wir zum Kategorien-Bildschirm. Mein TDL-Seitenlayout. Wir werden einen Kontext haben. Und das. Mal sehen, wie es geht, was die Ausgabe in der Debug-Konsole ist. Das kannst du. Sehen Sie hier, dies ist die Icon-Schaltfläche, die wir haben . Dies sind alle Kategorien, die, wenn ich darauf klicke diesen Erfolg haben und sehen, dies die Ausgabeantwort des Servers ist. Also werde ich jetzt einfach auf der alten Kategorieseite einen Listenansicht-Builder zurückgeben. Da ist es eine Liste. Artikelanzahl, Schnappschusspunktdaten, Punktlänge. Und im Item Builder werde ich einfach Kontexte und Index haben. Jetzt haben wir diesen Index und jetzt werden wir ein Karten-Widget zurückgeben. Dies ist ein weiteres Widget. Ich denke, es ist ein wirklich einfaches Widget das eine Erleichterung hat, nur einen gewissen Rand gibt und ihm dann eine Form von abgerundeter rechteckiger Grenze, Grenzradius, Kreisradius 15 gibt. Und dann hast du in diesem Kind einen Container. Dies ist nur eine grundlegende Sache , bei der ich diese Elektronik ausstellen werde. Joy bleibt Sammlung alles. Jetzt hier in diesem Text werde ich Snapshot-Punktdaten zeigen und dann direkt indizieren. Und ich werde es in Großbuchstaben schreiben. Nur um den guten Tag anzusehen. Ich gebe eine Schriftgröße von 25 an. Jetzt schauen wir mal. Schauen wir uns die Ausgabe an. Jetzt wenn ich darauf klicke. Siehe Elektronik, Schmuck, Männerkleidung, Frau. Es sieht also sehr gut aus. Es sieht anständig aus. Man kann zumindest diesen Rand und die Füllung sagen , wo ich früher den Abstand innerhalb einer außerhalb dieser Karten angegeben habe. Und wenn wir auf diese Karte klicken, sollten wir auf jeden Fall zu einem Bildschirm gehen , auf dem alle Produkte dieser Kategorie angezeigt werden. Dafür in der Karte wickeln wir es einfach mit einem Tintenfass-Tintenfass-Widget und haben keine Tippfunktion, die wir später verwenden werden um Produkte nach Kategorien abzurufen. Das war's also für dieses Video. Im nächsten Video werden wir die Produkte nach Kategorien abrufen. Ngo. 5. Grundlegende shopping: Hi, willkommen zurück. In dieser Sitzung werden wir diese GET-Anfrage abschließen. Und bis jetzt konnten wir die Kategorien abrufen und in unserer Anwendung anzeigen. Aber jetzt ist es an der Zeit, Produkte zu holen , die auf diesen Kategorien basieren. Das heißt, wenn ich auf Elektronik klicke, sollte ein neuer Bildschirm mit allen elektronischen Produkten erscheinen . Und für diesen Endpunkt ist dieser, das ist die Produktkategorie. Und dann müssen wir diesen Kategorienamen senden. Beginnen wir also wie immer zunächst mit der API. Dafür kopiere ich das einfach und füge es hier ein. Ich nenne es, hol mir das Produkt. Indem Sie bekommen. Jetzt akzeptiert es eine String-Katze mit dem Namen dieses Kategorienamens. Und der Variablenname. Ich werde das ändern , um das Produkt zu holen. Nimm den Grobkörnigen, der du bist. Du kannst benennen, was du willst. Und hier ist der Endpunkt wie diese Kategorie und dann der Katzenname. Sehen Sie also, so wird es gemacht und wenn wir darauf klicken, erhalten wir eine Antwort. Mit Alda Produkten. Jetzt haben wir die Funktion bereit, aber wir sollten auch einen neuen Bildschirm erstellen , den wir diese Funktion nennen werden. Ich nenne Alterskategorie, Produkt Punkt Punkt. Und ich werde jetzt meine TDL importieren. Als ein weniger starrer Zustand eines Bildschirms. Es akzeptiert einen Kategorienamen im Konstruktor. Das müssen wir dieser Variablen zuweisen. Jetzt lasst uns ein Gerüst bilden. Dann AB-Balken. In diesem Titel. Ich gebe diesen Kategorienamen in Großbuchstaben. Dies sollten die Titel - und Hintergrundfarben sein. Kettler fängt an zu lesen. Und dann ging das Center Tag durch. Was wir nun wollen ist, wenn wir darauf klicken, sollte sich dieser Pitch öffnen. Gehen wir also zur Kategorie Öl. Und im Tintenfass müssen wir Navigator verwenden, Dot Bush. Dann mein TDL-Seitenlayout, View Reveal und dann der Name Produkte Grain. Und dann müssen wir diesen bestimmten Namen schicken. Wir werden den Namen aus den Snapshot-Daten erhalten und dann indizieren. Lass es uns ausprobieren. Mal sehen was passiert. Jetzt gehe ich zu Kategorien und klicke auf Schmuck. Sehen Sie, dass diese Freude in der AB-Bar da ist. Wenn ich auf Elektronik klicke, ist Elektronik da. Jetzt werden wir einfach einen zukünftigen Builder innerhalb der Kategorie-Produktseite verwenden . Und ich bin gleich hinter dem Namen her richtig. Okay, also im Körper, lass uns einen zukünftigen Baumeister haben. Nan. Dann wird die Zukunft App Service sein, Produkt nach Kategorie abrufen und dann senden, um die grobkörnige Namensvariable zu erhalten. Und im Builder werden wir einen Kontext haben. Wie immer denke ich, du wirst es einfach lernen. Jetzt. Das Gleiche machen wir immer wieder. Vielleicht nie Kontexte. Und dann ein einziger Schnappschuss. Wir werden nachsehen. Wenn ein Schnappschuss Daten enthält und zurückgibt kreisförmige Fortschrittsanzeige zurückgibt. Wir haben das mehr getan als, ich habe sogar vergessen, wie oft wir diese Dinge getan haben. Wenn es jetzt die Daten enthält, verwenden wir einen Listenansicht-Generator. Nun wünscht sich diese Benutzeroberfläche dasselbe wie die Home-Benutzeroberfläche. Dieser ListView-Generator. Diese Kategorie. Wir schalten einfach diesen ListView-Builder um. Und zuerst werde ich hier nur prüfen, ob alles in Ordnung ist. Snapshot-Punktdaten, Punkt, Entf, Indexpreis als dieser Produktbildschirm werde ich importieren. Okay, schauen wir es uns an. Wenn es einen Fehler gibt. Wenn ich auf Elektronik klicke, ist nichts passiert. Mal sehen, hat er irgendeinen Fehler oder Irrtum? Produkt nach Kategorie? Gut, Produkt nach Kategorie. Dann haben wir diese Funktion. Lassen Sie uns ab und zu neu starten ob noch ein Fehler besteht. Wissen Sie, ich schätze, ich habe die Datei einfach nicht gespeichert. Das ist in Ordnung. Aber sieh es dir jetzt an, wenn ich gehe und Schmuck nur die Juweliersachen wirklich da sind und wenn ich darauf klicke, wird diese Produktdetailseite auftauchen. Es funktioniert also sehr gut. Und ich schätze, dieser Teil ist fertig. Wenn wir über eine E-Commerce-Anwendung nachdenken, können Sie sagen, dass es definitiv einen Einkaufswagen gibt , den wir hier nicht verwendet haben. Schauen wir uns das Dokument mit den Ressourcen an. Und hier sehen Sie, dass wir auch einen Einkaufswagen bekommen können , der uns einige Produkte liefert, wenn wir eine Benutzer-ID senden. Nehmen Sie sich also bitte die Zeit , diese Dokumente zu lesen. Du wirst viel lernen. Es gibt viele Endpunkte. Gleiche. Ich benutze ein paar davon, um dir zu zeigen, wie es geht. Jetzt werden wir die Warenkorbseite implementieren. Zunächst werden wir eine Funktion implementieren , die diese Karte erhält. Also nenne ich es einfach , hol mir eine Karte. Es akzeptiert eine Benutzer-ID. Und ich nenne es Kartenprodukte holen. Und dann ist der Endpunkt. Diese Karten und dann die Benutzer-ID. Dies ist der Endpunkt der Einkaufswagen-API. Da es sich also um eine Dummy-API handelt, müssen wir bereits vorhandene Benutzerdetails in ihren Autoprodukten verwenden . Wir können unsere eigenen Daten nicht wirklich einfügen. Wir nehmen eine Benutzer-ID von eins, um zu ermitteln , dass sie sich in befindet. Denken Sie einfach daran, was auch immer wir tun , sind nur gefälschte Daten. Ich möchte nur, dass du das Konzept von HTTP verstehst und wie man die Daten in der Benutzeroberfläche abruft und anzeigt. Das war's, nichts weiter als das. Erstellen wir nun eine Schutzbildschirmseite. Gottes grüner Punkt. Importieren Sie dann Material. Lassen Sie uns einen weniger starren Kartenbildschirm haben. Dann werden wir, wie Sie werden, sein Gerüst haben. Dann in diesem Titel. Richtig? Bist du. Gott, es wird professionell aussehen. Dann haben einige Ted's genauso wie zuvor wir haben das so oft gemacht, ich schätze, jetzt hattest du einen Experten in diesen Dingen. Jetzt, im Körper, werden wir ein paar den Vorsitz eines Baumeisters haben, der akzeptiert, wenn die Zukunft eine Karte bekommt. Und ich werde eine Benutzer-ID senden, der ich bereits weiß, dass sie in der festen oder API vorhanden ist. Verwenden Sie einfach die Dokumentation dieser API. Wenn Sie den Snapshot mit Rechenzentrum nicht verstanden haben , ist dies erneut verstanden Snapshot Rechenzentrum nicht verstanden haben , ist eine kreisförmige Fortschrittsanzeige. Hier. Vorerst lese ich einen Erfolgstext damit wir dieses Ergebnis in der Debug-Konsole erhalten können. Jetzt müssen wir natürlich auch zum Bildschirm navigieren. Also die Startseite, gehe zur App-Leiste und ich kopiere diese Icon-Schaltfläche und füge sie ein. Und jetzt wird das Einkaufswagen sein. Und diese Seite wird Guards Screen sein. Schauen wir es uns an. Siehst du, wir haben diese Karte. Ich kann hören. Wenn ich jetzt auf das Warenkorbsymbol klicke, lautet diese Antwort wie folgt. Es gibt uns eine Antwort von 200. Das heißt, es war ein Erfolg. Wir haben die ID Benutzer-ID eins. Dann. Unser Hauptanliegen ist der einfachste Produktschlüssel. Der Schlüssel des Produkts hat also den Wert eines Arrays , der aus der Produkt-ID und der Menge besteht. Hier bekommen wir also nur diese Produkt-ID. Wir müssen uns also an zukünftige Bauherren wenden, um zuerst Kartendetails abzurufen und später dann das Produkt abzurufen. Das heißt, wir wollen auf jeden Fall den Produktnamen und das Produktbild von dieser Produkt-ID. Also lasst uns damit anfangen. Einfach, wir werden schreiben, wenn ein Snapshot Daten enthält, dann haben wir eine Liste von Produkten, das heißt, das ist dieser Schlüssel, das ist der Produktschlüssel. Jetzt werden wir einen Listenansicht-Builder verwenden . Zeigen Sie all diese Produkte an. Und bei der Artikelanzahl werde ich Produkte dot land verwenden. Und im Item Builder werde ich Kontext und Index verwenden. Jetzt beginnt der Spaß, denn wir müssen wieder eine Zukunft nutzen. Denn jetzt müssen wir das Produktdetail aus der Produkt-ID abrufen das Produktdetail aus , was wir bereits zuvor gemacht haben. Also müssen wir einfach APIs und Umfragen schreiben, dot bekommt ein einzelnes Produkt. Und dann werde ich einfach diese Produkte verwenden, dann indizieren und dann diese Produkt-ID. So wie das. Jetzt werde ich wieder Rick-Kontexte haben und dann den Schnappschuss richtig sehen. Dieses Mal werde ich den Bogen-Snapshot nennen . Und dann müssen wir überprüfen, ob ein einzelner Snapshot-Punkt Daten enthält. Dieses Mal werde ich zum ersten Mal eine lineare Fortschrittsanzeige zurückgeben . Und jetzt werde ich einen Listenstil haben , der alle Details enthält. Einfach im Listenstil. Ich werde diesen Titel zuerst haben und dir zeigen, dass er funktioniert. Singen Sie Snapshot-Punktdaten und dann Titel. Prüfen wir, ob es funktioniert oder nicht. Bringen Sie Ihre Bewerbung heraus. Und wenn ich dann einfach auf den Einkaufswagen C, C klicke , haben wir die drei Artikel, die sich im Warenkorb befinden. Diese Logik ist ein bisschen knifflig, aber Sie müssen das Video anhalten und es richtig verstehen. Im ersten zukünftigen Baumeister bekommen wir den Wagen. Im zweiten zukünftigen Builder erhalten wir den Namen des Produktbilds und einen Preis von dieser Produkt-ID. Im Vordergrund werde ich das Bildpunktnetzwerk verwenden und dann einfach Bildpunktdaten versenken. Und dann Bild. Ich gebe ihm einfach eine Körpergröße von 40. Als im Untertitel schreibe ich diesen Preis oder nicht den Preis. Ich meine diese Menge. Wie viel habe ich bestellt. Das bin nicht ich, das, diese Dummy-API-Daten. Und es ist eine Menge, also müssen wir sie in eine Zeichenfolge ändern. Und dann habe ich in diesem Trailing eine Icon-Schaltfläche und das Symbol wird entfernt. Das ist ein verzögertes Produkt. Ich baue das alles, um mehr zu machen, lade viel mehr reale Anwendungen und nicht nur eine Dummy-Anwendung. Hoffen wir, dass alles gut funktioniert. Bringen Sie Ihren Emulator als Code in den Warenkorb. Und sieh mal, es sieht perfekt aus. Wir haben diesen Titel, wir haben das Bild und wir haben auch die Menge. Das sieht jetzt aus wie eine echte Warenkorbseite. Nur wir brauchen ist eine Grundbestellen-Schaltfläche Jetzt hier. Wir können es in der unteren Navigationseigenschaft des Gerüsts angeben . Gerüst, anstatt die schwebende Aktionstaste zu verwenden, werde ich verwenden, aber die Navigationsleiste. Und hier nehme ich einen Container. Und dann gebe ich ihm einfach eine Größe von 60. Gewicht der Doppelpunkt-Unendlichkeit, das ist die gesamte Breite. Farben grün. Und in diesem Kind wird es einen zentralen Textbereich geben, der wird, was wir jetzt in der richtigen Reihenfolge haben. Und dann gib ihm einfach etwas Textstil. Farbe, Farben, Weiß, Schriftgröße. Schriftgröße. Ich gebe ihm 30. Speichere es. Und sehen Sie, dass diese Seite besser aussieht als jede andere Anwendung, die hier ist, grundlegende Anwendung, werde ich sagen, weil wir unsere Kategorien haben, wenn wir darauf klicken, haben wir die Produkte. Sehen Sie, wir haben diese Produkte. Wenn wir auf ein Produkt klicken, ist das Produkt Dale da und dieser Fehler liegt nur daran, dass die Seite nicht scrollbar war. Um diesen Adder zu lösen, können wir einfach zum Produktdetailbildschirm gehen. Und hier im Container wickle ich es einfach mit ihnen ein. Einzeluntergeordnete Scroll-Ansicht. Das war's. Siehst du, der Fehler ist weg. Dies sind die grundlegenden Dinge , die Sie beim Erstellen einer Anwendung beachten müssen , die wir möglicherweise vergessen. Und es wird nur wenige Dollar geben, aber es kann sehr einfach gelöst werden. Damit ist dieser GET-Request-Teil endlich abgeschlossen. Wir haben viel gelernt. In der nächsten Sitzung. Wir werden darüber sprechen, wie mit der Post-Anfrage umgegangen werden soll. Dann übe einfach weiter. 6. Bearbeitung von POST-Anfragen: Hallo, willkommen zu dieser neuen Sitzung. Bisher haben wir gerade über diese GET-Anfrage gesprochen. Aber es ist an der Zeit, dass wir uns auch mit den anderen Anfragen befassen. Denn offensichtlich haben wir jetzt die Daten. Aber viel Zeit werden wir auch Daten verbessern. Das heißt, wir werden auch Daten senden , soweit wir die Post-Anfrage verwenden müssen. Wie gehe ich jetzt mit der Post-Anfrage um? Wir wissen bereits, dass es reduziert ist, Daten an einen Server zu senden. Wir verwenden es in Szenarien wie dem Hochladen einer Datei oder dem Senden von Formulardaten. In einer Post-Anfrage. Zusätzliche Parameter wie Header und Bodies werden ebenfalls zusammen mit der Anfrage gesendet, die unsere Daten enthält. In unserer API haben wir nun diesen Login-Benutzer , also Benutzeranmeldung und Punkt, dem es sich um eine Post-Anfrage handelt. Und wir müssen einen Benutzernamen und ein Passwort senden. Und da es sich um eine Dummy-API handelt, müssen wir nur diesen Benutzernamen und dieses Passwort senden. Dann ist nur es erfolgreich und es wird ein krankes Token gesendet. Das heißt einfach, ja, die Benutzeranmeldeinformationen sind echt, sind gültig. Gehen wir nun zu den APA-Umfragen, und hier erstellen wir eine Post-Anfrage. Es wird einfach eine zukünftige Benutzeranmeldung sein. Und dann akzeptiert es einen Benutzernamen und ein String-Passwort. Das ist also eine sehr professionelle oder diese Schreibweise, die Sie auch in der realen Anwendung verwenden werden . Wenn ich wollte, hätte ich das Benutzernamen-Passwort hier direkt schreiben oder fest codieren können. Aber ich möchte, dass es viel dynamischer wird. Wir werden eine Login-URL haben, URI-Balken. Und das wird definitiv im URL-Endpunkt da sein. Und danach haben wir Kunst und melden uns dann an. Okay? Jetzt ist es Zeit für das Neue, was die Reaktion ist. Die Antwort lautet zum ersten Mal x auf den p dot post und hat unsere Login-URL. Jetzt. Wir müssen einen Benutzernamen und ein Passwort an diese Partei senden. Also sage ich hier einfach Benutzername, Benutzername und dann Passwort, Passwort. So senden wir es also. Das war's. Es war wohl keine große Sache, denn es ist auch eine Bitte, bei der wir einfach nicht viel tun. Wir haben unsere Antwort und die eine URL akzeptiert, jeden Text. Hier würde ich einfach Kleid, Bonds, Punkte, Punkte, Statuscode schreiben , und alles sollte da sein. Okay, tut mir leid, ich habe vergessen, await zu benutzen. Das war ein sehr dummer Fehler. Denken Sie also daran, dass „ Warten“ sehr wichtig ist, wenn wir diese Art von Anfrage stellen . Jetzt verwenden wir den Anmelde-Endpunkt für die Benutzeranmeldung von der APA. Es wird ein Token zurückgegeben, wenn es erfolgreich ausgeführt wurde. Jetzt haben wir die Funktion, es ist Zeit, den Bildschirm zu erstellen , der der Anmeldebildschirm ist. Es ist so gut, dass unsere Bewerbung immer professioneller wird, aussieht und immer vollständiger wird. Jetzt haben wir einen Anmeldebildschirm. Dann scanne Telefon, App-Leiste. Dann lassen wir es Florida Shop nennen. Du kannst benennen, was du willst. Ich verwende nur einen zufälligen Namen. Und dann wird die Hintergrundfarbe eingefärbt, angefangen bei X. Und jetzt im Körper habe ich einen Container. Es wird einige Ränder von Duan De haben, frei von Medienabfragepunkten von Kontexten Punktgröße, Punktbreite und Höhe, als wenn die gesamte Höhe genommen werden sollte. Okay? Jetzt in diesem Kind haben wir eine Spalte in dieser Matrix Insulinmänner als zentriert und Kreuz x ist ein Element und senden es, weil ich möchte, dass diese Felder in der Mitte des Bildschirms sind. Wir werden also zwei Textfelder haben , nämlich Benutzername, Passwort. Aber zuerst darf ich es zur Homepage machen. Es wird die Homepage unserer Bewerbung sein. Wenn ich mich jetzt aktualisiere, können wir sehen, dass dies der Blumentest scharf ist. Und jetzt dann Login-Bildschirm. Wir werden haben, ich bin auch zum Textbearbeitungs-Controller. Wann würden wir Controller mit Textbearbeitung benennen und lernen. Und zweiter Controller, wenn wir Word-Controller verwenden. Wie ich bereits sagte, müssen wir nun den Benutzernamen und das Passwort verwenden , die hier angegeben sind. Also kopiere ich es einfach. Und hier in diesem Text werde ich ihn einfügen. Und wieder kopiere ich dieses Passwort hier. Und hier habe ich auch das Passwort eingefügt, weil es vordefiniert sein sollte. Jetzt bei den Kindern, lass es uns zu Textfeldern haben. Wir wissen bereits, wie man dieses TextField benutzt, wie man es schmückt. Diese sind nicht neu gemacht. Wir haben es in den vorangegangenen Sitzungen getan. Wird eine Eingabedekoration haben, beschriftet, verwenden und benennen. Und dann werde ich auch eine Grenze haben . Danach werde ich eine Größenbox haben. Ich tippe D. Und dann habe ich wieder dieses Textfeld, das ein Passwort sein wird. Jetzt nach dem Textfeld haben wir einfach eine Schaltfläche im Container. Ich gebe ihm eine Größe von 50. Und los von der Punkthöhe der Medienabfrage, das ist die gesamte Breite des Bildschirms. Discord an Ort und Stelle dieses Kindes, ich werde einen erhöhten Knopf haben. Und in diesem Kind schreibe ich einfach login. Und ich werde etwas Styling geben. Man sagt 25, Schriftgewicht mit dem Ball. Okay. Wir haben unseren Login-Bildschirm und er sieht ziemlich gut aus. Wenn Sie möchten, können Sie hier ein Logo-Bild haben . Es liegt an Ihnen. Also einfach in den erhöhten Button werde ich schreiben, das nenne ich hier unsere Login-Funktion. Warten Sie auf die Anmeldung des API-Dienstes. Der Benutzername Ich werde den Namenskontroller-Punkt-Text schreiben, und das Passwort werde ich Passwort-Controller-Punkt-Text schreiben . Sagen wir Nulla. Prüfen wir, ob es richtig funktioniert oder nicht. Wenn ich auf den Login-Button klicke, sehen wir uns die Konsole an, sehen wir, dass es 200 sind und wir unser Token bei uns haben. Da unser Token funktioniert, möchten wir, dass der Benutzer sich erfolgreich anmeldet, er sollte wie jede andere reale Anwendung auf den Startbildschirm geschickt werden . Also dieses Token, wir werden es hier in dieser Variablen speichern. Und dann prüfen wir, ob Token, das get token ist. Und der Token-Wert ist nicht gleich Null. Denn wenn es keine heißt, senden wir einige Daten. Also schreiben wir einfach, wenn es nicht gleich null ist, das heißt, es ist richtig. Sie verwenden eine Snackbar, um dem Benutzer ein Feedback zu zeigen , dass er eingegeben hat. Richtige Anmeldeinformationen. Wir schreiben einfach den Text. Erfolg. Und Yard-Token-ID ist. Und einfach werde ich drucken, Token für den Benutzer so drucken. Und ich werde einige Hintergrundinformationen geben, die dazu geführt haben. Beachten Sie das Grün, das ist ein Snack zu tupfen, aber ich gebe diese Hintergrundfarbe. Danach möchte ich, dass die Snackbar zwei Sekunden lang angezeigt wird, und dann werden wir danach navigieren. Für diese Dauer von zwei Sekunden muss ich diese Zukunft verwenden, die Löschfunktion, damit sie Do Second liest, und dann durch uns navigieren. Dann navigiere uns zum Startbildschirm. Darian-Seitenlayout. Und dann der Startbildschirm. Und die Homepage. So wie das. Wir gehen auf die Homepage. Und wenn dieses Token nicht da ist , liegt ein Fehler vor. Dann zeigen wir wieder die Snackbar. Aber hier schreiben Sie zunächst einen falschen Benutzernamen oder ein falsches Passwort. Nutzername, Passwort richtig. Und die Farbe sollte rot sein. In diesem Fall. Schauen wir uns an, ob es richtig funktioniert oder nicht. Erste Datei, ich werde heute einen falschen Benutzernamen schreiben, ich werde diesen entfernen und dann auf Login klicken. Siehe Benutzername oder Passwort falsch. Auch in unserer Debug-Konsole haben wir eine Meldung wie diese. Aber was ist, wenn ich es richtig mache? Und dann klicken Sie auf Anmelden. Wir haben diese Erfolgsmeldung 2. Zweitens werden wir zum Startbildschirm geschickt. Wow, es sieht **** nett aus. Und wir haben endlich verstanden , wie man diese Post-Anfrage auch verwendet. Da wir also Daten im Anforderungstext gesendet haben, war es eine Post-Anfrage. Sie müssen sich also daran erinnern, wann Sie GET-Anfragen verwenden wann Sie Post-Request verwenden müssen. Aber zumindest funktioniert diese App. Wenn wir uns erfrischen. Natürlich wird es auf dem Startbildschirm angezeigt, aber jetzt haben Sie eine grundlegende Anwendung, um Ihren Freunden zu zeigen, dass Sie etwas von Grund auf neu erstellt haben. Jetzt bist du kein Anfänger, du bist ein Fortgeschrittener in der Florida-Programmierung. Ich hoffe es hat dir bis jetzt gefallen. In der nächsten Sitzung werden wir über die letzten beiden Anfragen sprechen, nämlich eine PUT-Anfrage und eine Löschanforderung. Wir werden also auf jeden Fall auch Spaß daran haben, an diesen Funktionen zu arbeiten. Dann versuche einfach den Code tief zu verstehen. Wenn Sie noch mehr Zweifel haben, bitte. Sie können es auch googeln. Wir fragen uns in der freien Form und so. Aber auf jeden Fall ist es ein sehr wichtiges Konzept. Und während Sie APIs mit NodeJS MongoDB abrechnen, müssen Sie diese HttpRequest häufig verwenden . Danke. 7. PUT DELETE: Hi, willkommen zurück. In den vorherigen Videos haben wir gelernt, wie man GET verwendet und Anfragen veröffentlicht. In diesem Video werden wir etwas über die PUT-Anfrage erfahren. Request wird grundsätzlich verwendet , um die Daten und den Server zu erhalten. In dieser Fake-Store-API werden wir unsere Karte aktualisieren, werden wir unsere Karte aktualisieren wenn wir auf die Schaltfläche In den Einkaufswagen klicken. Das heißt, wenn wir auf diese Schaltfläche klicken, sollte ein gewisser Code ausgeführt werden. Aber denken Sie daran, dass es eine gefälschte API handelt, sodass nichts für Sie aktualisiert wird. Wir können nur die Antwort sehen , die die Konsole zu erfüllen hat. Gehen Sie einfach zur Freak Store-API, dann erfahren Sie Details zu Hunden. Hier finden Sie alle APIs, die es unterstützt. Ich komme und klicke darauf, aktualisiere die Karte. Und jetzt können Sie hier sehen, wie die Methode ist und wir müssen Grüße, Benutzer-ID, Datum und die Produkte senden . Und die Produkte sind , ob es sich um eine Sammlung handelt, das ist eine Liste der Karten, die die Produkt-ID enthalten. Das war's. Also ja, du kannst benutzen oder patchen, was immer du willst. Ich werde dafür verwenden , um es auszuführen. Gehen wir einfach zu unserer Dot-Punkt-Datei für API-Services. Und hier werde ich eine PUT-Anfrage erstellen. Dann erstellen wir eine Datumskarte für das Mittagessen. Es wird eine Sinc-Funktion sein. Und jetzt akzeptiert es eine Benutzer-ID und eine Produkt-ID. Okay? Danach haben wir diese URL. Wie immer. Ich nenne es einfach Update URL. Und die URL besteht aus Schrägstrichen und einer Benutzer-ID. Also so und Benutzer-ID. Okay, ich mache einfach dieses d kleine d. Danach muss ich die Funktionen erstellen, die eine Antwort sind, und dann abwarten. Und jetzt werden wir STDP dot put verwenden. Die URL wird Aktualisierungs-URL sein. Und dann wird der Körper eine Map sein. Und jetzt habe ich, wir müssen die Schlüssel schicken, diese Benutzer-ID. Es wird eine Zeichenfolge sein. Denken Sie daran, dass jeder Schlüssel einen String-Wert haben wird. Damit meine ich, dass ich dir nur das Datum zeigen werde. Wir schreiben einfach date, time, dot, datetime, dot, dot in string. Also müssen wir diese Dinge in Strings umwandeln. Und dann Produkte. Und es wird eine Liste sein, okay? Liste der Karten. Und hier werde ich einfach hier die Produkt-ID, Produkt-ID und die Menge d t. Ich werde nur fest codiert als eins. Und dann mache diese Listenzeichenfolge, um zu funktionieren. Drucken Sie jetzt wie immer einfach den Antwortstatuscode aus. Und dann bindet print yes den Körper. Und danach werde ich JSON decode response.body zurückgeben, aber wir werden nichts tun. Ich mache die Funktion nur so, dass Sie verstehen wie es geht, wenn Sie eine Echtzeit-API haben. Jetzt haben wir die Funktion aktiviert. Gehen wir zum Produktdetail. Hier. In der schwebenden Aktionstaste. Hier mache ich es einfach zu einer Spüle mit einem Gewicht. Ich werde ein Ding sein. Apa-Service, Punkt-Aktualisierungskarte, dann Benutzer-ID. Ich werde wissen, dass ich eine senden werde, da sie fest codiert ist. Und dann ist diese Produkt-ID diese ID. Ich sende auch diese ID. Danach können wir nur noch Angst haben, fallen, fallen, der Bote der Kontexte, Punktshow, Snackbar. Und dann eine Snackbar. Sie können einfach das Produkt schreiben, das in den Warenkorb gelegt wurde. Das sind also nur falsche Rückmeldungen. Aber der Code der HTTP-Anfrage ist echt. Bringen wir es raus. Wenn Sie jetzt zu diesem Jacket-Bildschirm gehen ich auf die Schaltfläche „ In den Einkaufswagen“ klicke, sehe ich mir das Produkt an, das in den Warenkorb gelegt wurde. In der Ausgabe sehen Sie ID, Benutzer-ID, Datum und ein Produkt, das ID ist Produkt-ID ist drei. Wir schicken es drei. Deshalb bedeutet dies letztendlich , dass unsere PUT-Anfrage perfekt funktioniert. Stellen Sie sich vor, es wären echte Daten und wir aktualisieren gerade diese Daten auf dem Server. Daten. Die letzten Anfragen , die wir besprechen werden , sind die Löschanforderung. Daher wird eine Löschanforderung verwendet , um diese Daten auf dem Server zu löschen. Also hier werden wir unsere Karte löschen. Wir tun so, als würden wir unseren Warenkorb löschen, wenn wir im Warenkorbbildschirm auf die Schaltfläche Entfernen klicken, das ist diese Schaltfläche. Diese Schaltfläche. Wenn wir darauf klicken, sollten wir nur das Feedback erhalten. Und wie immer ist es eine gefälschte API. Wir werden nur die Antwort in der Konsole sehen. Erstellen Sie also eine Anfrage wie verzögerte, verzögerte Anfrage als einfach eine Funktion der verzögerten Karte. Dann string user ID. Also holen wir uns einfach die Benutzer-ID und löschen seine Karte. Ich versuche nur, dass du es verstehst. Ich weiß, dass es keinen Sinn macht , nur mit gefälschten APIs zu arbeiten. Aber glaub mir, das wird dir sehr helfen. Jetzt. Wir müssen nur dieselbe URL bekommen. Der einzige Unterschied wird die HTTP-Anfragen sein an die wir nur eine Antwort schreiben, ist gleich, um auf die verzögerte HTTP-Punkt verzögerte Karten-URL zu warten . Das sollten wir also tun. Und danach schreiben wir einfach den Antwort- und Statuscode. gibt die Antwort des Hauptteils und gibt json dot d code response.body zurück. In der API für feste Bestellungen können Sie jetzt sehen, dass es sich um eine verzögerte Warenkorbseite handelt. Und hier ist die URL wie dieser Warenkorb und die Benutzer-ID, und wir müssen ihnen nur mein Drittel der Verspätung senden. Und dann erhalten wir in der Ausgabe die Produkte mit dem Benutzer-ID-Datum. Das war's. Lass es uns ausprobieren. Gehen wir zur Karten-Bildschirmseite. Und dann, in diesem Trailing, haben wir das mit Lob. Und hier schreiben wir einfach einen Gewicht-API-Service Dot, Delete Cut. Und dann senden wir einfach eine Benutzer-ID von einem. Da es sich um eine echte Anwendung gehandelt hätte, erhalten Sie möglicherweise deren Benutzer-ID von Firebase oder wo auch immer Sie möchten. Und danach werden wir nur noch einen Gerüstboten haben und einfach eine Snackbar zeigen. Zeigen Sie einfach eine Snackbar. Der Inhalt als Element wurde erfolgreich gelöscht. Das war's. Lass es uns ausprobieren. Funktioniert es oder nicht? Gehe jetzt zum Kartenbildschirm. Und jetzt werde ich einfach die Konsole räumen. Und jetzt, wenn ich auf diesen Löschen-Button klicke, wird der Artikel erfolgreich gelöscht. Und wir haben diese Artikel-ID, Benutzer-ID, Datum und diese anderen Produkte, siehe 61. Also fügen wir die richtige Karte hinzu. Ich wollte nur eine Löschfunktion implementieren und dir verständlich machen , wie sie funktioniert. Ich weiß hier, dass der gesamte Warenkorb gelöscht wird, aber in diesem Fall sollten wir ein Produkt entfernen. Ich hoffe du hast verstanden. Du musst die Karte aktualisieren. Das heißt, wenn ich das auf den Server entferne, entferne einfach dieses Produkt aus diesem Listenelement. Es liegt an dir. Aber zumindest solltest du das Konzept kennen und wissen , wie man es richtig schreibt. So hoch, ich hoffe dir hat dieses Video gefallen. Wir haben über all diese Anfragen gesprochen, sei es GET, post, PUT, delete. Im nächsten Video werden wir also endlich über die authentifizierte Anfrage diskutieren . Und das wird das letzte Video unseres HTTP-Moduls sein. Und Q.. 8. Erstelle authentifizierte Anfragen: Hi, willkommen zurück. In dieser Sitzung werden wir darüber sprechen, wie authentifizierte Anfragen gestellt werden können. Bisher haben wir also eine API verwendet, auf die wir direkt zugreifen konnten und keinen Authentifizierungsschlüssel benötigt. Dies ist jedoch meistens nicht der Fall , wenn wir Anwendungen erstellen. Um Daten von vielen Webdiensten abrufen zu können, müssen Sie einen Autorisierungs - oder Authentifizierungsschlüssel angeben. Es gibt viele Möglichkeiten, dies zu tun, die wir jetzt diskutieren werden. Der erste Weg ist nun diese grundlegende Kunstmethode. Die grundlegende Authentifizierung bedeutet, dass die Client-App den Benutzernamen und das Passwort in den HTTP-Anfragen an den Server sendet den Benutzernamen und das Passwort in den HTTP-Anfragen an . Wenn wir also einfach ein Benutzernamen-Passwort haben, werden wir eine grundlegende Kunst verwenden. Disc kann auch auf zwei Arten erfolgen. Entweder müssen wir diese Details im body-Parameter senden oder die andere Möglichkeit besteht darin, diese Anmeldeinformationen mit UTF-8 zu codieren und sie dann im Header-Parameter zu übergeben. Lassen Sie uns das Erste tun, das ist, wenn wir diese Details im body-Parameter senden, bringen Sie einfach Ihre API-Services-Datei heraus. Und lassen Sie uns eine Funktion namens Benutzerauthentifizierung erstellen. Und jetzt haben wir hier einen Benutzernamen und ein String-Passwort. Jetzt haben wir derzeit keine URL. Ich zeige dir gerade den Duck-Kurscode , wie es geht. Denn auf jeden Fall haben Sie vielleicht eine API wie einen weiteren AWS-Server oder einen NodeJS-Server oder was auch immer. Ich benutze nur ein Dummy-Ding. Das ist irgendwo api dot, I0, was auch immer. Es ergibt keinen Sinn. Die Sache ist die, das Wichtigste ist hier, es ist die Reaktion. Wenn wir jetzt schreiben, ist die Antwort gleich wait http dot. Wenn wir diese Daten im Körper senden, können wir keine Anfrage zum Abrufen haben. Wir müssen immer die Post-Anfrage verwenden. Dann können nur wir Parteiparameter senden . Jetzt im Hauptteil verwende ich einfach diesen Benutzernamen, Benutzernamen und Passwort, wie dieses Passwort. Und danach können Sie wie immer die Antwort ausdrucken. Ich sage es nur noch einmal, dass wir hier keine API verwenden. Ich möchte Ihnen nur den Code zeigen, wie STDP authentifizieren können, da alles so sein wird wie zuvor. Der einzige Unterschied besteht darin, dass wir diesen Partyparameter verwenden. Stellen Sie sich vor, das ist Ihr NodeJS-Server und wir senden das Benutzernamen-Passwort zur Authentifizierung. Dies ist eine der grundlegenden Kunst. Das zweite ist, die Details über den Autorisierungsheader zu senden , den wir tun können. Einfach so. Okay, ich würde einfach eine andere Funktion erstellen , damit du dich Benutzer oder das dritte IgG erinnerst und ich werde einfach eine Sitzung schreiben. Jetzt werde ich diese Körpersache entfernen. Und da wir keinen body verwenden, können wir auch eine GET-Anfrage stellen, weil wir dieses Detail über Header senden. Jetzt haben wir die erste Kodierung, diese Details wie diese grundlegende Kunst. Dann wird als Erstes dieses grundlegende Schlüsselwort sein. Danach werden wir die Basis 64-Encodierung haben. Und drinnen schreibe ich einfach UDF-Acht-Punkt-Code . Und hier schreibst du deinen Benutzernamen und dein Passwort. Einfach. Nutzername und Passwort. Dieser Code, Sie müssen sich daran erinnern, dass dieses Basic das Präfix ist, das wir verwenden werden. Es gibt ein weiteres Präfix, das wir innerhalb weniger Sekunden verwenden werden . Aber so haben wir den Autorisierungsschlüssel, der codiert. Und dann schreiben Sie in dieser GET-Anfrage einfach Header. Dann benutze die Map. Und der erste Schlüssel, den Sie verwenden, ist der Inhaltstyp. Es wird Bewerbung Jason sein. Und die zweite ist die Autorisierung. Darüber sprechen wir. Und es wird diese grundlegenden Anmeldeinformationen haben. Das war's. So wird's gemacht. diese Weise werden also Benutzername und Passwort gesendet und nicht nur Benutzername und Passwort. Es könnte einige Websites oder APS , die Sie gebeten haben, den API-Code hier zu senden. Das heißt, es ist nicht immer notwendig, diese Art von Benutzername und Passwort zu verwenden. Dies hängt auch von der API ab, mit der Sie arbeiten. Jetzt. Zuerst war die grundlegende Kunst. Jetzt ist das zweite das Bier. Die Beer-Authentifizierung bedeutet einfach, dass wir uns mit einem Token anstelle eines Benutzernamens und Passworts authentifizieren müssen. Wenn Sie jetzt ein Token haben, gibt diese API an, dass Sie dieses Präfix Bier verwenden müssen. So wird's gemacht. Nicht viel. Auf Lee. In der Autorisierung. Sie haben dieses Bier für Keyword und diesen Token-Wert. Das war's. Das ist der Zugang zur Konservierung von Pose. Und stellen Sie sich vor, wir haben dieses Zugriffstoken. Etwas Wert zu vermitteln. Man kann einen Token-Wert sagen, das ist alles. So benutzt man also diese bessere Kunst. Ich sage es nur noch einmal. Wenn Sie eine API haben, die über einen eigenen API-Schlüssel verfügt, ändern Sie den Autorisierungsschlüssel in diesen bestimmten Schlüssel. Manchmal sagen einige APIs , dass der Schlüssel im Header so sein sollte, und dann der Token-Wert. Sie müssen also die Dokumentation dieser API sehr sorgfältig lesen dieser API sehr sorgfältig , damit Sie keine Fehler machen. Aber denk einfach an den Code hier. Dies geschieht meistens wenn wir irgendeine Art von Authentifizierung durchführen. Ich weiß, dass du vielleicht fragst, okay, aber es gab keine echte API. Also zeige ich dir nur ein paar Beispiele. Erstens können Sie diese Nachrichten-API Punkt ORG ausprobieren. Es wird Ihnen die neuesten, neuesten Nachrichten und alles geben. Sie können den API-Schlüssel von hier abrufen und die Dokumentation lesen, wie diese API verwenden, um sich zu authentifizieren. Der zweite API-Schlüssel, den Sie erhalten können, ist diese OMB-DAPI. Klicken Sie einfach auf diesen API-Schlüssel und schreiben Ihre E-Mail hier und senden Sie sie ab. Auf diese Weise erhalten Sie Ihren API-Schlüssel und können von hier aus direkt auf die gesamte Filmdatenbank zugreifen . Die anderen APIs oder ob ein Paar hier auch Sie können sich den EPI selbst besorgen. Und dann sind dies die APIs, die eine Cali PA-API für aktuelles Wetter bereitstellen. Siehst du so. Also müssen wir nur die Dokumentation richtig lesen und es selbst ausprobieren. Wenn Sie möchten, können Sie bei dieser Pandemie auch die COVID-Tracking-API erhalten, über die Sie alle COVID-19-bezogenen Daten auf der ganzen Welt erhalten. Damit können Sie auch Ihre eigene Anwendung erstellen. Ich hoffe, Ihnen hat diese Sitzung gefallen. Wenn du möchtest, kannst du einfach hier tippen und es selbst ausprobieren. Versuche so viele Fehler zu machen, dass du am Ende ein besserer Entwickler wirst. Danke. 9. Warum wir Modelle brauchen: Hi, willkommen zurück. In diesem Modul werden wir darüber sprechen, was unsere Modelle sind und warum wir sie genau benötigen. Model ist nur die Klasse, die zur Darstellung bestimmter Daten verwendet wird. Jede App funktioniert mit verschiedenen Datentypen. Offensichtlich ist es mithilfe von Modellen einfacher, die Daten aufzurufen und an die Anwendung weiterzugeben. Wenn Sie sich also an die früheren Beispiele erinnern, haben wir früher Daten direkt von einem Bildschirm zum anderen weitergegeben. Das ist die Map selbst oder der Map-Wert-Abschnitt, an dem wir sie übergeben haben. In der realen Anwendung haben die Daten, die vom Server kommen, jedoch die Daten, die vom Server kommen eine komplexe Struktur. Und wir könnten uns nicht von allen Daten an diesen Schlüssel erinnern. Deshalb verwenden wir Modelle. In diesem Beispiel können Sie sehen, wie wir unsere Modelle erstellen. Angenommen, wir haben Daten eines Benutzers. Also erstellen wir einen Klassenbenutzer und Dan Dove, die Werte, die es gibt, das sind die, alle Daten, die sich innerhalb des Üblichen befinden. Sie sollten so in Form von Instanzvariablen geschrieben werden , wie final int, id, final string name. Dann sollte ein Konstruktor da sein , damit wir den Wert übergeben können und er wird ihm zugewiesen. Und diese Factory-Funktion ist nichts anderes als eine Möglichkeit, diese Daten zu transformieren Daten von außen abzubilden. Und dann ein Objekt dieser Klasse zurückgeben. In einfachen Worten, von der Firebase oder von der API erhalten wir zugeordnete Daten , die Daten zuordnen können. Wir werden es hier schicken, das ist ein Benutzer von Jason. Und dann wird ein Objekt zurückgegeben. Das war's. Das sind also die Begriffe, die wir allgemein bei der Arbeit mit Modellen verwenden. Das ist Serialisierung und Deserialisierung. Die Serialisierung besteht darin, Jason in ein intelligentes Objekt zu konvertieren. Und die Deserialisierung dient zum Konvertieren von JSON-Datenobjekten. Entschleunigung werden wir die meiste Zeit tun. Das heißt, Daten, die in diesem JSON- oder Map-Format kommen werden in ein dunkles Objekt konvertiert. Ich weiß, dass es vielleicht so ist, Sie sich von diesem Konzept überwältigt fühlen, aber es ist sehr einfach, wenn Sie erst einmal den Dreh raus haben. Hier müssen wir also eine Klasse für den Umgang mit der Verzögerung erstellen . Und sie wird Modal-Klasse genannt. Sie denken vielleicht, okay, aber auch ohne Modelle konnten wir unsere Aufgabe erfüllen. Das heißt, diese Anwendung hat perfekt funktioniert. Warum brauchen wir also Modelle genau für unsere Anwendung? Schauen Sie sich dieses Beispiel an. Hier haben wir diese Daten im Kartenformat Name, Benutzer-ID, E-Mail. Die obigen Darstellungen stellen sehr grundlegende Benutzerdaten dar . Wir können sehen, dass die JSON-Zeichenfolge diese Dart-Konvertierungsbibliothek verwendet , wie wir es zuvor getan haben. Und das macht es zu einem String-Wert und gibt den Zuordnungswert zurück. den Wert kann dann auf folgende Weise zugegriffen werden. Das heißt, sobald wir die JSON-Zeichenfolge dekodiert haben, können wir danach einfach hi und dann user und username ausgeben, das ist der Name der Schlüssel dafür. Zuordnung als E-Mail ist ein weiterer Schlüssel und Benutzer-IDs und anderer Schlüssel. Also das haben wir vorhin gemacht. Lassen Sie uns nun untersuchen, was bei diesem Ansatz das Problem ist. Leider gibt JSON-Decodierung eine Map zurück, was bedeutet, dass Sie diese Art von Datenwerten erst zur Laufzeit kennen . Also hier ist E-Mail oder diese Benutzer-ID eine ganze Zahl, die wir erst kennen , wenn wir sie hier drucken. Und ob es einen Fehler zeigt oder was auch immer. Bei diesem Ansatz verlieren Sie die meisten statisch typisierten Sprachfunktionen. Das sind Typsicherheit, Autovervollständigung und vor allem Ausnahmen bei der Kompilierung. Also Laufzeit, okay, wir verstehen es. Aber kompiliere Zeit, während wir den Code schreiben. Dann wird es auch nicht angezeigt, uns einen Fehler zu geben. Aber wenn wir Modelle verwenden, wird uns das sagen, dass es sich um eine Ganzzahl handelt. Verwenden Sie keine Zeichenfolge oder was auch immer die Ausnahme ist, ist. Das ist keine gute Praxis. Wenn Sie beispielsweise auf die Namen- oder E-Mail-Felder zugreifen, können Sie auch schnell einen Tippfehler eingeben. Ich nehme an, sein Name hasst E-Mails. Es könnte E, Dash Mail oder was auch immer sein. Hier ist es die Benutzer-ID, ich ist Kapital. Wir könnten es klein schreiben. Solche Fehler sind sehr häufig, wenn wir programmieren. Um diese Probleme zu bekämpfen, kommen Modelle ins Spiel, und wir definieren die Art der Werte genau wie diese. Hier haben wir es genau definiert. Es ist eine Ganzzahl, es ist eine Zeichenfolge. Auf diese Weise sind wir beim Erstellen einer Anwendung auf einer sichereren Seite. Und es macht den Code letztendlich weniger anfällig für Fehler, da die meisten Bereiche während der Kompilierzeit behandelt werden. Ich hoffe, Sie haben verstanden, warum wir Modelle brauchen und Sie haben vielleicht nicht verstanden, wie man sie erstellt, aber kein Problem. In der nächsten Sitzung werden wir unser erstes Modell erstellen. Danke. 10. Erstelle unseren ersten Modellkurs: Hi. In dieser Sitzung werden wir unsere erste Modellklasse erstellen. Bringen Sie also vorher Ihren VS-Code heraus. Und ich habe nachgeahmt. Wenn ich auf ein Produkt als in der Debug-Konsole drücke, können Sie sehen, dass alle Eigenschaften Daten sind, die es hat. Und in diesem Zusammenhang müssen wir unsere Modellklasse im Leaf-Ordner erstellen. Lass uns einen neuen Ordner namens models erstellen. Und darin erstellen wir eine Produktpunktdatei. So erstellen Sie ein Modellglas. Erstellen Sie zunächst eine Klasse namens product. Und jetzt gib hier Alda ein, all diese Daten als Instanzvariablen. Das heißt, ich werde endgültige Tinte, ID, dann letzte Zeichenfolge, Titel, dann steigen. Es ist ein bisschen kompliziert hier, also doppelt. Und ich verwende auch keinen Datentyp. Danach können wir die endgültige String-Beschreibung haben, dann den letzten Bildschirm, die Zeichenfolge, Entschuldigung, Kategorie und dann das endgültige String-Bild. Also ja, das sind die Daten, die ein Produkt haben wird. Erstellen Sie danach einen Konstruktor. Aus dem gleichen Grund. Jetzt muss ich schreiben erforderlich. Dann ist dieser Punkt erforderlich Testpunkttitel erforderlich. Diese Strahlen, diese Beschreibung, dieser Punkt bekommen Grad, dieses Bild. Jetzt haben wir also unsere Produktmodellklasse. Es hat alle Daten. Jetzt müssen wir eine Funktion erstellen, die Jason als Eingabe akzeptiert, und dann wird sie dieses Produktobjekt zurückgeben. Um es zu erstellen, müssen wir nur noch ein Produkt von Jason schreiben. Dann akzeptiert es dynamische String-Werte namens Jason. Ich schreibe einfach JSON. Dann wird einfach ein Produkt zurückgegeben. Jetzt oben im Produkt werden wir bald eine Produkt-ID haben. Dann sagen sie Jason BJs Beschreibung, ist das nicht Korruption. Dann mach einen Abschluss, Jason Abschluss. Und dann haben wir endlich ein Bild. Sehen Sie also, das sind alle Schlüssel, die bereits erwähnt wurden, diese Preiskategorie Beschreibung Bild. Wenn wir diese Funktion aufrufen, senden wir diese Daten hierher und sie geben uns ein Produktobjekt. Das war's. Wir haben erfolgreich unser erstes Modell entwickelt. Jetzt. Um es zu benutzen. Wir müssen zu unserer API-Services-Punkt-Datei gehen. Und es ist an der Zeit, dass wir die notwendigen Änderungen an der Funktion vornehmen. Wisse, dass es viele Funktionen gibt und wir werden damit beginnen Holen Sie sich hier alle Post-Funktionen. Zunächst gebe ich ihm einfach einen Rückgabetyp. Von der Liste der Produkte. Das war's. Das ist also der Rückgabetyp. Jetzt erstelle ich einfach zuerst eine leere Liste der Produkte, nenne sie alle Produkte und sie wird leer. Jetzt werde ich diesen Jason Dodd dekodieren Körper in einer Variablen hier haben. Und ich werde diese Jason-Sache durchgehen , die alle Produkte enthält. Ich werde eine Schleife durchgehen und mir hier ein bestimmtes Produkt besorgen. Und einfach, in allen Produkten werde ich ein Produkt von Jason hinzufügen und hier das JSON senden. Das war's. Und am Ende werde ich alle Produkte zurückgeben, das ist eine Liste von Produkten. Was ich hier gemacht habe, ist, dass ich zunächst ein leeres Array erstellt habe, das wir am Ende übergeben werden. Und es wird das Produktobjekt enthalten , wenn es sich um eine Liste des Produktobjekts handelt. Jetzt werden diese Jason response.body im JSON-Format in der Liste des JSON-Formats vorliegen. Also werden wir es einfach durchlaufen und das gesamte Produkt hinzufügen, nachdem wir es über dieses konvertiert haben. Das ist ein Produkt, das von JSON in dieser Produktliste enthalten ist und alle Produkte zurückgegeben hat. Danach müssen wir die Änderungen auf dem Startbildschirm vornehmen , auf dem es ausgegeben wird. Hier, wo wir die Produkte bekommen. Dieser asynchrone Snapshot gibt uns jetzt ein Objekt, kein Objekt, es wird eine Liste von Produkten sein. Zunächst erstelle ich einfach eine Variable, erstelle ich einfach eine die die Indexdaten enthält. Das ist ein einziges Produkt hier. Da es den gesamten Snapshot durchläuft, erhalten wir hier ein einziges Produkt. Und danach müssen wir einfach einen Produktpunkttitel wie diesen schreiben . Also ist es so einfach. Produkt, Bild, Produkt, der Preis dot toString. Und am Ende schreibe ich hier einfach Produkt, Produkt-ID. So wie das. Prüfen wir, ob es funktioniert oder nicht. Ich habe die Anwendung neu gestartet, aber vorher können Sie sehen, wie einfach es ist, den Wert jetzt auszugeben. Wir müssen den Schlüssel nicht immer wieder schreiben, wir können diesen Punktoperator einfach direkt verwenden und wir werden die Daten erhalten. Es besteht aus. Wenn ich jetzt auf diesen Login-Button klicke, findest du hier alle Daten die schon vorher da waren, aber jetzt verwenden wir hier Modelle. Dies ist also eine minimale Erklärung Modelle und warum wir sie verwenden. Und vertrauen Sie mir, wenn Sie viele Daten haben, Modelle für Sie sehr nützlich. Im nächsten Video werden wir Modelle für Produktdetails und andere Seiten verwenden . Danke. 11. Änderungen in Frontend: Hi. Im letzten Video nehmen wir diese Änderungen auf dem Startbildschirm vor , damit wir diese Daten von der API abrufen und die neben unserer Modellklasse ändern können , dh die Produktmodelle weniger. In dieser Sitzung werden wir jetzt auch die erforderlichen Änderungen in der Einzelproduktfunktion vornehmen . Um das Modell zurückzugeben. Bringen Sie Ihren VSCode-Editor heraus und gehen Sie zu APA-Umfragen Punkt neun. Das erhält eine Einzelproduktfunktion. Wir werden einfach, wir werden kein JSON zurückgeben. Stattdessen werde ich diese Daten in jedem Geschäft aufbewahren, diese Daten in einer Variablen namens Töpfchen. Und dann werde ich einfach den Produktpunkt von Jason drehen und den Körper darin weitergeben. Es wird also ein einzelnes Produktobjekt zurückgegeben. Und das brauchen wir. Okay? Wenn wir die Änderung an einem einzelnen Produkt vorgenommen haben, müssen wir auf jeden Fall die Änderung an einem einzelnen Produkt vorgenommen haben, auch zum Produktdetailbildschirm gehen. Nehmen Sie die Änderungen vor, um ein Modell zu verwenden. Statt dieser Jason-Sache. Wir haben unseren zukünftigen Baumeister hier. Wir bekommen das Modell , das das Produktmodell ist. In diesem Schnappschuss. Hier schreibe ich einfach diesen Datentyp Produkt und speichere ihn dann in Snapshot-Punktdaten. Okay? Jetzt haben wir dieses Produkt hier und ich werde einfach alles hier entfernen. Und ich habe das Punktbild angesprochen, dann den Produktpunktpreis als die Produkt-Punkt-Produktkategorie . Und schließlich die Produktpunktbeschreibung. Sie können also selbst sehen, dass es so viel ordentlicher und einfacher ist, wenn wir Modelle verwenden. Denn auf jeden Fall beim Schreiben von Map, das ist Jason, können wir in diesem Schlüssel einen Fehler machen , dass diese Rechtschreibfehler oder was auch immer. Es ist also besser, wenn wir Modelle verwenden. Lass es uns testen. Funktioniert es richtig oder nicht? Wenn ich auf Anmelden klicke, gelangen wir zum Startbildschirm. Und wenn ich auf dieses Produkt C klicke, gibt es keinen Fehler. Ich habe das geändert, aber es funktioniert perfekt. Also denkst du vielleicht, okay, unsere Arbeit hier ist getan. Wenn ich jedoch auf diese Kartenschaltfläche klicke, wird dieser Fehler angezeigt, da wir auch diesen Karteikartenbildschirm vergessen haben. müssen wir ändern, da es auch diese Funktion verwendet. Das bekommt hier ein einziges Produkt. In ähnlicher Weise müssen wir hier dasselbe tun. Ich werde diesen Produktdatentyp verwenden. Und dann synchronisiere Snapshot-Punktdaten. Okay? Und dann schreibe einfach hier, Produktpunkt, Produktpunktbild. Dann hier diese Menge, es ist okay, weil wir diese Menge von hier bekommen. Das müssen wir also nicht ändern. Aber okay, ich habe Check-Knoten, es gibt keine andere Sache zu ändern. Sehen wir uns unsere Anwendung noch einmal an. Ob es gut funktioniert oder nicht. Ich klicke auf den Login. Okay. Wir sind auf dem Startbildschirm. Wenn ich jetzt auf die Karte klicke, sehe ich, dass kein Fehler vorliegt. Nun, da wir auch hier Modelle anstelle von Map- oder Rohdaten von Jason verwenden. Das war's. So sollten wir Modelle verwenden und implementieren. Im nächsten Video werden wir über einige andere Tools sprechen, werden wir über einige andere Tools sprechen mit denen wir auf einfache Weise Modelle erstellen können. Danke. 12. Werkzeug zur einfachen Generierung von Modellen: Hi. Bis jetzt erstellen wir unsere Modelle selbst. Nehmen wir an, in diesem Produkt war es einfach, weil es nur vier Variablen oder Daten gab . Deshalb haben wir das alles alleine gemacht. Aber wenn wir APIs verwenden, wird es oft Daten geben, die sehr komplex sind. In diesem Szenario benötigen wir möglicherweise einige Tools, mit denen wir unsere Modelle einfach erstellen können. Auf dem Markt gibt es nur wenige Tools , die diese Aufgabe erheblich erleichtern. Es gibt zwei Herangehensweisen. Eine verwendet ein Online-Tool und die andere Methode verwendet Abhängigkeiten. Hier können Sie sehen, dass wir eine Abhängigkeit namens JSON serialisierbar haben. Das kannst du benutzen, wenn du willst. Definitiv benutzen viele Leute es. Ich werde dir nur Jason serialisierbar zeigen. Okay, und dann höre ich zu, dass ich packe. Sehen Sie, das ist das Paket, von dem ich spreche. Dies wird Jason serialisierbar genannt. Wenn Sie möchten, können Sie es auf jeden Fall verwenden. Sie werden viele Ressourcen finden, wie Sie es verwenden können. Aber in dieser Sitzung werde ich dieses Online-Tool namens „ Quick Type.io“ verwenden . Ist das auch perfekt. Beide werden stark genutzt. Also schau mal ob ich einfach flatternd unseren Dart Jason zum Model schreibe . Dann bekommst du hier beide. Okay, schätze ich. Ja, das ist sofort Parse Json in jeder Sprache. Okay? Wir haben das hier. Und um es praktisch zu machen, werde ich eine andere APA verwenden. Zuvor haben wir diese gefälschte Store-API verwendet. Aber jetzt möchte ich diese API nicht mehr verwenden , da wir bereits wissen, dass die Daten von ihr bereitgestellt werden. Also werde ich dieses fruchtige vice.com verwenden. Es ist ein Webservice, der Daten für alle Arten von Obst liefert. Es ist eine kostenlose API. Deshalb benutze ich es. Und hier siehst du alle Endpunkte. Es erlaubt. So können wir die Daten einer bestimmten Frucht wie dieser erhalten. Und wir können auch alle Früchte von diesem Endpunkt bekommen, das heißt APS Slash Fruits Slash on. Dieser Endpunkt gibt uns eine Liste dieser Kartendaten, die alle Früchte enthalten. Ohne weitere Zeit zu verschwenden, möchte ich Ihnen zeigen, wie Sie dieser App quick.io Modelle erstellen können. Also hier schreibe ich einfach apple und tippe enter. Es wird uns die Datenstruktur wie diese geben. Hier kann man sagen, dass es nicht so komplex ist, aber diese KEY-Zeichenfolge, der Wert ist string, string, ist eine ganze Zahl, aber diese Nährstoffe sind wieder ein Map-Wert, der enthält String-Schlüssel und double als Werte. Also kopiere ich einfach diese Struktur und gehe zu dieser App dot quick type und füge sie hier ein. Aber bevor Sie einfügen und sich nur an Ihre Sprache erinnern, müssen Sie Dart verwenden. Und dann entferne ich einfach alles hier füge es in den Namen ein. Du musst diesen Fruchtnamen schreiben. Du und nicht du musst, du kannst hinzufügen, was ich will. Aber da es sich um Daten einer bestimmten Frucht handelt, lese ich mich durch. Okay? Jetzt in der Ausgabe sehen Sie, dass wir dieses Modell hier haben. Das, vieles wurde automatisch gemacht oder sonst mussten wir alles selbst schreiben und das ist nicht immer machbar. Also einfach, was ich jetzt tun werde, ist alles zu kopieren, all diese Daten und zu unserem VS-Code zu gehen. Und im Modellordner erstelle ich einfach ein Modell namens Fruit dot dot und füge dann alles hier ein. Sie könnten also sagen, dass diese Ära nur daran liegt , dass die Daten hier nicht null sind, so. Und da es erforderlich ist, müssen wir einfach das erforderliche Schlüsselwort schreiben , damit dieser Fehler behoben ist. Das war's. Dann auch die Ernährung, wir müssen sie einfügen und Alda hat hinzugefügt ist jetzt behoben. Wenn Sie also in der heutigen Klasse nachschauen, ist das Einzige, was erforderlich ist, dies. Dies sind die Daten oder die Variablen. Dann akzeptieren wir dies durch diesen Konstruktor von Jason. Wir haben es bereits in dem Produkt gemacht. Warum? Wenn wir fix oder API verwendet haben, wird es automatisch erstellt. Diese Json-Sache erstellt nur benachbarte Daten im JSON-Format und erstellt von Jason die Daten in diesem Modellformat. Und jetzt denken Sie vielleicht darüber nach, warum es zwei verschiedene Klassen gibt, auch die Ernährungsklasse. Nur weil dieser Nährwert wieder eine Landkarte ist. Was auch immer wir in map haben, wird wieder in eine Klasse umgewandelt. Diese Ernährung enthält also Kohlenhydrate, Proteine, Fette, Kalorien, Hoover, diese Werte. Also nochmal, dies ist eine Klasse und vertrauen Sie mir, das wird uns sehr helfen denn im Moment haben alle diese Daten ihren Datentyp intakt. Wir werden also bei der Dosis keinen Fehler machen. Und wenn du sehen willst, welche Antwort wir so bekommen werden, kannst du einfach so auf diapers.com gehen und einfach schreiben, das ist die Antwort, mit der wir uns befassen werden. Sie sind vielleicht gerade überwältigt, aber glauben Sie mir, das ist einfach, diese Daten sind nur eine Daten. Und danach wird es mit verschiedenen, unterschiedlichen Früchten wiederholt. Das war's. Wir haben also gelernt, unser JSON-Modell zu erstellen. Ohne Herz, ohne alles selbst zu tippen. Normalerweise verwende ich diese Art von Online-Tools, weil sie die Arbeit sehr schnell erledigen und wir uns nicht um die Datentypen kümmern müssen und ob es etwas ist, wenn etwas nicht stimmt. Im nächsten Video werden wir also unsere Funktionen in der Saw Dart-Datei der API-Services erstellen unsere Funktionen in der Saw Dart-Datei der API-Services , um alle Fruchtdaten abzurufen und in unserer Anwendung anzuzeigen. Danke. 13. Verbrauche eine neue Pause api: Willkommen zurück. Jetzt haben wir unser Modell fertig. Es ist Zeit. Wir erstellen eine Funktion in unserer API-Services-Punkt-Datei. Damit wir wie zuvor die Früchte holen können, alle Fruchtdaten. Also geh einfach runter und gib einen Kommentar zu Obst holen ab. Dann werden wir einfach eine zukünftige Funktion namens get on fruits haben namens get on fruits und definitiv wird sie als sinc-Funktion gewinnen. Dann haben wir eine Frucht-URL-Variable. Und hier werden wir unseren URI analysieren, das ist URL, der hier ist. Entschuldigung, ja. Welches wird dieser API-Schrägstrich sein, Früchte schneiden diesen. Geh einfach und füge es ein. Ich verwende dieses kostenlose API-Soda. Ich muss die API-Schlüssel des Kontos nicht erstellen . Diese Daten sind null. Aber du, ich habe dir bereits beigebracht, wie man auch eine authentifizierte Anfrage stellt. Wenn Sie möchten, können Sie es auch mit anderen APIs versuchen. Wir haben also diese Antwort hier. Einfach, dass es das p dot get ist. Dann auf Frucht-URL. So wie das. Dann werde ich einfach eine Parteivariable erstellen. Und Jen, hier werde ich json dot d-Code schreiben , damit er in eine Zeichenfolge dieses Antwortkörpers in eine Map konvertieren kann eine Zeichenfolge . Das war's. Dies ist nur die Arbeit dieser JSON-Punkt-Decodierung. Es konvertiert einen String in ein JSON-Format. Das war's. Jetzt hier. Zuvor haben wir hier eine Liste von Produktvariablen erstellt eine Liste von Produktvariablen und sie dann einem leeren Array zugewiesen. Und dann verwenden wir einfach diese for-Schleife und fügen alle Daten hinzu. Das sind diese einzelnen Daten dazu. Aber jetzt zeige ich Ihnen eine andere Art, dasselbe zu tun. Es macht nur den Job in einer Zeile, diese Studienfront. Ich besorge mir diese Liste mit Früchten. Ich nenne alles Früchte. Dann schreibe ich einfach Party Dot Map. Ich werde hier eine bestimmte Frucht bekommen. Und dann, und ich werde es durch die zwei Tage von der JSON-Funktion senden . Okay? Und einfach werde ich endlich erstellen, ich werde alles zu einer Liste machen. Was es tut, ist das Mapping durch den Körper, das ist diese Reaktion. Und dann konvertieren Sie jede Art und Weise, wie sie an das Fruchtobjekt grenzen, und geben Sie es dann zurück. Das heißt, es gibt es zurück. Und schließlich ist alles, was danach erledigt ist, dieses Mapping abgeschlossen. Alles wird in eine Liste umgewandelt. Das war's. Und einfach werde ich alle Früchte hier zurückgeben. Und diese Funktion gebe ich ihr diese generische Datentypliste von Früchten, damit wir wissen, was sie zurückgibt. Okay? Also ist dieser Teil fertig. Unsere Funktion ist bereit. Jetzt ist es an der Zeit, einen neuen Bildschirm zu erstellen, damit wir diese Werte dem Applet in der Anwendung anzeigen können. Ich nenne es einfach alles Früchte dot, dot. Importieren Sie jetzt wie üblich Material. Dann nenne jede Staatslistenklasse von mir Früchte Bildschirm. Jetzt wird ein Gerüst in der App zurückgegeben. Geben wir ihm eine Höhe von 0. Hintergrundfarbe der Farben dot arrange x. Und dieses Mal werde ich alles Früchte geben. Und zentriere dann, dass ich diesen Körper eingezeichnet habe. Lass uns einen zukünftigen Baumeister haben. Ich hoffe, Sie fühlen sich jetzt sehr wohl mit dieser Art von Code, da wir das seit sehr langer Zeit tun . Ich verwende API-Dienste und erhalte dann alle Früchte. So einfach ist das. Dieser Builder wird einen Kontext und eine Momentaufnahme haben. Es wird in einem einzigen Schnappschuss sein. Dann überprüfe ich das. Wenn der Schnappschuss DOD die Taube hat. Wenn nicht, gebe ich eine kreisförmige Fortschrittsanzeige zurück. Und wenn es Daten hat, kehre ich in der Listenansicht Dot Builder zurück. Jetzt ist die Anzahl der Artikel Snapshot Dot, Dot, Dot, Länge. Und Item Builder wird weg sein, Texte und Index. Jetzt erstelle ich hier eine Variable, einen Typ float, und speichere diesen Snapshot-Wert in einem Snapshot-Punktdaten und dann im Index. Es wird also dieses einzigartige Produkt sein. Das war's. Und dann gebe ich es zurück, gebe eine Karte zurück. Und darin habe ich eine untergeordnete Eigenschaft und dann das Budget im Listenstil. In diesem Titel werde ich also ein Zentrum haben und dann das Kind, das uns zeigt, was uns den Fruchtnamen zeigt, das ist der Name des Lebensmittelpunkts. So einfach ist das. Nur aufgrund von Objekten können wir unsere Variablen jetzt so einfach ausgeben oder verwenden. Und dann möchte ich im Untertitel alle Nährwerte zeigen , also Protein, Kohlenhydrate und Fette. Diese einfach, ich werde ein Text-Widget haben. Es wird Karton hohe Raten schreiben. Und jetzt werde ich diesen Fruchtwert verketten. Und dann ein Punkt, dann Nährstoffe, dann Punkt und sehen. Jetzt kann ich einfach Karbide von hier aus verwenden , nur weil es in einem anderen Objekt gespeichert ist. Sonst musste ich diese wichtigen Kohlenhydrate verwenden und werde den Fehler auf jeden Fall hier machen. Ich kopiere es einfach und füge es zweimal ein. Der zweite wird Protein sein. Es wird einfach Protein sein. Und der dritte wird fett sein. Und es wird einfach fett sein. Das war's. Jetzt in der Reihe werde ich eine Hauptachsenausrichtung des Haupt-Existierungspunktraums gleichmäßig geben , nur um es gut aussehen zu lassen. Um es zu testen, müssen wir jetzt zu unserer Hauptpunktpunktdatei gehen. Und statt dieser Login-Datei müssen wir diesen Fruchtbildschirm schreiben. Das war's. Schauen wir es uns an. Ich habe meine Bewerbung neu gestartet. Okay, der Bildschirm sieht gut aus und alle Daten sind hier. Apfel, Aprikosen, Banane und dieses kohlenhydrathaltige Proteinfett. Wenn Sie möchten, können Sie diese Janus-Familienbestellung unabhängig von der Anzahl der Kalorien ausgeben . Wenn Sie möchten, können Sie diese auch ausgeben. Ich verwende nicht sowohl die führende als auch die nachfolgende Eigenschaft des Listenstils. Ich will dir nur zeigen, wie das geht. Wie wir mit Online-Tools so einfach Modelle erstellen können. Und wir haben auch erfolgreich eine neue API konsumiert, die so fruchtig ist. Und wenn Sie möchten, können Sie auch einen anderen Bildschirm erstellen, um ein einzelnes Fruchtdetail anzuzeigen, wenn Sie möchten, es liegt an Ihnen. Aber ich hoffe euch haben unsere Videos bis hier gefallen. Dieses Modell war sehr wichtig , da Sie in der realen Anwendung Modelle für alles erstellen Benutzer, Kontexte oder andere was Benutzer, Kontexte oder andere Daten oder Informationen sind, die Sie in Ihrem -Anwendung erstellen Sie Modelle dafür. Das war's also für diese Sitzung. Wir sehen uns im nächsten Modul. Danke.