Construir una red social desde cero puede parecer una tarea complicada, pero con la guía correcta, puedes lograr grandes avances. Hoy, nos centraremos en un reto propuesto: crear un algoritmo que permita desarrollar una red social básica. Aquí exploraremos los pasos necesarios para lograr este objetivo, desde la autenticación de usuario hasta la validación de contraseñas y el manejo de datos para presentar un "timeline".
¿Cómo autenticar a un usuario mediante usuario y contraseña?
Primero, debemos permitir que el usuario ingrese sus credenciales. Lo haremos capturando el nombre de usuario y la contraseña a través de la consola utilizando prompt. Luego, guardaremos estos valores en variables que posteriormente usaremos para comprobar la autenticidad del usuario en nuestra base de datos.
const username =prompt("¿Cuál es tu usuario?");const password =prompt("¿Cuál es tu contraseña?");
¿Cómo validar las credenciales del usuario ingresado con la base de datos?
Seguidamente, el sistema debe verificar si el usuario y contraseña ingresados existen en una base de datos. Para ello, simulamos nuestra base de datos como un array de objetos. Crear una función que recorra este array y compare las credenciales ingresadas por el usuario.
functionusuarioExistente(username, password){for(let i =0; i < userDatabase.length; i++){if(userDatabase[i].username=== username && userDatabase[i].password=== password){console.log("Es correcto");break;}}console.log("No es correcto");}
La función usuarioExistente utiliza un bucle que itera sobre cada objeto de nuestro userDatabase, y verifica si la información se corresponde con el input del usuario.
¿Qué hacer tras la validación de credenciales?
Si el usuario y la contraseña coinciden con los registros de la base de datos, el sistema debe mostrar un mensaje de bienvenida y el "timeline" del usuario, similar al concepto de redes sociales como Twitter o Facebook. Si no coinciden, se muestra un mensaje de error y se gestiona el acceso denegado.
usuarioExistente(username, password);
Por lo tanto, el acceso seguro a los datos es crítico y es importante tener en cuenta que este ejemplo es una simplificación, ideal para entender los conceptos básicos de autenticación. Pero en un desarrollo en producción, sería necesario implementar protocolos de seguridad más avanzados.
Recomendaciones para continuar aprendiendo
A medida que avances en la construcción de tu propia red social, considera aprender más sobre:
Cifrado de contraseñas: proteger los datos sensibles del usuario.
Manipulación de DOM: para mejorar la interfaz de usuario.
Programación orientada a objetos: estructura de código escalable y eficiente.
Bases de datos NoSQL vs SQL: distinguir entre diferentes tipos de bases de datos para adaptarse a las necesidades de almacenamiento.
Este reto es solo el comienzo. La práctica y la curiosidad te ayudarán a continuar desarrollando tus habilidades de programación. ¡Ánimo! Cada línea de código que escribes es un paso hacia el dominio del arte de la programación.
Validación de Usuarios en una Red Social: Algoritmo Básico
Cabe destacar, que si este proyecto te resulta retante o no sabes como hacerlo solo no te preocupes!
Es normal, y es que hacer codigo desde cero es muchas veces un reto, y es algo a lo que debes acostumbrarte ya que en muchas pruebas tecnicas, te pediran crear cosas desde cero.
Ahora bien, si te pasa eso almenos intentalo, aunque no lo logres. Ademas, cuando sucede eso (almenos en mi caso) lo que hago es dar una breve repasada a los conceptos que necesito usar, leyendo la documentacion y pidiendo ideas de que metodo puedo usar (ya que como ves, por ejemplo algunos usaron find para comprobar si el user y password eran correctos, otros usaron el ciclo for) al pedir esas ideas puedo enfocarme en una.
Una vez lo intente y avanzo hasta donde puedo, usualmente antes de ver el video uso alguna IA como copilot para que me ayude con el resto y trato de comprender bien que errores cometi y que me falto.
Una ultima cosa (la que mas recomiendo) es que mucho antes de cada proyecto en un curso de platzi, busques dicho proyecto para ver que cosas necesita y asi enfocarte en aprender esas cosas, busca modelos o bocetos, code etc, para asi ya estes mas adaptado y te vaya mejor a la hora de hacer ese proyecto.
Pero en resumen: si te pasa, descuida! les pasa a todos, solamente repasa, prueba o intenta, y hasta donde llegues, busca ayuda y comprende que te falto. Espero que te sea util!
muchas gracias por las palabras, algunas veces uno pierde la motivacion y cosas como estas te impulsan a seguir adelante :)
Mil gracias varón.
classUsuario{constructor(username, password){this.username= username
this.password=password
}validacion(userDataBase, userTimeLine){let bandera =0for(const user of userDataBase){if(user.username===this.username&& user.password===this.password){ bandera ++console.log("Bienvenido "+this.username)for(const linetime of userTimeLine){if(linetime.username===this.username){console.log(linetime.timeLine)}}}}if(bandera ===0){console.log("Error Usuario o contraseña incorrecto")}}}const userDataBase =[{username:"Estefany",timeLine:"123"},{username:"Andres",password:"123"},{username:"Oscar",password:"123"},{username:"Mariana",password:"123"},]const userTimeLine =[{username:"Estefany",timeLine:"Me encanta JavaScript"},{username:"Oscar",timeLine:"Debeloper es lo mejor!"},{username:"Mariana",timeLine:"A mi me gusta mas el cáfe que el té"},{username:"Andres",timeLine:"Ya no quiero trabajar"},]const userId =prompt("Igrese su usuario")const password =prompt("Ingrese su contraseña")const usuario =newUsuario(userId, password)usuario.validacion(userDataBase,userTimeLine)
Roberto de Jesús Domínguez Vera, me parecio brutal la solucion que le diste, no usaste ningun metodo mas que el que creaste, y tambien esta super escalable, estoy sorprendido, felicidades.
Genial! No me salió a la primera, pero me ayudaste a ver que estaba mal. Gracias!
Hola!
Les comparto mi solución al reto.
Aquí mi solución con alguna que otra buena práctica:
////////////////////////////////////////////////////////////////// 1. El usuario debe poder ingresar su usuario y contraseña////////////////////////////////////////////////////////////////// Creaemos las variables a almacenar los inputslet user =null;let pass =null;let exit =false;inicio();functioninicio(){ingresarDatos();}functioningresarDatos(){ user =prompt('Ingrese su Usuario: '); pass =prompt('Ingrese su Contraseña: ');validarDatos();}////////////////////////////////////////////////////////////////// 2. El sistema debe ser capaz de validar si el usuario // y contraseña ingresados por el usuario existen en la base // de datos(usersDatabase)////////////////////////////////////////////////////////////////functionvalidarDatos(){for(usuario of usersDatabase){if(usuario.username== user && usuario.password== pass){ingresoExitoso()/* Retornamos una vez ya hayamos encontrado el user y pass,
ya que si sigue recorriendo el array una vez ya hemos encontrado
el valor, no se consideraría buena prática
*/return;}}ingresoFallido()}////////////////////////////////////////////////////////////////// 3. Si el usuario y contraseña son correctos, el sistema debe // mostrar un mensaje de bienvenida y mostrar el timeline del // usuario(usersTimeline).////////////////////////////////////////////////////////////////functioningresoExitoso(){/* Aquí en este caso no sé si hubo una equivocación, ya que para
mostrar los mensajes del usuario de los times como de la "DB"
deben ser iguales cosa que no son ya que empiezan con mayúsculas los
de la times.
Usé la comparción con toLowerCase() a los username de Time.
*/let mensajes = usersTimeline.filter(mensaje=> mensaje.username.toLowerCase()== user);//Muestro la contraseña solo para que vean en consola sus datos ingresadosconsole.log(`Bienvenido usuario: ${user} con contrasena: ${pass}`);for(const el of mensajes){console.log(`Mensaje: ${el.timeline}`);}}////////////////////////////////////////////////////////////////// 4. Si el usuario y contraseña son incorrectos, el sistema debe // mostrar un mensaje de error y no mostrar ningun timeline.////////////////////////////////////////////////////////////////functioningresoFallido(){console.log('El usuario y/o contraseña no están registrados.');console.log("Recarga la Página para volver a intertarlo");}```Lo hice muy al pie de la letra ya que no quiero confundir gente, ya que se pueden hacer validadores con trim, crear una función que envié mensajes y estas se registren en el array, también crear usuarios, hacer un menú para que el usuario decida si loguearse o cerrar sesión(obviamente simular sesiones) y más.
Se me olvidó quitar la variable let exit = false; para el DoWhile con la idea de volver a loguearte despues de que sea erronea o simular el cierre de sesión pero al final decidí quitar todo y hacer lo más simple el código :p
functionenviarDatos(){const nombreUsuario =document.getElementById("inputNomUsuario").value;const contraseña =document.getElementById("inputContraseña").value;const usuarioValido = usersDatabase.find(user=> user.username=== nombreUsuario && user.password=== contraseña
);if(usuarioValido){console.log(usersTimeline);}else{console.log("Nombre de usuario o contraseña incorrectos");}}const usersDatabase =[{username:"andres",password:"123",},{username:"caro",password:"456",},{username:"mariana",password:"789",},];const usersTimeline =[{username:"Estefany",timeline:"Me encata Javascript!",},{username:"Oscar",timeline:"Bebeloper es lo mejor!",},{username:"Mariana",timeline:"A mí me gusta más el café que el té",},{username:"Andres",timeline:"Yo hoy no quiero trabajar",},];```functionenviarDatos(){const nombreUsuario =document.getElementById("inputNomUsuario").value;const contraseña =document.getElementById("inputContraseña").value;const usuarioValido = usersDatabase.find(user=> user.username=== nombreUsuario && user.password=== contraseña );if(usuarioValido){console.log(usersTimeline);}else{console.log("Nombre de usuario o contraseña incorrectos");}}const usersDatabase = \[{ username:"andres", password:"123",},{ username:"caro", password:"456",},{ username:"mariana", password:"789",},];const usersTimeline = \[{ username:"Estefany", timeline:"Me encata Javascript!",},{ username:"Oscar", timeline:"Bebeloper es lo mejor!",},{ username:"Mariana", timeline:"A mí me gusta más el café que el té",},{ username:"Andres", timeline:"Yo hoy no quiero trabajar",},];![]()![]()
Hice asi usando html, css y Javascript:
login:
validaciones
COn ayuda de sort y convertir las fechas a segundos pude ordenar los post del mas reciente al mas antiguo:
const usersDatabase=[{username:"andres",password:"123"},{username:"caro",password:"456"},{username:"mariana",password:"789"}];const usersTimeline=[{username:"Estefany",timeline:"Me encata Javascript!"},{username:"Oscar",timeline:"Bebeloper es lo mejor!"},{username:"Mariana",timeline:"A mi me gusta más el café que el té"},{username:"Andres",timeline:"Yo hoy no quiero trabajar"}];let password;let user;let response =false;functioncheck(user, pass){for(let i =0; i < usersDatabase.length; i++){if(usersDatabase[i].username== user && usersDatabase[i].password== pass){ response =true;}}if(response ==false){console.log('¡ERROR! usuario o contraseña incorrectos.');}elseif(user =='andres'){return3;}elseif(user =='caro'){return1;}elseif(user =='mariana'){return2;}}functionprint(id){console.log(`Bienvenido de nuevo ${usersTimeline[id].username}!!!
timeline: ---${usersTimeline[id].timeline}---`)}user =prompt('Ingrese su usuario:');password =prompt('Ingrese su contraseña:');print(check(user, password));
Mi solución:
Abajo pongo mi código con el cual creo haber resuelto el ejercicio. No se ve estético en la pantalla ni en la consola, pero se producen los efectos.
Y este es mi HTML:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>Te damos la bienvenida a nuestra red social.<input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario"><input type="text" id="inputContraseña" placeholder="Escribe tu contraseña"><button onclick="enviarDatos()">Enviar</button></p><script src="red_social.js"></script></body></html>```\<!DOCTYPE html>\<html>\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>Document\</title>\</head>\<body> \<p>Te damos la bienvenida a nuestra red social. \<input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario"> \<input type="text" id="inputContraseña" placeholder="Escribe tu contraseña"> \<button onclick="enviarDatos()">Enviar\</button>\</p> \<script src="red\_social.js">\</script>\</body>\</html>
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login con Timeline</title></head><body><h3>Iniciar sesión</h3><form id="loginForm"><label for="username">Usuario:</label><input type="text" id="username" required><br><br><label for="password">Contraseña:</label><input type="password" id="password" required><br><br><button type="submit">Ingresar</button></form><div id="message"></div><div id="timeline" style="display: none;"><h4>Bienvenido a tu timeline</h4><div id="userTimeline"></div></div><script>// Base de datos simulada de usuarios y timelinesconst usersDatabase =[{username:"andres",password:"123"},{username:"andrew",password:"456"},{username:"mariana",password:"789"},];const usersTimeline =[{username:"andrew",timeline:"Me encanta Javascript!"},{username:"Oscar",timeline:"Bebeloper es lo mejor!"},{username:"Mariana",timeline:"A mí me gusta más el café que el té"},{username:"Andres",timeline:"Yo hoy no quiero trabajar"},];// Función para verificar si el usuario y contraseña son correctosfunctionusuarioExistente(username, password){return usersDatabase.some(user=> user.username.toLowerCase()=== username.toLowerCase()&& user.password=== password);}// Función para mostrar el timeline del usuariofunctionmostrarTimeline(username){const userPosts = usersTimeline.filter(post=> post.username.toLowerCase()=== username.toLowerCase());const userTimeline =document.getElementById('userTimeline'); userTimeline.innerHTML='';if(userPosts.length>0){ userPosts.forEach(post=>{const postElement =document.createElement('p'); postElement.textContent= post.timeline; userTimeline.appendChild(postElement);});}else{ userTimeline.textContent='No tienes publicaciones en tu timeline.';}}// Manejo del formulario de inicio de sesióndocument.getElementById('loginForm').addEventListener('submit',function(event){ event.preventDefault();// Obtener valores de usuario y contraseñaconst username =document.getElementById('username').value;const password =document.getElementById('password').value;// Verificar si el usuario existe y mostrar su timelineif(usuarioExistente(username, password)){document.getElementById('message').innerText=Bienvenido a tu cuenta, ${username}!;document.getElementById('timeline').style.display='block';mostrarTimeline(username);}else{document.getElementById('message').innerText='Uuups, usuario o contraseña incorrectos!';document.getElementById('timeline').style.display='none';}// Limpiar formulariodocument.getElementById('loginForm').reset();});</script></body></html>```\<!DOCTYPE html>\<html lang="es">\<head>  \<meta charset="UTF-8">  \<meta name="viewport" content="width=device-width, initial-scale=1.0">  \<title>Login con Timeline\</title>\</head>\<body>  \<h3>Iniciar sesión\</h3>  \<form id="loginForm">  \<label for="username">Usuario:\</label>  \<input type="text" id="username" required>  \<br>\<br>  \<label for="password">Contraseña:\</label>  \<input type="password" id="password" required>  \<br>\<br>  \<button type="submit">Ingresar\</button>  \</form>  \<div id="message">\</div>  \<div id="timeline" style="display: none;">  \<h4>Bienvenido a tu timeline\</h4>  \<div id="userTimeline">\</div>  \</div>  \<script> // Base de datos simulada de usuarios y timelines const usersDatabase = \[ {username:"andres",password:"123"}, {username:"andrew",password:"456"}, {username:"mariana",password:"789"}, ];   const usersTimeline = \[ {username:"andrew",timeline:"Me encanta Javascript!"}, {username:"Oscar",timeline:"Bebeloper es lo mejor!"}, {username:"Mariana",timeline:"A mí me gusta más el café que el té"}, {username:"Andres",timeline:"Yo hoy no quiero trabajar"}, ]; // Función para verificar si el usuario y contraseña son correctos functionusuarioExistente(username, password){ return usersDatabase.some(user=> user.username.toLowerCase()=== username.toLowerCase()&& user.password=== password); } // Función para mostrar el timeline del usuario functionmostrarTimeline(username){ const userPosts = usersTimeline.filter(post=> post.username.toLowerCase()=== username.toLowerCase()); const userTimeline =document.getElementById('userTimeline');  userTimeline.innerHTML=''; if(userPosts.length>0){  userPosts.forEach(post=>{ const postElement =document.createElement('p');  postElement.textContent= post.timeline;  userTimeline.appendChild(postElement); }); }else{  userTimeline.textContent='No tienes publicaciones en tu timeline.'; } } // Manejo del formulario de inicio de sesión document.getElementById('loginForm').addEventListener('submit',function(event){  event.preventDefault(); // Obtener valores de usuario y contraseña const username =document.getElementById('username').value; const password =document.getElementById('password').value; // Verificar si el usuario existe y mostrar su timeline if(usuarioExistente(username, password)){ document.getElementById('message').innerText=Bienvenido a tu cuenta, ${username}!; document.getElementById('timeline').style.display='block'; mostrarTimeline(username); } else{ document.getElementById('message').innerText='Uuups, usuario o contraseña incorrectos!'; document.getElementById('timeline').style.display='none'; } // Limpiar formulario document.getElementById('loginForm').reset(); });  \</script>\</body>\</html>//no se si estara bien de esta manera lo probe y me aparecio el mensaje cumpli con los 4 requerimientos, lo unico es que use html y js 
Hola profe, yo lo pensé validando usuario y luego validando contraseña para ese usuario y me quedo una cosa medio loca, por otra parte, estoy perdido con lo de correr el codigo en navegador, asi que lo estoy corriendo en consola no mas, por eso no me funciona el comando prompt y bueno, me toco hacer mis experimentos de otra forma, por aca va mi respuesta
Trate de hacer un codigo legible para que se pueda entender lo mas posible, espero seguir mejorando.
Encontre una correccion para la variable global sesionIniciada, la cual no es buena practica dejarla como global ya que el valor no se vuelve a inicializar lo cual no es correcto, en este caso sesionIniciada la introduje dentro de la funcion validacionUsuario como variable local para que este valor se vuelva a resetear a false.
Saludos.
Les comparto mi version:
index.html
reto_login_user.js
const usersDatabase =[{username:"user1",password:"pass1"},{username:"user2",password:"pass2"},{username:"user3",password:"pass3"},{username:"user4",password:"pass4"}]const usersTimeLine =[{username:"user1",timeline:"Quiero aprender JavaScript"},{username:"user2",timeline:"Me encanta programar en JavaScript"},{username:"user3",timeline:"JavaScript es un lenguaje de programación muy versátil"},{username:"user4",timeline:"Estoy emocionado por aprender JavaScript y crear proyectos increíbles"}]let userNamePrompt =prompt("Ingrese su nombre de usuario");let passwordPrompt =prompt("Ingrese su contraseña");// Comparar usuario y passwordlet indexUser = usersDatabase.findIndex(user => user.username=== userNamePrompt && user.password=== passwordPrompt);if(indexUser >=0){//Encontro el usuario, ahora busca el password// Buscar el timelinelet timeLineIndex = usersTimeLine.findIndex(user => user.username=== userNamePrompt);if(timeLineIndex >=0){alert(`Bienvenido !!! \n${usersTimeLine[timeLineIndex].timeline}`);}else{alert(`No tienes un timeline, de todas formas Bienvenido !!!`);}}else{alert(`Usuario o clave incorrecta !!!`);};
Logre hacer la validación de usuarios de esta manera, pero no entendí muy bien lo del timeline, hasta aquí quede ¯\_(ツ)_/¯
const usernameProvided =prompt("Cual es tu usuario")const passwordProvided =prompt("Cual es tu contraseña")checkUserAndPass(usernameProvided, passwordProvided)functioncheckUserAndPass(usernameProv, passProv){for(obj of userDataBase){if(obj["username"]=== usernameProv && obj["password"]=== passProv){alert("Has accedido correctamente")return}}alert("Largo de aqui, impostor")}
Hola, también se podría crear una variable para el estatus y validarse después de que concluye el for(), de la siguiente forma:
let status =false;for(let i =0; i<usersDatabase.length; i++){if(usersDatabase[i].username===nameEntered && usersDatabase[i].password===passwordEntered){ status =true;break}}if(status){console.log("Exito");}else{console.log("Acceso no autorizado");}
De esta forma, siempre se obtendría un única mensaje de error o éxito. Asimismo, también podría utilizarse la función find():
if(usersDatabase.find(x=> x.username=== nameEntered && x.password=== passwordEntered)){console.log("Exito");}else{console.log("Acceso no autorizado");}
Saludos
Yo lo solucione usando una funcion muy sencilla y accediendo simplemente a las posiciones del array:
const userDatabase = [
{user: "admin", password: "admin123"},
{user:"andres",password:"andres123"},
{user:"maria",password:"maE123"},
{user:"pedro",password:"pedro123"}
]
const userTimeLine = [
{userName: "admin", timeLine: "Hola, soy el admin"},
{userName: "andres", timeLine: "La embarraron, hicieron el ingreso mal"},
{userName: "maria", timeLine: "Noooo, en serio, llamo a pedro?"},
{userName: "pedro", timeLine: "que fue lo que paso?, no entiendo nada"}
]
const userImput = prompt("Ingrese su usuario");
const passwordImput = prompt("Ingrese su contraseña");
document.writeln("mensaje de: "+userTimeLine[i].userName + "<br>" +"mensaje: "+ userTimeLine[i].timeLine);
return;
}
}
document.writeln("Usuario o contraseña incorrectos, por favor intente de nuevo");
}
const user = login(userImput, passwordImput);
Mi respuesta para la prueba es la siguiente, si hay alguna retroalimentación me encantaría escucharla:
const userDatabase =[{username:"Andres",password:"123",},{username:"Caro",password:"456",},{username:"Mariana",password:"789",},];const usersTimeline =[{username:"Estefany",message:"Me encanta Javascript!",},{username:"Oscar",message:"Bebeloper es lo mejor!",},{username:"Mariana",message:"A mi me gusta el café y el té",},{username:"Andres",message:"Yo hoy no quiero trabajar",},];classSession{constructor(username, password){this.validUser=false;this.username= username;this.password= password;}validateUser(){for(const user of userDatabase){if( user.username=== username && user.password=== password
){console.log("Usuario valido!");this.validUser=true;}}}welcome(){console.log(`Bienvenido ${this.username}`);}invalidUser(){console.log(`El usuario y contraseña ingresados no son validos, favor de corregir.`,);}showTimeLine(){ usersTimeline.forEach((post)=>console.log(`User ${post.username} : ${post.message}`),);}}const username =prompt("Ingresa tu usuario: ");const password =prompt("Ingresa tu constraseña: ");const newSession =newSession(username, password);newSession.validateUser();if(newSession.validUser===true){ newSession.welcome(); newSession.showTimeLine();}else{ newSession.invalidUser();}
const userDatabase = [
{
username: 'Andres',
password: '123',
},
{
username: 'Caro',
password: '456',
},
{
username: 'Mariana',
password: '789',
}
];
const usersTimeline = [
{
username: 'Estefany',
message: 'Me encanta Javascript!',
},
{
username: 'Oscar',
message: 'Bebeloper es lo mejor!',
},
{
username: 'Mariana',
message: 'A mi me gusta el café y el té',
},
{
username: 'Andres',
message: 'Yo hoy no quiero trabajar',
},
];
//ingreso de usuario y contraseña
const usernameInput = "Andres";
const passwordInput = "123";
//buscar el usuario y la contraseña
const usuarioValido = userDatabase.find(
user => user.username === usernameInput && user.password === passwordInput
