1
00:00:00,460 --> 00:00:05,250
Bene, torna in questo video e inizieremo con l'applicazione del campo Yelp su cui lavoreremo

2
00:00:05,250 --> 00:00:07,010
per il resto del corso.

3
00:00:07,050 --> 00:00:09,280
Inizieremo con l'impostazione di base in corso.

4
00:00:09,280 --> 00:00:12,720
Ottenere l'app Express e avere i nostri primi percorsi e modelli.

5
00:00:12,720 --> 00:00:17,490
Ma prima di parlare di questo, voglio solo spiegare il flusso di lavoro qui e

6
00:00:17,490 --> 00:00:19,890
come funzionerà mentre aggiungiamo continuamente funzionalità diverse.

7
00:00:19,950 --> 00:00:25,080
Voglio che tu sia in grado di vedere il codice in qualsiasi momento, non voglio che tu veda la soluzione finale.

8
00:00:25,380 --> 00:00:28,370
Quindi quello che ho intenzione di fare è lavorare in diverse cartelle.

9
00:00:28,470 --> 00:00:33,610
Quindi ho una directory del campo dei guai e poi, invece del campo di Yelp, aggiungerò versioni diverse.

10
00:00:33,720 --> 00:00:34,970
Quindi non devi farlo.

11
00:00:35,040 --> 00:00:39,780
Sarai in grado di aggiungere continuamente a una versione te stesso se vuoi seguire e

12
00:00:39,780 --> 00:00:40,710
realizzare versioni diverse.

13
00:00:40,710 --> 00:00:45,570
Indico sempre la versione in cui ci troviamo, ma l'obiettivo è che, se vuoi che ripensi a

14
00:00:45,570 --> 00:00:51,570
ciò che ho aggiunto tra la versione 2 e la versione 3, puoi aprire le directory della versione 2 e della

15
00:00:51,570 --> 00:00:52,580
versione 3 e confrontarle.

16
00:00:52,960 --> 00:00:55,770
OK ora che è fuori mano iniziamo qui.

17
00:00:55,830 --> 00:01:01,950
Quello che andremo a fare è impostare l'app di base che installerà Express e ogni sì, otterremo la

18
00:01:01,950 --> 00:01:05,050
directory delle visualizzazioni e quindi aggiungeremo due percorsi diversi.

19
00:01:05,130 --> 00:01:09,660
Quindi avremo una home page in pratica come un benvenuto al campo di Yelp.

20
00:01:09,840 --> 00:01:11,750
Ecco una piccola descrizione di ciò che facciamo.

21
00:01:11,880 --> 00:01:12,750
Ecco un pulsante di registrazione.

22
00:01:12,750 --> 00:01:15,760
Ecco un link di contatto che in realtà non funzionerà ancora.

23
00:01:15,840 --> 00:01:21,060
E poi da lì andremo a creare la pagina dei campeggi che sarà la pagina principale della nostra

24
00:01:21,270 --> 00:01:25,410
app che elencherà tutti i campeggi nel nostro database e non abbiamo ancora un database.

25
00:01:25,410 --> 00:01:30,600
Quindi sarà solo una serie di campeggi proprio come abbiamo fatto nell'ultimo video con gli amici in cui

26
00:01:30,660 --> 00:01:31,930
avevamo una schiera di amici.

27
00:01:32,010 --> 00:01:38,100
Molto presto migreremo ad un nuovo database per ora un campeggio avrà solo

28
00:01:38,100 --> 00:01:39,530
due informazioni diverse.

29
00:01:39,840 --> 00:01:44,880
Entro la fine del campo del corso ci saranno da 10 a 15 pezzi diversi, ma per

30
00:01:45,180 --> 00:01:51,120
ora è solo un nome come il salmone o il punto Dewey o qualunque sia il nome del nostro campeggio

31
00:01:51,120 --> 00:01:55,000
e poi avremo un'immagine che possiamo mostrare e l'immagine sarà solo aur l.

32
00:01:55,380 --> 00:01:56,460
Quindi andiamo.

33
00:01:56,760 --> 00:02:04,110
Inizierò eseguendo NPM al suo interno e poi premiamo invio qui e inseriremo di nuovo.

34
00:02:04,380 --> 00:02:07,810
Chiameremo semplicemente la videocamera v1.

35
00:02:08,640 --> 00:02:11,990
Farò apt come il mio punto di ingresso.

36
00:02:12,480 --> 00:02:13,790
E noi andiamo.

37
00:02:14,060 --> 00:02:17,670
Autore e premi invio.

38
00:02:17,700 --> 00:02:18,550
Un'altra volta.

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

40
00:02:19,500 --> 00:02:23,920
Ora eseguiamo NPM install Express e sì.

41
00:02:23,940 --> 00:02:25,320
Dash dash save.

42
00:02:25,410 --> 00:02:29,580
Non ti ho ancora mostrato questo, ma questo è un modo molto più

43
00:02:29,580 --> 00:02:33,540
semplice se vuoi installare più pacchetti contemporaneamente li separi da uno spazio.

44
00:02:35,820 --> 00:02:43,300
E se guardi lo stub del pacchetto Jason puoi vedere che ha SJS ed express.

45
00:02:44,160 --> 00:02:45,590
Quindi ora creiamo l'app.

46
00:02:45,680 --> 00:02:57,840
Sì e apri questo e dentro di qui aggiungi la nostra importazione express di base che dovresti essere abbastanza

47
00:02:57,840 --> 00:03:00,700
confortevole con adesso richiede Express.

48
00:03:01,050 --> 00:03:10,700
viene eseguita e poi salterà giù e farà l'opt out che anche tu dovresti essere abbastanza familiare con il processo now.

49
00:03:10,700 --> 00:03:15,570
E poi la variabile app è uguale alla funzione express che

50
00:03:15,610 --> 00:03:22,980
La porta Ian VI elabora l'IP EMV e il callback e

51
00:03:25,680 --> 00:03:34,510
qui eseguirò un registro consolare che dice che il campo Yelp è stato avviato.

52
00:03:35,100 --> 00:03:42,000
Facciamo il camp-server proprio così e salviamo.

53
00:03:42,320 --> 00:03:45,510
E ora torniamo indietro e inizia aggiungendo la nostra pagina di destinazione.

54
00:03:45,720 --> 00:03:49,210
E come la maggior parte delle applicazioni, la pagina di destinazione è sulla strada giusta.

55
00:03:49,440 --> 00:03:52,770
e quindi inizieremo il server si assicura che

56
00:03:58,770 --> 00:04:04,410
il server del campo sia stato avviato, quindi torniamo indietro e aggiorniamo sul nostro percorso.

57
00:04:04,410 --> 00:04:13,080
Quindi aggiungiamo semplicemente un'app che diventa flash e inizieremo con una semplice redstart send per assicurarci che le cose funzionino correttamente e

58
00:04:13,080 --> 00:04:18,010
invieremo solo questa sarà la pagina di destinazione a breve e salvi

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

60
00:04:18,720 --> 00:04:21,690
E otteniamo la risposta che è tutto ciò che stiamo cercando.

61
00:04:21,810 --> 00:04:28,230
Ora andiamo avanti e configuriamo i nostri modelli, quindi abbiamo bisogno di creare una directory di notizie

62
00:04:28,830 --> 00:04:36,680
che crei viste di directory e faremo un modello chiamato atterraggio che ognuno di noi ha all'interno della directory delle viste.

63
00:04:36,810 --> 00:04:39,080
Sì, ci siamo.

64
00:04:39,240 --> 00:04:47,580
E poi apriremo l'uso di slash landing e inseriremo qui un markup molto semplice.

65
00:04:47,580 --> 00:04:54,030
Landing Page e poi fatto qui possiamo mettere un paragrafo.

66
00:04:54,030 --> 00:04:56,340
Benvenuto nel campo di Oprah.

67
00:04:56,340 --> 00:05:00,720
E ovviamente questo sarà tutto cambiato e sarà modellato in modo molto diverso entro la fine del corso.

68
00:05:01,110 --> 00:05:03,750
Ma per ora vogliamo solo assicurarci che le cose stiano funzionando.

69
00:05:03,810 --> 00:05:05,110
Quindi torniamo all'APT.

70
00:05:05,120 --> 00:05:05,770
Sì.

71
00:05:06,030 --> 00:05:12,470
E la prima cosa che faremo è cambiarla in modo che sia un atterraggio per il resto e lasceremo il

72
00:05:12,480 --> 00:05:12,880
punto.

73
00:05:13,000 --> 00:05:13,560
Sì.

74
00:05:13,770 --> 00:05:23,490
E per farlo ho bisogno di aggiungere nel motore di visualizzazione set app per essere J. S. E poi non dobbiamo scrivere.

75
00:05:23,880 --> 00:05:25,100
E. J. come qui e salveremo il riavvio del server.

76
00:05:25,120 --> 00:05:30,630
James si aggiorna e otteniamo il modello della pagina di destinazione.

77
00:05:30,900 --> 00:05:35,770
Grande.

78
00:05:36,180 --> 00:05:37,400
Quindi lavoriamo sul percorso del campeggio.

79
00:05:37,410 --> 00:05:39,880
Quindi avremo un'app per ottenere e il tuo

80
00:05:40,110 --> 00:05:46,470
auroral dovrebbe essere un campo da campeggio e questo dovrebbe mostrare tutti i campeggi che abbiamo adesso che non abbiamo nulla.

81
00:05:46,470 --> 00:05:50,910
Ma tra poco ci saranno richieste e risposte come queste.

82
00:05:51,030 --> 00:05:56,820
E poi abbiamo bisogno di definire l'array dei campeggi che ricordano solo un array temporaneamente.

83
00:05:57,060 --> 00:06:02,760
Il prossimo grande cambiamento che farai è di aggiungere un database e di avere i nostri campeggi salvati

84
00:06:02,750 --> 00:06:07,500
nel database per ora è un array e ogni campeggio ha un nome e un'immagine.

85
00:06:07,500 --> 00:06:12,960
Quindi assomiglierà a questo.

86
00:06:12,960 --> 00:06:14,350
Oppure abbiamo una matrice e quindi ogni elemento nella matrice è un oggetto.

87
00:06:14,580 --> 00:06:19,840
E ognuno ha un nome e poi diciamo solo che il nome è Salmon Creek da qualche

88
00:06:19,950 --> 00:06:27,630
parte dove sono andato recentemente in campeggio e poi l'immagine e poi sarà un URL di un'immagine come HTP qualunque sia l'immagine di GWW.

89
00:06:28,040 --> 00:06:37,520
Eccoci.

90
00:06:37,560 --> 00:06:38,190
E poi avremo una serie di questi.

91
00:06:38,490 --> 00:06:40,560
Quindi potremmo avere 10 diversi campeggi 100 entro la fine del corso.

92
00:06:40,740 --> 00:06:45,570
Ognuno di loro ha un nome e un'immagine e alla fine avranno

93
00:06:45,690 --> 00:06:50,460
caratteristiche come la latitudine e la longitudine della città e la stagionalità

94
00:06:50,460 --> 00:06:57,780
della capacità dello stato di tutti questi diversi attributi, ma stiamo iniziando un nome e un'immagine semplici.

95
00:06:57,770 --> 00:06:59,950
Torniamo ad Apter Sì.

96
00:07:00,600 --> 00:07:02,110
uguale a un array.

97
00:07:02,310 --> 00:07:09,140
E quello che faremo è trovare quell'array e possiamo iniziare semplicemente facendolo qui fin qui lo chiameremo campeggi

98
00:07:09,240 --> 00:07:11,900
E poi all'interno della matrice e semplicemente

99
00:07:12,210 --> 00:07:17,740
formattare questo un po 'meglio mentre andiamo all'interno della matrice avremo alcuni oggetti di partenza.

100
00:07:17,740 --> 00:07:19,660
E il primo avrà un nome e io andrò con Semon Creek.

101
00:07:19,800 --> 00:07:25,590
Puoi semplicemente inventare qualcosa e avere un'immagine e tornerò a riempire le immagini.

102
00:07:26,000 --> 00:07:30,210
E poi il prossimo lo farà fare un altro

103
00:07:30,330 --> 00:07:38,940
sito che chiameremo per la collina dei Graniti e poi un'altra pattuglia chiamata capro delle capre di montagna.

104
00:07:38,940 --> 00:07:44,580
Tutto ok.

105
00:07:44,580 --> 00:07:45,110
Quindi tre campeggi tre nomi completamente romanzati e per immagini.

106
00:07:45,120 --> 00:07:48,960
In realtà userò alcune foto creative commons solo per evitare problemi.

107
00:07:48,960 --> 00:07:53,540
Questi non corrisponderanno a nessuno dei campeggi che

108
00:07:53,550 --> 00:07:57,690
ho visitato ma selezionerò solo alcune immagini qui.

109
00:07:57,690 --> 00:07:58,920
Andiamo con questo per iniziare.

110
00:07:59,070 --> 00:08:01,540
Quindi copierò l'immagine o tornerò qui e saranno le capre di montagna a riposare.

111
00:08:01,690 --> 00:08:07,550
Perchè no.

112
00:08:07,590 --> 00:08:08,340
E poi torneremo di nuovo e prenderò questo qui.

113
00:08:08,630 --> 00:08:13,160
Copia lui in RL e questo sarà Salmon Creek.

114
00:08:13,590 --> 00:08:17,800
E poi ne abbiamo bisogno ancora uno e prenderò solo questo.

115
00:08:18,300 --> 00:08:21,630
Ovviamente questo non è proprio un campeggio, ma non è questo il punto.

116
00:08:21,690 --> 00:08:26,180
Ti incoraggio a utilizzare i nomi di un vero campeggio nelle immagini dei campeggi reali se ti interessa.

117
00:08:26,340 --> 00:08:31,390
Se no, se odi il campeggio che è qualcosa a cui pensavo,

118
00:08:31,440 --> 00:08:36,120
temevo che questo potesse alienare alcune persone, ma se odi il

119
00:08:36,120 --> 00:08:41,540
campeggio, immagino che sia comprensibile, potresti facilmente cambiare questa applicazione in qualcos'altro.

120
00:08:41,550 --> 00:08:42,660
variabili che noi abbiamo.

121
00:08:42,750 --> 00:08:48,890
Una volta terminato, potresti trasformare in un'applicazione per eventi l'applicazione di un party in un sito di recensioni di ristoranti, ma ti consiglio di aspettare fino

122
00:08:49,010 --> 00:08:53,040
alla fine del corso per farlo in modo da non confonderti con le denominazioni e le diverse

123
00:08:53,040 --> 00:08:55,990
Campeggi di oggi Per ora campeggio falso

124
00:08:56,190 --> 00:09:03,180
di oggi e farà risparmiare assicurarsi che aggiungiamo o virgole tra i diversi elementi nella matrice.

125
00:09:03,170 --> 00:09:05,410
Eccoci e inizieremo con il

126
00:09:05,420 --> 00:09:12,410
rendering di un modello redstart render e si chiamerà campgrounds e non passeremo ancora i dati.

127
00:09:12,920 --> 00:09:15,170
Ci assicureremo che il modello funzioni correttamente.

128
00:09:15,170 --> 00:09:18,170
Ora abbiamo bisogno di fermare il server a sfiorare un nuovo file viste slash che il campeggio aumenta E. J. lo apriremo.

129
00:09:18,380 --> 00:09:28,380
noi e poi

130
00:09:28,380 --> 00:09:29,370
È così e qui aggiungeremo un H1.

131
00:09:31,370 --> 00:09:35,000
Questa è la pagina del campeggio e salva

132
00:09:35,030 --> 00:09:44,510
e assicuriamoci di vedere quella pagina quando avvieremo il server, possiamo aggiornarci e andiamo a tagliare i campeggi e ci arriveremo.

133
00:09:44,510 --> 00:09:52,850
Questa è la pagina dei campeggi.

134
00:09:52,850 --> 00:09:54,190
E mentre siamo qui sarebbe bello aggiungere alcuni battiti di ciglia.

135
00:09:54,440 --> 00:09:57,430
e devi andare al modello di prestito

136
00:09:57,470 --> 00:10:03,560
e in fondo a un tag ancorato all'attributo ref e l'ATF deve essere Slash campeggio.

137
00:10:03,560 --> 00:10:10,400
Quindi aggiungo un link alla pagina di destinazione che dice Visualizza tutti i campeggi e per farlo

138
00:10:10,400 --> 00:10:13,490
E ti dirò che tutti

139
00:10:13,820 --> 00:10:24,890
i campeggi e risparmi riavvia la vista di aggiornamento del server dei campeggi ora ci porta alla pagina del campeggio.

140
00:10:24,890 --> 00:10:26,610
Va bene, ora andiamo e assicurati

141
00:10:26,630 --> 00:10:32,400
di passare i dati attraverso il nostro campeggio al resto della chiamata di rendering e quindi possiamo scorrere tutto

142
00:10:32,400 --> 00:10:38,770
e visualizzare ogni immagine e ogni nome nel nostro modello inizierà andando ad aggiornarci e aggiungendo in questo secondo argomento qui

143
00:10:39,410 --> 00:10:45,800
che è un oggetto di tutti i dati che vogliamo passare e passeremo nei campeggi sotto il nome di campeggi.

144
00:10:45,800 --> 00:10:52,690
Quindi ricorda che questi sono i dati che stiamo passando e questo è il nome che vogliamo dargli.

145
00:10:52,700 --> 00:10:57,220
Potremmo chiamare ciò che volevamo, ma è comune vederli nominare la stessa cosa.

146
00:10:57,320 --> 00:11:00,950
Così salveremo ora e torneremo al nostro

147
00:11:01,160 --> 00:11:09,080
modello e inizieremo semplicemente a fare questo campeggio e se vediamo qualcosa sembrerà un oggetto oggetto.

148
00:11:09,080 --> 00:11:11,770
Se l'abbiamo fatto correttamente, sappiamo che abbiamo passato

149
00:11:11,810 --> 00:11:17,420
i dati attraverso il riavvio del server o l'aggiornamento di Rigaud di un array con tre oggetti all'interno.

150
00:11:17,910 --> 00:11:21,800
Quindi ora passiamo in rassegna e visualizziamo ciascun titolo o nome e immagine.

151
00:11:22,740 --> 00:11:26,840
Quindi terrò qui queste parentesi, ma mi sbarazzerò del segno di uguale e ne faremo una per ciascuna.

152
00:11:27,290 --> 00:11:32,020
poi quaggiù abbiamo bisogno di allegare questo anche a ciascuno di noi.

153
00:11:32,150 --> 00:11:41,270
Quindi questo sarà un campeggio per ognuno e poi passerà in quella funzione anonima il callback e lo chiameremo campeggio e faremo clic

154
00:11:41,270 --> 00:11:47,810
su entra qui e poi dobbiamo tornare indietro e assicurarci di aggiungere la chiusura corretta. parentesi e

155
00:11:47,810 --> 00:11:55,010
OK.

156
00:11:56,240 --> 00:11:56,880
In questo modo

157
00:11:57,080 --> 00:12:01,820
dovremmo passare attraverso i campeggi e poi cosa vogliamo fare per ognuno di essi, per prima cosa visualizzeremo il nome.

158
00:12:01,820 --> 00:12:02,850
Quindi inizieremo con un alleato.

159
00:12:03,080 --> 00:12:05,190
Perchè no.

160
00:12:05,270 --> 00:12:05,890
E faremo il nostro E. J. facile vedere cosa sta succedendo.

161
00:12:06,050 --> 00:12:13,520
s con il segno di uguale e tutti creano uno spazio in modo che sia un po 'più

162
00:12:13,520 --> 00:12:14,700
E stiamo andando a mostrarci all'interno del campeggio Y.

163
00:12:14,900 --> 00:12:18,190
Dot name e salva tutto lo spazio che è fuori.

164
00:12:18,340 --> 00:12:22,750
Ora cariciamo la pagina e aggiorniamo questo e otteniamo tre nomi di campeggi.

165
00:12:23,120 --> 00:12:28,460
L'ultima cosa che voglio fare è assicurarsi di mostrare le immagini.

166
00:12:28,460 --> 00:12:31,880
Quindi torneremo qui e piuttosto che

167
00:12:31,880 --> 00:12:39,470
un alleato cambiamo questo in modo che abbiamo un tag div per ogni campeggio.

168
00:12:39,470 --> 00:12:40,290
E nel tag div verrà visualizzata una h.

169
00:12:40,400 --> 00:12:44,390
Facciamo un 4 con il nome del campeggio e poi sotto verrà inserito un tag immagine.

170
00:12:44,390 --> 00:12:52,530
E quello che dobbiamo fare è dare all'immagine una fonte e dentro le virgolette

171
00:12:53,450 --> 00:13:00,950
piuttosto che una cosa come questa, qualunque cosa tu sia ELAS, metti

172
00:13:01,490 --> 00:13:08,120
l'immagine dal campeggio e non possiamo semplicemente fare quell'immagine al campeggio.

173
00:13:08,300 --> 00:13:09,160
Abbiamo bisogno di quegli Ejay come parentesi.

174
00:13:09,200 --> 00:13:11,030
Quindi dobbiamo farlo all'interno delle virgolette

175
00:13:11,330 --> 00:13:16,540
che all'inizio sono un po 'confuse per alcuni dei miei studenti, perché il campeggio quell'immagine è già una stringa.

176
00:13:16,550 --> 00:13:19,250
nel modello, quelle citazioni non arrivano.

177
00:13:19,700 --> 00:13:25,160
E puoi vedere qui, ma ricorda che quando prendiamo questo e lo aggiungiamo

178
00:13:25,160 --> 00:13:26,820
È appena aggiunto come testo.

179
00:13:26,900 --> 00:13:28,350
Quindi sembrerebbe che questo colon HTP tagli qualunque cosa abbiamo bisogno di virgolette attorno ad esso.

180
00:13:28,430 --> 00:13:33,800
Quindi dobbiamo assicurarci di aggiungere i tag Ejaz all'interno delle virgolette proprio così.

181
00:13:33,980 --> 00:13:39,080
OK.

182
00:13:39,410 --> 00:13:39,770
Quindi quello che vogliamo fare è l'immagine del campeggio, assicurati di usare l'immagine.

183
00:13:39,800 --> 00:13:45,800
Eccoci.

184
00:13:45,800 --> 00:13:46,540
Io sono A-G e abbiamo scritto qui esattamente nello stesso modo e farò ripartire il server.

185
00:13:46,760 --> 00:13:54,670
Torniamo indietro e aggiorniamo la pagina e otteniamo i tre campeggi con le tre immagini.

186
00:13:54,980 --> 00:14:01,650
Va bene, grande

187
00:14:01,670 --> 00:14:02,300
Quindi questo è tutto quello che voglio fare in questo video è stato ottenere la struttura di base impostata dei nostri due percorsi.

188
00:14:02,300 --> 00:14:07,270
Torniamo indietro per assicurarci di fare tutte le cose che abbiamo deciso di fare.

189
00:14:07,280 --> 00:14:10,060
Quindi alla pagina di destinazione sì, l'abbiamo fatto nella pagina del campeggio che elenca tutti i campeggi.

190
00:14:10,340 --> 00:14:15,740
Abbiamo anche fatto in modo che ogni campeggio avesse un nome e un'immagine.

191
00:14:15,860 --> 00:14:19,390
Tutto ok

192
00:14:19,400 --> 00:14:19,760