Desarrollo de una aplicación web para la gestión de los clientes de un profesional de la Podología

1 2 3 Escuela Técnica Superior de Ingeniería Informática Grado en Ingeniería Informática Desarrollo de una aplicación web para la gestión de los clientes de un profesional de la Podología Development of a web application for the customers management of a Podiatry professional Realizado por Félix Durán Domínguez Tutorizado por Eduardo Guzmán de los Riscos Departamento Lenguaje y Ciencias de la Computación UNIVERSIDAD DE MÁLAGA MÁLAGA, Noviembre, 2016 Fecha defensa: El secretario del tribunal 4 5 Resumen El principal objetivo que tiene la realización de este trabajo de fin de grado es, por un lado, plasmar los conocimientos adquiridos durante la estancia en la facultad de Informática, pero sobretodo, su finalidad es completar esos conocimientos añadiendo otros que son de gran utilidad para el ámbito profesional en la rama de las aplicaciones Web. Las tecnologías utilizadas en este proyecto han sido HTML5, CSS3, Bootstrap JavaScript, JQuery, Python (en concreto el framework Django), Angular y MySQL. Esta aplicación tiene dos metas fundamentales. La primera es el de dar a conocer a un profesional de la Podología, el cual expondrá a sus clientes y posibles clientes su nueva aplicación para llegar a más gente. Su segunda meta es la de ofrecer una aplicación web al podólogo donde gestionar todo lo referente a sus clientes, como son su información, sus citas, calendario, mensajes y su blog de noticias. Para el desarrollo de esta aplicación se ha utilizado una arquitectura de modelo-vista-controlador, para así separar los datos y la lógica de negocio de la interfaz del usuario teniendo siempre en mente la idea de reutilización de código y de separación de conceptos para facilitar el desarrollo de la aplicación. Palabras Clave  Aplicación Web  Podología  Profesional  Gestión  Cliente  Servicios  Salud  Proyecto 6 Sumary The main objective of the realization of this end of degree work is, on one hand, shows the acquired knowledge during the stay at the Computer Science University, but especially, it’s purpose has been to complete this knowledge by adding other that are very useful in the professional field in the branch of web applications. The used technologies in this project have been HTML5, CSS3, Bootstrap, JavaScript, JQuery, Python (specifically Django framework), Angular and MySQL. This application has two main goals. The first one is to make known to a podiatry professional, which will expose to his clients and potential clients his new application in order to reach more people. The second goal is to offer a web application to the chiropodist where he can manage everything about his clients, like their information, his events, calendar, messages, and his news blog. For the development of this application a model-view-controller architecture has been used, in order to separate the data and the bussines logic from the user interface, always having in mind the idea of code reuse, and separation of concepts in order to ease the development of this application Key words  Web Application  Podiatry  Professional  Management  Client  Service  Health  Project 7 Índice 1. Introducción ................................................................................................. 9 Objetivos y motivación .................................................................................... 9 Métodos ........................................................................................................ 10 Estudio de las tecnologías utilizadas ............................................................ 10 1. Lenguajes y Frameworks ................................................................. 10 Python: ...................................................................................................... 10 Django: ...................................................................................................... 10 HTML: ....................................................................................................... 10 CSS: .......................................................................................................... 10 JavaScript: ................................................................................................ 11 JQuery: ...................................................................................................... 11 Bootstrap: .................................................................................................. 11 MySQL: ..................................................................................................... 11 2. Arquitectura M-V-C .......................................................................... 11 3. Hosting PythonAnyWhere ................................................................ 11 2. Formación ................................................................................................. 13 3. Análisis de la aplicación ............................................................................ 15 Identificación de Usuarios ............................................................................. 15 Obtención de requisitos ................................................................................ 15 Rol Cliente ................................................................................................. 15 Rol Administrador ...................................................................................... 16 Casos de Uso: Cliente .................................................................................. 17 Descripción del caso de uso del cliente ........................................................ 18 Casos de Uso: Administrador/Podólogo. ...................................................... 19 Descripción del caso de uso del administrador ............................................. 20 4. Diseño del sistema .................................................................................... 21 5. Procesos de negocio ................................................................................. 27 Rol Usuario/Cliente ....................................................................................... 27  Acceso a la web: ................................................................................. 27 Rol Administrador ......................................................................................... 27  Identificación y acceso a la aplicación: ................................................ 28 8  Creación y gestión de usuarios: .......................................................... 28  Gestión de Clientes: ............................................................................ 28  Gestión de Visitas: .............................................................................. 28  Consulta de Mensajes: ........................................................................ 28  Gestión de Blog: .................................................................................. 29  Gestión de su calendario personal: ..................................................... 29 6. Casos de prueba ....................................................................................... 31 7. Detalles de la Implementación .................................................................. 42 Estructura de ficheros en Django .................................................................. 42 Preparando el entorno de trabajo ................................................................. 44 Modelos, bases de datos y vistas ................................................................. 47 Funcionalidad de contacto con el podólogo .................................................. 51 Configuración para la autenticación de Google ............................................ 54 8. Pruebas ..................................................................................................... 59 9. Conclusiones y trabajo futuro .................................................................... 61 10. Referencias bibliográficas .......................................................................... 63 Anexo – Manual de Usuario ............................................................................. 65 Cliente .............................................................................................................. 65 Acceso a la web ............................................................................................ 65 Navegación ................................................................................................... 65  La podología ....................................................................................... 66  Tu podólogo ........................................................................................ 66 .................................................................................................................. 68  Servicios .............................................................................................. 69  Blog ..................................................................................................... 73  Entidades en las que colaboro ............................................................ 74  Contacta .............................................................................................. 75 Administrador ................................................................................................... 76 Identificación y Acceso al panel de administración. ...................................... 76  Gestión de usuarios .......................................................................... 78  Gestión de clientes .............................................................................. 80  Seguimiento de las visitas ................................................................... 82  Recepción y consulta de mensajes ..................................................... 84 9  Gestión del blog .................................................................................. 84  Gestión del calendario ......................................................................... 87 1. Introducción Objetivos y motivación Este proyecto se basa fundamentalmente en los siguientes aspectos: 1. Realizar un ejercicio real de contacto con el Cliente. En este proyecto la interacción con el Cliente, ha sido continua, teniendo reuniones periódicas para discutir todos los aspectos de la aplicación, ya sean de diseño, de implementación, de datos, etc. 2. Poner en práctica lo aprendido durante el grado en Ingeniería Informática. Se han pretendido plasmar los conocimientos adquiridos durante el grado a la hora de realizar este proyecto. Metodologías, lenguajes, estructura de código y bases de datos entre otros han sido los conocimientos que me han ayudado a completar el trabajo. 3. Adquirir conocimientos nuevos. Además de utilizar como base los conocimientos adquiridos durante el grado, se ha puesto especial dedicación en aprender nuevas tecnologías y lenguajes que resultan muy útiles para el ámbito profesional. Adquirir nuevos conocimientos es de vital importancia para nuestra profesión. Estos nuevos conocimientos son: Lenguaje Python y su framework Django, HTML5, CSS3 y Bootstrap, JavaScrip, JQuery y MySQL. Estos conocimientos se han ido adquiriendo mediante la realización de cursos, la consulta en foros, la lectura de APIs, y la búsqueda de información en internet. 4. Ofrecer una herramienta útil y completa a un Cliente. Otra de las motivaciones fundamentales ha sido la de poner a disposición de un gran conocido y amigo los conocimientos y aptitudes que se han ido ganando con el tiempo y ofrecerle una herramienta útil y potente para su actividad profesional. 16 enfocada a usuarios que necesiten de los cuidados de un podólogo, sino, también, a otras clínicas interesadas en contratarlo. Requisito funcional 3: Contacto con el podólogo Los clientes podrán acceder a la web para escribir un mensaje al podólogo con cualquier contenido que se les antoje, desde pedir una cita, preguntar por un problema, etc. Rol Administrador Requisito funcional 4: CRUD usuarios El administrador puede crear, consultar, modificar y eliminar usuarios del sistema desde el panel de administración. Requisito funcional 5: CRUD clientes El administrador puede dar de alta, consultar, modificar y eliminar clientes del sistema desde el panel de administración. Requisito funcional 6: CRUD visitas El administrador puede vincular visitas a sus clientes desde el panel de administración. Además también puede modificar la información de estas visitas, consultarlas y eliminarlas cuando lo necesite. Requisito funcional 7: CRUD mensajes Cuando un cliente escriba un mensaje al podólogo, este, además de recibir un email con la información de dicho mensaje, podrá verlo en el panel de administración, modificarlo, o eliminarlo. Requisito funcional 8: CRUD blog  RF-8.1 Categorías El administrador puede crear categorías para clasificar sus posts.  RF-8.2 Posts Dentro de estas categorías el administrador creara posts que tengan que ver con ellas para mantener el orden en su blog. 17 Requisito funcional 9: Gestión calendario  RF-9.1 Consultar eventos La aplicación permite que el administrador se autentique con su cuenta de Google para consultar sus próximos eventos directamente desde la el panel de administración.  RF-9.2 Crear eventos Además, desde la aplicación el cliente puede crear nuevos eventos y añadirlos a su calendario Google Casos de Uso: Cliente Figura 1. Casos de uso cliente 18 Descripción del caso de uso del cliente En el anterior diagrama se muestran las funcionalidades que poseen los usuarios con rol cliente. El cliente accede a la web en busca de información sobre la actividad de nuestro podólogo. Puede acceder a toda la información que el podólogo le proporciona en su web, desde su formación académica, formación complementaria, servicios disponibles, curriculum, y blog de noticias. Los clientes pueden interactuar con la aplicación para ponerse en contacto con el podólogo mediante un formulario web alojado en la página. No necesita ninguna condición previa para realizar ninguna de estas funcionalidades. 19 Casos de Uso: Administrador/Podólogo. Figura 2. Casos de uso administrador 20 Descripción del caso de uso del administrador En el diagrama de la figura 2 podemos comprobar las funcionalidades que posee el administrador del sistema, representado en este caso por el podólogo. Para acceder a estas funcionalidades hay que estar previamente registrado en la aplicación. En una primera instancia solo existe un administrador del sistema, el podólogo. Este puede elegir si crear otros administradores o simplemente otros usuarios con menos permisos que puedan acceder a la aplicación. Para los CRUD de clientes, mensajes, visitas y blog, el usuario en cuestión tiene que tener los permisos necesarios para ello. Si dicho usuario tiene los permisos, podrá realizar las tareas de creación, modificación, consulta o borrado de los datos almacenados en cada uno de estos campos. Para la gestión del calendario personal se necesita tener una cuenta de Google, ya que el calendario está ligado a dicha cuenta. 21 4. Diseño del sistema Teniendo bien definidos los requisitos, usuarios y funcionalidades a desarrollar se comienza con el diseño de la aplicación. Lo primero es hacer un esquema de la base de datos para su posterior análisis e implementación en la aplicación. Teniendo este diagrama, la creación de los modelos en Django para representar esta estructura fue lo siguiente a realizar, a continuación se muestran los módulos de código que representan cada una de estas entidades. Señalar que este código está almacenado en el fichero “models.py” el cual es el encargado de recoger las entidades en Django. Figura 3. Diagrama de clases 22 Figura 4. Modelo cliente Figura 5. Modelo visita Figura 6. Modelo mensaje Figura 7. Modelo categoría 23 Esta es la representación en código de cada una de las entidades de nuestra base de datos. En Django, los controladores están almacenados en un fichero denominado “views.py” donde se guarda la lógica de cada vista HTML. En cambio, los controladores del panel de administración son un caso especial. Django proporciona una forma de comunicación entre la vista de administración y los modelos diferente al de otros lenguajes. Existe un fichero llamado “admin.py” en el que nos encargaremos de plantear cómo deseamos que se muestren los datos en administración y Django lo hará automáticamente. Veremos a continuación los distintos campos de este archivo “admin.py” para ver cómo se estructura la información de cada entidad. Figura 8. Modelo post Figura 9. Admin.py - Clientes 24 Figura 10. Admin.py - Visitas Figura 11. Admin.py - Mensajes Figura 12. Admin.py - Posts Figura 13. Admin.py - Categorías 25 Como se observa en estas figuras, podemos elegir los campos que se mostrarán en el panel de administración, así como los filtros o campos de búsqueda para facilitar la gestión de los mismos. En la figura anterior, podemos observar el diseño que se ha llevado para la estructura de las vistas de la web. Desde las distintas secciones de la vista principal se puede navegar a todas las demás. Se ha elegido este diseño ya que permite mantener toda la información básica agrupada en la misma vista y la información más especifica cómo puede ser la de los distintos servicios, o el formulario de contacto, separado de esta para un diseño más limpio y agradable. Figura 14. Diagrama de Vistas 32 Pinchamos en el servicio deseado, en este caso podología infantil Dentro de cada servicio podemos ver una descripción del mismo. Figura 16. Sección servicios Figura 17. Vista podología infantil 33 Caso 2: Contacto con el podólogo Comprobar que cuando un cliente envía un mensaje al podólogo, este lo recibe en su correo y el mensaje se guarda en la aplicación. Primero nos dirigimos al apartado de contacta de la web. Pulsamos en el botón con forma de sobre y escribimos nuestro mensaje Figura 18. Sección de contacto Figura 19. Formulario de contacto 34 Datos introducidos: Nombre -> Félix Durán Email -> felix[email protected] Teléfono -> 635 012 355 Mensaje -> Mensaje para caso de prueba 2 Al hacer clic en enviar, deberá redirigirnos a la página de agradecimiento, enviar el email al podólogo y guardar el mensaje en la aplicación. Mensaje de agradecimiento y botón para volver a la página principal: Email correspondiente al mensaje anteriormente creado: Figura 20. Vista de agradecimiento Figura 21. E-mail a podólogo 35 Mensaje guardado en la base de datos: Caso 3: Acceso al panel de administración Haciendo uso de los datos de acceso que se le proporcionan al administrador, debemos ser capaces de autenticarnos en la aplicación y entrar en nuestro panel de administración. Accedemos a la dirección http://felixdd666.pythonanywhere.com/admin y rellenamos los campos necesarios. Figura 22. Mensaje almacenado 36 Cuando aceptamos, la aplicación debe redirigirnos a nuestro panel de administración. Desde aquí ya podemos hacer las gestiones que pertinentes. Figura 23. Log-In de la aplicación Figura 24. Panel principal de administración 37 Caso 4: Crear un Cliente Una vez autenticados y dentro de nuestra aplicación, una de las cosas que podemos hacer es registrar un cliente en nuestra base de datos. Pinchamos en la opción “ + Add” de los clientes y nos redirigirá al formulario de creación de clientes. Rellenamos los datos y guardamos. Figura 25. Creación de un cliente-1 38 A la hora de guardar podemos elegir si seguir editando, guardar y salir o guardar y crear otro nuevo, en este caso elegiremos guardar y salir y nos redirigirá a la lista de todos los clientes. Figura 26. Creación de un cliente-2 Figura 27. Listado de clientes 39 Caso 5: Creación de una visita Desde el panel de administración y con clientes ya creados, cada vez que dicho cliente acuda a una consulta, se creará una visita para registrar lo que se realice ese día. Desde el panel principal seleccionamos añadir una visita. La aplicación nos redirige al formulario de creación de visitas. Utilizando el desplegable elegimos un cliente de los ya creados y rellenamos la información de ese día para ese cliente. Figura 28. Creación de una visita 40 Caso 6: Gestión de calendarios Desde el panel principal podemos acceder a la vista de gestión del calendario para ver nuestro calendario y añadir eventos si se desea. Pinchamos en el botón de gestión del calendario y este nos redirige a una vista en la que primero tendremos que autenticarnos en Google para acceder a nuestros eventos. Pinchamos en “Autorizar” y nos autenticamos con Google. Figura 29. Autorización Google Figura 30. Datos Google 41 Rellenamos los datos y a continuación se generará la vista del calendario. Si lo deseamos, podemos rellenar los datos de un nuevo evento y añadirlo a nuestro calendario. Figura 31. Vista de calendario y creación de evento Figura 32. Evento Creado 48 mostrar estos datos tenemos que irnos a otro fichero de Django, el fichero “admin.py” En este fichero crearemos la forma en la que se verán los distintos campos de nuestro panel de administración de Django. Podemos configurar que se va a ver, cómo se va a ver, el orden, los filtros, los campos de búsqueda, etc. Hasta ahora solo hemos visto cómo se comporta Django dentro del panel de administración, pero no hemos visto como se hace la comunicación entre los modelos y las vistas. A continuación mostraremos primero, los modelos de nuestro blog, después cómo se muestran en el panel de administración y, por último, cómo mostrarlos en la web principal. Figura 41. Configuración de los campos de cliente 49 Cabe señalar algunas diferencias entre estos modelos y el modelo anteriormente descrito. Se puede observar que estos dos modelos están conectados, concretamente tienen una relación de clave foránea. Una categoría está compuesta de muchos posts. También podemos ver un campo un tanto especial, el último de ellos, “imageField”, se trata de un campo especial para almacenar imágenes donde tenemos que definir una carpeta en la cual guardaremos dichas imágenes. Si el podólogo desea acompañar algún post de una imagen, puede hacerlo sin necesidad de cambiar el código ni tener conocimientos de informática. Figura 42. Modelos categoría y post Figura 43. Configuración de los campos de categoría y post 50 Hasta aquí, sería el mismo recorrido que en el ejemplo anterior de los clientes. Ahora veremos cómo hacer que se vean estos post en la web principal, es decir, veremos la comunicación entre los datos y las vistas. Esta figura es un trozo del fichero “views.py”, este fichero contiene la lógica de las vistas en Django y permite que este las muestre correctamente. Como se puede ver en esta vista, hemos definido unas variables especiales para poder mostrar los posts que creemos en el panel de administración. La variable “posts” lleva todos los objetos, ordenados por fecha de creación, que hay en el modelo “Post”. La otra variable es simplemente una variable auxiliar para poder mostrar un número definido de posts y no más de ese número. En la siguiente figura observamos la forma en la que Django se inserta en HTML para formar esta comunicación entre modelos y vistas. En este caso lo que hemos hecho es utilizar un bucle “for” para recorrer todos los posts, y dentro de este hemos utilizado unas sentencias “if” para mostrar solo el contenido que sea público y no se superen más de tres posts mostrados. De estos posts se muestra, por este orden, los siguientes datos:  Título: {{ post.Titulo }}  Categoría: {{ post.Categoria }}  Contenido del post: {{ post.Contenido}} Figura 44. Lógica de la vista principal.html 51 Funcionalidad de contacto con el podólogo En este apartado vamos a ver el código que existe detrás de una de las funcionalidades más importantes de este proyecto, el formulario de contacto de los clientes con el podólogo. Esta funcionalidad toca absolutamente todas las ramas de las que se forma este proyecto. Lo iremos explicando poco a poco. La parte de configuración del fichero “settings.py” ya está explicada anteriormente así que pasaré directamente a la explicación de las otras partes involucradas. Lo primero que debemos hacer es crear nuestro formulario Django. En el fichero llamado “forms.py” creamos la clase del formulario que necesitamos. Figura 45. Sección del blog de la vista principal.html 52 Una vez creado, tenemos que hacer que la vista HTML rellene los datos desde el formulario de contacto, y después, configurar lo que se debe hacer cuando el mensaje es enviado, esto se hace usando los métodos apropiados en el fichero “views.py”. Hay mucho que explicar de esta figura, vayamos por partes. Lo primero es crear una variable que contenga el formulario que hemos creado anteriormente, la variable “form”. Seguidamente crearemos las variables para cada uno de esos campos que se utilizarán para almacenar el mensaje en la base de datos y para construir el email. Acto seguido creamos una variable para almacenar nuestro nuevo mensaje en la base de datos y le añadimos los campos. Si el formulario es válido y no hay ningún fallo, haremos lo siguiente: Figura 46. Campos del formulario Figura 47. Lógicas de las vistas contacta y thanks 53  Llamaremos a la funcion send_mail(), que cogerá dichos datos, creará un email y lo mandará desde la cuenta que hemos creado para este propósito, hasta el email personal de nuestro podólogo.  Además, se guardará, con la función .save(), el nuevo mensaje en la base de datos.  Nos redirigirá a la vista “thanks”, cuya lógica se puede observar debajo de la de contacta. Por supuesto, esta figura no tiene ningún sentido si no añadimos estas dos imágenes: La figura 48 es el modelo de los mensajes que se guardan en la base de datos, cogidos directamente de los “inputs” que los clientes rellenan en la vista HTML de contacto. La figura 49 muestra la vista HTML de contacta y cómo se crea un formulario con Django utilizando la variable “form”. Figura 48. Modelo mensaje Figura 49. Vista del formulario de contacto 54 Configuración para la autenticación de Google Para la utilización del calendario de Google y para la creación de eventos desde la aplicación, se necesitan unos pasos previos muy concretos para poder utilizar las credenciales de Google. Lo primero es crear un proyecto en la Api de Google. Una vez creada debemos configurar la pantalla de autorización de OAuth: Seguidamente necesitamos crear un ID de cliente de OAuth para autorizar a nuestro sitio web la utilización de estas API. Como observamos en la figura siguiente, tenemos que configurar los orígenes de JavaScript para que funcione tanto en local como en nuestra aplicación en producción. Figura 50. Pantalla de autorización de OAuth en Google API 55 Una vez hecho esto anotamos el ID del cliente que se genera y lo utilizamos en nuestro archivo JavaScript que será el que se encargue de gestionar el contacto de nuestra aplicación con Google. Mostraremos las líneas de código más importantes a continuación. Figura 51. Creación de ID de OAuth Figura 52. Uso del ID OAuth para autenticación JavaScript 56 La siguiente función comprueba la autorización cuando se carga la vista. La función anterior llama a la función de la figura siguiente y dependiendo de si esta autenticado o no, muestra, o bien, el “div” con el botón para comenzar la autenticación, el cual podemos ver en la página 40 de esta misma memoria, o bien lo oculta y carga el calendario. Figura 53. Función de autorización Google Figura 54. Función handleAuthResult de Google API 57 Cargamos la función de los eventos que nos proporciona Google y además añadimos la funcionalidad de mostrar nuestro “cuerpoCitas” el cual podemos ver en la figura de la página 41. Figura 55. Función de carga de calendario y lista de eventos 64 65 Anexo – Manual de Usuario Este anexo ofrece una guía de uso para facilitar el aprendizaje de la aplicación a usuarios finales. Abordaremos esta guía desde los dos roles que existen en la aplicación. Cliente Acceso a la web Para acceder a la web necesitamos buscar la dirección de la web en el buscador que utilicemos. Ingresamos el siguiente enlace en la barra de búsqueda: felixdd666.pythonanywhere.com Navegación Una vez dentro de la web podemos comenzar con la navegación. La página principal de la web se divide en: Figura 57. Anexo - Portada Web 66  La podología Esta es la sección introductoria a la página, se accede haciendo scroll o bien pulsando sobre el botón “Quiero saber más” de la portada. Contiene información básica sobre qué es la podología y a quién va dirigida.  Tu podólogo En esta sección se puede ver la evolución profesional del podólogo, desde sus comienzos en la Universidad de Málaga hasta su actividad actual. En la figura 47 tenemos dos opciones de intervención. Podemos pulsar sobre la foto de “Mejorando para ti” para ver la formación complementaria del podólogo o también podemos pulsar sobre el botón “Descargar CV” para conseguir una copia del currículum de nuestro podólogo. Figura 58. Anexo - Sección “La podología” 67 Figura 59. Anexo - Sección “Tu podólogo” - 1 Figura 60. Anexo - Sección “Tu podólogo” - 2 68 Figura 61. Anexo – Vista formación complementaria Figura 62. Anexo – Descarga de curriculum 69  Servicios En esta sección se cuenta con un escaparate donde están los distintos servicios que podemos contratar. Si pasamos el ratón por encima de cada uno se iluminará y verá el nombre de cada uno. Si pulsamos iremos a la vista de cada uno de ellos con una explicación. A continuación se muestra una figura de cada una de las vistas de los servicios. Figura 63. Anexo – Sección Servicios 70 Figura 64. Anexo – Vista del servicio de quiropodología Figura 65. Anexo – Vista del servicio de biomecánica 71 Figura 66. Anexo – Vista del servicio de podología infantil Figura 67. Anexo – Vista del servicio de ortopodología 72 Figura 68. Anexo – Vista del servicio de pie de riesgo Figura 69. Anexo – Vista del servicio de cirugía podológica 73  Blog En esta sección los clientes podrán ver los posts que el podólogo haya creado en su panel de administración para compartir con ellos. El podólogo podrá compartir artículos, noticias, y todo lo que le parezca útil y beneficioso para sus clientes. En la página principal solo se podrán ver un número definido de posts, para no sobrecargarla. Podemos elegir entre ver todos los posts clasificados en categorías, o bien, ver cada post en particular, pulsando sobre su nombre o sobre el botón. A continuación se muestran las figuras con estas dos posibilidades. Figura 70. Anexo – Sección del Blog Figura 71. Anexo – Vista de post en solitario 80  Gestión de clientes En este apartado se aborda la funcionalidad de la gestión de los clientes del podólogo. Con esta herramienta podremos consultar nuestra lista de clientes, crear clientes nuevos, modificar los clientes ya existentes o borrar los que necesitemos. Accedemos a la lista de cliente pulsando sobre el enlace de “clientes” Actualmente solo hay un cliente en la aplicación, vamos a crear otro. Pulsamos en el botón “Add” y nos llevará al formulario de creación de clientes. Figura 83. Anexo – Lista de clientes Figura 84. Anexo – Formulario de creación de clientes - 1 81 Una vez rellenados todos los campos pulsaremos en “save” y entonces veremos la lista de clientes con nuestro nuevo cliente ya creado. Si queremos modificar la información de cualquiera de los clientes no tenemos más que pulsar sobre uno de ellos y nos aparecerá de nuevo el formulario con los campos listos para ser editados. Figura 85. Anexo – Formulario de creación de clientes - 2 Figura 86. Anexo – Formulario de creación de clientes - 2 82  Seguimiento de las visitas Esta funcionalidad engloba todo lo referente al seguimiento de los pacientes mediante la creación de visitas. El podólogo será el encargado de crear una visita cada vez que un cliente acuda a él. Si pulsamos sobre el enlace “visitas” se nos abrirá la ventana que contiene la lista de todas las visitas, ordenadas por fecha y filtradas por nombre o apellidos de los clientes. En este ejemplo solo tenemos una visita creada para el cliente Félix Durán, creemos otra para este cliente. Pulsamos en “add” y rellenamos los campos. Figura 87. Anexo – Listado de visitas Figura 88. Anexo – Formulario de creación de visitas 83 Una vez rellenados los campos, pulsamos en el botón “save” para guardar los cambios y observamos en la lista de visitas que se ha creado correctamente. Desde esta lista podemos también seleccionar vistas para borrarlas o entrar en ellas para modificar o consultar sus datos si lo necesitamos. Figura 89. Anexo – Visita creada 84  Recepción y consulta de mensajes Cuando un cliente accede a la web, tiene la posibilidad de mandarle un mensaje al podólogo mediante el formulario de contacto de la web. Este mensaje se le mandará automáticamente al email personal del podólogo, pero además, se guardará en la aplicación para tener todos los mensajes ordenador y almacenados para su posterior gestión y consulta. Ya hemos visto en la primera parte de este anexo, dedicada al rol cliente, cmo estos pueden acceder al formulario para escribir mensajes. Veamos ahora cómo se ven estos mensajes en el panel de administración. Como se puede observar, tenemos actualmente tres mensajes en la aplicación, entre ellos, el que se escribió en el apartado anterior en la especificación del uso del formulario de contacto. Además de consultarlos podemos modificarlos o eliminarlos si lo necesitamos.  Gestión del blog Desde este panel de administración podemos generar contenido que será publicado en la web en la sección de blog. Desde la sección del Blog en el panel principal, podemos acceder tanto a las categorías como a los post. Los post están clasificados en categorías, con lo cual necesitaremos añadir dichos post a una categoría concreta. Veamos cómo hacerlo. Primero entramos en “categorías” y creamos una categoría nueva. Figura 90. Anexo – Listado de mensajes 85 Figura 93. Anexo – Listado de posts Podríamos usar las categorías ya creadas, pero para ver cómo se hace vamos a crear una nueva. Accedemos al panel de creación de categorías e ingresamos el nombre de la categoría a crear. Una vez creada nuestra nueva categoría, nos dirigimos al panel de post de la aplicación. Entramos en el formulario de creación de posts pulsando sobre el botón “add” y rellenamos los campos. Figura 91. Anexo – Listado de categorías Figura 92. Anexo – Creación de una categoría 86 Figura 94. Anexo – Creación de un post Figura 95. Anexo – Post almacenado Figura 96. Anexo – Post publicado Pulsamos guardar y observamos que el post se guarda en la lista de post y además se publica en la web. 87 Figura 96. Anexo – Autorización de Google  Gestión del calendario Para acceder a la vista de gestión de calendario simplemente debemos pulsar sobre el botón que dice “gestionar calendario” en el panel principal. Lo primero que nos aparecerá será un botón de autorización para que la aplicación pueda acceder al calendario de Google y muestre los eventos. Pulsamos sobre el botón y nos aparecerá la ventana de identificación de Google. 88 Figura 98. Anexo – Identificación en Google Figura 99. Anexo – Vista del calendario Una vez nos identifiquemos accederemos a la siguiente vista. 89 Figura 100. Anexo – Evento añadido Si queremos crear un nuevo evento simplemente tenemos que completar los datos del formulario y pulsar el botón crear. Esto recargará la página e insertará el evento en el calendario de Google para poder verlo desde cualquier dispositivo que tenga vinculado dicho calendario.