Autor: Iñigo Ezcurdia Aguirre. Fecha: 26/08/2014 [ORLA ONLINE] Memoria de proyecto (Beca Colaboración 2014)

Transcripción

1 Autor: Iñigo Ezcurdia Aguirre Fecha: 26/08/2014 [ORLA ONLINE] Memoria de proyecto (Beca Colaboración 2014)

2 ÍNDICE INTRODUCCIÓN... 2 OBJETIVOS... 3 Pragmáticos... 3 Académicos... 3 ANÁLISIS Y DISEÑO... 4 Planificación... 4 Patrón MVC... 5 Diagrama de acciones... 6 Diagrama ER y Base de Datos... 7 Diseño Visual... 8 IMPLEMENTACIÓN Primeros pasos, IDE y gestión de configuración El Código MVC en PHP Base de Datos Validación de datos Librerías ajenas Houston, tenemos un problema! Codificación de caracteres Fotografías Visualización de Orlas RESULTADO CONCLUSIONES

3 INTRODUCCIÓN Mi nombre es Iñigo Ezcurdia, soy alumno de 4º curso de Ingeniería Informática en la Universidad Pública de Navarra. Este verano he tenido la oportunidad de optar a una Beca de Colaboración y en este documento pretendo plasmar la experiencia así como informar del proceso de elaboración del proyecto propuesto y de las diferentes herramientas empleadas para alcanzar el objetivo fijado. Comenzaré exponiendo el proyecto propuesto, los objetivos fijados y las motivaciones para su realización. A continuación expondré lo realizado durante la fase de análisis y diseño donde se dota de un esqueleto básico al servicio y se establecen unas pautas de trabajo. Más tarde informaré sobre la fase de implementación y los problemas surgidos (y solventados), para terminar mostrando los resultados finales. Por último haré una valoración del trabajo realizado y de lo que este trabajo me ha aportado. 2

4 OBJETIVOS Pragmáticos Año tras año cientos de estudiantes se gradúan en sus respectivos estudios, terminan cursillos, o finalizan actividades deportivas y desean realizar una orla con sus compañeros para recordar el esfuerzo realizado juntos. Organizar a grandes grupos para realizarse la foto y acudir al mismo comercio para realizar la orla cuesta horas de organización y multitud de dolores de cabeza. Sin mencionar el coste económico que suponen los desplazamientos, fotógrafos, imprenta etc Por ello mi objetivo es simplificar todo este proceso transformándolo en algo sencillo, gratuito y desde la comodidad de casa. La idea consiste en crear una página online en la que los usuarios puedan registrarse para crear sus propias orlas y/o inscribirse en otras ya existentes. Además se ofrecerían opciones de personalización como selección del tipo de orla y de los integrantes que esta refleje en su impresión final. También se ofrecerá la opción de proteger el acceso a las orlas para garantizar la seguridad y crear orlas exclusivas si así de desea. Académicos Como estudiante de Ingeniería Informática este proyecto me va a ayudar a poner en práctica mis conocimientos y ampliarlos. Familiarizarme y aprender más sobre herramientas como el IDE NetBeans, el funcionamiento de WAMP y sus herramientas integradas y la gestión de configuración y manejo de repositorios como BitBucket mediante mercurial y SourceTree. También me servirá para poner en práctica el patrón MVC (Modelo-Vista-Controlador) y profundizar en mi aprendizaje sobre lenguajes como HTML, CSS, JavaScript y PHP. Durante la fase de análisis y diseño también tendré la oportunidad de poner en práctica la gestión de proyectos, creación y manejo de bases de datos etc. 3

5 ANÁLISIS Y DISEÑO Esta primera fase comenzó antes de ser adjudicada la beca, al desarrollar la memoria previa de presentación del proyecto. Planificación Por aquel entonces ya identifiqué las posibles tareas en las que podría dividir el proyecto y la dedicación temporal que podría dedicarles según su complejidad y mis conocimientos. Realicé un diagrama de Gantt que mostrase, de manera general, las distintas tareas y el régimen de dedicación. Por desgracia una malinterpretación y posterior modificación de las fechas que abarcaba el proyecto me obligaron a hacer cambios en la planificación. 4

6 Patrón MVC El patrón Modelo-Vista-Controlador me pareció muy versátil y potente para desarrollar la herramienta deseada, además resulta muy fácil de aplicar con PHP, HTML y MySql. El modelo MVC pretende mantener separados los datos, interfaz de usuario y lógica de negocio, logrando así cierta modularización para facilitar las modificaciones en alguno de dichos aspectos sin afectar apenas a los otros. Modelo: ES LA PARTE ENCARGADA DE ALMACENAR LOS DATOS Y DE SUS TRANSFORMACIONES. En este caso el modelo está constituido por una base de datos en MySql y los archivos de imagen correspondientes a las fotos de los usuarios. Será el controlador el encargado de consultar al modelo los datos y solicitar su modificación. Vista: SE ENCARGA DE LA PRESENTACIÓN VISUAL, MUESTRA LOS DATOS AL USUARIO Y ACTÚA COMO INTERFAZ DE INTERACCIÓN CON ESTE. Nuestra vista se constituye por distintas plantillas html que se rellenan según los datos servidos por el modelo. Mediante CSS se les otorga un diseño mucho más atractivo. Controlador: COMPONE LA LÓGICA DE NEGOCIO, SE ENCARGA DE CONSULTAR AL MODELO LOS DATOS PARA ENTREGÁRSELOS A LA VISTA, RECOGER LAS INTERACCIONES CON EL USUARIO Y DARLES RESPUESTA ETC En este proyecto los scripts PHP conforman el controlador, recogiendo la interacción solicitada por el usuario mediante GET y POST atendiéndolas debidamente interactuando con los datos del modelo y dándoles respuesta mediante la vista. Modelo <Consultas/modificaciones Datos> Controlador Datos> Vista Usuario 5

7 Diagrama de acciones Para tener una visión global y teniendo en cuenta la estructura MVC en PHP realicé un diagrama que mostrase las diferentes pantallas e interacciones posibles del servicio. Además sirvió como concepto visual de lo que quería alcanzar. 6

8 Diagrama ER y Base de Datos Como se puede observar en el diagrama ER la base de datos resulta muy sencilla y pequeña. Con tan solo 3 tablas es suficiente. En la siguiente figura se muestra su estructura final: 7

9 Diseño Visual Con mis escasos conocimientos de diseño artístico he intentado darle un aspecto limpio, atractivo y lo más intuitivo posible. Para ello me he servido principalmente de Bootstrap, que ofrece multitud de clases y acciones predefinidas muy útiles. Para la visualización de botones, formularios y su validación, animaciones y transiciones, herramientas responsive Mediante CSS, y con la ayuda de Paletton para la selección de colores le he intentado dar un tema azul claro agradable a la vista. Fondos de orlas, banners, favicon etc han sido realizados con Photoshop. A continuación se muestran unas capturas que muestran algunos de los detalles del apartado visual. Validación de campos Adaptable a tamaños de pantalla (móvil-responsive) y Glyphicons representativos 8

10 Popups informativos y de confirmación de acciones Temática azul clara con instrucciones claras 9

11 IMPLEMENTACIÓN Manos a la obra! Con la idea clara y la estructura definida toca hacer realidad el servicio. Primeros pasos, IDE y gestión de configuración Por familiaridad y preferencias personales he estado empleado NetBeans como IDE de trabajo, me colorea las diversas sintaxis, me avisa de ciertos errores y me hace sugerencias para completar parte del código y me permite agrupar líneas de código. (Si bien podría haber usado cualquier editor de texto plano ) Para llevar realizar backups del código y llevar un histórico del trabajo he empleado un repositorio alojado en BitBucket y como gestor de repositorios he empleado SourceTree porque me parece una herramienta muy intuitiva y fácil de usar además de tremendamente útil. 10

12 El Código La mayoría del código está comentado para facilitar su comprensión, sin embargo a continuación haré ciertas aclaraciones y comentaré algunas peculiaridades. MVC en PHP El archivo index.php corresponde al controlador. Lo primero que hace es incluir los PHP de vista y modelo, y recoge las variables de acción a realizar. Se trata principalmente de un IF que discierne mediante variables de sesión si el visitante ha iniciado sesión o no, de manera que a un visitante sin sesión iniciada le mostramos la portada (con opciones de login y registro) y le impedimos el acceso a acciones reservadas para usuarios con sesión iniciada. A los visitantes con sesión iniciada les bypasseamos la portada y acceden directamente al panel de control, de este modo pueden mantener sus sesiones iniciadas en el navegador hasta que ellos decidan hacer log-out. 11

13 El archivo vista.php contiene el código encargado de formar el html que se mostrará al usuario según la información recibida del modelo. Para ello emplea diferentes plantillas almacenadas en la carpeta templates y rellenará la información solicitada (marcada generalmente entre almohadillas). Todas las vistas ofrecidas a usuarios con sesión iniciada, a excepción de la visualización final de la orla, cargan la plantilla plain.html que contiene la estructura básica de la web, barra de navegación, css etc Posteriormente le rellena la etiqueta ##contenido## con el contenido apropiado para la acción solicitada por el usuario Todas las funciones de vista.php están nombradas de manera que empiecen con una V minúscula y continuadas con un nombre descriptivo, para poder ser identificadas fácilmente. El archivo modelo.php contiene las funciones necesarias para el acceso a los datos, se encarga de recuperar los datos de la BBDD, de hacer las validaciones por parte del servidor, y de hacer modificaciones sobre las BBDD o fotos de usuario cuando sea necesario. Estas funciones se nombran de forma similar a lo anteriormente expuesto, comienzan con un M minúscula y continúan con un nombre descriptivo. Devuelven conjuntos de datos resultantes de consultas SQL o números que indican si la acción se ha realizado con éxito o resulta algún error. 12

14 Base de Datos La base de datos expuesta en la fase de diseño se ha construido mediante la propia interfaz de PhpMyAdmin. El script sql de creación e importación de datos se puede encontrar en la carpeta Analisis_Disenio con el nombre BBDD.SQL. Las fotos de los usuarios no están ligadas a la base de datos! Se accede a ellas deduciendo su ruta a partir del ID de usuario y de su Nick. Hay que tener esto en cuenta a la hora de modificar la base de datos por motivos de backup etc El acceso a la base de datos mediante PHP se hace al comienzo de cada función del modelo que lo requiera, se especifica la codificación a UTF-8 y se comprueba que la conexión se ha realizado con éxito: Usuario: root Password: oocolab2014 BBDD: orlaonline Para evitar posibles problemas de inyección SQL se emplean sentencias preparadas en las consultas conflictivas. De este modo las consultas no son simples cadenas de texto en las que alguien malintencionado pueda meter mano, sino sentencias ya definidas. Las contraseñas y correos de los usuarios se almacenan en texto plano sin seguridad ni hashear. (Todavía no he cursado la asignatura de programación segura y prefería dedicar el tiempo a otros aspectos) 13

15 Validación de datos Los usuarios pueden introducir datos en multiples ocasiones, su nick, nombre apellidos, correo, nombre de orlas, foto etc Tanto para informar a los más despistados como para evitar las acciones de los más maliciosos he visto necesario validar todas estas introducciones de datos, por parte del cliente y del servidor. En el cliente En el cliente la mayoría de estas validaciones se realiza mediante la misma definición de los formularios que se encargan de recoger los datos y con la ayuda de bootstrap. Por ejemplo la siguiente línea especificará la introducción de un campo que no podrá ser vacío, con una longitud máxima de 60 caracteres y además el texto introducido debe ser una dirección de correo válida. En otros casos también me valgo de javascript para ciertas validaciones. Por ejemplo al pedir que se repita la contraseña introducida al registrarse o al crear una orla privada. En estos casos se comprueba que ambas contraseñas coinciden mediante javascript, si no lo hacen se advierte al usuario y se imposibilita el envió del formulario hasta que se corrija. 14

16 En el servidor En el servidor se realizan varias validaciones. Comprobar que no hay campos vacíos o demasiado largos: Comprobar que no incluyen caracteres prohibidos: Entre otras como verificar que la petición de acceso a una orla proviene de alguien realmente inscrito en esta, comprobar los formatos y tamaños de las fotos subidas etc Librerías ajenas Me he ayudado de las siguientes librerías javascript ajenas para realizar ciertas funciones (en alguna he realizado pequeñas modificaciones): 1. Buscador.js: Para la búsqueda y filtrado de orlas. 2. Html2Canvas.js: Para la transformación de la orla personalizada en una imagen imprimible. 3. Sorttable.js: Para ordenar las tablas según sus diferentes campos, sin necesidad de recargar la página por completo. 15

17 Houston, tenemos un problema! Durante el desarrollo de cualquier proyecto informático siempre surgen ciertos problemas inesperados. A continuación se muestran algunos de los acontecidos durante este desarrollo. Codificación de caracteres Que fácil sería todo si solo empleáramos caracteres de la A a la Z y del 0 al 9 Pero resulta que nuestro propio idioma cuenta con caracteres especiales como la Ñ, las tildes, las diéresis etc Y no solo nuestro idioma, multitud de idiomas contienen otros caracteres especiales, presentes en los nombres y apellidos de las personas. No podemos excluir a Íñigos, Begoñas, s y Asbjörns de nuestro servicio por un motivo tan banal como la codificación de caracteres Por ello ha sido necesario especificar dicha codificación a UTF-8 que permite el uso y correcta visualización de estos caracteres. Pero hacer esto no es tan sencillo como puede parecer a simple vista. Hay que realizar varios cambios en el código y estructura de los datos para que todas las partes de nuestro proyecto empleen la codificación UTF-8 y se comuniquen entre ellas y con el usuario con dicha codificación. En el HTML hay que notificar al navegador con la siguiente etiqueta en HEAD: Nuestra base de datos deben usar el cotejamiento adecuado, y los campos que deban almacenar información con caracteres especiales también deben tener el formato adecuado: Ya hemos conseguido que el 16

18 navegador esté al tanto de la codificación UTF8 y que la base de datos trabaje con ella pero nuestro código en PHP también tiene que tenerlo en cuenta! Así que los especificamos al comienzo del modelo: Y cada vez que establecemos conexión con la base de datos establecemos que como clientes vamos a trabajar también con UTF-8: Fotografías No todos los usuarios confían en subir su fotografía nada mas registrarse si no que prefieren esperar a comprobar que el servicio es legítimo, además las fotografías pueden ser de múltiples formatos y no cumplir con la proporción dada. A continuación explico el proceso seguido para tratar las fotografías. Al registrarse un usuario tiene dos opciones, subir directamente o no una fotografía. En caso de que no suba una fotografía o la subida de esta se vea interrumpida por algún error lo que se hace es adjudicarle la imagen por defecto duplicando la imagen noimage.jpg y renombrando el duplicado a IDusuarioNickUsuario.jpg En caso de que el usuario decida subir una fotografía y se realice la acción con éxito (cumple todos los requisitos de formato y tamaño requeridos y se sube correctamente) lo que se hace es: 1. Moverla de la carpeta temporal a la carpeta de avatares 2. Cambiarle el tamaño a 360x480 pixels 3. Transformarla a formato jpg 4. Si la original tenía extensión JPG será sobrescrita, si no la borramos. 17

19 Visualización de Orlas A la hora de visualizar las orlas han surgido 2 inconvenientes... El primero es que una orla puede tener muy pocos integrantes, ya sea porque está recién creada o porque el usuario así lo ha querido al personalizarla En estos casos quedaría una orla prácticamente vacía y bastante fea. Así que mediante CSS y dependiendo del nº de integrantes seleccionados las fotografías y nombres varían de tamaño para adaptarse al mayor área de la orla posible, también varían las separaciones entre fotografías o los saltos de línea entre nombre y apellidos. El 2º inconveniente surge a la hora de visualizar la orla como imagen final. Para ello lo que se hace es transformar todo el HTML de al orla a un Canvas que se muestra como imagen png. Esto resulta funcional en Firefox e InternetExplorer, pero Chrome no era capaz de hacerlo correctamente, resultando siempre el siguiente error: Tras investigar el asunto resulta que se debe ciertas restricciones de seguridad que aplica Chrome al correr desde un servidor local, al poner el servicio en marcha y online no mostrará este problema y funcionará como se espera. 18

20 RESULTADO Una imagen vale más que mil palabras, y un vídeo más que mil imágenes. A continuación dejo varios videos demostrativos de las distintas partes del proyecto ya operativo. 1-Registro/Sign-up 2-Acceso/Log-in 3-Diseño Responsive y Perfil 4-Inscripción en Orlas 5-Creación de una Orla 6-Difusión del servicio 7-Desuscripción y borrado de Orlas 8-Personalización y visualización de una Orla 9-Seguridad 19

21 CONCLUSIONES Realizar este proyecto ha sido interesante y me ha aportado varias experiencias remarcables. La primera es la posibilidad de ganar un dinero extra (si todo va bien). Puede sonar un tanto frívolo, pero esta remuneración ofrecida me ayudará a continuar con los estudios sin apuros económicos. Por otra parte, tal y como me esperaba al fijar unos objetivos académicos, ha servido para poner en práctica muchos de los conocimientos teóricos adquiridos durante el curso, desde el diseño y manejo real de bases de datos a la correcta gestión de un pequeño proyecto, modificaciones del DOM con javascript o el uso de diferentes herramientas o recursos como bootstrap. A parte de los problemas encontrados durante el desarrollo hay tantos otros a los que enfrentarme me ha otorgado una experiencia extra para futuros proyectos, he conocido nuevas herramientas y he aprendido dónde y cómo empezar a informarme sobre temas concretos al afrontar ciertos inconvenientes. Además creo que el servicio final puede ser realmente muy útil para cientos de alumnos de distintas universidades de todo España. Si bien con más tiempo le haría mejoras como añadir más fondos de orlas (o dar a los usuarios la opción de subir las suyas propias), un editor de fotos para redimensionar y recortar las fotos desde la misma web, hashear las contraseñas de los usuarios, añadir fotos de profesores o la opción de enviar directamente la orla a una copistería asociada para realizar una impresión profesional. Considero un aspecto negativo que se haya realizado el proyecto becado de manera individual, creo que habría sido mucho más motivante y enriquecedor realizar algún proyecto junto a mas compañeros, potenciando así la comunicación y desarrollando nuestras habilidades de organización, además podríamos aprender mucho unos de otros. 20

22 21