1
00:00:00,120 --> 00:00:00,500
Non plus.

2
00:00:00,510 --> 00:00:01,450
Nous saluons le retour.

3
00:00:01,770 --> 00:00:06,290
Donc, dans cette leçon, nous nous concentrons sur l'amélioration de l'utilisabilité de notre camp.

4
00:00:06,510 --> 00:00:13,710
À l'heure actuelle, c'est une sorte de désastre en ce qui concerne la rétroaction, les messages d'erreur ou les messages de réussite pour nos utilisateurs.

5
00:00:13,920 --> 00:00:17,090
Et par désastre, je veux juste dire qu'il n'existe pas du tout.

6
00:00:17,100 --> 00:00:21,400
Nous avons un journal du conseil qui évidemment nos utilisateurs ne peuvent pas voir.

7
00:00:21,480 --> 00:00:27,000
Nous le voyons comme des développeurs dans notre consul ici où les serveurs sont en cours d'exécution, mais personne ne voit cela.

8
00:00:27,360 --> 00:00:32,370
Donc, nous allons nous concentrer sur l'ajout de quelques messages et je vais vous montrer ce que cela ressemble dans un instant.

9
00:00:32,460 --> 00:00:36,790
Avant de faire cela, nous avons trois objectifs principaux, je vais en parler maintenant.

10
00:00:36,990 --> 00:00:37,980
Donc je veux la démo.

11
00:00:37,980 --> 00:00:46,630
Tout d'abord vous montrer à quoi vous attendre comment il va regarder comment il se comporte alors nous allons réellement installer et configurer un paquet appelé connecter flash.

12
00:00:46,830 --> 00:00:53,940
Donc ce que nous faisons est d'ajouter en Flash ou le flasher un flash de ses différents pronoms et les gens l'appellent.

13
00:00:54,000 --> 00:00:56,070
Dans d'autres cadres le hachage flash.

14
00:00:56,070 --> 00:01:05,520
Les gens l'appellent des messages flash, mais essentiellement l'idée est que nous allons montrer un message à un utilisateur comme connecté avec succès ou déconnecté avec succès.

15
00:01:05,700 --> 00:01:08,310
Ou peut-être quelque chose comme vous n'avez pas la permission de le faire.

16
00:01:08,320 --> 00:01:12,270
Ou Connectez-vous avant d'ajouter un terrain de camping quelque chose comme ça.

17
00:01:12,390 --> 00:01:17,640
Nous voulons le montrer à un utilisateur une seule fois et nous ne voulons pas qu'il soit un élément permanent sur la page.

18
00:01:17,700 --> 00:01:31,470
Nous voulons juste le clignoter pour eux une fois, puis il va à la page suivante ou si l'utilisateur rafraîchit et puis la dernière chose est d'ajouter dans nos messages flash à l'en-tête et ajouter dans certaines classes d'amorçage qui seront de style.

19
00:01:31,470 --> 00:01:34,230
Donc, il ya certains construit dans les moyens de faire les choses avec bootstrap.

20
00:01:34,350 --> 00:01:44,100
Il s'agit d'une caractéristique commune à avoir des messages qui sont flashé à votre utilisateur sur toutes sortes de sites que bootstrap a construit dans le style pour que ce qui profitera.

21
00:01:44,250 --> 00:01:47,850
Je vais donc commencer par vous montrer à quoi il ressemblera.

22
00:01:47,940 --> 00:01:49,530
Donc j'ai le camp en cours d'exécution.

23
00:01:49,610 --> 00:01:59,970
Permettez-moi bien je vais vous montrer si je me déconnecte maintenant, donc je suis connecté en tant que congélateur si je me déconnecte, je reçois un message qui dit loungy jusqu'à nous pouvons changer ce texte de message.

24
00:01:59,970 --> 00:02:09,340
Évidemment, si j'essaie d'ajouter un nouveau terrain de camping en ce moment, alors que je ne suis pas connecté, je devrais maintenant recevoir un message indiquant que vous devez être connecté pour le faire.

25
00:02:09,420 --> 00:02:11,070
Et remarquez qu'il est lu ici.

26
00:02:11,520 --> 00:02:13,420
C'est donc une classe d'amorçage.

27
00:02:13,440 --> 00:02:18,610
Cette alerte que nous obtenons si j'étais frais la page disparaît.

28
00:02:18,690 --> 00:02:25,690
Donc maintenant, si j'essaie de m'inscrire, je dois dire que je m'inscris comme resti qui existe déjà.

29
00:02:25,950 --> 00:02:28,500
Donc je ne devrais pas pouvoir faire cela dans le passé.

30
00:02:28,500 --> 00:02:30,070
La page vient de rafraîchir.

31
00:02:30,330 --> 00:02:36,470
Mais ce que nous finirons par être un message qui dit un utilisateur avec un nom d'utilisateur donné est déjà enregistré.

32
00:02:36,870 --> 00:02:37,370
D'ACCORD.

33
00:02:37,470 --> 00:02:39,490
Alors laissez-moi m'inscrire comme quelqu'un de nouveau.

34
00:02:39,690 --> 00:02:42,620
Essayons de faire la bêtise.

35
00:02:42,630 --> 00:02:50,890
J'ai maintenant déménagé apparemment des légumes aux appareils électroménagers et je reçois un message de réussite signé avec succès.

36
00:02:50,910 --> 00:02:52,330
Ravi de te rencontrer, Bunder.

37
00:02:52,380 --> 00:02:55,130
Et si je rafraîchis la page, elle disparaît.

38
00:02:55,710 --> 00:03:00,560
Donc il ya d'autres endroits où nous avons ces messages, mais je vais vous montrer.

39
00:03:00,690 --> 00:03:04,050
Par exemple, si j'essaie de modifier ce camping que je ne possède pas.

40
00:03:04,050 --> 00:03:05,580
Tater tots le possède.

41
00:03:05,580 --> 00:03:07,260
Je suis connecté dans ce mixeur.

42
00:03:07,770 --> 00:03:10,950
Je n'ai pas de lien pour aller à Modifier ici parce que cela est caché.

43
00:03:11,280 --> 00:03:17,950
Mais techniquement, je pourrais toujours aller à slash là où je reçois maintenant un message qui dit que vous n'avez pas la permission de le faire.

44
00:03:18,030 --> 00:03:19,710
Il me redirige ici.

45
00:03:20,070 --> 00:03:26,950
La même chose avec les commentaires si je si il y avait un commentaire ici et il a été créé par quelqu'un d'autre.

46
00:03:27,150 --> 00:03:34,720
Si je suis allé manuellement à ce lien et a ajouté slash à elle, alors je verrais aussi un message, mais c'est beaucoup de travail parce que nous devons trouver l'ID.

47
00:03:34,900 --> 00:03:42,030
Et de toute façon, je ne veux pas y entrer maintenant, mais ce sera le même morceau de code que nous ajoutons qui dira que vous n'avez pas la permission de le faire.

48
00:03:42,060 --> 00:03:50,420
Et puis enfin si je me déconnecte et que je retourne et j'essaie d'ajouter de nouveaux commentaires, je reçois le même message.

49
00:03:50,430 --> 00:03:52,030
Vous devez être connecté pour le faire.

50
00:03:52,050 --> 00:03:55,010
Juste comme si j'essayais de créer un terrain de camping quand je ne l'ai pas signé.

51
00:03:55,260 --> 00:03:55,530
D'ACCORD.

52
00:03:55,530 --> 00:04:00,340
Donc, c'est l'objectif final et c'est assez facile pour nous de faire ce travail.

53
00:04:00,360 --> 00:04:05,580
En utilisant ce paquet nous pourrions faire ceci sans un paquet bien sûr ce que nous pourrions faire quelque chose comme.

54
00:04:05,700 --> 00:04:07,520
Lorsque nous ouvrons la bonne version.

55
00:04:07,740 --> 00:04:12,960
J'ai donc fait une nouvelle version pour ce v 11 que je vais travailler à l'intérieur de.

56
00:04:13,440 --> 00:04:23,470
Donc, voyons dans le v. 11 et laissez-moi clair tout et ouvrez oui.

57
00:04:24,610 --> 00:04:25,040
D'ACCORD.

58
00:04:25,110 --> 00:04:26,210
Nous allons donc travailler ici.

59
00:04:26,280 --> 00:04:30,390
Encore une fois, c'est V 11 au cas où vous suiviez.

60
00:04:30,390 --> 00:04:33,790
La première chose que je vais faire est de vous montrer le paquet que nous allons utiliser.

61
00:04:33,820 --> 00:04:35,400
Donc, il est appelé flash Kinect.

62
00:04:35,400 --> 00:04:38,080
Il y avait d'autres paquets là-bas qui font cela.

63
00:04:38,280 --> 00:04:45,090
Si vous jetez un coup d'oeil à la remise à domicile repo la documentation est en fait un peu obsolète.

64
00:04:45,510 --> 00:04:51,410
Nous utilisons express pour lequel est sorti plus tôt en 2015.

65
00:04:51,930 --> 00:05:00,090
Les docs parlent d'Express au point X et de trois points X pour le prochain.

66
00:05:00,180 --> 00:05:29,710
Donc, ces instructions ne sont pas exactement les mêmes, bien que si vous retournez à Connect flash, vous verrez que certains des premiers liens externes sont exprimés 4.00 mis en place avec flash K'NEX que j'ai déjà pris un coup d'oeil ou vous pourriez toujours utiliser quelque chose Comme cela avait exprimé pour après et vous pouvez voir que nous obtenons ce même lien et il ya des tutoriels ici-bas il ya un message de débordement pile à ce sujet si vous voulez jeter un oeil.

67
00:05:29,990 --> 00:05:32,910
Je l'ai fait plus tôt.

68
00:05:33,080 --> 00:05:37,450
Quelque chose que vous devez faire beaucoup quand vous savez que le code est mis à jour quand de nouvelles choses sortent.

69
00:05:37,550 --> 00:05:42,620
Surtout avec quelque chose comme Express 4.0 où les choses changent assez significativement.

70
00:05:42,680 --> 00:05:48,110
Beaucoup de choses qui faisaient partie d'Express ont été déplacés de l'express comme des paquets séparés.

71
00:05:48,110 --> 00:05:50,280
Certains noms et syntaxe ont changé.

72
00:05:50,430 --> 00:06:03,850
Donc, je dis toujours que c'est quelque chose que vous faites juste beaucoup lorsque vous essayez de faire quelque chose que vous n'avez pas encore fait dans Express ajouter dans Express pour vos recherches, car souvent vous trouverez de grands tutoriels pour elle.

73
00:06:03,880 --> 00:06:14,900
Il ya deux ans encore 90 pour cent de la même chose, mais que 10 pour cent est vraiment important que vous comprenez comment il est différent de vous savez il ya deux ans contre Express actuel.

74
00:06:14,900 --> 00:06:15,950
D'accord.

75
00:06:15,950 --> 00:06:19,110
Donc la première chose que nous voulons faire est d'installer ce paquet.

76
00:06:19,400 --> 00:06:21,070
Ainsi, il est appelé flash de connexion.

77
00:06:21,110 --> 00:06:29,260
Donc, nous voulons NPM installer tableau de bord enregistrer enregistrer flash tableau de bord.

78
00:06:31,050 --> 00:06:31,700
D'ACCORD.

79
00:06:31,910 --> 00:06:37,530
Maintenant que c'est fait ici, nous allons simplement ajouter en Flash.

80
00:06:38,030 --> 00:06:45,030
Nous allons simplement appeler flash plutôt que de connecter le flash est égale besoin de connecter flash tableau de bord.

81
00:06:45,080 --> 00:06:53,320
Assurez-vous que nous avons une virgule là-bas alors ce que nous devons faire est de dire express dire à l'application d'utiliser Flash.

82
00:06:53,360 --> 00:07:09,700
Nous avons donc pris le contenu de Flash K'NEX que le paquet et enregistré dans la variable flash et nous allons avoir besoin d'exécuter cette application variable utiliser flash comme ça.

83
00:07:09,710 --> 00:07:11,500
Alors techniquement, c'est tout ce que nous devons faire.

84
00:07:11,510 --> 00:07:27,700
Nous avons maintenant Connect Flash installé et si nous revenons en arrière et jetons un coup d'oeil aux docs il y a une autre configuration qu'ils font ici avec l'analyseur de cookie dans la session mais nous avons déjà déjà mis en place là où nous faisons déjà notre.

85
00:07:27,730 --> 00:07:31,210
Où demandez-vous une séance expresse et nous établissons un secret.

86
00:07:31,220 --> 00:07:37,580
Nous ne devons donc pas nous inquiéter parce que nous avons déjà configuré notre application pour utiliser la session Express.

87
00:07:38,070 --> 00:07:44,710
OK alors ce que nous allons faire, c'est que sur chaque page, nous allons montrer le contenu du flash.

88
00:07:44,810 --> 00:07:46,940
Nous allons prendre le message qui est là.

89
00:07:46,940 --> 00:07:54,290
Il pourrait être bon ou pourrait être mauvais, il pourrait être vide et nous allons le montrer en haut de la page et cela se passera dans notre fichier d'en-tête.

90
00:07:54,330 --> 00:07:54,710
E.J ..

91
00:07:54,740 --> 00:08:18,430
Oui, nous allons avoir un code qui affiche simplement l'erreur ou le message de succès et puis tout ce que nous allons faire est quand nous rencontrons une erreur ou un endroit que nous voulons un message de sorte qu'une instance de cela pourrait être au lieu de faire des terrains de camping et Au lieu de nos terrains de camping car nous avons cela est connecté à Middleware où vous ne pouvez pas ajouter un nouveau terrain de camping à moins que vous êtes connecté.

92
00:08:18,440 --> 00:08:30,500
Si nous, si nous allons à ce middleware et nous allons regarder est connecté, nous pourrions vouloir avoir un message qui dit que vous devez être connecté pour le faire ou Connectez-vous.

93
00:08:30,500 --> 00:08:32,800
Donc, ce code irait juste ici.

94
00:08:32,900 --> 00:08:38,440
Donc, avant de rediriger vers la barre oblique, nous allons ajouter quelque chose au flash.

95
00:08:38,840 --> 00:08:44,860
Donc, cela ressemble exactement à ce fait, demandez flash point.

96
00:08:45,260 --> 00:08:47,370
Et puis nous pouvons lui donner une clé.

97
00:08:47,720 --> 00:08:50,000
Donc, dans un instant, je vais vous montrer.

98
00:08:50,000 --> 00:08:59,300
Nous allons utiliser la réussite et l'erreur et nous allons simplement l'utiliser pour déterminer si le message de l'alerte doit être vert ou rouge.

99
00:08:59,300 --> 00:09:04,550
Donc, cette partie n'a pas d'importance pour l'instant, mais cette partie importe où nous allons passer dans un message.

100
00:09:04,760 --> 00:09:09,560
Alors nous pourrions faire quelque chose comme S'il vous plaît vous connecter en premier.

101
00:09:09,590 --> 00:09:12,470
Encore une fois c'est à l'intérieur de l'est connecté dans Middleware.

102
00:09:12,740 --> 00:09:16,740
C'est donc vérifier si la demande est authentifiée si les utilisateurs se sont connectés.

103
00:09:16,800 --> 00:09:19,430
Alors continuez à ce que vous faisiez avant.

104
00:09:20,180 --> 00:09:24,030
Mais si ce n'est pas le cas avant de vous rediriger vers le slash log in.

105
00:09:24,090 --> 00:09:26,390
Oui, n'oubliez pas si nous redirigons vers la barre oblique.

106
00:09:26,390 --> 00:09:29,320
Sans cette ligne, ça continue.

107
00:09:29,320 --> 00:09:36,740
Je vais devoir ouvrir l'itinéraire mais il ira droit au code et à l'ouverture de barre oblique qui est juste ici.

108
00:09:36,740 --> 00:09:43,960
Donc, il rend le log in pour avant que nous faisons que si nous allons exécuter ce code flash.

109
00:09:44,120 --> 00:09:53,060
Et ce que cela va faire est essentiellement de prendre S'il vous plaît vous connecter en premier et il va l'ajouter au flash et il ne sera pas affiché jusqu'à la prochaine chose que nous voyons.

110
00:09:53,180 --> 00:10:06,540
Donc, dans ce cas, cela ne rend pas réellement quoi que ce soit, il nous redirige simplement à barre oblique de connexion et la façon dont le Flash fonctionne est vraiment sympa en ce qu'il n'est pas seulement de se lancer instantanément tout de suite immédiatement.

111
00:10:06,550 --> 00:10:09,650
Il ne fonctionne que ou il apparaît à la page suivante.

112
00:10:09,650 --> 00:10:13,130
Donc, vous le faites réellement avant de rediriger.

113
00:10:13,130 --> 00:10:20,690
Donc, dans ce cas, s'il vous plaît connectez-vous d'abord, puis nous redirigons vers barre oblique de connexion, puis sur le journal et le formulaire, nous espérons voir un message.

114
00:10:20,690 --> 00:10:22,470
À l'heure actuelle, nous ne montrons pas que si.

115
00:10:22,520 --> 00:10:35,510
Donc encore une fois pour réitérer juste en ajoutant cette ligne ne sera pas afficher quoi que ce soit pour nous tout ce que cela fait est il nous donne la capacité, il nous donne un moyen d'accéder à cette sur la prochaine demande.

116
00:10:35,510 --> 00:10:40,570
Donc, nous ne clignons pas tout de suite, nous ne voyons rien, nous ne montrons pas à l'utilisateur quelque chose.

117
00:10:40,580 --> 00:10:55,320
Tout cela ne se dit dans le flash et plutôt que de succès, je pense qu'il est plus logique d'appeler cette erreur dans le flash add S'il vous plaît connectez-vous d'abord pour la prochaine demande et ensuite nous rediriger vers l'ouverture de session slash.

118
00:10:55,820 --> 00:11:02,610
Donc nous devons gérer cela en logon qui est juste ici slash log in.

119
00:11:02,990 --> 00:11:06,790
Alors je pouvais faire quelque chose comme passer dans le message.

120
00:11:07,340 --> 00:11:24,330
Et bien sûr, tout ce que je peux juste vous montrer cela pour commencer, donc si nous avons juste le message d'erreur, vous l'avez raté juste comme ça, nous pourrions simplement afficher que sur notre modèle de sorte que le journal slash qui est à l'intérieur de fusible log in.

121
00:11:24,540 --> 00:11:31,900
Oui, juste au sommet, je pouvais juste avoir un H-1 qui affiche le message juste comme ça.

122
00:11:31,940 --> 00:11:33,650
Rien de très nouveau.

123
00:11:33,650 --> 00:11:37,140
Alors je vais juste vous montrer ce que cela ressemble en ce moment.

124
00:11:37,190 --> 00:11:44,920
Démarrez le serveur vers le haut de la redirection à la barre oblique se loguer et j'obtiens ce message chaque erreur d'heure.

125
00:11:44,960 --> 00:11:46,060
Vous l'avez gâchée.

126
00:11:46,250 --> 00:11:55,570
Comme vous pouvez le voir qui est espérons ce que vous attendiez à ce point parce que je hardcoded à chaque fois que nous allons à barre oblique de connexion, nous voyons vous gâché.

127
00:11:56,080 --> 00:12:06,370
OK donc en utilisant flash ce que nous pouvons faire est maintenant dire message est égal à la demande de flash et nous pouvons simplement faire l'erreur dans le flash.

128
00:12:06,740 --> 00:12:09,110
Donc, c'est un peu confus.

129
00:12:09,530 --> 00:12:16,980
Mais essentiellement l'idée est en ce moment si je viens de rafraîchir la page de redémarrer le serveur et de rafraîchir il ne devrait pas y avoir d'erreur dans le flash.

130
00:12:17,090 --> 00:12:19,120
Nous ne voyons donc rien.

131
00:12:20,000 --> 00:12:39,310
Mais alors, si nous faisons ce code exécuter wups ce code ici et la façon dont nous faisons ce qui est d'essayer d'accéder à quelque chose où nous devons être connecté où ce middleware est appelé alors ce qui se passera est que nous l'ajoutons au flash sous L'erreur clé avec la valeur s'il vous plaît connectez-vous d'abord, puis nous allons slash log in.

132
00:12:39,440 --> 00:12:51,230
Ensuite, à l'intérieur de l'ouverture de session slash, nous envoyons sous la clé de la demande de message jusqu'à l'erreur flash qui est beaucoup de choses qui doivent être connectés et il est un peu confus encore.

133
00:12:51,350 --> 00:12:53,370
Mais laissez-moi vous montrer maintenant.

134
00:12:53,690 --> 00:12:54,740
Alors je recommence.

135
00:12:54,740 --> 00:12:58,550
En fait, je n'ai pas eu à le faire cette fois, mais nous ne voyons rien.

136
00:12:58,550 --> 00:13:05,140
Maintenant, laissez-moi aller dans les terrains de camping et essayez d'ajouter un nouveau terrain de camping, même si je ne suis pas connecté.

137
00:13:05,630 --> 00:13:12,330
Et maintenant, je reçois ce message qui dit S'il vous plaît vous connecter en premier qui n'était pas là avant et si je rafraîchir la page, il s'en va.

138
00:13:12,530 --> 00:13:16,740
C'est donc une version très simple de ce que nous pouvons accomplir en utilisant Flash.

139
00:13:16,910 --> 00:13:22,500
Donc, avant de passer à la prochaine vidéo à la mise en œuvre de cette avec tous les différents messages et le style.

140
00:13:22,700 --> 00:13:24,860
Résumons simplement comment cela fonctionne à nouveau.

141
00:13:24,920 --> 00:13:33,500
Donc, chaque fois que nous voulons afficher un message, que ce soit un message de succès ou un message d'erreur quel qu'il soit, nous allons utiliser cette ligne ici.

142
00:13:33,650 --> 00:13:34,730
Demande de flash.

143
00:13:34,760 --> 00:13:38,630
Et puis nous transmettons une clé et une valeur et nous le faisons avant de rediriger.

144
00:13:38,630 --> 00:13:41,450
C'est vraiment important si je mets cette ligne après la redirection.

145
00:13:41,450 --> 00:13:42,680
Cela ne fonctionnera pas.

146
00:13:43,130 --> 00:13:53,630
Donc, avant de rediriger et puis vous avez encore à gérer dans le modèle vous-même pour le gérer et l'itinéraire tout ce qu'il vous donne est la capacité d'ajouter des données avant de redirection.

147
00:13:53,630 --> 00:13:55,300
Cela le rend à la prochaine route.

148
00:13:55,460 --> 00:13:59,030
Et que les données ne persisteront pas sur chaque demande unique à cette route.

149
00:13:59,030 --> 00:14:00,140
Donc c'est une chose une fois.

150
00:14:00,410 --> 00:14:01,860
C'est pourquoi il est appelé Flash.

151
00:14:02,060 --> 00:14:02,560
D'ACCORD.

152
00:14:02,660 --> 00:14:08,550
Donc, dans la prochaine vidéo, je vais vous montrer comment mettre en œuvre réellement pour de vrai où nous n'avons pas à le faire.

153
00:14:08,600 --> 00:14:18,810
Transmettre le message à chaque modèle où nous pouvons style pense très bien avec le bootstrap où nous pouvons avoir des messages rouges et verts, nous pouvons avoir des couleurs différentes si nous voulons mettre rouge et vert sont les standards.

154
00:14:18,970 --> 00:14:19,180
D'ACCORD.

155
00:14:19,190 --> 00:14:20,370
C'est dans la prochaine vidéo.