1 00:00:02,060 --> 00:00:03,200 Planen wir 2 00:00:03,200 --> 00:00:08,920 also die App, die wir erstellen, und erstellen eine grundlegende Einkaufs-App, einen einfachen 3 00:00:08,930 --> 00:00:17,120 Online-Shop in einer App, die man sagen könnte. Daher benötigen wir in dieser Anwendung hier definitiv eine Reihe von 4 00:00:17,120 --> 00:00:17,680 Produkten, 5 00:00:17,710 --> 00:00:24,590 die aufgelistet werden können. Wir haben also einen Produktübersichtsbildschirm, auf dem wir diese Karten mit unseren Produkten, mit einem 6 00:00:24,680 --> 00:00:30,770 Bild, mit dem Titel und dem Preis sehen Vielleicht so etwas und auch ein Warenkorb oder eine 7 00:00:30,770 --> 00:00:37,930 Schaltfläche zum Hinzufügen zum Warenkorb und eine Schaltfläche zum Detail, also im Grunde eine Schaltfläche, mit der wir zu einer 8 00:00:37,970 --> 00:00:42,440 Detailseite wechseln können, und eine Schaltfläche, mit der wir dies zu einem 9 00:00:42,440 --> 00:00:43,730 Warenkorb hinzufügen können. 10 00:00:43,760 --> 00:00:47,060 Wenn Sie hier auf diese Warenkorb-Schaltfläche tippen und 11 00:00:47,060 --> 00:00:53,900 diese Warenkorb-Schaltfläche auswählen, wird diese einem Warenkorb hinzugefügt, und Sie können diesen Warenkorb mit einer Aktionsschaltfläche hier in 12 00:00:53,900 --> 00:00:56,360 der Aktionsleiste erreichen, also in der 13 00:00:56,390 --> 00:01:01,300 oberen Kopfzeile, dort I. Ich möchte ein solches Warenkorbsymbol haben, wahrscheinlich ein 14 00:01:01,570 --> 00:01:08,060 bisschen schöner als das, was ich hier gezeichnet habe, aber dieses Symbol hier am Ende ermöglicht es 15 00:01:08,060 --> 00:01:14,480 uns, danach auf eine separate Seite zu gehen, einen separaten Bildschirm dieser Anwendung, auf dem wir 16 00:01:14,480 --> 00:01:23,240 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 17 00:01:23,510 --> 00:01:26,910 eine Liste unserer Artikel wie ein Buch und was 18 00:01:26,930 --> 00:01:28,360 dies kostet und 19 00:01:28,520 --> 00:01:29,510 so etwas. 20 00:01:29,540 --> 00:01:33,140 Im Grunde sehen wir unseren Warenkorb hier, wir sehen eine Summe 21 00:01:33,140 --> 00:01:35,580 davon und dann sehen wir die einzelnen 22 00:01:35,630 --> 00:01:42,470 Artikel und natürlich möchte ich auch einen Button haben, mit dem ich bestellen kann, was sich im Warenkorb befindet, und 23 00:01:42,530 --> 00:01:46,070 eigentlich sollte dieser Button nicht darunter liegen Also, hier haben 24 00:01:46,070 --> 00:01:47,530 wir einen Bestellknopf. 25 00:01:47,600 --> 00:01:48,890 Eigentlich sollte dies hier 26 00:01:48,890 --> 00:01:53,450 sein, also möchte ich hier eine Zeile haben, in der wir die Gesamtsumme und daneben den Bestellknopf haben. 27 00:01:54,110 --> 00:01:55,310 Das ist also 28 00:01:55,310 --> 00:01:57,250 im Grunde das Ziel, aber Sie 29 00:01:57,250 --> 00:02:02,930 können dies platzieren, wo immer Sie wollen. Am Ende möchten wir einen Button haben, mit dem wir 30 00:02:02,930 --> 00:02:03,470 alles 31 00:02:03,470 --> 00:02:12,150 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. 32 00:02:12,200 --> 00:02:22,300 Wenn dies eine Bestellung aufgibt, löscht dieses Symbol hier im Grunde nur einen Artikel aus dem 33 00:02:22,300 --> 00:02:23,410 Warenkorb. 34 00:02:23,410 --> 00:02:24,220 Das ist 35 00:02:24,220 --> 00:02:29,760 also die Idee. Wenn Sie denselben Artikel mehrmals in den Warenkorb legen, sollten Sie dafür nicht mehrere Zeilen 36 00:02:29,830 --> 00:02:36,520 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 37 00:02:36,520 --> 00:02:41,920 den Warenkorb und was abnimmt, wenn wir es löschen, bis alle Artikel gelöscht sind. In diesem Fall 38 00:02:41,920 --> 00:02:44,080 würde die gesamte Zeile hier gelöscht. 39 00:02:44,080 --> 00:02:46,000 So funktioniert diese Warenkorbseite, 40 00:02:46,000 --> 00:02:54,070 dies ist die Übersichtsseite hier, daher können wir natürlich auch auf die Detailschaltfläche oder vielleicht auf den Artikel im Allgemeinen tippen, 41 00:02:54,070 --> 00:02:56,950 also irgendwo auf dem Bild oder so etwas, 42 00:02:56,980 --> 00:03:00,250 und dann sollten wir zu einem weitergeleitet werden Detailseite. 43 00:03:00,250 --> 00:03:04,810 Das ist also ein weiterer Bildschirm in dieser Anwendung, auf den wir natürlich auch zurückgehen können. 44 00:03:04,810 --> 00:03:08,190 Das ist die Detailseite des Symbols, auf 45 00:03:08,260 --> 00:03:12,490 der wir das Bild sehen sollten. Wir sollten wahrscheinlich den 46 00:03:12,490 --> 00:03:23,710 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 47 00:03:24,190 --> 00:03:32,300 wir möchten wahrscheinlich auch hier einen Warenkorb-Button haben, über den wir hier auch Artikel in 48 00:03:32,310 --> 00:03:37,460 den Warenkorb legen können. Das ist also der Fluss in Bezug auf unsere Produkte, die wir 49 00:03:37,470 --> 00:03:38,630 hier haben. Das 50 00:03:38,640 --> 00:03:44,060 Wichtigste in dieser App ist nun, dass wir nicht nur Produkte sehen und 51 00:03:44,060 --> 00:03:50,010 einkaufen und in den Warenkorb legen können, sondern natürlich auch unsere Bestellungen anzeigen und vor 52 00:03:50,130 --> 00:03:52,110 allem neue Produkte hinzufügen können. 53 00:03:52,110 --> 00:03:59,100 Daher brauchen wir hier eine Schublade, und diese Schublade bietet uns einige Optionen. Die erste Möglichkeit ist natürlich, dass wir sozusagen 54 00:03:59,120 --> 00:04:05,940 in unseren Shop gehen. Das ist dieser Teil hier, in dem wir uns befinden, wenn 55 00:04:05,940 --> 00:04:07,770 die App startet. 56 00:04:07,830 --> 00:04:10,110 Die zweite Option sollte unsere Bestellung 57 00:04:10,110 --> 00:04:17,340 sein und die dritte Option sollte wie eine Option zum Verwalten von Produkten sein, bei der wir unsere eigenen Produkte verwalten 58 00:04:17,370 --> 00:04:19,920 können, die Sie anderen Benutzern anbieten möchten. 59 00:04:19,950 --> 00:04:22,810 Wie gesagt, Shop ist im Grunde das, was wir bereits sehen. 60 00:04:22,830 --> 00:04:31,500 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 61 00:04:31,500 --> 00:04:34,540 dann zurückkehren können, aber auf diesem Bildschirm sollten 62 00:04:34,590 --> 00:04:40,530 wir die Bestellungen sehen, bei denen wir im Grunde genommen Artikel haben, bei denen Wir sehen 63 00:04:40,960 --> 00:04:49,800 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 64 00:04:49,800 --> 00:04:56,850 diese Schaltfläche tippen, haben wir diesen optionalen Bereich, der sich öffnet oder schließt und dort, ich Grundsätzlich möchten wir die 65 00:04:56,860 --> 00:05:02,040 Artikel der Bestellung sehen, was im Grunde das ist, was wir im Warenkorb hatten. 66 00:05:02,040 --> 00:05:09,810 Wir hatten hier also zwei Bücher mit einem Preis von 19, also würde dies hier im Detailbereich auftauchen, 67 00:05:09,810 --> 00:05:11,590 wenn wir dies öffnen. 68 00:05:11,610 --> 00:05:12,490 Das ist also die 69 00:05:12,540 --> 00:05:13,230 Idee hier 70 00:05:13,230 --> 00:05:18,030 in der Bestellung. Wir können eine Bestellung erweitern, sodass wir nicht nur die Summe und das Datum sehen, sondern auch die 71 00:05:18,030 --> 00:05:19,200 Warenkorbartikel, die wir dort im 72 00:05:19,230 --> 00:05:23,720 Grunde genommen abgelegt haben, also im Grunde das, was wir hier im Warenkorb hatten. das taucht in den Bestellungen auf. 73 00:05:23,960 --> 00:05:25,380 Das ist also der 74 00:05:25,380 --> 00:05:33,480 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 75 00:05:33,480 --> 00:05:40,620 auch diese Menüschaltfläche haben, um diese Schublade wieder zu öffnen, damit wir die anderen Teile der App erreichen können, aber hier 76 00:05:40,620 --> 00:05:47,130 im Bildschirm für verwaltete Produkte, wo wir unsere eigenen Produkte haben, also die Benutzerprodukte und In dieser App werden 77 00:05:47,280 --> 00:05:52,980 wir noch keine Authentifizierung hinzufügen, aber wir werden dies später hinzufügen, aber hier haben wir unsere 78 00:05:53,340 --> 00:05:55,380 eigenen Produkte. Hier ist 79 00:05:55,380 --> 00:06:01,290 die Idee wieder, dass wir im Grunde eine Liste von Produkten sehen, die ziemlich nah an dem ist, was 80 00:06:01,350 --> 00:06:08,790 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 81 00:06:08,790 --> 00:06:11,980 wir Ich kann diese Liste hier wahrscheinlich wiederverwenden, aber natürlich 82 00:06:12,510 --> 00:06:18,720 sind die Optionen, die wir für jedes Produkt haben, unterschiedlich. Anstatt es einem Einkaufswagen hinzuzufügen und 83 00:06:18,720 --> 00:06:22,400 die Details anzuzeigen, können wir es löschen, das ist 84 00:06:22,440 --> 00:06:28,710 eine Schaltfläche, und wir können es auch bearbeiten. Natürlich können wir nur unsere eigenen Produkte bearbeiten, aber 85 00:06:28,710 --> 00:06:35,400 auch hier haben wir keine echte Benutzerzuordnung. Wir können dies mit einer Dummy-Benutzer-ID tun, die wir jedem Produkt hinzufügen, 86 00:06:35,730 --> 00:06:37,470 aber das war's erstmal. 87 00:06:37,530 --> 00:06:39,330 Wir haben also die Schaltfläche zum 88 00:06:39,330 --> 00:06:41,920 Bearbeiten und Löschen, jetzt zusätzlich hier in der Kopfzeile, 89 00:06:41,940 --> 00:06:47,640 also brauchen wir hier mehr Platz. In der Kopfzeile haben wir auch eine Aktionsschaltfläche, mit der wir ein neues Produkt 90 00:06:47,640 --> 00:06:48,390 hinzufügen können. 91 00:06:48,390 --> 00:06:53,310 Im Grunde sollte das hier nur ein bisschen breiter sein, ich habe das zu eng gezogen. 92 00:06:53,340 --> 00:07:00,030 Wir haben also diese Aktionsschaltfläche hier und diese Aktionsschaltfläche hier, diese Plus-Schaltfläche. Dies sollte uns zu einer 93 00:07:00,030 --> 00:07:02,480 neuen Seite führen, auf der 94 00:07:02,490 --> 00:07:12,630 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 95 00:07:12,720 --> 00:07:19,720 Produkt hinzufügen. Dadurch können wir hier einen Titel mit einer Texteingabe hinzufügen. Die Texteingabe kann sich auch unter 96 00:07:19,720 --> 00:07:23,650 der Titelbezeichnung befinden. Sie können diese erstellen, wie Sie möchten. 97 00:07:23,670 --> 00:07:25,770 Wir sollten in der Lage 98 00:07:25,890 --> 00:07:32,390 sein, den Preis hinzuzufügen, wir sollten in der Lage sein, hier eine Beschreibung hinzuzufügen, möglicherweise eine mehrzeilige Eingabe 99 00:07:32,400 --> 00:07:36,530 hier, wir müssen natürlich auch in der Lage sein, eine imageUrl hinzuzufügen. 100 00:07:36,570 --> 00:07:41,460 Das können wir also hier hinzufügen, und dann brauchen wir hier in der Aktionsleiste eine Schaltfläche, eine Häkchenschaltfläche 101 00:07:41,460 --> 00:07:46,440 oder ähnliches, mit der wir dies bestätigen können. Wir werden uns in dieser Phase nicht allzu sehr um 102 00:07:46,440 --> 00:07:47,120 die Bearbeitung 103 00:07:47,130 --> 00:07:52,230 von Benutzereingaben kümmern, da ich ein separates Modul haben werde, in dem ich mich mit allen Details befasse, wie Sie dies 104 00:07:52,530 --> 00:07:57,330 auf elegante Weise tun können, wie Sie eine Validierung hinzufügen können. Hier in dieser App behalten wir dies sehr einfach 105 00:07:57,330 --> 00:08:00,870 bei. Wir werden nicht prüfen, ob der Benutzer etwas Richtiges oder Ähnliches eingegeben hat. Wir 106 00:08:00,870 --> 00:08:02,350 werden dies später im Kurs tun. 107 00:08:02,430 --> 00:08:07,470 Hier haben wir gerade diese grundlegende Eingabe gesammelt, als diese Schaltfläche hier, diese Häkchen-Schaltfläche hier 108 00:08:07,830 --> 00:08:13,560 gedrückt wird, wir zu dieser Seite zurückkehren und natürlich Redux in unserem Statusverwaltungssystem verwenden, um ein neues 109 00:08:13,560 --> 00:08:20,100 Produkt zur Liste der Produkte hinzuzufügen, die dann taucht auch hier in unserem Shop auf und was hier natürlich 110 00:08:20,100 --> 00:08:23,280 in unserer Produktliste auftaucht, die wir verwalten können. 111 00:08:23,340 --> 00:08:24,420 Das haben wir also hier. 112 00:08:24,480 --> 00:08:32,100 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 113 00:08:32,100 --> 00:08:40,410 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, 114 00:08:40,770 --> 00:08:43,110 die Wir können nicht bearbeiten, zum Beispiel 115 00:08:43,110 --> 00:08:49,080 sollte der Preis nicht bearbeitet werden können, denn wenn der Preis bearbeitet werden könnte, wäre dies ein Problem, 116 00:08:49,080 --> 00:08:51,230 wenn wir ihn bereits im 117 00:08:51,480 --> 00:08:54,390 Warenkorb hätten. Wir erlauben daher nicht, den Preis hier 118 00:08:54,390 --> 00:08:57,840 zu bearbeiten ermöglicht jedoch die Bearbeitung des Titels, der Beschreibung und 119 00:08:57,930 --> 00:09:00,210 der imageUrl, so dass dies möglich ist. 120 00:09:00,210 --> 00:09:01,210 Das ist der einzige 121 00:09:01,260 --> 00:09:04,180 Unterschied, wir haben Felder vorab ausgefüllt und der Preis kann nicht bearbeitet werden. 122 00:09:04,260 --> 00:09:09,840 Wenn wir im Bearbeitungsmodus das Häkchen drücken und herausfinden können, ob wir bearbeiten oder nicht, indem 123 00:09:09,840 --> 00:09:14,220 wir beispielsweise eine Produkt-ID als Parameter erhalten haben. Sobald wir die Bearbeitung 124 00:09:14,220 --> 00:09:20,100 abgeschlossen haben, können wir dieses Häkchensymbol drücken und dann werden wir auch zurückgenommen und speichern einfach alles, 125 00:09:20,100 --> 00:09:23,660 was wir hier bearbeitet haben, zurück in unser Produkt. 126 00:09:23,670 --> 00:09:25,780 Dies ist die App hier. 127 00:09:25,890 --> 00:09:30,700 Wie bereits erwähnt, wird dies auch eine Grundlage für die nachfolgenden Module sein. 128 00:09:30,700 --> 00:09:38,100 Dort werden wir dann auch die HTTP-Anforderung und die Authentifizierung hinzufügen. Wir werden die gesamte Formularvalidierung hier auf elegantere Weise durchführen 129 00:09:38,100 --> 00:09:40,020 und so weiter, aber dieses 130 00:09:40,050 --> 00:09:46,110 Modul hier ist es jetzt Eine großartige Übung, wie man eine solche App erstellt, wie man mit 131 00:09:46,200 --> 00:09:51,240 Komponenten arbeitet, sie formatiert, wie man eine Navigation hinzufügt, da diese App offensichtlich viel Navigation 132 00:09:51,240 --> 00:09:54,940 enthält und wie man unseren Status in dieser Einkaufs-App verwaltet. 133 00:09:55,020 --> 00:09:59,850 Wie ich in der letzten Vorlesung erwähnt habe, könnten Sie dieses Modul überspringen, aber dann sollten Sie auf 134 00:09:59,850 --> 00:10:05,100 jeden Fall in den fertigen Code eintauchen, damit Sie in den nächsten Modulen mitmachen können, aber meine Empfehlung ist natürlich, 135 00:10:05,100 --> 00:10:10,840 dass Sie a) entweder alles ausprobieren Sie selbst und natürlich wird Ihr Ergebnis nicht das gleiche sein, das ich bekomme. Sie sollten 136 00:10:10,860 --> 00:10:16,230 sich also auf jeden Fall auch meine Videos danach ansehen, um zu sehen, wie ich das gemacht habe, und damit Sie 137 00:10:16,230 --> 00:10:18,360 die gleiche Codebasis haben, der Sie folgen können, 138 00:10:18,360 --> 00:10:23,280 aber dies wird eine großartige Übung sein Selbst wenn Ihr Ergebnis zuerst da ist, weil es nicht unbedingt einen 139 00:10:23,280 --> 00:10:28,890 falschen oder richtigen Ansatz gibt, oder b) Ihre andere Option ist natürlich, dass Sie es nicht selbst versuchen und einfach mitmachen, auch 140 00:10:28,890 --> 00:10:29,870 eine gültige Option, 141 00:10:29,970 --> 00:10:34,830 aber ich glaube, Sie werden es tun Holen Sie ein bisschen mehr aus dem Kurs heraus, wenn Sie 142 00:10:34,830 --> 00:10:35,490 es zuerst 143 00:10:35,490 --> 00:10:40,080 selbst versuchen, aber am Ende tun, was Sie wollen. In der nächsten Vorlesung werden wir gleich darauf eingehen und mit dem Aufbau dieser 144 00:10:40,080 --> 00:10:40,500 App beginnen.