Universidad Politécnica de Madrid
Escuela Técnica Superior de Ingenieros Informáticos
Grado en Ingeniería Informática
Trabajo Fin de Grado
DISEÑO y DESARROLLO de una
INFRAESTRUCTURA WEB en .NET para EMPRESA MEDIANA o PEQUEÑA
Autor: Yidong Zhu
Tutor(a): Luis Mengual Galán
Madrid, enero 2022
2
Este Trabajo Fin de Grado se ha depositado en la ETSI Informáticos de la Universidad Politécnica de Madrid para su defensa.
Trabajo Fin de Grado
Grado en Ingeniería Informática
Título: DISEÑO y DESARROLLO de una INFRAESTRUCTURA WEB en .NET para EMPRESA MEDIANA o PEQUEÑA
Enero 2022
Autor: Yidong Zhu
Tutor:
Luis Mengual Galán
LENGUAJES Y SISTEMAS INFORMÁTICOS E INGENIERÍA DE SOFTWARE
ETSI Informáticos
Universidad Politécnica de Madrid
3
AGRADECIMIENTO
A Luis Mengual y todos los profesores de facultad por sus
consejos y por guiarme durante el grado.
A mi familia por haberme dado ánimo durante todo el grado.
Y a mis amigos y compañeros que siempre me han animado
4
RESUMEN
El trabajo consistirá en desarrollar la infraestructura web que gestionará la base de datos de una pequeña o mediana empresa (una tienda o un restaurante).
Esta infraestructura tendrá dos versiones una para los usuarios finales y otra para el Administrador del sistema.
El proyecto se desarrollará utilizando la plataforma .NET con lenguaje C# a través de MVC, y la parte Front-End se desarrollará con Angular, para la parte de base de datos utilizaremos en MYSQL.
Lista de objetivos concretos:
x Diseña la organización de BBDD y conectar la BBDD a través de Visual Studio.
x Implementar los intercambios de Cliente y Administrador para gestionar la inserción y recuperación de fichas de artículos, etc.
x Desarrollo de la interfaz cliente y Administrador x Conectar la implementación de .Net con el Angular x Diseño la página a través de Angular.
El proyecto se desarrollará utilizando la plataforma .NET con lenguaje C# a través de MVC, y la parte Front-End se desarrollará. Para la parte de base de datos se necesita saber el lenguaje SQL, y la parte angular el TypeScript.
Las herramientas utilizadas son las que soporta directamente por el Visual Studio. Para el tema de Angular utilizare el Visual Studio Code. Para el tema de BBDD, aunque puede variar de forma independiente, en un principio utilizare el MySQL.
Los objetivos principales para el correcto funcionamiento del proyecto son:
x Diseña la organización de BBDD y conectar la BBDD a través de Visual Studio.
x Almacenar los productos y pedidos en una BBDD a través desde la web.
x Desarrollo de la interfaz cliente y Administrador desde Visual Studio.
x Conectar la implementación de .Net con el Angular x Diseño la página a través de Angular.
5
Abstract
The work will consist of developing the web infrastructure that will manage the database of a small or medium-sized company (a store or a restaurant). This infrastructure will have two versions, one for end users and one for the System Administrator.
The project will be developed using the .NET platform with C# language through MVC, and the Front-End part will be developed with Angular, for the database part we will use MYSQL.
List of specific objectives:
x Design the DB organization and connect the DB through Visual Studio.
x Implement Client and Administrator exchanges to manage the insertion and retrieval of item cards, etc.
x Development of the client and administrator interface x Connect the .Net implementation with Angular
x I design the page through Angular.
The project will be developed using the .NET platform with C# language through MVC, and the Front-End part will be developed. For the database part you need to know the SQL language, and the angular part TypeScript.
The tools used are those directly supported by Visual Studio. For the Angular theme I will use the Visual Studio Code. For the topic of BBDD, although it can vary independently, initially I will use MySQL.
The main objectives for the proper functioning of the project are:
x Design the DB organization and connect the DB through Visual Studio.
x Store products and orders in a database through the web.
x Development of the client interface and Administrator from Visual Studio.
x Connect the .Net implementation with Angular
x
Design the page through Angular.6
Tabla de contenidos
1 Objetivo ... 11
2 Introducción ... 12
3 Tecnologías empleadas ... 14
3.1 Front-End ... 14
3.2 Back-End ... 19
3.3 BBDD... 22
4 Prototipo de la interfaz ... 23
4.1 Planteamiento de problema ... 23
4.2 Pruebas de cada interfaz: cliente ... 24
4.2.1 Interfaz añadir al carro ... 24
4.2.2 Interfaz carro aumentar y decrementar ... 24
4.2.3 Interfaz pedido ... 26
4.2.4 Interfaz book ... 29
4.3 Pruebas de cada interfaz: administrador ... 30
4.3.1 Interfaz login ... 30
4.3.2 Interfaz cuenta ... 30
4.3.3 Interfaz pedido ... 32
4.3.4 Interfaz tarjeta... 33
4.3.5 Interfaz dirección de envío ... 33
4.3.6 Interfaz reserva ... 34
4.3.7 Interfaz Plato ... 34
5 Desarrollo back-end ... 36
5.1 Crear proyecto nuevo con sus entidades ... 36
5.2 Añadir librería ... 37
5.3 Construir la conexión de base dato y Angular... 38
5.4 Entidades DTOS ... 41
7
5.5 Controlador MVC de Visual Studio ... 42
5.6 Todas las interfaces de controlador ... 45
5.6.1 Controlador Admin ... 46
5.6.2 Controlador Login... 53
5.6.3 Controlador Restaurante ... 54
5.7 Video Tutoriales... 61
6 Desarrollo front-end ... 62
6.1 Cabecera ... 62
6.2 Pie de la página ... 62
6.3 Paginas ... 63
6.3.1 Pagina menu ... 64
6.3.2 Pagina book ... 66
6.4 Video Tutoriales... 68
7 Resultados y conclusiones ... 69
8 Análisis de Impacto ... 70
9 Bibliografía ... 71
8
Índice ilustración
Ilustración 1: logo de Angular ... 14
Ilustración 2:Logo NPM ... 15
Ilustración 3:Compariva de rendimientos entre varios framework. [8] ... 16
Ilustración 4:.NET ... 19
Ilustración 5: MYSQL ... 22
Ilustración 6:Estructura de proyecto ... 23
Ilustración 7:Tabla de diseño de BBDD ... 24
Ilustración 8: Interfaz añadir al carro ... 24
Ilustración 9:Carro ... 25
Ilustración 10:Carro clic botón eliminar... 25
Ilustración 11:Carro aumentar la cantidad ... 25
Ilustración 12:Carro disminuir la cantidad ... 26
Ilustración 13:Rellenar datos para pagar ... 27
Ilustración 14:Datos rellanados ... 28
Ilustración 15:Factura de pago [5] ... 28
Ilustración 16:Página BOOK TABLE ... 29
Ilustración 17:Página BOOK TABLE datos rellenados ... 29
Ilustración 18:Reserva Enviada ... 29
Ilustración 19:Página LogIn ... 30
Ilustración 20:Web Cuentas ... 31
Ilustración 21:Crear Cuenta ... 31
Ilustración 22:Una cuenta nueva creada ... 32
Ilustración 23:Eliminar una cuenta ... 32
Ilustración 24: Página pedidos... 32
Ilustración 25:Compra de la prueba ... 32
Ilustración 26:La factura de botón info ... 33
Ilustración 27:Página de tarjeta ... 33
Ilustración 28:Página de dirección ... 34
Ilustración 29:Página de reserva ... 34
Ilustración 30:Página de platos ... 34
Ilustración 31:Página cración de plato ... 35
Ilustración 32:Crear proyecto en Visual Studio ... 36
Ilustración 33:Lista de entidades ... 37
Ilustración 34:Ejemplo de entidad cuenta ... 37
9
Ilustración 35: Visual Studio NuGet1 ... 38
Ilustración 36: Visual Studio NuGet2 ... 38
Ilustración 37: Crear proyecto MVC ... 39
Ilustración 38:Fichero appsetting.json ... 40
Ilustración 39: fichero Startup ... 40
Ilustración 40:AplicationDBContext... 41
Ilustración 41:DTOS ... 41
Ilustración 42:DTOCuenta ... 42
Ilustración 43:Creacion de nuevo controlador vacío ... 42
Ilustración 44:Controlador Restaurante ... 43
Ilustración 45:Agregar vista ... 43
Ilustración 46:Crear vista razor ... 44
Ilustración 47:Crear vista de razor 2... 44
Ilustración 48:Modelo MVC ... 45
Ilustración 49: Swagger ... 46
Ilustración 50:Admin/Index ... 46
Ilustración 51:Admin/Cuentas ... 46
Ilustración 52:Admin/Cuentas/{id} ... 47
Ilustración 53: Swagger CrearCuenta ... 47
Ilustración 54:Admin/CrearCuenta ... 48
Ilustración 55:Admin/Pedidos ... 48
Ilustración 56:DeletePedido ... 49
Ilustración 57:Admin/DeletePedido/{id} ... 49
Ilustración 58:Admin/Tarjetas ... 49
Ilustración 59:Admin/Direcciones ... 50
Ilustración 60:Admin/LineaPedidos/{id} ... 50
Ilustración 61:Admin/LineaPed/{id} ... 51
Ilustración 62:Admin/Platos ... 51
Ilustración 63: CrearPlato ... 52
Ilustración 64:Admin/Plato/createplato ... 52
Ilustración 65:Admin/DeletePlato/{id} ... 53
Ilustración 66:Admin/Reserva ... 53
Ilustración 67:Admin/DeleteReserva/{id} ... 53
Ilustración 68:Restaurante/LogIn... 54
Ilustración 69:Admin/LogOut... 54
Ilustración 70:Restaurante/Plato ... 55
10
Ilustración 71:Restaurante/GetLineaPedido/ ... 55
Ilustración 72:Restaurante/CrearPedido ... 56
Ilustración 73:Restaurante/Carro ... 57
Ilustración 74:Restaurante/AddCarro/{id} ... 57
Ilustración 75:Restaurante/AumentarCarro/{id} ... 58
Ilustración 76:Restaurante/DecrementarCarro/{id} ... 58
Ilustración 77:Restaurante/DeleteCarro/{id} ... 59
Ilustración 78: Restaurante/CrearTarjetas ... 59
Ilustración 79:Restaurante/CrearDirecciones ... 60
Ilustración 80:Restaurante/CrearReserva ... 60
Ilustración 81:Fichero Header Restaurante ... 62
Ilustración 82: footer Restaurante ... 63
Ilustración 83:Interfaz Menu ts ... 64
Ilustración 84:Menu ts ... 65
Ilustración 85:Fichero menu html ... 65
Ilustración 86:Interfaz Book ts ... 66
Ilustración 87: Book ts ... 67
Ilustración 88:Book html... 67
Ilustración 89:Pagina Book ... 68
11
1 Objetivo
El objetivo de este trabajo común es la construcción de una página Web para empresas pequeña o mediana, diciendo lo más concreto una página web para restaurante. Un trabajo de esta naturaleza está dividido en front-end, back-end (cliente y servidor) y están conectada por algún base de datos (en mi caso MYSQL).
Así pues, la parte a mi encomendada y que explico en esta memoria se corresponde con la operativa que tendrá que realizar el operario de la empresa.
Es decir, no tendrá competencias en la administración de la empresa, sino que será usuario de las utilidades que le sean encomendadas.
Primeramente, es necesario realizar un estudio sobre las necesidades operativas que necesita el operario para la completa y correcta realización de su trabajo diario. Además, realizar comparativas entre diferentes páginas de restaurante, sabiéndose la situación actual de mercado.
Es también muy importante construir una aplicación muy intuitiva y simple posible, para que el usuario no necesite tener grandes conocimientos de la informática y se familiarice con la operativa de la manera más rápida y natural posible.
Debido por el tiempo limitado de trabajo e insuficiencia de programadores es complicado sacar algo decentes, por el cual, nos enfocamos a implementación de los interfaces y funciones de proyecto. Diciendo más claro no voy a implementar el control de cookies y otros accesos como api para envíos de correos. Además de esto, la principal plataforma que el usuario se va a trabajar es la pantalla de un ordenador, por el cual es posible que tuviese problemas con el uso de otras pantallas de distinto tamaño.
Como solo hay un programador en este proyecto no tendría problemas con la comunicación ni tendría plan de trabajo o metodología de trabajo. Los códigos escritos se guardarán inicialmente en mis discos duros locales, una vez finalizada el proyecto subiré el trabajo a mi GitHub de manera pública. El link de GitHub lo podéis encontrar en la bibliografía.
12
2 Introducción
El avance continuo del comercio mundial hizo necesaria la actualización y modernización de los medios de pago. La aparición de la compra online en las últimas décadas aceleró este proceso. Además, la situación de COVID en los últimos años hizo que la comida a domicilio aumentó de manera brutalmente.
Hoy en día, casi todos restaurantes tienen la opción de pedir la comida a domicilio mediante aplicaciones móviles o paginas oficiales de restaurante.
Ante esta situación, la creación de páginas web ha aumentado de manera explosivamente. Gracias a empresas como WordPress puedes fabricar tu propia página web de manera rápida y eficiente. Sin embargo, eso no es suficiente para aquellos clientes que quiere personalizar su propia página web.
Por este motivo, he decido crear una página web con suficientes interfaces y que está conectada a un base de dato para realizar intercambio de información.
Simplificando las tareas que voy a realizar son:
x Cliente: la página dispuesta para cliente es el parte dispuesto a vender productos o comida. Sus funcionalidades básicas son: realizar pedidos, reservar puesto en restaurante, añadir artículos al carro, aumentar, decrementar la cantidad de articulo que está en el carro y eliminar el articulo desde el carro.
x Administrador: la página dispuesta para el administrador o operario de la empresa es la parte que tiene el control de todas los pedidos e informaciones almacenadas en el base dato, para acceder esta página es necesario tener una cuenta de administrador. Sus funcionalidades básicas son: obtener información de pedidos, tarjetas, direcciones, tickets de pedido, reservar, etc. También tiene la funcionalidad de crear nueva articulo para ponerlo en venta y derecho de eliminar artículos, pedidos, etc.
Uno de los aspectos más laboriosos en un trabajo de estas características es la realización de un prototipo de la interfaz y su planteamiento, es decir, definir el diseño de cada una de las páginas de toda la aplicación. Más adelante explicaré y pondré pruebas de cada interfaz que hecho (Apartado Prototipo de la Interfaz).
13
En cuanto a las tecnologías empleadas, he decido emplear Angular para el caso de front-end, ASP .NET para el caso de back-end y MYSQL para el base de datos.
Las características de estas tecnologías explicaren con más detalle en el apartado Tecnologías Empleadas.
Si estáis interesados en desarrollo de una página web similar como el mío en el apartado de Desarrollo Font-End y Back-End explicarán con más detalle sobre la creación de proyecto tanto Angular como ASP .NET.
14
3 Tecnologías empleadas
3.1 Front-End
Para la realización de Font-End de este proyecto, se ha empleado el framework Angular, basado en el patrón MVC (Model, View, Controller). Es una versión moderna y tiene como objetivo separar la capa de presentación, lógica y componentes de una aplicación.
Ilustración 1: logo de Angular
El proyecto de Angular de se desarrolla en TypeScript, HTML y CSS. Al tratarse de una tecnología nueva, cuenta con la especificación ECMAScript en su código, de la que se nutre TypeScript para añadirle tipos de datos, interfaces y mejoras en la programación orientada a objetos.
A diferencia de AngularJS, el Angular (versión 13) utiliza NPM como su gestor de paquetes, que permite tener casi cualquier librería disponible tan solo a una línea de comando.
Por medio de diferentes comandos, NPM da la posibilidad de incluir librerías, actualizar la versión de estas y borrarlas de nuestra aplicación rápidamente.
15
Ilustración 2:Logo NPM
Angular da la posibilidad de ampliar el HTML de la forma que uno desee, pudiendo crear etiquetas personalizadas que encapsulen el contenido en HTML, el comportamiento en JavaScript y el estilo en CSS, ya que el framework posee las siguientes especificaciones:
x Shadow Dom: Permite encpsular un componente, consiguiendo así que no se vea afectado por el DOM general de la página.
x HTML Imports: Generalmente se usa en la distribución de las librerías de componentes web. Posibilita importar un código HTML en otro HTML.
x Custom Elements: Creación de etiquetas con funciones personalizadas.
x Templates: posibilitan la creación de una estructura visual del componente. Esto quiere decir que no es incluido en el DOM hasta ser procesado por cualquier elemento, haciendo este una copia para incluirla posteriormente en el DOM.
La principal debilidad actual de JavaScript es que sea un lenguaje no tipado, TypeScript permite definir tipos y clases, pudiendo hacer una aplicación más robusta y menos propensa a errores. Además, TypeScript proporciona una sintaxis mucha más entendible y cercana a lenguajes de programación orientados a objetos como Java o C# y los templates definen claramente las características de la vista de un componente y sus relaciones con otros componentes.
Uso de los principales motivos de la elección de este framework para realizar el proyecto es su rendimiento. En la siguiente gráfica se representa el tiempo en milisegundos de la carga de B ítems en diferentes frameworks:
16
Ilustración 3:Compariva de rendimientos entre varios framework. [8]
Como se aprecia, Angular es mucho más rápido que otras plataformas y que competidores actuales como Blaze o el famoso React de Facebook.
Con Angular tampoco tenemos excusas para que nuestro código no esté completamente testeado, ya que cualquier elemento de la aplicación es fácilmente testeable gracias a frameworks como Karma y Jasmine. También es posible implementar tests de aceptación de selenium con Protractor.
x Jasmine: framework de testing. Proporciona todo lo necesario para escribir pruebas básicas. Se entrega con un ejecutor de pruebas HTML en el navegator.
x Karma: se encarga de ejecutar los test de JavaScript según se vayan construyendo, de tal forma que ante cualquier fallo el desarrollador se dará cuenta de inmediato.
x Protractor: usado para escribir pruebas ent-to-end. Estas pruebas exploran la aplicación como si de un usuario se tratase, ejecutando la aplicación real y comprobando que la aplicación responde en el navegador como se espera.
Para tener una aplicación bien estructurada, se ha utilizado la herramienta Angular CLI, un interprete de comandos mantenido por Google que facilita el inicio de un proyecto y la creación de su esqueleto.
17
Angular CLI emplea NPM y Webpack por debajo y permite realizar las siguientes acciones:
x Generar la aplicación.
x Ejecutar la aplicación. Angular CLI lleva integrado un servidor web con live-reload, el cual es lanzado desde la terminal y actualiza la página cada vez que se hace algún cambio en el código, agilizando así el desarrollo.
x Ejecutar tests, tanto unitarios como pruebas de automatización del navegador.
x Compilar el proyecto.
La edición de Angular lo voy a desarrollar con el editor Visual Studio Code, porque Angular CLI te permite crear ficheros a través de códigos y Visual Studio Code ofrece terminales para su ejecución. Visual Studio Code es un editor de código fuente que permite trabajar con diversos lenguajes de programación, admite gestionar tus propios atajos de teclado y refactorizar el código. Es gratuito, de código abierto y nos proporciona una utilidad para descargar y gestionar extensiones con las que podemos personalizar y potenciar esta herramienta.
Las ventas de Visual Studio Code puedo resumir en:
x Autocompletar: Visual Studio Code te ofrece “Autocompletar” en varios lenguajes. Esto te ofrece muchas ventajas en tiempo porque con sólo escribir una expresión o letra puede interpretarlo y autocompletar el resto. Esto me puede dar ventaja para enfocarme sólo en la lógica del código. Junto con Emmet te da varios “atajos” que pueden ser configurados como tú quieras para manipular tu código de manera dinámica.
x Live Server: Esta opción me encanta usar sobre todo cuando estoy empezando un nuevo proyecto, básicamente te permite visualizar tu código en el navegador de tu preferencia inmediatamente que das guardar al código sin necesidad de refrescar.
x Terminal integrada: Tienes la opción de abrir una terminal local, incluso puedes abrir diferentes terminales en el mismo espacio de trabajo.
Lo que te da muchísima flexibilidad dependiendo del crecimiento de tu proyecto.
18
x Biblioteca de extensiones: Visual Studio Code cuenta con una biblioteca de extensiones, las cuales te da un sin número de opciones para ser más eficiente a la hora de estar programando. Desde extensiones de otros lenguajes de programación como diferentes herramientas para visualizar tu código de manera más eficiente. La comunidad de desarrolladores también es extensa lo que te puede dar diferentes opciones de herramientas.
x No tiene costo: Cerrar esto con el broche de oro de que esta herramienta es sin costo, además de ofrecer el software para los diferentes sistemas operativos. ¡Gracias Windows!
19
3.2 Back-End
Para la parte de back he elegido .NET. Se trata de una plataforma para el desarrollo de software que fue lanzada por Microsoft con la finalidad de fusionar su amplio catálogo de productos, que va desde sus múltiples sistemas operativos hasta herramientas de desarrollo. Desde un punto de vista tecnológico, lo que se pretendía con la creación de .NET era poder desarrollar aplicaciones y sistemas que fueran independientes de la arquitectura física y del sistema operativo sobre el que se ejecutaran. La repercusión fue muy grande, ya que Microsoft estableció un estándar de intercambio de información entre sus productos llamado “XML”, que posiblemente a muchos de vosotros os suene.
Ilustración 4:.NET
Desde el punto de vista comercial, .NET podría interpretarse como la alternativa por parte de Microsoft en el sector de los desarrollos web para competir con la plataforma Java de Oracle Corporation, así como con los diversos framework basados en PHP.
Además, favorece el desarrollo en multiplataforma, como por ejemplo el que una misma aplicación pueda correr indistintamente en los diferentes sistemas operativos móviles como IOS, Android o Windows Phone garantizando la comunicación entre los diferentes dispositivos.
Para simplificar la explicación, propondré una lista de beneficios que tiene .NET [11]:
x Disminuir el tiempo de desarrollo de los proyectos.
x Poder utilizar las numerosas funcionalidades ya diseñadas que permite a los diseñadores realizar un proyecto de importación y adaptación a las necesidades en lugar de un desarrollo desde cero.
x Simplificar el mantenimiento de las aplicaciones desarrolladas en esta plataforma.
20
x Reducción de costes debido a la disminución de los tiempos de desarrollo y de mantenimiento.
Esta plataforma se ha convertido la más exitosa en los últimos años y su éxito se debe a gigante compañía del software como Microsoft y con recursos prácticamente ilimitados. A lo largo de estos años se dedicaron a introducirlo tanto en el sector empresarial como en un ámbito académico, hasta convertirlo en una de las principales plataformas de desarrollo.
Como vamos a construir una página web con .NET, tendríamos que usar el ASP.NET. ASP.NET es un marco web gratuito para crear excelentes sitios web y aplicaciones web mediante HTML, CSS y JavaScript. También puede crear API Web y usar tecnologías en tiempo real como Sockets Web.
Las ventajas de ASP.NET son:
x Rendimiento: la aplicación de compila en una sola vez al lenguaje nativo, y luego, en cada petición tiene una compilación Just In Time, es decir se compila desde el código nativo, lo que permite mucho mejor rendimiento.
También permite el almacenamiento del caché en el servidor
x Rapidez en programación: mediante diversos controles, podemos con unas pocas líneas y en menos de 5 minutos mostrar toda una base de datos y hacer rutinas complejas.
x Servicios Web: trae herramientas para compartir datos e información entre distintos sitios.
x Seguridad: tiene diversas herramientas que garantizan la seguridad de nuestras aplicaciones.
ASP.NET ofrece tres marcos para crear aplicaciones web:
x Formularios Web Forms, x ASP.NET MVC
x ASP.NET Web Pages.
Los tres marcos son estables y están maduros, y puede crear excelentes aplicaciones web con cualquiera de ellos. Independientemente del marco que elija, obtendrá todas las ventajas y características de ASP.NET.
Para mi caso, escogí ASP.NET MVC, se trata de un control total sobre el marcado HTML, el código y el marcado separados y las pruebas fáciles de escribir. Por otra parte, ofrece una eficaz forma de compilar sitios web dinámicos basada en
21
modelos, lo que permite una separación clara de intereses y aporta control total sobre el marcado para lograr un desarrollo ameno y rápido. ASP.NET MVC incluye muchas características que permiten el desarrollo para TDD rápido para crear aplicaciones sofisticadas que usan los estándares web más recientes.
Microsoft ofrece un IDE llamado Visual Studio para el desarrollo del proyecto en .NET, porque .NET y Visual Studio pertenece a Microsoft. Visual Studio es un programa con numerosas características que respalda muchos aspectos del desarrollo de software.
Sus características lo podemos resumir en:
x Visual Studio .NET permite automatizar la compilación en código fuente.
x El editor que posee el programa es bastante inteligente; puede detectar errores y sugerir código según sea necesario.
x El programa incluye un diseñador para Windows Forms y formularios web el cual permite arrastrar y soltar de elementos de interfaz de usuario.
x Por otra parte, contiene diferentes herramientas que permiten visualizar y navegar a través de los elementos de los proyectos, ya sea que se trate de archivos de código C# u otros recursos como imágenes de mapas de bits o archivos de sonido.
x Además, Visual Studio .NET nos permite utilizar técnicas de depuración avanzadas al momento de desarrollar proyectos. Por ejemplo, es posible recorrer el código una instrucción a la vez y, al mismo tiempo, mantenerse al tanto del estado de nuestra aplicación.
22
3.3 BBDD
Para parte de base datos, escogí MYSQL porque he hecho varios proyectos con SQL server y quería cambiar el BBDD con un propósito de reto personal. Por otro lado, en la escuela daba clases con el base de dato MYSQL durante el grado y mi tutor Luis Mengual es la persona que enseña en esa asignatura. La instalación de MYSQL y su servidor ya nos han enseñado en los cursos anteriores, pero de todas formas dejo también un enlace de referencia [9].
Ilustración 5: MYSQL
MySQL es un sistema de base de datos relacional muy popular, y de los más utilizados para los sistemas de gestión de contenidos. Sus ventajas lo podemos en definir con:
x Bajo Coste: Es una base de datos gratuita. Al ser de código abierto, no tiene coste, con el ahorro que eso conlleva.
x Sencillez: Es muy fácil de usar. Podemos empezar a usar la base de datos MySQL sabiendo unos pocos comandos.
x Rendimiento: Es una base de datos muy rápida. Su rendimiento es estupendo sin añadirle ninguna funcionalidad avanzada.
x Seguridad: Utiliza varias capas de seguridad. Contraseñas encriptadas, derechos de acceso y privilegios para los usuarios.
x Bajo Requisitos: Pocos requerimientos y eficiencia de memoria. Tiene una baja fuga de memoria y necesita pocos recursos de CPU o RAM.
23
4 Prototipo de la interfaz
Ilustración 6:Estructura de proyecto
La estructura mostrada en la imagen es la estructura que voy a emplear para este proyecto. El cliente accede desde parte de Angular, este está conectado con Asp .net core y asp .net core tiene acceso al base de dato MYSQL. A continuación, explicaré sobre el planteamiento de problema y las todas las pruebas que el cliente o administrador puede acceder.
4.1 Planteamiento de problema
Antes de empezar a programar se debe realizar un planteamiento de los interfaces de web.
Como no se ha realizado nunca una web de esta naturaleza se ha llevado a cabo un análisis del mercado de los restaurantes para tener un punto de referencia.
Para ello, he visto varios restaurantes web como Vinitus, Chirón, etc.
Finalmente he quedado con las entidades como muestra en la siguiente tabla.
La tabla la he diseñado con dbdiagram, se trata de una herramienta de diseño de diagramas de bases de datos.
24
Ilustración 7:Tabla de diseño de BBDD
4.2 Pruebas de cada interfaz: cliente
4.2.1 Interfaz añadir al carroEsta interfaz tiene la función de añadir un producto que está en venta al carro de compra. Para añadir al carro, simplemente tienes que pinchar el clic a símbolo de carrito que está en la posición inferior del artículo.
Ilustración 8: Interfaz añadir al carro
Para seguir la prueba he añadido a plato1 (la hamburguesa que cuesta a 1€).
4.2.2 Interfaz carro aumentar y decrementar
Para ir al carro simplemente pinchas a icono de carro que está en la posición superior de la página web. Una vez que estamos podemos pinchar al botón de Add para aumentar y el botón Restar para disminuir la cantidad de producto.
También existe la opción de eliminar el producto pinchando el botón rojo.
Veamos las pruebas mostradas en la imagen:
25
Ilustración 9:Carro
Ilustración 10:Carro clic botón eliminar
Ilustración 11:Carro aumentar la cantidad
26
Ilustración 12:Carro disminuir la cantidad
4.2.3 Interfaz pedido
Para realizar un pedido tienes que dar el botón pagar para poder acceder a la página de pago. Una vez entrado tenemos que rellenar una serie de datos, cuando has acabado de rellenar la información, tendrás que pinchar el botón de pagar para generar la factura.
27
Ilustración 13:Rellenar datos para pagar
28
En mi caso he rellenado los datos de siguiente manera. Y doy al botón de pagar.
Ilustración 14:Datos rellanados
Ilustración 15:Factura de pago [5]
29 4.2.4 Interfaz book
Para reservar una mesa en mi página web, tienes que dar clic BOOK TABLE, esto te llevará a la página de reserva. Rellena los datos y dar el botón reservar te saldrá una página que te indica enviado.
Ilustración 16:Página BOOK TABLE
Ilustración 17:Página BOOK TABLE datos rellenados
Ilustración 18:Reserva Enviada
30
4.3 Pruebas de cada interfaz: administrador
4.3.1 Interfaz loginPara entrar la página de administrador necesita hacer un LogIn, este interfaz comprueba el correo de la cuenta y su contraseña. Si es cierta entrar la pagina de Administrador por el contrario se queda en el web de LogIn.
Como ya tengo cuentas creadas llamadas [email protected] con la contraseña admin. Puedo entrar en la página.
Ilustración 19:Página LogIn
4.3.2 Interfaz cuenta
Una vez entrado en la web de admin, te aparece la siguiente imagen:
31
Ilustración 20:Web Cuentas
Esta página muestra todas las cuentas existentes de base de datos. Estas cuentas pueden ser eliminadas con da el botón eliminar, también puedes crear cuentas nuevas. Para crear la cuenta simplemente rellenes los campos indicados y dar el botón crear.
Ilustración 21:Crear Cuenta
32
Ilustración 22:Una cuenta nueva creada
Ilustración 23:Eliminar una cuenta
4.3.3 Interfaz pedido
En esta web muestra los pedidos hechos y puede mostrar la compra que hizo.
La eliminación de pedido está vinculado con tarjeta y dirección de envío, quiero decir si eliminas un pedido, eliminas también su dirección y su tarjeta.
Ilustración 24: Página pedidos
Ilustración 25:Compra de la prueba
33
Ilustración 26:La factura de botón info
4.3.4 Interfaz tarjeta
La web muestro todas las tarjetas existentes del base de datos.
Ilustración 27:Página de tarjeta
4.3.5 Interfaz dirección de envío
La web muestro todas las direcciones existentes del base de datos.
34
Ilustración 28:Página de dirección
4.3.6 Interfaz reserva
La web muestro todas las reservas existentes del base de datos y las reservas puede ser eliminadas.
Ilustración 29:Página de reserva
4.3.7 Interfaz Plato
La web muestra todos los platos existentes del base de datos y los platos son eliminables y creables.
Ilustración 30:Página de platos
Para crear un plato se necesita rellenar unas series de datos. Para el poner una imagen a un plato es necesario que tuvieras la imagen en la carpeta adecuada, dejo la ruta de la carpeta adecuada src/assets/images.
35
Ilustración 31:Página cración de plato
36
5 Desarrollo back-end
Como hemos dicho anteriormente el desarrollo de .NET lo vamos a desarrollar en Visual Studio. La versión de Visual Studio que tengo yo es community 2022, se trata de una versión gratuita que ofrece el Microsoft [10].
Podéis encontrar todo el código en mi GitHub.[6]
5.1 Crear proyecto nuevo con sus entidades
Lo primero de todo es crear un proyecto nuevo con Visual Studio. Abrimos el Visual Studio y creamos un proyecto, elijo la versión aplicación de consola, ya que solamente vamos a crear las entidades.
Ilustración 32:Crear proyecto en Visual Studio
Una vez creado el proyecto, tenemos que crear las entidades necesarias, en mi caso he creado estas.
37
Ilustración 33:Lista de entidades
Para poner un ejemplo, esta es la entidad de cuentas que tengo yo.
Ilustración 34:Ejemplo de entidad cuenta
5.2 Añadir librería
Después de crear las entidades nos encuentra la situación de añadir los paquetes NuGet, este paso es muy importante, ya que sin estos paquetes no funcionará adecuadamente el proyecto. También es recomendable tener la misma librería si vais a compilar con mi código.
38
Ilustración 35: Visual Studio NuGet1
Ilustración 36: Visual Studio NuGet2
5.3 Construir la conexión de base dato y Angular
Ahora agregamos un nuevo proyecto, pero esta vez seleccionamos el modelo MVC.
39
Ilustración 37: Crear proyecto MVC
Después de todo esto lo que tenemos que hacer es crear una conexión con el base datos en el nuevo proyecto creado. Para ello necesita modificar pequeños cambios en el Startup.cs, el fichero json y crear un fichero nuevo aplicationDbContext.cs.
En el fichero json, lo que tenemos que añadir unas líneas de Código, esto nos sirve para indicar
"ConnectionStrings": { "DefaultConnection":
"Server=localhost;Database=tfg;Uid=root;Pwd=1234"
}
Para el caso del fichero Startup, añadimos siguiente código en ConfigureServices.
String mySqlConnection =
Configuration.GetConnectionString("DefaultConnection");
services.AddDbContext<AplicationDbContext>(options =>
options.UseMySql(mySqlConnection, ServerVersion.AutoDetect(mySqlConnection)));
40
Ilustración 38:Fichero appsetting.json
Ilustración 39: fichero Startup
Las "Migrations" son una funcionalidad de EF (Entity Framework) que permiten crear y modificar bases de datos desde una línea de comandos del Visual Studio.
Es la funcionalidad principal del flujo "Code First".
Para realizar migración es necesario tener un fichero DBContext, en nuestro caso el fichero se llama applicacionDBContext.
41
Ilustración 40:AplicationDBContext
Después de realizar todo el cambio es necesario ejecutar migración en la Consola del Administrador de paquete. Introduciendo add-migration nombre-de- migracion y Update-database. Ejecutando estos códigos correctamente, tendríamos las tablas de entidades creadas en el base de datos.
Para la conexión de Angular es similar a este añadiendo un par de línea de códigos en el fichero Startup.cs, estas líneas las podéis encontrar en mi GitHub [6].
5.4 Entidades DTOS
Una vez, actualizado el base de datos, lo siguiente que tenemos que hacer son los controladores de nuestro sistema, pero antes de esto tenemos que crear ficheros DTOS que son entidades que nosotros querías devolver en un get o entidades que nos facilita a la hora de post.
Ilustración 41:DTOS
42
Ilustración 42:DTOCuenta
5.5 Controlador MVC de Visual Studio
Creamos un controlador vacío o con acciones de lectura y escritura.
Ilustración 43:Creacion de nuevo controlador vacío
43
Para poder conectar al base de datos en un controlador necesitas llamar DbContext que hemos creado anteriormente y un constructor que inicia el DbContext.
Ilustración 44:Controlador Restaurante
Recordar crear routes para cada get o post que vamos a realizar. En el caso de que quieres tener modelo MVC, es necesario agregar vistas como indica siguientes imágenes y en el return necesita devolver el view(), en mi caso he quitado el view() porque no me interesa el mvc lo que me interesa es recursos Json que devuelve.
Ilustración 45:Agregar vista
44
Ilustración 46:Crear vista razor
Ilustración 47:Crear vista de razor 2
45
Ilustración 48:Modelo MVC
5.6 Todas las interfaces de controlador
En esta sección contaré todos los interfaces de creadas en el Back-End a pesar de que algunos de ellos no llegaran a usar en la aplicación web, porque tiene poco uso en el mundo laboral, pero a la hora de crearlos no me dio cuenta.
Hay 3 Controladores para diferentes interfaces, uno llamado restaurante es el controlador dirigido para los clientes, el controlador LogIn es que controlador para ingresar cuenta y el último llamado Admin que es controlador para los administradores de página web.
Para distribución de interfaz voy a utilizar api Swagger (se añade automáticamente apartir
de la versión .NET 5.0) contiene las funciones básicas de Postman.
46
Ilustración 49: Swagger
5.6.1 Controlador Admin
GET /Admin/Index: Petición get de la página inicial del controlador admin, no devuelve nada.
Ilustración 50:Admin/Index
GET /Admin/Cuentas: Petición get que devuelve todas las cuentas existentes en el base de datos.
Ilustración 51:Admin/Cuentas
DELETE /Admin/ Cuentas/{id}: Petición delete que elimina la cuenta con el id indicado.
47
Ilustración 52:Admin/Cuentas/{id}
POST /Admin/ CrearCuentas: Petición post crear cuenta, se manda el nombre, el apellido, el correo y la contraseña de la cuenta.
Ilustración 53: Swagger CrearCuenta
48
Ilustración 54:Admin/CrearCuenta
GET /Admin/Pedidos: Petición get devuelve todos los pedidos existentes en el base de dato.
Ilustración 55:Admin/Pedidos
DELETE /Admin/DeletePedido/{id}: Petición delete que elimina el pedido con el id indicado.
49
Ilustración 56:DeletePedido
Ilustración 57:Admin/DeletePedido/{id}
GET /Admin/Tarjetas: Petición get devuelve todas las tarjetas existentes en el base de dato.
Ilustración 58:Admin/Tarjetas
GET /Admin/Direcciones: Petición get devuelve todas las direcciones existentes en el base de dato.
50
Ilustración 59:Admin/Direcciones
GET /Admin/LineaPedido/{id}: Petición get devuelve todas las líneas de pedido existentes en el base de dato.
Ilustración 60:Admin/LineaPedidos/{id}
GET /Admin/LineaPed/{idPedido}: Petición get devuelve todas las líneas de pedido que tiene relación con el idPedido existentes en el base de dato.
51
Ilustración 61:Admin/LineaPed/{id}
GET /Admin/Platos: Petición get devuelve todos los platos existentes en el base de dato.
Ilustración 62:Admin/Platos
POST /Admin/Plato/createplato: Petición post crear plato, se manda el nombre, la descripción, el precio, el tipo de plato y el nombre de la imagen.
52
Ilustración 63: CrearPlato
Ilustración 64:Admin/Plato/createplato
DELETE /Admin/DeletePlato/{id}: Petición delete que elimina el plato con el id indicado.
53
Ilustración 65:Admin/DeletePlato/{id}
GET /Admin/Reserva: Petición get devuelve todas las reservas existentes en el base de dato
.
Ilustración 66:Admin/Reserva
DELETE /Admin/DeleteReserva/{id}: Petición delete que elimina la reserva con el id indicado.
Ilustración 67:Admin/DeleteReserva/{id}
5.6.2 Controlador Login
POST /Restaurante/LogIn: Petición post que comprueba el correo y la contraseña introducido.
54
Ilustración 68:Restaurante/LogIn
POST /Admin/LogOut: Petición post de logout.
Ilustración 69:Admin/LogOut
5.6.3 Controlador Restaurante
GET /Restaurante/Platos: Petición get devuelve todos los platos existentes en el base de dato.
55
Ilustración 70:Restaurante/Plato
GET /Restaurante/GetLineaPedido: Petición get devuelve todas las líneas del último pedido existentes en el base de dato.
Ilustración 71:Restaurante/GetLineaPedido/
POST/Restaurante/CrearPedido: Petición post crear pedido.
56
Ilustración 72:Restaurante/CrearPedido
GET /Restaurante/Carro: Petición get devuelve todos los platos añadidos en el carrito existentes en el base de dato.
57
Ilustración 73:Restaurante/Carro
PUT /Restaurante/AddCarro/{id}: Petición put añade los platos al carro.
Ilustración 74:Restaurante/AddCarro/{id}
PUT /Restaurante/AumentarCarro/{id}: Petición put, aumentar la cantidad platos en carro.
58
Ilustración 75:Restaurante/AumentarCarro/{id}
PUT /Restaurante/DecrementarCarro/{id}: Petición put, decrementar la cantidad platos en carro.
Ilustración 76:Restaurante/DecrementarCarro/{id}
DELETE /Restaurante/DeleteCarro/{id}: Petición delete, elimina el plato del carro.
59
Ilustración 77:Restaurante/DeleteCarro/{id}
POST/Restaurante/CrearTarjetas: Petición post crear tarjeta.
Ilustración 78: Restaurante/CrearTarjetas
POST/Restaurante/CrearDirecciones: Petición post crear direcciones.
60
Ilustración 79:Restaurante/CrearDirecciones
POST/Restaurante/CrearReserva: Petición post crear reserva.
Ilustración 80:Restaurante/CrearReserva
61
5.7 Video Tutoriales
Todos estos detalles lo puedes seguir en un curso gratuito de
YouTube
[2].En este curso te enseña como conectar el base de datos MySQL con .NET Visual Studio + Angular con una entidad llamado comentario.
Dejo también el
video
[4] que construye un CRUD con MVC en Visual Studio.62
6 Desarrollo front-end
Para facilitar el diseño de la página web, es he buscado una plantilla de HTML para incorporar en nuestro proyecto, os dejo un par de enlaces que ofrece plantillas gratuitas:
x
https://themewagon.com/x
https://themefisher.com/Para nuestro caso he escogido una plantilla de hamburguesería [1].
Podéis encontrar mi código en mi GitHub.[7]
6.1 Cabecera
En el Font es muy normal hacer una cabecera para todas las páginas, pero en mi caso como hemos cogido una plantilla de HTML, simplemente cogemos la cabecera de la plantilla y nos pegamos a nuestro header.
Como la plantilla que he seleccionado no tiene partes que no está bien construido, porque el cuerpo y la cabecera está en la misma sección tuve que copiar la todo el parte de cuerpo para cada página.
Ilustración 81:Fichero Header Restaurante
6.2 Pie de la página
Buscamos el pie de la plantilla y lo pegamos al nuestro. Recuerda crear una carpeta llamado assets para guardar el contenido de css de la plantilla y las imágenes que vamos a utilizar durante la plantilla y cambiar las rutas de imágenes, etc.
63
Ilustración 82: footer Restaurante
6.3 Paginas
No voy a mostrar todo el código de todas las páginas porque la mayoría de código en Angular tiene la estructura similar, también podéis encontrar todo el código en mi GitHub [7].
Recuerda para crear carpetas con terminal en Angular se utiliza los siguientes códigos. ng g c carpeta/nombre-pagina o ng g c carpeta/nombre-pagina –- skipTests=true. La diferencia entre estos 2 comandos esta si crear el fichero spec.ts o no, en nuestro caso no vamos a usar este fichero por lo tanto nos sirve ambos comandos.
64 6.3.1 Pagina menu
Ilustración 83:Interfaz Menu ts
Esta imagen muestra la interfaz del web menú, la interfaz exporta un objeto llamado platos con x datos, y un par de métodos con el url que va dirigido a back-end.
65
Ilustración 84:Menu ts
Este es typescript de menú. Recoge los datos de platos llegados desde back-end y lo guarda en un array llamado listPlatos. Esta lista imprimirá sus datos en el fichero de HTML.
Ilustración 85:Fichero menu html
66 6.3.2 Pagina book
Presento el book porque se trata de una interfaz de post. Dentro de la carpeta de book contiene una carpeta de interfaz y otra página que hace referencia a su estado de reserva (se trata de una página HTML que solamente aparece cuando consigue enviar la propuesta de reserva).
Ilustración 86:Interfaz Book ts
67
Ilustración 87: Book ts
Ilustración 88:Book html
68
Ilustración 89:Pagina Book
6.4 Video Tutoriales
Todos estos detalles lo puedes seguir en un curso gratuito de YouTube [2][3].
En este curso te enseña pasar a una plantilla HTML a Angular.
69
7 Resultados y conclusiones
El principal motivo de satisfacción una vez concluido el proyecto del Web, ha sido comprobar que se han ido cumpliendo todos los objetivos fijados inicialmente.
Considero que el resultado obtenido se acerca mucho a la idea inicial que me propuse cuando afronté la realización de este Trabajo de Fin de Grado.
Cumpliendo todos los objetivos que propuso desde principio.
x Diseña la organización de BBDD y conectar la BBDD a través de Visual Studio.
x Implementar los intercambios de Cliente y Administrador para gestionar la inserción y recuperación de fichas de artículos, etc.
x Desarrollo de la interfaz cliente y Administrador x Conectar la implementación de .Net con el Angular x Diseño la página a través de Angular.
En cuanto a los conocimientos adquiridos tras el trabajo constante en este proyecto, se pueden destacar los siguientes:
x Mejora notable en el manejo de Angular. Aprendí y consolidé notablemente los lenguajes de TypeScript, HTML y CSS.
x He aprendido a conectar a diferentes BBDD con .NET.
x Aprendí la conexión de la interfaz entre angular y .net, conexiones como post, put, delete, get.
x Incremento del conocimiento de la herramienta Git.
x Familiarización de las herramientas Visual Studio, Visual Studio Code, MYSQL.
x He aprendido que hay que darle mucha importancia a la arquitectura, ya que he empleado mucho tiempo en pensar cuál era la arquitectura idónea para la aplicación, viendo a posteriori que la aplicación ha crecido de una manera muy natural y sin ningún desbordamiento.
70
8 Análisis de Impacto
Tras la realización del TFG:
x Me dio mucha falsa sensación de tiempo. Muchas veces pienso que voy a terminar a tiempo, sin embargo, cada vez que pienso así no fui capaz de terminar a tiempo. Lo cual me hace pensar en mejorar la distribución de tiempo entre mi vida cotidiana, trabajador y estudiante. Sé que esto también es una falta de soltura en programación, etc.
x La realización de TFG también me ayuda a tener un CV más competente y un perfil mejorado. Desde el punto de vista empresarial es un punto bastante positivo.
x Me he impactado mucho en las modificaciones que tuve que hacer.
Hablando de la planificación que he creado desde principio con la de final no tuve mucho que ver. A principio de todo he creado una estructura basada a mi imaginación, pero finalmente tuve que cambiar toda la estructura porque la estructura inicial no es intuitiva ni está pensada para casos reales.
x Una vez finalizada la realización de trabajo de fin de grado, me siendo muy satisfactorio ya que he podido construir una pagina web desde cero, tanto para parte front-end o back-end. Con la realización de esta tarea me está acercando al programador full stack.
71
9 Bibliografía
[1] Feane - Free Bootstrap 4 HTML5 Restaurant Website Template - ThemeWagon.
(s. f.). ThemeWagon. https://themewagon.com/themes/free-bootstrap-4-html5- restaurant-website-template-feane/
[2] Tomas Ruiz Diaz. (2021, 4 de marzo). Angular 11 - Net Core 5 - MySQL [Video].
YouTube. https://www.youtube.com/watch?v=9dvha06lbgA
[3] Anartz Mugika Ledo - Desarrollo & Formación. (2020, 5 de febrero). Clase #1 - Convertir plantilla HTML en una Web App con Angular 8 y publicarla en Netlify [Video]. YouTube. https://www.youtube.com/watch?v=TPWHBLHYIi0
[4] Dot Net Tricks. (2021, 21 de
enero). Entity Framework Core In 60 Minutes : Entity Framework Core Tutorial [Video].
YouTube. https://www.youtube.com/watch?v=PqFwtF9HE3Y
[5] Free HTML to PDF Invoice templates. (s. f.). HTML PDF API. https://htmlpdfapi.com/blog/free_html5_invoice_templates
[6] GitHub - HenryWorkingson/TFG. (s. f.).
GitHub. https://github.com/HenryWorkingson/TFG
[7] GitHub - HenryWorkingson/front: angular web. (s. f.).
GitHub. https://github.com/HenryWorkingson/front
[8] ¿Por qué Angular 2? - Adictos al trabajo. (s. f.). Adictos al trabajo. https://www.adictosaltrabajo.com/2016/02/15/por-que-angular-2/
[9] Paso a paso: instalar y configurar MySQL en Windows 10. (s. f.).
ADSLZone. https://www.adslzone.net/esenciales/windows-10/instalar-mysql/
[10] Visual Studio 2022 Community Edition: descargar la versión gratuita más reciente. (s. f.).
Visual Studio. https://visualstudio.microsoft.com/es/vs/community/
[11] ¿Qué es el .NET? ¿Para qué sirve? (s. f.). Blog Emagister. https://www.emagister.com/blog/que-es-el-net-para-que-sirve/
Este documento esta firmado por
Firmante CN=tfgm.fi.upm.es, OU=CCFI, O=ETS Ingenieros Informaticos - UPM, C=ES
Fecha/Hora Thu Jan 20 20:16:30 CET 2022 Emisor del
Certificado [email protected], CN=CA ETS Ingenieros Informaticos, O=ETS Ingenieros Informaticos - UPM, C=ES Numero de Serie 561
Metodo urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (Adobe Signature)
