1
00:00:01,060 --> 00:00:03,293
‫Instructeur : Terminons maintenant enfin cette partie

2
00:00:03,293 --> 00:00:05,413
‫de la fonctionnalité de connexion.

3
00:00:06,980 --> 00:00:09,300
‫Et rappelez-vous comment j'ai dit que

4
00:00:09,300 --> 00:00:11,790
‫dans cette vidéo, je voulais implémenter une

5
00:00:11,790 --> 00:00:15,010
‫très bonne alerte lorsque l'utilisateur se connecte avec succès,

6
00:00:16,450 --> 00:00:19,210
‫et donc pour voir cela, déconnectons l'utilisateur pour

7
00:00:19,210 --> 00:00:21,663
‫le moment en supprimant le cookie manuellement.

8
00:00:22,700 --> 00:00:24,760
‫Rechargeons, et maintenant bien sûr, l'utilisateur

9
00:00:24,760 --> 00:00:26,883
‫ne devrait plus être connecté, et en

10
00:00:28,840 --> 00:00:30,720
‫effet il ne l'est pas.

11
00:00:30,720 --> 00:00:33,120
‫Comme nous le savons déjà, c'est parce que le

12
00:00:33,120 --> 00:00:35,410
‫cookie n'a pas été envoyé dans la demande.

13
00:00:35,410 --> 00:00:37,790
‫Il y a donc un middleware connecté que nous avons

14
00:00:37,790 --> 00:00:39,050
‫créé dans la dernière

15
00:00:39,050 --> 00:00:42,840
‫vidéo n'a pas mis l'objet utilisateur en réponse. locaux, vous vous en

16
00:00:42,840 --> 00:00:44,320
‫souvenez ?

17
00:00:44,320 --> 00:00:47,810
‫Donc, si ce n'est pas là, le manuel de l'utilisateur ne sera

18
00:00:47,810 --> 00:00:50,650
‫pas rendu, et à la place cette partie sera rendue

19
00:00:50,650 --> 00:00:53,367
‫afin que nous puissions maintenant cliquer ici sur Connexion.

20
00:00:53,367 --> 00:00:56,920
‫Donc, cette alerte dont je parlais avant, je veux qu'elle

21
00:00:56,920 --> 00:00:59,760
‫apparaisse ici essentiellement au début, puis après

22
00:00:59,760 --> 00:01:01,470
‫une seconde et demie,

23
00:01:01,470 --> 00:01:04,000
‫nous voulons toujours faire ce rechargement.

24
00:01:04,000 --> 00:01:07,610
‫Passons donc à la page d'accueil principale.

25
00:01:07,610 --> 00:01:09,550
‫Quoi qu'il en soit,

26
00:01:09,550 --> 00:01:13,800
‫créons quelques fonctions pour cette alerte dans un autre fichier séparé.

27
00:01:13,800 --> 00:01:14,983
‫Donc nouveau fichier,

28
00:01:16,607 --> 00:01:18,853
‫alerte. js.

29
00:01:20,210 --> 00:01:23,320
‫D'accord, mais maintenant, avant de pouvoir passer à autre chose,

30
00:01:23,320 --> 00:01:24,510
‫nous devons réfléchir

31
00:01:24,510 --> 00:01:26,890
‫un peu à notre architecture frontale ici.

32
00:01:26,890 --> 00:01:30,070
‫Maintenant, ce cours, bien sûr, ne concerne pas le front-end,

33
00:01:30,070 --> 00:01:32,470
‫mais nous devons au moins nous en

34
00:01:32,470 --> 00:01:34,170
‫soucier un peu ici,

35
00:01:34,170 --> 00:01:36,080
‫car nous commençons vraiment à

36
00:01:36,080 --> 00:01:38,130
‫obtenir une bonne quantité de fichiers

37
00:01:38,130 --> 00:01:40,420
‫ici, et les inclure tous dans nos

38
00:01:40,420 --> 00:01:42,550
‫pages n'est pas une bonne pratique.

39
00:01:42,550 --> 00:01:43,383
‫Donc,

40
00:01:44,770 --> 00:01:46,700
‫comme nous l'avons fait ici.

41
00:01:46,700 --> 00:01:48,710
‫Ce n'est donc pas une bonne pratique.

42
00:01:48,710 --> 00:01:51,200
‫Nous ne devrions avoir qu'un seul gros fichier

43
00:01:51,200 --> 00:01:53,340
‫JavaScript qui inclut tout le code.

44
00:01:53,340 --> 00:01:56,000
‫Ainsi, dans le développement frontal JavaScript moderne,

45
00:01:56,000 --> 00:01:59,150
‫nous utilisons généralement ce qu'on appelle un bundler de modules.

46
00:01:59,150 --> 00:02:02,210
‫Le plus populaire est probablement toujours Webpack, mais généralement

47
00:02:02,210 --> 00:02:04,700
‫Webpack nous pose beaucoup de problèmes et

48
00:02:04,700 --> 00:02:07,140
‫c'est vraiment pénible de le configurer.

49
00:02:07,140 --> 00:02:11,380
‫Il y a donc en fait un très gentil petit nouveau dans le

50
00:02:11,380 --> 00:02:13,930
‫quartier, pour ainsi dire, qui s'appelle Parcel.

51
00:02:13,930 --> 00:02:18,930
‫Nous allons donc jeter un œil à cela, voir si cela apparaît déjà,

52
00:02:19,680 --> 00:02:21,870
‫et en effet, c'est celui-là.

53
00:02:21,870 --> 00:02:26,490
‫Un bundler d'applications Web si rapide et sans configuration.

54
00:02:26,490 --> 00:02:29,080
‫C'est donc exactement ce que nous recherchons.

55
00:02:29,080 --> 00:02:31,790
‫Simplement un bundler qui ne nécessite aucune configuration

56
00:02:31,790 --> 00:02:34,240
‫complexe, car nous ne voulons pas

57
00:02:34,240 --> 00:02:36,340
‫perdre de temps avec cela.

58
00:02:37,470 --> 00:02:41,753
‫Très bien, alors allons-y et installons-le ici.

59
00:02:42,940 --> 00:02:44,340
‫Donc npm install et

60
00:02:46,010 --> 00:02:48,603
‫je ne sais pas si c'est juste Parcel en fait.

61
00:02:50,180 --> 00:02:51,013
‫Alors

62
00:02:52,509 --> 00:02:53,459
‫revenons ici.

63
00:02:55,860 --> 00:02:58,963
‫C'est probablement Parcel. js ou quelque chose,

64
00:02:59,820 --> 00:03:02,810
‫parce que je me souviens de la dernière fois que

65
00:03:02,810 --> 00:03:06,850
‫je l'ai installé, cela n'a pas fonctionné tout de suite, alors vérifions cela.

66
00:03:06,850 --> 00:03:08,993
‫Oui, en effet, c'est Parcel-bundler.

67
00:03:18,370 --> 00:03:20,300
‫Maintenant, nous avons une erreur.

68
00:03:20,300 --> 00:03:25,300
‫D'accord, j'ai donc oublié de l'enregistrer en tant que dépendance de développement.

69
00:03:27,070 --> 00:03:30,810
‫Donc, nous le voulons en fait comme un développeur de sauvegarde, d'accord,

70
00:03:30,810 --> 00:03:33,910
‫et c'est parce que c'est un outil de développement.

71
00:03:33,910 --> 00:03:35,483
‫Maintenant, quelque chose n'allait toujours pas.

72
00:03:39,640 --> 00:03:41,313
‫Laissez-moi l'essayer avec sudo ici.

73
00:03:50,150 --> 00:03:52,790
‫Et donc, si cela ne fonctionnait pas

74
00:03:52,790 --> 00:03:56,943
‫non plus dans votre cas, utilisez simplement sudo pour obtenir les autorisations appropriées.

75
00:04:03,360 --> 00:04:05,910
‫Très bien, alors jetons un coup d'œil à notre paquet. json

76
00:04:07,060 --> 00:04:11,140
‫et en effet le voici, d'accord.

77
00:04:11,140 --> 00:04:12,620
‫Maintenant, si vous regardez

78
00:04:12,620 --> 00:04:14,810
‫cette vidéo quelque temps après que je l'ai

79
00:04:14,810 --> 00:04:17,550
‫enregistrée, ils sont peut-être déjà passés à la version numéro

80
00:04:18,550 --> 00:04:20,200
‫deux et cela, comme nous le

81
00:04:20,200 --> 00:04:22,370
‫savons déjà, pourrait introduire des changements de rupture.

82
00:04:22,370 --> 00:04:25,840
‫Et donc à partir de maintenant, si vous obtenez des erreurs que

83
00:04:25,840 --> 00:04:27,740
‫vous n'avez pas vues ici dans

84
00:04:27,740 --> 00:04:30,940
‫la vidéo, veuillez installer ce package ici en utilisant la

85
00:04:30,940 --> 00:04:32,533
‫version .

86
00:04:33,590 --> 00:04:34,750
‫1, d'accord.

87
00:04:34,750 --> 00:04:35,860
‫Donc, en

88
00:04:38,610 --> 00:04:41,650
‫gros, ajoutez-en un comme ça, d'accord.

89
00:04:41,650 --> 00:04:45,630
‫Donc, cela vous annonce alors que vous rencontrez ces erreurs étranges et j'espère

90
00:04:45,630 --> 00:04:48,100
‫que cela m'épargnera également des tonnes de commentaires

91
00:04:48,100 --> 00:04:50,110
‫négatifs ou de critiques négatives qui

92
00:04:50,110 --> 00:04:54,330
‫s'attendent à ce que je mette à jour toutes mes vidéos toutes les deux

93
00:04:54,330 --> 00:04:57,640
‫semaines simplement parce qu'un outil est mis à jour, et bien

94
00:04:57,640 --> 00:04:59,560
‫sûr ce n'est pas possible.

95
00:04:59,560 --> 00:05:01,330
‫Tant de fois, la solution

96
00:05:01,330 --> 00:05:03,790
‫la plus simple consiste simplement à utiliser la

97
00:05:03,790 --> 00:05:07,030
‫même version que celle que j'utilise dans la vidéo, d'accord.

98
00:05:07,030 --> 00:05:10,420
‫Quoi qu'il en soit, maintenant, afin d'utiliser réellement

99
00:05:10,420 --> 00:05:12,973
‫Parcel, ajoutons quelques scripts ici.

100
00:05:15,410 --> 00:05:19,053
‫J'en rajoute donc un à regarder ou JavaScript.

101
00:05:20,890 --> 00:05:22,400
‫D'accord, et pour

102
00:05:24,380 --> 00:05:26,443
‫cela j'utilise la commande Parcel watch.

103
00:05:28,100 --> 00:05:31,250
‫Cela fonctionnerait déjà très bien dès la sortie de la

104
00:05:31,250 --> 00:05:33,810
‫boîte, mais je veux encore configurer un peu,

105
00:05:33,810 --> 00:05:36,890
‫car sinon, cela va me mettre le paquet final dans

106
00:05:36,890 --> 00:05:39,270
‫certains dossiers que je ne veux pas.

107
00:05:39,270 --> 00:05:44,270
‫Précisons donc quel dossier il doit réellement surveiller.

108
00:05:45,920 --> 00:05:50,920
‫C'est donc public/JavaScript puis index. js, c'est donc notre point d'entrée et

109
00:05:52,670 --> 00:05:54,190
‫c'est le fichier

110
00:05:54,190 --> 00:05:56,490
‫que nous allons créer dans une seconde.

111
00:05:56,490 --> 00:05:57,350
‫D'accord.

112
00:05:57,350 --> 00:05:59,670
‫Ensuite, le répertoire de sortie doit également être

113
00:06:03,432 --> 00:06:05,237
‫en public.

114
00:06:06,980 --> 00:06:07,900
‫js, d'accord.

115
00:06:07,900 --> 00:06:09,700
‫Plusieurs fois, vous aurez des

116
00:06:09,700 --> 00:06:12,330
‫dossiers différents pour le développement et pour la

117
00:06:12,330 --> 00:06:15,550
‫sortie, mais dans ce cas, comme il s'agit d'une architecture

118
00:06:15,550 --> 00:06:18,400
‫très simple, je vais mettre le fichier bundle au

119
00:06:18,400 --> 00:06:20,550
‫même endroit que les fichiers de développement.

120
00:06:20,550 --> 00:06:23,000
‫Très bien, spécifions également le fichier de

121
00:06:25,102 --> 00:06:25,935
‫sortie et

122
00:06:26,860 --> 00:06:32,600
‫cela devrait donc être bundle. js, d'accord.

123
00:06:32,600 --> 00:06:35,750
‫Alors maintenant, je peux l'exécuter et il examinera ensuite

124
00:06:35,750 --> 00:06:39,430
‫ce fichier ici et verra si quelque chose change ou dans

125
00:06:39,430 --> 00:06:41,330
‫l'une des dépendances et chaque

126
00:06:41,330 --> 00:06:43,110
‫fois que cela se

127
00:06:43,110 --> 00:06:45,260
‫produira, il regroupera à nouveau tous

128
00:06:45,260 --> 00:06:49,090
‫les fichiers dans cet ensemble. js, d'accord.

129
00:06:49,090 --> 00:06:50,610
‫Ensuite, dupliquons

130
00:06:50,610 --> 00:06:53,720
‫également cela, car nous voulons également une

131
00:06:53,720 --> 00:06:56,820
‫version finale, disons de production, d'accord.

132
00:06:56,820 --> 00:06:59,040
‫Donc celui-ci, nous allons exécuter ceux où

133
00:06:59,040 --> 00:07:01,100
‫ils sont vraiment terminés, d'accord.

134
00:07:01,100 --> 00:07:03,450
‫Donc ça prend un peu plus de temps, mais

135
00:07:03,450 --> 00:07:06,630
‫ça fait aussi un peu plus de trucs d'optimisation, mais ça, bien

136
00:07:06,630 --> 00:07:08,710
‫sûr, nous n'avons pas besoin de développement.

137
00:07:08,710 --> 00:07:12,130
‫En développement comme toujours, nous voulons juste que cela fonctionne.

138
00:07:12,130 --> 00:07:14,090
‫Exécutons donc npm

139
00:07:15,970 --> 00:07:20,030
‫avec watch:js, mais avant cela, créons en fait

140
00:07:20,980 --> 00:07:22,473
‫l'index. js.

141
00:07:23,370 --> 00:07:25,320
‫Fermons ici certains de ces dossiers.

142
00:07:26,170 --> 00:07:28,283
‫C'est un peu trop confus comme ça.

143
00:07:31,340 --> 00:07:34,890
‫Donc index. js et faisons une simple

144
00:07:36,640 --> 00:07:38,403
‫console. connectez-vous ici pour le moment.

145
00:07:39,670 --> 00:07:41,503
‫Bonjour de Parcel,

146
00:07:42,460 --> 00:07:43,293
‫d'accord.

147
00:07:45,480 --> 00:07:47,510
‫Ensuite, allons également à notre

148
00:07:47,510 --> 00:07:50,940
‫base ici, puis nous allons maintenant commenter tout cela

149
00:07:50,940 --> 00:07:52,140
‫et n'inclure

150
00:07:53,810 --> 00:07:55,163
‫que le fichier bundle.

151
00:07:57,720 --> 00:08:01,790
‫Encore une fois, un fichier qui contiendra essentiellement tout le code qui

152
00:08:01,790 --> 00:08:04,000
‫se trouve dans tous les autres fichiers

153
00:08:04,000 --> 00:08:05,533
‫et toutes leurs dépendances.

154
00:08:06,910 --> 00:08:10,860
‫Alors faisons une sauvegarde, et maintenant, exécutons ceci, voyons ce que

155
00:08:10,860 --> 00:08:12,033
‫nous obtenons là.

156
00:08:12,980 --> 00:08:17,170
‫Et en effet, nous avons obtenu notre nouveau fichier, qui est bundle. js et il

157
00:08:17,170 --> 00:08:21,000
‫contient déjà tout ce tas de code, d'accord,

158
00:08:21,000 --> 00:08:25,663
‫simplement pour cette ligne de code à ce stade.

159
00:08:26,820 --> 00:08:29,203
‫Mais de toute façon rechargeons notre page

160
00:08:31,510 --> 00:08:33,840
‫ici, et bonjour de Parcel.

161
00:08:33,840 --> 00:08:38,140
‫Cela a donc fonctionné, et maintenant allons-y et

162
00:08:38,140 --> 00:08:40,343
‫installons ce fichier ici.

163
00:08:42,200 --> 00:08:44,980
‫Donc, pour éviter toute confusion, fermons ces fichiers dont

164
00:08:44,980 --> 00:08:47,180
‫nous n'avons plus besoin pour ce que

165
00:08:47,180 --> 00:08:48,923
‫nous faisons en ce moment.

166
00:08:51,320 --> 00:08:52,570
‫Donc ça fait beaucoup de choses.

167
00:08:54,340 --> 00:08:56,900
‫D'accord, celui-ci non plus.

168
00:08:56,900 --> 00:09:00,560
‫Alors maintenant, l'idée est essentiellement que cet indice. js est notre

169
00:09:00,560 --> 00:09:02,930
‫fichier d'entrée, et donc dans celui-ci,

170
00:09:02,930 --> 00:09:05,500
‫nous ne pouvons pas obtenir de données

171
00:09:05,500 --> 00:09:08,400
‫de l'interface utilisateur, puis nous déléguons des actions

172
00:09:08,400 --> 00:09:11,960
‫à certaines fonctions provenant de ces autres modules ici essentiellement.

173
00:09:11,960 --> 00:09:13,870
‫Nous avons donc maintenant le module de

174
00:09:13,870 --> 00:09:15,830
‫connexion, nous avons notre module d'alertes, et

175
00:09:15,830 --> 00:09:17,950
‫comme dans Node. js, nous

176
00:09:17,950 --> 00:09:21,920
‫pouvons maintenant exporter les données de ces modules.

177
00:09:21,920 --> 00:09:24,550
‫Alors faisons-le, et ce que je veux

178
00:09:24,550 --> 00:09:26,440
‫exporter, c'est cette fonction ici.

179
00:09:26,440 --> 00:09:28,030
‫Maintenant, cela fonctionne un peu différemment

180
00:09:28,030 --> 00:09:30,200
‫de celui de Node. js

181
00:09:30,200 --> 00:09:33,160
‫car Node. js utilise quelque chose

182
00:09:33,160 --> 00:09:35,040
‫appelé CommonJS pour implémenter des modules.

183
00:09:35,040 --> 00:09:36,510
‫Je ne sais pas

184
00:09:36,510 --> 00:09:38,600
‫si j'ai mentionné cela lorsque nous

185
00:09:38,600 --> 00:09:43,520
‫avons parlé des modules pour la première fois, mais ici, dans JavaScript frontal depuis ES2015

186
00:09:43,520 --> 00:09:47,000
‫ou ES6, il existe également quelque chose appelé modules en JavaScript.

187
00:09:47,000 --> 00:09:48,720
‫La syntaxe est un

188
00:09:48,720 --> 00:09:51,150
‫peu différente, mais en fait la façon dont

189
00:09:51,150 --> 00:09:54,470
‫cela fonctionne dans les coulisses, mais en fait, si vous comprenez

190
00:09:54,470 --> 00:09:57,060
‫comment cela fonctionne avec CommonJS, celle-ci sera très similaire.

191
00:09:57,060 --> 00:10:00,740
‫Ainsi, les modules ES6 utilisent la syntaxe d'import export.

192
00:10:00,740 --> 00:10:04,070
‫Donc ici, tout ce que nous avons à faire est de dire

193
00:10:05,120 --> 00:10:08,430
‫exporter, puis tout ce que nous voulons exporter à partir de ce

194
00:10:08,430 --> 00:10:10,110
‫fichier, et c'est vraiment tout.

195
00:10:10,110 --> 00:10:13,170
‫Maintenant, ce morceau de code ici, nous allons

196
00:10:13,170 --> 00:10:15,100
‫l'utiliser dans le fichier d'index.

197
00:10:15,100 --> 00:10:17,720
‫Alors rappelez-vous comment j'ai dit que ce fichier

198
00:10:17,720 --> 00:10:20,630
‫ici sert davantage à obtenir des données de l'interface

199
00:10:20,630 --> 00:10:22,420
‫utilisateur, puis à déléguer l'action.

200
00:10:22,420 --> 00:10:26,203
‫C'est donc exactement ce que nous faisons ici, d'accord.

201
00:10:27,490 --> 00:10:30,320
‫Alors là on n'a que ce genre de

202
00:10:30,320 --> 00:10:32,950
‫module qui exporte ensuite la fonction login.

203
00:10:32,950 --> 00:10:35,350
‫Ensuite, nous pouvons importer cela ici et appeler

204
00:10:36,370 --> 00:10:39,700
‫login ici même dans index. js et

205
00:10:39,700 --> 00:10:41,620
‫ça marche comme ça.

206
00:10:41,620 --> 00:10:44,210
‫Donc, importez au lieu d'exiger ensuite

207
00:10:44,210 --> 00:10:47,690
‫le nom de la variable que nous voulons importer.

208
00:10:47,690 --> 00:10:49,283
‫J'utilise donc des accolades ici.

209
00:10:50,466 --> 00:10:51,960
‫Cela s'appelle donc

210
00:10:55,420 --> 00:10:57,970
‫login et ensuite du nom du fichier.

211
00:10:57,970 --> 00:11:01,493
‫Qui dans ce cas, même répertoire, login.

212
00:11:03,080 --> 00:11:06,363
‫Maintenant, désactivons également eslint ici, et j'ai utilisé ces

213
00:11:10,730 --> 00:11:13,570
‫accolades ici, essentiellement parce que nous effectuons l'exportation

214
00:11:13,570 --> 00:11:16,840
‫de cette manière, mais il existe également quelque chose

215
00:11:16,840 --> 00:11:20,070
‫de similaire à module. export qui est

216
00:11:20,070 --> 00:11:22,140
‫en quelque sorte l'exportation par défaut.

217
00:11:22,140 --> 00:11:26,780
‫Ainsi, dans les modules ES6, cela s'appelle en fait une exportation par défaut.

218
00:11:26,780 --> 00:11:30,320
‫Donc, dans ce cas, nous n'aurions pas besoin de ces accolades.

219
00:11:30,320 --> 00:11:31,153
‫D'accord.

220
00:11:31,153 --> 00:11:33,750
‫Pour le moment, nous devons procéder comme

221
00:11:33,750 --> 00:11:37,200
‫ceci, car c'est bien le nom de cette fonction que

222
00:11:37,200 --> 00:11:39,110
‫nous avons exportée, d'accord.

223
00:11:39,110 --> 00:11:42,860
‫Maintenant, quelque chose de vraiment important dans cette connexion est que

224
00:11:42,860 --> 00:11:44,350
‫nous avons utilisé axios.

225
00:11:44,350 --> 00:11:47,250
‫Et rappelez-vous comment j'ai dit que nous allions l'installer

226
00:11:47,250 --> 00:11:51,040
‫à partir de npm en tant que module npm, n'est-ce pas ?

227
00:11:51,040 --> 00:11:54,340
‫Faisons-le maintenant, et en fait parce que nous avons

228
00:11:54,340 --> 00:11:56,660
‫déjà commenté les axios d'ici.

229
00:11:56,660 --> 00:11:59,560
‫Donc, pour le moment, la connexion ne peut pas utiliser axios.

230
00:11:59,560 --> 00:12:03,060
‫Eh bien parce que nous ne l'avons plus inclus ici.

231
00:12:03,060 --> 00:12:06,070
‫Allons donc ajouter, ouvrir un nouveau terminal

232
00:12:06,070 --> 00:12:08,903
‫et installer axios dans notre projet.

233
00:12:18,310 --> 00:12:23,280
‫Alors maintenant, tout ce que nous avons à faire est de dire importer axios

234
00:12:25,830 --> 00:12:27,773
‫depuis axios, et c'est tout,

235
00:12:29,290 --> 00:12:30,260
‫très bien.

236
00:12:30,260 --> 00:12:33,900
‫Donc ce fichier, pour l'instant du moins, est terminé mais

237
00:12:33,900 --> 00:12:36,530
‫ne le fermons pas car nous en

238
00:12:36,530 --> 00:12:38,540
‫aurons encore besoin très bientôt.

239
00:12:38,540 --> 00:12:42,020
‫Ensuite, nous devrions également installer un polyfill, qui permettra

240
00:12:42,020 --> 00:12:44,420
‫également à certaines des nouvelles fonctionnalités

241
00:12:44,420 --> 00:12:47,120
‫JavaScript de fonctionner dans les anciens navigateurs.

242
00:12:47,120 --> 00:12:50,360
‫Alors disons npm install et celui-ci ici

243
00:12:50,360 --> 00:12:52,850
‫semble un peu bizarre.

244
00:12:52,850 --> 00:12:57,850
‫Ajoutons donc babel/polyfill, comme

245
00:12:57,980 --> 00:12:59,240
‫ceci.

246
00:12:59,240 --> 00:13:01,370
‫Ensuite, ici, nous

247
00:13:02,600 --> 00:13:03,433
‫allons

248
00:13:06,180 --> 00:13:09,070
‫importer comme ça, d'accord.

249
00:13:09,070 --> 00:13:12,290
‫Donc celui-ci ici, nous ne l'enregistrons dans aucune variable, car ce

250
00:13:12,290 --> 00:13:14,200
‫n'est pas du tout nécessaire.

251
00:13:14,200 --> 00:13:17,640
‫Tout ce que nous voulons que cela fasse, c'est essentiellement

252
00:13:17,640 --> 00:13:20,840
‫d'être inclus dans notre bundle final pour bien

253
00:13:20,840 --> 00:13:23,337
‫polyremplir certaines des fonctionnalités de JavaScript.

254
00:13:23,337 --> 00:13:26,320
‫Très bien, et c'est donc aussi pourquoi il est

255
00:13:26,320 --> 00:13:29,220
‫ici en première ligne de ces importations.

256
00:13:29,220 --> 00:13:33,960
‫Quoi qu'il en soit, importons maintenant cette mapbox également.

257
00:13:33,960 --> 00:13:36,800
‫Pour cela, nous devons d'abord

258
00:13:36,800 --> 00:13:40,640
‫créer une fonction qui va faire tout cela ici.

259
00:13:40,640 --> 00:13:41,790
‫D'accord.

260
00:13:41,790 --> 00:13:43,190
‫Créons donc export

261
00:13:45,450 --> 00:13:46,283
‫displayMap,

262
00:13:50,660 --> 00:13:54,363
‫qui prendra en compte le tableau des emplacements.

263
00:13:55,620 --> 00:14:02,290
‫Cela sera donc effectivement lu dans l'index. js, d'accord.

264
00:14:02,290 --> 00:14:06,510
‫Donc encore une fois, index. js sert davantage à obtenir des

265
00:14:06,510 --> 00:14:09,030
‫données à partir de l'interface utilisateur, donc à

266
00:14:09,030 --> 00:14:13,110
‫partir du site Web, puis à déléguer certaines actions à ces autres

267
00:14:13,110 --> 00:14:14,230
‫modules, d'accord.

268
00:14:14,230 --> 00:14:18,653
‫Par conséquent, ce genre de choses ici sera fait à l'intérieur d'index.

269
00:14:21,010 --> 00:14:22,883
‫Faisons-le ici.

270
00:14:28,750 --> 00:14:32,723
‫Ensuite, importez displayMap

271
00:14:37,420 --> 00:14:40,690
‫mapbox, d'accord.

272
00:14:40,690 --> 00:14:42,640
‫Appelons cela

273
00:14:45,980 --> 00:14:48,470
‫aussi avec les emplacements.

274
00:14:48,470 --> 00:14:52,420
‫Maintenant, rappelez-vous quand nous avons créé cette carte et rappelez-vous comment

275
00:14:52,420 --> 00:14:55,400
‫il nous a demandé si nous voulions utiliser

276
00:14:55,400 --> 00:14:57,760
‫la bibliothèque mapbox sur npm?

277
00:14:57,760 --> 00:15:00,670
‫Nous pourrions donc maintenant aller de l'avant

278
00:15:00,670 --> 00:15:04,590
‫et utiliser celui-ci au lieu de celui que nous utilisons actuellement.

279
00:15:04,590 --> 00:15:06,450
‫Alors bon ce n'est

280
00:15:06,450 --> 00:15:07,993
‫pas ici.

281
00:15:09,850 --> 00:15:10,693
‫Ouais, donc celui-ci.

282
00:15:10,693 --> 00:15:13,170
‫Voici donc la bibliothèque mapbox que nous utilisons

283
00:15:13,170 --> 00:15:15,330
‫actuellement, mais encore une fois, il

284
00:15:15,330 --> 00:15:17,290
‫existe également une version npm.

285
00:15:17,290 --> 00:15:20,290
‫Donc, nous n'aurions pas besoin d'avoir celui-ci.

286
00:15:20,290 --> 00:15:22,620
‫Cependant, pour une raison quelconque, il

287
00:15:22,620 --> 00:15:26,410
‫y a un problème avec l'utilisation de cette bibliothèque avec Parcel, d'accord.

288
00:15:26,410 --> 00:15:29,430
‫Donc, d'autres personnes rencontrent ce problème.

289
00:15:29,430 --> 00:15:32,370
‫Nous ne pouvons donc pas utiliser la bibliothèque

290
00:15:32,370 --> 00:15:34,080
‫mapbox npm avec Parcel.

291
00:15:34,080 --> 00:15:36,993
‫C'est donc une raison pour laquelle je le fais toujours comme ça.

292
00:15:38,850 --> 00:15:39,810
‫D'accord.

293
00:15:39,810 --> 00:15:43,360
‫Mapbox est donc complété par ceci.

294
00:15:43,360 --> 00:15:45,533
‫Nous n'en avons plus besoin non plus.

295
00:15:46,470 --> 00:15:49,150
‫Maintenant, débarrassons-nous en fait de certaines de ces erreurs que

296
00:15:49,150 --> 00:15:50,593
‫nous avons vues ici.

297
00:15:51,510 --> 00:15:53,060
‫Eh bien maintenant, ils ne

298
00:15:53,060 --> 00:15:55,500
‫sont plus là, mais par exemple, nous avons eu

299
00:15:55,500 --> 00:15:57,630
‫le problème que ce code ici créait

300
00:15:57,630 --> 00:16:02,280
‫des erreurs lorsque nous étions sur des pages qui n'avaient pas cette carte ici, n'est-ce pas.

301
00:16:02,280 --> 00:16:05,310
‫Parce que bien sûr sur la page de détail a cette carte

302
00:16:05,310 --> 00:16:07,890
‫donc cet élément, mais alors ce code s'exécute bien sûr

303
00:16:07,890 --> 00:16:09,203
‫sur toutes les autres

304
00:16:09,203 --> 00:16:10,973
‫pages, cela créera alors des erreurs là-bas.

305
00:16:11,840 --> 00:16:13,700
‫Alors corrigeons ça.

306
00:16:13,700 --> 00:16:15,980
‫Donc, ce que je fais ici, c'est d'abord

307
00:16:15,980 --> 00:16:18,950
‫créer un élément avec cela, puis tester s'il existe réellement

308
00:16:18,950 --> 00:16:20,933
‫avant d'exécuter cette ligne de code.

309
00:16:23,610 --> 00:16:25,660
‫Nous allons donc créer ici quelques éléments DOM.

310
00:16:32,415 --> 00:16:33,248
‫Et ici

311
00:16:34,820 --> 00:16:35,683
‫je dirais délégation.

312
00:16:39,750 --> 00:16:41,380
‫Donc si mapbox

313
00:16:43,370 --> 00:16:46,623
‫et alors seulement à ces deux actions

314
00:16:47,690 --> 00:16:48,790
‫ici, d'accord.

315
00:16:48,790 --> 00:16:50,350
‫Ici c'est aussi puis mapbox et

316
00:16:52,420 --> 00:16:53,853
‫c'est beaucoup plus sympa.

317
00:16:57,190 --> 00:16:58,850
‫Ici, mettons également des

318
00:16:58,850 --> 00:17:00,630
‫valeurs, et je vais mettre ces

319
00:17:00,630 --> 00:17:03,690
‫deux-là parce qu'en fait nous pourrions en avoir besoin

320
00:17:03,690 --> 00:17:07,140
‫ou en fait nous en aurons besoin pour d'autres choses également.

321
00:17:07,140 --> 00:17:08,803
‫Donc, de cette façon, c'est un peu plus propre.

322
00:17:10,170 --> 00:17:13,230
‫Ajoutons également cet écouteur d'événement

323
00:17:13,230 --> 00:17:16,660
‫ici uniquement si cet élément existe, d'accord.

324
00:17:16,660 --> 00:17:20,683
‫Parce que bon, encore une fois, cela créera une erreur si ce n'est pas le cas.

325
00:17:22,260 --> 00:17:23,777
‫Donc loginform, et

326
00:17:27,750 --> 00:17:28,583
‫donc

327
00:17:29,610 --> 00:17:30,443
‫si

328
00:17:33,770 --> 00:17:37,460
‫et ensuite réutilisons-le ici, sauvegardons-le, et maintenant

329
00:17:37,460 --> 00:17:39,363
‫ça a l'air mieux.

330
00:17:40,270 --> 00:17:41,103
‫D'accord.

331
00:17:42,355 --> 00:17:44,113
‫Fermons en fait ce terminal.

332
00:17:45,500 --> 00:17:48,010
‫Ceci, vous devriez continuer à regrouper notre code chaque fois

333
00:17:48,010 --> 00:17:49,480
‫qu'il y a une sauvegarde.

334
00:17:49,480 --> 00:17:50,980
‫Enregistrons-le à nouveau ici.

335
00:17:53,600 --> 00:17:56,440
‫Bon, j'espère que ça a changé maintenant.

336
00:17:56,440 --> 00:17:58,203
‫Alors allons-y et essayons cela.

337
00:18:00,610 --> 00:18:03,800
‫Donc, si vous pouvez toujours vous connecter à ce stade,

338
00:18:03,800 --> 00:18:06,563
‫cela signifie que cela a réellement fonctionné.

339
00:18:13,470 --> 00:18:15,850
‫Eh bien peut-être pas.

340
00:18:15,850 --> 00:18:17,263
‫Essayons à nouveau ici.

341
00:18:21,360 --> 00:18:25,113
‫Très bien, donc il y a quelque chose qui ne va pas ici.

342
00:18:26,430 --> 00:18:29,620
‫Donc, comme toujours, enregistrons cet e-mail et ce mot de passe

343
00:18:29,620 --> 00:18:31,093
‫sur la console ici.

344
00:18:32,570 --> 00:18:35,300
‫Je veux dire, parce que nous savons déjà

345
00:18:35,300 --> 00:18:38,233
‫qu'en fait cette fonction est appelée ici, n'est-ce pas.

346
00:18:39,260 --> 00:18:41,360
‫Sinon, nous n'aurions même pas l'erreur.

347
00:18:45,380 --> 00:18:49,560
‫Exact, car cette erreur vient clairement de notre API.

348
00:18:49,560 --> 00:18:53,403
‫Donc, tout ce que nous avons ici fonctionne réellement, je crois.

349
00:19:03,010 --> 00:19:04,763
‫Jetons un œil à la console.

350
00:19:10,830 --> 00:19:14,610
‫Il semble donc qu'il n'y ait en fait pas de nom d'utilisateur

351
00:19:14,610 --> 00:19:16,193
‫et de mot de passe.

352
00:19:18,320 --> 00:19:19,153
‫D'accord.

353
00:19:21,640 --> 00:19:22,640
‫Je ne sais pas pourquoi.

354
00:19:22,640 --> 00:19:26,003
‫Jetons un coup d'œil si nous obtenons réellement quelque chose.

355
00:19:26,870 --> 00:19:29,350
‫Alors connectez-vous

356
00:19:31,140 --> 00:19:33,963
‫et je les enregistrerai

357
00:19:34,950 --> 00:19:38,763
‫également ici, pas ici mais ici.

358
00:19:50,730 --> 00:19:52,600
‫Et donc apparemment, le problème doit

359
00:19:52,600 --> 00:19:55,060
‫être que le nom d'utilisateur et le mot

360
00:19:55,060 --> 00:19:57,220
‫de passe ne sont pas vraiment définis.

361
00:19:57,220 --> 00:20:00,140
‫Oh, et maintenant, bien sûr, je peux voir pourquoi.

362
00:20:00,140 --> 00:20:01,483
‫Quelle stupide erreur.

363
00:20:02,440 --> 00:20:04,900
‫Nous essayons donc de lire ces valeurs ici,

364
00:20:04,900 --> 00:20:07,340
‫dès le début lorsque la page se

365
00:20:07,340 --> 00:20:11,223
‫charge, et bien sûr, à ce stade, ces valeurs ne sont pas définies.

366
00:20:12,230 --> 00:20:15,400
‫Donc, bien sûr, nous ne pouvons

367
00:20:15,400 --> 00:20:19,103
‫les définir qu'ici dans notre écouteur d'événement, n'est-ce pas.

368
00:20:20,370 --> 00:20:22,800
‫Donc, au moment où cette fonction ici est

369
00:20:22,800 --> 00:20:25,690
‫bien appelée, bien sûr, l'e-mail et le mot de passe sont

370
00:20:25,690 --> 00:20:28,143
‫définis, c'est donc le moment où nous pouvons les lire.

371
00:20:31,210 --> 00:20:33,423
‫C'était donc un peu stupide, mais,

372
00:20:36,870 --> 00:20:39,470
‫vous savez, parfois ce genre de choses arrive.

373
00:20:46,560 --> 00:20:48,673
‫Maintenant, copions ceci ici.

374
00:20:50,830 --> 00:20:53,460
‫Cette fois, nous sommes connectés avec succès,

375
00:20:53,460 --> 00:20:56,373
‫ce qui signifie que notre code ici fonctionne toujours.

376
00:20:57,740 --> 00:21:01,500
‫Super, et maintenant passons à la dernière partie que

377
00:21:01,500 --> 00:21:03,310
‫nous voulions faire dans

378
00:21:03,310 --> 00:21:07,373
‫cette conférence, qui est en fait de créer ces alertes, d'accord.

379
00:21:08,700 --> 00:21:13,700
‫Créons donc une fonction appelée show alert et exportons-la.

380
00:21:13,720 --> 00:21:16,790
‫Ainsi, lors de la connexion, nous importerons cette fonction et

381
00:21:16,790 --> 00:21:17,793
‫l'utiliserons là-bas.

382
00:21:18,890 --> 00:21:21,070
‫Donc, showAlert et ceci en

383
00:21:23,583 --> 00:21:27,557
‫tant qu'entrée obtiendra un type et un message,

384
00:21:29,090 --> 00:21:31,010
‫donc comme ça.

385
00:21:31,010 --> 00:21:32,230
‫Et ce type

386
00:21:34,070 --> 00:21:35,600
‫est soit un succès,

387
00:21:38,170 --> 00:21:39,253
‫soit une erreur,

388
00:21:40,210 --> 00:21:41,043
‫d'accord.

389
00:21:41,043 --> 00:21:44,020
‫Car en fonction de cette entrée nous aurons alors des

390
00:21:44,020 --> 00:21:46,890
‫CSS différents pour chacune de ces alertes et vous

391
00:21:46,890 --> 00:21:48,590
‫le verrez dans une seconde.

392
00:21:49,450 --> 00:21:52,360
‫Donc, ce que nous allons faire, c'est créer un

393
00:21:52,360 --> 00:21:56,233
‫balisage HTML ici, puis l'insérer dans notre code HTML, c'est donc quelque

394
00:21:57,210 --> 00:21:58,733
‫chose de très simple.

395
00:22:00,530 --> 00:22:04,520
‫Donc, un balisage et la chaîne du modèle

396
00:22:04,520 --> 00:22:07,280
‫et maintenant du bon HTML.

397
00:22:07,280 --> 00:22:11,370
‫Il s'agit donc simplement d'un div avec une

398
00:22:13,110 --> 00:22:14,680
‫classe d'alerte, puis

399
00:22:14,680 --> 00:22:18,110
‫d'alerte -- donc un modificateur avec notre

400
00:22:18,110 --> 00:22:19,113
‫type.

401
00:22:21,890 --> 00:22:24,450
‫D'accord, et c'est pourquoi il

402
00:22:24,450 --> 00:22:27,070
‫doit s'agir d'un succès ou d'une erreur.

403
00:22:27,070 --> 00:22:29,650
‫Alors permettez-moi de montrer rapidement cela

404
00:22:29,650 --> 00:22:32,800
‫en CSS, car je pense qu'il est vraiment important

405
00:22:32,800 --> 00:22:36,530
‫de vraiment savoir comment tout cela se joue ensemble, d'accord.

406
00:22:36,530 --> 00:22:38,520
‫Nous avons donc ici notre

407
00:22:38,520 --> 00:22:41,863
‫classe d'alerte, puis le succès de l'alerte et l'erreur d'alerte.

408
00:22:43,300 --> 00:22:44,880
‫Très bien.

409
00:22:44,880 --> 00:22:48,273
‫Comme toujours, désactivons eslint ici, d'accord, et débarrassons-nous

410
00:22:49,840 --> 00:22:52,700
‫de cela et maintenant, bien sûr,

411
00:22:54,530 --> 00:22:57,570
‫voici le message que nous transmettons à

412
00:22:57,570 --> 00:22:59,193
‫cette fonction.

413
00:23:00,190 --> 00:23:01,970
‫Bien sûr, nous pourrions

414
00:23:01,970 --> 00:23:04,470
‫ensuite l'utiliser dans toute l'application, mais dans

415
00:23:04,470 --> 00:23:08,150
‫ce cas, nous n'en avons besoin ici que pour notre connexion.

416
00:23:08,150 --> 00:23:11,053
‫Alors documentez-vous. queryselector, et maintenant

417
00:23:11,890 --> 00:23:13,990
‫nous sélectionnons ici l'élément où

418
00:23:13,990 --> 00:23:17,900
‫nous voulons inclure ce HTML que nous venons de créer.

419
00:23:17,900 --> 00:23:19,950
‫C'est donc en fait juste au

420
00:23:19,950 --> 00:23:21,530
‫début de l'élément body.

421
00:23:21,530 --> 00:23:23,153
‫Donc tout en haut de la page.

422
00:23:24,570 --> 00:23:25,473
‫Donc

423
00:23:27,570 --> 00:23:32,380
‫body, puis insérez le HTML adjacent, donc celui-ci ici.

424
00:23:32,380 --> 00:23:34,720
‫Si vous avez suivi mon cours complet

425
00:23:34,720 --> 00:23:37,793
‫sur JavaScript, tout cela n'aura rien de nouveau pour

426
00:23:38,890 --> 00:23:39,810
‫vous, d'accord.

427
00:23:39,810 --> 00:23:42,670
‫Nous pouvons donc ici spécifier quelques mots-clés, et

428
00:23:42,670 --> 00:23:45,080
‫dans ce cas, nous voulons afterbegin.

429
00:23:45,080 --> 00:23:46,900
‫Donc, fondamentalement, cela signifie

430
00:23:46,900 --> 00:23:50,763
‫que c'est à l'intérieur du corps, mais dès le début, d'accord.

431
00:23:52,580 --> 00:23:54,800
‫Ensuite, le HTML, donc le

432
00:23:54,800 --> 00:23:57,070
‫balisage, que nous voulons réellement inclure.

433
00:23:57,070 --> 00:23:57,903
‫Super.

434
00:23:57,903 --> 00:24:00,760
‫Cela va donc créer une alerte très simple

435
00:24:00,760 --> 00:24:04,900
‫basée sur le type et la méthode, mais maintenant nous voulons également

436
00:24:04,900 --> 00:24:07,193
‫une fonction pour masquer les alertes.

437
00:24:08,380 --> 00:24:11,410
‫Alors créons-le ici aussi, exportons-le, et probablement nous n'en

438
00:24:11,410 --> 00:24:14,103
‫avons même pas besoin en dehors d'ici,

439
00:24:14,980 --> 00:24:18,480
‫mais toujours pour la réutilisation, c'est toujours une bonne idée

440
00:24:18,480 --> 00:24:19,773
‫d'exporter tout cela.

441
00:24:21,410 --> 00:24:25,173
‫Celui-ci n'a besoin de prendre aucun argument.

442
00:24:27,250 --> 00:24:31,220
‫Alors maintenant, tout ce que nous allons faire est

443
00:24:31,220 --> 00:24:33,780
‫de sélectionner l'élément avec la

444
00:24:33,780 --> 00:24:36,700
‫classe d'alerte, puis de le supprimer.

445
00:24:36,700 --> 00:24:38,167
‫Donc alerte de sélecteur

446
00:24:40,120 --> 00:24:40,953
‫de requête.

447
00:24:43,710 --> 00:24:45,803
‫Donc exactement le même nom de classe qu'ici.

448
00:24:46,720 --> 00:24:49,430
‫Ensuite, nous devons utiliser une astuce

449
00:24:49,430 --> 00:24:52,610
‫JavaScript dans laquelle nous devons passer d'un niveau

450
00:24:52,610 --> 00:24:55,700
‫à l'élément parent, puis supprimer un élément enfant.

451
00:24:55,700 --> 00:24:59,380
‫Donc, s'il y a un élément, alors

452
00:24:59,380 --> 00:25:02,147
‫élément. parentElement. removeChild

453
00:25:06,728 --> 00:25:08,478
‫puis l'élément.

454
00:25:09,413 --> 00:25:10,910
‫D'accord.

455
00:25:10,910 --> 00:25:14,070
‫Encore une fois, cela devrait être simplement du JavaScript de base

456
00:25:14,070 --> 00:25:16,230
‫ou une manipulation DOM de base.

457
00:25:16,230 --> 00:25:18,150
‫Donc, puisqu'il s'agit d'un cours

458
00:25:18,150 --> 00:25:20,393
‫de nœud, je ne vais pas approfondir cela.

459
00:25:21,680 --> 00:25:23,770
‫Quoi qu'il en soit, ce que je veux faire

460
00:25:23,770 --> 00:25:25,670
‫ici maintenant, c'est que chaque fois que

461
00:25:25,670 --> 00:25:28,393
‫nous affichons une alerte, masquez d'abord toutes les alertes qui existent déjà.

462
00:25:30,400 --> 00:25:32,340
‫Nous devons donc toujours

463
00:25:32,340 --> 00:25:34,353
‫nous assurer de toujours exécuter hideAlert.

464
00:25:35,310 --> 00:25:39,150
‫Enfin, je veux aussi toujours masquer toutes les alertes après

465
00:25:39,150 --> 00:25:40,383
‫cinq secondes.

466
00:25:42,370 --> 00:25:44,480
‫Donc window

467
00:25:46,885 --> 00:25:50,220
‫setTimeout hideAlert après cinq

468
00:25:50,220 --> 00:25:51,790
‫secondes.

469
00:25:51,790 --> 00:25:54,533
‫Très bien, et maintenant importons cela ici.

470
00:25:58,030 --> 00:26:00,220
‫Afficher l'alerte, il a été appelé, n'est-ce pas ?

471
00:26:00,220 --> 00:26:03,193
‫Oh showAlert, avec type et message.

472
00:26:05,900 --> 00:26:06,973
‫Alors montreAlert

473
00:26:08,140 --> 00:26:08,973
‫à

474
00:26:12,280 --> 00:26:15,730
‫partir de là et ainsi de suite...

475
00:26:15,730 --> 00:26:19,010
‫Ouais, donc nous voulons utiliser ce droit dans cet endroit.

476
00:26:19,010 --> 00:26:21,970
‫Donc, au lieu de l'alerte JavaScript, nous

477
00:26:23,297 --> 00:26:25,650
‫voulons faire showAlert, d'accord, et ici

478
00:26:25,650 --> 00:26:27,180
‫la même chose.

479
00:26:27,180 --> 00:26:29,220
‫Nous devons encore spécifier le

480
00:26:29,220 --> 00:26:30,380
‫type ici,

481
00:26:32,925 --> 00:26:35,467
‫et c'est donc le succès dans

482
00:26:40,220 --> 00:26:42,630
‫ce cas et ici c'est l'erreur.

483
00:26:42,630 --> 00:26:44,193
‫Nous avons atteint l'auto-complétion.

484
00:26:46,450 --> 00:26:47,963
‫D'accord, c'est mieux.

485
00:26:48,890 --> 00:26:50,483
‫Alors testons-le.

486
00:26:53,580 --> 00:26:56,923
‫Et tout d'abord, nous devons nous déconnecter en supprimant ce cookie.

487
00:27:01,160 --> 00:27:02,990
‫Rechargez, connectez-vous, et maintenant je

488
00:27:02,990 --> 00:27:03,993
‫le teste

489
00:27:11,400 --> 00:27:13,900
‫d'abord avec un mauvais mot de

490
00:27:15,500 --> 00:27:17,290
‫passe et c'est parti.

491
00:27:17,290 --> 00:27:21,400
‫Donc e-mail ou mot de passe incorrect directement dans notre belle alerte et vous

492
00:27:21,400 --> 00:27:24,400
‫avez vu qu'au bout de cinq secondes, il a disparu.

493
00:27:24,400 --> 00:27:26,160
‫Bien sûr, nous aurions pu

494
00:27:26,160 --> 00:27:28,400
‫y mettre de l'animation sympa et tout,

495
00:27:28,400 --> 00:27:31,830
‫mais je pense que comme ça, c'est déjà plus que suffisant.

496
00:27:31,830 --> 00:27:33,950
‫Voyons donc cela à nouveau rapidement, et

497
00:27:33,950 --> 00:27:36,113
‫c'est donc à cela que cela ressemblera, mais

498
00:27:37,600 --> 00:27:40,400
‫quand c'est correct, alors bien sûr, cela devrait être vert.

499
00:27:42,030 --> 00:27:44,930
‫Alors oui, connecté avec succès et nous

500
00:27:44,930 --> 00:27:47,890
‫voyons un rechargement après une seconde et demie

501
00:27:47,890 --> 00:27:50,320
‫et maintenant cela fonctionne vraiment.

502
00:27:50,320 --> 00:27:53,593
‫C'est notre authentification complète sur le front-end.

503
00:27:54,880 --> 00:27:59,430
‫C'était beaucoup de travail, mais si vous voulez mon avis, cela en vaut vraiment la peine.

504
00:27:59,430 --> 00:28:02,070
‫Maintenant, la seule chose qui manque, c'est

505
00:28:02,070 --> 00:28:05,690
‫que nous nous déconnections lorsque nous cliquons sur ce bouton ici.

506
00:28:05,690 --> 00:28:07,510
‫Donc pour l'instant ce n'est pas

507
00:28:07,510 --> 00:28:10,133
‫le cas et donc dans la prochaine vidéo réparons ça.