1
00:00:00,120 --> 00:00:00,500
Een van beide.

2
00:00:00,510 --> 00:00:01,450
Welkom terug.

3
00:00:01,770 --> 00:00:06,290
Dus in deze les zijn we gericht op het verbeteren van de bruikbaarheid van ons kamp.

4
00:00:06,510 --> 00:00:13,710
Op dit moment is het een soort van een ramp zo ver als het geven van feedback of foutmeldingen of succes berichten aan onze gebruikers.

5
00:00:13,920 --> 00:00:17,090
En door een ramp ik bedoel alleen dat het helemaal niet bestaat.

6
00:00:17,100 --> 00:00:21,400
We hebben een raad log die uiteraard onze gebruikers kunnen niet zien.

7
00:00:21,480 --> 00:00:27,000
Wij zien het als de ontwikkelaars in onze consul hier waar de servers draaien, maar niemand ziet dat.

8
00:00:27,360 --> 00:00:32,370
Dus we gaan richten op het toevoegen van enkele berichten in en ik zal je laten zien hoe dat eruit ziet in slechts een moment.

9
00:00:32,460 --> 00:00:36,790
Voordat ik dat doen we drie hoofddoelstellingen zal ik alleen maar praten over hen nu.

10
00:00:36,990 --> 00:00:37,980
Dus wil ik het demo.

11
00:00:37,980 --> 00:00:46,630
Ten eerste laten zien wat je kunt verwachten hoe het eruit zal zien hoe het zich gedraagt ​​dan zullen we eigenlijk installeren en een pakket genaamd connect flash configureren.

12
00:00:46,830 --> 00:00:53,940
Dus wat we doen is het toevoegen in Flash of de flasher een flits van haar verschillende voornaamwoorden en mensen noemen het.

13
00:00:54,000 --> 00:00:56,070
In andere frameworks de flitser hash.

14
00:00:56,070 --> 00:01:05,520
Mensen noemen het flitsberichten maar in principe is het idee dat we gaan een boodschap te tonen aan een gebruiker als succesvol ingelogd of succesvol uitgelogd.

15
00:01:05,700 --> 00:01:08,310
Of misschien iets als je geen toestemming om dat te doen.

16
00:01:08,320 --> 00:01:12,270
Of Gelieve inloggen voordat je een camping zoiets toe te voegen.

17
00:01:12,390 --> 00:01:17,640
We willen het gewoon een keer laten zien aan een gebruiker en we niet willen dat het een vaste waarde op de pagina.

18
00:01:17,700 --> 00:01:31,470
We willen gewoon knipperen het aan hen een keer en dan gaat het weg op de volgende pagina of als de gebruiker verfrist en dan is het laatste wat in onze flash-berichten toe te voegen aan de header en voeg in sommige bootstrap klassen die zal stylen.

19
00:01:31,470 --> 00:01:34,230
Dus er is een aantal ingebouwde in manieren om dingen te doen met bootstrap.

20
00:01:34,350 --> 00:01:44,100
Dit is een gemeenschappelijk kenmerk op berichten die worden geflitst op uw gebruiker op allerlei sites die bootstrappen heeft een aantal ingebouwde in styling voor dat die zullen profiteren van hebben.

21
00:01:44,250 --> 00:01:47,850
Dus ik zal beginnen met u te laten zien wat het eruit zal zien.

22
00:01:47,940 --> 00:01:49,530
Dus ik heb het kamp lopen.

23
00:01:49,610 --> 00:01:59,970
Laat me goed ik zal je laten zien als ik gewoon uit te loggen op dit moment, dus ik ben aangemeld als diepvries als ik me afmeld krijg ik een bericht dat zegt loungy up kunnen we die boodschap tekst wijzigen.

24
00:01:59,970 --> 00:02:09,340
Natuurlijk, als ik probeer en voeg een nieuwe camping op dit moment als ik niet ingelogd Ik moet nu een bericht dat zegt dat je moet ingelogd zijn om dat te doen krijgen.

25
00:02:09,420 --> 00:02:11,070
En merken dat het hier lezen.

26
00:02:11,520 --> 00:02:13,420
Dus dat is een bootstrap klasse.

27
00:02:13,440 --> 00:02:18,610
Deze waarschuwing dat we krijgen als ik vers waren de pagina verdwijnt.

28
00:02:18,690 --> 00:02:25,690
Dus nu als ik probeer en meld je ik moet zeggen dat ik me aanmelden als Resti die al bestaat.

29
00:02:25,950 --> 00:02:28,500
Dus zou ik niet in staat zijn om dat te doen in het verleden.

30
00:02:28,500 --> 00:02:30,070
De pagina zou gewoon te vernieuwen.

31
00:02:30,330 --> 00:02:36,470
Maar wat we zullen eindigen met een boodschap die zegt dat een gebruiker met een bepaalde gebruikersnaam is al geregistreerd.

32
00:02:36,870 --> 00:02:37,370
OK.

33
00:02:37,470 --> 00:02:39,490
Dus laat me aanmelden als nieuw iemand.

34
00:02:39,690 --> 00:02:42,620
Laten we proberen te doen blunder.

35
00:02:42,630 --> 00:02:50,890
Ik heb nu blijkbaar verplaatst van groenten tot huishoudelijke apparaten en ik krijg een bericht succes succesvol aangemeld.

36
00:02:50,910 --> 00:02:52,330
Leuk je te ontmoeten Bunder.

37
00:02:52,380 --> 00:02:55,130
En als ik Vernieuw de pagina het gaat weg.

38
00:02:55,710 --> 00:03:00,560
Dus er zijn andere plaatsen die we hebben die berichten, maar ik zal je laten zien.

39
00:03:00,690 --> 00:03:04,050
Bijvoorbeeld als ik probeer en deze camping die ik niet zelf bewerken.

40
00:03:04,050 --> 00:03:05,580
Aardappelkoekjes eigenaar is.

41
00:03:05,580 --> 00:03:07,260
Ik ben ingelogd dit blender.

42
00:03:07,770 --> 00:03:10,950
Ik heb geen een link om naar hier te bewerken want dat is verborgen.

43
00:03:11,280 --> 00:03:17,950
Maar technisch ik nog kon naar slash ernaar waar ik nu een bericht dat zegt dat je geen toestemming om dat te doen krijgen.

44
00:03:18,030 --> 00:03:19,710
Het omleidingen me hier terug.

45
00:03:20,070 --> 00:03:26,950
Dus hetzelfde met opmerkingen als ik of er was een commentaar en het is gemaakt door iemand anders.

46
00:03:27,150 --> 00:03:34,720
Als ik handmatig naar die verwijzen en voegde slash in het dan zou ik ook een boodschap, maar dat is een hoop werk, want we hebben om de ID te vinden.

47
00:03:34,900 --> 00:03:42,030
En toch wil ik niet om nu in te gaan, maar het zal het zelfde stukje code dat we toevoegen dat zal zeggen dat je geen toestemming om dat te doen te hebben.

48
00:03:42,060 --> 00:03:50,420
En dan tot slot als ik dat doe uitloggen en ik ga terug en ik probeer en het toevoegen van nieuwe reacties die ik krijg het zelfde bericht.

49
00:03:50,430 --> 00:03:52,030
Je moet ingelogd zijn om dat te doen.

50
00:03:52,050 --> 00:03:55,010
Net alsof ik probeerde om een ​​camping te maken wanneer ik het niet was ondertekend.

51
00:03:55,260 --> 00:03:55,530
OK.

52
00:03:55,530 --> 00:04:00,340
Dus dat is het einddoel en het is eigenlijk vrij gemakkelijk voor ons om dit werk te maken.

53
00:04:00,360 --> 00:04:05,580
Met behulp van dit pakket kunnen we dit doen zonder een pakket natuurlijk wat we iets konden doen.

54
00:04:05,700 --> 00:04:07,520
Wanneer we het openstellen van de juiste versie.

55
00:04:07,740 --> 00:04:12,960
Dus maakte ik een nieuwe versie van dit v 11 dat ik ga werken binnenkant van.

56
00:04:13,440 --> 00:04:23,470
Dus laten we zien in v. 11 en laat me duidelijk alles en open te stellen ja.

57
00:04:24,610 --> 00:04:25,040
OK.

58
00:04:25,110 --> 00:04:26,210
Dus we hier werken.

59
00:04:26,280 --> 00:04:30,390
Ook dit is 11 V voor het geval je volgt samen.

60
00:04:30,390 --> 00:04:33,790
Het eerste wat ik zal doen is je laten zien het pakket dat we gaan gebruiken.

61
00:04:33,820 --> 00:04:35,400
Dus het heet Kinect flitser.

62
00:04:35,400 --> 00:04:38,080
Er waren andere pakketten die er zijn die dit doen.

63
00:04:38,280 --> 00:04:45,090
Als u een kijkje nemen op de get huis nemen repo de documentatie is eigenlijk een beetje verouderd.

64
00:04:45,510 --> 00:04:51,410
We gebruiken Express waarvoor kwam eerder in 2015.

65
00:04:51,930 --> 00:05:00,090
De docs praten over Express naar punt X en drie punt X we op voor de volgende wel.

66
00:05:00,180 --> 00:05:29,710
Dus deze instructies zijn niet precies hetzelfde, hoewel als je terug naar Sluit flash vindt u een aantal van de eerste externe links te zien zijn uitgedrukt 4,00 opgezet met K'NEX flash waar ik een kijkje nemen op namen al of je kan altijd gebruik maken van iets als dit had uitgesproken voor later en je kunt zien krijgen we dat dezelfde link en er zijn tutorials hier beneden is er een stack overflow bericht erover als je wilt een kijkje te nemen.

67
00:05:29,990 --> 00:05:32,910
Dus ik deed dit eerder.

68
00:05:33,080 --> 00:05:37,450
Iets wat je moet veel doen als je weet dat de code wordt bijgewerkt wanneer nieuwe dingen zijn coming out.

69
00:05:37,550 --> 00:05:42,620
Vooral met iets als Express 4.0 waar dingen veranderen vrij aanzienlijk.

70
00:05:42,680 --> 00:05:48,110
Veel dingen die gebruikt om een ​​deel van de Express zijn werden uit express als afzonderlijke pakketten verplaatst.

71
00:05:48,110 --> 00:05:50,280
Sommige van de naamgeving en syntaxis veranderd.

72
00:05:50,430 --> 00:06:03,850
Dus ik zeg altijd het is iets wat je gewoon doen veel wanneer je probeert iets wat je nog niet Snel gedaan toe te voegen in Express te doen voor uw zoekopdrachten, want vaak zul je veel tutorials voor te vinden.

73
00:06:03,880 --> 00:06:14,900
Twee jaar geleden dat nog 90 procent hetzelfde, maar dat 10 procent is echt belangrijk dat je begrijpt hoe het is anders dan jullie twee jaar geleden in vergelijking met huidige Express weten.

74
00:06:14,900 --> 00:06:15,950
Okee.

75
00:06:15,950 --> 00:06:19,110
Dus eerste wat we willen doen is het installeren van dit pakket.

76
00:06:19,400 --> 00:06:21,070
Dus het heet connect flash.

77
00:06:21,110 --> 00:06:29,260
Dus willen we NPM installeren dash dash besparen verbinden dash flitser.

78
00:06:31,050 --> 00:06:31,700
OK.

79
00:06:31,910 --> 00:06:37,530
Nu dat die hier gedaan we zullen gewoon toe te voegen in Flash.

80
00:06:38,030 --> 00:06:45,030
We noemen het knipperen in plaats van aan te sluiten flash gelijken nodig connect dashboard knipperen.

81
00:06:45,080 --> 00:06:53,320
Zorg ervoor dat we een komma daar dan wat we moeten doen is te vertellen uiten vertel de app om Flash te gebruiken.

82
00:06:53,360 --> 00:07:09,700
Dus namen we de inhoud van K'NEX flitser die het pakket en opgeslagen in het flash-variabele en we zullen nodig hebben om uit te voeren die variabele app gebruik flash net als dat.

83
00:07:09,710 --> 00:07:11,500
Dus technisch dat is alles wat we moeten doen.

84
00:07:11,510 --> 00:07:27,700
We hebben nu Connect Flash geïnstalleerd en als we terug te gaan en een kijkje nemen op de documentatie is er een aantal andere configuratie dat ze hier met cookie parser in de sessie, maar we eigenlijk al dat het opzetten van waar we al ons doen.

85
00:07:27,730 --> 00:07:31,210
Waar ben je express sessie nodig en we zijn het opzetten van een geheim.

86
00:07:31,220 --> 00:07:37,580
En dus hebben we niet echt zorgen te maken over dat omdat we al hebben onze app om Express-sessie te gebruiken.

87
00:07:38,070 --> 00:07:44,710
OK dus wat we zullen doen, is op elke pagina gaan we naar de inhoud van de flitser te laten zien.

88
00:07:44,810 --> 00:07:46,940
We gaan naar het bericht dat er in zit te nemen.

89
00:07:46,940 --> 00:07:54,290
Het is misschien goed of slecht is het misschien leeg zou zijn en we gaan om het te laten zien aan de bovenkant van de pagina en dat zal gebeuren in onze header file.

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

91
00:07:54,740 --> 00:08:18,430
Ja, we zullen een stukje code die net toont de fout of het succes boodschap en dan is alles wat we hebben is wanneer we tegenkomen een fout of een plek waar we willen een bericht zodat een instantie van die zou kunnen zijn in plaats van laten we het doen en campings in plaats van onze campings want we hebben dit vastgelegd in Middleware waarin u een nieuwe camping niet kunt toevoegen als u ingelogd bent.

92
00:08:18,440 --> 00:08:30,500
Als we als we naar dat middleware en we zullen kijken is ingelogd, kunnen we willen een bericht dat zegt moet je ingelogd zijn om dat te doen of Log in hebben.

93
00:08:30,500 --> 00:08:32,800
Dus die code zou hier gaan.

94
00:08:32,900 --> 00:08:38,440
Dus vlak voordat we doorverwijzen naar log slash in gaan we iets aan de flitser toe te voegen.

95
00:08:38,840 --> 00:08:44,860
Dus dat ziet er net als dit ook daadwerkelijk te vragen dot flitser.

96
00:08:45,260 --> 00:08:47,370
En dan kunnen we een sleutel.

97
00:08:47,720 --> 00:08:50,000
Dus in een moment dat ik zal je laten zien.

98
00:08:50,000 --> 00:08:59,300
We zullen met behulp van succes en opstaan ​​en we zullen gewoon gebruiken om te bepalen of het bericht moet de waarschuwing groen of rood zijn.

99
00:08:59,300 --> 00:09:04,550
Zodat een deel is niet van belang voor nu, maar dit deel wel toe doet waar we heen gaan door te geven in een bericht.

100
00:09:04,760 --> 00:09:09,560
Dus we konden doen iets dergelijks Gelieve eerst in te loggen.

101
00:09:09,590 --> 00:09:12,470
Ook dit is in het wordt aangemeld Middleware.

102
00:09:12,740 --> 00:09:16,740
Dus het is te controleren of het verzoek wordt geverifieerd als de gebruikers ingelogd.

103
00:09:16,800 --> 00:09:19,430
Dan blijven gaan wat je eerder aan het doen waren.

104
00:09:20,180 --> 00:09:24,030
Maar als dat niet het geval is voordat je naar log slash in.

105
00:09:24,090 --> 00:09:26,390
Ja herinneren als we doorverwijzen naar log slash in.

106
00:09:26,390 --> 00:09:29,320
Zonder deze lijn gaat het gewoon op ook.

107
00:09:29,320 --> 00:09:36,740
Ik moet om de route te openen, maar het zal recht om de code en slash logon die is hier te gaan.

108
00:09:36,740 --> 00:09:43,960
Dus het maakt de log in voor voordat we doen dat, hoewel we gaan deze code flash draaien.

109
00:09:44,120 --> 00:09:53,060
En wat dit zal doen, is in principe te nemen Gelieve eerst in te loggen en het zal toevoegen aan de flitser en het zal niet worden getoond tot de volgende ding dat we zien.

110
00:09:53,180 --> 00:10:06,540
Dus in dit geval is dit eigenlijk niet maken om het even wat het gewoon omleidingen ons slash inloggen en de manier waarop de Flash werkt is echt mooi in dat het niet alleen gaat om zich onmiddellijk knipperen meteen.

111
00:10:06,550 --> 00:10:09,650
Het het alleen werkt of het verschijnt op de volgende pagina.

112
00:10:09,650 --> 00:10:13,130
Dus je eigenlijk doen voordat je omleiden.

113
00:10:13,130 --> 00:10:20,690
Dus in dit geval moet u eerst inloggen en daarna buigen we slash inloggen en vervolgens op het logboek en vormen we zullen hopelijk een bericht te zien.

114
00:10:20,690 --> 00:10:22,470
Op dit moment zijn we niet weer dat, hoewel.

115
00:10:22,520 --> 00:10:35,510
Dus weer gewoon te herhalen alleen het toevoegen van deze lijn zal niets voor ons allemaal dat dit doet is het geeft ons de mogelijkheid het geeft ons een manier om de toegang tot deze op de volgende aanvraag weer te geven.

116
00:10:35,510 --> 00:10:40,570
Dus we niet knipperen meteen we niet iets te zien dat we niet met de gebruiker niets.

117
00:10:40,580 --> 00:10:55,320
Dit alles doet is het zegt in de flitser en plaats van succes dat ik denk dat het zinvoller om deze fout in het flash-add bellen moet u eerst inloggen voor de volgende aanvraag en leid we om in te loggen slash.

118
00:10:55,820 --> 00:11:02,610
Dus dan moeten we dat moeten aanpakken in logon wat recht is hier slash aanmelden.

119
00:11:02,990 --> 00:11:06,790
Dus kon ik zoiets passeren boodschap te doen.

120
00:11:07,340 --> 00:11:24,330
En natuurlijk alles wat ik kan alleen maar laten zien dat dit dus begin als we enkel bericht worden fout je het verknald net als dat we konden alleen maar weer te geven die op onze sjabloon zodat slash aanmelden die de binnenkant van de zekering log in.

121
00:11:24,540 --> 00:11:31,900
Ja, net aan de top kon ik alleen maar een H-1 die boodschap weergegeven, net als dat.

122
00:11:31,940 --> 00:11:33,650
Niets erg nieuw.

123
00:11:33,650 --> 00:11:37,140
Dus ik zal je gewoon laten zien hoe dat eruit ziet nu.

124
00:11:37,190 --> 00:11:44,920
Start de server up omleiding naar slash loggen en ik krijg dit bericht elke keer fout.

125
00:11:44,960 --> 00:11:46,060
Je morste.

126
00:11:46,250 --> 00:11:55,570
Zoals je kunt zien dat is hopelijk wat je verwacht op dit punt, omdat ik hardcoded het in elke keer dat we naar log slash in zien we je het verknald.

127
00:11:56,080 --> 00:12:06,370
OK dus gebruik van de flitser wat we kunnen doen is nu zeggen boodschap is gelijk aan verzoek van flash en we kunnen gewoon de fout in de flitser.

128
00:12:06,740 --> 00:12:09,110
Dus het is een beetje verwarrend.

129
00:12:09,530 --> 00:12:16,980
Maar in principe is het idee nu als ik gewoon Vernieuw de pagina de server opnieuw op te starten en te vernieuwen moet er niet een fout in de flitser.

130
00:12:17,090 --> 00:12:19,120
Dus we eigenlijk niets zien.

131
00:12:20,000 --> 00:12:39,310
Maar als we deze code uitvoert wups deze code hier en de manier waarop we dat doen is proberen om toegang te krijgen tot iets waar we aangemeld zijn, waar deze middleware dan heet wat er zal gebeuren, is dat we dit nu toe te voegen aan de flitser onder de sleutel fout met de waarde log dan eerst dan gaan we slash aanmelden.

132
00:12:39,440 --> 00:12:51,230
Dan binnenkant van slash aanmelding sturen we onder de toets van het bericht verzoek up flitser fout dat is een heleboel dingen die moeten worden verbonden en het is een beetje verwarrend weer.

133
00:12:51,350 --> 00:12:53,370
Maar laat me gewoon laten zien nu.

134
00:12:53,690 --> 00:12:54,740
Dus ik opnieuw op te starten.

135
00:12:54,740 --> 00:12:58,550
Ik eigenlijk niet moeten doen dat deze keer, maar we zien niets.

136
00:12:58,550 --> 00:13:05,140
Laat me nu gaan naar campings en te proberen en voeg een nieuwe camping, ook al ben ik niet ingelogd.

137
00:13:05,630 --> 00:13:12,330
En nu krijg ik die boodschap dat Gelieve eerst in te loggen zegt die er niet was en als ik vernieuw de pagina het gaat weg.

138
00:13:12,530 --> 00:13:16,740
Dus dat is een heel eenvoudige versie van wat we kunnen bereiken met behulp van Flash.

139
00:13:16,910 --> 00:13:22,500
Dus voordat we verder gaan in de volgende video om de uitvoering van deze met alle verschillende berichten en de styling.

140
00:13:22,700 --> 00:13:24,860
Laten we gewoon samen te vatten hoe dit werkt weer.

141
00:13:24,920 --> 00:13:33,500
Dus wanneer we willen een boodschap of het nu een succes bericht of een foutmelding wat het ook is gaan we deze lijn gebruiken hier weer te geven.

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

143
00:13:34,760 --> 00:13:38,630
En dan komen we in een sleutel en een waarde en dat doen we voordat we omleiden.

144
00:13:38,630 --> 00:13:41,450
Het is echt belangrijk als ik deze lijn gezet nadat we omleiden.

145
00:13:41,450 --> 00:13:42,680
Het zal niet werken.

146
00:13:43,130 --> 00:13:53,630
Dus voordat je omleiden en dan moet je nog steeds om te gaan in de sjabloon zelf aan het en de route omgaan met al dat het geeft je de mogelijkheid van het toevoegen van een aantal gegevens in voordat u omleiden.

147
00:13:53,630 --> 00:13:55,300
Dat maakt het de volgende route.

148
00:13:55,460 --> 00:13:59,030
En dat de gegevens niet zal aanhouden op elke verzoek in die route.

149
00:13:59,030 --> 00:14:00,140
Dus het is een eenmalige zaak.

150
00:14:00,410 --> 00:14:01,860
Dat is waarom het heet Flash.

151
00:14:02,060 --> 00:14:02,560
OK.

152
00:14:02,660 --> 00:14:08,550
Dus in de volgende video ga ik je laten zien hoe je nu eigenlijk dit echt waar we niet hebben om dit te doen uit te voeren.

153
00:14:08,600 --> 00:14:18,810
Passen het af bericht naar elke template waar we kunnen stijl denkt mooi met de bootstrap waar we de rode en groene berichten kunnen hebben, kunnen we verschillende kleuren hebben als we willen rood te zetten en groen zijn de standaard zijn.

154
00:14:18,970 --> 00:14:19,180
OK.

155
00:14:19,190 --> 00:14:20,370
Dus dat is in de volgende video.