1
00:00:00,120 --> 00:00:00,500
Ou.

2
00:00:00,510 --> 00:00:01,450
Bem vindo de volta.

3
00:00:01,770 --> 00:00:06,290
Então, nesta lição, estamos focados em melhorar a usabilidade do nosso acampamento.

4
00:00:06,510 --> 00:00:12,990
Agora, é um desastre até dar feedback ou mensagens de erro ou mensagens de sucesso para

5
00:00:12,990 --> 00:00:13,710
nossos usuários.

6
00:00:13,920 --> 00:00:17,090
E por desastre, eu apenas quero dizer que não existe.

7
00:00:17,100 --> 00:00:21,400
Temos um registro de conselho que, obviamente, nossos usuários não podem ver.

8
00:00:21,480 --> 00:00:27,000
Nós o vemos como desenvolvedores em nosso consul aqui, onde os servidores estão em execução, mas ninguém mais vê isso.

9
00:00:27,360 --> 00:00:31,770
Então, vamos nos concentrar em adicionar algumas mensagens e eu vou mostrar o que isso parece em apenas

10
00:00:31,770 --> 00:00:32,370
um momento.

11
00:00:32,460 --> 00:00:36,790
Antes de fazer isso, temos três objetivos principais, vou falar sobre eles agora.

12
00:00:36,990 --> 00:00:37,980
Então eu quero demo-lo.

13
00:00:37,980 --> 00:00:44,490
Primeiro mostra-lhe o que esperar como ele vai ver como ele se comporta, então vamos instalar e

14
00:00:44,580 --> 00:00:46,630
configurar um pacote chamado conectar flash.

15
00:00:46,830 --> 00:00:53,580
Então, o que estamos fazendo é adicionar no Flash ou o flasher um flash de seus diferentes pronomes e as pessoas chamam

16
00:00:53,580 --> 00:00:53,940
isso.

17
00:00:54,000 --> 00:00:56,070
Em outros quadros, o flash hash.

18
00:00:56,070 --> 00:01:02,010
As pessoas chamam de mensagens instantâneas, mas, basicamente, a idéia é que vamos mostrar uma mensagem para

19
00:01:02,250 --> 00:01:05,520
um usuário, como logado com êxito ou desconectado com sucesso.

20
00:01:05,700 --> 00:01:08,310
Ou talvez algo como você não tenha permissão para fazer isso.

21
00:01:08,320 --> 00:01:12,270
Ou faça o login antes de adicionar um acampamento algo assim.

22
00:01:12,390 --> 00:01:17,640
Queremos mostrá-lo a um usuário apenas uma vez e não queremos que ele seja um acessório permanente na página.

23
00:01:17,700 --> 00:01:22,680
piscar neles uma vez e depois vai para a próxima página ou se o usuário atualiza

24
00:01:23,310 --> 00:01:30,780
e, em seguida, a última coisa é adicionar nas nossas mensagens flash ao cabeçalho e adicionar algumas classes de bootstrap que irão estilo.

25
00:01:30,780 --> 00:01:31,470
Queremos apenas

26
00:01:31,470 --> 00:01:34,230
Então, há maneiras construídas de fazer coisas com o bootstrap.

27
00:01:34,350 --> 00:01:40,650
Esta é uma característica tão comum de ter mensagens que são exibidas em seu usuário em todos os tipos de sites

28
00:01:40,650 --> 00:01:44,100
que o bootstrap possui algum estilo construído para o que aproveitará.

29
00:01:44,250 --> 00:01:47,850
Então vou começar mostrando o que será.

30
00:01:47,940 --> 00:01:49,530
Então eu tenho corrida em campo.

31
00:01:49,610 --> 00:01:56,190
Deixe-me bem. Vou mostrar-lhe se eu terminar de sair agora, então eu estou logado como freezer se eu sair, eu recebo uma

32
00:01:56,190 --> 00:01:59,970
mensagem que diz que o loungy pode mudar esse texto da mensagem.

33
00:01:59,970 --> 00:02:06,840
Obviamente, se eu tentar adicionar um novo acampamento agora quando não estiver logado, agora devo receber uma mensagem que diga que

34
00:02:06,840 --> 00:02:09,340
você deve fazer o login para fazer isso.

35
00:02:09,420 --> 00:02:11,070
E note que é lido aqui.

36
00:02:11,520 --> 00:02:13,420
Então, essa é uma classe de bootstrap.

37
00:02:13,440 --> 00:02:18,610
Este alerta que recebemos se eu estivesse fresco, a página desaparece.

38
00:02:18,690 --> 00:02:25,690
Então, agora, se eu tentar e me inscrever, devo dizer que me inscrevo como resti que já existe.

39
00:02:25,950 --> 00:02:28,500
Então não deveria ser capaz de fazer isso no passado.

40
00:02:28,500 --> 00:02:30,070
A página apenas atualizaria.

41
00:02:30,330 --> 00:02:36,060
Mas o que acabaremos é uma mensagem que diz que um usuário com um determinado nome de usuário já está registrado.

42
00:02:36,870 --> 00:02:37,370
ESTÁ BEM.

43
00:02:37,470 --> 00:02:39,490
Então, deixe-me inscrever-me como alguém novo.

44
00:02:39,690 --> 00:02:42,620
Vamos tentar brigar.

45
00:02:42,630 --> 00:02:50,330
Agora me movi aparentemente de vegetais para eletrodomésticos e recebi um sucesso de mensagem com

46
00:02:50,350 --> 00:02:50,890
sucesso.

47
00:02:50,910 --> 00:02:52,330
Prazer em conhecê-lo Bunder.

48
00:02:52,380 --> 00:02:55,130
E se eu atualizar a página, ela vai embora.

49
00:02:55,710 --> 00:03:00,560
Então, existem outros lugares em que temos essas mensagens, mas vou mostrar-lhe.

50
00:03:00,690 --> 00:03:04,050
Por exemplo, se eu tentar e editar este acampamento que eu não possuo.

51
00:03:04,050 --> 00:03:05,580
Tater tots possui isso.

52
00:03:05,580 --> 00:03:07,260
Estou conectado neste liquidificador.

53
00:03:07,770 --> 00:03:10,950
Eu não tenho um link para ir para Editar aqui, porque isso está escondido.

54
00:03:11,280 --> 00:03:17,220
Mas, tecnicamente, eu ainda poderia ir para cortar nisso, onde agora recebo uma mensagem que diz que você não tem permissão

55
00:03:17,220 --> 00:03:17,950
para fazer isso.

56
00:03:18,030 --> 00:03:19,710
Isso me redireciona aqui.

57
00:03:20,070 --> 00:03:26,950
Da mesma forma, com comentários, se eu houvesse um comentário aqui e fosse criado por outra pessoa.

58
00:03:27,150 --> 00:03:32,310
Se eu manualmente fui para esse link e adicionei barra, então eu também veria uma mensagem, mas isso

59
00:03:32,310 --> 00:03:34,720
é muito trabalho porque precisamos encontrar o ID.

60
00:03:34,900 --> 00:03:40,080
E de qualquer forma, eu não quero entrar nisso agora, mas será o mesmo código que adicionamos, que dirá que

61
00:03:40,080 --> 00:03:42,030
você não tem permissão para fazer isso.

62
00:03:42,060 --> 00:03:50,400
E, finalmente, se eu sair e volto e tentei adicionar novos comentários, recebo a mesma mensagem.

63
00:03:50,430 --> 00:03:52,030
Você deve fazer o login para fazer isso.

64
00:03:52,050 --> 00:03:55,010
Assim como se eu tentasse criar um acampamento quando não o assinei.

65
00:03:55,260 --> 00:03:55,530
ESTÁ BEM.

66
00:03:55,530 --> 00:04:00,340
Então, esse é o objetivo final e, na verdade, é muito fácil para nós fazer isso funcionar.

67
00:04:00,360 --> 00:04:05,580
Usando este pacote, poderíamos fazer isso sem um pacote, é claro, o que poderíamos fazer de alguma forma.

68
00:04:05,700 --> 00:04:07,520
Quando abrimos a versão correta.

69
00:04:07,740 --> 00:04:12,960
Então eu fiz uma nova versão para este v 11 em que eu estarei trabalhando dentro de.

70
00:04:13,440 --> 00:04:23,470
Então vamos ver v. 11 e deixe-me limpar tudo e abrir sim.

71
00:04:24,610 --> 00:04:25,040
ESTÁ BEM.

72
00:04:25,110 --> 00:04:26,210
Então vamos trabalhar aqui.

73
00:04:26,280 --> 00:04:30,390
Novamente, isso é V 11, caso você esteja seguindo.

74
00:04:30,390 --> 00:04:33,790
A primeira coisa que eu vou fazer é mostrar o pacote que vamos usar.

75
00:04:33,820 --> 00:04:35,400
Então, é chamado de flash Kinect.

76
00:04:35,400 --> 00:04:38,080
Havia outros pacotes que faziam isso.

77
00:04:38,280 --> 00:04:45,090
Se você der uma olhada no repo da casa, a documentação é um pouco ultrapassada.

78
00:04:45,510 --> 00:04:51,410
Estamos usando o Express para o qual surgiu no início de 2015.

79
00:04:51,930 --> 00:05:00,090
Os documentos falam sobre Express para apontar X e três pontos X para o próximo.

80
00:05:00,180 --> 00:05:08,670
mesmas, embora, se você voltar para Connect flash, você verá que alguns dos primeiros links externos são expressos 4.

81
00:05:08,670 --> 00:05:15,000
Então, estas instruções não são exatamente as 00 configurado com o flash K'NEX que já fiz exame

82
00:05:15,360 --> 00:05:23,000
de um olhar ou você poderia sempre usar algo assim que esta tinha expressado para depois e você pode ver nós começamos o

83
00:05:23,000 --> 00:05:29,060
mesmo link e há tutoriais aqui embaixo, há uma sobreposição de pilha sobre isso se Você quer dar

84
00:05:29,060 --> 00:05:29,710
uma olhada.

85
00:05:29,990 --> 00:05:32,910
Então eu fiz isso antes.

86
00:05:33,080 --> 00:05:37,450
Algo que você tem que fazer muito quando você sabe que o código está sendo atualizado quando novas coisas estão saindo.

87
00:05:37,550 --> 00:05:42,620
Especialmente com algo como Express 4. 0 onde as coisas mudam muito significativamente.

88
00:05:42,680 --> 00:05:48,110
Muitas coisas que costumavam fazer parte da Express foram removidas de expressar como pacotes separados.

89
00:05:48,110 --> 00:05:50,280
Alguns dos nomes e sintaxe mudaram.

90
00:05:50,430 --> 00:05:55,640
Então eu sempre digo que é algo que você faz muito quando você está tentando

91
00:05:55,640 --> 00:06:03,380
fazer algo que você ainda não fez no Express add no Express para suas pesquisas, muitas vezes você encontrará excelentes tutoriais para

92
00:06:03,680 --> 00:06:03,850
isso.

93
00:06:03,880 --> 00:06:10,220
Há dois anos que ainda são 90 por cento o mesmo, mas que 10 por cento é realmente importante que

94
00:06:10,220 --> 00:06:14,900
você entenda como é diferente de você conhece há dois anos contra Express atual.

95
00:06:14,900 --> 00:06:15,950
Tudo bem.

96
00:06:15,950 --> 00:06:19,110
Então a primeira coisa que queremos fazer é instalar este pacote.

97
00:06:19,400 --> 00:06:21,070
Então, ele se chama conectar flash.

98
00:06:21,110 --> 00:06:29,260
Então, queremos que o NPM instale o dash dash, salve o plug-in do dash flash.

99
00:06:31,050 --> 00:06:31,700
ESTÁ BEM.

100
00:06:31,910 --> 00:06:37,530
Agora que isso é feito aqui, vamos apenas adicionar no Flash.

101
00:06:38,030 --> 00:06:45,030
Vamos chamá-lo de flash em vez de conectar os equais de flash exigem ligar o flash dash.

102
00:06:45,080 --> 00:06:52,730
Certifique-se de que temos uma vírgula lá, então o que precisamos fazer é dizer ao expresso dizer ao aplicativo que use o Flash.

103
00:06:53,360 --> 00:07:00,470
Então nós levamos o conteúdo do K'NEX flash que o pacote e

104
00:07:00,470 --> 00:07:09,700
salvo na variável do flash e precisamos executar esse aplicativo variável, use o flash assim.

105
00:07:09,710 --> 00:07:11,500
Então, tecnicamente, isso é tudo o que precisamos fazer.

106
00:07:11,510 --> 00:07:18,350
Agora, temos o Connect Flash instalado e, se voltarmos e vejamos os documentos, há alguma outra configuração

107
00:07:18,350 --> 00:07:24,920
que eles fazem aqui com o analisador de cookies na sessão, mas nós realmente já temos esse

108
00:07:24,920 --> 00:07:27,700
configurado onde já estamos fazendo o nosso.

109
00:07:27,730 --> 00:07:31,210
Onde você precisa de sessão expressa e estamos configurando um segredo.

110
00:07:31,220 --> 00:07:36,620
E então não precisamos nos preocupar com isso porque já configuramos nosso aplicativo para usar

111
00:07:36,620 --> 00:07:37,580
a sessão Express.

112
00:07:38,070 --> 00:07:44,710
OK então, o que faremos é em cada página que vamos mostrar o conteúdo do flash.

113
00:07:44,810 --> 00:07:46,940
Vamos levar a mensagem que está lá.

114
00:07:46,940 --> 00:07:51,360
Pode ser bom ou pode estar ruim, pode estar vazio e vamos mostrar isso no topo da página

115
00:07:52,280 --> 00:07:54,290
e isso acontecerá no nosso arquivo de cabeçalho.

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

117
00:07:54,740 --> 00:08:01,460
teremos algum código que apenas exiba o erro ou a mensagem de sucesso e, em seguida, tudo o que faremos é quando

118
00:08:01,460 --> 00:08:08,570
encontramos um erro ou um lugar em que queremos uma mensagem para que uma instância seja em vez de fazer acampamentos e Em

119
00:08:08,570 --> 00:08:15,650
vez de nossos acampamentos, temos isso, iniciamos o Middleware onde você não pode adicionar um novo acampamento a menos que você esteja logado.

120
00:08:15,740 --> 00:08:18,430
estar logado para fazer isso ou Faça login.

121
00:08:18,440 --> 00:08:26,120
Se nós, se formos a esse middleware, e veremos que está logado, talvez possamos ter uma mensagem que diga que você precisa

122
00:08:26,120 --> 00:08:30,500
Então esse código iria aqui.

123
00:08:30,500 --> 00:08:32,800
Então, antes de redirecionar para barra acessar, vamos adicionar algo ao flash.

124
00:08:32,900 --> 00:08:38,440
Então, isso parece exatamente isso, peça um ponto flash.

125
00:08:38,840 --> 00:08:44,860
E então podemos dar uma chave.

126
00:08:45,260 --> 00:08:47,370
Então, em um momento, vou te mostrar.

127
00:08:47,720 --> 00:08:50,000
Vamos usar o sucesso e o

128
00:08:50,000 --> 00:08:57,140
erro e vamos usar isso para determinar se a mensagem do alerta deve ser verde ou vermelha.

129
00:08:57,140 --> 00:08:59,300
Então, essa parte não importa agora, mas essa parte importa onde vamos passar uma mensagem.

130
00:08:59,300 --> 00:09:04,200
Então, podemos fazer algo como Faça o login primeiro.

131
00:09:04,760 --> 00:09:09,560
Novamente, isso está dentro do log in Middleware.

132
00:09:09,590 --> 00:09:12,470
Então, está verificando se a solicitação é autenticada se os usuários fizerem o login.

133
00:09:12,740 --> 00:09:16,740
Então, continue com o que você estava fazendo antes.

134
00:09:16,800 --> 00:09:19,430
Mas se esse não for o caso antes de redirecionar para reduzir o log in.

135
00:09:20,180 --> 00:09:24,030
Sim, lembre-se se redirecionamos para barra acessar.

136
00:09:24,090 --> 00:09:26,390
Sem essa linha, também continua.

137
00:09:26,390 --> 00:09:29,320
Eu vou ter que abrir a rota, mas vai direto para o código e barra de logon que está aqui.

138
00:09:29,320 --> 00:09:35,360
Então, ele faz o login antes de fazer isso, embora nós vamos executar este código flash.

139
00:09:36,740 --> 00:09:43,960
E o que isso fará é basicamente pegar Por favor, faça o login primeiro e ele irá

140
00:09:44,120 --> 00:09:50,000
adicioná-lo ao flash e ele não será exibido até a próxima coisa que vemos.

141
00:09:50,000 --> 00:09:53,060
Então, neste caso, isso realmente não representa qualquer coisa que nos redireciona

142
00:09:53,180 --> 00:09:59,210
para acessar o barraco e a maneira como funciona o Flash é realmente agradável, pois não é apenas que ele se deslize imediatamente imediatamente.

143
00:09:59,210 --> 00:10:06,290
Isso funciona ou aparece na próxima página.

144
00:10:06,550 --> 00:10:09,650
Então você realmente faz isso antes de redirecionar.

145
00:10:09,650 --> 00:10:13,130
Então, neste caso, faça o login primeiro e, em seguida,

146
00:10:13,130 --> 00:10:18,890
redirecionamos para reduzir o log e, em seguida, no log e no formulário, esperamos ver uma mensagem.

147
00:10:19,070 --> 00:10:20,690
No entanto, agora não estamos mostrando isso.

148
00:10:20,690 --> 00:10:22,470
Então, novamente, apenas para reiterar, apenas adicionar

149
00:10:22,520 --> 00:10:29,570
esta linha não mostrará nada para nós, tudo o que isso faz é que nos dá a capacidade de nos dar uma maneira de acessar isso na próxima solicitação.

150
00:10:29,570 --> 00:10:35,510
Então, não estamos piscando imediatamente, não estamos vendo nada, não estamos mostrando nada ao usuário.

151
00:10:35,510 --> 00:10:40,570
Tudo isso faz é dizer no flash e, ao invés de sucesso, acho mais sensato chamar esse erro

152
00:10:40,580 --> 00:10:46,190
no flash, por favor, faça o login primeiro para a próxima solicitação e então redirecionamos para acessar o barraque.

153
00:10:46,190 --> 00:10:54,900
Então, nós temos que lidar com isso no logon, que é aqui mesmo, barra acessar.

154
00:10:55,820 --> 00:11:02,610
Então eu poderia fazer algo como passar na mensagem.

155
00:11:02,990 --> 00:11:06,790
E, claro, tudo que eu posso simplesmente mostrar que

156
00:11:07,340 --> 00:11:14,660
você começa, então, se nós apenas tivermos mensagem, seja um erro, você acabou de enxergar, assim como

157
00:11:14,660 --> 00:11:23,540
isso, poderíamos apenas exibir isso em nosso modelo, de modo que o log da barra é dentro do log de fusíveis.

158
00:11:23,780 --> 00:11:24,330
Sim, apenas no topo, eu poderia ter um H-1 que exibisse mensagem assim.

159
00:11:24,540 --> 00:11:31,900
Nada muito novo.

160
00:11:31,940 --> 00:11:33,650
Então, vou mostrar o que isso parece agora.

161
00:11:33,650 --> 00:11:37,140
Inicie o redirecionamento do servidor para redirecionar para barra acessar e recebo esta mensagem sempre que o erro for.

162
00:11:37,190 --> 00:11:44,920
Você arruinou.

163
00:11:44,960 --> 00:11:46,060
Como você pode ver o

164
00:11:46,250 --> 00:11:52,310
que é esperançoso o que você esperava neste momento, porque eu codificá-lo duro em cada vez que entramos no login de barra, vemos que você estragou.

165
00:11:52,310 --> 00:11:55,570
OK, então, usar o flash o que podemos

166
00:11:56,080 --> 00:12:04,180
fazer é dizer que a mensagem é igual à solicitação de flash e podemos simplesmente fazer o erro no flash.

167
00:12:04,250 --> 00:12:06,370
Então é um pouco confuso.

168
00:12:06,740 --> 00:12:09,110
não deve haver um erro no flash.

169
00:12:09,530 --> 00:12:15,320
Mas basicamente a idéia é agora se eu apenas atualizar a página reiniciar o servidor e atualizar

170
00:12:15,320 --> 00:12:16,980
Então, na verdade, não vemos nada.

171
00:12:17,090 --> 00:12:19,120
Mas então, se fizermos esse código

172
00:12:20,000 --> 00:12:28,160
executar wups, este código aqui e a maneira como fazemos é tentar acessar algo em que devemos estar logados onde este middleware é

173
00:12:28,160 --> 00:12:33,470
chamado, então o que acontecerá é que estamos adicionando isso ao flash em baixo O

174
00:12:33,470 --> 00:12:38,870
erro de chave com o valor, por favor, faça o login primeiro e depois vamos acessar.

175
00:12:38,870 --> 00:12:39,310
Então, dentro

176
00:12:39,440 --> 00:12:47,540
do log de barra, estamos enviando sob a chave do pedido de mensagem o erro de flash que é um monte de coisas que precisam ser conectadas e é um pouco confuso novamente.

177
00:12:47,540 --> 00:12:51,230
Mas deixe-me mostrar-lhe agora.

178
00:12:51,350 --> 00:12:53,370
Então eu recomeço.

179
00:12:53,690 --> 00:12:54,740
Na verdade, não precisava fazer isso desta vez, mas não vemos nada.

180
00:12:54,740 --> 00:12:58,550
Agora, deixe-me ir aos acampamentos e tente adicionar um novo acampamento, embora eu não esteja logado.

181
00:12:58,550 --> 00:13:05,140
E agora recebo essa mensagem que diz: Por favor, faça o login primeiro, que não

182
00:13:05,630 --> 00:13:10,640
estava lá antes e se eu atualizar a página, ele vai embora.

183
00:13:10,640 --> 00:13:12,330
Então, essa é uma versão muito simples do que podemos fazer usando o Flash.

184
00:13:12,530 --> 00:13:16,740
isso com todas as diferentes mensagens e o estilo.

185
00:13:16,910 --> 00:13:21,530
Então, antes de avançarmos no próximo vídeo para implementar

186
00:13:21,530 --> 00:13:22,500
Vamos resumir como isso funciona de novo.

187
00:13:22,700 --> 00:13:24,860
Então, sempre que quisermos exibir uma mensagem se

188
00:13:24,920 --> 00:13:30,350
é uma mensagem de sucesso ou uma mensagem de erro, seja o que for, vamos usar essa linha aqui.

189
00:13:30,350 --> 00:13:33,500
Solicite flash.

190
00:13:33,650 --> 00:13:34,730
E então passamos uma chave e um valor e fazemos isso antes de redirecionar.

191
00:13:34,760 --> 00:13:38,630
É realmente importante se eu coloquei essa linha depois de redirecionar.

192
00:13:38,630 --> 00:13:41,450
Não vai funcionar.

193
00:13:41,450 --> 00:13:42,680
Então, antes de redirecionar e, então, você ainda

194
00:13:43,130 --> 00:13:47,940
tem que lidar com isso no modelo para lidar com isso e a rota tudo o que lhe dá é a capacidade de adicionar alguns dados antes de redirecionar.

195
00:13:47,950 --> 00:13:53,630
Isso faz com que a próxima rota.

196
00:13:53,630 --> 00:13:55,300
E esses dados não persistirão em cada solicitação para essa rota.

197
00:13:55,460 --> 00:13:59,030
Então, é uma coisa única.

198
00:13:59,030 --> 00:14:00,140
É por isso que se chama Flash.

199
00:14:00,410 --> 00:14:01,860
ESTÁ BEM.

200
00:14:02,060 --> 00:14:02,560
fazer isso.

201
00:14:02,660 --> 00:14:06,860
Então, no próximo vídeo, eu vou mostrar-lhe como realmente implementar isso de verdade, onde não precisamos

202
00:14:06,860 --> 00:14:08,550
Passar a mensagem para cada

203
00:14:08,600 --> 00:14:14,060
modelo, onde podemos pensar em estilo, bem com o bootstrap, onde podemos ter mensagens vermelhas e verdes,

204
00:14:14,060 --> 00:14:17,930
podemos ter cores diferentes, se quisermos colocar vermelho e verde, são os padrões.

205
00:14:17,930 --> 00:14:18,810
ESTÁ BEM.

206
00:14:18,970 --> 00:14:19,180
Então, esse é o próximo vídeo.

207
00:14:19,190 --> 00:14:20,370
Veja o

208
00:14:20,390 --> 00:14:20,800