Nou kom terug in deze video gaan we beginnen op de Yelp kamp-applicatie die we gaan werken voor de rest van deze cursus.
We gaan beginnen met het verkrijgen van de set-up te gaan basic.
Getting express app gaan en het hebben van onze eerste paar routes en templates.
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.
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.
Dus wat ik ga doen is het werk in verschillende mappen.
Dus ik heb een gil kamp directory en dan in plaats van Yelp kamp ga ik verschillende versies toe te voegen.
Dus je hoeft niet om dit te doen.
Je zult in staat zijn om gewoon voortdurend toe te voegen aan een versie van jezelf als je mee wilt volgen en verschillende versies.
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.
OK nu dat dat uit de weg laten we hier beginnen.
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.
Dus we gaan een homepage hebben in principe net als een welkome naar Yelp kamp.
Hier is een kleine blurb over wat we doen.
Hier is een teken up knop.
Hier is een contact link die eigenlijk niet gewoon nog niet zal werken.
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.
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.
Zeer binnenkort zullen we de migratie naar een nieuwe database voor nu een camping is alleen maar om twee verschillende stukken van informatie.
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.
Dus laten we de slag te gaan.
Ik zal beginnen met het uitvoeren van NPM in en dan zullen we druk op enter hier en opnieuw in te voeren.
We zullen gewoon noemen dit de nok v1.
Ik zal apt te maken, zoals mijn entry point.
En daar gaan we.
Auteur en druk op enter.
Nog een keer.
OK.
Laten we nu eens lopen NPM installeren Express en ja.
Dash dash op te slaan.
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.
En als je kijkt naar het pakket stomp Jason je kunt zien heeft SJS en express.
Dus laten we nu de app te maken.
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.
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.
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.
Laten we het kamp server net als dat en op te slaan.
En laten we nu teruggaan en beginnen met het toevoegen van onze landing page.
En zoals de meeste toepassingen de landing page is op de goede weg.
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.
OK.
En krijgen we het antwoord dat alles wat we zoekt.
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.
Ja, daar gaan we.
En dan zullen we openen dat tot gebruik slash landing en we zullen gewoon een zeer eenvoudige opmaak in hier.
Landing page en dan gebeurt hier kunnen we een paragraaf te zetten.
Welkom op de Oprah kamp.
En natuurlijk zal dit allemaal worden veranderd en zal heel anders worden ingericht door het einde van de cursus.
Maar voor nu we willen gewoon om ervoor te zorgen dat de dingen werken.
Laten we dan teruggaan naar APT.
Ja.
En het eerste wat we doen is het zo dat het een overblijfsel maken landing en we zullen het punt uit te laten.
Ja.
En om dat te doen ik nodig om toe te voegen in de app ingesteld oog motor J.S worden ..
En dan hoeven we niet om te schrijven.
E.J. zoals hier en we redden de server opnieuw op te starten.
James vernieuwen en krijgen we onze landing page template.
Grote.
Brei de volgende let op de camping route.
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.
Maar we zullen binnenkort op het verzoek en de reactie net als dit op te slaan.
En dan moeten we de kampeerterreinen serie, die herinner me alleen een array tijdelijk te definiëren.
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.
Dus het gaat er zo uitzien.
Of hebben we een array en vervolgens elk item in de array is een object.
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.
Daar gaan we.
En dan zullen we een array van deze hebben.
Dus we zouden kunnen hebben 10 verschillende campings 100 aan het eind van de cursus.
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.
Laten we teruggaan naar Apter Yes gaan.
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.
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.
En de eerste zal de naam en ik zal gewoon gaan met Semon kreek.
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.
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.
Okee.
Dus drie campings drie totaal fictieve namen en voor afbeeldingen.
Ik ben eigenlijk van plan om een ​​aantal creative commons foto's te gebruiken zodat ik niet lopen om eventuele problemen.
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.
Laten we gaan met deze te beginnen.
Dus ik ga naar de afbeelding te kopiëren u of ik ga terug naar binnen en zal dat zijn berggeiten rusten.
Waarom niet.
En dan gaan we weer terug gaan en ik zal dit hier te nemen.
Kopieer hem in RL en dit zal Salmon Creek.
En dan moeten we nog één en ik zal gewoon deze.
Natuurlijk is dit niet echt een camping, maar dat is naast het punt hier.
Ik moedig u aan om een ​​echte camping namen te gebruiken in het echte camping foto's als je de zorg.
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.
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.
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.
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.
We gaan gewoon om te controleren of de sjabloon correct werkt.
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.
Het is net als dat en hier zullen we een H1 toe te voegen.
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.
Dit is de kampeerterreinen pagina.
En terwijl we hier is het leuk om wat knippert toe zou zijn.
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.
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.
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.
Dus vergeet niet dat dit de gegevens die we op doorreis bent in en dit is de naam die we willen geven.
We kunnen dit alles wat we wilden noemen, maar het is gebruikelijk om te zien dat ze het zelfde ding te noemen.
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.
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.
Dus laten we nu doorlopen en elke titel of elke naam en beeld weer te geven.
Dus ik zal deze beugels hier te houden, maar ik zal ontdoen van de gelijk-teken te krijgen en we zullen voor elke doen.
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.
OK.
Dus dat moet lus door campings en wat we willen doen voor elke we gewoon de naam als eerste worden weergegeven.
Dus we zullen beginnen met een bondgenoot.
Waarom niet.
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.
En we gaan gewoon om te laten zien in de Y-camping.
Dot naam en sla alle ruimte die is buiten.
Laten we nu laden van de pagina en laad deze en krijgen we drie camping namen.
Het laatste wat ik wil doen is ervoor zorgen dat we de beelden weer te geven.
Dus we terug naar binnen en in plaats van een bondgenoot gaan laten we dit veranderen, zodat we een div-tag voor elke camping.
En in de div tag zal een uur weer te geven.
Laten we een 4 met de naam camping en dan onder het zal een beeld tag zetten.
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.
We hebben die Ejay als haakjes.
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.
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.
Het is gewoon toegevoegd als tekst.
Dus het zou er zo uitzien HTP colon slash wat we aanhalingstekens rond het nodig hebben.
Dus moeten we ervoor zorgen dat we het toevoegen van de Ejaz labels binnenkant van de aanhalingstekens, net als dat.
OK.
Dus dan wat we willen doen is het kampeerterrein ervoor te zorgen maken we gebruik van beeld.
Daar gaan we.
Ik ben A-G en we hebben dat hier op exact dezelfde manier gespeld en ik zal de server hernieuwd stoppen.
Laten we teruggaan en vernieuw de pagina en krijgen we de drie campings met de drie beelden.
Oké geweldig.
Dus dat is alles wat ik wil doen in deze video was te krijgen de basisstructuur opzetten van onze twee routes.
Laten we terug gaan om ervoor te zorgen dat we hebben alles wat we wilden doen.
Dus op de landing page ja, we deden dat op de camping pagina die alle de camping geeft.
We hebben ook dat elke camping heeft een naam en een afbeelding.