Ahora que hemos completado el desarrollo de un servidor API REST completo usando Loopback,
la siguiente pregunta inmediata que surgirá en su mente es,
¿cómo adaptamos la aplicación React para hacer uso de este servidor de API REST?
Como hemos hecho en los casos anteriores,
también necesitaremos reconfigurar nuestra aplicación React para hacer uso específicamente de los
extremos de la API REST y
las diversas solicitudes de API REST tal como expone nuestro servidor Loopback.
Para comenzar en este ejercicio, primero,
clone el repositorio git que contiene
una nueva aplicación completada que se comunica con nuestro servidor Loopback.
Por lo tanto, para hacer eso, vaya a su ubicación conveniente en sus computadoras.
Voy a clonar el repositorio git
escribiendo git clon
https://github.com/jmuppala/conFusion-React-Loopback.git
y luego clonar este repositorio git.
Una vez que se clona el repositorio git,
nos moveremos a la carpeta Confusion-React-Loopback y
luego realizaremos una instalación de hilo para instalar todos los módulos de nodo para esta aplicación.
Antes de iniciar la aplicación React,
asegúrese de que el servidor Loopback está configurado correctamente.
En el servidor Loopback,
en la carpeta cliente,
mueva las imágenes que hemos dado como el archivo images.zip,
descomprimirlo, y luego mueva las imágenes a
la carpeta de imágenes debajo de la carpeta cliente como se muestra aquí.
Además, cambie el nombre del archivo root.js como root.jsold o elimine el archivo root.js.
Ya no necesitamos esto en nuestra aplicación porque queremos asegurarnos de que
nuestro servidor esté guardando los contenidos de la carpeta del cliente.
Entonces, para lograr eso,
abramos el archivo middleware.json,
y en el archivo middleware.json,
en la parte de archivos,
agreguemos esto a la parte de archivos de su archivo middleware.json.
Por lo tanto, diremos, Loopback estático y params: dollar bank dot dot slash client»,
lo que indica que su servidor Loopback guardará
contenido estático de la carpeta cliente aquí.
Después de realizar estos cambios,
puede iniciar su servidor.
Asegúrese de que su servidor MongoDB
también está en funcionamiento antes de iniciar su servidor Loopback.
Luego, después de eso, compilaremos e iniciaremos nuestro cliente React.
Ahora, de nuevo asegurándose de que su servidor MongoDB y su servidor Loopback están en funcionamiento,
vaya al terminal y agregue el terminal.
Type yarn start para iniciar nuestra aplicación Loopback, la aplicación React.
Por lo tanto, cuando la aplicación se inicia en el navegador,
notará que la aplicación React basada en Loopback se comporta
exactamente igual que las versiones anteriores de la aplicación React.
Por lo tanto, aquí tenemos la página de inicio,
luego tenemos la página Acerca de nosotros como vemos aquí,
luego la página de menú donde se enumeran los elementos del menú aquí,
la página de contacto como se esperaba.
Entonces déjame volver a la página de inicio y luego iniciar sesión como administrador.
Por lo tanto, vamos a iniciar sesión como administrador,
y luego usted será capaz de ver Mis favoritos.
Inicié sesión antes y luego agregué un elemento a Mis favoritos.
Ahora vamos al Menú y luego añadimos un segundo elemento a Mis Favoritos.
Por lo tanto, aquí vamos a añadir este elemento a los favoritos,
y entonces usted sería capaz de ver que estos dos elementos están ahora en Mis favoritos.
Del mismo modo, puede eliminar elementos de los favoritos.
Por lo tanto, sigamos adelante y eliminemos esto de nuestros Favoritos.
Volviendo al elemento Menú,
agreguemos un comentario a uno de los platos.
Entonces, déjame hacer clic en este plato,
y luego enviaremos un comentario.
Por lo tanto, cuando enviamos un comentario,
como puede ver, el comentario se agrega a
nuestro servidor allí como se
esperaba y el resultado se muestra en la página Detalles del plato aquí.
De nuevo volviendo a la página de inicio,
encontramos que nuestra aplicación React ahora es capaz de comunicarse con
el servidor Loopback y luego obtener
los datos del servidor e interactuar con el servidor como se esperaba.
Ahora, por supuesto, la pregunta que surgiría en su mente es,
¿cómo se comunica esta aplicación Loopback con el servidor Loopback?
Ahora, aquí es donde notaríamos que para Loopback,
ya que el servidor de Loopback expone los extremos de la API REST,
mi aplicación React puede acceder al servidor Loopback en
los extremos de la API REST correspondientes y luego comunicarse con el servidor,
como hicimos con nuestro propio servidor API REST que habíamos implementado antes.
Entonces, sigamos adelante y echemos un vistazo al código para la aplicación React modificada.
Ir al código de nuestra aplicación,
los principales cambios que notará estarán en el archivo ActionCreators.js.
Aquí, notará que ahora nos estamos comunicando con
el servidor Loopback en lugar del servidor REST API que teníamos anteriormente.
Por lo tanto, la recuperación ahora estará accediendo al servidor Loopback en
el punto final de api/comments o en el punto final de api/dish y así sucesivamente.
Por lo tanto, todas estas solicitudes de búsqueda se actualizan para acceder al instante a nuestro servidor Loopback.
Por lo tanto, notará cambios similares allí.
Ahora, además de iniciar sesión en nuestro servidor Loopback,
así que vamos al código de inicio de sesión aquí.
Por lo tanto, en el usuario de inicio de sesión,
estamos publicando una búsqueda en el punto final BaseURL y API/clientes/inicio de sesión,
y luego proporcionaremos las credenciales en el cuerpo del mensaje de solicitud que sale.
En respuesta a eso,
el servidor devolverá la respuesta.
A continuación, la respuesta contiene la información del token.
La información del token se devuelve en forma de
ID del mensaje de respuesta.
Por lo tanto, el ID en sí sirve como el token.
Por lo tanto, el mensaje de respuesta en sí,
voy a guardar esto en mi almacenamiento local como se muestra aquí.
Restringificamos el mensaje de respuesta y luego lo almacenamos allí.
Este mensaje de respuesta, Response.id, contiene el token.
Por lo tanto, response.id sirve como el token web JSON para acceder al servidor de bucle invertido.
Entonces, es por eso que notará que en
situaciones donde necesito acceder al servidor, por ejemplo,
notaremos que cuando busquemos o publiquemos su favorito en el servidor,
notará que obtengo el token diciendo,
let token, JSON parse,
localStorage, getItem, token aquí,
y luego en el campo de encabezado de autorización,
dije que el campo de autorización para ser token.id aquí como se muestra aquí.
Por lo tanto, así es como podremos autenticarnos en el servidor Loopback.
Por lo tanto, aquí puede ver que dice, BaseURL, api/favorites,
y luego obtener la lista de favoritos del servidor,
y luego guardarla en nuestra tienda redux.
Por lo tanto, bueno, gran parte del código sigue siendo el mismo,
excepto por las actualizaciones que hemos hecho para
acceder a los extremos de la API REST Loopbacks.
Ahora, para Angular, tenemos un SDK de Loopback que se puede construir para nuestra aplicación Angular.
Pero para React, no existe tal soporte disponible desde Loopback,
por lo que tenemos que recurrir al acceso directo a los
extremos de la API de REST de Loopback como se muestra aquí usando fetch,
y luego podemos comunicarnos con el servidor Loopback.
Con esta rápida comprensión de cómo
se ha actualizado nuestra aplicación React para acceder a nuestro servidor Loopback,
completamos el examen del servidor Loopback.
Dedique más tiempo a buscar algunos de los componentes y vea
cómo utilizan la información obtenida del servidor Loopback.
Notará que la mayoría de los componentes siguen siendo exactamente los mismos que antes, a
excepción de algunas modificaciones menores en el componente favorito para obtener
la información del servidor Loopback
y luego utilizarla para representar la lista de elementos favoritos.
Aparte de eso, gran parte de los cambios se limitan al archivo ActionCreators.js,
donde hemos actualizado la búsqueda para utilizar la URL de
nuestro servidor Loopback para poder acceder a los diversos extremos de la API REST.
Por lo tanto, con esto, le he demostrado rápidamente cómo puede construir su aplicación.
Con esta rápida introducción a cómo podemos
hacer uso del Loopback dentro de nuestra aplicación,
llegamos al final de este ejercicio.