desarrollo de documentación 6/1/2020 para aplicaciones web

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




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.

https://www.djangoproject.com/

https://senecode.virtual.uniandes.edu.co/


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.


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.


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.


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.

https://es.reactjs.org/

https://nodejs.org/es/


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,


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.

https://es.wikipedia.org/wiki/%C3%81rbol_radial


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.

https://d3js.org/


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.

https://github.com/nbellol/DocumentacionDjango


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.


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.

https://github.com/nbellol/DocumentacionDjango


extraía toda esta información los modelos se agrupaban y de esta forma se podía generar el archivo de la

visualización.



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



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



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


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



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):


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):


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


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.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


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")


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


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()


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


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


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


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("'","")


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()



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"""


"""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")


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



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()