• Author / Uploaded
• Alex Vladimir Tuz Che

• Categories
• Bootstrap (Marco de front-end)
• Script de Java
• Red mundial
• Tecnología
• Gestión de tecnologías de la información

Citation preview

INSTITUTO TECNOLÓGICO DE CANCÚN INGENIERÍA EN SISTEMAS COMPUTACIONALES Gestión de Proyectos de Software “FOODHUB”

ESTUDIANTES:    

SEVILLA GUERRERO MIGUEL ORTEGA FLORES MIGUEL ANGEL SIERRA HERNANDEZ JORGE RICARDO TUZ CHE ALEX VLADIMIR

PROFESOR: ING. ISMAEL JIMÉNEZ SÁNCHEZ

5 DE DICIEMBRE DEL 2018

1

INDICE. Identificación del problema ............................................................................................................................................................... 3 Nombre y objetivo del proyecto ......................................................................................................................................................... 3 Proyecto: “FOODHUB” ............................................................................................................................................................. ... 3 Objetivo general ............................................................................................................................................................................ 3 Objetivos específicos .................................................................................................................................................................... 3 Justificación...................................................................................................................................................................................... 4 Información de la empresa................................................................................................................................................................ 4 MISIÓN......................................................................................................................................................................................... 5 VISIÓN ......................................................................................................................................................................................... 5 Descripción de la metodología .......................................................................................................................................................... 5 Cronograma de actividades .............................................................................................................................................................. 7 Descripción del cronograma de actividades ...................................................................................................................................... 9 Revisión de literatura ...................................................................................................................................................................... 10 Materiales, métodos y técnicas de recolección de información ...................................................................................................... 13 Modelo Entidad-Relación. ........................................................................................................................................................... 13 Modelo relacional. ....................................................................................................................................................................... 14 Creación de la base de datos. ..................................................................................................................................................... 15 Análisis de presupuestos, considerando los recursos financieros, humanos y materiales. ................................................................ 18 Implementación del sistema............................................................................................................................................................ 19 Pruebas y resultados ...................................................................................................................................................................... 20 Referencias bibliográficas. .............................................................................................................................................................. 24

2

A. Identificación del problema: Hoy en dia, los avances tecnológicos van creciendo de manera general, es decir, que tenemos muchas herramientas al alcance para facilitar las tareas que realizamos diario. Algo que la mayoría de las personas realiza es ir a comprar en sucursales de comida rápida, pero esto se puede hacer de una manera más fácil usando una aplicación web.

B. Nombre y objetivo del proyecto: Proyecto: “FOODHUB” 

Objetivo general: Crear una aplicación que permita a los usuarios la facilidad de poder ordenar comida en línea.



Objetivos específicos:  Hacer que la aplicación web sea multiplataforma  Permitir a los usuarios poder seleccionar sus órdenes.

                     3

D. Justificación: Es proyecto se va a realizar porque le permite a los usuarios la facilidad de ordenar comida, asi como poder

F. Información de la empresa: Munchin donuts es un pequeño comercio dedicado y enfocado a la venta de donas con el propósito de satisfacer los paladares de sus clientes niños, jóvenes, adultos y a todo que quiera endulzar el paladar con sus diferentes sabores, esta empresa está ubicada en Av. Kabah, Plaza Skay y Loft local 10, frente al tecnológico Sm 16 con número de teléfono 9982208436 con un costo de $20 pesos con envío incluido.

Ofrece los siguientes sabores:

1.-Base chocolate semi amargo 2.-Base glass vainilla 3.-Saladas 4.-Base nutella 5.-Mantequilla de cacahuate.

4

MISIÓN: Misión externa: Ser una empresa con un concepto original, llamativo, e innovador que busca reinventar la manera de consumir donas de forma personalizada. Misión interna: Lograr la rentabilidad del negocio, satisfaciendo las necesidades de los franquiciatarios, con un trabajo en conjunto y comprometido. VISIÓN: Visión externa: Consolidarnos como la empresa top of mind de donas en el mercado nacional. Visión interna: Por medios de los franquiciatarios, posicionar la marca como empresa líder en el mercado de donas nacional. Innovando y mejorando constantemente.

G. Descripción de la metodología: Primero se plantea una metodología de procedimientos que nos permitirá medir los tiempos de cada miembro, usaremos CRUD para la organización de estas actividades, como primer punto utilizaremos algunos frameworks de desarrollo como lo son Bootstrap en su versión 4.4.4 y NodeJS para las manipulaciones del Back-end, y diversos para el Front-end, a continuación, se muestra un pequeño organigrama:  1.-Creacion de la base de datos.  2.-Crear conexiones de la base de datos.  3.-Crear diseño de la web.  4.-Programacion de las diferentes particiones de la web.  5.-Crear login y barreras de seguridad (encriptación y monitoreo).  6.-Pruebas de escritorio.

5



Beneficiarios: Hay 2 tipos de beneficiarios al llevar a cabo este proceso, el primero es la empresa Munchin Donuts ya que aumentarán sus ventas y a su vez sus ganancias, y obviamente el consumidor por la mayor comodidad y factibilidad que ellos tendrán al usar dicho servicio.



Impacto del proyecto: El impacto positivo que tendrá este proyecto hacia la empresa es que se agilizaría las ventas, dándole más ganancias a la empresa, sin la necesidad de que los consumidores tengan que ir a hacer fila, y esperar un largo rato hasta que sean atendidos y además el tener que esperar por sus productos También podrán hacer grandes pedidos a través de la página web agilizando las ventas y la atención que recibe el cliente por parte de la empresa.

6

H. Cronograma de actividades: OCTUBRE FASES Elección de la empresa a la que hemos de realizar el carrito de compras

Semana1 Semana2

NOVIEMBRE Semana3

Semana4

Semana1 Semana2

DICIEMBRE Semana3

Semana4

Semana1

Semana2

Identificación del problema. Determinación los específicos el objetivo general y Análisis de quienes serán los beneficiarios y del impacto positivo Cronograma tabla descriptiva de las actividades ayrealizar Recabar manera personalinformación acerca de la de empresa Descripción detiempo las etapas de desarrollo sin del carrito Redacción de la documentación sobre nuestro proyecto Organización la información debe contenerde nuestra página que Elaboración del bosquejo interno del carrito

7

Análisis y elaboración de la interfaz grafica del bosquejo Elaboración de los modelos de las bases de datos Creación de las bases derelaciones datos correspondientes y sus Prueba delcompras funcionamiento del carrito de Cronograma de actividades Presentación del proyecto

8

I. Descripción del cronograma de actividades: 1. Elección de empresas para realizar el carrito: Proponer varias empresas de las cuales se le podría aplicar el carrito electrónico, y escoger la que es más viable para realizar. 2. Identificación del problema: Analizar la situación actual por la que está pasando la empresa y determinar qué solución se le puede dar por medio de los datos para así erradicar su problema. 3. Determinar el objetivo general y los específicos: Determinar los beneficios que queremos lograr al brindarle el carrito electrónico a la empresa. 4. Análisis de quienes serán los beneficiarios y del impacto positivo: Determinar a quién va dirigido y las ventajas que habrá al hacer uso de este. 5. Cronograma y tabla descriptiva de las actividades a realizar: Organización de las actividades. 6. Recabar información de manera personal acerca de la empresa: Análisis y elección de datos importantes de la empresa. 7. Descripción de las etapas de desarrollo sin tiempo del carrito: Mención detallada de cómo se realizará cada uno de los pasos que se llevará a cabo en el desarrollo del carrito electrónico. 8. Redacción de la documentación sobre nuestro proyecto: Elaboración del documento previo a la programación web. 9. Organización de la información que debe contener nuestra página: Estructura gráfica e interna. 10. Elaboración del bosquejo interno del carrito: elaboración del bosquejo de la base de datos. 11. Análisis y elaboración del bosquejo de la interfaz gráfica: Elaboración visual. 12. Elaboración de los modelos de las bases de datos: Elaboración de las BD finales de manera escrita. 13. Creación de las bases de datos correspondientes y sus relaciones : Elaboración de la BD final en código.

9

J. Revisión de literatura: PÁGINA WEB Es un documento disponible en Internet, o Word Wide Web (www), codificado según sus estándares y con un lenguaje específico conocido como HTML. Los elementos principales en una página web son:  Texto: redactado por un único autor y otras veces por los usuarios de la misma en el caso de algunas páginas dinámicas con lenguaje como php.  Imágenes: gif, jpg y png son los tres formatos que suelen utilizarse normalmente.  Audio y vídeo: suele utilizar las extensiones midi, wav o mp3. También se utilizan las incrustaciones de archivos almacenados en otros sitios, como por ejemplo se hace al añadir vídeos de Youtube.  Otros: Adobe Flash, Adobe Shockwave, Java o enlaces (también llamados hipervínculos9.

CRUD En informática CRUD es el acrónimo de Crear, Obtener, Actualizar y Borrar. Se usa para referirse a las funciones básicas en bases de datos o la capa de persistencia en un software.

10

FRAMEWORK Es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, en base a la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, puede incluir soporte de programas, librerías y un lenguaje interpretado entre otros programas para ayudar a desarrollar y unir los diferentes componentes de un proyecto. Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio. Provee una estructura y una metodología de trabajo la cual extiende o utiliza las aplicaciones del dominio.

BACK-END Y FRONT-END Back-end: Es el área que se dedica a la parte lógica de un sitio web, es el encargado de que todo funcione como debería, es la parte de atrás que de alguna manera no es visible para el usuario ya que no se trata de diseño, o elementos gráficos, se trata de programar las funciones que tendrá un sitio. Es la programación dura y pura, desde la programación de las funciones del sitio hasta bases de datos e incluso más. Front-end: Es la parte del desarrollo web que se dedica de la parte frontal de un sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las animaciones y efectos.

11

BOOTSTRAP. Bootstrap es de código abierto y está disponible en GitHub. Es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. En las plantillas de Bootstrap se tiene herramientas como tipografía, formularios, botones, cuadros, menú de navegación entre otros elementos basados en HTML y CSS, Bootstrap solo se ocupa en el desarrollo de front-end. Bootstrap es una excelente herramienta para crear interfaces de usuario limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su tamaño. Además, Bootstrap ofrece las herramientas necesarias para crear cualquier tipo de sitio web utilizando los estilos y elementos de sus librerías. NODEJS. NodeJS es un código abierto de JavaScript que está diseñado para generar aplicaciones web de forma altamente optimizada. Desde su nacimiento hacia el año 2009 ha logrado convertirse en todo un must dentro del desarrollo web. Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles.

12

K. Materiales, métodos y técnicas de recolección de información: 

Modelo Entidad-Relación. Dirección

menu_id ID

ID

Subtotal

Subtotal Cantidad

Contiene

Contenido

Ordenes_id

Ordenes

Total

Fecha_hora

Descuento

Estado

Descuento

Pertenece

tipo ID

Imagen

Descripció

Nombre 13 Precio

Descuento



Modelo relacional.

14



Creación de la base de datos.

15

16

Para recolección de la información se hizo una visita a la empresa, para poder obtener los datos necesarios sobre los diversos aspectos que se necesitaban conocer, tales como, su misión, visión, precios, dirección, medios para contactarlos etc.; se realizó un breve cuestionario tanto al dueño como a algunos de sus empleados mediante dispositivos como tabletas y celulares, y materiales como hojas con preguntas. Para la organización de los elementos que contendría el carrito de compras se implementó el uso de base de datos, para el correcto resguardo y substracción de la información de las compras, lo primero que se hizo fue realizar un diagrama entidad relación, seguidamente un modelo relacional, el cual nos acerca más al aspecto que tendrán nuestras tablas, y finalmente la creación de la base de datos con sus respectivas y tablas y sus campos.

17

L. Análisis de presupuestos, considerando los recursos financieros, humanos y materiales. El análisis de presupuesto contiene 4 tablas considerando todo lo necesario para poder desarrollar e implementar la página web con carrito de compras El presupuesto financiero se considera la parte que debe ser pagada sí o sí para implementar el proyecto. Para esto sólo se consideró el hosting, dominio y el contrato con la empresa que realizará el servicio de entrega al cliente. El tiempo es determinado a un año al menos.

El presupuesto humano considera al personal que trabajará en el proyecto. El presupuesto de material se considera que son todas las herramientas que sean necesarias y permita el desarrollo del proyecto. El desarrollo de la plataforma lleva consigo una estructura mejorada ya que ocupa el motor de procesamiento de datos v8 del nodejs dicho esto tenemos que la mayoría de los frameworks aplicados no tienen costo, a continuación, se listan 2 partes del proyecto que identifican el contenido gasto de inversión de los elementos. Libres:

Inversiones

1. Framework nodejs por google

1. Hosting

2. Bootstrap 4.4.4 por twitter

2. Dominio

3. Software id de programación por Microsoft open source

3. Servicios de publicidad

18

Se agrega una tabla más, la cual es el presupuesto de servicios. Prácticamente son los servicios que se pagan mensualmente proporcionados por su respectivo proveedor, los cuales son necesarios para el desarrollo del proyecto.

M. Implementación del sistema:

Para hacer uso de este sitio web es necesario un servidor o hosting, y el dominio/dirección URL de dicha página, pero para hacer uso de esta dirección se requiere “comprar los derechos” el dominio a utilizar es: munchindonuts.mx con un precio de $565.00. El lenguaje con el que se trabaja en la página es JAVASCRIPT, HTML, CSS, ya que un servidor puede contener más de un lenguaje de programación sin perjudicar su funcionamiento. El sistema en el que se almacena toda la información de la web es MYSQL, ya que es gratuito y muy potente. Componentes de software: 1. El servidor web es multiplataforma. 2. Lo más recomendable es utilizar arquitectura x86 (32 bits) 3. Procesador dual core 2 núcleos. 4. Mínimo 2 GB de memoria RAM. 5. Una línea ADSL de 3mb a 10mb lo más recomendable es de 10 mb ya que la velocidad es mejor y así no estarán muy limitados los usuarios que podrán meterse al servidor. (Lo más recomendable es tener una conexión propia y apropiada para el servidor) 6. Hacer uso de un firewall.

19

N. Pruebas y resultados:

Inicio parte 1

Inicio parte 2

Inicio parte 3

Inicio parte 4

20

Inicio parte 5

Menú parte 1

Menú parte 2

Menú parte 3

21

Menú parte 4

Carrito

Confirmar compra

Ingresar

22

Órdenes

Productos parte 1

Productos parte 2

Editar producto

23

O. Referencias bibliográficas.  https://www.aboutespanol.com/que-es-una-pagina-web-3202308  https://es.wikipedia.org/wiki/CRUD  https://www.ecured.cu/Framework  http://www.falconmasters.com/web-design/que-es-front-end-y-que-es-back-end/  https://es.wikipedia.org/wiki/Bootstrap_(framework)  https://www.netconsulting.es/blog/nodejs/  https://www.luisllamas.es/que-es-node-js/

24