Con la popularidad de JavaScript en aumento, cada vez es más común construir aplicaciones web usando JavaScript. Uno de los principales requisitos de estas aplicaciones es el uso de APIs REST para comunicarse con el backend.
Una de las formas más comunes de conectarse al backend es utilizando una API REST construida con Express.js, un potente framework de Node.js. Construiremos una aplicación swipe full-stack con React, Express.js y Mongo. Dependiendo de la dirección del swipe, se activan diferentes eventos en el backend.
Índice de contenido
1. Requisitos previos
2. Objetivos
3. Configuración de la aplicación swipe
3.1 Configurar el backend
4. Conclusión
Requisitos previos
- Conceptos básicos de las APIs RESTful.
- Conocimientos básicos de React.js.
- Conocimientos básicos en Express.js para nuestra aplicación backend.
- MongoDB localmente o en la nube. En este tutorial se utilizara MongoDB en la nube.
- Configuración del entorno de desarrollo local.
Nota: Si utiliza un Mac, puede instalar MongoDB Cloud siguiendo las instrucciones de la página de MongoDB Cloud.
Objetivos
Al final de este tutorial, serás capaz de conectar tu MongoDb local a una instancia en la nube y construir una aplicación swipe usando React.js y Express.js.
Configuración de la aplicación swipe
Para empezar se debe configurar el frontend de la aplicación swipe. Ejecuta el siguiente comando para instalar las dependencias necesarias:
A continuación, se necesita instalar algunos paquetes. Ya que se está construyendo una aplicación swipe, React tiene un componente React Tinder Card que se utilizara para desarrollar esta aplicación. Además, queremos que la aplicación sea capaz de conectarse al servidor backend, y necesitaremos instalar Axios para hacer peticiones a recursos remotos. Por último, necesitaremos instalar React-Bootstrap para estilizar y UUID para construir nuestra aplicación.
Ejecute los siguientes comandos para instalar las dependencias anteriores:
Ahora que hemos instalado nuestras principales dependencias, vamos a crear una carpeta para nuestra aplicación. Proceda a crear una carpeta llamada swipe-app en su directorio actual.
A continuación, cree un archivo JavaScript llamado index.js en la carpeta swipe-app e importe las dependencias anteriores como se muestra a continuación:
Importamos el paquete Axios y el paquete react-tinder-card en el script anterior. También importamos react y un componente. Por último, importamos el paquete uuid.
Vamos a añadir la lógica a nuestra aplicación como se muestra a continuación:
En el script anterior, se creó un constructor. Luego añadimos un método super() para llamar al constructor padre. Luego procedemos a añadir el estado, un método handlePhotoClick() y showImageDetails(). Utilizaremos estos métodos para manejar los eventos de clic.
Mientras que el método handlePhotoClick() se invoca cuando se hace clic en una imagen, actualizará el estado de la aplicación. El método showImageDetails() también se invoca cuando se hace clic en la imagen, mostrará los detalles de la misma.
A continuación, vamos a añadir los métodos que se indican a continuación para manejar nuestra lógica clave al interactuar con la aplicación:
En el script anterior, añadimos los métodos onScreenSwipe(), handlePhotoClick() y showImageDetails(). El método onScreenSwipe() se invoca cuando el usuario desliza la pantalla. Por lo tanto, actúa como un observador para actualizar el estado de la aplicación.
El método handlePhotoClick() se invoca cuando el usuario hace clic en el botón "Me gusta". Queremos registrar las reacciones del usuario a la imagen. Por lo tanto, se utiliza el método axios.post() para registrar la reacción. El estado del botón Me gusta es verdadero o falso. Se utiliza el método !this.state.isLiked para cambiar el estado del botón Me gusta.
El método showImageDetails() se invoca cuando el usuario hace clic en una imagen. Queremos mostrar los detalles de la imagen. Por lo tanto, se utilizara el método window.alert(). Finalmente, se añaden los métodos onScreenSwipe(), handlePhotoClick() y showImageDetails() al archivo index.js.
También realizamos los ajustes necesarios cuando se invocan eventos. Por ejemplo, al deslizar la pantalla, eliminamos la imagen de la misma. Del mismo modo, actualizamos la propiedad isLiked de la imagen al hacer clic en ella.
A continuación, vamos a montar el componente como se muestra a continuación:
En la plantilla anterior, añadimos los métodos onScreenSwipe(), handlePhotoClick() y showImageDetails() a nuestros elementos. Estos elementos actúan como el disparador en el DOM. También añadimos la variable photoLikeButtonLabel a nuestros elementos. Luego definimos el componente TinderCard y añadimos los eventos. Finalmente, añadimos el método render() a nuestro componente. Esta aplicación está lista para ser usada, así que necesitamos añadir el servidor backend.
Ahora que hemos configurado nuestro frontend vamos a configurar nuestro backend.
Configurar el backend
Necesitamos crear una nueva carpeta llamada backend en nuestro directorio actual para configurar el backend.
Empecemos por configurar las rutas de la siguiente manera:
Añadimos la variable appRoute en el script anterior y definimos la ruta /photos. También añadimos la ruta /photos/photoSwipe.
A continuación, exportamos la appRoute para que esté disponible en otros archivos. Para probar la aplicación, ejecutamos los siguientes comandos:
Ahora puedes navegar a http://localhost:3000/photos para ver las fotos y realizar varias acciones.
Conclusión
Este tutorial muestra cómo configurar un frontend y un backend para nuestra aplicación utilizando React y Express.js. Podemos usar el componente TinderCard para mostrar imágenes y usar Axios para hacer llamadas a la API.
¡Gracias por llegar hasta aquí!