Introducción al Catalogo web.

Transcripción

1 Introducción al Catalogo web. Contenido 1. Objetivo: Funcionalmente: Administración: Visor: Tecnología: Base de datos: Generación de código c#: EL generador de persistencia C# es totalmente genérico: Repositorio de imágenes: Enlace a las imágenes: Referencias: Objetivo: Dar una breve introducción técnica y funcional de la aplicación Catalogo web. 2. Funcionalmente: Funcionalmente la aplicación permite realizar un catálogo basado en imágenes de lo que usted desee, por ejemplo de productos, de vestimentas, de pinturas etc. La aplicación está dividida en los módulos de Administración y Visor, como se detalla a continuación: 2.1. Administración: El módulo de administración tiene la responsabilidad de gestionar las imágenes de los productos o ítems que formarán parte de nuestro catálogo. También nos da la posibilidad de ingresar las propiedades de los mismos, como ser su descripción, código y nombre. Captura de pantalla del módulo de administración. 1

2 Una vez seleccionado el ítem, la siguiente captura de pantalla nos muestra cómo completar los valores de las propiedades del mismo, podemos ver el código, el nombre, las dimensiones y su descripción. El campo Habilitado nos indica si el ítem es mostrado por el modulo Visor o no, en caso que este deshabilitado no existirá para el modulo visor y por ende no será mostrado por el mismo. Es posible agrupar los ítems o productos dentro de categorías, por ejemplo el Coala lo hemos puesto dentro de la categoría Animales en extinción tal como podemos ver en la siguiente captura de pantalla. También podemos ver información de seguimiento, como ser la cantidad de visitas que tiene nuestro producto o ítem, en la captura de pantalla podemos notar que el Coala ha sido visto por 4 personas. Ingreso de propiedades. 2

3 La siguiente figura muestra que ocurre luego de realizar un clic sobre la opción Ver, podemos ver que en primer plano se muestra la imagen ampliada. La opción ver 3

4 La opción Eliminar, ver flecha roja, nos permite borrar definitivamente el ítem como se puede ver en la Figura Eliminar producto. Sin embargo es conveniente utilizar la opción de des habilitación en lugar de eliminarlo, de este modo en cualquier momento podremos habilitarlo y el ítem volverá a formar parte del catálogo. Figura Eliminar producto La Figura Categorías muestra la lista de categorías existente, desde el módulo de administración podemos gestionar las mismas, agregando, eliminando y modificando cualquiera de ellas. Figura Categorías 4

5 La siguiente figura muestra el modulo que permite realizar el agregado, lo modificación o eliminación de una categoría. Figura Administración de categorías Una de las opciones más usadas para ver el impacto de la modificación que acabamos de realizar mediante el módulo de administración, es el ítem de menú Lanzar visor, el mismo nos permite ejecutar el modulo visor y verificar que los cambios realizados sean correctos. Figura Lanzar visor 5

6 La siguiente figura muestra la secuencia que debe seguirse para realizar cambios desde el módulo de administración, comprobando siempre los mismos desde del modulo visor. Figura flujo para una modificación 2.2. Visor: El modulo visor es la aplicación a la que ingresaran los usuarios a ver los productos o ítems publicados. Estos productos o ítems fueron antes ingresados desde el módulo de administración, tanto sus imágenes como sus atributos y descripciones. Captura de pantalla del Visor. 6

7 Tanto el módulo de administración como el visor son aplicaciones web, así que podrá gestionar la aplicación desde cualquier máquina que posea acceso a Internet, sin la necesidad de tener que instalar una aplicación cliente para realizar el fin antes mencionado. 3. Tecnología: La aplicación está desarrollada con tecnología Microsoft ASP.net y escrita en lenguaje C#.NET Framework 3.5, no utiliza ningún framework java script de presentación para su interfaz de usuario. 4. Base de datos: La aplicación utiliza una base de datos Microsoft Access, llamada Catalogo.mdb para persistir los atributos y la descripción de un producto que acompañaran a la imagen del mismo, aunque dicha imagen no será persistida en esta base de datos sino que lo hará en el file system, en un directorio llamado RepocitorioImagenes. La ubicación de la base de datos se encuentra en \CatalogoWeb\App_Data\Catalogo.mdb. Figura DER diagrama entidad relación 7

8 Como un estándar podemos observar que cada tabla tiene una clave primaria formada por el prefijo Id + Nombre de la tabla, de esta manera la tabla Categoria tiene una clave primaria llamada IdCategoria y la tabla Producto una clave primaria llamada IdProducto y así podríamos seguir con cada una de la tablas y sus claves primarias. Dicha claves primarias conforman una clave sustituta ( surrogate key en inglés), la misma identifica inequívocamente a un registro y es del tipo numérico auto incremental, su valor no está relacionado con nada del dominio del negocio, cosa que disminuye el impacto ante los cambios que aparezcan durante el siclo de vida de la aplicación. Tabla Categoria Config Contacto Curriculumn Enlace Producto Descripción Almacena las categorías, bajo las cuales se encuentran una serie de productos, por ejemplo Teléfonos celulares, Bicicletas, etc. Almacena datos propios del establecimiento de la aplicación, como ser las leyendas de los títulos, o mensajes de bien venida. Almacena los datos de contacto de la persona que publica, como ser el teléfono la dirección, el correo electrónico, etc. Almacena el texto del curriculum de la persona o empresa que publican los artículos. Almacena las URLs o enlaces del tipo HTTP, a otros sitios relacionados, complementarios y de interés para los visitantes. Alacena las características que describen al ítem o producto que conforma el catalogo. 8

9 Usuario Almacena las credenciales del usuario administrador de la aplicación. 5. Generación de código c#: Se ha utilizado para hacer esta aplicación una herramienta de generación de código de persistencia que es capaz de generar las entidades y sus persistidores correspondientes a partir del DER (Diagrama Entidad Relación). La misma se encuentra como parte de la solución en su formato binario y fue desarrollada por nuestro equipo. Figura Directorio generador Figura file Generador 9

10 SI hemos cambiado nuestra base de datos y por ende nuestro DER, debemos ejecutar el generador GeneradorAccess.exe y seguir los siguientes pasos para construir la nueva capa de persistencia. Seleccionamos la base de datos a partir de la cual nuestro generador debe construir el código C# de la entidades y sus persistidores correspondientes. Seleccionamos el Namespace del cual dependerán nuestras entidades y código de persistencia, en este caso el mismo se llamara Persistencia. 10

11 Seleccionamos el directorio de salida de nuestro código fuente generado, en nuestro caso C:\Temp\CatalogoWeb\CatalogoWeb. Pero debido al namespace ingresado en el Paso 2, el directorio de salida completo sería C:\Temp\CatalogoWeb\CatalogoWeb\Per sistencia notemos que el nombre del directorio final coincide con nuestro namespace. La aplicación generadora presenta un resumen final de la información ingresada en las solapas anteriores dándonos la posibilidad de guardar esta configuración para no tener que ingresarla nuevamente en el siguiente siclo de generación de código. 11

12 Luego de hacer clic sobre el botón Generar Código aparecen un total de 133 archivos generados, esta cantidad varia, dependiendo de la cantidad de tablas que formen nuestra base de datos y por ende nuestro modelo DER. Al generarse el código en el directorio C:\Temp\CatalogoWeb\CatalogoWeb\Persistencia todos los archivos serán sobrescritos excepto los que se encuentran en el directorio BusinessModel cuya ruta completa es C:\Temp\CatalogoWeb\CatalogoWeb\Persistencia\BusinessModel ya que son estos los que el desarrollador puede utilizar para agregar característica propias (custom) a la aplicación. Por ejemplo, en la clase Producto, se ha sobrescrito la propiedad base DeletePreCondition para que cada vez que se elimine un registro de la tabla Producto, se elimine también su archivo de imagen asociado del file system y de esa manera mantener la integridad de la información o en otras palabras que no existan archivos de productos huérfanos, o sea sin su producto o registro respectivo en la tabla Producto. De este modo, podremos generar código cuantas veces queramos sin correr peligro de pisar código personalizado que hayamos escrito antes de la generación. Figura Integridad de producto 12

13 6. EL generador de persistencia C# es totalmente genérico: Cabe destacar que el generador de código de persistencia de entidades a base de datos relacional Microsoft Access puede ser utilizado en cualquier aplicación que se nos ocurra ya que es totalmente genérico, solo debemos tener en cuenta cómo escribir el nombre y el tipo de la clave primaria de cada tabla. A que nos referimos? Para entenderlo mejor basta un ejemplo: si la tabla se llama Usuario su clave primaria debe llamarse IdUsuario, Id + nombre tabla, también debemos tener en cuenta que la clave primaria debe ser del tipo AutoNumber o sea un número entero largo auto incremental, tal como se muestra en la siguiente captura de pantalla. Vista de diseño de la tabla Usuario Con respecto a las claves foráneas (foreign key) deben llamarse como la clave primaria (primary key) a la que apuntan y deben ser del tipo entero largo, tal como se muestra en la siguiente figura: 13

14 7. Repositorio de imágenes: Las imágenes de los productos cargadas en la aplicación son almacenadas en el directorio llamado RepocitorioImagenes, tal como podemos ver en la figura siguiente: Figura RepocitorioImagenes Cada imagen es renombrada para no generar conflictos con el file system debido a los posibles nombres de los archivos y guardada en dos formatos uno grande y otro pequeño para mostrar como vista preliminar en los listados. Los archivos en formato pequeño llevan el prefijo 14

15 Mini_ como parte del nombre del archivo, con el mismo nombre pero sin prefijo encontramos su respectivo archivo compañero, el archivo grande. En la Figura tamaños, podemos observar la diferencia existente entre dos archivos tomados adrede para destacarla, el grande pesa 89KB y el pequeño 6KB. Figura tamaños 8. Enlace a las imágenes: Una URL a una imagen se puede obtener simplemente adicionando a la URL base el nombre del archivo, por ejemplo: Figura URL imágenes b32883e1c732.jpg Figura URL imagen ejemplo 15

16 9. Referencias: Fecha primera edición: 20 de enero de 2016 Autor: Horacio Aldo Tore Corregido por: Estado: Borrador Versión del documento: