1
00:00:00,460 --> 00:00:05,250
Bem, volte neste vídeo, vamos começar no aplicativo de campo de Yelp para o qual vamos

2
00:00:05,250 --> 00:00:07,010
trabalhar para o resto deste curso.

3
00:00:07,050 --> 00:00:09,280
Começamos por começar a configuração básica.

4
00:00:09,280 --> 00:00:12,720
Começando o aplicativo expresso e tendo nossas primeiras rotas e modelos.

5
00:00:12,720 --> 00:00:17,490
Mas antes de falar sobre isso, eu só quero explicar o fluxo de trabalho aqui e

6
00:00:17,490 --> 00:00:19,890
como isso funcionará, pois adicionamos continuamente recursos diferentes.

7
00:00:19,950 --> 00:00:25,080
Quero que você consiga ver o código em qualquer momento, não quero que você veja apenas a solução final.

8
00:00:25,380 --> 00:00:28,370
Então, o que eu vou fazer é trabalhar em diferentes pastas.

9
00:00:28,470 --> 00:00:33,610
Então eu tenho um diretório de acampamento yelp e, em vez do campo de Yelp, vou adicionar versões diferentes.

10
00:00:33,720 --> 00:00:34,970
Então você não precisa fazer isso.

11
00:00:35,040 --> 00:00:39,780
Você poderá adicionar continuamente a uma versão você mesmo, se quiser acompanhar e

12
00:00:39,780 --> 00:00:40,710
fazer versões diferentes.

13
00:00:40,710 --> 00:00:45,570
Sempre vou indicar qual a versão em que estamos, mas o objetivo é que, se você quiser que olhe

14
00:00:45,570 --> 00:00:51,570
para trás o que adicionei entre a versão 2 e a versão 3, você poderia abrir os diretórios da versão 2 e da

15
00:00:51,570 --> 00:00:52,580
versão 3 e compará-los.

16
00:00:52,960 --> 00:00:55,770
OK, agora que está fora do caminho, vamos começar aqui.

17
00:00:55,830 --> 00:01:01,950
O que nós vamos fazer é configurar o aplicativo básico irá instalar o Express e cada Sim, nós vamos começar

18
00:01:01,950 --> 00:01:05,050
o diretório de visualizações e depois adicionaremos duas rotas diferentes.

19
00:01:05,130 --> 00:01:09,660
Então, vamos ter uma página inicial, basicamente, como uma bem-vindo ao campo de Yelp.

20
00:01:09,840 --> 00:01:11,750
Aqui está um pouco sobre o que fazemos.

21
00:01:11,880 --> 00:01:12,750
Aqui está um botão de registro.

22
00:01:12,750 --> 00:01:15,760
Aqui está um link de contato que na verdade não funcionará ainda.

23
00:01:15,840 --> 00:01:21,060
E então, a partir daí, vamos criar a página de campgrounds que será a página principal do nosso aplicativo que listará

24
00:01:21,270 --> 00:01:25,410
todos os campgrounds em nosso banco de dados e ainda não temos um banco de dados.

25
00:01:25,410 --> 00:01:30,600
Então, vai ser uma série de campground, assim como fizemos no último vídeo com os amigos onde tínhamos

26
00:01:30,660 --> 00:01:31,930
uma série de amigos.

27
00:01:32,010 --> 00:01:38,100
Muito em breve, estaremos migrando para um novo banco de dados por enquanto, um acampamento só vai

28
00:01:38,100 --> 00:01:39,530
ter duas informações diferentes.

29
00:01:39,840 --> 00:01:44,880
No final do curso, os acampamentos terão de 10 a 15 peças diferentes, mas, por enquanto, é apenas

30
00:01:45,180 --> 00:01:51,120
um nome como o riacho de salmão ou o ponto de Dewey, seja qual for o nome do nosso acampamento e

31
00:01:51,120 --> 00:01:55,000
depois teremos uma imagem que podemos exibir e a imagem será apenas lú.

32
00:01:55,380 --> 00:01:56,460
Então vamos continuar.

33
00:01:56,760 --> 00:02:04,110
Vou começar por executar o NPM nele e então vamos entrar e entrar novamente.

34
00:02:04,380 --> 00:02:07,810
Nós chamaremos isso da câmera v1.

35
00:02:08,640 --> 00:02:11,990
Eu vou fazer o apt, como meu ponto de entrada.

36
00:02:12,480 --> 00:02:13,790
E nós vamos lá.

37
00:02:14,060 --> 00:02:17,670
Autor e pressione enter.

38
00:02:17,700 --> 00:02:18,550
Mais uma vez.

39
00:02:18,780 --> 00:02:19,300
ESTÁ BEM.

40
00:02:19,500 --> 00:02:23,920
Agora vamos executar a instalação do NPM Express e sim.

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

42
00:02:25,410 --> 00:02:29,580
Ainda não mostrei isso, mas esta é uma maneira muito mais fácil se você

43
00:02:29,580 --> 00:02:33,540
quiser instalar vários pacotes de uma só vez, basta separá-los por um espaço.

44
00:02:35,820 --> 00:02:43,300
E se você olhar para o pacote Jason, você pode ver que tem SJS e expressar.

45
00:02:44,160 --> 00:02:45,590
Então, agora vamos criar o aplicativo.

46
00:02:45,680 --> 00:02:57,840
Sim, abra isso e dentro daqui adicione a nossa importação básica expressa, que você deveria ser bastante

47
00:02:57,840 --> 00:03:00,700
confortável, agora exige Express.

48
00:03:01,050 --> 00:03:10,700
executada e, em seguida, irá pular para baixo e fazer a opt out ouvir, que você também deve estar bastante familiarizado com o processo agora.

49
00:03:10,700 --> 00:03:15,570
E, em seguida, a variável do aplicativo é igual a função expressa sendo

50
00:03:15,610 --> 00:03:22,980
O processo de porta Ian VI que o EMV IP e o retorno de

51
00:03:25,680 --> 00:03:34,510
chamada e, aqui, vou fazer um registro consular que diz que o campo de Yelp foi iniciado.

52
00:03:35,100 --> 00:03:42,000
Vamos fazer o servidor do acampamento assim e salvar.

53
00:03:42,320 --> 00:03:45,510
E agora vamos voltar e começar adicionando nossa página de destino.

54
00:03:45,720 --> 00:03:49,210
E, como a maioria das aplicações, a página de destino está no caminho certo.

55
00:03:49,440 --> 00:03:52,770
salvaremos e então vamos começar O servidor assegura-se de

56
00:03:58,770 --> 00:04:04,410
que o servidor do acampamento tenha começado e depois voltem e atualizemos nosso caminho de rota.

57
00:04:04,410 --> 00:04:13,080
Então, vamos adicionar um aplicativo que começará o flash e nós começaremos com apenas um envio do redstart para garantir que as coisas funcionem

58
00:04:13,080 --> 00:04:18,010
bem e nós simplesmente enviaremos esta será a página de destino em breve e

59
00:04:18,300 --> 00:04:18,700
ESTÁ BEM.

60
00:04:18,720 --> 00:04:21,690
E nós recebemos a resposta que é tudo o que estamos procurando.

61
00:04:21,810 --> 00:04:28,230
Agora vamos em frente e configuremos nossos modelos, então precisamos fazer um diretório de notícias que crie

62
00:04:28,830 --> 00:04:36,680
visualizações de diretório e criaremos um modelo chamado de desembarque que cada um de nós dentro do diretório de visualizações desembarque.

63
00:04:36,810 --> 00:04:39,080
Sim, vamos lá.

64
00:04:39,240 --> 00:04:47,580
E então vamos abrir esse recurso de barra-ônibus e nós vamos colocar uma marcação muito simples aqui.

65
00:04:47,580 --> 00:04:54,030
Landing Page e depois é feito aqui podemos colocar um parágrafo.

66
00:04:54,030 --> 00:04:56,340
Bem-vindo ao acampamento Oprah.

67
00:04:56,340 --> 00:05:00,720
E, claro, isso tudo será mudado e será designado de forma muito diferente até o final do curso.

68
00:05:01,110 --> 00:05:03,750
Mas, por enquanto, só queremos ter certeza de que as coisas estão funcionando.

69
00:05:03,810 --> 00:05:05,110
Então vamos voltar para a APT.

70
00:05:05,120 --> 00:05:05,770
Sim.

71
00:05:06,030 --> 00:05:12,470
E a primeira coisa que faremos é mudar isso, de modo que seja um pouso de renderização de repouso e deixaremos o

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

73
00:05:13,000 --> 00:05:13,560
Sim.

74
00:05:13,770 --> 00:05:23,490
E para fazer isso, preciso adicionar no mecanismo de exibição do conjunto de aplicativos para ser J. S. E então não precisamos escrever.

75
00:05:23,880 --> 00:05:25,100
E. J. como aqui e salvaremos o servidor novamente.

76
00:05:25,120 --> 00:05:30,630
James atualiza e nós recebemos nosso modelo de página de destino.

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

78
00:05:36,180 --> 00:05:37,400
Em seguida, vamos trabalhar na rota do acampamento.

79
00:05:37,410 --> 00:05:39,880
Então, vamos ter um aplicativo para obter e

80
00:05:40,110 --> 00:05:46,470
o seu auroral deve ser acampamentos de barracão e isso deve mostrar todos os campgrounds que temos que agora não temos nada.

81
00:05:46,470 --> 00:05:50,910
Mas, em breve, pediremos e responderemos como esta, salvar.

82
00:05:51,030 --> 00:05:56,820
E então precisamos definir o conjunto de campgrounds que lembra que só será uma matriz temporariamente.

83
00:05:57,060 --> 00:06:02,760
A próxima grande mudança que você vai fazer é adicionar um banco de dados e ter nossos campgrounds salvos no

84
00:06:02,750 --> 00:06:07,500
banco de dados agora é uma matriz e cada acampamento tem um nome e uma imagem.

85
00:06:07,500 --> 00:06:12,960
Então, vai ficar assim.

86
00:06:12,960 --> 00:06:14,350
Ou temos uma matriz e, em seguida, cada item na matriz é um objeto.

87
00:06:14,580 --> 00:06:19,840
E cada um tem um nome e então digamos que o nome é Salmon Creek, em algum lugar

88
00:06:19,950 --> 00:06:27,630
eu fui acampar recentemente e, em seguida, a imagem e então será uma URL de uma imagem como a HTP seja qual for a imagem GWW dotcom.

89
00:06:28,040 --> 00:06:37,520
Aqui vamos nós.

90
00:06:37,560 --> 00:06:38,190
E então teremos uma série destes.

91
00:06:38,490 --> 00:06:40,560
Então, podemos ter 10 campgrounds diferentes 100 no final do curso.

92
00:06:40,740 --> 00:06:45,570
E cada um deles tem um nome e uma imagem e,

93
00:06:45,690 --> 00:06:50,460
eventualmente, eles terão coisas como Latitude e Longitude da cidade e

94
00:06:50,460 --> 00:06:57,780
capacidade de endereço do estado sazonalidade todos esses atributos diferentes, mas estamos começando simples nome e imagem.

95
00:06:57,770 --> 00:06:59,950
Vamos voltar para Apter Sim.

96
00:07:00,600 --> 00:07:02,110
é igual a uma matriz.

97
00:07:02,310 --> 00:07:09,140
E o que vamos fazer é encontrar essa matriz e podemos começar apenas fazendo isso aqui até agora, chamamos de campgrounds,

98
00:07:09,240 --> 00:07:11,900
E, em seguida, dentro da matriz e

99
00:07:12,210 --> 00:07:17,740
apenas formatar isso um pouco melhor à medida que entramos na matriz, teremos alguns objetos iniciantes.

100
00:07:17,740 --> 00:07:19,660
E o primeiro terá o nome e irei com o Semon.

101
00:07:19,800 --> 00:07:25,590
Você pode simplesmente fazer qualquer coisa e terá imagem e vou voltar e preencher as imagens.

102
00:07:26,000 --> 00:07:30,210
E, em seguida, o próximo fará isso com outro

103
00:07:30,330 --> 00:07:38,940
site, vamos chamá-lo para a colina de Granites e, em seguida, mais uma patrulha chamar cabras de montanha peito.

104
00:07:38,940 --> 00:07:44,580
Tudo bem.

105
00:07:44,580 --> 00:07:45,110
Então, três locais de acampamento três nomes totalmente ficcionais e para imagens.

106
00:07:45,120 --> 00:07:48,960
Na verdade, vou usar algumas fotos comuns criativas para que eu não corra para nenhum problema.

107
00:07:48,960 --> 00:07:53,540
Estes não vão corresponder a nenhum dos acampamentos que

108
00:07:53,550 --> 00:07:57,690
eu realmente visitei, mas vou selecionar algumas imagens aqui.

109
00:07:57,690 --> 00:07:58,920
Vamos com este para começar.

110
00:07:59,070 --> 00:08:01,540
Então eu vou copiar a imagem que você ou eu voltarei aqui e isso será descanso de cabras montanhosas.

111
00:08:01,690 --> 00:08:07,550
Por que não.

112
00:08:07,590 --> 00:08:08,340
E então vamos voltar novamente e eu vou pegar esse aqui.

113
00:08:08,630 --> 00:08:13,160
Copie-o para RL e este será o Salmon Creek.

114
00:08:13,590 --> 00:08:17,800
E então precisamos de mais um e eu vou pegar esse.

115
00:08:18,300 --> 00:08:21,630
Claro que isso não é realmente um acampamento, mas isso não está além do ponto aqui.

116
00:08:21,690 --> 00:08:26,180
Eu encorajo você a usar nomes reais de campismo em imagens reais do acampamento se você se importar.

117
00:08:26,340 --> 00:08:31,390
Caso contrário, se você odeia acampar, algo que pensei em eu me

118
00:08:31,440 --> 00:08:36,120
preocupei com isso, isso poderia alienar algumas pessoas, mas se você

119
00:08:36,120 --> 00:08:41,540
odiar o acampar, acho que você pode facilmente mudar esse aplicativo para outra coisa.

120
00:08:41,550 --> 00:08:42,660
e variáveis ​​diferentes que temos.

121
00:08:42,750 --> 00:08:48,890
Uma vez que terminamos, você poderia transformar em um aplicativo de eventos uma aplicação de festa, um site de revisão de restaurantes, qualquer coisa assim, mas eu recomendo

122
00:08:49,010 --> 00:08:53,040
que você aguarde até o final do Curso para fazer isso para que você não se confunda com nomeações

123
00:08:53,040 --> 00:08:55,990
Então, acampamento Hoje, por agora, acampamentos

124
00:08:56,190 --> 00:09:03,180
falsos e vai economizar, certifique-se de adicionar ou vírgulas entre os diferentes elementos da matriz.

125
00:09:03,170 --> 00:09:05,410
Lá, nós vamos e vamos começar por

126
00:09:05,420 --> 00:09:12,410
renderizar um modelo de renderização do redstart e será chamado de campgrounds e não vamos passar os dados até agora.

127
00:09:12,920 --> 00:09:15,170
Nós apenas vamos ter certeza de que o modelo está funcionando corretamente.

128
00:09:15,170 --> 00:09:18,170
Agora precisamos parar o servidor tocar um novo arquivo exibe barramentos de campground ups que E. J. abriremos isso.

129
00:09:18,380 --> 00:09:28,380
nós e então

130
00:09:28,380 --> 00:09:29,370
É assim e aqui vamos adicionar um H1.

131
00:09:31,370 --> 00:09:35,000
Esta é a página do acampamento e salve e

132
00:09:35,030 --> 00:09:44,510
vamos nos certificar de que vemos essa página quando começamos o servidor, podemos atualizar e vamos acampar os acampamentos e nós conseguimos.

133
00:09:44,510 --> 00:09:52,850
Esta é a página dos campgrounds.

134
00:09:52,850 --> 00:09:54,190
E enquanto estivermos aqui, seria bom adicionar alguns piscar de olhos.

135
00:09:54,440 --> 00:09:57,430
e precisa ir para o modelo de empréstimo e

136
00:09:57,470 --> 00:10:03,560
apenas na parte inferior de uma tag ancorada no atributo ref e o ATF precisa ser acampar acampamento.

137
00:10:03,560 --> 00:10:10,400
Então eu vou adicionar um link para a página de destino que diz: Veja todos os campgrounds e faça isso

138
00:10:10,400 --> 00:10:13,490
E eu vou apenas dizer que

139
00:10:13,820 --> 00:10:24,890
todos os campgrounds e salvar o reinício do servidor atualizar a visão dos acampamentos agora nos leva à página do acampamento.

140
00:10:24,890 --> 00:10:26,610
Tudo bem, então, vamos agora e

141
00:10:26,630 --> 00:10:32,400
certifique-se de que nós passamos os dados através do nosso acampamento para o resto da chamada de renderização e,

142
00:10:32,400 --> 00:10:38,770
então, podemos percorrer tudo e exibir cada imagem e cada nome no nosso modelo começará por atualizar-nos e adicionando nesse segundo

143
00:10:39,410 --> 00:10:45,800
argumento aqui que é um objeto de todos os dados que queremos passar e passamos em campgrounds sob o nome de campgrounds.

144
00:10:45,800 --> 00:10:52,690
Então lembre-se que este é o dado que passamos e este é o nome que queremos dar.

145
00:10:52,700 --> 00:10:57,220
Poderíamos chamar isso de tudo o que queríamos, mas é comum vê-los nomear o mesmo.

146
00:10:57,320 --> 00:11:00,950
Então, vamos economizar agora e voltar ao

147
00:11:01,160 --> 00:11:09,080
nosso modelo e começaremos apenas fazendo esses campgrounds e, se vermos algo, parecerá objeto objeto.

148
00:11:09,080 --> 00:11:11,770
Se o fizemos corretamente, sabemos que passamos os

149
00:11:11,810 --> 00:11:17,420
dados por meio de reiniciar o servidor ou atualizar Rigaud uma matriz com três objetos dentro.

150
00:11:17,910 --> 00:11:21,800
Então, vejamos e exibamos cada título ou cada nome e imagem.

151
00:11:22,740 --> 00:11:26,840
Então vou manter esses colchetes aqui, mas vou livrar-me do sinal de igualdade e faremos um para cada um.

152
00:11:27,290 --> 00:11:32,020
nós colchetes e, em seguida, basta aqui, precisamos incluir isso com cada um também.

153
00:11:32,150 --> 00:11:41,270
Então, isso será um acampamento para cada um e depois passará na função anônima o retorno de chamada e nós chamaremos de campground e vamos

154
00:11:41,270 --> 00:11:47,810
entrar e entrar aqui e então precisamos voltar e certificar-se de que adicionamos o encerramento correto de Ejay

155
00:11:47,810 --> 00:11:55,010
ESTÁ BEM.

156
00:11:56,240 --> 00:11:56,880
Então, isso

157
00:11:57,080 --> 00:12:01,820
deve seguir os campgrounds e, então, o que queremos fazer para cada um, vamos mostrar o nome primeiro.

158
00:12:01,820 --> 00:12:02,850
Então vamos começar com um aliado.

159
00:12:03,080 --> 00:12:05,190
Por que não.

160
00:12:05,270 --> 00:12:05,890
E nós vamos fazer o nosso E. J. ver o que está acontecendo.

161
00:12:06,050 --> 00:12:13,520
s com o sinal de igualdade e todos fazem algum espaço para que seja um pouco mais fácil

162
00:12:13,520 --> 00:12:14,700
E nós vamos exibir dentro do acampamento Y.

163
00:12:14,900 --> 00:12:18,190
Dot nome e salvar todo o espaço que está fora.

164
00:12:18,340 --> 00:12:22,750
Agora vamos carregar a página e atualizar isso e recebemos três nomes de campground.

165
00:12:23,120 --> 00:12:28,460
A última coisa que eu quero fazer é garantir que exibamos as imagens.

166
00:12:28,460 --> 00:12:31,880
Então, vamos voltar aqui e, ao invés

167
00:12:31,880 --> 00:12:39,470
de um aliado, vamos mudar isso para que possamos ter uma etiqueta div para cada acampamento.

168
00:12:39,470 --> 00:12:40,290
E na etiqueta div exibirá uma h.

169
00:12:40,400 --> 00:12:44,390
Vamos fazer um 4 com o nome do acampamento e, em seguida, ele colocará uma marca de imagem.

170
00:12:44,390 --> 00:12:52,530
E o que precisamos fazer é dar à imagem uma fonte e dentro das citações,

171
00:12:53,450 --> 00:13:00,950
em vez de você, como isso, seja o que você for ELAS, vai colocar

172
00:13:01,490 --> 00:13:08,120
a imagem do acampamento e não podemos simplesmente fazer o acampamento dessa imagem.

173
00:13:08,300 --> 00:13:09,160
Nós precisamos desses Ejay como colchetes.

174
00:13:09,200 --> 00:13:11,030
Então, temos que fazê-lo dentro das citações, o

175
00:13:11,330 --> 00:13:16,540
que é um pouco confuso para alguns dos meus alunos no início porque o acampamento que a imagem já é uma string.

176
00:13:16,550 --> 00:13:19,250
adicione-o ao modelo, essas citações não acompanham.

177
00:13:19,700 --> 00:13:25,160
E você pode ver aqui, mas lembre-se de que, quando tomarmos isso e

178
00:13:25,160 --> 00:13:26,820
É apenas adicionado como texto.

179
00:13:26,900 --> 00:13:28,350
Então, ficaria como essa barra do quadril HTP o que precisamos de cotações em torno disso.

180
00:13:28,430 --> 00:13:33,800
Então, temos que nos certificar de que estamos adicionando as tags Ejaz dentro das citações assim.

181
00:13:33,980 --> 00:13:39,080
ESTÁ BEM.

182
00:13:39,410 --> 00:13:39,770
Então, o que queremos fazer é a imagem do acampamento, certifique-se de usar a imagem.

183
00:13:39,800 --> 00:13:45,800
Aqui vamos nós.

184
00:13:45,800 --> 00:13:46,540
Eu sou A-G e nós temos que soletrou aqui exatamente da mesma maneira e vou parar o servidor reiniciado.

185
00:13:46,760 --> 00:13:54,670
Vamos voltar e atualizar a página e nós conseguimos os três campgrounds com as três imagens.

186
00:13:54,980 --> 00:14:01,650
Tudo bem, ótimo.

187
00:14:01,670 --> 00:14:02,300
Então, isso é tudo o que eu quero fazer neste vídeo foi obter a estrutura básica configurada de nossas duas rotas.

188
00:14:02,300 --> 00:14:07,270
Voltemos para garantir que fizemos todas as coisas que pretendemos fazer.

189
00:14:07,280 --> 00:14:10,060
Então, na página de destino, sim, fizemos isso na página do acampamento que lista todo o acampamento.

190
00:14:10,340 --> 00:14:15,740
Nós também fizemos que cada acampamento tenha um nome e uma imagem.

191
00:14:15,860 --> 00:14:19,390
Tudo bem

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