DESARROLLO DE APLICATIVO WEB PARA GESTIONAR LA INFORMACIÓN DE   

UNA VETERINARIA

AUTORES 

Jeins Manuel Andrade Serrano: Estudiante de  quinto semestre del programa tecnología
en gestión 
Santiago Lozano Murcia: Estudiante de quinto semestre del programa tecnología en
gestión de base de datos de la universidad del Tolima.
Wilder Andrés Buitrago Céspedes: Estudiante de  quinto semestre del programa
tecnología en gestión 

ABSTRACT
This document will focus on the development stages of a web application for information
management generated by a veterinary surgeon; Stages such as requirements analysis,
planning, design and coding. Along with its corresponding steps for the elaboration of each
cycle. At the end of this process, focus on highlighting the results obtained and reaching a
conclusion of all the work done.

RESUMEN
Este paper se  centrará en las fases de desarrollo de un aplicativo web para la gestión de
información generada por una veterinaria; Etapas tales como el análisis de requisitos,
planeación, diseño y codificación. Junto con sus pasos correspondientes para la
elaboración de cada ciclo. Al culminar dicho proceso, se enfocará en resaltar los
resultados obtenidos y llegar a una conclusión de todo el trabajo elaborado.

PALABRA CLAVES 
Frontend, Backend, API, ASP.NET, Bootstr

INTRODUCCIÓN  

A finales de la década de los noventa el internet se popularizó siendo utilizada por una
gran cantidad de personas y cambiando drásticamente muchos aspectos cotidianos. A la
nueva ola de internet se fueron sumando compañías de distintos sectores con el fin de
implementar y expandir sus estrategias comerciales a todo el mundo de una forma más
ágil y menos costosa. Esta tendencia de hacer parte de internet generaba una brecha
entre competidores, haciendo que aquellos que integraban internet en su modelo de
negocio llevaran la delantera en el mercado. 
De esta manera nace la importancia de la visibilidad de un negocio, empresa u
organización en internet.

Teniendo esto en cuenta surge una pregunta que nos hacemos con poca frecuencia
¿Cómo hago visible mi negocio en internet? Lo que es igual a preguntarnos ¿Cómo creo
una página web de mi negocio?

En este paper se planea resolver dicha pregunta mostrando los aspectos generales del
proceso de desarrollo de una aplicación web para la administración de información
correspondiente una veterinaria.
OBJETIVOS
OBJETIVO GENERAL 
Desarrollo e implementación de un
aplicativo web para gestionar los
procesos de una veterinaria
donde el usuario lo usara como una fuente de información  o de investigación, porque en
ella encontrará información de la veterinaria  todo  lo que necesite o desee buscar ya que
a través de esta, página web se hará el lectores tengan una excelente experiencia y
información de  ella, sin complicaciones y donde se sientan cómodos ya que esta página
intentara ser lo más clara posible fácil, visualizar, entender, cualquier lector la pueda
utilizar a ella desde cualquier dispositivo con conexión a internet.

Objetivos Específicos
Objetivo 1 : Facilitar la documentación de la veterinaria para una mejor gestión de los
datos de los clientes y de la administración.
Objetivo 2:  Brindar una interfaz  fácil de manejar para los clientes para fidelizar su
interacción.
Objetivo 3: Mediatizar la comunicación cliente-proveedor por medio de una base de datos
que permita mantener informado al cliente. 

RECURSOS
La  fuente de información que se utiliza para ella son consultas a textos, videos, guia del
docente  y  hablados para poder comenzar a realizarse, y   como ella es  una página web
requiere un desarrollo sistemático el cual implica ir adquiriendo  un conocimiento básico,
que al ir  investigando y recolectando información educativa  lleva a poder realizar el
desarrollo de ella como se desea.

Los equipos utilizados para el desarrollo de ella son  equipos básicos como Intel
Celeron,i3,i5 ,con ram básica y discos duros sencillos  para el desarrollo de ella se usó
como  tecnología  html ,css , Frontend, Backend, API, ASP.NET entre otra.

MÉTODOS

DESARROLLO

Inicialmente, ante todo desarrollo de software es necesario establecer los requisitos

funcionales y no funcionales. De este modo se obtuvo lo siguiente.

REQUISITOS FUNCIONALES:

1. Mostrar información sobre:

 Productos.
 Médicos.
 Clientes.
  Pacientes.
 Citas.
 Facturas
 La veterinaria.

2. Agregar, editar, eliminar y mostrar la información correspondiente a cada sección.

REQUISITOS NO FUNCIONALES: 

1. Desarrollar la página web con la tecnología ASP.NET

2. Contener una base de datos con mínimo 6 tablas. 
3. Enlazar la estructura web a una API.

DISEÑO

Una vez listado los requerimientos se procede al diseño del front teniendo en cuenta los
requisitos establecidos. Este diseño se genera mediante programas de escritorio, paginas
online o a papel y lápiz como fue en este caso. 
Se tomó en cuenta la estructura general de las páginas web, como lo es su encabezado,
su contenido principal y su pie de página para desarrollar dicho boceto.

ENCABEZADO. En el encabezado se decidió posicionar el nombre y logo de la

veterinaria en el extremo izquierdo y el menú de opciones de navegación en el otro
extremo, Este menú contendrá las etiquetas de Productos, Médicos, Pacientes, Clientes,
Citas y facturas.

Además se establecerá su posición como “fixed-top” para que al bajar con el scroll el
encabezado siempre esté visible.

CONTENIDO PRINCIPAL. La vista principal, la cual será la primera en visualizarse,

deberá  contener un banner “Carousel” de la librería de Bootstrap con imágenes
representativas de la veterinaria y una frase llamativa. Más abajo irá la información
principal de la veterinaria como lo es su misión, visión y contacto.

Las demás vistas correspondientes a cada etiqueta del menú de navegación contendrá la
información de las tablas que hacen parte de la API o base de datos, junto con los
botones de Editar, Detalles, Eliminar y Nuevo. 

PIE DE PÁGINA. El pie de página deberá ser posicionado como “fixed” para que siempre
sea visible. Y contendrá el año y nombre del proyecto.

CONSTRUCCIÓN 

Teniendo en cuenta que uno de los requisitos es la construcción de la aplicación web con
la tecnología ASP.NET, se procede a crear un proyecto de este tipo en Visual Studio
implementando el Modelo Vista Controlador (MVC).
Una vez creado el proyecto, el entorno de desarrollo genera carpetas y archivos
automáticamente que nos facilita el proceso de desarrollo.
Algunas de esas carpetas son Views (Almacena las vistas del proyecto), Models
(Almacena la estructura de datos) y Controllers (Almacena el código que conecta la vista
con la base de datos). Cada una de estas carpetas contiene los archivos necesarios para
que sea posible ejecutar el programa y visualizar una página web por defecto sin haber
escrito una sola línea de código.
Dentro de la carpeta “View” existe otra carpeta llamada “Shared” que contiene un archivo
llamado “_Layout.cshtml”, entre otros.  Este archivo contiene la estructura principal de la
aplicación web codificada en Html y Bootstrap. De este modo, es en este archivo donde
se modifican algunas características que definimos en la etapa de diseño.  
Se cambia el nombre y se añade el logo de la página con la biblioteca de “fontawesome”,
se establece el contenido y posición del menú de navegación y se aplica la característica 
“fixed-top” para que siempre sea visible.  
seguido de esto, en el mismo archivo, se modifican los parámetros del footer que viene
predeterminado y se establecen las características planeadas con anterioridad.

Dentro de la carpeta “View”, además de contener la carpeta “Shared”, también contiene la

carpeta “Home” que a su vez contiene un archivo llamado “Index.cshtml” que posee el
contenido que se visualizará justo al iniciar la página web. 
Es en este archivo donde se programará mediante Html y Bootstrap todo lo descrito en el
diseño del contenido principal.
Desde la página oficial de Bootstrap  se extrae el código de la sección “carousel” y se
pega en este archivo. En este momento se tiene el código necesario para mostrar la
transición de imágenes, pero aún hace falta indicar las imágenes que se utilizarán. Para
poner las imágenes se debe crear una carpeta en la sección llamada “wwwroot” que se ha
generado automáticamente al crear el proyecto. Dentro de esta carpeta creada se añaden
todas las imágenes que contendrá el “carousel” y el resto del proyecto. 
Para añadir dichas imágenes sólo basta con indicar la url de la imagen en la etiqueta
<img> que corresponde al “carousel”, obteniendo de esta manera las imágenes con su
transición.
Para añadir la frase representativa solo basta con agregar un título al final del interior del
“carousel” con la etiqueta <h2> de Html,  centrarla y posicionarla con funcionalidades de
CSS.

Seguido de esto se establece un contenedor <div>  con la clase “mt-5” de Bootstrap para
crear un margen superior. Dentro de este contenedor se crea un contenedor para cada
sección de información, es decir, un contenedor para la misión, otro para la visión, etc.
Cada contenedor tendrá un borde inferior, un margen inferior, un padding y su contenido
será alineado al centro. Al interior de cada uno de estos contenedores se crea  un título
con la etiqueta <h3> de Html y un párrafo con la etiqueta <p> que contendrá la
información relevante . 

Al finalizar esto se obtendrá la página principal con las imágenes transitivas y la

información especificada en la fase de diseño.  
 
Una vez habiendo culminado esta etapa es necesario consumir la Api pasando los
parámetros necesarios mediante el archivo “appsettings.json” que fue generado
automáticamente. Esto se hace para poder almacenar y acceder a la información
generada por la veterinaria.

Una vez teniendo acceso a la API es necesario crear los controladores correspondientes
para poder comunicar las vistas con esta API, y de esta manera poder crear y manipular
la información desde la interfaz de la aplicación web. 
Para crear dichos controladores basta con dar clic derecho en la carpeta de “Controllers”,
dar clic en “Add” y finalmente en “Controller”. En la ventana emergente se selecciona la
opción “MVC Controller with views, using Entity Framework” ya que además de generar el
controlador también crea las vistas necesarias para el desarrollo de las mismas. Al
escoger la opción se muestra otra ventana con algunas alternativas, acá se debe escoger
el modelo de clase, seleccionar lo deseado y hacer clic en “Add”.
Una vez dado clic en “Add” nos crea el controlador correspondiente en la carpeta
“Controller” y en la carpeta “Views” nos genera otra carpeta con el nombre del modelo de
clase y dentro de ésta 5 archivos de tipo “cshtml”. Estos archivos son: Create.cshtml,
Delete.cshtml, Details.cshtml, Edit.cshtml, Index.cshtml.
Cada uno de estos archivos, junto con el controlador, contiene el código necesario para
realizar la acción correspondiente a su nombre, es decir, para crear, eliminar, mostrar
detalles, editar y mostrar la página principal.
Teniendo ya estas vistas que nos ha generado el programa, solo resta modificar ciertos
aspectos visuales de cada uno de ellas, como por ejemplo el título de la página, bordes,
márgenes, títulos de tablas, botones, etc. Para poder obtener el estilo visual que se
desea.
Posteriormente se debe hacer referencia de estas vistas mediante la barra de navegación.
Esto se hace porque hasta este punto solo tenemos los nombres de las pestañas en el
menú de navegación, pero estas no redirigen a ninguna parte. 
Para hacer esto nos dirigimos al archivo “_layout.cshtml”, luego al menú de navegación e
identificamos la etiqueta <a> que corresponde a la pestaña que va a redirigir a las vistas
que hemos modificado. En esta etiqueta existe el parámetro “asp-controller” que se ha
generado automáticamente. Este parámetro será igual al nombre de la carpeta que
contiene las vistas modificadas, que es igual al nombre del controlador que se generó.  De
igual manera existe otro parámetro llamado “asp-action” que será igual al archivo principal
de la carpeta generada, por defecto es “Index”. 
De esta forma, al dar clic en la etiqueta de la barra de navegación, se redirigirá la vista
actual hacia el “Index” correspondiente y contará con las opciones de crear, eliminar,
editar y visualizar nuevos registros.

Este proceso de creación del controlador, modificación de las vistas y referencia de las
mismas con la etiqueta de navegación; se debe hacer con cada uno de los modelos de
clase.

Habiendo hecho esto último, para finalizar, se configura la adaptación de la aplicación

web, es decir, que sea “Responsive”. Tarea que resulta sencilla gracias a que la plantilla
generada automáticamente ya tiene esa característica. Así que solo se hacen pequeños
cambios en la visualización del contenido como imágenes y texto.

Al culminar todo este proceso tendremos una aplicación web capaz de navegar entre
pestañas, crear, mostrar, editar y eliminar información correspondiente a la veterinaria.
 RESULTADOS

La página tiene una interfaz muy dinámica, que se acomoda a las necesidades del cliente,
debido a que está estructurada de una manera sencilla, lo que facilita que pueda
ejecutarse en cualquier dispositivo. Además, se garantiza información del historial médico
de las mascotas por medio de una base de datos que permite visualizar esta información
en tiempo real. 

CONCLUSIONES

¿Cuáles fueron las principales debilidades y hallazgos de la investigación?

las principales debilidades una de ella  era el poco conocimiento, con el que se contaba
antes de iniciar el curso, también no se contaban con buenas habilidades de manejo de
bases de datos , pero en el  paso de  las tutorías se fueron mejorando las habilidades
adicionalmente,  otra debilidad fue la migración de la base de datos en donde en ella se
dedicó una gran parte de tiempo ya que no se tenía un buen cocimiento el cual para el
desarrollo de ella se tuvo que investigar , socializar con el  equipo de trabajo
compartiendo ideas , procedimiento , ejecuciones , ensayos para que hubiera el mejor
resultado posible el cual fue logrado.,
En el hallazgos de la investigación se encontró como mejorar o generar un tipo de  ayuda
a las veterinarias con el desarrollo de una página web, que le facilita a ellas la interacción
con usuarios donde a través de ella se da a conocer,  sus características el tipo de
servicio que brindan entre otros servicios , adicionalmente  otro hallazgo que se obtuvo
era el mejoramiento del conocimiento, tras el paso del desarrollo se fortaleció el
conocimiento tanto lógico,programación,bases de datos, desarrollo web, manejo de visual
entre otras.

¿Cómo es que estos hallazgos contribuyen al desarrollo del conocimiento?

a través del paso del tiempo en el desarrollo de la página web,  se logró obtener una 
mejora de conocimiento tanto en la parte  lógico, desarrolló de código, comprensión y
análisis  por parte de cada  participante en el grupo de trabajo, para el desarrollo de ella
se tenía que hacer una gran investigación, realizando  consultas a libros, videos , apoyo
de tutor entre otras  generando que al paso del  tiempo ,de  esa investigación el
conocimiento fuera creciendo, adicionalmente al irse obteniendo conocimiento se tenía
que  implementar  en   el desarrollo de la página web, creando que al finalizar el proyecto
el conocimiento implementado no fuera mecanizado. 

¿Hacia dónde podrían apuntar nuevas investigaciones relacionadas?

La investigaciones  apuntan a dar el mismo servicio  web, a diferentes entidades
mejorando el servicio y la interacción entre sus usuarios, y ella generando mejora a la
entidades que tengan página web.

se puede concluir en general  que podemos concluir que esta página web les servirá para
controlar y fomentar mejores hábitos de manejos para los animales, también facilitar el
manejo sanitario entre clientes y animales del mismo modo entre veterinario y usuarios,
también generará múltiples posibilidades en la medicación y el tratamiento de sus
pacientes así como facilitar los trámites con el cliente. En síntesis esta aplicación permitirá
la tramitación y creación de un perfil del usuario por medio de la digitación de una hoja de
vida que conducirá a perfilar un historial clínico y todos los usos posibles que conlleva a
ello, por lo tanto el desarrollo de esta página será en ASP.NET con MVC lo cual nos
facilitara gran parte del código, lo que nos conduce a un excelente servicio tanto para el
cliente como para el trabajador. 

AGRADECIMIENTOS 

El agradecimiento va dirigido a nuestro equipo de trabajo, en este caso el cipa 5. Ya que

se  encargó de hacer todo de la  mejor manera posible, donde se investigó de una forma
muy precisa  para el desarrollo de la página web consultando, investigando y leyendo
para obtener la información necesaria en el desarrollo de la web. Esto para que tuviera el
mejor rendimiento posible y fuera del modo más sencillo.
 REFERENCIA BIBLIOGRÁFICAS

Gates, W. (1999). Los negocios en la era digital. Nueva York: Warner Books
https://www.rafaelacosta.net/Blog/2019/10/29/cómo-crear-un-cliente-c-para-un-web-api-
de-aspnet-core-iii
El Web API tipo CRUD de ASP.NET Core
Para realizar este ejemplo, utilizaremos el Web API ya desarrollado en el artículo JSON
Web Token - Seguridad en servicios Web API de .NET Core. 
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-
3.1&ta
bs=visual-studio
Tutorial: Create a web API with ASP.NET Core
This tutorial teaches the basics of building a web API with ASP.NET Core.

https://docs.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core?
view=aspnetcore-3.1
Introduction to ASP.NET Core
ASP.NET Core is a cross-platform, high-performance, open-source framework for building
modern, cloud-enabled, Internet-connected apps. With ASP.NET