En este artículo, vamos a abordar el proceso de implementación de la pantalla de inicio de sesión (login) en nuestra aplicación. Esta es una parte fundamental para gestionar la autenticación de usuarios y garantizar una experiencia segura y eficiente.
Paso 1: Preparación del Proyecto
Lo primero que debemos hacer es configurar la navegación en la aplicación. Para ello, modificamos el valor de Initial Road en la configuración de la app, cambiándolo por Authentication. Al refrescar la aplicación, accederemos a la pantalla de login.
A continuación, crearemos una nueva carpeta en el directorio src llamada Services, donde agregaremos un archivo index.ts para gestionar nuestras funciones de servicio. Dentro de este archivo, pegaremos el código que hemos preparado para hacer peticiones HTTP de forma eficiente.
Paso 2: Configuración de la Función de Peticiones HTTP
La función que vamos a utilizar es una herramienta para realizar peticiones HTTP, lo cual nos permitirá interactuar con el backend de nuestra aplicación. A continuación, implementamos una función helper que facilitará estas interacciones.
Con esta configuración, nuestra función HTTP puede realizar peticiones a una API externa. El código de la API y sus constantes se exportan de manera centralizada en el archivo Core Constants para su reutilización en diferentes partes de la aplicación.
Paso 3: Creación del Estado en el Login
Ahora, pasamos a la pantalla de login, donde gestionaremos los estados de los campos de entrada. Usamos el hook useState de React para manejar los valores del email y la contraseña de los usuarios.
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
El valor de cada campo estará vinculado a estos estados, y mediante la función onChange, actualizamos el estado conforme el usuario ingresa la información.
Paso 4: Validación de los Campos de Entrada
Antes de proceder con la autenticación, es importante validar que ambos campos (email y contraseña) hayan sido completados. Para esto, implementamos una función onSubmit que verifica si los campos están vacíos y muestra una alerta de error en caso necesario.
Paso 5: Realización de la Petición HTTP para la Autenticación
Una vez validada la información, enviamos los datos de login a nuestra API utilizando la función makeHttpRequest que ya configuramos previamente. Esta función recibe como parámetros la URL de la API, el path del endpoint (/login) y los datos necesarios (email y contraseña).
El código sería algo similar a esto:
makeHttpRequest({
host: API_URL,
path: "/login",
body: { email, password }
});
Paso 6: Manejo de Errores y Respuestas
El proceso de autenticación podría fallar por varias razones, como una contraseña incorrecta o problemas con la API. Para manejar estos errores, implementamos un bloque try-catch que captura cualquier excepción y muestra un mensaje de error al usuario.
Además, añadimos un estado loading para gestionar la carga de la solicitud, mostrando un spinner mientras la petición está en proceso.
Paso 7: Navegación a la Aplicación Principal
Una vez que el usuario se autentica correctamente, la aplicación debe redirigirlo a la página principal. Utilizamos el objeto Navigation para navegar a la siguiente vista (Main App).
Este proceso de redirección es esencial para una experiencia fluida, ya que permite que los usuarios se desplacen sin interrupciones a la aplicación después de iniciar sesión correctamente.
Paso 8: Pruebas y Verificación
Es importante realizar pruebas para asegurarnos de que el login funcione correctamente. En este caso, probamos la funcionalidad utilizando un usuario con datos válidos y confirmamos que la API responde correctamente con un código de estado 200.
Si hay un error, como un usuario no autorizado, la API responderá con un código de estado 401, indicando que la autenticación ha fallado.
Paso 9: Correción de Errores y Últimas Mejoras
Después de las pruebas, realizamos pequeñas correcciones en el código. Por ejemplo, convertimos el email a minúsculas antes de enviarlo a la API para evitar problemas con la comparación del texto.
const emailLowerCase = email.toLowerCase();
Con esto, garantizamos que la autenticación sea más robusta.
Conclusión
Finalmente, hemos integrado la funcionalidad de login en nuestra aplicación con éxito. La interacción con la API funciona correctamente, y la navegación hacia la aplicación principal es fluida. Este proceso es esencial para garantizar que los usuarios puedan acceder a sus cuentas de forma segura.
No olvides realizar un git commit para guardar todos los cambios realizados:
git add .
git commit -m "Integración API y pantalla de login"
Con estos pasos completados, tu aplicación ahora tiene una funcionalidad básica de autenticación que podrás expandir en el futuro.
Este artículo proporciona una visión clara y estructurada de cómo implementar un sistema de login en una aplicación. Si tienes alguna pregunta o necesitas más detalles, no dudes en dejarnos un comentario. ¡Gracias por leer!