1
00:00:00,460 --> 00:00:07,010
Nou kom terug in deze video gaan we beginnen op de Yelp kamp-applicatie die we gaan werken voor de rest van deze cursus.

2
00:00:07,050 --> 00:00:09,280
We gaan beginnen met het verkrijgen van de set-up te gaan basic.

3
00:00:09,280 --> 00:00:12,720
Getting express app gaan en het hebben van onze eerste paar routes en templates.

4
00:00:12,720 --> 00:00:19,890
Maar voordat we praten over dat ik wil gewoon de workflow hier uit te leggen en hoe dit zal werken als we voortdurend verschillende functies toe te voegen.

5
00:00:19,950 --> 00:00:25,370
Ik wil dat je in staat zijn om de code te zien op elk punt in de tijd Ik wil niet dat je alleen maar om de uiteindelijke oplossing te zien.

6
00:00:25,380 --> 00:00:28,370
Dus wat ik ga doen is het werk in verschillende mappen.

7
00:00:28,470 --> 00:00:33,610
Dus ik heb een gil kamp directory en dan in plaats van Yelp kamp ga ik verschillende versies toe te voegen.

8
00:00:33,720 --> 00:00:34,970
Dus je hoeft niet om dit te doen.

9
00:00:35,040 --> 00:00:40,710
Je zult in staat zijn om gewoon voortdurend toe te voegen aan een versie van jezelf als je mee wilt volgen en verschillende versies.

10
00:00:40,710 --> 00:00:52,580
Ik zal altijd wijzen welke versie we op maar het doel is dat als je wilt dat het terug te kijken naar wat ik heb toegevoegd tussen versie 2 en versie 3 Je zou het openstellen van de versie 2 en versie 3 directory's en vergelijk ze.

11
00:00:52,960 --> 00:00:55,770
OK nu dat dat uit de weg laten we hier beginnen.

12
00:00:55,830 --> 00:01:05,050
Wat we gaan doen is het opzetten van de basis app zal Express installeren en elk Yes we krijgen van het uitzicht directory te gaan en dan zullen we twee verschillende routes toe te voegen.

13
00:01:05,130 --> 00:01:09,660
Dus we gaan een homepage hebben in principe net als een welkome naar Yelp kamp.

14
00:01:09,840 --> 00:01:11,750
Hier is een kleine blurb over wat we doen.

15
00:01:11,880 --> 00:01:12,750
Hier is een teken up knop.

16
00:01:12,750 --> 00:01:15,760
Hier is een contact link die eigenlijk niet gewoon nog niet zal werken.

17
00:01:15,840 --> 00:01:25,410
En dan van daaruit gaan we naar de kampeerterreinen pagina de hoofdpagina van onze app die alle van de campings in onze database zal een lijst zal maken en we hebben geen database nog.

18
00:01:25,410 --> 00:01:31,930
Dus het gaat gewoon om een ​​array van de camping, net als wij deden in de laatste video met de vrienden waar we een array van vrienden.

19
00:01:32,010 --> 00:01:39,530
Zeer binnenkort zullen we de migratie naar een nieuwe database voor nu een camping is alleen maar om twee verschillende stukken van informatie.

20
00:01:39,840 --> 00:01:55,000
Tegen het einde van de cursus campings zal moeten 10 tot 15 verschillende stukken, maar voor nu is het gewoon een naam als zalm beek of Dewey punt of wat dan ook de naam van onze camping is en dan gaan we een beeld dat we kunnen geven hebben en het beeld zal gewoon aur l.

21
00:01:55,380 --> 00:01:56,460
Dus laten we de slag te gaan.

22
00:01:56,760 --> 00:02:04,110
Ik zal beginnen met het uitvoeren van NPM in en dan zullen we druk op enter hier en opnieuw in te voeren.

23
00:02:04,380 --> 00:02:07,810
We zullen gewoon noemen dit de nok v1.

24
00:02:08,640 --> 00:02:11,990
Ik zal apt te maken, zoals mijn entry point.

25
00:02:12,480 --> 00:02:13,790
En daar gaan we.

26
00:02:14,060 --> 00:02:17,670
Auteur en druk op enter.

27
00:02:17,700 --> 00:02:18,550
Nog een keer.

28
00:02:18,780 --> 00:02:19,300
OK.

29
00:02:19,500 --> 00:02:23,920
Laten we nu eens lopen NPM installeren Express en ja.

30
00:02:23,940 --> 00:02:25,320
Dash dash op te slaan.

31
00:02:25,410 --> 00:02:33,540
Ik heb je dit nog niet aangetoond, maar dit is een veel gemakkelijkere manier als je wilt meerdere pakketten in een keer je ze gewoon te scheiden door een spatie te installeren.

32
00:02:35,820 --> 00:02:43,300
En als je kijkt naar het pakket stomp Jason je kunt zien heeft SJS en express.

33
00:02:44,160 --> 00:02:45,590
Dus laten we nu de app te maken.

34
00:02:45,680 --> 00:03:00,700
Ja en open dat tot en de binnenkant van hier toevoegen onze Basic Express importeren die je behoorlijk comfortabel met op dit moment nodig Express zou moeten zijn.

35
00:03:01,050 --> 00:03:15,570
En dan is de app variabele gelijk express functie wordt uitgevoerd en dan zal naar beneden springen en doe de opt out luisteren die ook moet je redelijk bekend zijn met nu proces.

36
00:03:15,610 --> 00:03:34,510
Ian VI poort proces dat EMV IP en de callback en en hier zal ik een consulaire log die zegt Yelp kamp wordt gestart doen.

37
00:03:35,100 --> 00:03:42,000
Laten we het kamp server net als dat en op te slaan.

38
00:03:42,320 --> 00:03:45,510
En laten we nu teruggaan en beginnen met het toevoegen van onze landing page.

39
00:03:45,720 --> 00:03:49,210
En zoals de meeste toepassingen de landing page is op de goede weg.

40
00:03:49,440 --> 00:04:18,010
Dus we gaan gewoon naar een app die flash krijgen toe te voegen en we beginnen met slechts een roodstaart te sturen om te controleren of alles werkt OK en we zullen stuur dit zal de landing page snel en op te slaan en dan zullen we beginnen de server ervoor zorgen dat we het kamp server was begonnen en dan gaan we terug en gewoon te vernieuwen op onze route pad.

41
00:04:18,300 --> 00:04:18,700
OK.

42
00:04:18,720 --> 00:04:21,690
En krijgen we het antwoord dat alles wat we zoekt.

43
00:04:21,810 --> 00:04:36,680
Laten we nu ga je gang en het opzetten van onze templates daarom moeten we een nieuwsbericht map die uitzicht directory te maken en wij zorgen een sjabloon genaamd landing dat ieder van ons in de standpunten directory landing.

44
00:04:36,810 --> 00:04:39,080
Ja, daar gaan we.

45
00:04:39,240 --> 00:04:47,580
En dan zullen we openen dat tot gebruik slash landing en we zullen gewoon een zeer eenvoudige opmaak in hier.

46
00:04:47,580 --> 00:04:54,030
Landing page en dan gebeurt hier kunnen we een paragraaf te zetten.

47
00:04:54,030 --> 00:04:56,340
Welkom op de Oprah kamp.

48
00:04:56,340 --> 00:05:00,900
En natuurlijk zal dit allemaal worden veranderd en zal heel anders worden ingericht door het einde van de cursus.

49
00:05:01,110 --> 00:05:03,750
Maar voor nu we willen gewoon om ervoor te zorgen dat de dingen werken.

50
00:05:03,810 --> 00:05:05,110
Laten we dan teruggaan naar APT.

51
00:05:05,120 --> 00:05:05,770
Ja.

52
00:05:06,030 --> 00:05:12,880
En het eerste wat we doen is het zo dat het een overblijfsel maken landing en we zullen het punt uit te laten.

53
00:05:13,000 --> 00:05:13,560
Ja.

54
00:05:13,770 --> 00:05:23,490
En om dat te doen ik nodig om toe te voegen in de app ingesteld oog motor J.S worden ..

55
00:05:23,880 --> 00:05:25,100
En dan hoeven we niet om te schrijven.

56
00:05:25,120 --> 00:05:30,630
E.J. zoals hier en we redden de server opnieuw op te starten.

57
00:05:30,900 --> 00:05:35,770
James vernieuwen en krijgen we onze landing page template.

58
00:05:36,180 --> 00:05:37,400
Grote.

59
00:05:37,410 --> 00:05:39,880
Brei de volgende let op de camping route.

60
00:05:40,110 --> 00:05:50,910
Dus we gaan om een ​​app te krijgen en om de door u poollicht moet slash campings hebben en dit moet alle campings die we hebben die op dit moment hebben we niets hebben laten zien.

61
00:05:51,030 --> 00:05:56,820
Maar we zullen binnenkort op het verzoek en de reactie net als dit op te slaan.

62
00:05:57,060 --> 00:06:02,760
En dan moeten we de kampeerterreinen serie, die herinner me alleen een array tijdelijk te definiëren.

63
00:06:02,750 --> 00:06:12,960
De volgende grote verandering die je gaat maken, is het toevoegen van een database en het hebben van onze campings worden opgeslagen in de database voor nu is het een array en elke camping heeft een naam en een afbeelding.

64
00:06:12,960 --> 00:06:14,350
Dus het gaat er zo uitzien.

65
00:06:14,580 --> 00:06:19,840
Of hebben we een array en vervolgens elk item in de array is een object.

66
00:06:19,950 --> 00:06:37,520
En elk heeft een naam en dan laten we maar zeggen naam Salmon Creek ergens ik ging kamperen onlangs en vervolgens beeld en dan zal het een URL van een afbeelding als HTP wat dat GWW image dotcom zijn.

67
00:06:37,560 --> 00:06:38,190
Daar gaan we.

68
00:06:38,490 --> 00:06:40,560
En dan zullen we een array van deze hebben.

69
00:06:40,740 --> 00:06:45,570
Dus we zouden kunnen hebben 10 verschillende campings 100 aan het eind van de cursus.

70
00:06:45,690 --> 00:06:59,950
En elk van hen heeft een naam en een afbeelding en dan uiteindelijk zullen ze dingen zoals breedte- en lengtegraad stad en staat het adres capaciteit seizoensgebondenheid al deze verschillende eigenschappen hebben, maar we beginnen het eenvoudige naam en.

71
00:07:00,600 --> 00:07:02,110
Laten we teruggaan naar Apter Yes gaan.

72
00:07:02,310 --> 00:07:11,900
En wat we gaan doen is om de matrix te vinden en we kunnen beginnen door gewoon doen het hier zo ver zullen we noemen het camping in deze gelijk is aan een array.

73
00:07:12,210 --> 00:07:19,660
En dan in de array en gewoon formatteren dit een beetje beter als we naar binnen gaan de reeks gaan we een aantal starter objecten hebben.

74
00:07:19,800 --> 00:07:25,590
En de eerste zal de naam en ik zal gewoon gaan met Semon kreek.

75
00:07:26,000 --> 00:07:30,210
Je kunt gewoon even wat make-up en het beeld zal hebben en ik kom terug te komen en in de beelden in te vullen.

76
00:07:30,330 --> 00:07:44,580
En dan is de volgende zal dit doen make-up een andere site we noemen het om Granieten heuvel en dan nog een patrouille oproep berggeiten borst.

77
00:07:44,580 --> 00:07:45,110
Okee.

78
00:07:45,120 --> 00:07:48,960
Dus drie campings drie totaal fictieve namen en voor afbeeldingen.

79
00:07:48,960 --> 00:07:53,540
Ik ben eigenlijk van plan om een ​​aantal creative commons foto's te gebruiken zodat ik niet lopen om eventuele problemen.

80
00:07:53,550 --> 00:07:58,920
Deze zijn niet van plan om te corresponderen met een van de campings die ik eigenlijk heb bezocht, maar ik ga gewoon om wat beelden hier halen.

81
00:07:59,070 --> 00:08:01,540
Laten we gaan met deze te beginnen.

82
00:08:01,690 --> 00:08:07,550
Dus ik ga naar de afbeelding te kopiëren u of ik ga terug naar binnen en zal dat zijn berggeiten rusten.

83
00:08:07,590 --> 00:08:08,340
Waarom niet.

84
00:08:08,630 --> 00:08:13,160
En dan gaan we weer terug gaan en ik zal dit hier te nemen.

85
00:08:13,590 --> 00:08:17,800
Kopieer hem in RL en dit zal Salmon Creek.

86
00:08:18,300 --> 00:08:21,630
En dan moeten we nog één en ik zal gewoon deze.

87
00:08:21,690 --> 00:08:26,180
Natuurlijk is dit niet echt een camping, maar dat is naast het punt hier.

88
00:08:26,340 --> 00:08:31,390
Ik moedig u aan om een ​​echte camping namen te gebruiken in het echte camping foto's als je de zorg.

89
00:08:31,440 --> 00:08:42,660
Als niet als je een hekel aan kamperen dat is iets wat ik dacht ik bang dat dit sommige mensen kunnen vervreemden, maar als je dat doet haat camping waarvan ik denk dat begrijpelijk kunt u gemakkelijk deze aanvraag veranderen naar iets anders.

90
00:08:42,750 --> 00:08:55,990
Zodra we klaar was kon je het te maken in een gebeurtenis app verzoek van een partij een restaurant review site iets dergelijks, maar ik raad je wachten tot het einde van de cursus om dat te doen, zodat je niet in de war met de naamgeving en verschillende variabelen krijgen dat we hebben.

91
00:08:56,190 --> 00:09:05,410
Dus campground vandaag Voor nu nep campings en bespaart ervoor zorgen dat we toe te voegen of komma in tussen de verschillende elementen in de array.

92
00:09:05,420 --> 00:09:15,170
Daar gaan we in en we beginnen met het renderen van een template roodstaart maken en het gaat campings genoemd te worden en we zijn niet van plan om de gegevens te passeren gewoon nog niet.

93
00:09:15,170 --> 00:09:18,170
We gaan gewoon om te controleren of de sjabloon correct werkt.

94
00:09:18,380 --> 00:09:29,370
Nu moeten we de server aanraking te stoppen een nieuw uitzicht bestand slash camping ups die E.J. ons en dan zullen openen we die op.

95
00:09:31,370 --> 00:09:35,000
Het is net als dat en hier zullen we een H1 toe te voegen.

96
00:09:35,030 --> 00:09:52,850
Dit is de camping pagina en op te slaan en laten we ervoor zorgen dat we zien dat pagina wanneer we beginnen met de server up kunnen we vernieuwen en laten we gaan naar campings slash en we krijgen.

97
00:09:52,850 --> 00:09:54,190
Dit is de kampeerterreinen pagina.

98
00:09:54,440 --> 00:09:57,430
En terwijl we hier is het leuk om wat knippert toe zou zijn.

99
00:09:57,470 --> 00:10:13,490
Dus ik ga om een ​​link toe te voegen aan de landing page die Bekijk alle campings en om dat te doen en de noodzaak om de kredietverlening template en net aan de onderkant om te gaan op een verankerd tag aan het ref attribuut en de ATF moet worden zegt slash camping.

100
00:10:13,820 --> 00:10:26,610
En ik zal gewoon zeggen dat je alle campings en op te slaan opnieuw op de server refresh weergave van campings brengt ons nu naar de camping pagina.

101
00:10:26,630 --> 00:10:52,690
Oke dus nu laten we gaan en ervoor zorgen dat we de gegevens passeren onze camping in de rest van het maken gesprek en dan kunnen we lus door alle van het en geven elk beeld en elke naam in onze template zal beginnen door te gaan naar ons werken en toe te voegen in die tweede argument hier, wat is het doel van alle gegevens die we willen passeren en we zullen pas in campings onder de naam campings.

102
00:10:52,700 --> 00:10:57,220
Dus vergeet niet dat dit de gegevens die we op doorreis bent in en dit is de naam die we willen geven.

103
00:10:57,320 --> 00:11:00,950
We kunnen dit alles wat we wilden noemen, maar het is gebruikelijk om te zien dat ze het zelfde ding te noemen.

104
00:11:01,160 --> 00:11:11,770
Dus we nu op te slaan en terug te gaan naar onze template en we beginnen door gewoon te doen deze campings en als we iets zien eruit zal zien object object.

105
00:11:11,810 --> 00:11:21,800
Als we het goed hebben gedaan dan weten we dat we de gegevens hebben doorgegeven via de server opnieuw op te starten of te vernieuwen Rigaud een array met drie objecten binnen.

106
00:11:22,740 --> 00:11:26,840
Dus laten we nu doorlopen en elke titel of elke naam en beeld weer te geven.

107
00:11:27,290 --> 00:11:32,020
Dus ik zal deze beugels hier te houden, maar ik zal ontdoen van de gelijk-teken te krijgen en we zullen voor elke doen.

108
00:11:32,150 --> 00:11:55,640
Dus dat zal een camping voor elke en dan dien anonieme functie de callback en we noemen het kampeerterrein en we zullen druk op enter hier en dan moeten we terug te gaan en ervoor te zorgen dat we toe te voegen in de juiste sluiting Ejay ons beugels en dan naar beneden hier moeten we deze insluiten met elkaar ons ook.

109
00:11:56,240 --> 00:11:56,880
OK.

110
00:11:57,080 --> 00:12:02,850
Dus dat moet lus door campings en wat we willen doen voor elke we gewoon de naam als eerste worden weergegeven.

111
00:12:03,080 --> 00:12:05,190
Dus we zullen beginnen met een bondgenoot.

112
00:12:05,270 --> 00:12:05,890
Waarom niet.

113
00:12:06,050 --> 00:12:14,700
En we zullen gewoon doen ons E.J. s met het isgelijkteken en maken allemaal wat ruimte, zodat het een beetje makkelijker om te zien wat er gebeurt.

114
00:12:14,900 --> 00:12:18,190
En we gaan gewoon om te laten zien in de Y-camping.

115
00:12:18,340 --> 00:12:22,750
Dot naam en sla alle ruimte die is buiten.

116
00:12:23,120 --> 00:12:28,460
Laten we nu laden van de pagina en laad deze en krijgen we drie camping namen.

117
00:12:28,460 --> 00:12:31,880
Het laatste wat ik wil doen is ervoor zorgen dat we de beelden weer te geven.

118
00:12:31,880 --> 00:12:40,290
Dus we terug naar binnen en in plaats van een bondgenoot gaan laten we dit veranderen, zodat we een div-tag voor elke camping.

119
00:12:40,400 --> 00:12:44,390
En in de div tag zal een uur weer te geven.

120
00:12:44,390 --> 00:12:52,530
Laten we een 4 met de naam camping en dan onder het zal een beeld tag zetten.

121
00:12:53,450 --> 00:13:09,160
En wat we moeten doen is het beeld een bron en de binnenkant van de citaten in plaats van een u r l als dit wat u ook bent ELAS gaat om het beeld te zetten vanaf de camping en we kunnen niet gewoon doen kampeerterrein dat imago.

122
00:13:09,200 --> 00:13:11,030
We hebben die Ejay als haakjes.

123
00:13:11,330 --> 00:13:19,250
Dus moeten we het doen in het quotes dat is een beetje verwarrend om een ​​aantal van mijn studenten in eerste instantie omdat kampeerterrein dat imago is al een string.

124
00:13:19,700 --> 00:13:26,820
En je kunt hier zien, maar vergeet niet dat als we als we hiermee rekening en voeg deze toe in de template die aanhalingstekens niet mee te gaan met het.

125
00:13:26,900 --> 00:13:28,350
Het is gewoon toegevoegd als tekst.

126
00:13:28,430 --> 00:13:33,800
Dus het zou er zo uitzien HTP colon slash wat we aanhalingstekens rond het nodig hebben.

127
00:13:33,980 --> 00:13:39,080
Dus moeten we ervoor zorgen dat we het toevoegen van de Ejaz labels binnenkant van de aanhalingstekens, net als dat.

128
00:13:39,410 --> 00:13:39,770
OK.

129
00:13:39,800 --> 00:13:45,800
Dus dan wat we willen doen is het kampeerterrein ervoor te zorgen maken we gebruik van beeld.

130
00:13:45,800 --> 00:13:46,540
Daar gaan we.

131
00:13:46,760 --> 00:13:54,670
Ik ben A-G en we hebben dat hier op exact dezelfde manier gespeld en ik zal de server hernieuwd stoppen.

132
00:13:54,980 --> 00:14:01,650
Laten we teruggaan en vernieuw de pagina en krijgen we de drie campings met de drie beelden.

133
00:14:01,670 --> 00:14:02,300
Oké geweldig.

134
00:14:02,300 --> 00:14:07,270
Dus dat is alles wat ik wil doen in deze video was te krijgen de basisstructuur opzetten van onze twee routes.

135
00:14:07,280 --> 00:14:10,060
Laten we terug gaan om ervoor te zorgen dat we hebben alles wat we wilden doen.

136
00:14:10,340 --> 00:14:15,740
Dus op de landing page ja, we deden dat op de camping pagina die alle de camping geeft.

137
00:14:15,860 --> 00:14:19,390
We hebben ook dat elke camping heeft een naam en een afbeelding.