INSTITUTO

POLITÉCNICO
NACIONAL

Escuela Superior de Cómputo

Integrantes del equipo:

 Rodrigo Sánchez Torres
 Hugo Santiago Gómez Salas

Grupo: 2CM3

Maestro: Tecla Parra Roberto

Fecha de entrega: 28/11/2019

“ Manual Técnico de ‘Venus’ ”

Venus.
Venus es un programa Java Web diseñado como un “Micro-Twitter”. Este
programa está hecho en HTML y lenguaje Java, mezclados en JSP para que
las páginas puedan ser rellenadas automáticamente para el usuario;
además, se hace uso de lenguaje JavaScript para validar la información y
hacer las páginas más responsivas, lenguaje CSS para dar diseño a los
elementos gráficos en la ventana y SQL para crear la base de datos y realizar
consultas dentro de la misma.

Para la elaboración del proyecto, se utilizaron las herramientas de Netbeans-

IDE (para codificar y compilar todas las páginas web, servlets, archivos CSS,
JSP’s, y archivos java), MySQL Workbench (para crear la base de datos
necesaria y las tablas que la integran) y ApacheTomcat 9.0.27 (como
servidor para ejecutar nuestro proyecto).

Como el programa es una simulación a menor escala de la red social

“Twitter”, se cuenta con los siguientes requerimientos:
  Pantalla de inicio donde el usuario pueda crearse una cuenta dentro
del sistema y acceder a una cuenta ya hecha. Dentro del formulario de

registro se solicitan los datos de nombre, apellidos, username (el cual

debe de ser único en el sistema y por lo tanto funge como llave
primaria de la tabla “usuario” dentro de la base de datos), contraseña,
confirmación de contraseña, correo electrónico e imagen de usuario.
Una vez que complete los datos, el sistema valida que estén correctos
por medio de JavaScript. Posteriormente, se envía el formulario al
servlet “alta”, se coloca al usuario dentro de la base de datos, para
este paso, es necesario primero hacer la conexión a la base de datos,
para lo cual, se utiliza el servlet “Conexión”, el cual utiliza las librerías
de JDBC; y finalmente se genera su página de inicio. En el caso de que
el usuario simplemente quiera ingresar con una cuenta ya hecha,
introduce su username y su contraseña y manda el formulario a un
servlet llamado “LoginServlet”, el cual, compara los datos ingresados
con los usuarios dentro de la base de datos, si el usuario existe y la
contraseña es correcta, guarda los datos del usuario en una
HttpSession para acceder fácilmente a sus datos en todas las demás
páginas y finalmente se genera su página de inicio.
Ilustración 1: Pantalla de inicio
 Ilustración 2: Inserción del usuario dentro de la base de datos

Ilustración 3: Servlet Conexión para conectarse con la base de datos del programa
Ilustración 4: Búsqueda del usuario dentro de la base de datos.

Ilustración 5: Tabla usuario

 Página de inicio donde el usuario pueda visualizar los datos de su

sesión, sus propias publicaciones, las publicaciones de los usuarios a
los que sigue, los usuarios que sigue y sus seguidores. Toda la
información acerca del usuario es directamente recuperada de la base
de datos, almacenada en variables y desplegada gracias a la página
JSP. Además, puede realizar publicaciones donde podrá incluir texto e
 imágenes, las cuales podrán ser visualizadas por sus seguidores. Estas
imágenes son almacenadas dentro del proyecto y se guarda la URL de
su localización dentro del mismo para su posterior recuperación. Para
esto, una vez que el usuario crea su publicación y oprime el botón de
publicar, se manda el formulario al JSP “Publicar” y se inserta la
información en la base de datos.

Ilustración 6: Página de inicio

Ilustración 7: JSP ”Publicar” para insertar publicaciones en la base de datos

Ilustración 8: Tabla "Publicación" en donde se almacenan los datos de las publicaciones

Dentro de este menú, el usuario puede acceder a los perfiles de sus

seguidores y seguidos al dar click en sus nombres, mismos que se
desplegarán junto con su username y su imagen de perfil, nuevamente,
todos estos datos son recuperados de la base de datos por medio de las
tablas “seguidor” y “siguiendo” (ver en el diagrama Entidad-Relación).
Adicionalmente, se integró una barra de búsqueda con la que el usuario
podrá comprobar la existencia de los perfiles dentro del sistema por medio
de su nombre o su username, una vez que ingresa cualquiera de estos dos
atributos y oprime el submit de la lupa, se mandan los datos por un
formulario al JSP “Buscar”, el cual busca algún usuario dentro de la base de
datos cuyo nombre o username coincida con la búsqueda del usuario, de ser
así, despliega los posibles resultados y se le presenta al usuario la opción de
revisar su perfil, igualmente, dando click en su nombre; o también un botón
de “Seguir”, el cual, al presionarlo, agrega al usuario buscado (usuario B) a
la tabla de “Seguidos” del usuario principal (usuario A), de esta forma, el
usuario A podrá visualizar las publicaciones del usuario B cada vez que entre
en el sistema.

Ilustración 9: Pantalla que muestra los resultados de búsqueda

Ilustración 10: JSP que muestra la información de un perfil buscado

Ilustración 11: JSP “Buscar” que compara los datos ingresados por el usuario en la base de datos

 Página de perfil en donde el usuario podrá visualizar sus datos y las

publicaciones que él haya hecho, esto mediante el JSP “Perfil” el cual
recupera y despliega la información del usuario desde la base de
datos. Para acceder a esta página, simplemente deberá de dar click al
icono de perfil en el menú lateral de la pantalla, mismo que está
disponible en todas las páginas del sistema.
Ilustración 12: Pantalla que muestra la información del usuario

Ilustración 13: JSP "Perfil" que obtiene de la base de datos la información del usuario

Compilación y ejecución.
Una vez que se codificó todo el programa,
dentro del Netbeans-IDE, se presiona el
botón de “Clean and Build” para generar el
archivo .war del proyecto. Asumiendo que en
el equipo del usuario ya se tiene instalado el servidor de ApacheTomcat, se
copia el archivo .war y se inserta dentro de la carpeta “webapps”.

Ya que se ha realizado este proceso, se procede a cualquier navegador (de

preferencia, Google Chrome) y se escribe la siguiente URL:
http://localhost:8080/Venus2018.2/Plantillas/Inicio.html (el puerto seguido de
los dos puntos puede variar de acuerdo a la configuración del usuario).

También, es necesario ejecutar el script SQL “Venus2018.3” y el script

“Procedimientos” dentro de MySQL, esto con el propósito de importar la base
de datos y poder usarla en conjunto con el proyecto.

Esto nos llevará a la página de inicio desde la cual podremos utilizar el

programa sin complicaciones
Diagrama de clases (para los servlets).
Diagrama Entidad-Relación.