Sección 1: JavaScript

Lección 17: Ejemplo: Construyendo Facebook

En esta lección vamos a combinar todo lo que aprendimos para demostrar porqué JavaScript es útil. Seguramente pensamos que aprendimos un montón de cosas, pero no tenemos la menor idea de cómo todo eso se relaciona con la construcción de sitio web o aplicaciones web. Por ello, en esta lección vamos a construir una versión simplificada de Facebook, utilizando todo lo que vamos aprendiendo.

Vamos a tener una base de datos con nombres de usuarios y contraseñas. Vamos a tener un suministro de noticias relacionado a usuarios. Empecemos pensando en cómo funciona Facebook. En Facebook, tenemos un formulario de registro. Necesitamos iniciar sesión, y una vez iniciada, irá a nuestro perfil, donde podremos ver nuestro suministro de noticias. Entonces comencemos construyendo todo esto.

Podemos comenzar definiendo una variable llamada baseDatos, y en esta variable podremos almacenar múltiples usuarios. Por lo tanto necesitamos definirla como un array.

Ahora podemos definir dentro de este array un objeto que contenga el nombre de usuario y la contraseña de un usuario en particular.

Por ahora solo vamos a dejarlo para un usuario. Por lo tanto ya tenemos nuestra “base de datos” de usuarios. Ahora nos hace falta el suministro de noticias, así que crearemos una variable llamada suministroNoticias, la cual definiremos como un array.

Este array contendrá objetos de noticias, donde cada noticia contendrá el nombre de usuario y la publicación realizada por este.

¿Cómo podemos construir un formulario de inicio de sesión? Nos gustaría realizar una acción para verificar el nombre de usuario y la contraseña ingresados. Vamos a usar prompt() para que el usuario ingrese sus datos de inicio de sesión.

Cuando carguemos nuestro archivo HTML, se cargará línea por línea y veremos que tenemos una llamada a nuestro archivo script.js, el cual se comenzará a cargar línea a línea.

Esto está muy bueno, pero todavía le falta. Queremos saber si los datos de nombre de usuario y contraseña son los correctos, y en caso de serlo, poder visualizar mi suministro de noticias. Parece que necesitamos realizar una acción, pero realmente no existe una función de inicio de sesión ya provista por JavaScript, por lo que necesitaremos crear la nuestra propia.

Crearemos una función llamada inicioSesion(), la cual tendrá como parámetros nombreUsuario y contrasena. Dentro de esta función preguntaremos si tanto el nombre de usuario como la contraseña son iguales a los valores del objeto almacenado en la primera posición de la variable baseDatos.

Como podemos ver en el caso de que el nombre de usuario y la contraseña sean correctos nos imprimirá en la consola el array suministroNoticias, caso contrario nos mostrará una ventana de alerta indicándonos que el nombre de usuario y la contraseña son incorrectos.

Ahora guardemos nuestro archivo script.js y recarguemos nuestra página.

Vemos que no pasa nada luego de ingresar los datos, ya que solo definimos la función, pero no la llamamos en ninguna parte de nuestro código. Así que añadimos el llamado a la función inicioSesion() y le pasamos como parámetros de los datos ingresados en los prompt().

Guardemos los cambios y recarguemos nuestra página web.

Podemos ver que al ingresar correctamente los datos del inicio de sesión, obtenemos el array con el suministro de noticias.

Probemos ahora que sucede cuando ingresamos un nombre de usuario y/o contraseña incorrecta.

Como podemos ver, obtenemos la ventana de alerta que nos avisa sobre los datos mal ingresados.

Bueno, aquí lo tenemos. Construimos una versión básica de Facebook a partir de nuestros conocimientos de JavaScript. Muchas veces no nos damos cuenta de que sitios tan complejos como Facebook, están hechos de la unión de muchas partes simples como las que acabamos de construir.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!