1 00:00:02,060 --> 00:00:03,200 Planifions donc l'application 2 00:00:03,200 --> 00:00:08,920 que nous allons créer et nous allons créer une application de magasinage de base, une boutique 3 00:00:08,930 --> 00:00:17,120 en ligne de base dans une application que vous pourriez dire. Donc, dans cette application ici, nous aurons certainement besoin d'un tas de 4 00:00:17,120 --> 00:00:17,680 produits 5 00:00:17,710 --> 00:00:24,590 qui peuvent être répertoriés, nous aurons donc un écran de présentation des produits où nous verrons ces cartes avec nos 6 00:00:24,680 --> 00:00:30,770 produits, avec une image, avec le titre et le prix peut-être quelque chose comme ça et aussi un 7 00:00:30,770 --> 00:00:37,930 panier ou un bouton ajouter au panier et un bouton de détails, donc en gros un bouton qui nous permet d'aller 8 00:00:37,970 --> 00:00:42,440 à une page de détails et un bouton qui nous permet d'ajouter ceci 9 00:00:42,440 --> 00:00:43,730 à un panier. 10 00:00:43,760 --> 00:00:47,060 Parce que si vous touchez ce bouton de panier ici, 11 00:00:47,060 --> 00:00:53,900 donc si vous sélectionnez ce bouton de panier, alors cela est ajouté à un panier et vous pouvez atteindre ce panier 12 00:00:53,900 --> 00:00:56,360 avec un bouton d'action ici dans la 13 00:00:56,390 --> 00:01:01,300 barre d'action, donc dans l'en-tête supérieur, là je veulent avoir une telle icône de panier, 14 00:01:01,570 --> 00:01:08,060 probablement un peu plus agréable que ce que j'ai dessiné ici, mais cette icône ici à la fin nous 15 00:01:08,060 --> 00:01:14,480 permet d'aller à une page séparée par la suite, un écran séparé de cette application où nous pouvons bien 16 00:01:14,480 --> 00:01:23,240 sûr également revenir là où nous verrons ici une somme totale en dollars à laquelle s'ajoutent le total de nos articles du panier, puis une liste 17 00:01:23,510 --> 00:01:26,910 de nos articles comme un livre et ce que cela 18 00:01:26,930 --> 00:01:28,360 coûte et quelque chose 19 00:01:28,520 --> 00:01:29,510 comme ça. 20 00:01:29,540 --> 00:01:33,140 Donc, fondamentalement, nous voyons notre panier ici, nous voyons une somme de cela, 21 00:01:33,140 --> 00:01:35,580 puis nous voyons les articles individuels et bien 22 00:01:35,630 --> 00:01:42,470 sûr, je veux également avoir un bouton qui me permet de commander ce qui est dans le panier et en fait ce bouton ne 23 00:01:42,530 --> 00:01:46,070 devrait pas être en dessous de cela , nous avons donc ici 24 00:01:46,070 --> 00:01:47,530 un bouton de commande. 25 00:01:47,600 --> 00:01:48,890 En fait, cela devrait être 26 00:01:48,890 --> 00:01:53,450 ici, donc ici je veux avoir une ligne où nous avons la somme totale, puis à côté, le bouton de commande. 27 00:01:54,110 --> 00:01:55,310 C'est donc essentiellement l'objectif, 28 00:01:55,310 --> 00:01:57,250 mais vous pouvez le placer où 29 00:01:57,250 --> 00:02:02,930 vous le souhaitez, à la fin, nous voulons avoir un bouton qui nous permet de commander tout ce que 30 00:02:02,930 --> 00:02:03,470 nous 31 00:02:03,470 --> 00:02:12,150 avons dans le panier et sur chaque article du panier ici, je veux aussi avoir une icône de corbeille ici qui me permet de supprimer un article du panier. 32 00:02:12,200 --> 00:02:22,300 Donc, lorsque cela passe une commande, cette icône ici supprimera simplement un article du 33 00:02:22,300 --> 00:02:23,410 panier. 34 00:02:23,410 --> 00:02:24,220 C'est donc 35 00:02:24,220 --> 00:02:29,760 l'idée, bien sûr, si vous ajoutez le même article plusieurs fois au panier, vous ne devez pas ajouter plusieurs 36 00:02:29,830 --> 00:02:36,520 lignes pour cela, mais ici, je veux également afficher comme une quantité de l'article qui augmente simplement si nous l'ajoutons plus souvent dans 37 00:02:36,520 --> 00:02:41,920 le panier et qui diminue si nous le supprimons jusqu'à ce que tous les articles soient supprimés, auquel 38 00:02:41,920 --> 00:02:44,080 cas la ligne entière serait supprimée ici. 39 00:02:44,080 --> 00:02:46,000 Voilà comment cette page de 40 00:02:46,000 --> 00:02:54,070 panier fonctionnera, voici la page d'aperçu ici, bien sûr, nous pouvons donc également appuyer sur le bouton de détail ou peut-être l'article en général, donc 41 00:02:54,070 --> 00:02:56,950 n'importe où sur l'image ou quelque chose comme ça 42 00:02:56,980 --> 00:03:00,250 et ensuite nous devrions être amenés à un page de détail. 43 00:03:00,250 --> 00:03:04,810 Voilà donc un autre écran dans cette application où nous pouvons bien sûr revenir en arrière. 44 00:03:04,810 --> 00:03:08,190 C'est la page de détail de l'icône 45 00:03:08,260 --> 00:03:12,490 où nous devrions voir l'image, nous devrions probablement voir 46 00:03:12,490 --> 00:03:23,710 comme le titre ici dans l'en-tête, ce serait donc le titre de l'élément. Ensuite, en dessous, nous voyons comme le prix, nous voyons la 47 00:03:24,190 --> 00:03:32,300 description et nous voulons probablement avoir un bouton de panier ici également, où nous pouvons également ajouter 48 00:03:32,310 --> 00:03:37,460 des articles au panier ici. Voilà donc le flux concernant nos produits que nous 49 00:03:37,470 --> 00:03:38,630 avons ici. Maintenant, 50 00:03:38,640 --> 00:03:44,060 la chose importante dans cette application sera que nous ne pouvons pas seulement voir des produits et 51 00:03:44,060 --> 00:03:50,010 les acheter et les ajouter au panier, etc., mais bien sûr, nous pouvons également consulter nos commandes et, surtout, 52 00:03:50,130 --> 00:03:52,110 nous pouvons également ajouter de nouveaux produits. 53 00:03:52,110 --> 00:03:59,100 Par conséquent, ici, nous avons besoin d'un tiroir et ce tiroir nous présentera quelques options. Maintenant, la première option est bien sûr que 54 00:03:59,120 --> 00:04:05,940 nous allons dans notre boutique pour ainsi dire, c'est cette partie ici où nous en sommes 55 00:04:05,940 --> 00:04:07,770 lorsque l'application démarre. 56 00:04:07,830 --> 00:04:10,110 La deuxième option devrait être nos 57 00:04:10,110 --> 00:04:17,340 commandes et la troisième option devrait être comme une option de gestion des produits, où nous pouvons gérer nos propres produits 58 00:04:17,370 --> 00:04:19,920 que vous souhaitez offrir à d'autres utilisateurs. 59 00:04:19,950 --> 00:04:22,810 Donc, comme je l'ai dit, la boutique est essentiellement ce que nous voyons déjà. 60 00:04:22,830 --> 00:04:31,500 Maintenant, si nous tapons sur les commandes, eh bien je veux être amené à un écran où nous pouvons bien sûr également ouvrir ce tiroir, car cela 61 00:04:31,500 --> 00:04:34,540 nous permettra ensuite de revenir en arrière, mais 62 00:04:34,590 --> 00:04:40,530 sur cet écran, nous devrions voir les commandes où nous avons essentiellement des articles où nous voyons un 63 00:04:40,960 --> 00:04:49,800 peu comme la somme de cet ordre, la date et puis aussi un bouton où nous pouvons taper sur où nous voyons plus de détails et si 64 00:04:49,800 --> 00:04:56,850 nous tapons sur ce bouton, alors nous avons cette zone facultative qui s'ouvre ou se ferme et là-dedans, je veulent essentiellement voir 65 00:04:56,860 --> 00:05:02,040 les articles de la commande, ce qui est essentiellement ce que nous avions dans le panier. 66 00:05:02,040 --> 00:05:09,810 Nous avions donc deux livres ici avec un prix de 19 par exemple, eh bien, cela apparaîtrait ici dans la zone de 67 00:05:09,810 --> 00:05:11,590 détail lorsque nous ouvrirons cela. 68 00:05:11,610 --> 00:05:12,490 Voilà l'idée ici dans 69 00:05:12,540 --> 00:05:13,230 la commande, 70 00:05:13,230 --> 00:05:18,030 nous pouvons développer une commande afin que nous ne voyions pas seulement la somme et la date, mais nous voyons également 71 00:05:18,030 --> 00:05:19,200 les articles du panier que 72 00:05:19,230 --> 00:05:23,720 nous avons placés là-bas, donc essentiellement ce que nous avions ici dans le panier, cela apparaît dans les commandes. 73 00:05:23,960 --> 00:05:25,380 Voilà donc l'écran 74 00:05:25,380 --> 00:05:33,480 des commandes, nous avons également des produits gérés et dessinons-le ici peut-être. Les produits gérés sont un autre domaine de cette application où nous 75 00:05:33,480 --> 00:05:40,620 avons également ce bouton de menu pour ouvrir à nouveau ce tiroir afin que nous puissions accéder aux autres parties de 76 00:05:40,620 --> 00:05:47,130 l'application, mais ici dans l'écran des produits gérés où nous avons nos propres produits, les produits utilisateur et dans 77 00:05:47,280 --> 00:05:52,980 cette application, nous n'ajouterons pas encore d'authentification mais nous l'ajouterons plus tard, mais ici, nous avons nos 78 00:05:53,340 --> 00:05:55,380 propres produits. Ici, l'idée est 79 00:05:55,380 --> 00:06:01,290 encore une fois que nous voyons essentiellement une liste de produits qui est assez proche de ce que nous voyons 80 00:06:01,350 --> 00:06:08,790 ici sur l'écran de la boutique, de sorte que nous avons comme nos cartes ici avec une image, avec le titre et le prix peut-être, 81 00:06:08,790 --> 00:06:11,980 donc nous peut réutiliser cette liste ici probablement mais bien sûr 82 00:06:12,510 --> 00:06:18,720 les options que nous avons sur chaque produit, qui diffèrent. Au lieu de l'ajouter à un panier 83 00:06:18,720 --> 00:06:22,400 et d'afficher les détails, nous pouvons le supprimer, c'est 84 00:06:22,440 --> 00:06:28,710 un bouton et nous pouvons également le modifier. Bien sûr, nous ne pouvons modifier que nos propres produits, mais encore 85 00:06:28,710 --> 00:06:35,400 une fois, nous n'aurons pas de véritable mappage utilisateur ici, nous pouvons le faire avec un ID utilisateur factice que nous attachons à chaque produit, 86 00:06:35,730 --> 00:06:37,470 mais c'est tout pour le moment. 87 00:06:37,530 --> 00:06:39,330 Nous avons donc le bouton modifier 88 00:06:39,330 --> 00:06:41,920 et supprimer, maintenant en plus ici dans l'en-tête, nous 89 00:06:41,940 --> 00:06:47,640 avons donc besoin de plus d'espace ici, dans l'en-tête, nous aurons également un bouton d'action qui nous permet d'ajouter un 90 00:06:47,640 --> 00:06:48,390 nouveau produit. 91 00:06:48,390 --> 00:06:53,310 Donc, fondamentalement, cela devrait être un peu plus large ici, j'ai dessiné cela trop étroitement. 92 00:06:53,340 --> 00:07:00,030 Nous avons donc ce bouton d'action ici et ce bouton d'action ici, ce bouton plus, cela devrait nous amener à 93 00:07:00,030 --> 00:07:02,480 une nouvelle page où nous pouvons ajouter 94 00:07:02,490 --> 00:07:12,630 un nouveau produit, donc cela nous amènera à la page de produit ajoutée ici où nous pouvons bien sûr aller ici et là, nous pouvons ajouter un nouveau produit et cela 95 00:07:12,720 --> 00:07:19,720 nous permet d'ajouter un titre ici avec une entrée de texte et cette entrée de texte peut également être en dessous 96 00:07:19,720 --> 00:07:23,650 de l'étiquette de titre, vous pouvez construire cela comme vous le souhaitez. 97 00:07:23,670 --> 00:07:25,770 Nous devrions être en mesure 98 00:07:25,890 --> 00:07:32,390 d'ajouter le prix, nous devrions être en mesure d'ajouter une description ici, pourrait être une entrée multiligne ici, 99 00:07:32,400 --> 00:07:36,530 nous devons bien sûr être en mesure d'ajouter une imageUrl également. 100 00:07:36,570 --> 00:07:41,460 C'est donc ce que nous pouvons ajouter ici et ensuite nous avons besoin d'un bouton ici dans la barre d'action, un bouton de coche 101 00:07:41,460 --> 00:07:46,440 ou quelque chose comme ça qui nous permet de le confirmer. Nous ne nous soucierons pas trop de toute la gestion des 102 00:07:46,440 --> 00:07:47,120 entrées utilisateur 103 00:07:47,130 --> 00:07:52,230 ici à ce stade, car j'aurai un module séparé où j'y plongerai dans tous les détails, comment vous pouvez le faire de 104 00:07:52,530 --> 00:07:57,330 manière élégante, comment vous pouvez ajouter la validation, ici, dans cette application, nous garderons cela très basique, nous ne vérifierons pas 105 00:07:57,330 --> 00:08:00,870 si l'utilisateur a entré quelque chose de correct ou quelque chose comme ça, nous le 106 00:08:00,870 --> 00:08:02,350 ferons plus tard dans le cours. 107 00:08:02,430 --> 00:08:07,470 Ici, nous venons de rassembler cette entrée de base lorsque ce bouton ici, ce bouton de coche ici 108 00:08:07,830 --> 00:08:13,560 est enfoncé, nous sommes renvoyés à cette page et bien sûr, nous utilisons Redux dans notre système de gestion d'état 109 00:08:13,560 --> 00:08:20,100 pour ajouter un nouveau produit à la liste des produits qui puis apparaît également ici dans notre boutique et qui apparaît ici dans 110 00:08:20,100 --> 00:08:23,280 notre liste de produits bien sûr que nous pouvons administrer. 111 00:08:23,340 --> 00:08:24,420 Voilà donc ce que nous avons ici. 112 00:08:24,480 --> 00:08:32,100 Maintenant, si nous tapons sur modifier ici, si nous sélectionnons ce bouton de modification ici, nous sommes également dirigés vers cette même page de produit 113 00:08:32,100 --> 00:08:40,410 de modification, mais bien sûr, nous avons ici des valeurs pré-remplies ici, pré-remplies avec le produit que nous avons chargé et il y a certains champs qui 114 00:08:40,770 --> 00:08:43,110 nous ne pouvons pas modifier, par exemple 115 00:08:43,110 --> 00:08:49,080 le prix ne devrait pas être modifiable parce que si le prix était modifiable, alors si nous l'avions déjà dans 116 00:08:49,080 --> 00:08:51,230 le panier, ce serait un problème, 117 00:08:51,480 --> 00:08:54,390 donc nous ne permettrons pas de modifier le prix ici, 118 00:08:54,390 --> 00:08:57,840 nous permettra cependant de modifier le titre, la description et l'imageUrl, 119 00:08:57,930 --> 00:09:00,210 c'est donc quelque chose qui est possible. 120 00:09:00,210 --> 00:09:01,210 C'est donc la seule 121 00:09:01,260 --> 00:09:04,180 différence, nous avons des champs pré-remplis et le prix n'est pas modifiable. 122 00:09:04,260 --> 00:09:09,840 Si nous appuyons sur la coche en mode édition et que nous pouvons savoir si nous modifions ou non par le 123 00:09:09,840 --> 00:09:14,220 fait que nous ayons reçu un ID de produit en tant que paramètre, par exemple, une 124 00:09:14,220 --> 00:09:20,100 fois que nous avons terminé la modification, nous pouvons appuyer sur cette icône de coche puis nous sommes également repris et nous 125 00:09:20,100 --> 00:09:23,660 enregistrons simplement tout ce que nous avons modifié ici dans notre produit. 126 00:09:23,670 --> 00:09:25,780 Ceci est l'application ici. 127 00:09:25,890 --> 00:09:30,700 Comme je l'ai mentionné, ce sera également une base pour les modules suivants, nous 128 00:09:30,700 --> 00:09:38,100 y ajouterons également une requête HTTP, l'authentification, nous ferons ici toute cette validation de formulaire de manière plus élégante et ainsi de 129 00:09:38,100 --> 00:09:40,020 suite, mais ce module ici 130 00:09:40,050 --> 00:09:46,110 est maintenant une excellente pratique pour savoir comment créer une telle application, comment travailler avec des composants, les 131 00:09:46,200 --> 00:09:51,240 styliser, comment ajouter de la navigation, car nous avons évidemment beaucoup de navigation dans cette 132 00:09:51,240 --> 00:09:54,940 application et comment gérer notre état dans cette application de magasinage. 133 00:09:55,020 --> 00:09:59,850 Comme je l'ai mentionné dans la dernière conférence, vous pouvez ignorer ce module, mais vous devriez certainement vous 134 00:09:59,850 --> 00:10:05,100 plonger dans le code fini afin de pouvoir suivre les modules suivants, mais ma recommandation est bien sûr que vous a) 135 00:10:05,100 --> 00:10:10,840 soit essayiez tout cela par vous-même et bien sûr, votre résultat ne sera pas le même que celui que j'obtiens, vous devriez donc 136 00:10:10,860 --> 00:10:16,230 également regarder mes vidéos par la suite pour voir comment je l'ai fait et pour que vous ayez la même base 137 00:10:16,230 --> 00:10:18,360 de code à suivre, mais ce sera une 138 00:10:18,360 --> 00:10:23,280 excellente pratique même si votre résultat y est d'abord parce qu'il n'y a pas nécessairement de mauvaise ou de 139 00:10:23,280 --> 00:10:28,890 bonne approche ou b) votre autre option est bien sûr que vous ne l'essayez pas par vous-même et que vous vous contentez 140 00:10:28,890 --> 00:10:29,870 de suivre, également 141 00:10:29,970 --> 00:10:34,830 une option valable mais je crois que vous tirez un peu plus parti du cours si vous l'essayez d'abord 142 00:10:34,830 --> 00:10:35,490 par vous-même, 143 00:10:35,490 --> 00:10:40,080 mais à la fin, faites ce que vous voulez. Dans la prochaine conférence, nous allons plonger dans ce sujet et commencer à créer 144 00:10:40,080 --> 00:10:40,500 cette application.