UNIVERSIDAD TECNOLÓGICA DE TABASCO

DIVISIÓN DE TECNOLOGIAS DE LA INFORMACIÓN Y

COMUNICACIÓN

PROYECTO INTEGRADORA I

“Aplicación web de pedidos de comida para el Kukuchee de la

UTTAB”

QUE PRESENTA EL ALUMNO DE TSU EN TECNOLÓGIAS DE LA

INFORMACIÓN ÁREA INFRAESTRUCTURA DE REDES DIGITALES

LIMBER DÍAZ GUZMÁN

EMPRESA:
UNIVERSIDAD TECNOLÓGICA DE TABASCO

ASESOR EMPRESARIAL: ASESOR ACADÉMICO:

M. en I.S. María Reyna
Guillermo Guillermo

Villahermosa, Tabasco, AGOSTO DE 2022

pág. 1
INDICE

pág. 2
INTRODUCCIÓN

En palabras sencillas una “Aplicación Web” es un programa que funciona con ayuda de internet y
que en su mayoría no necesitan ser instaladas en algún dispositivo. En la actualidad muchas de las
aplicaciones web requieren de permisos para poder acceder a la información o servicio que se
necesita, por lo general, son el nombre de usuario y contraseña.

Una aplicación Web permite guardar datos de formularios directamente en una base de datos,
además de extraer datos y crear informes basados en la Web para su análisis. Ejemplos de ello
son las páginas de los bancos en línea, las páginas de tiendas en línea, las encuestas y los
formularios con datos suministrados por el usuario.

El objetivo principal del proyecto es el desarrollo e implementación de una aplicación web para la
cafetería de la Universidad Tecnológica de Tabasco “Kukuchee”. Mediante el uso de la aplicación
web los alumnos podrán realizar el pedido de sus alimentos de manera más rápida y sencilla,
dejando atrás la acostumbrada manera de ordenar los alimentos manualmente.

El proyecto se desarrolló en base a las necesidades de los clientes en concreto, en este caso, los
alumnos de la universidad ya que en su mayor parte es dirigida hacia ellos, y personal que labora
dentro de las instalaciones, haciendo de esta una herramienta de gran ayuda para administrar los
pedidos de alimentos, mejorando en gran manera el servicio ofrecido en el “Kukuchee”.

El proyecto se divide en 7 capítulos; 4 de los cuales se explica de manera el proceso de creación

de la aplicación web, así como de los factores que intervienen en su desarrollo, los últimos 3
capítulos son recomendaciones, bibliografías y anexos.

El proyecto está dividido en capítulos donde se explica de manera más detallada y amplia el
proceso de desarrollo de la aplicación web

El capítulo número #1 Marco Metodológico encontrará las generalidades de la empresa y área en

donde se desarrolló la aplicación web, es decir, el nombre de la empresa, sus principios, servicios
que ofrecen, justificación del proyecto, el objetivo principal del proyecto, el alcance que tendrá y la
metodología aplicada para desarrollar la aplicación web. En el capítulo número #2 Marco teórico
se ubica lo relacionado con a la aplicación a nivel interno, es decir, el tipo de tecnología, la
usabilidad que tienen, base de datos en sus diferentes modelos. El capítulo número #3 Marco de
aplicación habla acerca de la descripción del sistema que se estará utilizando, los problemas y
soluciones que tendrá que enfrentar, por otro parte, también se incluye lo que el usuario estará
observando de manera constante al momento de utilizar la aplicación web, es decir, el diseño que
tendrá la aplicación web.

pág. 3
El proyecto tiene otros capítulos secundarios cómo: Las conclusiones, recomendaciones de
uso u operatividad, las fuentes consultadas que fueron utilizadas en el desarrollo de
aplicación web y anexos.

pág. 4
CAPITULO I: MARCO METODOLÓGICO

1.1 Generalidades de la empresa y área donde se desarrollará la aplicación

1.1.2 Misión
Nuestra misión es participar en la vida cotidiana de los alumnos de la Universidad Tecnológica de
Tabasco, a través de alimentos saludables hechos a través de modernos procesos de producción,
actuando con responsabilidad ambiental y social.

1.1.3 Visión
Ser un establecimiento de comida que aporte lo mejor de una alimentación balanceada en favor del
desarrollo académico y profesional de los alumnos de la Universidad Tecnológica de Tabasco.

1.1.4 Servicios
Administrativos: Aquí encontramos todo lo relacionado con el funcionamiento del “Kukuchee” a
nivel administrativo.

Sociales: Son las actividades que se llevan a cabo dentro de las instalaciones, es decir, donde los
alumnos conviven e interactúan.

Ventas: El servicio de venta de alimentos que ofrece.

pág. 5
1.1.5 Organigrama

Diana Karina
Sanchez
Encargada
interna

Diana Karina Yanet Garcia

Crystell Gimenez
Sanchez y Elena Carrasco y Daniel
Gonzales
Lopez Perez Cruz Osorio
Línea de servicio Producción Área de plancha

Corregir* Tengo que hacerlo más bonito XD

pág. 6
1.2 Tema de la integradora
Aplicación web de pedidos de comida para el Kukuchee.

1.3 Antecedentes y justificación

Cómo es de saber el “Kukuchee” es el encargado de suministrar los alimentos a todos y cada uno
de los estudiantes, así como el personal que forma parte de la Universidad.

Por mucho tiempo los alumnos han realizado el pedido de sus alimentos de la siguiente forma:

1- Pedir el permiso a su profesor para ir al “Kukuchee”

2- Caminar hacia el “Kukuchee”, lo que conlleva un tiempo de 5 a 10 minutos.
3- Llegar y esperar en promedio un tiempo de 5 a 10 minutos para realizar el pedido de los
alimentos ocasionando en casi todos los casos una aglomeración de alumnos.
4- Una vez realizado el pedido de los alimentos, prosigue otro tiempo de espera durante el
cual los alimentos están siendo preparados. Lo que conlleva esperar un promedio de 10 a
15 minutos. Aquí se hace la aclaración de que NO en todos los casos sucede.
5- Al terminar todo el proceso de compra de los alimentos, el alumno tiene que regresar a su
división, lo cual implica otros 5 a 10 minutos.

Sabemos bien que la vida de los jóvenes universitarios es muy agitada por lo que en ocasiones
pareciera que hace les falta tiempo para cubrir todas sus actividades, así que llevar a cabo una
actividad tan sencilla como ordenar los alimentos no siempre es una tarea fácil. Debido al modelo
educativo empleado en la universidad (Horas completas) no se dispone de mucho tiempo para
realizar dicha actividad.

Al implementar la aplicación web en el “Kukuchee” se brinda al usuario la posibilidad de ordenar

sus alimentos de manera más rápida y sencilla, evitando de esta manera los típicos inconvenientes
que afectan al desarrollo de sus actividades escolares.

La razón por la cual fue seleccionado el tema es porque los alumnos (Usuarios) han tenido
diversas situaciones y problemas por consecuencia de tener una agenda llena de actividades y
tiempos muy limitados. El proyecto busca terminar o reducir en gran manera los inconvenientes
que los alumnos puedan tener.

La ventaja de desarrollar la aplicación web en el “Kukuchee” es que los alumnos tienen la facilidad
de ordenar sus alimentos desde su salón de clases y posteriormente al momento de llegar al
“Kukuchee” reciban casi de manera inmediata la entrega de sus alimentos, reduciendo en gran
manera el tiempo que los alumnos pierden esperando, tiempo que puede ser utilizado en
beneficios del desarrollo de sus actividades escolares y académicas.

pág. 7
1.4 Objetivos

1.4.1 Objetivo general:

Realizar el desarrollo de una Aplicación Web para pedidos de comida del Kukuche de la UTTAB.

1.4.2 Objetivos específicos:

1 Recabar información de antecedentes sobre el desarrollo de las aplicaciones web.
2 Realizar entrevistas y cuestionarios para identificar los requerimientos de la aplicación web.
3 Analizar la información recopilada.
4 Investigar programas especializados en el desarrollo de aplicaciones web.
5 Diseñar la base de datos.
6 Desarrollar la base de datos en SQL server o MySQL.
7 Diseñar la interfaz.
8 Desarrollar la aplicación web.
9 Conectar la aplicación web con la base de datos.
10 Probar la aplicación.
11 Elaborar un manual de usuario de la aplicación web.

pág. 8
1.5 Alcance
Se desarrollo la aplicación web para el “Kukchee” de la Universidad durante el periodo de
mayo-agosto del año 2022, en el proceso de desarrollo de la aplicación web se realizaron
algunas modificaciones y se agregaron otros aspectos. Un ejemplo de los módulos:

1 Inicio de sesión de los usuarios de la aplicación web.

2 Perfiles correspondientes a cada usuario.
3 Mostrar por medio de una interfaz con imágenes los productos disponibles.
4 La opción de poder ordenar sus alimentos desde la apliación.
5 Avisos que sean parte de la cafetería

1.6 Metodología
El proyecto se realizó bajo la guía del formato IEE830. Se tomó la decisión de utilizar esta

metodología porque es la más completa, además de que nos permite conocer la necesidad del

cliente de manera más exacta, las funciones que este puede llegar a tener y las especificaciones

de la aplicación web.

pág. 9
CAPITULO II: MARCO TEÓRICO

2.1 Aplicaciones web

2.1.1 ¿Qué es una aplicación web?

(TechTarget,2021) define una aplicación web como “Una aplicación web es un programa de
aplicación que se almacena en un servidor remoto y se entrega a través de la interfaz de
navegador”

2.2 ¿Qué es HTML?

“HTML es el lenguaje con el que se define el

contenido de las páginas web. Básicamente se trata
de un conjunto de etiquetas que sirven para definir
el texto y otros elementos que compondrán una
página web, como imágenes, listas, vídeos, etc.”

Angel.M(01 de enero de 2001) ¿Qué es HTML?

[Link]

2.3 ¿Qué es CSS?

(mdnWeb,2022) Lo define como “CSS (Cascading
Style Sheets) u Hojas de estilo en cascada en
español, no es realmente un lenguaje de
programación, tampoco  es un lenguaje de marcado.
Es un  lenguaje de hojas de estilo, es decir, te
permite aplicar estilos de manera selectiva a
elementos en documentos HTML”.

pág. 10
2.4 Enmaquetado

2.4.1 ¿Qué es un enmaquetado html?

(AENTEG,2022) Lo define como “La maquetación web  consiste en transformar el diseño de una
web en un conjunto de archivos (html, css y  js) para que los navegadores web puedan
interpretarlos y reproducirlos correctamente en diferentes dispositivos. La maquetación es una fase
avanzada del proceso de desarrollo web”.

2.5 ¿Qué es una base de datos?

(Oracle,2021) define base de datos como “Una
base de datos es una recopilación organizada de
información o datos estructurados, que
normalmente se almacena de forma electrónica
en un sistema informático. N ormalmente, una

base de datos está controlada por un  sistema de

gestión de bases de datos (DBMS) . En conjunto,
los datos y el DBMS, junto con las aplicaciones asociadas a ellos, reciben el nombre de sistema de
bases de datos, abreviado normalmente a simplemente base de datos.”

2.5.1 Base de datos dinámica

(Rivas, 2021) lo define como “Una base de datos que pueda almacenar datos con regularidad, y
que tiene la cualidad de que toda la información guardada puede ser editada o modificada a través
del tiempo”

2.5.2 Tipos de base de datos

Actualmente existen diferentes tipos de base de datos, por ejemplo:

1. Base de datos relacionales

2. Base de datos orientada a objetos
3. Base de datos distribuidas
4. Almacenes de datos
5. Bases de datos NoSQL

pág. 11
6. Base de datos orientadas a grafos
7. Bases de datos OLTP

pág. 12
CAPITULO III: MARCO DE APLICACIÓN

3.1 Análisis

3.1.1 Descripción del sistema actual

La aplicación web está formada por una página o ventana principal llamada [Link] donde se
encuentra la sección de iniciar sesión y/o registrarme, así como el logotipo de la aplicación web en
la parte superior correspondiente al navegador. Por otra parte, en la parte del cuerpo se
encuentran cuatro secciones correspondientes a los diferentes productos que ofrece el kukuchee,
por ejemplo: Comida, Refrescos, Galletas, Sabritas. En la parte inferior del [Link] se ubica las
secciones en donde el usuario podrá interactuar con la página, es decir, tendrá la posibilidad de
conocer los valores, misiones, redes sociales, poner en contacto, etc.

3.1.2 Diagramas de procesos del sistema actual

3.1.3 Detección de problemas y necesidades

[Link] Problemas

Motivos, es decir, que problemas me llevaron a crear la aplicación

Uno de los grandes inconvenientes que ha tenido el Kukuchee en mucho tiempo ha sido el retraso
excesivo en la entrega de los alimentos a la comunidad estudiantil, debido a la demanda excesiva
que hay por parte de la comunidad en ciertos tiempos del día ocasionando que baje la
productividad y por consecuencia el tiempo de espera de los alimentos aumente.

pág. 13
[Link] Necesidades

Satisfacer, es decir las necesidades que están satisfaciendo. Este y el anterior punto van un
poco ligados a la justificación

Al implementar la aplicación web se reducirá el tiempo de espera de los alimentos, ayudando así a
la administración del Kukuchee en preparar y entregar todos y cada uno de los productos que han
sido solicitado por los alumnos previamente, ayudando en gran manera a la productividad.
Además, se estará ayudando a la comunidad en general en la administración de su tiempo, es
decir, que el tiempo que normalmente invierte en esperar sus alimentos dentro del Kukuchee, lo
podrá utilizar en realizar sus actividades ya sea laborales, administrativas y académicas.

3.1.4 Estudios de factibilidad

[Link] Operatividad

El software fue diseñado con una estructura minimalista, conteniendo información relevante de la
empresa, la cual está repartida de manera estratégica evitando la sobre carga de información que
pueda interactuar con el usuario.

El usuario podrá desplazarse sin dificultad alguna e intuitivamente sobre la interfaz, ocasionando
que, al momento de realizar el pedido de sus alimentos sea de manera rápida, sencilla y porque
no, divertida. Además, de notificar al personal administrativo de la empresa, agilizando el proceso
de elaboración y entrega.

[Link] Técnicas

A continuación, se presentan los recursos de hardware y software requeridos para el correcto

funcionamiento del programa dentro de un ordenador:

 Hardware

Procesador: De preferencia Core i3 de 8va Generación.

RAM: 8 GB para equipos de 32-bit o 64-bit.

Espacio en disco duro: 2 TB.

Tarjeta gráfica: No importa el tipo.

Pantalla: No importa la resolución.

pág. 14
  Software

Sistema operativo: Windows 10 y Windows 11.

Exploradores: Google Chrome, Microsoft Edge.

[Link] Económica
Rol de equipo Horas de trabajo Costo por hora Costo de actividad
Líder del proyecto 242 horas $102.00 $24,684,00
Desarrollador 366 horas $80.62 $29,506,92
Diseñador 366 horas $61.54 $22,523,64
Administrador de BD 186 horas $123.00 $22,878.00
CANATIDAD EN BRUTO $99,592,56
IVA (16%) $15,934.80
UTILIDAD $34,658.21
TOTAL DEL PROYECTO $150,185,57

3.1.5 Alternativa de Solución

[Link] Nombre de la alternativa

Kucafe

[Link] Descripción de la alternativa

Realizar una nueva aplicación web que solo permita al usuario visualizar los productos, así como
su descripción y precio, mediante una interfaz simple e intuitiva que facilite la consulta.

3.2 Diseño gráfico de la aplicación

Como se ve la aplicación, lógicamente cuando ya este 100% terminada (está en pausa)

pág. 15
3.3 Aplicación de las etapas del modelo de desarrollo de sistemas de
información

Conforme a mi metodología, como te ayudo la aplicación en mi caso utilizare lo que vi en el

IEEE830.

Análisis: Primero hay que tomar en cuenta lo que la empresa necesita en estos momentos, séase
de cada área de trabajo de tal manera para llegar a una compresión adecuada de los requisitos
que este necesite.

Diseño: Se requiere hacer el diseño de estructura de la empresa, tanto la parte de administración,

de ventas y pedidos de los productos que va a necesitar.

Programación: Para ello está más involucrado en la aplicación web de la empresa, por tal motivo
es indispensable que cuente con una para poder gestionar sus actividades, tanto de productos,
clientes y hasta servicios a ofrecer.

Pruebas: Por último, hay en cada proceso es importante o algunos de los puntos que se elaboraron
habrá faltado por colocar, para no tener problema en la elaboración del proyecto.

pág. 16
3.4 Descripción del desarrollo de la aplicación

3.4.1 Modelado de la base de datos

pág. 17
3.4.2 Diccionario de datos

TABLPERSONAS
CAMPO TIPO DE DATO DESCRIPCIÓN
Contiene el identificador único
CVE_Persona Int
de la persona
Contiene el identificador único
CVE_División Int asignado a la División
Académica de la persona
Contiene el identificador
CVE_Colonia Int asignado a la colonia donde
habita la persona
Contiene el identificador
CVE_Estado Int asignado al estado donde
habita la persona
Contiene solamente el nombre
Nombre Varchar (20) de la persona con un límite de
20 caracteres
Contiene solamente el primer
AP_Paterno Varchar (20) apellido de la persona con un
límite de 20 caracteres
Contiene solamente el
segundo apellido de la
AP_Materno Varchar (20)
persona con un límite de 20
caracteres
Contiene la fecha de
F_Nacimieto Date nacimiento de la persona (día,
mes y año)
Contiene el registro del sexo
Sexo
indicado por la persona
Contiene el número de
N_Telefono Varchar (10) teléfono ingresado por la
persona
Contiene la dirección de
Email Varchar (60) correo electrónico ingresado
por la persona
Contiene la dirección de la
Dirección Varchar (100) persona de manera más
explicita

pág. 18
 TABLA USUARIOS
CAMPO TIPO DE DATO DESCRIPCIÓN
Contiene el identificador único
CVE_Usuario Int
asignado al usuario
N_Usuario Varchar int
Contiene la contraseña de
Password Varchar (10) acceso ingresada por el
usuario
Indica que el usuario este
Login Bit logiado para acceder a la
aplicación web
Indica que el usuario es
activo, es decir, que el usuario
Activo Bit
realiza actividades dentro de
la aplicación web
Indica que, dentro de los
usuarios, existe la categoría
de administrador, es decir, el
Administrador Bit
administrador es el encargado
de administrar la aplicación
web.
Indica que el usuario tiene la
categoría de cliente, es decir,
puede realizar actividades con
Cliente Bit
la aplicación web, tales como:
comprar, visualizar pedidos,
interactuar con su entorno.

TABLA PEDIDO
CAMPO TIPO DE DATO DESCRIPCIÓN
Indica el identificador único
asignado cuando se registra
CVE_Pedido Int
una compra realizada por un
usuario
Contiene el identificador único
CVE_Usuario Int
asignado al usuario
Indica la fecha en la cual se
F_Venta Datetime
realizó la venta
Indica que la venta ha sido
Pagado Bit
pagada
Indica la fecha en la que se
F_Pago Datetime
realizó el pago
Indica la cantidad total a pagar
P_Total Money
de la venta
Indica el monto agregado
IVA Money sobre el total a pagar de la
venta

pág. 19
 TABLA DETALLE_PEDIDO
CAMPO TIPO DE DATO DESCRIPCIÓN
Indica el identificador único
asignado cuando se registra
CVE_Pedido Int
una compra realizada por un
usuario
Indica el identificador único
CVE_Articulo Int del articulo escogido por el
usuario en su pedido
Indica la cantidad de
Cantidad Int productos que el usuario haya
escogido en su pedido
Indica el valor del producto sin
Precio Money
contar el IVA

TABLA PRODUCTOS
CAMPO TIPO DE DATO DESCRIPCIÓN
CVE_Articulo Int Indica el identificador único
asignado al producto
registrado en la base de datos
Descripción Varchar (50) Indica la descripción del
producto, por ejemplo:
Nombre, Marca, Contenido,
Caducidad, Sabor, tamaño,
precio.
Stock_Mínino Int Indica la cantidad mínima de
un producto dentro de la base
de datos o la cantidad mínima
que debe tener como límite un
producto dentro de la base de
datos
Stock_Máximo Int Indica la cantidad máxima de
un producto dentro de la base
de datos o la cantidad máxima
que debe tener como límite un
producto dentro de la base de
datos
Existencia Bit Indica si el producto que se
quiere consultar existe dentro
de la base de datos
Activo Bit Indica si el producto que se
quiere consultar sigue activo
dentro de la base de datos
Precio Money Indica el precio del producto

pág. 20
 TABLA DIVISIÓN
CAMPO TIPO DE DATO DESCRIPCIÓN
Contiene el identificador único
CVE_División Int asignado a la División
Académica de la persona
Indica el nombre de la División
Nombre Varchar (50)
Académica de la persona

TABLA COLONIAS
CAMPO TIPO DE DATO DESCRIPCIÓN
Contiene el identificador
CVE_COLONIA Int asignado a la colonia donde
habita la persona
Indica el nombre de la colonia
Nombre Varchar (50)
donde habita la persona

TABLA ESTADO
CAMPO TIPO DE DATO DESCRIPCIÓN
Contiene el identificador
CVE_Estado Int asignado al estado donde
habita la persona
Indica el nombre del estado
Nombre Varchar (20) donde habita la persona

pág. 21
3.4.3 creación de las pantallas que conforman la aplicación
Aquí van una captura de todas las ventas que tiene tu aplicación web, incluye: index, sesión,
registro, productos, comida, bebida, aperitivos, etc. (esta en pausa)

pág. 22