Planifions donc l'application
que nous allons créer et nous allons créer une application de magasinage de base, une boutique
en ligne de base dans une application que vous pourriez dire. Donc, dans cette application ici, nous aurons certainement besoin d'un tas de
produits
qui peuvent être répertoriés, nous aurons donc un écran de présentation des produits où nous verrons ces cartes avec nos
produits, avec une image, avec le titre et le prix peut-être quelque chose comme ça et aussi un
panier ou un bouton ajouter au panier et un bouton de détails, donc en gros un bouton qui nous permet d'aller
à une page de détails et un bouton qui nous permet d'ajouter ceci
à un panier.
Parce que si vous touchez ce bouton de panier ici,
donc si vous sélectionnez ce bouton de panier, alors cela est ajouté à un panier et vous pouvez atteindre ce panier
avec un bouton d'action ici dans la
barre d'action, donc dans l'en-tête supérieur, là je veulent avoir une telle icône de panier,
probablement un peu plus agréable que ce que j'ai dessiné ici, mais cette icône ici à la fin nous
permet d'aller à une page séparée par la suite, un écran séparé de cette application où nous pouvons bien
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
de nos articles comme un livre et ce que cela
coûte et quelque chose
comme ça.
Donc, fondamentalement, nous voyons notre panier ici, nous voyons une somme de cela,
puis nous voyons les articles individuels et bien
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
devrait pas être en dessous de cela , nous avons donc ici
un bouton de commande.
En fait, cela devrait être
ici, donc ici je veux avoir une ligne où nous avons la somme totale, puis à côté, le bouton de commande.
C'est donc essentiellement l'objectif,
mais vous pouvez le placer où
vous le souhaitez, à la fin, nous voulons avoir un bouton qui nous permet de commander tout ce que
nous
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.
Donc, lorsque cela passe une commande, cette icône ici supprimera simplement un article du
panier.
C'est donc
l'idée, bien sûr, si vous ajoutez le même article plusieurs fois au panier, vous ne devez pas ajouter plusieurs
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
le panier et qui diminue si nous le supprimons jusqu'à ce que tous les articles soient supprimés, auquel
cas la ligne entière serait supprimée ici.
Voilà comment cette page de
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
n'importe où sur l'image ou quelque chose comme ça
et ensuite nous devrions être amenés à un page de détail.
Voilà donc un autre écran dans cette application où nous pouvons bien sûr revenir en arrière.
C'est la page de détail de l'icône
où nous devrions voir l'image, nous devrions probablement voir
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
description et nous voulons probablement avoir un bouton de panier ici également, où nous pouvons également ajouter
des articles au panier ici. Voilà donc le flux concernant nos produits que nous
avons ici. Maintenant,
la chose importante dans cette application sera que nous ne pouvons pas seulement voir des produits et
les acheter et les ajouter au panier, etc., mais bien sûr, nous pouvons également consulter nos commandes et, surtout,
nous pouvons également ajouter de nouveaux produits.
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
nous allons dans notre boutique pour ainsi dire, c'est cette partie ici où nous en sommes
lorsque l'application démarre.
La deuxième option devrait être nos
commandes et la troisième option devrait être comme une option de gestion des produits, où nous pouvons gérer nos propres produits
que vous souhaitez offrir à d'autres utilisateurs.
Donc, comme je l'ai dit, la boutique est essentiellement ce que nous voyons déjà.
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
nous permettra ensuite de revenir en arrière, mais
sur cet écran, nous devrions voir les commandes où nous avons essentiellement des articles où nous voyons un
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
nous tapons sur ce bouton, alors nous avons cette zone facultative qui s'ouvre ou se ferme et là-dedans, je veulent essentiellement voir
les articles de la commande, ce qui est essentiellement ce que nous avions dans le panier.
Nous avions donc deux livres ici avec un prix de 19 par exemple, eh bien, cela apparaîtrait ici dans la zone de
détail lorsque nous ouvrirons cela.
Voilà l'idée ici dans
la commande,
nous pouvons développer une commande afin que nous ne voyions pas seulement la somme et la date, mais nous voyons également
les articles du panier que
nous avons placés là-bas, donc essentiellement ce que nous avions ici dans le panier, cela apparaît dans les commandes.
Voilà donc l'écran
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
avons également ce bouton de menu pour ouvrir à nouveau ce tiroir afin que nous puissions accéder aux autres parties de
l'application, mais ici dans l'écran des produits gérés où nous avons nos propres produits, les produits utilisateur et dans
cette application, nous n'ajouterons pas encore d'authentification mais nous l'ajouterons plus tard, mais ici, nous avons nos
propres produits. Ici, l'idée est
encore une fois que nous voyons essentiellement une liste de produits qui est assez proche de ce que nous voyons
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,
donc nous peut réutiliser cette liste ici probablement mais bien sûr
les options que nous avons sur chaque produit, qui diffèrent. Au lieu de l'ajouter à un panier
et d'afficher les détails, nous pouvons le supprimer, c'est
un bouton et nous pouvons également le modifier. Bien sûr, nous ne pouvons modifier que nos propres produits, mais encore
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,
mais c'est tout pour le moment.
Nous avons donc le bouton modifier
et supprimer, maintenant en plus ici dans l'en-tête, nous
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
nouveau produit.
Donc, fondamentalement, cela devrait être un peu plus large ici, j'ai dessiné cela trop étroitement.
Nous avons donc ce bouton d'action ici et ce bouton d'action ici, ce bouton plus, cela devrait nous amener à
une nouvelle page où nous pouvons ajouter
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
nous permet d'ajouter un titre ici avec une entrée de texte et cette entrée de texte peut également être en dessous
de l'étiquette de titre, vous pouvez construire cela comme vous le souhaitez.
Nous devrions être en mesure
d'ajouter le prix, nous devrions être en mesure d'ajouter une description ici, pourrait être une entrée multiligne ici,
nous devons bien sûr être en mesure d'ajouter une imageUrl également.
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
ou quelque chose comme ça qui nous permet de le confirmer. Nous ne nous soucierons pas trop de toute la gestion des
entrées utilisateur
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
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
si l'utilisateur a entré quelque chose de correct ou quelque chose comme ça, nous le
ferons plus tard dans le cours.
Ici, nous venons de rassembler cette entrée de base lorsque ce bouton ici, ce bouton de coche ici
est enfoncé, nous sommes renvoyés à cette page et bien sûr, nous utilisons Redux dans notre système de gestion d'état
pour ajouter un nouveau produit à la liste des produits qui puis apparaît également ici dans notre boutique et qui apparaît ici dans
notre liste de produits bien sûr que nous pouvons administrer.
Voilà donc ce que nous avons ici.
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
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
nous ne pouvons pas modifier, par exemple
le prix ne devrait pas être modifiable parce que si le prix était modifiable, alors si nous l'avions déjà dans
le panier, ce serait un problème,
donc nous ne permettrons pas de modifier le prix ici,
nous permettra cependant de modifier le titre, la description et l'imageUrl,
c'est donc quelque chose qui est possible.
C'est donc la seule
différence, nous avons des champs pré-remplis et le prix n'est pas modifiable.
Si nous appuyons sur la coche en mode édition et que nous pouvons savoir si nous modifions ou non par le
fait que nous ayons reçu un ID de produit en tant que paramètre, par exemple, une
fois que nous avons terminé la modification, nous pouvons appuyer sur cette icône de coche puis nous sommes également repris et nous
enregistrons simplement tout ce que nous avons modifié ici dans notre produit.
Ceci est l'application ici.
Comme je l'ai mentionné, ce sera également une base pour les modules suivants, nous
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
suite, mais ce module ici
est maintenant une excellente pratique pour savoir comment créer une telle application, comment travailler avec des composants, les
styliser, comment ajouter de la navigation, car nous avons évidemment beaucoup de navigation dans cette
application et comment gérer notre état dans cette application de magasinage.
Comme je l'ai mentionné dans la dernière conférence, vous pouvez ignorer ce module, mais vous devriez certainement vous
plonger dans le code fini afin de pouvoir suivre les modules suivants, mais ma recommandation est bien sûr que vous a)
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
également regarder mes vidéos par la suite pour voir comment je l'ai fait et pour que vous ayez la même base
de code à suivre, mais ce sera une
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
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
de suivre, également
une option valable mais je crois que vous tirez un peu plus parti du cours si vous l'essayez d'abord
par vous-même,
mais à la fin, faites ce que vous voulez. Dans la prochaine conférence, nous allons plonger dans ce sujet et commencer à créer
cette application.