1
00:00:00,460 --> 00:00:05,250
Bueno, regresen en este video comenzaremos en la aplicación de campamento de Yelp en la que vamos a

2
00:00:05,250 --> 00:00:07,010
trabajar durante el resto de este curso.

3
00:00:07,050 --> 00:00:09,280
Comenzaremos por poner en marcha la configuración básica.

4
00:00:09,280 --> 00:00:12,720
Obteniendo la aplicación express y teniendo nuestras primeras rutas y plantillas.

5
00:00:12,720 --> 00:00:17,490
Pero antes de hablar de eso, solo quiero explicar el flujo de trabajo aquí y

6
00:00:17,490 --> 00:00:19,890
cómo funcionará, ya que continuamente agregamos características diferentes.

7
00:00:19,950 --> 00:00:25,080
Quiero que puedas ver el código en cualquier momento. No quiero que veas la solución final.

8
00:00:25,380 --> 00:00:28,370
Entonces, lo que voy a hacer es trabajar en diferentes carpetas.

9
00:00:28,470 --> 00:00:33,610
Así que tengo un directorio de campamento de yelp y luego, en lugar del campamento de Yelp, voy a agregar diferentes versiones.

10
00:00:33,720 --> 00:00:34,970
Entonces no tienes que hacer esto.

11
00:00:35,040 --> 00:00:39,780
Podrá agregar continuamente a una versión usted mismo si desea seguir y hacer

12
00:00:39,780 --> 00:00:40,710
diferentes versiones.

13
00:00:40,710 --> 00:00:45,570
Siempre señalaré en qué versión estamos, pero el objetivo es que, si desea que revise lo

14
00:00:45,570 --> 00:00:51,570
que agregué entre la versión 2 y la versión 3, podría abrir los directorios de la versión 2 y la

15
00:00:51,570 --> 00:00:52,580
versión 3 y compararlos.

16
00:00:52,960 --> 00:00:55,770
OK ahora que eso está fuera del camino, empecemos aquí.

17
00:00:55,830 --> 00:01:01,950
Lo que vamos a hacer es configurar la aplicación básica que instalará Express y cada Sí, obtendremos el directorio

18
00:01:01,950 --> 00:01:05,050
de las vistas y luego agregaremos dos rutas diferentes.

19
00:01:05,130 --> 00:01:09,660
Así que vamos a tener una página de inicio básicamente como una bienvenida al campamento de Yelp.

20
00:01:09,840 --> 00:01:11,750
Aquí hay una pequeña propaganda sobre lo que hacemos.

21
00:01:11,880 --> 00:01:12,750
Aquí hay un botón de registro.

22
00:01:12,750 --> 00:01:15,760
Aquí hay un enlace de contacto que en realidad no funcionará todavía.

23
00:01:15,840 --> 00:01:21,060
Y a partir de ahí vamos a crear la página de campings que será la página principal de nuestra aplicación que

24
00:01:21,270 --> 00:01:25,410
enumerará todos los campings en nuestra base de datos y todavía no tenemos una base de datos.

25
00:01:25,410 --> 00:01:30,600
Así que va a ser una selección de campamentos tal como lo hicimos en el último video con los amigos, donde tuvimos

26
00:01:30,660 --> 00:01:31,930
una gran variedad de amigos.

27
00:01:32,010 --> 00:01:38,100
Muy pronto migraremos a una nueva base de datos porque ahora un camping solo tendrá dos

28
00:01:38,100 --> 00:01:39,530
tipos de información diferentes.

29
00:01:39,840 --> 00:01:44,880
Al final del curso, los campamentos tendrán de 10 a 15 piezas diferentes, pero por ahora solo se trata

30
00:01:45,180 --> 00:01:51,120
de un nombre como salmón arroyo o punto de Dewey o cualquiera que sea el nombre de nuestro campamento y luego vamos

31
00:01:51,120 --> 00:01:55,000
a tener una imagen que podemos mostrar y la imagen solo será aur l.

32
00:01:55,380 --> 00:01:56,460
Así que empecemos.

33
00:01:56,760 --> 00:02:04,110
Comenzaré ejecutando NPM en él y luego presionaré ingresar aquí e ingresar nuevamente.

34
00:02:04,380 --> 00:02:07,810
Simplemente llamaremos a esto la cámara v1.

35
00:02:08,640 --> 00:02:11,990
Haré apt como mi punto de entrada.

36
00:02:12,480 --> 00:02:13,790
Y ahí vamos.

37
00:02:14,060 --> 00:02:17,670
Autor y presionar enter.

38
00:02:17,700 --> 00:02:18,550
Una vez más.

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

40
00:02:19,500 --> 00:02:23,920
Ahora ejecutemos NPM instale Express y sí.

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

42
00:02:25,410 --> 00:02:29,580
Todavía no te he mostrado esto, pero esta es una forma mucho más sencilla

43
00:02:29,580 --> 00:02:33,540
si deseas instalar varios paquetes a la vez, solo los separa por un espacio.

44
00:02:35,820 --> 00:02:43,300
Y si miras el código auxiliar del paquete Jason puedes ver que tiene SJS y express.

45
00:02:44,160 --> 00:02:45,590
Así que ahora vamos a crear la aplicación.

46
00:02:45,680 --> 00:02:57,840
Sí, y abre eso arriba y dentro de aquí, agrega nuestra importación express básica con la que deberías estar

47
00:02:57,840 --> 00:03:00,700
bastante cómodo, ahora requiere Express.

48
00:03:01,050 --> 00:03:10,700
express que se está ejecutando y luego saltará y escuchará la opción de exclusión, con la que también debería estar bastante familiarizado con el proceso.

49
00:03:10,700 --> 00:03:15,570
Y luego la variable de la aplicación es igual a la función

50
00:03:15,610 --> 00:03:22,980
El proceso de puerto Ian VI que EMV IP y la devolución de llamada

51
00:03:25,680 --> 00:03:34,510
y aquí voy a hacer un registro consular que dice que el campamento de Yelp se inició.

52
00:03:35,100 --> 00:03:42,000
Hagamos el servidor de campamento así como así y ahorremos.

53
00:03:42,320 --> 00:03:45,510
Y ahora regresemos y comencemos agregando nuestra página de inicio.

54
00:03:45,720 --> 00:03:49,210
Y, como la mayoría de las aplicaciones, la página de destino está en el camino correcto.

55
00:03:49,440 --> 00:03:52,770
y luego comenzaremos el servidor se asegura de que

56
00:03:58,770 --> 00:04:04,410
hayamos comenzado el servidor del campamento y luego volvemos y solo actualizamos nuestra ruta de ruta.

57
00:04:04,410 --> 00:04:13,080
Así que solo vamos a agregar una aplicación que reciba flash y comenzaremos con solo un inicio de redstart para asegurarnos de que las cosas

58
00:04:13,080 --> 00:04:18,010
funcionen bien y enviaremos esta será la página de destino próximamente y la guardaremos,

59
00:04:18,300 --> 00:04:18,700
DE ACUERDO.

60
00:04:18,720 --> 00:04:21,690
Y obtenemos la respuesta que es todo lo que estamos buscando.

61
00:04:21,810 --> 00:04:28,230
Ahora vamos a configurar nuestras plantillas, así que tenemos que crear un directorio de noticias que haga

62
00:04:28,830 --> 00:04:36,680
vistas de directorio y crearemos una plantilla llamada aterrizaje que cada uno de nosotros dentro del directorio de vistas aterrizará.

63
00:04:36,810 --> 00:04:39,080
Si, ahí vamos.

64
00:04:39,240 --> 00:04:47,580
Y luego abriremos ese uso de barra de corte y pondremos un marcado muy simple aquí.

65
00:04:47,580 --> 00:04:54,030
Página de destino y luego hecho aquí podemos poner un párrafo.

66
00:04:54,030 --> 00:04:56,340
Bienvenido al campamento de Oprah.

67
00:04:56,340 --> 00:05:00,720
Y, por supuesto, todo esto se cambiará y tendrá un estilo muy diferente al final del curso.

68
00:05:01,110 --> 00:05:03,750
Pero por ahora solo queremos asegurarnos de que las cosas funcionen.

69
00:05:03,810 --> 00:05:05,110
Entonces volvamos a APT.

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

71
00:05:06,030 --> 00:05:12,470
Y lo primero que haremos será cambiar esto para que sea un reposo que rinda y dejaremos el

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
Y para hacer eso, necesito agregar el motor de vista del conjunto de aplicaciones para que sea J. S. Y luego no tenemos que escribir

75
00:05:23,880 --> 00:05:25,100
MI. J. como aquí y vamos a guardar reiniciar el servidor.

76
00:05:25,120 --> 00:05:30,630
James actualiza y obtenemos nuestra plantilla de página de destino.

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

78
00:05:36,180 --> 00:05:37,400
A continuación, trabajemos en la ruta del campamento.

79
00:05:37,410 --> 00:05:39,880
Así que vamos a tener una aplicación para obtener y

80
00:05:40,110 --> 00:05:46,470
tu auroral debería ser un campamento de corte y esto debería mostrar todos los campamentos que tenemos, que en este momento no tenemos nada.

81
00:05:46,470 --> 00:05:50,910
Pero en breve solicitaremos y responderemos de la misma manera.

82
00:05:51,030 --> 00:05:56,820
Y luego tenemos que definir la matriz de campgrounds que recuerde que solo será una matriz temporalmente.

83
00:05:57,060 --> 00:06:02,760
El siguiente gran cambio que va a hacer es agregar una base de datos y hacer que nuestros campamentos se guarden en

84
00:06:02,750 --> 00:06:07,500
la base de datos, por ahora es una matriz y cada campamento tiene un nombre y una imagen.

85
00:06:07,500 --> 00:06:12,960
Entonces se verá así.

86
00:06:12,960 --> 00:06:14,350
O tenemos una matriz y luego cada elemento de la matriz es un objeto.

87
00:06:14,580 --> 00:06:19,840
Y cada uno tiene un nombre y luego digamos que el nombre es Salmon Creek, en algún

88
00:06:19,950 --> 00:06:27,630
lugar acabo de acampar recientemente y luego la imagen y luego será una URL de una imagen como HTP, cualquiera que sea la imagen GWW puntocom.

89
00:06:28,040 --> 00:06:37,520
Aquí vamos.

90
00:06:37,560 --> 00:06:38,190
Y luego tendremos una variedad de estos.

91
00:06:38,490 --> 00:06:40,560
Entonces podríamos tener 10 campamentos diferentes 100 al final del curso.

92
00:06:40,740 --> 00:06:45,570
Y cada uno de ellos tiene un nombre y una imagen y

93
00:06:45,690 --> 00:06:50,460
luego, con el tiempo, tendrán cosas como latitud y longitud, ciudad y

94
00:06:50,460 --> 00:06:57,780
estado, capacidad de la dirección, estacionalidad, todos estos atributos diferentes, pero estamos comenzando un nombre e imagen simples.

95
00:06:57,770 --> 00:06:59,950
Volvamos a Apter Sí.

96
00:07:00,600 --> 00:07:02,110
es igual a una matriz.

97
00:07:02,310 --> 00:07:09,140
Y lo que vamos a hacer es encontrar esa matriz y podemos comenzar simplemente haciéndolo aquí hasta ahora, lo llamaremos campings,

98
00:07:09,240 --> 00:07:11,900
Y luego, dentro de la matriz, y

99
00:07:12,210 --> 00:07:17,740
formateemos esto un poco mejor a medida que ingresemos en la matriz, tendremos algunos objetos iniciales.

100
00:07:17,740 --> 00:07:19,660
Y el primero tendrá nombre y yo solo iré con Semon creek.

101
00:07:19,800 --> 00:07:25,590
Puedes hacer cualquier cosa y tendrás una imagen y yo regresaré y completaré las imágenes.

102
00:07:26,000 --> 00:07:30,210
Y luego, el siguiente hará que este

103
00:07:30,330 --> 00:07:38,940
sea otro sitio, lo llamaremos Granites Hill y luego una patrulla más llamará cabras montesas.

104
00:07:38,940 --> 00:07:44,580
Todo bien.

105
00:07:44,580 --> 00:07:45,110
Así que tres campings tres nombres totalmente ficticios y para imágenes.

106
00:07:45,120 --> 00:07:48,960
De hecho, voy a usar algunas fotos de creative commons para no tener problemas.

107
00:07:48,960 --> 00:07:53,540
Estos no van a corresponder a ninguno de los sitios de campamento

108
00:07:53,550 --> 00:07:57,690
que he visitado, pero solo voy a elegir algunas imágenes aquí.

109
00:07:57,690 --> 00:07:58,920
Vamos con este para comenzar.

110
00:07:59,070 --> 00:08:01,540
Así que voy a copiar la imagen que tú o yo volveremos aquí y que será el descanso de las cabras montesas.

111
00:08:01,690 --> 00:08:07,550
Por qué no.

112
00:08:07,590 --> 00:08:08,340
Y luego volveremos y tomaré este aquí.

113
00:08:08,630 --> 00:08:13,160
Cópialo en RL Y este será Salmon Creek.

114
00:08:13,590 --> 00:08:17,800
Y luego necesitamos uno más y voy a tomar este.

115
00:08:18,300 --> 00:08:21,630
Por supuesto, esto no es realmente un sitio para acampar, pero eso no viene al caso aquí.

116
00:08:21,690 --> 00:08:26,180
Le recomiendo que use los nombres reales de un campamento en las imágenes reales de los campamentos si lo desea.

117
00:08:26,340 --> 00:08:31,390
Si no es así, si odias el campamento, que es algo en lo que

118
00:08:31,440 --> 00:08:36,120
pensé, me preocupaba que esto pudiera alejar a algunas personas, pero si odias

119
00:08:36,120 --> 00:08:41,540
el campamento, lo que supongo que es comprensible, podrías cambiar fácilmente esta aplicación a otra cosa.

120
00:08:41,550 --> 00:08:42,660
las diferentes variables que tenemos.

121
00:08:42,750 --> 00:08:48,890
Una vez que lo terminemos, podría convertirlo en una aplicación de evento, en una aplicación para fiestas, en un sitio de reseñas de restaurantes, pero

122
00:08:49,010 --> 00:08:53,040
le recomiendo que espere hasta el final del curso para no confundirse con el nombramiento y

123
00:08:53,040 --> 00:08:55,990
Así que campground Today's Para ahora, los

124
00:08:56,190 --> 00:09:03,180
campings falsos y se guardarán asegúrese de agregar o comas entre los diferentes elementos de la matriz.

125
00:09:03,170 --> 00:09:05,410
Ahí vamos y comenzaremos por renderizar

126
00:09:05,420 --> 00:09:12,410
una plantilla de redstart render y se llamará campgrounds y no vamos a pasar los datos todavía.

127
00:09:12,920 --> 00:09:15,170
Solo nos aseguraremos de que la plantilla funcione correctamente.

128
00:09:15,170 --> 00:09:18,170
Ahora tenemos que dejar que el servidor toque una nueva vista de archivo de slash camping ups que E. J. a abrir eso.

129
00:09:18,380 --> 00:09:28,380
nosotros y luego vamos

130
00:09:28,380 --> 00:09:29,370
Es así y aquí agregaremos un H1.

131
00:09:31,370 --> 00:09:35,000
Esta es la página del camping y guarde

132
00:09:35,030 --> 00:09:44,510
y asegurémonos de que veamos esa página cuando iniciemos el servidor, podemos actualizar y vamos a cortar los campamentos y lo conseguiremos.

133
00:09:44,510 --> 00:09:52,850
Esta es la página de campings.

134
00:09:52,850 --> 00:09:54,190
Y mientras estemos aquí, sería bueno agregar algunos parpadeos.

135
00:09:54,440 --> 00:09:57,430
y necesito ir a la plantilla de préstamos y justo

136
00:09:57,470 --> 00:10:03,560
en la parte inferior de una etiqueta anclada en el atributo de referencia y la ATF debe ser slash camping.

137
00:10:03,560 --> 00:10:10,400
Así que voy a agregar un enlace a la página de destino que dice Ver todos los campamentos y para hacer eso

138
00:10:10,400 --> 00:10:13,490
Y voy a decir que todos

139
00:10:13,820 --> 00:10:24,890
los campamentos y guardar reiniciar la vista de actualización del servidor de los campamentos ahora nos lleva a la página del camping.

140
00:10:24,890 --> 00:10:26,610
Muy bien, ahora vamos y asegurémonos

141
00:10:26,630 --> 00:10:32,400
de pasar los datos a través de nuestro campamento al resto de la llamada de renderizado y luego podemos

142
00:10:32,400 --> 00:10:38,770
recorrer todo y mostrar cada imagen y cada nombre en nuestra plantilla comenzará al actualizarnos y agregando ese segundo argumento aquí

143
00:10:39,410 --> 00:10:45,800
que es un objeto de todos los datos que queremos pasar y pasaremos en campings bajo el nombre de campgrounds.

144
00:10:45,800 --> 00:10:52,690
Así que recuerda que estos son los datos que estamos transmitiendo y este es el nombre que queremos darle.

145
00:10:52,700 --> 00:10:57,220
Podríamos llamar a esto lo que quisiéramos, pero es común verles nombrar lo mismo.

146
00:10:57,320 --> 00:11:00,950
Así que ahorraremos ahora y volveremos a nuestra

147
00:11:01,160 --> 00:11:09,080
plantilla y comenzaremos por hacer estos campamentos y, si vemos algo, se verá como objeto objeto.

148
00:11:09,080 --> 00:11:11,770
Si lo hicimos correctamente, sabremos que

149
00:11:11,810 --> 00:11:17,420
hemos pasado los datos reiniciando el servidor o refrescando Rigaud con tres objetos.

150
00:11:17,910 --> 00:11:21,800
Así que ahora revisemos y visualicemos cada título o cada nombre e imagen.

151
00:11:22,740 --> 00:11:26,840
Así que voy a mantener estos corchetes aquí, pero me desharé del signo de igual y haremos un para cada uno.

152
00:11:27,290 --> 00:11:32,020
corchetes y luego aquí abajo tenemos que adjuntar esto con cada nosotros también.

153
00:11:32,150 --> 00:11:41,270
Entonces ese será un campamento para cada uno y luego pasará esa función anónima a la devolución de llamada y lo llamaremos campamento y

154
00:11:41,270 --> 00:11:47,810
haremos clic aquí y luego tenemos que regresar y asegurarnos de agregar el cierre correcto Ejay us

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

156
00:11:56,240 --> 00:11:56,880
Así que

157
00:11:57,080 --> 00:12:01,820
eso debería recorrer los campamentos y luego lo que queremos hacer para cada uno, simplemente mostraremos el nombre primero.

158
00:12:01,820 --> 00:12:02,850
Entonces comenzaremos con un aliado.

159
00:12:03,080 --> 00:12:05,190
Por qué no.

160
00:12:05,270 --> 00:12:05,890
Y haremos nuestro E. J. ver lo que está sucediendo.

161
00:12:06,050 --> 00:12:13,520
s con el signo igual y todos hacen un poco de espacio para que sea un poco más fácil

162
00:12:13,520 --> 00:12:14,700
Y solo vamos a mostrar dentro del campamento de Y.

163
00:12:14,900 --> 00:12:18,190
Dot name y guarda todo el espacio que está fuera.

164
00:12:18,340 --> 00:12:22,750
Ahora carguemos la página y actualicemos esto y obtenemos tres nombres de camping.

165
00:12:23,120 --> 00:12:28,460
Lo último que quiero hacer es asegurarme de mostrar las imágenes.

166
00:12:28,460 --> 00:12:31,880
Así que volveremos aquí y en lugar

167
00:12:31,880 --> 00:12:39,470
de un aliado vamos a cambiar esto para que tengamos una etiqueta div para cada campamento.

168
00:12:39,470 --> 00:12:40,290
Y en la etiqueta div se mostrará una h.

169
00:12:40,400 --> 00:12:44,390
Hagamos un 4 con el nombre del camping y luego debajo pondremos una etiqueta de imagen.

170
00:12:44,390 --> 00:12:52,530
Y lo que tenemos que hacer es darle a la imagen una fuente y dentro de

171
00:12:53,450 --> 00:13:00,950
las comillas, en lugar de hacerlo así, sea lo que sea que elijas, ELAS va

172
00:13:01,490 --> 00:13:08,120
a poner la imagen del campamento y no podemos simplemente acampar esa imagen.

173
00:13:08,300 --> 00:13:09,160
Necesitamos esos Ejay como corchetes.

174
00:13:09,200 --> 00:13:11,030
Entonces, tenemos que hacerlo dentro de las comillas,

175
00:13:11,330 --> 00:13:16,540
lo cual es un poco confuso para algunos de mis alumnos al principio porque el campamento de esa imagen ya es una cadena.

176
00:13:16,550 --> 00:13:19,250
a la plantilla, las citas no aparecen.

177
00:13:19,700 --> 00:13:25,160
Y puede verlo aquí, pero recuerde que cuando tomamos esto y lo agregamos

178
00:13:25,160 --> 00:13:26,820
Se acaba de agregar como texto.

179
00:13:26,900 --> 00:13:28,350
Así que se vería como este HTP colon slash, lo que sea que necesitemos comillas a su alrededor.

180
00:13:28,430 --> 00:13:33,800
Así que tenemos que asegurarnos de que estamos agregando las etiquetas Ejaz dentro de las citas así como así.

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

182
00:13:39,410 --> 00:13:39,770
Entonces, lo que queremos hacer es imagen del campamento, asegúrese de que usemos la imagen.

183
00:13:39,800 --> 00:13:45,800
Aquí vamos.

184
00:13:45,800 --> 00:13:46,540
Soy A-G y escribimos eso exactamente de la misma manera y detendré el reinicio del servidor.

185
00:13:46,760 --> 00:13:54,670
Volvamos y refresquemos la página y obtenemos los tres campamentos con las tres imágenes.

186
00:13:54,980 --> 00:14:01,650
Está bien, genial.

187
00:14:01,670 --> 00:14:02,300
Así que eso es todo lo que quiero hacer en este video fue obtener la estructura básica de nuestras dos rutas.

188
00:14:02,300 --> 00:14:07,270
Volvamos para asegurarnos de que hicimos todas las cosas que nos propusimos hacer.

189
00:14:07,280 --> 00:14:10,060
Entonces en la página de aterrizaje sí lo hicimos en la página del camping que enumera todo el campamento.

190
00:14:10,340 --> 00:14:15,740
También hicimos que cada campamento tenga un nombre y una imagen.

191
00:14:15,860 --> 00:14:19,390
Todo bien

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