1
00:00:00,000 --> 00:00:04,708
[MUSIC]

2
00:00:04,708 --> 00:00:08,762
En el ejercicio anterior, ya habíamos configurado nuestro

3
00:00:08,762 --> 00:00:12,657
back-end Firebase como servicio con el nuevo proyecto.

4
00:00:12,657 --> 00:00:18,637
Y también configuramos una gran cantidad de datos en nuestra base de datos, y luego configuramos nuestro almacenamiento y

5
00:00:18,637 --> 00:00:25,410
configuramos nuestro servidor Firebase para que actúe como el back-end de nuestra aplicación React.

6
00:00:25,410 --> 00:00:30,670
En este ejercicio, vamos a ver una versión modificada de nuestra aplicación React,

7
00:00:30,670 --> 00:00:36,080
que hace uso del back-end de Firebase como servicio para

8
00:00:36,080 --> 00:00:42,200
obtener los datos y también almacenar información para los usuarios en el servidor.

9
00:00:42,200 --> 00:00:46,430
Además, aprovecharemos el soporte de autenticación que

10
00:00:46,430 --> 00:00:48,510
ofrece Firebase para autenticar a los usuarios.

11
00:00:48,510 --> 00:00:55,434
Ambos usando un enfoque de correo electrónico y contraseña, y también usando una cuenta de Google.

12
00:00:57,091 --> 00:01:04,231
Para comenzar en este ejercicio, vaya a una ubicación conveniente en su computadora,

13
00:01:04,231 --> 00:01:09,347
y luego clone el repositorio Git dado,

14
00:01:09,347 --> 00:01:14,950
le he proporcionado la versión Firebase de nuestra aplicación React.

15
00:01:14,950 --> 00:01:24,300
Así que escriba git clon https://github.com/jmuppala/conFusion-Rea -

16
00:01:24,300 --> 00:01:27,470
CT-Firebase.git.

17
00:01:27,470 --> 00:01:30,450
Y luego clone el repositorio de Git.

18
00:01:30,450 --> 00:01:37,610
Y una vez que el repositorio de Git se clone en su computadora, luego

19
00:01:37,610 --> 00:01:47,340
muévase a la carpeta Confusion-React-Firebase que se creará en este punto.

20
00:01:47,340 --> 00:01:52,230
Y luego notarías que un montón de archivos ya están instalados allí.

21
00:01:52,230 --> 00:01:56,820
Vamos a seguir adelante y hacer una instalación de hilo para instalar todos los

22
00:01:56,820 --> 00:02:02,130
módulos de nodo de los que depende esta aplicación angular.

23
00:02:02,130 --> 00:02:07,140
Esta versión también instalará módulos de nodo adicionales llamados Firebase.

24
00:02:07,140 --> 00:02:12,850
Voy a explicar un poco más sobre estos módulos de nodo más adelante en este ejercicio.

25
00:02:12,850 --> 00:02:18,420
Una vez finalizada la instalación del proyecto, abra el proyecto en un editor.

26
00:02:18,420 --> 00:02:24,290
Y luego en el proyecto, vaya a la carpeta fuente > Firebase y

27
00:02:24,290 --> 00:02:26,700
luego abra el archivo config.js.

28
00:02:26,700 --> 00:02:33,220
Y en el archivo config.js, verá un conjunto de configuración de Firebase

29
00:02:33,220 --> 00:02:38,950
que necesita configurar con su propia configuración de servidor Firebase.

30
00:02:38,950 --> 00:02:43,970
Como hemos visto en el ejercicio anterior, podemos obtener toda esta información cuando hacemos

31
00:02:43,970 --> 00:02:49,940
clic en este botón aquí llamado Añadir Firebase a su aplicación web.

32
00:02:49,940 --> 00:02:53,035
Y luego copie esta información y

33
00:02:53,035 --> 00:02:58,162
luego pegue esta información en su archivo config.js.

34
00:02:58,162 --> 00:03:03,786
Para reemplazarlos con la configuración específica de los servidores Firebase para

35
00:03:03,786 --> 00:03:06,280
toda esta información.

36
00:03:06,280 --> 00:03:10,844
Y una vez que se haya completado, entonces usted puede iniciar su

37
00:03:10,844 --> 00:03:14,609
aplicación React escribiendo inicio hilo en el indicador.

38
00:03:14,609 --> 00:03:18,331
Una vez que su aplicación React está compilada, y así

39
00:03:18,331 --> 00:03:23,890
aquí vería la página de inicio, la página acerca, como vemos aquí.

40
00:03:23,890 --> 00:03:25,596
Y el menú.

41
00:03:27,900 --> 00:03:31,570
Y la página de contacto.

42
00:03:31,570 --> 00:03:33,360
Vamos a iniciar sesión nosotros mismos,

43
00:03:33,360 --> 00:03:36,865
déjame volver a la página de inicio y luego vamos a iniciar sesión nosotros mismos.

44
00:03:36,865 --> 00:03:38,800
Así que cuando haga clic en el botón Iniciar sesión,

45
00:03:38,800 --> 00:03:43,430
verá el formulario típico aquí con el correo electrónico y la información de la contraseña.

46
00:03:43,430 --> 00:03:47,010
También verá un botón inicial aquí llamado Iniciar sesión con Google.

47
00:03:47,010 --> 00:03:49,740
Así que déjame iniciar sesión con mi cuenta de Google.

48
00:03:49,740 --> 00:03:54,885
Por lo tanto, cuando haga clic en Iniciar sesión con Google, se abrirá otra

49
00:03:54,885 --> 00:04:01,095
ventana del navegador donde se le pedirá que autorice el uso de su cuenta de Google.

50
00:04:01,095 --> 00:04:07,745
Luego verá, en la esquina derecha, inmediatamente verá su nombre

51
00:04:07,745 --> 00:04:13,285
mostrándose aquí, y con el botón de inicio de sesión ahora convertido en un botón de cierre de sesión.

52
00:04:13,285 --> 00:04:19,340
Por lo tanto, en este punto, usted debería ser capaz de ver sus favoritos.

53
00:04:19,340 --> 00:04:22,240
Y en este caso, ya que no tenemos ningún favorito, por

54
00:04:22,240 --> 00:04:24,110
lo que estará vacío en este punto.

55
00:04:24,110 --> 00:04:29,610
Permítanme volver al menú y luego agregar un par de elementos a mis favoritos.

56
00:04:29,610 --> 00:04:35,990
Así que agregaré este plato a mis favoritos, por lo que cuando haga clic en este plato,

57
00:04:35,990 --> 00:04:41,350
inmediatamente verá el icono convertirse en un corazón lleno.

58
00:04:41,350 --> 00:04:47,597
Y permítanme también seleccionar un plato más y añadirlo a mis favoritos.

59
00:04:47,597 --> 00:04:52,526
Anuncio entonces ahora cuando vaya a los mis favoritos, verá un par

60
00:04:52,526 --> 00:04:57,187
de platos añadidos a sus favoritos, como era de esperar.

61
00:04:57,187 --> 00:05:02,893
Y de nuevo, puede eliminar los platos haciendo clic en la

62
00:05:02,893 --> 00:05:09,270
cruz para eliminar el elemento de su lista de favoritos, como se muestra aquí.

63
00:05:09,270 --> 00:05:14,181
Ahora también podemos añadir, como te das cuenta, podemos ir a cualquier plato y

64
00:05:14,181 --> 00:05:17,140
luego agregar comentarios sobre ese plato.

65
00:05:17,140 --> 00:05:19,317
Así que permítanme añadir un comentario aquí.

66
00:05:25,868 --> 00:05:31,364
Y en el momento en que envíe el comentario, verá inmediatamente que

67
00:05:31,364 --> 00:05:38,562
su comentario se mostrará aquí con el nombre del autor también incluido aquí.

68
00:05:38,562 --> 00:05:41,572
Y con esa fecha como se muestra aquí.

69
00:05:41,572 --> 00:05:46,592
Por lo tanto, puede ver que el envío de comentarios del usuario

70
00:05:46,592 --> 00:05:49,592
será compatible con cualquier plato específico.

71
00:05:49,592 --> 00:05:54,294
Por lo tanto, así es como su aplicación funciona con esa

72
00:05:54,294 --> 00:05:58,211
Firebase como back-end como servicio.

73
00:05:58,211 --> 00:06:03,071
Ahora, por supuesto, debe preguntarse, ¿cómo rediseñamos nuestra aplicación para

74
00:06:03,071 --> 00:06:07,882
hacer uso de Firebase en lugar de usar el

75
00:06:07,882 --> 00:06:12,110
servidor estándar Express MongoDB que hemos construido anteriormente?

76
00:06:13,220 --> 00:06:18,606
Para configurar la aplicación para que se comunique con el servidor Firebase,

77
00:06:18,606 --> 00:06:21,349
debe instalar el módulo Firebase.

78
00:06:21,349 --> 00:06:25,964
El módulo Firebase, como puede ver aquí, proporciona la herramienta y la

79
00:06:25,964 --> 00:06:31,772
infraestructura que le permiten comunicarse con el servidor Firebase.

80
00:06:31,772 --> 00:06:35,639
Y para instalar esto en su aplicación,

81
00:06:35,639 --> 00:06:40,141
escriba la instalación menos guardar firebase.

82
00:06:40,141 --> 00:06:41,893
Ahora, ¿cómo hacer uso de estos?

83
00:06:41,893 --> 00:06:47,461
Lo ilustraré corriendo rápidamente a través del código modificado

84
00:06:47,461 --> 00:06:53,492
donde hacemos uso de Firebase para modificar la aplicación que hemos desarrollado

85
00:06:53,492 --> 00:06:59,185
anteriormente para hacer uso del servidor Firebase como back-end como servicio.

86
00:06:59,185 --> 00:07:04,065
Vamos a hacer un rápido recorrido por nuestra aplicación React modificada para entender

87
00:07:04,065 --> 00:07:08,825
cómo se ha reconfigurado para comunicarse con nuestro servidor Firebase.

88
00:07:08,825 --> 00:07:11,933
Comenzaremos nuestro viaje en el archivo package.json.

89
00:07:11,933 --> 00:07:13,455
Y en el archivo package.json,

90
00:07:13,455 --> 00:07:18,820
notará que he agregado en el módulo npm de Firebase a esto.

91
00:07:18,820 --> 00:07:24,020
Y así, cuando clonas el repositorio de Git y haces la instalación del hilo,

92
00:07:24,020 --> 00:07:27,880
el módulo Firebase se instala automáticamente en tu aplicación.

93
00:07:27,880 --> 00:07:31,810
Si estaba configurando una nueva aplicación React para

94
00:07:31,810 --> 00:07:33,160
comunicarse con el servidor,

95
00:07:33,160 --> 00:07:38,850
entonces necesita instalar explícitamente el módulo Firebase en su aplicación.

96
00:07:38,850 --> 00:07:44,880
Ahora, después de esto, notará cambios en la carpeta Firebase.

97
00:07:44,880 --> 00:07:47,396
Aquí ya hemos visto el archivo de configuración.

98
00:07:47,396 --> 00:07:51,410
El otro archivo que notará aquí se llama firebase.js.

99
00:07:51,410 --> 00:07:55,227
Ahora es aquí donde configuramos nuestra aplicación para comunicarse con

100
00:07:55,227 --> 00:07:56,530
el servidor Firebase.

101
00:07:56,530 --> 00:07:58,744
Así que estamos importando la configuración aquí.

102
00:07:58,744 --> 00:08:01,786
Y luego importando base de fuego desde base de fuego.

103
00:08:01,786 --> 00:08:06,624
Y luego inicia la aplicación aquí suministrando la configuración a Firebase,

104
00:08:06,624 --> 00:08:10,838
así que aquí es donde proporciona toda la información de configuración para

105
00:08:10,838 --> 00:08:14,835
que su cliente pueda comunicarse con el servidor Firebase.

106
00:08:14,835 --> 00:08:19,738
Además, estoy exportando algunas de estas exportaciones de

107
00:08:19,738 --> 00:08:23,280
aquí llamadas auth, fireauth y así sucesivamente.

108
00:08:23,280 --> 00:08:27,915
Estos voy a hacer uso de en los creadores de acción con el

109
00:08:27,915 --> 00:08:31,524
fin de comunicarse con mi servidor Firebase.

110
00:08:33,371 --> 00:08:40,580
Ahora, después de esto, las modificaciones principales estarán en el archivo ActionCreators.

111
00:08:40,580 --> 00:08:46,222
Ahora no he agregado en ninguna acción nueva, sino que toda la comunicación

112
00:08:46,222 --> 00:08:51,866
con el servidor ahora se modifica para comunicarse con nuestro servidor Firebase.

113
00:08:51,866 --> 00:08:55,478
Así que en lugar de usar el fetch, como hicimos antes,

114
00:08:55,478 --> 00:08:57,979
ahora vamos a usar firestore.

115
00:08:57,979 --> 00:09:02,466
Como puede ver, he importado el auth, firestore,

116
00:09:02,466 --> 00:09:07,237
fireauth y firebasestore del módulo firebase que

117
00:09:07,237 --> 00:09:11,260
he configurado anteriormente en la carpeta firebase.

118
00:09:11,260 --> 00:09:16,170
Y luego todo esto me permitirá comunicarme con mi servidor Firebase.

119
00:09:16,170 --> 00:09:20,320
Para obtener una colección de mi Firebase,

120
00:09:20,320 --> 00:09:25,050
simplemente decimos firestore.collection y luego proporcionamos el nombre de la colección.

121
00:09:25,050 --> 00:09:29,250
Y luego puede agregar a la colección diciendo, agregue, como puede ver aquí,

122
00:09:29,250 --> 00:09:37,570
que toma el elemento específico que está agregando a su colección allí.

123
00:09:37,570 --> 00:09:40,110
Así que ese es el documento que vamos a agregar a nuestra colección.

124
00:09:40,110 --> 00:09:43,500
Así que esto es para el comentario de la publicación, como se puede ver aquí.

125
00:09:43,500 --> 00:09:48,270
Y cuando publique eso, le proporcionará de nuevo un DocRef,

126
00:09:48,270 --> 00:09:51,260
que es la referencia al documento,

127
00:09:51,260 --> 00:09:56,570
que luego puede usar para ir y buscar el documento de su servidor.

128
00:09:56,570 --> 00:10:00,180
Ahora la forma en que funciona Firebase es que proporcionará

129
00:10:00,180 --> 00:10:04,700
el ID por separado del contenido real de los documentos.

130
00:10:04,700 --> 00:10:10,550
Por lo tanto, Firebase mantiene el ID y los datos del documento por separado.

131
00:10:10,550 --> 00:10:15,450
Así que aquí tengo que combinar explícitamente los dos juntos en

132
00:10:15,450 --> 00:10:18,260
un objeto JavaScript aquí, llamado comentario aquí.

133
00:10:18,260 --> 00:10:23,450
Entonces, como ve en el documento, por lo que nota que cuando

134
00:10:23,450 --> 00:10:29,710
inserto un elemento en una colección, devuelve un DocRef aquí.

135
00:10:29,710 --> 00:10:34,180
Y desde el DocRef, puedo obtener la identificación del documento.

136
00:10:34,180 --> 00:10:36,610
Y lo que estoy haciendo aquí es ir a

137
00:10:36,610 --> 00:10:39,464
buscar el documento correspondiente aquí.

138
00:10:39,464 --> 00:10:44,305
Y luego, una vez que el documento es recuperado, ahora, por supuesto, el documento debe existir,

139
00:10:44,305 --> 00:10:49,015
por lo que esto debe ser siempre cierto, porque acabamos de insertar el documento.

140
00:10:49,015 --> 00:10:53,032
Pero solo por el bien de la integridad, estoy haciendo un chequeo explícito para eso.

141
00:10:53,032 --> 00:10:57,576
Y luego, después de eso, los datos que están en el documento

142
00:10:57,576 --> 00:11:01,822
se obtienen diciendo doc.data, como se ve aquí.

143
00:11:01,822 --> 00:11:05,658
Y luego el id del documento se obtiene por doc.id.

144
00:11:05,658 --> 00:11:07,073
Así que estos dos son separados.

145
00:11:07,073 --> 00:11:12,708
Pero dentro de nuestro código React, siempre hemos almacenado el id y

146
00:11:12,708 --> 00:11:20,530
los datos juntos como un solo documento JSON aquí, o un objeto JavaScript aquí.

147
00:11:20,530 --> 00:11:23,340
Entonces, es por eso que estoy combinando los dos juntos

148
00:11:23,340 --> 00:11:26,800
en un solo objeto JavaScript aquí haciendo esto.

149
00:11:26,800 --> 00:11:30,490
Me verás haciendo esto repetidamente, por ejemplo,

150
00:11:30,490 --> 00:11:35,510
para promociones audaces, etc., también en ActionCreators.

151
00:11:35,510 --> 00:11:41,640
Y luego, después de eso, estoy agregando el comentario en mi tienda Redux aquí,

152
00:11:41,640 --> 00:11:44,250
y el resto del código permanece como tal.

153
00:11:44,250 --> 00:11:47,016
Del mismo modo, para ir a buscar platos,

154
00:11:47,016 --> 00:11:52,980
verás cómo vamos a buscar varios platos de la base de Firebase.

155
00:11:52,980 --> 00:11:58,330
Así que estamos viendo firestore.Collection platos obtener y obtener los platos.

156
00:11:58,330 --> 00:12:02,520
Ahora, cuando obtengas eso, entonces me dará un valor de instantánea,

157
00:12:02,520 --> 00:12:06,680
que es la instantánea del estado actual de esta colección, y de eso,

158
00:12:06,680 --> 00:12:10,690
tengo que entrar y recuperar todos y cada uno de los platos.

159
00:12:10,690 --> 00:12:15,400
Y entonces estoy reconstruyendo mi variedad de platos aquí.

160
00:12:15,400 --> 00:12:18,990
Ahora note que, como dije, el id y los datos son separados, por lo que

161
00:12:18,990 --> 00:12:23,495
necesito combinarlos, porque esa es la forma en que uso los datos en mi

162
00:12:23,495 --> 00:12:27,660
aplicación React, así que estoy introduciendo eso en la matriz de platos.

163
00:12:27,660 --> 00:12:32,980
Y luego finalmente devolver los platos que luego se insertarán en mi

164
00:12:32,980 --> 00:12:34,380
tienda Redux aquí.

165
00:12:34,380 --> 00:12:39,642
Así que este tipo de cambios se han realizado en ActionCreators.

166
00:12:39,642 --> 00:12:45,843
Ahora el proceso de inicio de sesión y cierre de sesión será manejado abajo aquí abajo.

167
00:12:45,843 --> 00:12:51,445
Así que para el inicio de sesión, la autenticación que hemos importado desde Firebase,

168
00:12:51,445 --> 00:12:56,372
la autenticación es la que me permite hacer el inicio de sesión y cierre de sesión.

169
00:12:56,372 --> 00:12:59,363
Por lo tanto, si está iniciando sesión con correo electrónico y contraseña,

170
00:12:59,363 --> 00:13:03,940
se proporciona con este método llamado signinWithEmailAndPassword.

171
00:13:03,940 --> 00:13:10,250
Y luego proporciona el correo electrónico y la contraseña como los dos parámetros aquí.

172
00:13:10,250 --> 00:13:14,010
Y luego eso le permitirá iniciar sesión.

173
00:13:14,010 --> 00:13:20,985
Y cuando inicia sesión, la autenticación proporciona este objeto llamado CurrentUser en la autenticación.

174
00:13:20,985 --> 00:13:26,455
Entonces obtienes la información del usuario diciendo auth.currentUser aquí.

175
00:13:26,455 --> 00:13:31,235
Y también estoy almacenando la información del usuario en mi base de datos.

176
00:13:31,235 --> 00:13:33,879
Ahora no estoy rastreando explícitamente ningún token y

177
00:13:33,879 --> 00:13:37,945
cosas por el estilo porque eso es rastreado automáticamente por auth para mí,

178
00:13:37,945 --> 00:13:40,606
que es proporcionado por el módulo npm de Firebase.

179
00:13:40,606 --> 00:13:43,723
Así que solo estoy aprovechando eso para rastrear el uso actual.

180
00:13:43,723 --> 00:13:49,078
Si el usuario actual es nulo, entonces sé que mi cliente

181
00:13:49,078 --> 00:13:53,840
no tiene ningún usuario iniciado sesión en el servidor.

182
00:13:53,840 --> 00:13:59,510
Y de manera similar, para cerrar la sesión del usuario, simplemente digo auth.signout.

183
00:13:59,510 --> 00:14:04,370
De nuevo, la documentación de cómo hacer uso del

184
00:14:04,370 --> 00:14:09,060
módulo Filebase npm está disponible en la documentación de Firebase.

185
00:14:09,060 --> 00:14:14,238
Así que puede buscar fácilmente eso para entender cómo aprovechar

186
00:14:14,238 --> 00:14:18,993
Firebase para hacer uso de todas estas diferentes funciones

187
00:14:18,993 --> 00:14:23,443
que están disponibles desde el módulo npm de Firebase.

188
00:14:23,443 --> 00:14:27,999
Además, para los favoritos, o bien publicamos un favorito y

189
00:14:27,999 --> 00:14:32,454
entonces necesitas publicar elementos, por lo que dirías agregar, y

190
00:14:32,454 --> 00:14:36,333
cuando necesites obtener un elemento, dirás obtener.

191
00:14:36,333 --> 00:14:41,455
E incluso puede obtener un elemento de un documento específico en las colecciones.

192
00:14:41,455 --> 00:14:45,245
Si desea un documento específico en la colección, diríjase .doc.

193
00:14:45,245 --> 00:14:49,015
Y luego suministra la identificación del documento aquí.

194
00:14:49,015 --> 00:14:51,585
Así es como se puede obtener un documento específico.

195
00:14:53,465 --> 00:14:56,265
También elimine favoritos, y busque favoritos y así sucesivamente.

196
00:14:56,265 --> 00:15:01,640
Ahora, para que los favoritos se almacenen en mi Firebase,

197
00:15:01,640 --> 00:15:09,100
los favoritos se almacenan como el ID de usuario y el ID del plato aquí.

198
00:15:09,100 --> 00:15:13,680
Ahora firestore en sí no tiene ninguna forma de rellenar la

199
00:15:13,680 --> 00:15:15,800
información del plato en el ID del plato.

200
00:15:15,800 --> 00:15:21,214
Así que sólo estoy buscando toda la información del plato,

201
00:15:21,214 --> 00:15:27,694
por lo que este es cada favorito es un par, usuario y par de ID de plato.

202
00:15:27,694 --> 00:15:30,431
Así que sólo estoy metiendo eso en mis favoritos aquí.

203
00:15:30,431 --> 00:15:35,859
Pero entonces eso también significa que necesito modificar mi componente favorito para

204
00:15:35,859 --> 00:15:40,091
que pueda usar el ID del plato y luego indexar en los platos que

205
00:15:40,091 --> 00:15:45,560
se almacenan en mi tienda Redux, y obtener la información del plato.

206
00:15:45,560 --> 00:15:49,194
O la alternativa sería ir al servidor y luego buscar la información.

207
00:15:49,194 --> 00:15:53,560
Pero como ya tengo los datos sobre los platos en mi tienda Redux,

208
00:15:53,560 --> 00:15:58,234
porque ya he hecho los platos para buscar toda la información

209
00:15:58,234 --> 00:15:59,474
sobre los platos.

210
00:15:59,474 --> 00:16:05,492
Estoy directamente entrando en el objeto platos en mi Redux arrancó y

211
00:16:05,492 --> 00:16:08,190
buscar esta información.

212
00:16:08,190 --> 00:16:12,250
Por lo tanto, esto también significa que hay modificaciones en el componente principal.

213
00:16:12,250 --> 00:16:18,894
En el componente principal, notarías que cuando hago el favorito aquí para

214
00:16:18,894 --> 00:16:25,343
el detalle del plato, simplemente tendría que comparar el plato con ese DisHID.

215
00:16:25,343 --> 00:16:29,188
Entonces el plato aquí en mi favorito es el Dishid en sí, así que

216
00:16:29,188 --> 00:16:31,540
solo necesito hacer la comparación.

217
00:16:31,540 --> 00:16:35,334
Por lo tanto, habrá un cambio menor en esta línea en el DishiD.

218
00:16:35,334 --> 00:16:39,503
Y también notarás que cuando llamo

219
00:16:39,503 --> 00:16:42,786
a los favoritos, además de suministrar sus favoritos,

220
00:16:42,786 --> 00:16:47,322
también suministro los platos como uno de los accesorios para mis favoritos.

221
00:16:47,322 --> 00:16:51,711
Entonces ese es otro cambio que notará en el componente principal.

222
00:16:51,711 --> 00:16:54,990
Y de manera similar, en el componente favorito,

223
00:16:54,990 --> 00:16:59,996
notará que dentro del componente favorito abajo aquí,

224
00:16:59,996 --> 00:17:04,933
notará que, cuando esté representando el componente favorito.

225
00:17:04,933 --> 00:17:09,761
Entonces, justo aquí en esta función aquí, const favoritos,

226
00:17:09,761 --> 00:17:14,113
lo que estoy haciendo es entrar en los platos favoritos,

227
00:17:14,113 --> 00:17:19,338
platos es una variedad de todos los platos aquí, así que mapeo a través de eso.

228
00:17:19,338 --> 00:17:23,591
Así que mira cada Dishid, luego de los platos,

229
00:17:23,591 --> 00:17:27,545
filtré ese plato en particular.

230
00:17:27,545 --> 00:17:29,484
Y luego obtuve el DishiD, así que

231
00:17:29,484 --> 00:17:33,023
aquí me verás usando el filtro de matriz de JavaScript aquí.

232
00:17:33,023 --> 00:17:36,419
Filtrará esa información específica del plato y

233
00:17:36,419 --> 00:17:38,687
luego renderizará ese plato en particular.

234
00:17:38,687 --> 00:17:43,415
Así que este es un trabajo adicional que necesito hacer en mi

235
00:17:43,415 --> 00:17:48,840
componente favorito para renderizar cada uno de los platos allí.

236
00:17:48,840 --> 00:17:55,900
Entonces, tal tipo de modificaciones menores que notará en un par de los componentes,

237
00:17:55,900 --> 00:17:59,840
específicamente el detalle del plato, el favorito y el componente principal.

238
00:17:59,840 --> 00:18:05,410
Ahí es donde se han realizado algunos cambios menores para facilitar que la

239
00:18:05,410 --> 00:18:09,980
aplicación React pueda aprovechar el servidor Firebase.

240
00:18:09,980 --> 00:18:12,790
Así que esta es una revisión rápida de cómo

241
00:18:12,790 --> 00:18:17,870
mi aplicación React se ha modificado para comunicarse con mi servidor Firebase.

242
00:18:17,870 --> 00:18:23,257
Ahora, como con Angular, también teníamos el Angularfire, que

243
00:18:23,257 --> 00:18:29,680
nos proporcionaba una forma de aprovechar junto con Firebase para comunicarnos con el servidor.

244
00:18:29,680 --> 00:18:35,659
React no tiene ninguna contraparte de este tipo, así que estoy usando directamente el

245
00:18:35,659 --> 00:18:41,472
módulo npm de Firebase que proporciona la base básica para acceder al servidor Firebase.

246
00:18:41,472 --> 00:18:46,165
Y luego aprovechando las funciones que proporciona para comunicarse con mi

247
00:18:46,165 --> 00:18:47,382
servidor Firebase. Dedique

248
00:18:47,382 --> 00:18:52,506
algún tiempo nuevamente a revisar este código para entender cómo

249
00:18:52,506 --> 00:18:57,534
he aprovechado los módulos npm de Firebase para comunicarme

250
00:18:57,534 --> 00:19:03,090
con mi servidor Firebase que he configurado en el ejercicio anterior.

251
00:19:03,090 --> 00:19:08,293
Con esto, le he dado una visión general rápida de cómo puede configurar su

252
00:19:08,293 --> 00:19:13,957
aplicación React para interactuar con Firebase back-end como servicio, y

253
00:19:13,957 --> 00:19:20,012
luego ser capaz de admitir varias operaciones que tiene dentro de su aplicación.

254
00:19:20,012 --> 00:19:24,632
Ahora, con esto, completo este ejercicio en particular donde he

255
00:19:24,632 --> 00:19:28,758
ilustrado en esta lección sobre back-end como servicio y

256
00:19:28,758 --> 00:19:33,645
también he demostrado Firebase como un ejemplo de back-end como servicio.

257
00:19:33,645 --> 00:19:36,995
[ MÚSICA]