1 00:00:02,390 --> 00:00:08,050 Maintenant, les recettes doivent bien sûr être affichées sur l'écran de la catégorie de repas, qui est l'écran que nous chargeons lorsque nous avons 2 00:00:08,050 --> 00:00:09,850 sélectionné une catégorie et, évidemment, pour rendre 3 00:00:09,920 --> 00:00:14,030 toutes les recettes, nous en avons besoin, nous avons besoin de recettes pour les repas comme je les 4 00:00:14,030 --> 00:00:20,930 appelle également ici et Je vais commencer par ajouter un nouveau modèle, le repas. js où je définis à quoi devrait ressembler 5 00:00:20,960 --> 00:00:23,880 un repas dans cette application. 6 00:00:23,890 --> 00:00:25,840 Maintenant, cette définition supplémentaire est facultative, 7 00:00:25,850 --> 00:00:30,060 mais je pense qu'elle facilite un peu la réflexion sur nos données et leur structure. 8 00:00:30,230 --> 00:00:32,540 Je vais donc mettre en place une classe ici et 9 00:00:32,690 --> 00:00:39,110 l'exporter et dans cette classe, ajouter un constructeur qui nous permet de créer de nouveaux repas préconfigurés en fonction de la structure que nous sommes sur 10 00:00:39,110 --> 00:00:41,090 le point de mettre en place ici. 11 00:00:41,090 --> 00:00:44,540 Désormais, un repas sera plus complexe qu'une catégorie, il aura 12 00:00:44,540 --> 00:00:45,710 un identifiant 13 00:00:46,100 --> 00:00:49,550 mais il aura également des identifiants de catégorie auxquels il 14 00:00:49,550 --> 00:00:52,890 appartient, donc plusieurs catégories auxquelles un repas peut appartenir. 15 00:00:52,970 --> 00:00:54,380 Il aura un titre, 16 00:00:54,380 --> 00:00:55,280 donc 17 00:00:55,280 --> 00:00:59,750 un nom, puis il aura des champs supplémentaires comme l'abordabilité d'un 18 00:01:00,200 --> 00:01:02,890 repas, est-ce donc cher, est-ce bon marché? 19 00:01:03,290 --> 00:01:09,990 La complexité, alors combien il est complexe de préparer ce plat à partir de cette recette. Une imageUrl qui pointe vers une image sur le web où 20 00:01:10,000 --> 00:01:15,950 nous avons une belle photo de ce repas. La durée qu'il faut en minutes 21 00:01:15,950 --> 00:01:23,470 pour créer ce repas, aussi les ingrédients qui devraient être un tableau, les étapes que nous 22 00:01:23,570 --> 00:01:31,220 devons prendre pour faire ce repas, donc les instructions et ensuite quatre champs qui nous aident à 23 00:01:31,820 --> 00:01:40,520 filtrer - estGlutenFree qui indique s'il s'agit de gluten gratuit ou non, ce sera donc un booléen, isVegan, isVegetarian 24 00:01:42,620 --> 00:01:44,240 et isLactoseFree, ce 25 00:01:44,240 --> 00:01:48,590 sont les quatre champs que j'utiliserai dans cette application. 26 00:01:48,590 --> 00:01:53,350 Maintenant, toutes ces données que nous obtenons ici seront ensuite stockées dans 27 00:01:53,390 --> 00:02:02,000 les propriétés, alors ici je vais définir cet ID égal à ID, cet ID de catégorie égal à ID de catégorie, ce 28 00:02:02,000 --> 00:02:09,860 titre égal à title, cette imageUrl égale à imageUrl et ainsi bien sûr, il suffit donc de stocker tous 29 00:02:09,890 --> 00:02:16,850 les arguments que nous obtenons dans les propriétés de cela, l'objet à la fin sera créé en 30 00:02:16,850 --> 00:02:18,850 fonction de la classe. 31 00:02:18,920 --> 00:02:28,250 Donc, nous allons également obtenir nos étapes ici bien sûr, nous stockons la durée, nous stockons la complexité, 32 00:02:28,250 --> 00:02:36,260 nous stockons l'abordabilité ici bien sûr dans une propriété, nous stockons si c'est sans gluten 33 00:02:36,260 --> 00:02:38,990 et aussi tous les autres 34 00:02:38,990 --> 00:02:48,770 filtres bien sûr, donc est végétalien, c'est végétarien devrait également être stocké bien sûr et isLactoseFree, qui sera également 35 00:02:48,770 --> 00:02:52,150 stocké et oui avec cela, je stocke 36 00:02:52,170 --> 00:02:54,450 toutes ces données. 37 00:02:54,450 --> 00:03:00,890 Maintenant, nous pouvons ajouter des données factices, des repas factices et bien sûr, vous les trouverez à nouveau. 38 00:03:01,020 --> 00:03:10,090 Tout ce que vous devez faire dans des données fictives. Le fichier js consiste à importer des repas à partir du dossier des modèles et à partir de ce repas. js ou juste à partir d'un repas comme 39 00:03:10,110 --> 00:03:16,320 celui-ci et maintenant attaché dans le fichier Javascript que vous trouvez attaché, vous trouvez également ce tableau 40 00:03:16,320 --> 00:03:24,270 de repas que vous pouvez ajouter ici et qui n'est maintenant qu'un tas de recettes que j'ai préparées pour vous qui utilise ou 41 00:03:24,480 --> 00:03:29,290 qui utilise tous les champs nous avons mis en place dans notre modèle. 42 00:03:29,340 --> 00:03:31,510 Maintenant, ce sont des données factices avec lesquelles 43 00:03:31,530 --> 00:03:37,470 nous travaillons, commençons maintenant à travailler avec cela et rendons une liste de ces repas sur l'écran de la catégorie des repas. 44 00:03:37,470 --> 00:03:43,860 Bien sûr, seuls les repas qui entrent dans la catégorie que nous avons sélectionnée, ont donc notre ID de catégorie.