1
00:00:02,160 --> 00:00:05,140
Pour ce module et pour cette application que

2
00:00:05,160 --> 00:00:11,310
nous construisons, vous trouverez à nouveau un projet de démarrage attaché à cette conférence que vous pouvez utiliser pour

3
00:00:11,310 --> 00:00:15,480
commencer ou vous pouvez bien sûr créer une nouvelle application expo par vous-même.

4
00:00:15,480 --> 00:00:21,300
Maintenant, c'est l'application que j'ai jointe, une application très basique avec I'm your app que nous pouvons à peine voir ce qui n'a pas d'importance parce

5
00:00:21,330 --> 00:00:23,980
que nous ne garderons pas ce texte de toute façon et nous

6
00:00:24,160 --> 00:00:26,370
n'avons qu'une seule application. fichier js.

7
00:00:26,430 --> 00:00:32,130
Maintenant, beaucoup de choses que je fais dans ce module seront des choses que vous avez vues dans les modules précédents parce que

8
00:00:32,130 --> 00:00:33,660
c'est évidemment l'idée centrale ici.

9
00:00:33,660 --> 00:00:39,480
Nous mettrons en pratique ce que nous avons appris jusqu'à présent et il y aura de nouvelles choses ou

10
00:00:39,480 --> 00:00:41,710
des modèles qui pourraient également vous intéresser.

11
00:00:41,730 --> 00:00:47,160
Maintenant, bien sûr, dans cette application que j'ai esquissée lors de la dernière conférence, nous aurons quelques écrans, donc nous aurons

12
00:00:47,160 --> 00:00:52,230
certainement besoin de navigation et donc j'ajouterai un dossier de navigation afin de pouvoir y stocker ma configuration de

13
00:00:52,230 --> 00:00:54,380
navigation et ce n'est bien sûr qu'une

14
00:00:54,420 --> 00:00:57,480
configuration possible, comme je l'ai mentionné précédemment, vous pouvez travailler avec n'importe

15
00:00:57,480 --> 00:01:03,690
quelle structure de dossiers que vous souhaitez et qui fonctionne pour vous. Outre le dossier de navigation, je veux également

16
00:01:03,690 --> 00:01:04,740
avoir un

17
00:01:04,740 --> 00:01:09,690
dossier d'écrans ici, dans ce dossier d'écrans, je veux également stocker les écrans

18
00:01:09,690 --> 00:01:15,660
sur lesquels nous pouvons naviguer et j'ajouterai un dossier de composants pour tous mes composants habituels,

19
00:01:15,660 --> 00:01:18,460
bien sûr, les écrans sont également React

20
00:01:18,520 --> 00:01:24,450
composants, mais les composants normaux, je veux dire ici sont les composants que nous ne chargeons

21
00:01:24,450 --> 00:01:30,720
pas directement en tant qu'écrans mais que nous intégrons dans des écrans à la place ou dans

22
00:01:30,720 --> 00:01:37,500
d'autres composants, c'est donc ce que nous aurons ici. Je vais également ajouter un dossier de constantes car, encore

23
00:01:37,500 --> 00:01:43,860
une fois, je travaillerai avec mes constantes de couleur ici afin de pouvoir utiliser mes couleurs présélectionnées dans toute l'application.

24
00:01:43,880 --> 00:01:49,280
Maintenant, il y a un tas de façons différentes de commencer, ce que j'aime faire en premier dans

25
00:01:49,280 --> 00:01:51,020
mes applications, c'est que je

26
00:01:51,020 --> 00:01:56,870
commence par les écrans, même si je n'ajoute pas encore le contenu à tous, j'aime ajouter ce général structure afin

27
00:01:56,870 --> 00:02:01,570
que je puisse toujours voir sur quoi je dois encore travailler, quelles fonctionnalités manquent encore.

28
00:02:01,880 --> 00:02:04,980
Donc, donc, j'ajouterai les écrans que j'aurai dans cette application et

29
00:02:05,180 --> 00:02:09,890
ici je ferai quelque chose que je n'ai pas fait auparavant et qui est totalement facultatif mais

30
00:02:09,890 --> 00:02:12,120
j'organiserai mes écrans dans des sous-dossiers séparés.

31
00:02:12,170 --> 00:02:15,770
Je vais avoir un dossier avec mes écrans liés à la boutique

32
00:02:15,770 --> 00:02:20,930
et bien sûr, puisque nous allons créer une application de magasinage, tous les écrans sont en quelque

33
00:02:20,930 --> 00:02:26,540
sorte liés à la boutique, mais ici, je veux avoir les écrans qui nous aident directement à visualiser nos

34
00:02:26,540 --> 00:02:27,120
produits,

35
00:02:27,530 --> 00:02:34,430
à les ajouter vers le panier et ainsi de suite, puis je veux avoir un dossier séparé et c'est mon dossier utilisateur, vous pouvez

36
00:02:34,430 --> 00:02:36,400
dire, là, je veux avoir les écrans

37
00:02:36,470 --> 00:02:40,370
liés à l'utilisateur, ce serait donc mes produits utilisateur et mes produits d'administration.

38
00:02:40,440 --> 00:02:42,590
C'est comme ça que je vais diviser

39
00:02:42,590 --> 00:02:45,950
cela, mais bien sûr, vous pouvez organiser cela comme vous le souhaitez.

40
00:02:45,950 --> 00:02:52,670
Ainsi, dans le dossier de la boutique ici par exemple, je veux avoir mon écran de présentation des produits et ce sera l'écran

41
00:02:52,760 --> 00:02:58,340
que nous verrons lorsque l'application se chargera où nous avons tous les produits avec lesquels travailler et où nous

42
00:02:58,340 --> 00:03:04,880
pouvons ensuite sélectionner un produit ou l'ajouter directement au panier. Nous aurons donc également besoin d'un écran de détail du produit, c'est

43
00:03:04,880 --> 00:03:10,520
l'écran que nous voyons lorsque nous sélectionnons un produit et nous voulons en savoir plus, puis nous pouvons cliquer dessus ou

44
00:03:10,520 --> 00:03:16,940
le toucher et nous sommes dirigés vers cet écran de détail. Nous aurons également besoin d'un écran de panier, c'est sans surprise l'écran que

45
00:03:16,940 --> 00:03:22,430
nous voyons lorsque nous ajoutons un article au panier ou non que nous voyons ensuite, mais que nous pouvons visiter pour voir

46
00:03:22,430 --> 00:03:23,000
l'article

47
00:03:23,000 --> 00:03:24,440
là-bas, c'est donc quelque chose que

48
00:03:25,470 --> 00:03:30,600
nous pouvons y faire et je '' ll ajoutera également un écran de commandes où nous pouvons voir nos commandes.

49
00:03:30,600 --> 00:03:35,730
Maintenant, vous pouvez dire que l'écran du panier et le type d'écran de commande appartiennent au dossier utilisateur, car

50
00:03:35,730 --> 00:03:39,450
ils sont en quelque sorte exclusifs à l'utilisateur, chaque utilisateur a ses propres

51
00:03:39,450 --> 00:03:44,340
commandes et son propre panier et vous pouvez donc aller dans les deux sens, Je pense qu'ils sont

52
00:03:44,340 --> 00:03:47,970
un peu plus du côté des produits de la boutique, mais encore une

53
00:03:47,970 --> 00:03:51,960
fois, cela dépend entièrement de vous. Dans le dossier utilisateur,

54
00:03:51,960 --> 00:03:58,980
je veux avoir mon écran de produits utilisateur, donc ce sera l'écran où je verrai une liste de tous les

55
00:03:59,040 --> 00:04:06,570
produits qui appartiennent à cet utilisateur et l'écran de modification de produit qui est l'écran que nous utiliserons pour ajouter de

56
00:04:06,690 --> 00:04:08,710
nouveaux produits ou pour éditer des

57
00:04:08,730 --> 00:04:10,940
produits existants, nous pourrons les réutiliser.

58
00:04:11,160 --> 00:04:13,490
Ce sont les écrans dans lesquels nous travaillerons

59
00:04:13,500 --> 00:04:20,280
tout au long de ce module et nous ne les remplirons pas de vie tout de suite, nous allons plutôt travailler sur cette étape

60
00:04:20,280 --> 00:04:20,990
par étape,

61
00:04:21,000 --> 00:04:23,090
mais c'est ce dont nous aurons besoin.

62
00:04:23,220 --> 00:04:27,450
Maintenant, bien sûr, il y a aussi un autre dossier que nous pouvons déjà ajouter et

63
00:04:27,450 --> 00:04:32,820
c'est le dossier du magasin où nous gérerons notre magasin Redux et notre état Redux donc qui est notre système

64
00:04:32,820 --> 00:04:38,070
de gestion d'état avec lequel je veux travailler dont nous avons bien sûr besoin car nous en avons beaucoup

65
00:04:38,070 --> 00:04:44,280
des écrans qui doivent tous travailler sur le type de données associées et nous devons donc gérer ces données, nos produits et ce

66
00:04:44,280 --> 00:04:45,090
qui est

67
00:04:45,090 --> 00:04:48,200
dans le panier, etc. à un niveau mondial et Redux est

68
00:04:48,240 --> 00:04:53,520
vraiment génial pour cela, nous en aurons certainement besoin . Sur la même note, nous devons également installer certains

69
00:04:53,550 --> 00:05:00,900
packages, je vais donc exécuter npm install --save et installer Redux et React Redux. Nous aurons également besoin de React -navigation car

70
00:05:00,900 --> 00:05:07,480
bien sûr, nous ajouterons à nouveau la navigation, nous pouvons donc déjà y ajouter cela.

71
00:05:07,500 --> 00:05:14,540
J'ajouterai également déjà des boutons d'en-tête de navigation React parce que j'ajouterai des boutons d'en-tête ici et je veux avoir

72
00:05:14,550 --> 00:05:19,380
ces boutons joliment stylés et positionnés sans avoir à faire tout ce positionnement de

73
00:05:19,380 --> 00:05:22,650
style par moi-même et cela devrait être pour l'instant.

74
00:05:22,950 --> 00:05:28,770
Je vais donc déjà installer tous ces packages, nous en aurons besoin tout au long de

75
00:05:28,770 --> 00:05:36,570
ce module et avec ces packages installés et ces fichiers de base créés, nous avons une configuration de base solide pour commencer.

76
00:05:36,580 --> 00:05:41,820
Maintenant, en plus de ces packages, nous devons également installer deux

77
00:05:41,820 --> 00:05:49,050
autres packages à l'aide de la commande expo install et c'est react-native-gesture-handler, donc expo installer React-native-gesture-handler

78
00:05:49,050 --> 00:05:55,800
et également le package react-native-reanimated . Les deux packages doivent également être installés

79
00:05:55,980 --> 00:05:58,800
avec la commande expo install.

80
00:05:58,860 --> 00:06:02,100
Maintenant, bien sûr, il s'agit de remplir cela avec la vie et

81
00:06:02,190 --> 00:06:06,720
je veux commencer par le premier écran, nous verrons en fait quel est l'écran de présentation des produits.