1
00:00:03,650 --> 00:00:10,755
Ahora que hemos completado el desarrollo de un servidor API REST completo usando Loopback,

2
00:00:10,755 --> 00:00:14,639
la siguiente pregunta inmediata que surgirá en su mente es,

3
00:00:14,639 --> 00:00:20,090
¿cómo adaptamos la aplicación React para hacer uso de este servidor de API REST?

4
00:00:20,090 --> 00:00:23,140
Como hemos hecho en los casos anteriores,

5
00:00:23,140 --> 00:00:29,190
también necesitaremos reconfigurar nuestra aplicación React para hacer uso específicamente de los

6
00:00:29,190 --> 00:00:31,410
extremos de la API REST y

7
00:00:31,410 --> 00:00:37,960
las diversas solicitudes de API REST tal como expone nuestro servidor Loopback.

8
00:00:38,150 --> 00:00:42,075
Para comenzar en este ejercicio, primero,

9
00:00:42,075 --> 00:00:45,275
clone el repositorio git que contiene

10
00:00:45,275 --> 00:00:51,140
una nueva aplicación completada que se comunica con nuestro servidor Loopback.

11
00:00:51,140 --> 00:00:54,760
Por lo tanto, para hacer eso, vaya a su ubicación conveniente en sus computadoras.

12
00:00:54,760 --> 00:00:58,370
Voy a clonar el repositorio git

13
00:00:58,370 --> 00:01:00,640
escribiendo git clon

14
00:01:06,440 --> 00:01:15,270
https://github.com/jmuppala/conFusion-React-Loopback.git

15
00:01:15,270 --> 00:01:18,130
y luego clonar este repositorio git.

16
00:01:19,430 --> 00:01:22,665
Una vez que se clona el repositorio git,

17
00:01:22,665 --> 00:01:30,780
nos moveremos a la carpeta Confusion-React-Loopback y

18
00:01:30,780 --> 00:01:39,355
luego realizaremos una instalación de hilo para instalar todos los módulos de nodo para esta aplicación.

19
00:01:39,355 --> 00:01:42,315
Antes de iniciar la aplicación React,

20
00:01:42,315 --> 00:01:46,300
asegúrese de que el servidor Loopback está configurado correctamente.

21
00:01:46,300 --> 00:01:47,705
En el servidor Loopback,

22
00:01:47,705 --> 00:01:49,410
en la carpeta cliente,

23
00:01:49,410 --> 00:01:54,425
mueva las imágenes que hemos dado como el archivo images.zip,

24
00:01:54,425 --> 00:01:56,780
descomprimirlo, y luego mueva las imágenes a

25
00:01:56,780 --> 00:02:00,540
la carpeta de imágenes debajo de la carpeta cliente como se muestra aquí.

26
00:02:00,540 --> 00:02:08,660
Además, cambie el nombre del archivo root.js como root.jsold o elimine el archivo root.js.

27
00:02:08,660 --> 00:02:13,310
Ya no necesitamos esto en nuestra aplicación porque queremos asegurarnos de que

28
00:02:13,310 --> 00:02:21,050
nuestro servidor esté guardando los contenidos de la carpeta del cliente.

29
00:02:21,050 --> 00:02:22,740
Entonces, para lograr eso,

30
00:02:22,740 --> 00:02:25,265
abramos el archivo middleware.json,

31
00:02:25,265 --> 00:02:27,845
y en el archivo middleware.json,

32
00:02:27,845 --> 00:02:32,980
en la parte de archivos,

33
00:02:32,980 --> 00:02:38,435
agreguemos esto a la parte de archivos de su archivo middleware.json.

34
00:02:38,435 --> 00:02:46,320
Por lo tanto, diremos, Loopback estático y params: dollar bank dot dot slash client»,

35
00:02:46,320 --> 00:02:49,595
lo que indica que su servidor Loopback guardará

36
00:02:49,595 --> 00:02:53,555
contenido estático de la carpeta cliente aquí.

37
00:02:53,555 --> 00:02:55,890
Después de realizar estos cambios,

38
00:02:55,890 --> 00:03:00,080
puede iniciar su servidor.

39
00:03:00,360 --> 00:03:04,100
Asegúrese de que su servidor MongoDB

40
00:03:04,100 --> 00:03:07,860
también está en funcionamiento antes de iniciar su servidor Loopback.

41
00:03:07,860 --> 00:03:14,690
Luego, después de eso, compilaremos e iniciaremos nuestro cliente React.

42
00:03:14,690 --> 00:03:20,345
Ahora, de nuevo asegurándose de que su servidor MongoDB y su servidor Loopback están en funcionamiento,

43
00:03:20,345 --> 00:03:22,810
vaya al terminal y agregue el terminal.

44
00:03:22,810 --> 00:03:31,405
Type yarn start para iniciar nuestra aplicación Loopback, la aplicación React.

45
00:03:31,405 --> 00:03:34,980
Por lo tanto, cuando la aplicación se inicia en el navegador,

46
00:03:34,980 --> 00:03:40,750
notará que la aplicación React basada en Loopback se comporta

47
00:03:40,750 --> 00:03:46,670
exactamente igual que las versiones anteriores de la aplicación React.

48
00:03:46,670 --> 00:03:48,670
Por lo tanto, aquí tenemos la página de inicio,

49
00:03:48,670 --> 00:03:52,725
luego tenemos la página Acerca de nosotros como vemos aquí,

50
00:03:52,725 --> 00:03:56,770
luego la página de menú donde se enumeran los elementos del menú aquí,

51
00:03:56,770 --> 00:04:00,260
la página de contacto como se esperaba.

52
00:04:00,260 --> 00:04:04,535
Entonces déjame volver a la página de inicio y luego iniciar sesión como administrador.

53
00:04:04,535 --> 00:04:11,000
Por lo tanto, vamos a iniciar sesión como administrador,

54
00:04:11,000 --> 00:04:14,480
y luego usted será capaz de ver Mis favoritos.

55
00:04:14,480 --> 00:04:19,075
Inicié sesión antes y luego agregué un elemento a Mis favoritos.

56
00:04:19,075 --> 00:04:24,290
Ahora vamos al Menú y luego añadimos un segundo elemento a Mis Favoritos.

57
00:04:24,290 --> 00:04:27,930
Por lo tanto, aquí vamos a añadir este elemento a los favoritos,

58
00:04:27,930 --> 00:04:34,850
y entonces usted sería capaz de ver que estos dos elementos están ahora en Mis favoritos.

59
00:04:34,850 --> 00:04:38,194
Del mismo modo, puede eliminar elementos de los favoritos.

60
00:04:38,194 --> 00:04:42,020
Por lo tanto, sigamos adelante y eliminemos esto de nuestros Favoritos.

61
00:04:42,020 --> 00:04:43,490
Volviendo al elemento Menú,

62
00:04:43,490 --> 00:04:47,550
agreguemos un comentario a uno de los platos.

63
00:04:47,550 --> 00:04:49,560
Entonces, déjame hacer clic en este plato,

64
00:04:49,560 --> 00:04:51,855
y luego enviaremos un comentario.

65
00:04:51,855 --> 00:05:01,980
Por lo tanto, cuando enviamos un comentario,

66
00:05:01,980 --> 00:05:05,175
como puede ver, el comentario se agrega a

67
00:05:05,175 --> 00:05:09,710
nuestro servidor allí como se

68
00:05:09,710 --> 00:05:15,690
esperaba y el resultado se muestra en la página Detalles del plato aquí.

69
00:05:15,690 --> 00:05:18,660
De nuevo volviendo a la página de inicio,

70
00:05:19,260 --> 00:05:24,650
encontramos que nuestra aplicación React ahora es capaz de comunicarse con

71
00:05:24,650 --> 00:05:27,740
el servidor Loopback y luego obtener

72
00:05:27,740 --> 00:05:31,465
los datos del servidor e interactuar con el servidor como se esperaba.

73
00:05:31,465 --> 00:05:35,160
Ahora, por supuesto, la pregunta que surgiría en su mente es,

74
00:05:35,160 --> 00:05:41,455
¿cómo se comunica esta aplicación Loopback con el servidor Loopback?

75
00:05:41,455 --> 00:05:47,610
Ahora, aquí es donde notaríamos que para Loopback,

76
00:05:47,610 --> 00:05:51,495
ya que el servidor de Loopback expone los extremos de la API REST,

77
00:05:51,495 --> 00:05:55,575
mi aplicación React puede acceder al servidor Loopback en

78
00:05:55,575 --> 00:05:59,860
los extremos de la API REST correspondientes y luego comunicarse con el servidor,

79
00:05:59,860 --> 00:06:07,845
como hicimos con nuestro propio servidor API REST que habíamos implementado antes.

80
00:06:07,845 --> 00:06:15,020
Entonces, sigamos adelante y echemos un vistazo al código para la aplicación React modificada.

81
00:06:15,020 --> 00:06:17,690
Ir al código de nuestra aplicación,

82
00:06:17,690 --> 00:06:23,200
los principales cambios que notará estarán en el archivo ActionCreators.js.

83
00:06:23,200 --> 00:06:27,620
Aquí, notará que ahora nos estamos comunicando con

84
00:06:27,620 --> 00:06:33,930
el servidor Loopback en lugar del servidor REST API que teníamos anteriormente.

85
00:06:33,930 --> 00:06:37,550
Por lo tanto, la recuperación ahora estará accediendo al servidor Loopback en

86
00:06:37,550 --> 00:06:43,800
el punto final de api/comments o en el punto final de api/dish y así sucesivamente.

87
00:06:43,800 --> 00:06:52,350
Por lo tanto, todas estas solicitudes de búsqueda se actualizan para acceder al instante a nuestro servidor Loopback.

88
00:06:52,700 --> 00:06:56,215
Por lo tanto, notará cambios similares allí.

89
00:06:56,215 --> 00:07:00,095
Ahora, además de iniciar sesión en nuestro servidor Loopback,

90
00:07:00,095 --> 00:07:08,190
así que vamos al código de inicio de sesión aquí.

91
00:07:08,190 --> 00:07:09,750
Por lo tanto, en el usuario de inicio de sesión,

92
00:07:09,750 --> 00:07:18,035
estamos publicando una búsqueda en el punto final BaseURL y API/clientes/inicio de sesión,

93
00:07:18,035 --> 00:07:25,260
y luego proporcionaremos las credenciales en el cuerpo del mensaje de solicitud que sale.

94
00:07:25,260 --> 00:07:27,215
En respuesta a eso,

95
00:07:27,215 --> 00:07:29,830
el servidor devolverá la respuesta.

96
00:07:29,830 --> 00:07:33,950
A continuación, la respuesta contiene la información del token.

97
00:07:33,950 --> 00:07:38,905
La información del token se devuelve en forma de

98
00:07:38,905 --> 00:07:44,790
ID del mensaje de respuesta.

99
00:07:44,790 --> 00:07:47,325
Por lo tanto, el ID en sí sirve como el token.

100
00:07:47,325 --> 00:07:49,545
Por lo tanto, el mensaje de respuesta en sí,

101
00:07:49,545 --> 00:07:55,200
voy a guardar esto en mi almacenamiento local como se muestra aquí.

102
00:07:55,200 --> 00:07:59,320
Restringificamos el mensaje de respuesta y luego lo almacenamos allí.

103
00:07:59,320 --> 00:08:06,945
Este mensaje de respuesta, Response.id, contiene el token.

104
00:08:06,945 --> 00:08:12,815
Por lo tanto, response.id sirve como el token web JSON para acceder al servidor de bucle invertido.

105
00:08:12,815 --> 00:08:15,650
Entonces, es por eso que notará que en

106
00:08:15,650 --> 00:08:19,235
situaciones donde necesito acceder al servidor, por ejemplo,

107
00:08:19,235 --> 00:08:25,520
notaremos que cuando busquemos o publiquemos su favorito en el servidor,

108
00:08:25,520 --> 00:08:28,550
notará que obtengo el token diciendo,

109
00:08:28,550 --> 00:08:30,420
let token, JSON parse,

110
00:08:30,420 --> 00:08:33,990
localStorage, getItem, token aquí,

111
00:08:33,990 --> 00:08:38,890
y luego en el campo de encabezado de autorización,

112
00:08:38,890 --> 00:08:44,300
dije que el campo de autorización para ser token.id aquí como se muestra aquí.

113
00:08:44,300 --> 00:08:51,380
Por lo tanto, así es como podremos autenticarnos en el servidor Loopback.

114
00:08:51,380 --> 00:08:55,450
Por lo tanto, aquí puede ver que dice, BaseURL, api/favorites,

115
00:08:55,450 --> 00:08:59,440
y luego obtener la lista de favoritos del servidor,

116
00:08:59,440 --> 00:09:03,430
y luego guardarla en nuestra tienda redux.

117
00:09:03,430 --> 00:09:06,710
Por lo tanto, bueno, gran parte del código sigue siendo el mismo,

118
00:09:06,710 --> 00:09:09,740
excepto por las actualizaciones que hemos hecho para

119
00:09:09,740 --> 00:09:13,455
acceder a los extremos de la API REST Loopbacks.

120
00:09:13,455 --> 00:09:22,665
Ahora, para Angular, tenemos un SDK de Loopback que se puede construir para nuestra aplicación Angular.

121
00:09:22,665 --> 00:09:27,070
Pero para React, no existe tal soporte disponible desde Loopback,

122
00:09:27,070 --> 00:09:30,460
por lo que tenemos que recurrir al acceso directo a los

123
00:09:30,460 --> 00:09:34,840
extremos de la API de REST de Loopback como se muestra aquí usando fetch,

124
00:09:34,840 --> 00:09:38,860
y luego podemos comunicarnos con el servidor Loopback.

125
00:09:38,860 --> 00:09:42,115
Con esta rápida comprensión de cómo

126
00:09:42,115 --> 00:09:48,360
se ha actualizado nuestra aplicación React para acceder a nuestro servidor Loopback,

127
00:09:48,360 --> 00:09:51,795
completamos el examen del servidor Loopback.

128
00:09:51,795 --> 00:09:56,980
Dedique más tiempo a buscar algunos de los componentes y vea

129
00:09:56,980 --> 00:10:02,340
cómo utilizan la información obtenida del servidor Loopback.

130
00:10:02,340 --> 00:10:06,530
Notará que la mayoría de los componentes siguen siendo exactamente los mismos que antes, a

131
00:10:06,530 --> 00:10:13,650
excepción de algunas modificaciones menores en el componente favorito para obtener

132
00:10:13,650 --> 00:10:18,495
la información del servidor Loopback

133
00:10:18,495 --> 00:10:22,700
y luego utilizarla para representar la lista de elementos favoritos.

134
00:10:22,700 --> 00:10:29,545
Aparte de eso, gran parte de los cambios se limitan al archivo ActionCreators.js,

135
00:10:29,545 --> 00:10:34,260
donde hemos actualizado la búsqueda para utilizar la URL de

136
00:10:34,260 --> 00:10:41,125
nuestro servidor Loopback para poder acceder a los diversos extremos de la API REST.

137
00:10:41,125 --> 00:10:48,460
Por lo tanto, con esto, le he demostrado rápidamente cómo puede construir su aplicación.

138
00:10:48,460 --> 00:10:51,590
Con esta rápida introducción a cómo podemos

139
00:10:51,590 --> 00:10:54,755
hacer uso del Loopback dentro de nuestra aplicación,

140
00:10:54,755 --> 00:10:59,110
llegamos al final de este ejercicio.