Planen wir
also die App, die wir erstellen, und erstellen eine grundlegende Einkaufs-App, einen einfachen
Online-Shop in einer App, die man sagen könnte. Daher benötigen wir in dieser Anwendung hier definitiv eine Reihe von
Produkten,
die aufgelistet werden können. Wir haben also einen Produktübersichtsbildschirm, auf dem wir diese Karten mit unseren Produkten, mit einem
Bild, mit dem Titel und dem Preis sehen Vielleicht so etwas und auch ein Warenkorb oder eine
Schaltfläche zum Hinzufügen zum Warenkorb und eine Schaltfläche zum Detail, also im Grunde eine Schaltfläche, mit der wir zu einer
Detailseite wechseln können, und eine Schaltfläche, mit der wir dies zu einem
Warenkorb hinzufügen können.
Wenn Sie hier auf diese Warenkorb-Schaltfläche tippen und
diese Warenkorb-Schaltfläche auswählen, wird diese einem Warenkorb hinzugefügt, und Sie können diesen Warenkorb mit einer Aktionsschaltfläche hier in
der Aktionsleiste erreichen, also in der
oberen Kopfzeile, dort I. Ich möchte ein solches Warenkorbsymbol haben, wahrscheinlich ein
bisschen schöner als das, was ich hier gezeichnet habe, aber dieses Symbol hier am Ende ermöglicht es
uns, danach auf eine separate Seite zu gehen, einen separaten Bildschirm dieser Anwendung, auf dem wir
natürlich auch dorthin zurückkehren können Wir werden hier eine Gesamtsumme in Dollar sehen, die sich aus unseren gesamten Warenkorbartikeln ergibt, und dann
eine Liste unserer Artikel wie ein Buch und was
dies kostet und
so etwas.
Im Grunde sehen wir unseren Warenkorb hier, wir sehen eine Summe
davon und dann sehen wir die einzelnen
Artikel und natürlich möchte ich auch einen Button haben, mit dem ich bestellen kann, was sich im Warenkorb befindet, und
eigentlich sollte dieser Button nicht darunter liegen Also, hier haben
wir einen Bestellknopf.
Eigentlich sollte dies hier
sein, also möchte ich hier eine Zeile haben, in der wir die Gesamtsumme und daneben den Bestellknopf haben.
Das ist also
im Grunde das Ziel, aber Sie
können dies platzieren, wo immer Sie wollen. Am Ende möchten wir einen Button haben, mit dem wir
alles
bestellen können, was wir im Warenkorb haben, und auf jedem Warenkorbartikel möchte ich auch ein Müllsymbol haben Hier kann ich einen Artikel aus dem Warenkorb löschen.
Wenn dies eine Bestellung aufgibt, löscht dieses Symbol hier im Grunde nur einen Artikel aus dem
Warenkorb.
Das ist
also die Idee. Wenn Sie denselben Artikel mehrmals in den Warenkorb legen, sollten Sie dafür nicht mehrere Zeilen
hinzufügen. Stattdessen möchte ich hier auch eine Menge des Artikels anzeigen, die sich einfach erhöht, wenn wir mehr hinzufügen oft in
den Warenkorb und was abnimmt, wenn wir es löschen, bis alle Artikel gelöscht sind. In diesem Fall
würde die gesamte Zeile hier gelöscht.
So funktioniert diese Warenkorbseite,
dies ist die Übersichtsseite hier, daher können wir natürlich auch auf die Detailschaltfläche oder vielleicht auf den Artikel im Allgemeinen tippen,
also irgendwo auf dem Bild oder so etwas,
und dann sollten wir zu einem weitergeleitet werden Detailseite.
Das ist also ein weiterer Bildschirm in dieser Anwendung, auf den wir natürlich auch zurückgehen können.
Das ist die Detailseite des Symbols, auf
der wir das Bild sehen sollten. Wir sollten wahrscheinlich den
Titel hier in der Kopfzeile sehen, also wäre das der Titel des Elements. Darunter sehen wir dann den Preis, wir sehen die Beschreibung und
wir möchten wahrscheinlich auch hier einen Warenkorb-Button haben, über den wir hier auch Artikel in
den Warenkorb legen können. Das ist also der Fluss in Bezug auf unsere Produkte, die wir
hier haben. Das
Wichtigste in dieser App ist nun, dass wir nicht nur Produkte sehen und
einkaufen und in den Warenkorb legen können, sondern natürlich auch unsere Bestellungen anzeigen und vor
allem neue Produkte hinzufügen können.
Daher brauchen wir hier eine Schublade, und diese Schublade bietet uns einige Optionen. Die erste Möglichkeit ist natürlich, dass wir sozusagen
in unseren Shop gehen. Das ist dieser Teil hier, in dem wir uns befinden, wenn
die App startet.
Die zweite Option sollte unsere Bestellung
sein und die dritte Option sollte wie eine Option zum Verwalten von Produkten sein, bei der wir unsere eigenen Produkte verwalten
können, die Sie anderen Benutzern anbieten möchten.
Wie gesagt, Shop ist im Grunde das, was wir bereits sehen.
Wenn wir nun auf Bestellungen tippen, möchte ich zu einem Bildschirm weitergeleitet werden, auf dem wir natürlich auch diese Schublade öffnen können, da wir
dann zurückkehren können, aber auf diesem Bildschirm sollten
wir die Bestellungen sehen, bei denen wir im Grunde genommen Artikel haben, bei denen Wir sehen
sozusagen die Summe dieser Reihenfolge, das Datum und dann auch eine Schaltfläche, auf die wir tippen können, wo wir weitere Details sehen. Wenn wir auf
diese Schaltfläche tippen, haben wir diesen optionalen Bereich, der sich öffnet oder schließt und dort, ich Grundsätzlich möchten wir die
Artikel der Bestellung sehen, was im Grunde das ist, was wir im Warenkorb hatten.
Wir hatten hier also zwei Bücher mit einem Preis von 19, also würde dies hier im Detailbereich auftauchen,
wenn wir dies öffnen.
Das ist also die
Idee hier
in der Bestellung. Wir können eine Bestellung erweitern, sodass wir nicht nur die Summe und das Datum sehen, sondern auch die
Warenkorbartikel, die wir dort im
Grunde genommen abgelegt haben, also im Grunde das, was wir hier im Warenkorb hatten. das taucht in den Bestellungen auf.
Das ist also der
Bestellbildschirm, wir haben auch Produkte verwaltet und lassen Sie uns das hier vielleicht zeichnen. Verwaltete Produkte sind ein weiterer Bereich dieser App, in dem wir
auch diese Menüschaltfläche haben, um diese Schublade wieder zu öffnen, damit wir die anderen Teile der App erreichen können, aber hier
im Bildschirm für verwaltete Produkte, wo wir unsere eigenen Produkte haben, also die Benutzerprodukte und In dieser App werden
wir noch keine Authentifizierung hinzufügen, aber wir werden dies später hinzufügen, aber hier haben wir unsere
eigenen Produkte. Hier ist
die Idee wieder, dass wir im Grunde eine Liste von Produkten sehen, die ziemlich nah an dem ist, was
wir hier auf dem Shop-Bildschirm sehen, so dass wir unsere Karten hier mit einem Bild, mit dem Titel und dem Preis vielleicht haben, also
wir Ich kann diese Liste hier wahrscheinlich wiederverwenden, aber natürlich
sind die Optionen, die wir für jedes Produkt haben, unterschiedlich. Anstatt es einem Einkaufswagen hinzuzufügen und
die Details anzuzeigen, können wir es löschen, das ist
eine Schaltfläche, und wir können es auch bearbeiten. Natürlich können wir nur unsere eigenen Produkte bearbeiten, aber
auch hier haben wir keine echte Benutzerzuordnung. Wir können dies mit einer Dummy-Benutzer-ID tun, die wir jedem Produkt hinzufügen,
aber das war's erstmal.
Wir haben also die Schaltfläche zum
Bearbeiten und Löschen, jetzt zusätzlich hier in der Kopfzeile,
also brauchen wir hier mehr Platz. In der Kopfzeile haben wir auch eine Aktionsschaltfläche, mit der wir ein neues Produkt
hinzufügen können.
Im Grunde sollte das hier nur ein bisschen breiter sein, ich habe das zu eng gezogen.
Wir haben also diese Aktionsschaltfläche hier und diese Aktionsschaltfläche hier, diese Plus-Schaltfläche. Dies sollte uns zu einer
neuen Seite führen, auf der
wir ein neues Produkt hinzufügen können. Dadurch gelangen wir zur hier hinzugefügten Produktseite, auf der wir natürlich gehen können Hin und wieder können wir ein neues
Produkt hinzufügen. Dadurch können wir hier einen Titel mit einer Texteingabe hinzufügen. Die Texteingabe kann sich auch unter
der Titelbezeichnung befinden. Sie können diese erstellen, wie Sie möchten.
Wir sollten in der Lage
sein, den Preis hinzuzufügen, wir sollten in der Lage sein, hier eine Beschreibung hinzuzufügen, möglicherweise eine mehrzeilige Eingabe
hier, wir müssen natürlich auch in der Lage sein, eine imageUrl hinzuzufügen.
Das können wir also hier hinzufügen, und dann brauchen wir hier in der Aktionsleiste eine Schaltfläche, eine Häkchenschaltfläche
oder ähnliches, mit der wir dies bestätigen können. Wir werden uns in dieser Phase nicht allzu sehr um
die Bearbeitung
von Benutzereingaben kümmern, da ich ein separates Modul haben werde, in dem ich mich mit allen Details befasse, wie Sie dies
auf elegante Weise tun können, wie Sie eine Validierung hinzufügen können. Hier in dieser App behalten wir dies sehr einfach
bei. Wir werden nicht prüfen, ob der Benutzer etwas Richtiges oder Ähnliches eingegeben hat. Wir
werden dies später im Kurs tun.
Hier haben wir gerade diese grundlegende Eingabe gesammelt, als diese Schaltfläche hier, diese Häkchen-Schaltfläche hier
gedrückt wird, wir zu dieser Seite zurückkehren und natürlich Redux in unserem Statusverwaltungssystem verwenden, um ein neues
Produkt zur Liste der Produkte hinzuzufügen, die dann taucht auch hier in unserem Shop auf und was hier natürlich
in unserer Produktliste auftaucht, die wir verwalten können.
Das haben wir also hier.
Wenn wir hier auf Bearbeiten tippen und diese Schaltfläche zum Bearbeiten hier auswählen, werden wir auch zu derselben Seite zum Bearbeiten von Produkten
weitergeleitet, aber jetzt haben wir hier natürlich einige vorab ausgefüllte Werte, die mit dem von uns geladenen Produkt vorab ausgefüllt sind, und es gibt bestimmte Felder,
die Wir können nicht bearbeiten, zum Beispiel
sollte der Preis nicht bearbeitet werden können, denn wenn der Preis bearbeitet werden könnte, wäre dies ein Problem,
wenn wir ihn bereits im
Warenkorb hätten. Wir erlauben daher nicht, den Preis hier
zu bearbeiten ermöglicht jedoch die Bearbeitung des Titels, der Beschreibung und
der imageUrl, so dass dies möglich ist.
Das ist der einzige
Unterschied, wir haben Felder vorab ausgefüllt und der Preis kann nicht bearbeitet werden.
Wenn wir im Bearbeitungsmodus das Häkchen drücken und herausfinden können, ob wir bearbeiten oder nicht, indem
wir beispielsweise eine Produkt-ID als Parameter erhalten haben. Sobald wir die Bearbeitung
abgeschlossen haben, können wir dieses Häkchensymbol drücken und dann werden wir auch zurückgenommen und speichern einfach alles,
was wir hier bearbeitet haben, zurück in unser Produkt.
Dies ist die App hier.
Wie bereits erwähnt, wird dies auch eine Grundlage für die nachfolgenden Module sein.
Dort werden wir dann auch die HTTP-Anforderung und die Authentifizierung hinzufügen. Wir werden die gesamte Formularvalidierung hier auf elegantere Weise durchführen
und so weiter, aber dieses
Modul hier ist es jetzt Eine großartige Übung, wie man eine solche App erstellt, wie man mit
Komponenten arbeitet, sie formatiert, wie man eine Navigation hinzufügt, da diese App offensichtlich viel Navigation
enthält und wie man unseren Status in dieser Einkaufs-App verwaltet.
Wie ich in der letzten Vorlesung erwähnt habe, könnten Sie dieses Modul überspringen, aber dann sollten Sie auf
jeden Fall in den fertigen Code eintauchen, damit Sie in den nächsten Modulen mitmachen können, aber meine Empfehlung ist natürlich,
dass Sie a) entweder alles ausprobieren Sie selbst und natürlich wird Ihr Ergebnis nicht das gleiche sein, das ich bekomme. Sie sollten
sich also auf jeden Fall auch meine Videos danach ansehen, um zu sehen, wie ich das gemacht habe, und damit Sie
die gleiche Codebasis haben, der Sie folgen können,
aber dies wird eine großartige Übung sein Selbst wenn Ihr Ergebnis zuerst da ist, weil es nicht unbedingt einen
falschen oder richtigen Ansatz gibt, oder b) Ihre andere Option ist natürlich, dass Sie es nicht selbst versuchen und einfach mitmachen, auch
eine gültige Option,
aber ich glaube, Sie werden es tun Holen Sie ein bisschen mehr aus dem Kurs heraus, wenn Sie
es zuerst
selbst versuchen, aber am Ende tun, was Sie wollen. In der nächsten Vorlesung werden wir gleich darauf eingehen und mit dem Aufbau dieser
App beginnen.