1 00:00:02,390 --> 00:00:08,050 Jetzt sollten die Rezepte natürlich auf dem Bildschirm "Kategorie Mahlzeiten" gerendert werden. Dies ist der Bildschirm, den wir laden, wenn 2 00:00:08,050 --> 00:00:09,850 wir eine Kategorie ausgewählt haben. 3 00:00:09,920 --> 00:00:14,030 Um Rezepte zu rendern, benötigen wir natürlich Rezepte für Mahlzeiten, wie ich sie hier und 4 00:00:14,030 --> 00:00:20,930 auch nenne Ich werde mit dem Hinzufügen eines neuen Modells beginnen, Mahlzeit. js wo ich definiere, wie eine Mahlzeit 5 00:00:20,960 --> 00:00:23,880 in dieser App aussehen soll. 6 00:00:23,890 --> 00:00:25,840 Jetzt ist diese zusätzliche Definition optional, 7 00:00:25,850 --> 00:00:30,060 aber ich denke, es macht es ein bisschen einfacher, über unsere Daten und ihre Struktur nachzudenken. 8 00:00:30,230 --> 00:00:32,540 Also werde ich hier eine Klasse einrichten 9 00:00:32,690 --> 00:00:39,110 und exportieren und in dieser Klasse einen Konstruktor hinzufügen, mit dem wir neue vorkonfigurierte Mahlzeiten basierend auf der Struktur erstellen 10 00:00:39,110 --> 00:00:41,090 können, die wir hier einrichten möchten. 11 00:00:41,090 --> 00:00:44,540 Jetzt ist eine Mahlzeit komplexer als eine Kategorie, sie 12 00:00:44,540 --> 00:00:45,710 hat eine 13 00:00:46,100 --> 00:00:49,550 ID, aber auch einige Kategorie-IDs, zu denen sie gehört, 14 00:00:49,550 --> 00:00:52,890 sodass mehrere Kategorien, zu denen eine Mahlzeit gehören kann. 15 00:00:52,970 --> 00:00:54,380 Es wird einen Titel 16 00:00:54,380 --> 00:00:55,280 haben, also 17 00:00:55,280 --> 00:00:59,750 einen Namen, und dann wird es einige zusätzliche Felder geben, wie die Erschwinglichkeit einer 18 00:01:00,200 --> 00:01:02,890 Mahlzeit. Ist es also teuer, ist es billig? 19 00:01:03,290 --> 00:01:09,990 Die Komplexität, also wie komplex es ist, dieses Gericht nach diesem Rezept zuzubereiten. Ein imageUrl, das auf ein Bild im Web zeigt, auf dem 20 00:01:10,000 --> 00:01:15,950 wir ein schönes Bild von dieser Mahlzeit haben. Die Dauer, die in Minuten benötigt 21 00:01:15,950 --> 00:01:23,470 wird, um diese Mahlzeit zuzubereiten, auch die Zutaten, die eine Reihe sein sollten, die Schritte, die wir 22 00:01:23,570 --> 00:01:31,220 unternehmen müssen, um diese Mahlzeit zuzubereiten, also die Anweisungen und dann vier Felder, die uns beim Filtern helfen 23 00:01:31,820 --> 00:01:40,520 - isGlutenFree, das angibt, ob dies Gluten ist kostenlos oder nicht, dies ist also ein Boolescher Wert, isVegan, isVegetarian und 24 00:01:42,620 --> 00:01:44,240 isLactoseFree. Dies sind 25 00:01:44,240 --> 00:01:48,590 die vier Felder, die ich in dieser App verwenden werde. 26 00:01:48,590 --> 00:01:53,350 Jetzt werden alle Daten, die wir hier erhalten, in 27 00:01:53,390 --> 00:02:02,000 Eigenschaften gespeichert. Hier setze ich diese ID auf ID, diese Kategorie-ID auf Kategorie-ID, diesen Titel auf Titel, 28 00:02:02,000 --> 00:02:09,860 diese imageUrl auf imageUrl und so weiter Wenn Sie also einfach alle Argumente speichern, die 29 00:02:09,890 --> 00:02:16,850 wir in den Eigenschaften davon erhalten, wird das Objekt am Ende basierend auf 30 00:02:16,850 --> 00:02:18,850 der Klasse erstellt. 31 00:02:18,920 --> 00:02:28,250 Also werden wir hier natürlich auch unsere Schritte bekommen, wir werden die Dauer speichern, wir werden die Komplexität 32 00:02:28,250 --> 00:02:36,260 speichern, wir werden die Erschwinglichkeit hier natürlich in einer Immobilie speichern, wir werden speichern, ob 33 00:02:36,260 --> 00:02:38,990 dies glutenfrei ist und auch 34 00:02:38,990 --> 00:02:48,770 Alle anderen Filter natürlich, also isVegan, das ist vegetarisch sollte natürlich auch gespeichert werden und isLactoseFree, das wird auch 35 00:02:48,770 --> 00:02:52,150 gespeichert und ja damit speichere ich 36 00:02:52,170 --> 00:02:54,450 all diese Daten. 37 00:02:54,450 --> 00:03:00,890 Jetzt können wir einige Dummy-Daten, einige Dummy-Mahlzeiten hinzufügen und natürlich finden Sie diese wieder im Anhang. 38 00:03:01,020 --> 00:03:10,090 Alles was Sie in einem Dummy-Daten tun müssen. js Datei ist Mahlzeit aus dem Modellordner und dort aus Mahlzeit importieren. js oder einfach von einer Mahlzeit wie 39 00:03:10,110 --> 00:03:16,320 dieser und jetzt in der Javascript-Datei, die Sie im Anhang finden, finden Sie auch das Menü für 40 00:03:16,320 --> 00:03:24,270 Mahlzeiten, das Sie hier hinzufügen können, und das ist jetzt nur eine Reihe von Rezepten, die ich für Sie vorbereitet habe und 41 00:03:24,480 --> 00:03:29,290 die alle Felder verwenden oder verwenden Wir haben uns in unserem Modell eingerichtet. 42 00:03:29,340 --> 00:03:31,510 Nun, das sind Dummy-Daten, mit denen 43 00:03:31,530 --> 00:03:37,470 wir arbeiten. Beginnen wir jetzt damit und rendern eine Liste dieser Mahlzeiten auf dem Bildschirm "Kategorie Mahlzeiten". 44 00:03:37,470 --> 00:03:43,860 Natürlich nur Mahlzeiten, die in die von uns ausgewählte Kategorie passen, also unsere Kategorie-ID haben.