desarrollo de documentación 6/1/2020 para aplicaciones web
TRANSCRIPT
6/1/2020
Desarrollo de documentación
para aplicaciones web en
Django
Nicolás Bello Lugo
Asesor: Mario Eduardo Sánchez Puccini UNIVERSIDAD DE LOS ANDES
Desarrollo de documentación para aplicaciones web en Django 1 de28
REPORTE DE PROYECTO DE GRADO Desarrollo de documentación para aplicaciones web en Django
Junio 1, 2009
N Bello.
Este documento muestra los resultados para generar una documentación relevante para aplicaciones web
desarrolladas en Django.
Table of Contents
Reporte de Proyecto de Grado ............................................................................................................................................................................................................................................ 0
Contenido 2
Resumen 2
1 Introducción ................................................................................................................................................................................................................................... 2
2 Descripción general ....................................................................................................................................................................................................................... 5
2.1 Objetivos ............................................................................................................................................................................................................. 5
2.2 Antecedentes....................................................................................................................................................................................................... 6
2.3 Identificación del problema y de su importancia ............................................................................................................................................. 6
3 Diseño y especificaciones ............................................................................................................................................................................................................. 6
3.1 Definición del problema .................................................................................................................................................................................... 7
3.2 Especificaciones ................................................................................................................................................................................................. 7
3.3 Restricciones....................................................................................................................................................................................................... 7
4 Desarrollo del diseño ..................................................................................................................................................................................................................... 8
4.1 Recolección de Información .............................................................................................................................................................................. 8
4.2 Alternativas de diseño ........................................................................................................................................................................................ 8
5 Implementación .............................................................................................................................................................................................................................. 9
5.1 Descripción de la implementación .................................................................................................................................................................... 9
5.2 Resultados esperados ......................................................................................................................................................................................... 9
6 Validación .................................................................................................................................................................................................................................... 10
6.1 Métodos............................................................................................................................................................................................................. 10
6.2 Validación de resultados .................................................................................................................................................................................. 11
7 Conclusiones ................................................................................................................................................................................................................................ 14
7.1 Discusión .......................................................................................................................................................................................................... 14
7.2 Trabajo futuro ................................................................................................................................................................................................... 15
8 Referencias ................................................................................................................................................................................................................................... 15
Apéndices 15
V2 - Referencias a imágenes en las templates del Proyecto ................................................................................................................................................ 16
Código visualización 1 ........................................................................................................................................................................................................... 17
Código Visualización 2 .......................................................................................................................................................................................................... 20
Código Visualización 3 .......................................................................................................................................................................................................... 22
Código Visualización 4 .......................................................................................................................................................................................................... 25
Desarrollo de documentación para aplicaciones web en Django 2 de28
CONTENIDO
RESUMEN
Este documento presenta los resultados obtenidos al generar documentación relevante para proyectos web
desarrollados en Django. La documentación es parte importante de las aplicaciones web, pero muchas veces no se realiza correctamente o no se realiza para nada. Esto genera problemas para los desarrolladores que quieren
realizar cambios o solucionar problemas en la aplicación ya que desconocen qué archivos deben modificar para
realizar los cambios. Teniendo en cuenta lo anterior, se establecieron 4 casos específicos en los que se quería
realizar diferentes documentaciones para simplificar el trabajo de los desarrolladores. Por último, se mostrará
las visualizaciones para cada una de las documentaciones de forma que los desarrolladores puedan acceder de
manera rápida y fácil a la información de la documentación.
1 INTRODUCCIÓN
El desarrollo de aplicaciones web es parte importante de una sociedad que se encuentra cada vez más conectada
virtualmente. Por esto, la documentación relevante de los proyectos web permite facilitar el trabajo de los
desarrolladores que llegan a trabajar en proyectos ya implementados. El problema al que se enfrentan estos
desarrolladores es que muchas veces la documentación de los proyectos es realizada de manera deficiente o no
se realiza en absoluto. Esto trae graves implicaciones frente al trabajo ya que necesitan navegar todos los
archivos del proyecto intentando entender la funcionalidad de cada parte y como se relacionan entre sí.
Asimismo, muchas veces la documentación de los proyectos web se limita a breves comentarios dentro del
código. Esto ayuda a la compresión del código, sin embargo, no permite la fácil visualización de la
documentación ni determinar en qué archivo se encuentra dentro del repositorio del proyecto.
Esta situación es común y muchas veces al intentar trabajar como nuevo desarrollador en proyectos ya
realizados, se pierde mucho tiempo tratando de comprender la funcionalidad de todas las partes del repositorio
antes de poder empezar a modificarlas. Teniendo en cuenta esto, se decidió buscar una forma de generar una
documentación relevante que ayude a los desarrolladores a saber la ubicación de información importante en el
código fácilmente. La información necesaria para cada documentación de debe extraer de las diferentes fuentes
rápidamente y agruparla de forma que se pueda trabajar sobre esta. Una vez se obtiene la información, se debe
plantear una visualización, sea estática o interactiva, que permita al desarrollador ver los resultados extraídos
fácilmente y, en caso de necesitarlo, debe mostrar la ubicación de la información de forma que cuando el
desarrollador desee realizar un cambio pueda encontrar el lugar rápidamente.
Para empezar a realizar esta solución primero se debía limitar el alcance del proyecto ya que las aplicaciones
web tienen un rango muy amplio, ya que existe un sinnúmero de frameworks y lenguajes en las que se
desarrollan. Para poder abordar la solución, se estableció trabajar en el lenguaje Python sobre el framework
Django. Este es un framework web que permite generar aplicaciones web rápidas y escalables de manera veloz.1
Una vez se decidió el framework sobre el que se iba a trabajar se planteó utilizar un proyecto ya desarrollado
para utilizarlo como base. Este fue Senecode2, desarrollado por el profesor Mario Sanchez y el estudiante Pedro
Salazar de la Universidad de los Andes. Sin embargo, la meta de las visualizaciones es que se puedan aplicar a
cualquier proyecto de Django. Al tener un proyecto sobre el cual trabajar, se empieza a investigar de que formas
se puede extraer la información del proyecto. Se encontraron 2 formas diferentes de obtener la información: La primera es recorrer los archivos del repositorio con un programa desarrollado en Python. La segunda utilizar en
Web Crawler desarrollado sobre el software de Selenium que permite automatizar la navegación de páginas
web. Una vez se tienen las formas de obtener la información se deben plantear la información importante para
las que se quiere generar la visualización. Las cuatro visualizaciones que se quieren desarrollar son las
siguientes:1. Ver las referencias a los modelos de la base de datos del proyecto en los bloques HTML que se
1 Para más información sobre el framework de Django se puede revisar el siguiente link.
2 Para conocer más información sobre el proyecto de Senecode, se puede revisar el siguiente link.
Desarrollo de documentación para aplicaciones web en Django 3 de28
usan para construir la aplicación web. 2. Poder visualizar las referencias a las imágenes del proyecto en las
diferentes templates del proyecto. 3. Poder visualizar la navegabilidad que se tiene entre los urls definidos para
el proyecto. 4. Crear una visualización que permita, al correr la aplicación, ver qué templates están siendo
utilizada para cada parte de la página web.
Al tener las 4 visualizaciones planteadas, se puede empezar a diseñar el protocolo para generar cada una de
ellas. El primer paso fue definir cuál de los dos métodos se utilizaría para para cada una de las visualizaciones.
Para las visualizaciones 1,2 y 4 se utilizó un programa en Python, mientras que para la 3 se utilizó un Web
Crawler. El siguiente paso fue obtener la información relevante para cada una de las visualizaciones. Una vez
se obtuvo la información, el siguiente paso fue hacer una verificación de que esta información se hubiera
extraído correctamente y no hubiera sufrido modificaciones durante la extracción. Luego, se pasó a definir que
visualización se utilizaría para mostrar de mejor manera la información extraída (e.g. un grafo, un árbol, una
notificación, una gráfica). Por último, fue necesario generar un programa que utilice la información extraída
para procesarla y poder generar la visualización definida. Estos fueron los cuatro pasos que se implementaron
en cada una de las visualizaciones que se generaron.
Los resultados obtenidos fueron 4 visualizaciones que permiten al desarrollador conocer más a profundidad el
funcionamiento del proyecto y la localización de los diferentes puntos donde se pueden generar errores
rápidamente sin tener que recorrer todos los archivos. Para la visualización 1 (V1) se generó un archivo que
muestra un árbol donde para cada módulo de la base de datos se muestran las referencias que se hacen en otros
archivos. Para la visualización 2 (V2) se generó otro archivo que muestra también un árbol donde, para cada
una de los templates del proyecto, se muestran las referencias de las imágenes, junto con la línea de código
donde ocurren. Para la visualización 3 (V3) se obtienen 2 archivos: el primero es un PDF que muestra el grafo
de navegabilidad que tiene la aplicación, es decir que se muestran las conexiones entre los diferentes urls, y el
orto archivo muestra los urls definidos en el proyecto a los cuales el usuario no tiene acceso. Para la visualización 4 (V4) se generó un código que modifica el proyecto de forma que al navegar en la aplicación y
pasar el mouse sobre las partes de la aplicación se muestre qué template es el responsable de esa parte de la
aplicación. Estos son los resultados:
V1 - Referencias de los modelos en los bloques del Proyecto
Imagen 1. V1
Esta documentación muestra las referencias de los modelos que manejan la base de datos en los bloques de la
aplicación de Django. De esta forma en caso de hacer cambio en la base de datos se pueden identificar los
archivos afectados fácilmente. Para cada uno de los bloques se muestra en qué línea se hace referencia a un
modelo específico y su atributo.
Desarrollo de documentación para aplicaciones web en Django 4 de28
V2 - Referencias a imágenes en las templates del Proyecto
Imagen 2. V2
Esta documentación muestra las referencias de las imágenes en las diferentes templates HTML. De esta forma se pueden identificar los archivos que tienen imágenes y en caso de que se quiera cambiar la imagen o una
imagen no se visualice correctamente se puede identificar que archivo hace la referencia. Para cada archivo se
muestra la línea y la referencia HTML de la imagen <img>.
V3 - Navegabilidad y uso de urls definidos en la aplicación de Django
Imagen 3. V3
Esta documentación permite visualizar la navegabilidad que ofrece el proyecto en Django para el usuario que
ingresa. Muestra cómo se puede navegar entre los diferentes urls definidos. Así mismo se genera un archivo
que permite revisar los urls definidos en el proyecto y revisar cuales no se están utilizando.
Desarrollo de documentación para aplicaciones web en Django 5 de28
V4 - Documentación en caliente de qué templates se utilizan en cada parte de la página web del proyecto
Imagen 4. V4
Esta documentación interactiva permite a los usuarios navegar la aplicación web del proyecto y al mover el
mouse sobre los diferentes componentes se puede ver cual template se está utilizando. Esto permite a los
desarrolladores saber qué templates modificar en casos de querer hacer cambios o en caso de que no se estén
visualizando correctamente.
Cada uno de los resultados sera explicado en detalle más adelante en el documento.
Este documento se presentará en el siguiente orden. Primero se hará una explicación general del proyecto y el
contexto del problema que se quiere afrontar. Luego de esto, se explicará más detalladamente el proceso de
diseño que se utilizó en el proyecto. Más adelante, se presentará la implementación y los resultados obtenidos.
Acto seguido se explicará cómo se hizo la verificación de los resultados. Por último, se presentarán las
conclusiones. Por último, las imágenes obtenidas en los resultados y el código utilizado se pueden encontrar en
los apéndices del documento.
2 DESCRIPCIÓN GENERAL
2.1 Objetivos
El propósito de este proyecto es ayudar a generar documentación relevante para las aplicaciones web. En la
actualidad, internet se vuelve cada vez más una parte importante de la vida de todos los individuos y el desarrollo
web está encargado de manejar este cambio del papel a la virtualidad. Para esto se requieren generar diferentes
proyectos web en los diferentes frameworks existentes. Sin embargo, el rápido desarrollo de estos proyectos
está generando un gran problema dentro de los proyectos ya que no se tienen las buenas prácticas de generar
una documentación relevante para el código del proyecto. Esto tienen implicaciones a corto y largo plazo ya
que muchas veces los desarrolladores del código no se encuentran presentes y es necesario que un nuevo
desarrollador realice cambios dentro del código. Esta es una tarea larga y ardua para el desarrollador ya que antes de poder realizar cambios es necesario entender el funcionamiento del código. Este es un problema
constante que se encuentran los desarrolladores en el área laboral. Este problema se puede solucionar generando
documentaciones relevantes que simplifiquen esta tarea.
Desarrollo de documentación para aplicaciones web en Django 6 de28
2.2 Antecedentes
Este problema de falta de documentación ha sido una constante que acompaña el desarrollo y avance de las
aplicaciones web. Por esto se ha intentado afrontar desde diferentes ángulos: ingeniería inversa, ontologías y
de forma generalizada frente a patrones de diseño. En el caso de la ingeniería inversa se plantearon técnicas de análisis dinámico de forma que se pueda empezar a analizar la aplicación ya en producción y extraer la
información necesaria para generar la documentación. El proceso de generación de documentación planteado
se basa en los siguientes pasos: 1. Registrar las interacciones del usuario en la página web. 2. Extraer la
información relevante teniendo en cuenta las interacciones y la información relevante. 3.Agrupamiento de la
información y procesamiento de ella. 4. Generar un diagrama que permita la visualización de la información
procesada[4]. Teniendo en cuenta que la ingeniera inversa no tiene acceso al código de la aplicación web, es
necesario implementar estas tácticas para poder procesar la información. Por esto este método no es viable para
este proyecto, ya que no es requerido la implementación de ingeniería inversa. Por otro lado, el proceso de
extracción y manejo de los datos se puede utilizar como base para el procesamiento de datos en este proyecto.
En el área de uso de ontologías para obtener la documentación se basa en la comprensión de los documentos y
aplicaciones web a través de un proceso de semántica. Para esto se implementa un sistema de web semántica
que sea capaz mejorar la comprensión por parte de la máquina de la información en los documentos y
aplicaciones web. Este sistema requiere un proceso de aprendizaje que se divide en el aprendizaje manual y
aprendizaje automático. El aprendizaje manual requiere mucho tiempo y la participación del desarrollador ya
que es lo que establece las bases de la semántica que se va a aplicar. Por otro lado, el aprendizaje automático
se desarrolla después de que se tienen establecidas las bases con dos objetivos en mente. 1. Reforzar las bases
establecidas y 2. Revisar el funcionamiento de estas [1]. Este proceso para establecer la ontología no es lo que
se quiere aplicar en este proyecto.
La última área se basa en trabajar frente a los patrones y templates que se tienen en los proyectos. En esta área
se intenta establecer relaciones entre los documentos de las aplicaciones y poder empezar a generar
documentación que se pueda establecer de una forma general y que en base a pocos cambios se pueda aplicar a
cada aplicación. Para esto se basan en la edición colaborativa por parte de los desarrolladores para llegar a esta
generalización de las templates y patrones de forma que se pueda obtener la información desde las aplicaciones
y generar la documentación necesaria [2]. Otra forma de desarrollar documentación a través de extraer las tareas
necesarias del código de forma que se pueda obtener el proceso de funcionamiento de la aplicación y generar
una documentación a partir de eso [3]. Para este proyecto se tomaron como base estos diferentes proyectos para generar el procedimiento y las visualizaciones.
2.3 Identificación del problema y de su importancia
Como se mencionó anteriormente, el problema que se quiere afrontar con este proyecto es la falta de
documentación relevante frente a los proyectos web, específicamente a los desarrollados en el framework de
Django. La solución de este problema requiere un apoyo conjunto por parte de la comunidad de desarrolladores
ya que es necesario que todos hagan parte de la solución de forma que la mayoría de los proyectos tengan
documentación relevante. Estos cambios ayudarán a reducir el tiempo de reacción frente a los errores y también
ayudarán a reducir la curva de aprendizaje de los nuevos desarrolladores frente al proyecto. La reducción de esto puede ayudar a que errores que generen perdidas monetarias se solucionen más rápido, reduciendo las
pérdidas de la empresa. Para cumplir esta meta este proyecto utiliza el framework de Django, el software de
Selenium para simplificar y automatizar la navegación dentro de la. Sin embargo, en el aspecto global ya que
hay más frameworks de desarrollo web se pueden utilizar nuevas tecnologías como React3 y Node JS4.
3 DISEÑO Y ESPECIFICACIONES
3 Para más información sobre React se puede revisar el siguiente link.
4 Para más información sobre Node JS se puede revisar el siguiente link.
Desarrollo de documentación para aplicaciones web en Django 7 de28
3.1 Definición del problema
El problema que se intenta solucionar en este proyecto es generar una documentación relevante para un proyecto
web de Django. La documentación debe incluir visualizaciones que permitan a los desarrolladores observar la
siguiente información: (V1) las referencias de los módulos de la base de datos en los bloques de la aplicación. (V2) Saber cuáles de las templates tienen referencias a imágenes. (V3) Conocer la navegabilidad de la
aplicación. (V4) Conocer qué templates construyen cada parte de la aplicación web.
3.2 Especificaciones
Para poder desarrollar correctamente este proyecto es necesario tener acceso al repositorio del proyecto y poder
descargarlo de forma que el código fuente en Python puedan acceder fácilmente. Además de esto se necesita el
url inicial de la plataforma. En caso de que se tenga que utilizar un usuario y contraseña es necesario generar
unas credenciales para el proyecto ya que con esto el Web Crawler puede navegar todos y tener acceso a todo sin la necesidad de la participación del desarrollador. En el caso de las visualizaciones V1, V2 y V4 se necesita
solamente acceso al repositorio. Por otro lado, para la visualización V3 es necesario tener acceso al repositorio,
el url inicial y las credenciales de acceso para el Web Crawler. Estas son las entradas necesarias para poder
empezar a desarrollar las visualizaciones. Las salidas que se deben obtener al ejecutar este proyecto deben ser
un archivo ya sea un PDF o un archivo de texto que permita observar los resultados de la visualización. Esto
aplica para las primeras 3 visualizaciones (V1, V2, V3), sin embargo, la visualización 4 (V4) debe generar un
código que se puede implementar en el proyecto de forma que al activarlo se pueda ver la visualización
interactiva que funciona en caliente. De esta forma podemos saber que los requerimientos funcionales del
proyecto son la creación de cada una de las visualizaciones.
Para cada uno de estos requerimientos es necesario establecer ciertos criterios que se deben cumplir. El primero
es que la visualización que se genera no debe ser mostrada en consola en una estructura de datos de Python. Se
debe generar una visualización que muestra de manera interesante la información obtenida. La segunda es que
cada vez que se corra el proyecto este debe tener en cuenta los cambios que se realizaron desde la última
ejecución. Estos cambios deben aparecer en la nueva visualización, no se debe trabajar sobre una visualización
vieja. La tercera es que el programa de cada visualización debe ejecutarse sin la intervención del desarrollador.
La última es que cada programa debe seguir el siguiente orden en su ejecución. 1. Obtener el rango de archivos
que se van a procesar. 2. Procesar la información de los archivos y guárdala en una estructura de datos. 3.
Procesar la información de forma que se obtenga los resultados del requerimiento. 4. Generar la visualización
en base a la información procesada. 5. Guardar el archivo de la visualización.
En los casos de las visualizaciones V1, V2 y V4 las visualizaciones deben mostrar concretamente los resultados
ya que toda la información que se obtiene es relevante para la visualización. Por otro lado, en la visualización
V3 esto no es el caso. Esto ocurre ya que muchas veces los urls se generan a partir del id del objeto que se va a
mostrar. Esto causa que el url se repita muchas veces en la navegación donde lo único que cambia es el id, ya
que en la pantalla la estructura se mantiene igual. Esto puede tener un mal efecto en la visualización de la
navegabilidad ya que agrega mucha información redundante. Por lo que esta se puede simplificar solamente
agregando un ejemplo del url con id, que represente a todos los demás. De esta forma se muestra correctamente
la información, sin tener una gran redundancia en los urls navegados.
3.3 Restricciones
Este proyecto tiene unas restricciones al desarrollar e implementar la solución en el área de seguridad. Esto
ocurre principalmente porque el proyecto necesita tener acceso a toda la información del repositorio al cual se
le está desarrollando la documentación. También se requieren credenciales para poder navegar la aplicación.
Esto puede generar problemas de seguridad ya que si esta información no se maneja con cuidado puede generar
puntos de fallo en seguridad y tener implicaciones negativas en la aplicación. Por esto es necesario que acceda
a la información sin la necesidad de tener el repositorio dentro del mismo proyecto. Si por ejemplo se maneja
en un computador de la empresa, esto minimiza el acceso al repositorio frente a terceros o agentes externos. Por otro lado, las credenciales de la aplicación se deben guardar como variables de entorno en el computador,
Desarrollo de documentación para aplicaciones web en Django 8 de28
de forma que no estén explícitamente en el proyecto. Si se tienen en cuenta estas precauciones el proyecto se
puede implementar sin generar problemas de seguridad para la aplicación web sobre la que se está trabajando.
4 DESARROLLO DEL DISEÑO
El proceso de diseño para el proyecto se basó en cuatro partes. La primera fue establecer las limitaciones del proyecto ya que generar documentaciones relevantes para todos los tipos de aplicaciones web era un alcance
demasiado amplio. Al definir que este proyecto se concentraría solamente en aplicaciones de Django se puede
avanzar al siguiente paso. El siguiente paso es establecer que datos son los importantes y plantear las
visualizaciones que se quieren. Una vez se tienen las cuatro (4) visualizaciones establecidas es necesario extraer
los datos. El último paso es investigar las visualizaciones que se podían realizar desde Python para ver cual tipo
de gráfica o modelo es el que mejor se ajusta para cada visualización. Una vez ya se tiene toda la información
del diseño lista se pasa a la parte práctica y se empieza a generar el código que extraiga la información
importante y la procese para generar la visualización.
4.1 Recolección de Información
Teniendo en cuenta los procesos que se hicieron previamente en esta área para este proyecto la forma de generar
esta documentación es a través de las características de los proyectos en Django, en especial la estructura. Esto
ocurre ya que todos los proyectos siguen la misma estructura sin importar la diferencias entre los proyectos.
Esto permite usar esa generalidad para generar documentación aplicable a los proyectos. Además de esto, el
proceso para manejar la información que se presentó en el documento [4] nos sirve de base para el
procedimiento que se va a utilizar. Es necesario aplicarle unos cambios de forma para que lo podamos utilizar
para generar las documentaciones planteadas. Los cambios que se van a plantear son
1. Establecer que documentación se quiere realizar y cuál es la información relevante para esta.
2. Extraer la información del repositorio o página web.
3. Procesar la información y guardarla en su respectiva estructura de datos.
4. Generar la visualización a partir de la estructura de datos.
4.2 Alternativas de diseño
Las alternativas de diseño que se tienen para este proyecto se centraron en cuál era el mejor tipo de visualización
que se ajustaba mejor a los datos que se extraían. Para cada una de las visualizaciones se evaluó que tipo era mejor y cuáles se podían implementar frente a los datos obtenidos. Por ejemplo, para la visualización 1 (V1) se
planteó generar un grafo que conectara el módulo con los diferentes bloques donde se hace referencia al módulo.
Pero en esta visualización no se mostraban correctamente las conexiones y no se podía agregar la información
de que línea de código estaba cada referencia. Otro problema que se encontró es que al generar los grafos los
datos no siempre quedaban agrupados por modelo lo que dificultaba la búsqueda de información. Teniendo esto
en cuenta se consideró que la mejor visualización sería un árbol, donde el nodo principal sería la carpeta donde
se encontraban los módulos. Y cada hijo de la raíz era uno de los módulos y cada uno de esos nodos tiene como
hijos las referencias al módulo. Teniendo esa visualización para el V1 se decidió utilizar el mismo formato de
visualización para la segunda (V2). Para la tercera visualización (V3) se planteó primero un árbol radial.5 Sin
embargo al ver que muchos nodos se repetían, no se mostraba correctamente la navegación. Por lo que se
decidió que la mejor visualización era un grafo donde cada nodo representara un url y las conexiones muestran
la navegabilidad desde un url a otro. En el caso de la última visualización (V4) las alternativas de diseño se
5 Para conocer más información de árboles radiales se puede revisar el siguiente link.
Desarrollo de documentación para aplicaciones web en Django 9 de28
centraron más en que formato se debía usar para modificar el código del proyecto. Se planteo utilizar D36 sin
embargo la forma que se utilizó al final fue el CSS ya que se podía aplicar de una manera más rápida sin
necesidad de agregar nuevas librerías al proyecto y obteniendo el mismo resultado.
5 IMPLEMENTACIÓN
Para la implementación de este proyecto se planteó un archivo de Python para cada una de las visualizaciones.
Independizar las visualizaciones permite que se puedan ejecutar simultáneamente reduciendo el tiempo para
obtener las visualizaciones. Por otro lado, en caso de necesitar realizar un cambio dentro de las visualizaciones
permite acceder a solo una visualización sin que los cambios afecten a las demás. El proceso dentro de cada
uno de los archivos se dividió en pasos de forma que fuera más fácil trabajar. El primer paso es obtener la
información necesaria para la visualización. Una vez se tiene esta información, el segundo paso es procesarla
de forma que muestre lo necesitado. El tercer paso es guardar la información en la estructura de datos en la cual
se va a generar la visualización (e.g. un Grafo o un árbol). El último paso es utilizar esa estructura de datos para generar la visualización que se había escogido. Este proceso fue el que se utilizó para las primeras tres
visualizaciones. La última visualización al ser una modificación dentro del repositorio se utilizó un proceso
diferente. Primero se diseñó una nueva template de Django para agregar al repositorio y luego se modificaron
los archivos template para que incluyeran la nueva template.
5.1 Descripción de la implementación
El proceso de implementación se dividió en etapas. El primero fue establecer cuáles iban a ser las
visualizaciones que se iban a generar como documentación para el proyecto de Django. Al principio se tenían
definidas las primeras tres visualizaciones, sin embargo, para la cuarta se había planteado que información se quería visualizar, pero no se había definido como se iba a mostrar. Teniendo esto en cuenta, se empezó la
siguiente etapa donde para las tres visualizaciones definidas se extrajo la información requerida. En el caso de
V1 y V2 se utilizó el programa de Python para recorrer las carpetas que contenían la información relevante y
se guardó en el programa para ser procesada. En el caso de V3 se programó el Web Crawler de forma que este
recorriera todas las paginas disponibles desde el enlace de inicio de la aplicación web de manera autónoma.
Asimismo, este iba guardando las conexiones entre los urls para que luego fueran procesadas. La tercera etapa
se centraba en definir que estructura de datos se iba a utilizar y procesar los datos obtenidos en la etapa anterior
de forma que se guardaran en la estructura de datos necesaria. La cuarta etapa se concentró en generar las
visualizaciones finales para V1, V2 y V3. Al mismo tiempo se definió que V4 sería una visualización interactiva
que se agregaría al repositorio. Teniendo esto en cuenta se planteó generar una nueva plantilla de Django que
modificara los archivos HTML y mostrara la información relevante. La quinta etapa se concentró en la implementación del nuevo tag al repositorio. Una vez completada, se avanzó a la sexta etapa, en la que se
añadían funcionalidades al nuevo tag, como que se pudiera prender y apagar sin problema dentro del repositorio
y añadir unos detalles dentro del CSS de forma que fuera más claro cómo se mostraba la información. La última
etapa se concentró en comentar todo de forma que los demás desarrolladores entiendan cómo funcionaba el
código implementado en este proyecto.
5.2 Resultados esperados
El procedimiento de implementación fue el que ayudó a generar las visualizaciones requeridas por el proyecto.
Las etapas de este permitieron un avance constante a lo largo del tiempo de desarrollo. Además, utilizar el lenguaje Python simplificó la extracción y manejo de la información ya que el repositorio también se manejaba
en este lenguaje. Los resultados que se pueden obtener de los modelos planteados en cada uno de los archivos
Python tienen una alta precisión demostrando la información del repositorio de una forma visual mucho más
simple de entender. Asimismo, tiene un desempeño bastante rápido al generar las visualizaciones lo cual cumple
6 Para conocer más información de D3 se puede revisar el siguiente link.
Desarrollo de documentación para aplicaciones web en Django 10 de28
este requerimiento. Por último, los modelos nunca trabajan con información antigua puesto que siempre extraen
la información actual de la fuente y se basan en eso para genera las visualizaciones. Las visualizaciones que se
obtienen con estos modelos deben resolver un problema frente a la información del repositorio y mostrar la
información que responde al problema de una manera fácil de entender.
6 VALIDACIÓN
6.1 Métodos
La prueba de validación que se aplicó a este proyecto fue la implementación frente a un proyecto ya en
producción. El proyecto que se seleccionó para estas pruebas fue Senecode, un proyecto desarrollado por el
profesor Mario Sanchez y el estudiante Pedro Salazar para el curso de Introducción a la programación de la
Universidad de los Andes. Se realizó una prueba por cada visualización planteada y el resultado de cada una de
estas debería ser la documentación de la información de Senecode en la visualización.
Para el caso de las visualizaciones V1 y V2 el proceso de la prueba comienza al bajar el repositorio. Luego se
debe modificar el camino que hace referencia a las carpetas del repositorio de forma que el programa pueda
acceder a los archivos de Senecode. Una vez se completa la configuración del programa se puede ejecutar. Al
ser ejecutado, este genera el archivo de la visualización. En el caso de estas visualizaciones es un archivo de
texto que permite ver la construcción del árbol. Por otro lado, en el caso de la visualización V3, se requiere la
misma preparación de las visualizaciones anteriores, pero además de esto es necesario agregar cuál es el link
inicial de la aplicación en el programa y agregar las credenciales para acceder. Una vez se completa la
preparación del programa al ejecutarse esta visualización se genera un archivo PDF donde se puede ver el grafo
que muestra la navegabilidad entre los diferentes urls definidos para Senecode. Asimismo, se genera un archivo
de texto que informa al desarrollador de los diferentes urls definidos a los que no se tiene acceso en el proyecto.
Para la última visualización (V4) se requiere una preparación minuciosa puesto que además se debe agregar la
carpeta que contiene el nuevo tag7 al repositorio. Una vez se tiene la carpeta en el repositorio es necesario
modificar el archivo de settings.py de forma que este integre el nuevo tag. Para esto se debe agregar la siguiente
línea en el área de Templates:
'libraries’: {
'custom_tag': 'calificador.templatetags.custom_tag',
}
Además de esto se puede agregar el siguiente código de forma opcional en el archivo settings.py de manera que
la visualización se pueda activar y desactivar cambiando la variable HOVER_TAG. Para esto es necesario
agregar otra versión del nuevo tag de forma que funcione correctamente.
HOVER_TAG = True
HOVER_TEMPLATE = 'calificador.templatetags.custom_tag'
if not HOVER_TAG:
HOVER_TEMPLATE= 'calificador.templatetags.custom_tag2'
print(HOVER_TEMPLATE)
Una vez terminada la configuración del repositorio, al ejecutarlo se puede ver los cambios generados por el
nuevo tag. Al mover el mouse sobre las diferentes partes se señala con un borde azul cada una de las partes
generadas por un template y en un mensaje se puede ver el nombre del template. De esta forma, el desarrollador
puede saber qué archivos revisar si una parte está fallando.
7 El código de los tags se puede encontrar en el apéndice o en el siguiente repositorio.
Desarrollo de documentación para aplicaciones web en Django 11 de28
6.2 Validación de resultados
Teniendo en cuenta las pruebas, se pudieron observar las cuatro visualizaciones obtenidas. Estas cumplen con
los parámetros que se establecieron previamente en la sección de diseño y muestran la información de una
manera fácil de entender además de ejecutarse de manera rápida. Los resultados obtenidos por cada una de las visualizaciones con respecto a Senecode se presentarán junto con una breve explicación a continuación. Para
cada una, se mostrará el resultado obtenido junto con una breve descripción de la visualización. Para ver los
resultados del V1 y V2 sin tanto detalle estos se pueden encontrar en el apéndice, al igual que el código en
Python utilizado para generarla8.
V1 - Referencias de los modelos en los bloques del Proyecto
Imagen 5. Resultados V1
Lo que se puede ver en la imagen anterior es un árbol que tiene diferentes niveles. El nivel más grande es la
carpeta models, donde se encuentran todos los modelos para la base de datos del proyecto. El siguiente nivel
son los modelos. Cada uno de estos tiene una lista de archivos donde ese modelo fue utilizado. Además de eso
cada uno de esos documentos muestra el numero y contenido de la línea de código donde se hizo el llamado al modelo. Como se mencionó al inicio del documento, esta documentación permite establecer una relación entre
los modelos definidos en el programa que se conectan con la base de datos en Mongo y los diferentes archivos
de la carpeta bloques que permiten construir la interfaz del usuario. Esta documentación es importante ya que
le permite al desarrollador identificar rápidamente los archivos que interactúan con la interfaz y en caso de
realizar unos cambios en la base de datos, los archivos HTML se pueden modificar para mostrar los cambios.
Para ubicar las menciones de la base de datos se identifico el formato utilizado para hacer los llamados. En el
caso de Senecode se hacían dentro de {} y tenían el nombre del modelo al cual se hacia referencia. Una vez se
8 Todos los códigos y archivos generados por las visualizaciones se pueden encontrar en el siguiente repositorio.
Desarrollo de documentación para aplicaciones web en Django 12 de28
extraía toda esta información los modelos se agrupaban y de esta forma se podía generar el archivo de la
visualización.
V2 - Referencias a imágenes en las templates del Proyecto
Imagen 6. Resultados V2
En el caso de esta visualización, era necesario identificar todas las menciones de imágenes en el proyecto web
ya que es un elemento que muchas veces se puede ver modificado por cambios dentro del proyecto o por mover
los archivos de la carpeta donde se encuentra. Esto causa que la imagen se rompa y no se despliegue
correctamente en la interfaz. Para esto se implemento un recorrido que buscara el tag HTML de las imágenes
<img> en los archivos y registrara el archivo y la línea en la que se encontraba. Una vez se extrajo toda la información se empezó a procesar de forma que se pudieran agrupar por donde se encontraban ubicados en el
proyecto. De esta forma todas las menciones de una carpeta quedaban juntas y esto agilizaba la corrección de
errores en el proyecto. Lo que se puede ver en la imagen anterior es un árbol con niveles de prioridad que
permiten clasificar de manera entendible las referencias a imágenes del proyecto. Esta clasificación por niveles
empieza en el nivel más alto por las carpetas que contiene los archivos HTML. Dentro de esta en el siguiente
nivel se pueden ver los diferentes archivos que tienen referencias a imágenes. Por último, para cada uno de
estos archivos se mención la numero y contenido de la línea de código donde se hace la referencia.
V3 - Navegabilidad y uso de urls definidos en la aplicación de Django
Desarrollo de documentación para aplicaciones web en Django 13 de28
Imagen 7. Resultados V3
El objetivo de esta visualización era establecer una red de navegación entre los diferentes urls definidos para el
proyecto. Como se puede ver en la imagen anterior, se puede visualizar un grafo donde cada uno de los nodos
representa un url y las flechas representan la navegabilidad entre dos nodos. Es importante tener en cuenta la
dirección de la flecha ya que esta muestra la conexión entre dos url en esa dirección y hay casos donde esta
navegabilidad no es bidireccional. Al mismo tiempo esta visualización le permite al desarrollado evaluar el uso
de los urls definidos para el proyecto y si todos están es uso. La segunda parte de la imagen muestra como para este caso en particular se encuentran 36 urls definidos que no pueden ser accedidos por el usuario. Esto puede
tener dos causas, el uso del url esta restringido para usuarios específicos o el url se definió pero no se encuentra
en uso.
V4 - Documentación en caliente de qué templates se utilizan en cada parte de la página web del proyecto
Desarrollo de documentación para aplicaciones web en Django 14 de28
Imagen 8. Resultados V4
Para esta documentación se planteó una modificación a la interfaz de forma que esta permitiera al desarrollador
identificar que archivos del proyecto estaban participando en la construcción de cada una de las partes de la
interfaz. Esto se puede ver en la imagen anterior en el área alrededor del mouse. Esta área se encuentra resaltada
por un borde azul y además se genera un comentario gris sobre cada uno de los templates que construyen la
interfaz. De esta forma el desarrollador puede desplazar el mouse alrededor de la pantalla e identificar los
diferentes templates. Esta modificación solo se muestra cuando el ratón se encuentra sobre estos. Además,
teniendo en cuenta la experiencia de usuario se diseñó de tal manera que esta visualización se pueda prender y
apagar de forma que en producción no se active. Esto le permite al desarrollado encontrar rápidamente que template se esta utilizando para cada parte de la interfaz y poder modificar rápidamente sin tener que buscar en
todos los archivos del proyecto donde se establece ese template especifico.
7 CONCLUSIONES
7.1 Discusión
Los resultados obtenidos fueron satisfactorios frente a lo planteado por el proyecto. Se logró generar 4
visualizaciones que aportan como documentación a un proyecto de Django simplificando el trabajo de los
desarrolladores al querer realizar cambios o revisar el funcionamiento de la aplicación. Las pruebas realizadas
con el proyecto de Senecode permitió observar y confirmar que las visualizaciones generadas aportaban como una forma de documentación relevante para el proyecto. Sin embargo, se encontraron unos problemas que deben
tenerse en cuenta.
• El primero es que en la visualización V1 se pueden generar inconsistencias en los resultados en caso
de que los desarrolladores no sigan las buenas prácticas de programación y al llamar los atributos de
un modelo, la variable no concuerde con el nombre del modelo. Estas inconsistencias se podrían
Desarrollo de documentación para aplicaciones web en Django 15 de28
manejar a futuro si se establece un formato generalizado en la que las referencias a cada modelo siguen
un cierto protocolo y se aplique en todos los proyectos de Django.
• El otro problema que se encontró es que para la visualización V4, al agregar el nuevo tag a los archivos
es necesario agregar el nombre del archivo en el tag, de forma que pueda mostrar el nombre del archivo en el mensaje. Esto se intentó arreglar buscando que archivo se estaba ejecutando en el contexto de la
aplicación que recibe el tag. Sin embargo, dentro del contexto no llega el nombre de cada template
sino llega el nombre del archivo base donde se hacen los llamados a las diferentes templates.
Asimismo, se intentó utilizar el stack de ejecución del proyecto, sin embargo, en este no se hace el
llamado directo al template. El llamado se hace a un archivo definido dentro de Django llamado
decorator.py que es el encargado de manejar como se agregan los templates a la página.
7.2 Trabajo futuro
Los trabajos futuros que se pueden implementar a este proyecto sería la definición de nuevas documentaciones
que se puedan implementar de manera general en los proyectos de Django. De esta manera se puede generar
una constancia de documentación en los proyectos que cubran todas las necesidades de los desarrolladores.
Asimismo, se puede generar una librería que se pueda agregar a los proyectos de Django y se comience a
generar la documentación mientras se desarrolla el proyecto siendo un soporte para los desarrolladores. De esta
forma se puede ir ampliando el alcance de las documentaciones generadas y de su uso en los nuevos proyectos
en desarrollo.
8 REFERENCIAS
[1] A. Algosaibi and S. Albahli, “Web Documents Structures as Source for Machine-Understandable
Document,” Proceedings of the 2019 2nd International Conference on Intelligent Science and
Technology - ICIST 2019, 2019.
[2] A. Caponi, A. D. Iorio, F. Vitali, P. Alberti, and M. Scatá, “Exploiting patterns and templates for
technical documentation,” Proceedings of the ACM Symposium on Document Engineering 2018 -
DocEng 18, 2018.
[3] C. Treude, M. P. Robillard, and B. Dagenais, “Extracting Development Tasks to Navigate Software
Documentation,” IEEE Transactions on Software Engineering, vol. 41, no. 6, pp. 565–581, Jan.
2015.
[4] D. Amalfitano, A. R. Fasolino, and P. Tramontana, “Using dynamic analysis for generating end user
documentation for Web 2.0 applications,” 2011 13th IEEE International Symposium on Web
Systems Evolution (WSE), 2011.
APÉNDICES
V1 - Referencias de los modelos en los bloques del Proyecto
Desarrollo de documentación para aplicaciones web en Django 16 de28
V2 - Referencias a imágenes en las templates del Proyecto
Desarrollo de documentación para aplicaciones web en Django 17 de28
Código visualización 1
from os import listdir
from os.path import isfile, join
from treelib import Node, Tree
"""En este metodo se obtienen los modelos de cada uno de los archivos que se encuentran en la carpeta
models"""
def obtenerArchivos ():
path = "./calificador/dashboard/models" #path de la carpeta models
models={}
onlyfiles = [f for f in listdir(path) if
isfile(join(path, f))] #Se extraen todos los archivos que hay en la carpeta
for file in onlyfiles: # se recorre cada uno de los archivos
filepath= path+"/"+file
f = open(filepath,"r")
arch = "".join(f)
clases = arch.split("class") # se extraen cada de las clases definidas en cada archivo
cla = {}
for clas in clases:
if "def" in clas:
c = clas.split("def ")
info = c[0].split("\n")
nom = ""
infodic = {}
for i in info: # se extraen cada una de las lineas de los atributos
line = i.split(" = ")
if "models.Model" not in i and len(line) > 1: #se extraen cada uno de los
parametros del modelo
name = line[0].replace(" ", "")
infodic[name] = line[1] #se agregan al diccionario cada uno de los parametros
elif "models.Model" in i:
nom = i.split("(")[0]
cla[nom] = infodic # se agrega al diccionario de las clases del archivo
#print(cla)
n = file.split(".")[0]
models[n]=cla # se agrega al diccionario de modelos
return models
"""En esta se hace la comparacion de los modelos con los bloques html del archivo
para saber que se está llamando y en que linea"""
def comparacionBloques( modelos):
Desarrollo de documentación para aplicaciones web en Django 18 de28
path = "./calificador/dashboard/templates/dashboard/bloques" #Path donde está la carpeta de los
Bloques
onlyfiles = [f for f in listdir(path) if
isfile(join(path, f))] #se extraen los archivos de lso bloques
comparaciones = {}
for file in onlyfiles: #se recorren todos los archivos en la carpeta bloques
filepath = path + "/" + file
f = open(filepath, "r")
arch = "".join(f)
lista = []
for llave in modelos.keys():
# print(modelos[llave].keys())
clasificacion = []
for l in modelos[llave].keys(): # Se revisan todos los modelos
if l.lower() in arch and l != '': # se revisa si el modelo esta mencionado en el
archivo
clasificacion.append(l.lower()) # se registran los modelos que aparecen en el
archivo
for i in clasificacion: #Se recorren los modelos que aparecen
linea = 1
for line in arch.split("\n"):
if i in line and "{" in line:
parts = line.split("}") #se extrae la linea donde se hace la mencion y se
extraen las partes
for p in parts:
valor = ""
if "{" in p:
if p.count("{") > 1: #se extrae la informacion de la mencion
valor = p.split("{")[2]
else:
valor = p.split("{")[1]
nuevo = str(linea) + "_" + limpiarLinea(valor) #se agrega la
informacion con el numeo de linea donde aparece
lista.append(nuevo)
linea += 1
nombre = file.replace(".html","")
comparaciones[nombre] = lista #se agrega la lista de menciones al diccionario de comparaciones
return comparaciones
"""Esta funcion se utiliza para extraer parter que pueden estar incluidas
dentro de la mencion que no se deben agregar a la lista como if, not url y include """
def limpiarLinea( linea):
Desarrollo de documentación para aplicaciones web en Django 19 de28
if "%" in linea:
if "if" in linea:
linea = linea.replace("% if", "")
if "not" in linea:
linea = linea.replace("not", "")
elif "url" in linea:
linea = linea.replace("% url", "")
elif "include" in linea:
linea = linea.replace("% include ","")
linea = linea.replace("%","")
return linea
"""Se reorganiza la informacion de forma que cada todas las menciones de un archivo queden juntas
y que cada modelo tenga los archivos que los llaman """
def reorganizarinfo(modelos, resultados):
grafo ={}
for modelo in modelos.keys(): #se recorren todos los modelos
name = modelo[0:len(modelo)-1]
mod = []
for result in resultados.keys(): #para cada archivo se extrae la informacion de que archivo y
que nombres tienen
lista = resultados[result]
for i in lista:
if name in i: # se revisa si el modelo aparece en la lista y en caso de que si se
agrega la tupla con la informacion de la mencion y el nombre del archivo
mod.append((result,i))
if len(mod)>0:
grafo[modelo]=mod #se agrega al diccionario de resultados
return grafo
"""Se genera el arbol para mostrar la informacion de una manera más facil de entender"""
def generateTree(informacion):
#print(informacion)
tree = Tree() # se genera el arbol
tree.create_node("calificador/dashboard/models", "raiz") # se genera la raiz
for i in informacion.keys(): # se recorren las llaves del diccionario
if tree.get_node(i) == None:
tree.create_node(i, i, parent="raiz") # se agregan las llaves como hizos del nodo raiz
for i in informacion.keys():
lis = informacion[i] # se extrae la lista de menciones de la cada llave
for j in lis:# se recorren la lista
Desarrollo de documentación para aplicaciones web en Django 20 de28
if tree.get_node(j[0]) == None: # se revisa si el archivo (valor 0 en la tupla) ya existe
en el arbol si no se agrega el nodo hijo
tree.create_node(j[0], j[0], parent=i)
for k in lis: # se vuelve a recorrer la lista
if tree.get_node(k[1]) == None: # Se revisa que si la mencion (valor 1 en la tupla) ya
existe en el nodo y si no se agrega al arbol con el archivo como padre
tree.create_node(k[1], k[1], parent=k[0])
tree.save2file("Modulos.txt") #se guarde el arbol en un archivo
#print(tree.show())
"""Metodo que contiene todos los pasos del Caso 1
La funcion del caso 1 es generar una visualizacion de los llamados de los modelos de los diferentes
archivos en la carpeta Bloques
De esta forma cuando se hagan modificaciones a los modelos o a la base de datos se pueda saber de
manera rapida que lineas se de los
bloques fueron afectadas"""
def iniciarCaso1():
modelos = obtenerArchivos()#se obtienen los modelos
#print(modelos)
resultado = comparacionBloques(modelos) # se obtienen las menciones
#print( resultado)
informacion = reorganizarinfo(modelos,resultado) # se reorganiza la informacion
generateTree(informacion) # se genera el arbol
"""Se Ejecutan todos los pasos del Caso 1"""
iniciarCaso1()
Código Visualización 2
from os import listdir
from os.path import isfile, join,isdir
from treelib import Node, Tree
"""Esta funcion obtiene las menciones de las imagenes """
def obtainfiles():
path = "./calificador/dashboard/templates/dashboard"
images = []
allfiles = [f for f in listdir(path)] # se obtienen todos los archivos y directorios en el path
for i in allfiles: #se recorren todos los directorios y archivos
if isdir(path+"/"+i): #se chequea si es una carpeta o un archivo
Desarrollo de documentación para aplicaciones web en Django 21 de28
fileFiles =[f for f in listdir(path+"/"+i)] # se extraen los archivos de la carpeta
for f in fileFiles:
extrap = "/"+i+"/"+f
filepath = path+extrap
f = open(filepath, "r") # se obtiene el texto del archivo
arch = "".join(f)
con = 1
for line in arch.split("\n"): #se divide en las lineas del archivo
if "<img" in line: # Se revisa si se tiene imgen en la linea
nombre= extrap
images.append((nombre, "line:"+str(con)+" - "+line.strip())) #se agrega la
tupla del archivo y la linea donde se tiene la imagen
con+=1
elif isfile(join(path, i)):#en caso de ser archivo
filepath = path + "/" + i
f = open(filepath,"r")
arch = "".join(f)# se obtiene el texto del archivo
con = 1
for line in arch.split("\n"): # se divide el archivo por lineas
if "<img" in line:# se busca si tiene imagen la linea
nombre =i
images.append((nombre,"line:"+ str(con)+ " - "+line.strip()))# se agrega la tupla
del archivo y la linea donde se hace el llamado a la imagen
con+=1
return images
"""Esta funcion genera el arbol de forma que se pueda visualizar de manera facil"""
def generatetree(lista):
tree = Tree() # se genera el arbol
tree.create_node("calificador/dashboard/templates/dashboard", "raiz") # se agrega la raiz como el
dashboard
for i in lista:
if tree.get_node(i[0])==None:# se revisa si el archivo está en el arbol y se arregla
tree.create_node(i[0],i[0],parent="raiz") # se agrega el archivo al arbol
for i in lista:
if tree.get_node(i[1]) == None: # se revisa si la iimagen se ha agregado al arbol
tree.create_node(i[1],i[1],parent=i[0]) # se agrega la imagen al arbol
tree.save2file("imagenes.txt")
"""Metodo que contiene todos los pasos del Caso 2
La funcion del caso 2 es generar una visualizacion de los llamados de imagenes de los diferentes
archivos en la carpeta en las diferentes templates
Desarrollo de documentación para aplicaciones web en Django 22 de28
De esta forma cuando se hagan modificaciones a las imagenes o se rompa una imagen se pueda saber de
manera rapida que lineas de las
templates fueron afectadas"""
def iniciarCaso2():
lista = obtainfiles()
#print(lista)
generatetree(lista)
iniciarCaso2()
Código Visualización 3
import time
from selenium import webdriver
import networkx as nx
from graphviz import Digraph
import os
os.environ["PATH"] += os.pathsep + 'C:/Program Files (x86)/graphviz-2.38/release/bin'
"""Esta funcion obtiene los urls que se está registrados en el archivo urls"""
def obtainurls():
path= "./calificador/dashboard/urls.py" #Path al archivo de los URLs
urls =[]
f = open(path, "r", encoding="utf-8") # se abre el archivo
arch = "".join(f) # se obtiene el texto del archivo
u = arch.split("[")[1].split("]")[0] #se obtiene la parte de los urls
for line in u.split(",\n"): #se recorre linea por linea
if line !="": #se revisa que la linea no esté vacia
path = line.split("(")[1].split(")")[0] #se limpia el url
url = path.split(",")[0]
urls.append(url) # se agrega el url a la lista
return urls
"""Esta funcion recorre las páginas con el web driver"""
def extract_links (driver, links):
current = driver.current_url # se obtiene el url actual
mybytes = driver.page_source # se obtiene el codigo html de la pagina
problemas=[]
est=[]
envios=[]
for line in mybytes.split('\n'): # se recorre el archivo por cada una de las lineas
if "href" in line: # se buscan las referencias de navegacion
link = line.split('href="')[1].split('"')[0] #se extrae el url
Desarrollo de documentación para aplicaciones web en Django 23 de28
if "/" in link and "static" not in link and link not in current : # se revisa que no sea
referencia a imagenes
if "/envios_" not in link: # se revisa si link es para envios
if link.count("/") <= 3 and "tag" not in link:
if "/problemas/" in link: # se revisa que si el link es para problemas
problemas.append(link)
elif "/estudiante/analisis" in link: # se revisa si el link es para analisis de
estudiantes
est.append(link)
elif "/envios/" in link: # se revisa si es para enviar
envios.append(link)
else:
if links.get(link) == None:
links[link] = 1# se agrega el link
else:
links[link] += 1 # en caso de que se use más de una vez se cuentan
if len(problemas)!= 0:
links[problemas[0]]=len(problemas) # Se agrega solo un problema
if len(est) != 0:
links[est[0]]=len(est) # se agrega solo un student analisis
if len(envios) != 0:
links[envios[0]] = len(envios) # se agrega un solo url de envios
return links # se retornan todos los links
"""Se navegan los links con el webdriver"""
def obtainlinks ():
url = "https://senecode.virtual.uniandes.edu.co" # El url inicial
driver = webdriver.Chrome(
'C:/Users/Nicolás Bello/Documents/Andes/TESIS/chromedriver') #se inicializa el webdrivre
driver.get(url + "/home")
time.sleep(5) # Let the user actually see something!
search_box = driver.find_element_by_name('usuario') # se ingresa el usuario
search_box.send_keys('<ingrese Usurio>')
search_box = driver.find_element_by_name('password') # se ingrea la contrasenha
search_box.send_keys('<Ingrese Contraseña>')
search_box.submit() #se ingresa a senecode
time.sleep(5)
extrac = {}
extracted = extract_links(driver, extrac) # Se extraen los links de la primera pagina
endlist = []
for link in extracted: # se checkan los primeros links extraidos
Desarrollo de documentación para aplicaciones web en Django 24 de28
if 'http' not in link: # se revisa si el link es una url externa
endlist.append(("/home", link)) # se agrega a la lista final
for link in extracted: # se recorre la list de links
l = {}
driver.get(url + link) # se navega a esa pagina
l = extract_links(driver, l) # se extraen los urls de esa pagina
for a in l:
if 'http' not in a:
endlist.append((link, a)) # se agrega a la la tupla lista final
return endlist
"""Se construye el grafo"""
def generategraph(links):
g = nx.Graph() # se inicializa el grafo
for link in links:
g.add_edge(link[0],link[1]) # se agregan las conecciones del grafo
generateRender(g, "") # se genera el archivo con el grafo
return g
"""Se genera en el grafo para generar el archivo"""
def generateRender(grafo,s):
dot = Digraph(comment='Clicks') # se inicializa el grapho
for node in grafo.nodes():# se recorren los nodos del grafo
dot.node(node, node)# se agregan los nodos en el grafo render
for edge in grafo.edges(): # se recorren las conecciones del grafo
dot.edge(edge[0], edge[1]) # se agregan los edges al grafo render
dot.render('niveles'+s+'.gv', view=True) # se genera el archivo del grafo
"""Metodo que contiene todos los pasos del Caso 3
La funcion del caso 3 es generar una visualizacion de la navegabilidad de la aplicacion. Se muestran
todos los links a los que
el usuario puede navegar dentro de la aplicacion. Esto nos permite ver que paginas se visitan más y que
paginas o urls no son accesibles
para los usuarios"""
def iniciarCaso3():
urls = obtainurls() # se obtiene los urls
links = obtainlinks() # se obtiene los links navegables
g = generategraph(links) # se genera el grafo
notGraf =[] #Se genera una lista para los urls que no se navegan
graf=[]
for u in urls: # se recorren los urls
if "<" in u: # se limpian los urls
new = u.split("<")[0].replace("'","")
Desarrollo de documentación para aplicaciones web en Django 25 de28
else:
new = u.replace("'","")
for n in g.nodes():
#print(new,n)
if new in n and u !="''": # se agregan los urls que estan en el grafo
graf.append(u)
#print(len(graf))
for u in urls: # se recorren los urls
if u not in graf:
notGraf.append(u) # se agregan los urls que no estan en el grafo
notGraf.remove("''")
notGraf.remove("'login/'")
notGraf.remove("'home/'")
f = open("UrlsFaltantes.txt", "w+") # se genera un archivo para escribir los urls faltantes
f.write("Los "+str(len(notGraf)) +" urls que no se encuentran en la navegacion son:\n") # se
escribe la primera linea
for i in notGraf:
f.write(i+"\n") #se escribe el url en la line
f.close()
# se ejecuta el caso 3
iniciarCaso3()
Código Visualización 4
from os import listdir
from os.path import isfile, join, isdir
"""
Se agrega estas lineas en el archivo setting.py de forma que se pueda activar y desactivar
la visualizacion
HOVER_TAG = True
HOVER_TEMPLATE = 'calificador.templatetags.custom_tag'
if not HOVER_TAG:
HOVER_TEMPLATE= 'calificador.templatetags.custom_tag2'
print(HOVER_TEMPLATE)
Se agrega esta informacion en la Seccion de Templates del archivo settings.py
'libraries':{
'custom_tag': 'calificador.templatetags.custom_tag',
}
Se agrega la carpeta Templatetags con el archivo custom_tag.py y un archivo __init__.py"""
Desarrollo de documentación para aplicaciones web en Django 26 de28
"""Esta funcion agrega el nuevo tag a las templates que tiene el repositorio"""
def modificarTemplates():
path = "./calificador/templates" # path de las templates
no = "range.html,radio.html,martor.html,js.html,d3_pie.html,busqueda.html" #archivos que no deben
ser modificados
onlyfiles = [f for f in listdir(path) if isfile(join(path, f))] #se extraen los archivos que estan
en el directorio
n = 0
for file in onlyfiles: # se recorren los archivos
print(file)
if file not in no: # se revisa si el archivo se va a modificar
if file == "base.html": # si el archivo es el base se modifica diferente
filepath = path + '/' + file
process_files_base(filepath)# se llama la funcion para modificar
else:
filepath = path + '/' + file
process_files_comp(filepath,n) # se llama la funcion para modificar el archivo
n+=1
return n
"""funcion que modifica el archivo base.html"""
def process_files_base(filepath):
f = open(filepath, "r", encoding="latin-1") # se lee el archivo
arch = f.read() # se extrae el archivo
f.close()
f = open(filepath, "w",encoding="latin-1") # se abre el archivo para modificar
mesagge = ""
parts = arch.split('<body class="Site">')
final = parts[0] + '\n<body class="Site">\n' + mesagge + '\n' + parts[1]# se agregan las partes
f.write(final) # se escriben los cambios
f.close()
"""Funcion que modifica los demas archivos """
def process_files_comp(filepath,n):
f = open(filepath, "r", encoding="latin-1") # se abre el archivo para leer
arch = f.read() # se extrae toda la informacion del archivo
f.close()
f = open(filepath, "w",encoding="latin-1") # se abre el archivo para modificar
name = filepath.split("/")
message = name[len(name)-1].upper()# se optiene parte del mensage
final = ""
if '{% extends "base.html" %}' in arch: # se revisa que tags tiene el archivo
print("caso1")
Desarrollo de documentación para aplicaciones web en Django 27 de28
parts = arch.split('{% extends "base.html" %}')# se obtiene las partes del archivo
s = '{% extends "base.html" %}\n{% load custom_tag %} \n {% hover ' + message + ' %}\n'
a = '\n {% endhover %}' # se agregan los nuevos tags
final = s + parts[1] + a #se arma el mesage final
elif '{% load humanize %}' in arch: #se revisa que tags tiene el archivo
print("caso2")
parts = arch.split('{% load humanize %}') # se obtienen las partes del archivo
s = '{% load custom_tag %}\n {% load humanize %}\n {% hover ' + message + ' %}\n'
a = '\n {% endhover %}' # se agrega el nuevo tag
final = s + parts[1] + a # se genera el nuevo archivo
else:
print("caso3")
s = '{% load custom_tag %}\n {% hover '+message+' %}\n' # se genera el nuevo tag
a = '\n {% endhover %}'
final = s+arch+a # se genera el nuevo archivo
f.write(final) # se escribe el archivo otra ves
f.close()
"""Esta funcion modifica los archivos de los templates agregando los nuevos tags """
def modificar_comp(n):
path = "./calificador/dashboard/templates/dashboard" # el path para los arhcivos
onlyfiles = [f for f in listdir(path) if isfile(join(path, f))] # se obtienen los archivos en el
path
onlydir = [f for f in listdir(path) if isdir(join(path, f))] # se obtienen los directorios en el
path
x=n
for file in onlyfiles:# se recorren los archivos
print(file)
pathfile = path+"/"+file
process_files_comp(pathfile,x) # se llama la funcion para agregar el tag al archivo
x+=1
for dir in onlydir: # se recorren los directorios
npath= path+"/"+dir
files = [f for f in listdir(npath) if isfile(join(npath, f))] # se extraen los archiovs
for file in files:
pathfile=npath+'/'+file
print(pathfile)
process_files_comp(pathfile,x) # se llama la funcion para agregar el tag al archivo
x+=1
"""Metodo que contiene todos los pasos del Caso 4
Desarrollo de documentación para aplicaciones web en Django 28 de28
La funcion del caso 4 Modifica los archivos .html del repositorio de de forma que tengan el nuevo tag
que se generó de forma
la funcionalidad de hover se agrege en caliente a los html templates que tiene el repositorio.
Mostrando que componenter estan
ubicados en que archivos"""
def iniciarCaso4():
cant = modificarTemplates() # se llama para modificar los archivos en la carpeta template
modificar_comp(cant) # se llama para modificar los archivos dentro de dashboard templates
#se ejecuta el caso 4
iniciarCaso4()