1
00:00:01,260 --> 00:00:02,700
‫Instructor: Bienvenido de nuevo.

2
00:00:02,700 --> 00:00:06,280
‫Así que espero que esté disfrutando de esta sección hasta ahora y

3
00:00:06,280 --> 00:00:09,800
‫que disfrute trabajando con Node. js.

4
00:00:09,800 --> 00:00:13,100
‫Así que sigamos adelante con

5
00:00:13,100 --> 00:00:17,573
‫nuestro proyecto y creemos una API web extremadamente simple.

6
00:00:19,430 --> 00:00:23,290
‫Ahora, para empezar, ¿qué es realmente una API?

7
00:00:23,290 --> 00:00:25,759
‫Bueno, la respuesta larga, la

8
00:00:25,759 --> 00:00:30,450
‫aprenderás en una de las siguientes secciones, pero por ahora, la respuesta

9
00:00:30,450 --> 00:00:34,510
‫corta, al menos en este contexto de API web, básicamente,

10
00:00:34,510 --> 00:00:39,510
‫una API es un servicio al que podemos solicitar algunos datos, entonces, en

11
00:00:39,750 --> 00:00:43,880
‫este caso, los datos que el usuario quiere solicitar son datos

12
00:00:43,880 --> 00:00:46,470
‫sobre los productos que estamos ofreciendo en

13
00:00:46,470 --> 00:00:50,070
‫esta granja de nodos, es decir, en este proyecto.

14
00:00:50,070 --> 00:00:54,360
‫Entonces tengo aquí esta carpeta de datos de desarrollo, y allí, tengo

15
00:00:54,360 --> 00:00:58,870
‫un archivo JSON, y JSON, en caso de que no lo sepa,

16
00:00:58,870 --> 00:01:01,500
‫es un formato de texto muy simple

17
00:01:01,500 --> 00:01:04,250
‫que se parece mucho a un objeto

18
00:01:04,250 --> 00:01:07,720
‫JavaScript, por lo que se ve así , y

19
00:01:07,720 --> 00:01:11,010
‫podemos tener matrices, que en realidad tenemos, por lo

20
00:01:11,010 --> 00:01:14,630
‫que tenemos una matriz grande, que luego contiene estos cinco

21
00:01:14,630 --> 00:01:18,400
‫objetos, y cada objeto tiene la ID, el nombre del

22
00:01:18,400 --> 00:01:20,160
‫producto, la imagen, etc.

23
00:01:20,160 --> 00:01:24,270
‫Ahora cada uno de estos tiene que ser una cadena para cada una de

24
00:01:24,270 --> 00:01:26,593
‫las claves, y luego tenemos el valor.

25
00:01:29,828 --> 00:01:34,010
‫Entonces, básicamente, estos datos aquí son los que nuestra API

26
00:01:34,010 --> 00:01:36,673
‫enviará al cliente cuando se solicite.

27
00:01:37,840 --> 00:01:40,763
‫Entonces tendremos otra ruta aquí.

28
00:01:43,250 --> 00:01:48,250
‫Así que aquí, de lo contrario, si el nombre de la ruta es igual a / api.

29
00:01:55,980 --> 00:01:59,580
‫Y por ahora, como marcador de posición, simplemente enviaremos

30
00:02:04,070 --> 00:02:05,703
‫la API así.

31
00:02:08,520 --> 00:02:12,750
‫Entonces, lo que queremos hacer ahora es leer los

32
00:02:12,750 --> 00:02:17,500
‫datos de este archivo aquí, luego analizar JSON en JavaScript y

33
00:02:17,500 --> 00:02:20,520
‫luego enviar ese resultado al cliente.

34
00:02:20,520 --> 00:02:24,053
‫Entonces, algo muy simple, así que pongámonos manos a la obra.

35
00:02:26,430 --> 00:02:29,350
‫Entonces, el primer enfoque para hacer esto

36
00:02:29,350 --> 00:02:33,400
‫es entrar en esta ruta y luego leer el archivo aquí

37
00:02:33,400 --> 00:02:36,350
‫usando la función de lectura de archivo, ¿verdad?

38
00:02:36,350 --> 00:02:37,853
‫Así que comencemos por hacer eso.

39
00:02:40,110 --> 00:02:44,393
‫Entonces fs. , y en realidad es

40
00:02:46,287 --> 00:02:50,110
‫readFile, no fileRead, entonces readFile, y luego el nombre del archivo.

41
00:02:50,110 --> 00:02:52,593
‫Ahora, recuerde cómo le dije antes que

42
00:02:52,593 --> 00:02:56,260
‫esta no es la única forma de ubicar nuestro archivo

43
00:02:56,260 --> 00:02:58,223
‫en el sistema de archivos.

44
00:02:59,300 --> 00:03:01,460
‫Por ahora usémoslo todavía, pero después de

45
00:03:01,460 --> 00:03:03,510
‫que lo tengamos escrito aquí, les

46
00:03:03,510 --> 00:03:04,910
‫mostraré otra forma.

47
00:03:05,790 --> 00:03:10,790
‫Entonces, una nota, este punto aquí en realidad se refiere al directorio desde el

48
00:03:11,260 --> 00:03:14,633
‫cual ejecutamos el comando de nodo en la terminal.

49
00:03:15,740 --> 00:03:18,420
‫Entonces, nuevamente, este punto aquí ahora

50
00:03:18,420 --> 00:03:21,414
‫representa esta carpeta actual aquí porque ahí es

51
00:03:21,414 --> 00:03:25,800
‫donde realmente ejecutamos el comando de nodo, por lo que en esta

52
00:03:25,800 --> 00:03:28,600
‫carpeta de 1-nodo-granja, que es nuestro directorio de

53
00:03:28,600 --> 00:03:32,270
‫trabajo actual de todos modos en este caso, pero podríamos

54
00:03:32,270 --> 00:03:35,230
‫tener ejecute el comando de nodo en otro

55
00:03:35,230 --> 00:03:38,260
‫lugar, y luego el punto significaría algo más.

56
00:03:38,260 --> 00:03:42,860
‫Entonces, por ejemplo, podríamos encontrar perfectamente, ir al escritorio y

57
00:03:42,860 --> 00:03:46,380
‫ejecutar el nodo allí, y luego especificar la

58
00:03:46,380 --> 00:03:50,600
‫ruta completa para indexar. js, pero podríamos hacer eso, pero

59
00:03:50,600 --> 00:03:55,080
‫en este caso, el punto significaría el escritorio, por lo que si comenzamos

60
00:03:55,080 --> 00:03:57,390
‫el script desde el escritorio, entonces este

61
00:03:57,390 --> 00:03:59,890
‫aquí, este punto, significaría el escritorio, por

62
00:03:59,890 --> 00:04:03,200
‫lo que no siempre es ideal. , y por lo

63
00:04:03,200 --> 00:04:05,290
‫tanto, existe una mejor manera.

64
00:04:05,290 --> 00:04:08,230
‫Entonces, todo Node. js, obtienen

65
00:04:08,230 --> 00:04:12,790
‫acceso a una variable llamada dirname, y esa variable

66
00:04:12,790 --> 00:04:17,200
‫siempre se traduce al directorio en el que se

67
00:04:17,200 --> 00:04:21,078
‫encuentra el script que estamos ejecutando actualmente.

68
00:04:21,078 --> 00:04:24,170
‫Entonces, en este caso, en realidad es el

69
00:04:24,170 --> 00:04:28,410
‫mismo lugar porque index. js también está en

70
00:04:28,410 --> 00:04:31,980
‫esta carpeta de la granja de nodos, pero nuevamente,

71
00:04:31,980 --> 00:04:34,280
‫por las razones que mencioné antes,

72
00:04:34,280 --> 00:04:38,670
‫muchas veces es una mejor práctica usar la variable dirname, así

73
00:04:38,670 --> 00:04:41,343
‫que hagámoslo, y para eso, creamos una

74
00:04:44,400 --> 00:04:46,690
‫cadena de plantilla, y luego

75
00:04:46,690 --> 00:04:51,567
‫usamos la variable, por lo que es __dirname, que significa nombre de directorio.

76
00:04:54,870 --> 00:04:57,870
‫Y, por lo general, lo hacemos así.

77
00:04:57,870 --> 00:04:59,850
‫Ahora hay una excepción a

78
00:04:59,850 --> 00:05:01,963
‫esta regla, que es la función require.

79
00:05:03,224 --> 00:05:05,140
‫Entonces, cuando necesitemos módulos, en

80
00:05:05,140 --> 00:05:08,160
‫realidad podemos requerir nuestros propios módulos, y lo haremos

81
00:05:08,160 --> 00:05:10,650
‫un poco más tarde, como en el

82
00:05:10,650 --> 00:05:13,800
‫siguiente, o en uno de los dos videos siguientes, y

83
00:05:13,800 --> 00:05:18,200
‫allí, el punto en realidad también significa el trabajo actual directorio y no el

84
00:05:18,200 --> 00:05:20,863
‫lugar desde el que estamos ejecutando el script.

85
00:05:21,965 --> 00:05:25,270
‫Así que tenga en cuenta que la función require

86
00:05:25,270 --> 00:05:27,780
‫es una excepción a esta regla, pero

87
00:05:27,780 --> 00:05:30,050
‫por lo general, el punto es

88
00:05:30,050 --> 00:05:35,050
‫donde se ejecuta el script y __dirname es donde se encuentra el archivo actual.

89
00:05:37,920 --> 00:05:42,920
‫Bien, ahora vamos a especificar la codificación del archivo utf-8, y

90
00:05:43,840 --> 00:05:48,840
‫luego nuestra función de devolución de llamada, que es el error

91
00:05:49,900 --> 00:05:54,900
‫primero, recuerde, por lo que ahora tenemos acceso a estos datos.

92
00:05:56,700 --> 00:05:59,920
‫Ahora los datos están en JSON, por lo que en JavaScript,

93
00:05:59,920 --> 00:06:04,023
‫tenemos algo integrado que se llama JSON. analizar gramaticalmente.

94
00:06:06,290 --> 00:06:08,600
‫Entonces, esto tomará el código JSON,

95
00:06:08,600 --> 00:06:10,190
‫que en realidad es

96
00:06:10,190 --> 00:06:14,400
‫una cadena, y luego lo convertirá automáticamente en JavaScript, por lo que

97
00:06:14,400 --> 00:06:17,593
‫en este caso, un objeto o matriz de JavaScript.

98
00:06:19,240 --> 00:06:21,117
‫Llamemos a este productoData,

99
00:06:23,857 --> 00:06:26,743
‫y luego también echemos un vistazo rápido.

100
00:06:32,500 --> 00:06:34,853
‫Entonces en la consola en este caso.

101
00:06:36,520 --> 00:06:40,740
‫Entonces, reiniciando el servidor, y ahora, no olvides

102
00:06:40,740 --> 00:06:45,740
‫presionar la ruta / api, y oh, ¿qué está pasando aquí?

103
00:06:47,520 --> 00:06:49,470
‫Oh, de hecho reiniciamos el servidor.

104
00:06:52,545 --> 00:06:54,397
‫Y ahora obtenemos una

105
00:06:55,330 --> 00:06:58,020
‫API de respuesta, y ahora echemos un vistazo

106
00:06:58,020 --> 00:07:01,140
‫aquí, en realidad, al objeto de datos del producto.

107
00:07:01,140 --> 00:07:04,340
‫Entonces, este es solo un objeto agradable, con todos

108
00:07:04,340 --> 00:07:09,340
‫los datos que teníamos en estos datos. json archivo.

109
00:07:09,620 --> 00:07:13,450
‫Muy bien, ahora el siguiente paso es

110
00:07:13,450 --> 00:07:16,653
‫enviar estos datos como respuesta.

111
00:07:17,640 --> 00:07:20,180
‫Ahora esta respuesta. El método end

112
00:07:20,180 --> 00:07:24,953
‫aquí en realidad necesita enviar una cadena y no un objeto aquí.

113
00:07:25,890 --> 00:07:28,510
‫Y, de hecho, lo que queremos devolver son

114
00:07:28,510 --> 00:07:33,230
‫los datos directamente, por lo que los datos son una cadena que luego transformamos

115
00:07:33,230 --> 00:07:37,410
‫en un objeto usando JSON. parse, pero por ahora,

116
00:07:37,410 --> 00:07:41,730
‫en realidad no tendríamos necesidad de hacer eso, pero lo hice

117
00:07:41,730 --> 00:07:44,445
‫de todos modos porque lo necesitaremos

118
00:07:44,445 --> 00:07:48,130
‫más adelante cuando comencemos a construir nuestras plantillas HTML.

119
00:07:48,130 --> 00:07:50,710
‫Entonces es cuando necesitaremos estos

120
00:07:50,710 --> 00:07:52,890
‫datos en formato JavaScript.

121
00:07:52,890 --> 00:07:56,280
‫Por ahora, solo queremos devolver la cadena real

122
00:07:56,280 --> 00:07:57,453
‫que recibimos.

123
00:07:59,146 --> 00:08:02,380
‫Ahora, antes de que podamos hacer eso, en realidad

124
00:08:02,380 --> 00:08:04,220
‫necesitamos especificar, por lo

125
00:08:04,220 --> 00:08:09,220
‫que debemos decirle al navegador que estamos enviando JSON, así que al igual que

126
00:08:10,110 --> 00:08:14,160
‫antes, cuando configuramos el tipo de contenido en texto / html,

127
00:08:14,160 --> 00:08:17,703
‫ahora necesitamos decirle a un navegador que estamos enviando JSON.

128
00:08:19,060 --> 00:08:24,060
‫Entonces decimos res. writeHead como antes, y ahora

129
00:08:24,160 --> 00:08:27,260
‫estamos usando el código de estado 200,

130
00:08:27,260 --> 00:08:31,830
‫que significa okay, y luego el objeto de los encabezados.

131
00:08:31,830 --> 00:08:35,330
‫En este caso, solo será uno, así

132
00:08:40,320 --> 00:08:45,320
‫que Content-type, y cuando enviemos JSON, debemos decir application / json.

133
00:08:49,570 --> 00:08:53,240
‫Entonces, para HTML, es text / html, para

134
00:08:53,240 --> 00:08:56,323
‫JSON, es application / json,

135
00:08:58,330 --> 00:09:01,933
‫y ahora echemos un vistazo a eso.

136
00:09:05,200 --> 00:09:08,183
‫Recargue el servidor aquí muy rápido

137
00:09:12,600 --> 00:09:17,600
‫y, de hecho, aquí tenemos nuestra API devolviendo todos los datos

138
00:09:17,690 --> 00:09:20,053
‫sobre nuestros cinco productos.

139
00:09:20,950 --> 00:09:25,800
‫Genial, genial y genial, pero en realidad no es perfecto, porque

140
00:09:25,800 --> 00:09:27,970
‫en realidad no es 100%

141
00:09:27,970 --> 00:09:31,463
‫eficiente, y eso se debe a que

142
00:09:32,546 --> 00:09:36,780
‫cada vez que alguien accede a esta ruta /

143
00:09:36,780 --> 00:09:40,640
‫api, el archivo tendrá que leerse y luego enviarse

144
00:09:40,640 --> 00:09:42,640
‫de vuelta. .

145
00:09:42,640 --> 00:09:45,720
‫En cambio, lo que podemos hacer es leer el

146
00:09:45,720 --> 00:09:49,110
‫archivo una vez al principio, y luego, cada vez que alguien

147
00:09:49,110 --> 00:09:51,600
‫llega a esta ruta, simplemente enviar los

148
00:09:51,600 --> 00:09:55,273
‫datos sin tener que leerlos cada vez que un usuario lo solicite.

149
00:09:56,410 --> 00:09:58,180
‫¿Tiene sentido?

150
00:09:58,180 --> 00:10:01,423
‫Bueno, lo que voy a hacer es publicar esto aquí.

151
00:10:03,550 --> 00:10:07,680
‫Está bien, y por supuesto, no necesito todo esto, así que

152
00:10:07,680 --> 00:10:10,530
‫esto no está aquí, y esto no

153
00:10:10,530 --> 00:10:12,720
‫está aquí, y en

154
00:10:12,720 --> 00:10:15,630
‫realidad, será algo diferente, y eso se debe

155
00:10:15,630 --> 00:10:19,570
‫a que ahora usaremos la versión sincrónica, y sé lo

156
00:10:19,570 --> 00:10:22,280
‫que estás pensando, que es que la

157
00:10:22,280 --> 00:10:25,440
‫versión sincrónica bloquea la ejecución del código, ¿verdad?

158
00:10:25,440 --> 00:10:27,570
‫Y si bien eso es cierto, en

159
00:10:27,570 --> 00:10:29,580
‫este caso, no es un problema

160
00:10:29,580 --> 00:10:32,040
‫en absoluto, y eso se debe a que el

161
00:10:32,040 --> 00:10:36,240
‫código de nivel superior en realidad solo se ejecuta una vez desde el principio.

162
00:10:36,240 --> 00:10:39,260
‫Solo esta función de devolución de llamada, por

163
00:10:39,260 --> 00:10:43,440
‫ejemplo, aquí, la de createServer, por lo que esta función aquí, esto

164
00:10:43,440 --> 00:10:46,160
‫es lo que se ejecuta cada vez

165
00:10:46,160 --> 00:10:50,260
‫que hay una nueva solicitud, pero no un código que está aquí.

166
00:10:50,260 --> 00:10:53,210
‫El código que está fuera de las funciones

167
00:10:53,210 --> 00:10:57,500
‫de devolución de llamada, el llamado código de nivel superior, solo se

168
00:10:57,500 --> 00:11:01,500
‫ejecuta una vez que iniciamos el programa, por lo que en

169
00:11:01,500 --> 00:11:04,660
‫esa situación, no importa en absoluto si bloquea

170
00:11:04,660 --> 00:11:07,350
‫la ejecución, porque nuevamente, sucede solo

171
00:11:07,350 --> 00:11:11,160
‫una vez y solo cuando el código realmente comienza, ¿verdad?

172
00:11:11,160 --> 00:11:12,820
‫¿Tiene sentido?

173
00:11:12,820 --> 00:11:16,060
‫Entonces, usaremos la versión de sincronización ahora porque en

174
00:11:16,060 --> 00:11:19,100
‫realidad es más fácil manejar esos datos,

175
00:11:19,100 --> 00:11:23,060
‫porque eso simplemente coloca los datos en una variable que

176
00:11:23,060 --> 00:11:25,253
‫no podemos usar de inmediato.

177
00:11:27,930 --> 00:11:32,180
‫Así que no se preocupe por el hecho de que esta función se está

178
00:11:32,180 --> 00:11:34,800
‫bloqueando porque, nuevamente, está en el código de nivel

179
00:11:34,800 --> 00:11:37,200
‫superior y solo se ejecuta una vez.

180
00:11:37,200 --> 00:11:39,410
‫El secreto aquí es simplemente saber

181
00:11:39,410 --> 00:11:42,530
‫qué código se ejecuta solo una vez y solo

182
00:11:42,530 --> 00:11:45,890
‫al principio, y qué código se ejecuta una y otra vez

183
00:11:45,890 --> 00:11:49,663
‫y, por lo tanto, es problemático al bloquear el bucle de eventos.

184
00:11:50,560 --> 00:11:52,240
‫Y, por supuesto, durante

185
00:11:52,240 --> 00:11:55,990
‫el resto de este gran, gran curso, lo aprenderá.

186
00:11:55,990 --> 00:11:58,650
‫Entonces aprenderá todo sobre el bucle de eventos, y

187
00:11:58,650 --> 00:12:01,990
‫qué código está bloqueando y cuál no, y por qué, y esta

188
00:12:01,990 --> 00:12:04,760
‫es solo la primera vez que lo menciono, pero

189
00:12:04,760 --> 00:12:06,560
‫no será la última vez.

190
00:12:07,620 --> 00:12:11,173
‫Me escucharás decir las mismas cosas una y otra vez.

191
00:12:14,180 --> 00:12:18,550
‫Entonces, simplemente llamando a este dato, y luego, por supuesto, no

192
00:12:18,550 --> 00:12:20,423
‫necesitamos nada de esto.

193
00:12:21,550 --> 00:12:24,253
‫Vamos a mover esto aquí, y eso es todo.

194
00:12:29,040 --> 00:12:32,120
‫Entonces, antes de que suceda algo, leerá los datos

195
00:12:32,120 --> 00:12:34,340
‫del archivo JSON en datos.

196
00:12:34,340 --> 00:12:38,740
‫Luego, también lo analizará en un objeto.

197
00:12:38,740 --> 00:12:43,043
‫Llamémoslo dataObject aquí, por lo que lo que haremos aquí

198
00:12:44,370 --> 00:12:48,060
‫es no leer este archivo cada vez que haya

199
00:12:48,060 --> 00:12:51,030
‫una solicitud y, en su lugar, simplemente

200
00:12:51,030 --> 00:12:55,960
‫enviar de vuelta los datos que tenemos ahora en nuestro código de

201
00:12:55,960 --> 00:12:57,283
‫nivel superior.

202
00:13:04,010 --> 00:13:08,450
‫Entonces, estos datos aquí ahora provienen de aquí porque, por supuesto, este código

203
00:13:08,450 --> 00:13:11,060
‫en la función de devolución de llamada

204
00:13:11,060 --> 00:13:15,543
‫tiene acceso al código de nivel superior debido a la cadena de alcance, ¿verdad?

205
00:13:17,510 --> 00:13:21,000
‫Cancelando, ejecutándose de nuevo y solo para demostrarle

206
00:13:21,000 --> 00:13:23,803
‫que todavía funciona, y lo hace.

207
00:13:25,070 --> 00:13:28,560
‫Tan perfecto, y eso es mejor, eso es más eficiente, oh, ¿y

208
00:13:28,560 --> 00:13:30,023
‫por qué cerré esto?

209
00:13:31,470 --> 00:13:34,863
‫Muy bien, abrámoslo de nuevo muy rápido.

210
00:13:37,890 --> 00:13:38,793
‫Así que, aquí vamos.

211
00:13:41,430 --> 00:13:45,890
‫Entonces esa es nuestra API muy simple, que ahora permite al usuario

212
00:13:45,890 --> 00:13:49,430
‫simplemente solicitar todos los datos sobre nuestra aplicación con

213
00:13:49,430 --> 00:13:52,353
‫una sola llamada a la API, básicamente.

214
00:13:53,810 --> 00:13:56,740
‫Entonces agregamos otra ruta aquí, / api,

215
00:13:56,740 --> 00:13:59,340
‫luego leemos el archivo sincrónicamente, lo

216
00:13:59,340 --> 00:14:02,930
‫colocamos en este objeto y luego simplemente enviamos ese

217
00:14:02,930 --> 00:14:06,010
‫objeto como respuesta, pero antes de eso, especificamos

218
00:14:06,010 --> 00:14:11,010
‫que estamos enviando de vuelta la aplicación / json, entonces que el

219
00:14:11,353 --> 00:14:15,200
‫navegador sabe exactamente qué esperar, y en los próximos videos,

220
00:14:15,200 --> 00:14:16,720
‫comenzaremos a

221
00:14:16,720 --> 00:14:19,730
‫construir la interfaz de usuario, así que

222
00:14:19,730 --> 00:14:22,673
‫esa es la parte más emocionante, ¿verdad?