1
00:00:02,200 --> 00:00:08,380
Maintenant que nous avons le flux de base vers le bas, que nous pouvons naviguer entre nos produits, les ajouter au panier

2
00:00:08,410 --> 00:00:13,900
et ensuite utiliser le panier pour passer une commande et également afficher cette commande et bien sûr, également modifier le

3
00:00:13,930 --> 00:00:15,040
panier si nous

4
00:00:15,070 --> 00:00:20,530
le voulions, maintenant que tout cela est fait, il est temps de passer à la dernière partie de cette

5
00:00:20,530 --> 00:00:24,430
application qui est bien sûr la partie où vous pouvez ajouter de nouveaux produits.

6
00:00:24,430 --> 00:00:29,960
C'est également la partie que nous affinerons plus tard, car plus tard, nous approfondirons bien sûr la gestion des entrées utilisateur et nous

7
00:00:29,980 --> 00:00:36,770
stockerons même ces données sur un serveur, mais nous pouvons déjà commencer ici. Pour commencer, l'écran du produit utilisateur et l'écran

8
00:00:36,770 --> 00:00:37,910
de modification

9
00:00:37,910 --> 00:00:42,560
du produit deviendront importants maintenant car ce sont les écrans où nous

10
00:00:42,560 --> 00:00:47,450
voyons tous nos produits et où nous pouvons également modifier les produits.

11
00:00:47,480 --> 00:00:49,720
Commençons donc avec l'écran des

12
00:00:49,750 --> 00:00:53,420
produits utilisateur et transformons-le en composant React en important React

13
00:00:53,600 --> 00:01:01,970
depuis React et sans surprise, en important des trucs depuis React Native. Le truc que je veux importer ici est à nouveau la liste

14
00:01:01,970 --> 00:01:06,250
plate car je sortirai une liste de produits à la fin sur

15
00:01:06,320 --> 00:01:08,260
cet écran de produits utilisateur.

16
00:01:08,630 --> 00:01:15,650
Par conséquent, ici, nous avons le composant d'écran des produits utilisateur qui reçoit les accessoires et

17
00:01:15,650 --> 00:01:22,960
où je dois ensuite retourner du jsx et au bas du fichier, j'exporterai ce composant par défaut.

18
00:01:23,090 --> 00:01:29,670
C'est ma configuration de composant par défaut que j'ai utilisée maintes et maintes fois. Maintenant ici, je veux sortir mes composants,

19
00:01:30,000 --> 00:01:38,070
mes produits avec une liste plate et je vais réutiliser le composant d'élément de produit que nous

20
00:01:38,070 --> 00:01:40,560
avons construit plus tôt.

21
00:01:40,560 --> 00:01:44,130
Donc, de retour dans les produits utilisateur, nous pouvons

22
00:01:47,030 --> 00:01:51,020
importer l'article de produit à partir du dossier des composants, alors

23
00:01:51,020 --> 00:01:57,090
allons-y ici et là, pour acheter et ensuite commander, pas commander mais l'article de produit et

24
00:01:57,230 --> 00:02:03,320
ici, bien sûr, également transmettre certaines données. Maintenant, les données que je souhaite transmettre ici doivent être

25
00:02:03,320 --> 00:02:06,140
les produits qui appartenaient à mon utilisateur connecté.

26
00:02:06,140 --> 00:02:11,450
Nous n'avons pas d'utilisateur connecté pour le moment, mais si vous vous souvenez du réducteur de produits, nous

27
00:02:11,450 --> 00:02:17,300
y faisons semblant car nous avons ce tableau de produits utilisateur qui contient tous les produits qui dans ce

28
00:02:17,300 --> 00:02:25,130
cas ont ici un ID utilisateur, un ID propriétaire de U1 et je suppose pour le moment d'avoir des données factices que ce sont nos données

29
00:02:25,130 --> 00:02:31,930
utilisateur actuellement connectées, plus tard, cela sera bien sûr dynamique. Donc, le produit utilisateur est ce dont

30
00:02:31,930 --> 00:02:37,930
nous avons besoin, de retour dans l'écran des produits utilisateur, nous devons donc

31
00:02:37,930 --> 00:02:44,540
obtenir ces données de Redux à l'aide du sélecteur d'utilisation de React Redux, comme

32
00:02:44,560 --> 00:02:55,680
ceci et ici nous obtenons nos produits utilisateur en appelant le sélecteur d'utilisation où nous passons dans cette fonction, il obtient l'état, puis atteint la

33
00:02:55,680 --> 00:03:02,520
partie produits de nos produits de magasin, car c'est l'identifiant que j'utilise là-bas, puis comme

34
00:03:02,520 --> 00:03:10,590
je viens de le dire, accédez à ce champ de produits utilisateur ici, donc dans l'écran du produit

35
00:03:10,590 --> 00:03:18,990
utilisateur, ici nous accès . produits utilisateur. Les produits utilisateur sont maintenant le tableau que

36
00:03:18,990 --> 00:03:26,870
nous alimentons en données, comme toujours ici, j'ajouterai un extracteur de clé qui me donne l'ID parce que mon produit tel qu'il est stocké ici dans

37
00:03:26,880 --> 00:03:31,860
les produits utilisateur utilise bien sûr mon modèle de produit à la fin et a donc

38
00:03:31,860 --> 00:03:38,400
un ID qui est un identifiant unique que je peux utiliser donc je vais l'utiliser et puis bien sûr comme toujours,

39
00:03:38,400 --> 00:03:46,830
nous devons également ajouter un élément de rendu, vous connaissez évidemment déjà ce modèle. L'élément de rendu obtient les données de l'article ici et je veux retourner un

40
00:03:46,830 --> 00:03:53,130
nouvel article de produit pour chaque entrée ici et l'article de produit, si nous y jetons un coup d'œil, prend quelques informations.

41
00:03:53,670 --> 00:04:05,790
Il faut un accessoire de détail en vue ici, il faut un accessoire de titre, un accessoire de prix, un accessoire d'image, puis également un accessoire

42
00:04:05,790 --> 00:04:07,300
d'ajout au panier.

43
00:04:07,400 --> 00:04:12,840
Maintenant, vous pourriez déjà voir que tous ces accessoires ne correspondent pas vraiment à notre objectif si nous utilisons

44
00:04:12,840 --> 00:04:18,840
cela sur l'écran du produit utilisateur, car ce ne sera pas un écran où nous pourrons acheter des produits, ce n'est

45
00:04:18,840 --> 00:04:26,310
pas un écran où je veux pouvoir ajouter produits à un panier. Je veux les afficher comme je le fais ici avec l'image, le prix,

46
00:04:26,310 --> 00:04:34,920
etc., mais je me fiche de savoir si nous pouvons les cliquer ou ces boutons. Je vais donc commencer à ajouter l'article

47
00:04:34,920 --> 00:04:39,310
de produit comme celui-ci, mais nous devrons le peaufiner.

48
00:04:39,510 --> 00:04:46,170
Donc, ce dont nous avons besoin, c'est du titre, du prix, de l'image et des détails de la vue et du panier.

49
00:04:46,170 --> 00:04:53,430
Nous avons donc besoin de l'image ici et bien sûr, c'est itemData. article. imageUrl car vous ne

50
00:04:53,430 --> 00:04:59,400
devez pas oublier cet itemData. item dans les points de terminaison d'un produit

51
00:04:59,400 --> 00:05:08,540
tel que défini ici dans le modèle, nous aurons donc cette propriété imageUrl, puis ici nous avons également besoin du titre qui est

52
00:05:08,570 --> 00:05:17,840
accessible via itemData. article. Titre. Nous avons besoin du prix accessible avec itemData. article. prix et si nous jetons

53
00:05:17,840 --> 00:05:23,570
un coup d'œil au composant de l'article de produit, cela répond à tout ce dont nous avons besoin

54
00:05:23,570 --> 00:05:30,380
ici, mais maintenant nous devons voir les détails et ajouter au panier et je les ajouterai temporairement mais nous devrons trouver une solution

55
00:05:30,380 --> 00:05:31,100
différente ici.

56
00:05:31,100 --> 00:05:34,290
Donc, sur le détail de la vue est

57
00:05:34,290 --> 00:05:41,760
une fonction vide pour le moment et sur ajouter au panier, également une fonction vide et nous l'implémenterons différemment plus tard.

58
00:05:42,270 --> 00:05:47,370
Pour le moment cependant, je produis un article de produit ici et donc

59
00:05:47,370 --> 00:05:54,600
nous pouvons maintenant naviguer vers l'écran des produits utilisateur. Pour y arriver, il est temps de revenir au navigateur de la boutique et à

60
00:05:54,600 --> 00:06:00,420
la fin, je veux les ajouter à mon navigateur de tiroir, mais en tant que pile distincte, tout comme les produits et les commandes sont

61
00:06:00,420 --> 00:06:03,120
une pile séparée, cela devrait également être une pile distincte .

62
00:06:03,120 --> 00:06:11,160
Nous pouvons simplement copier la pile du navigateur de commandes ici, répliquer cela et importer l'écran du produit utilisateur ici,

63
00:06:11,160 --> 00:06:19,440
donc l'écran des produits utilisateur du dossier screens, là du dossier utilisateur, puis l'écran du produit utilisateur et le mapper

64
00:06:19,440 --> 00:06:27,180
dans la pile nouvellement copiée là-bas qui Je ne nommerai pas le navigateur de commandes parce que j'ai déjà

65
00:06:28,000 --> 00:06:35,140
ce nom ici, mais je le nommerai, disons administrateur navigateur peut-être et ici, j'ai mon identifiant de

66
00:06:35,570 --> 00:06:43,900
produits utilisateur qui pointe vers l'écran des produits utilisateur. Maintenant ici en tant qu'icône, dans le tiroir,

67
00:06:43,920 --> 00:06:51,670
je veux avoir une icône md create et ios create et à part ça, ça devrait aller.

68
00:06:51,680 --> 00:06:55,460
Il ne nous reste plus qu'à ajouter ce navigateur à notre navigateur de tiroir.

69
00:06:55,460 --> 00:07:02,830
Là, j'ajouterai la clé d'administration et pointerai sur le navigateur d'administration, alors maintenant nous devrions

70
00:07:02,830 --> 00:07:08,980
réellement être en mesure d'atteindre cela. Si nous revenons à l'application, nous avons l'entrée

71
00:07:08,980 --> 00:07:14,080
admin et si je clique dessus, nous obtenons un problème concernant mes produits utilisateur,

72
00:07:14,090 --> 00:07:19,880
l'état non défini n'est pas un objet, jetons un coup d'œil à l'écran du produit utilisateur,

73
00:07:19,910 --> 00:07:25,880
oui, cela devrait être des produits parce que notre tranche est nommée ici produits en réducteur combiné.

74
00:07:25,880 --> 00:07:27,990
Alors là, ça devrait aussi

75
00:07:28,080 --> 00:07:34,590
être des produits, petite faute de frappe de mon côté. Maintenant, cela a l'air mieux et maintenant, cela pourrait sembler que rien n'a

76
00:07:34,590 --> 00:07:40,830
changé, mais en fait, vous pouvez voir que mes éléments de navigation ont disparu parce que maintenant je suis sur un nouvel écran mais j'ai ma

77
00:07:40,830 --> 00:07:42,910
vieille liste ici mais avec moins de produits.

78
00:07:43,020 --> 00:07:47,190
Si vous comparez Android où je suis sur l'écran de démarrage, nous avons plus de produits

79
00:07:47,190 --> 00:07:50,340
là-bas, maintenant je n'ai que ceux où U1 est l'ID du propriétaire.

80
00:07:50,730 --> 00:07:51,550
Donc c'est

81
00:07:51,960 --> 00:07:54,850
bien mais bien sûr je n'aime pas ces boutons ici et

82
00:07:54,930 --> 00:07:58,960
je veux aussi avoir un élément de menu ici et un titre d'en-tête bien sûr.

83
00:07:58,980 --> 00:08:03,930
Il y a certaines choses que nous devons corriger, ces boutons sont bien sûr la chose la plus importante ou la

84
00:08:03,930 --> 00:08:08,270
chose la plus frappante qui ne va pas. Pourtant, je vais commencer

85
00:08:08,270 --> 00:08:11,420
par l'en-tête, dans l'écran des produits utilisateur ici,

86
00:08:11,450 --> 00:08:19,910
nous pouvons ajouter les options de navigation, l'écran des produits utilisateur. les options de navigation et là, définissez un titre d'en-tête

87
00:08:19,910 --> 00:08:30,130
de vos produits par exemple et nous avons également besoin du bouton de menu, afin que nous puissions en fait aussi aller à l'écran de présentation

88
00:08:30,160 --> 00:08:35,930
du produit et à partir de là, copier cet en-tête à gauche ici, revenir à

89
00:08:36,020 --> 00:08:39,620
l'écran du produit utilisateur et ajoutez ceci ici.

90
00:08:39,620 --> 00:08:44,900
Maintenant, cependant, nous avons besoin de cette forme de fonction des options de navigation où nous retournons

91
00:08:44,900 --> 00:08:50,210
finalement un objet avec toutes les options là-dedans, c'est donc quelque chose que nous devons changer comme

92
00:08:50,660 --> 00:08:55,880
ceci et nous devons également nous assurer d'importer l'élément des boutons d'en-tête et bouton d'en-tête.

93
00:08:55,880 --> 00:09:00,300
Donc, de retour dans l'écran de présentation du produit, j'ai ces importations ici, copiez-les

94
00:09:00,440 --> 00:09:03,310
à partir de l'écran de présentation du produit, accédez

95
00:09:03,440 --> 00:09:05,990
à l'écran du produit utilisateur et ajoutez-les

96
00:09:06,010 --> 00:09:09,050
comme ceci, par exemple pour que vous importiez tout

97
00:09:09,050 --> 00:09:10,940
ce dont vous avez besoin.

98
00:09:10,940 --> 00:09:16,400
Nous devons également importer une API de plate-forme, car nous l'utilisons également lors de la configuration des boutons d'en-tête.

99
00:09:18,210 --> 00:09:25,800
Maintenant au moins, quand nous allons dans la zone d'administration, nous avons notre titre ici, nous avons à nouveau le tiroir, le bouton

100
00:09:25,800 --> 00:09:26,860
de menu,

101
00:09:26,940 --> 00:09:29,250
mais maintenant, qu'en est-il de ces boutons?

102
00:09:29,310 --> 00:09:33,840
Nous devrons changer l'apparence de notre article.