DESARROLLO DE UN PORTAL WEB DE COMERCIO ELECTRÓNICO SEGURO (Development of a secure e-commerce site)

Transcripción

1 Proyecto Fin de Carrera DESARROLLO DE UN PORTAL WEB DE COMERCIO ELECTRÓNICO SEGURO (Development of a secure e-commerce site) Para acceder al Titulo de INGENIERO EN INFORMÁTICA Autor: Alberto Perojo Parás Septiembre

2 INGENIERÍA EN INFORMÁTICA CALIFICACIÓN DEL PROYECTO FIN DE CARRERA Realizado por: Alberto Perojo Parás Director del PFC: José San Juan Gutiérrez Director ponente: Carlos Blanco Bueno Título: Desarrollo de un portal web de comercio electrónico seguro Title: Development of a secure e- commerce site Presentado a examen el día: para acceder al Título de INGENIERO EN INFORMÁTICA Composición del Tribunal: Presidente (Apellidos, Nombre): González Harbour, Michael Secretario (Apellidos, Nombre): Martínez Fernández, María del Carmen Vocal (Apellidos, Nombre): Menéndez de Llano Rozas, Rafael Vocal (Apellidos, Nombre): Sánchez Barreiro, Pablo Vocal (Apellidos, Nombre): Sanz Gil, Roberto Este Tribunal ha resuelto otorgar la calificación de:... Fdo.: El Presidente Fdo.: El Secretario Fdo.: Vocal Fdo.: Vocal Fdo.: Vocal Fdo.: El Director del PFC

3 Índice de contenido 1 INTRODUCCIÓN Y OBJETIVOS ESTADO DEL COMERCIO ELECTRÓNICO OBJETIVOS HERRAMIENTAS Y MÉTODOS ESTRUCTURA Y ESTILOS PROGRAMACIÓN WEB Pasarela de pago PRESENTACIÓN DEL PROBLEMA Y ANÁLISIS DE REQUISITOS ANÁLISIS DE REQUISITOS Requisitos funcionales Requisitos no funcionales DIAGRAMA DE CASOS DE USO PLANTILLAS DIAGRAMAS DE SECUENCIA DISEÑO DE LA ARQUITECTURA DEL SISTEMA Interfaces externas DIAGRAMA DE COMPONENTES Operaciones interfaz presentación negocio Operaciones interfaz negocio datos DISEÑO DETALLADO DE SISTEMA DIAGRAMA DE CLASES DEL SISTEMA DIAGRAMA DE ESTADOS ESQUEMA DE LA BASE DE DATOS IMPLEMENTACIÓN DE LA SOLUCIÓN PROPUESTA IMPLEMENTACIÓN DE LA CAPA DE DATOS Script de creación de la base de datos IMPLEMENTACIÓN DE LA CAPA DE NEGOCIO IMPLEMENTACIÓN DE LA CAPA DE PRESENTACIÓN Estructura Presentación y estilos Demostración del trámite de un pedido EVALUACIÓN Y PRUEBAS Productos y unidades Pedido CONCLUSIONES TRABAJOS FUTUROS DEMO DEL SITIO WEB BIBLIOGRAFÍA CONTENIDO DEL CD I

4 Índice de figuras FIGURA 1. ESQUEMA COMPARATIVO HTML, CSS Y JAVASCRIPT... 4 FIGURA 2. FLUJO DE CONEXIÓN AJAX... 4 FIGURA 3. FUNCIONAMIENTO GENERAL DE UNA PASARELA DE PAGO... 5 FIGURA 4. DIAGRAMA GENERAL DE CASOS DE USO DEL SISTEMA FIGURA 5. DIAGRAMA DE SECUENCIA DEL CASO "TRAMITAR PEDIDO" FIGURA 6. ESQUEMA DE DISEÑO DE UNA ARQUITECTURA DE 3 CAPAS FIGURA 7. CONTENIDO DE CADA NIVEL EN UNA ARQUITECTURA DE 3 CAPAS FIGURA 8. DIAGRAMA DE COMPONENTES DEL SISTEMA FIGURA 9. DIAGRAMA DE COMPONENTES INTERFAZ PRESENTACIÓN - NEGOCIO FIGURA 10. DIAGRAMA DE COMPONENTES INTERFAZ NEGOCIO - DATOS FIGURA 11. DIAGRAMA DE CLASES DEL SISTEMA FIGURA 12. DIAGRAMA DE ESTADOS DEL CASO "TRAMITAR PEDIDO" FIGURA 13. ESQUEMA GENERAL DE LA BASE DE DATOS FIGURA 14. ESQUEMA DE FUNCIONAMIENTO DE LA PASARELA DE PAGO FIGURA 15. ESQUEMA DE LA ESTRUCTURA DEL SITIO WEB FIGURA 16. CAPTURA DEL CARRITO DE LA COMPRA FIGURA 17. CAPTURA DEL CARRITO DE LA COMPRA FIGURA 18. CAPTURA DE LA INTERFAZ DE IDENTIFICACIÓN/REGISTRO FIGURA 19. CAPTURA DE LA PANTALLA DE CONFIRMACIÓN DE DATOS DE ENVÍO FIGURA 20. CAPTURA DEL RESUMEN DEL PEDIDO FIGURA 21. CAPTURA DE LA INTERFAZ DE SELECCIÓN DE FORMA DE PAGO FIGURA 22. CAPTURA DE LA INTERFAZ DE OPERACIÓN DE PAGO FIGURA 23. CAPTURA DE LA SECCIÓN "MI CUENTA" FIGURA 24. DETALLE DE UN PEDIDO DEL HISTORIAL FIGURA 25. CASO DE PRUEBA PARA EL DIAGRAMA DE PEDIDO II

5 Índice de tablas TABLA 1. REQUISITOS FUNCIONALES... 8 TABLA 2. REQUISITOS NO FUNCIONALES... 9 TABLA 3. PLANTILLA CASO "FINALIZAR COMPRA" TABLA 4. PLANTILLA CASO "TRAMITAR PEDIDO" TABLA 5. SQL CREACIÓN TABLA 'ARTICULOS' TABLA 6. SQL CREACIÓN TABLA 'CERVEZAS' TABLA 7. SQL CREACIÓN TABLA 'CONTACTOS' TABLA 8. SQL CREACIÓN TABLA 'MM_TPV_ARTICULOS_PEDIDO' TABLA 9. SQL CREACIÓN TABLA 'MM_TPV_PEDIDOS' TABLA 10. SQL CREACIÓN TABLA 'MM_TPV_RESPUESTAS' TABLA 11. SQL CREACIÓN TABLA 'PROVINCIAS' TABLA 12. SQL CREACIÓN TABLA 'USUARIOS_WEB' TABLA 13. CÓDIGO PHP FUNCIÓN CARRITO_TO_ARRAY() TABLA 14. CÓDIGO JAVASCRIPT FUNCIÓN PEDIDO AJAX TABLA 15. CÓDIGO PHP PARA MOSTRAR RESUMEN DEL PEDIDO TABLA 16. CAMPOS DEL FORMULARIO Y CÁLCULO DE LA FIRMA MEDIANTE SHA TABLA 17. CÓDIGO PHP PARA EL CÁLCULO DE LA FIRMA TABLA 18. CÓDIGO HTML DE LA ESTRUCTURA DEL SITIO TABLA 19. CÓDIGO CSS DEL CARRITO III

6 Resumen El comercio electrónico crece de manera exponencial y cada vez más empresas, tanto grandes como pequeños comercios, deciden llevar su negocio a la web. Además, con la globalización del acceso a internet se abre un nuevo mercado de clientes y oportunidades. Este proyecto se ha realizado en la empresa miramira software y consiste en el desarrollo completo de un sistema web de comercio electrónico seguro para un cliente mayorista de importación de cerveza. El sistema ha de ofrecer un catálogo de los productos a la venta, con información asociada a cada uno de ellos. Dispone también de administración de usuarios, contacto directo con la empresa, gestión de pedidos y pago de los mismos por internet de forma segura. Además, se han implementado opciones de conexión con redes sociales. Los objetivos del proyecto son los siguientes: - Especificación de requisitos, diseño arquitectural y diseño detallado del sistema. - Implementación del sistema, incluyendo administración de usuarios (registro, logging y acceso a perfil), gestión de pedidos y pasarela de pagos con protocolo seguro. - Diseño, maquetación y programación del sitio web a nivel funcional. Los lenguajes de programación utilizados para el desarrollo han sido los siguientes: - PHP y Javascript/AJAX: programación web. - MySQL: gestión de base de datos. - HTML y CSS: maquetación web. Y el software requerido: MySQL y el gestor phpmyadmin, Adobe Dreamweaver y Photoshop CS5. Palabras clave Comercio electrónico, tienda online, pasarela de pago, sitio web, transferencias seguras, desarrollo web IV

7 Abstract Electronic commerce is growing exponentially and more and more companies, either big or small, decide to put their business on the web. Besides, globalization of internet access opens a new customers' market. This project has been executed in a company called miramirasoftware and consists in a complete development of a secure e- commerce site for a wholesaler client who imports beer. The system must offer a catalog of the products, with information associated to each one. It also provides user administration, direct contact with the company, order management and secure payment. Moreover, social media connections are available for the users. The objectives of the project are: - Requirements analysis, architectural design and detailed design of the system. - System implementation, including user administration (registration, logging and profile access), order management and payment gateway with a secure protocol. - Design, layout and programming of the website. The programming languages used in the development of this project are: - PHP and Javascript / AJAX: web programming. - MySQL: Database management. - HTML and CSS: web layout. And the software needed: MySQL phpmyadmin Manager, Adobe Dreamweaver and Photoshop CS5. Keywords Electronic commerce, online shopping, payment gateway, website, secure transfers, web development V

8 Introducción 1 Introducción y objetivos Este proyecto nace de la necesidad del cliente de expandir su negocio mas allá del ámbito local, pudiendo de esta forma darse a conocer en mayor cantidad de lugares ampliando así su cuota de mercado. Tiene como finalidad última la creación de un sistema de comercio electrónico totalmente autónomo, automatizado y seguro, para la venta de cervezas de importación. Se requiere una interfaz sencilla y usable de cara al usuario final, que a su vez cumpla ciertos patrones de seguridad en el ámbito de las transferencias electrónicas. Para desarrollar el sistema completo se necesitan tres elementos básicos: La interfaz, es decir, la propia página web donde se le presentará al usuario la tienda online con toda su funcionalidad. Una capa donde realizaremos la programación web del sitio a nivel funcional: gestión de pedidos, usuarios, pagos, etc. Y por último, una base de datos que proveerá y almacenará la información que necesitemos. Nuestro problema encaja perfectamente con la solución de una arquitectura de tres capas: presentación, negocio y datos. La principal ventaja que nos ofrece la separación en niveles es que independizamos una capa de otra de tal forma que si algún día se quiere, por ejemplo, desarrollar una interfaz adaptada a móviles o tablets, simplemente tendríamos que implantarla aprovechando los métodos de la capa de negocio. Las plataformas de comercio electrónico actuales disponen de una pasarela de pago para gestionar las transferencias económicas recibidas mediante las ventas en el sitio web. Este sistema, también conocido como TPV Virtual (Terminal de Punto de Venta Virtual), es usado por bancos o cajas de ahorros porque ofrece una capa de seguridad que garantiza transacciones totalmente fiables a través de Internet. Por tanto, se implementa en el sistema una pasarela de pagos que se encarga de proveer una conexión segura entre nuestro comercio y el servidor de la entidad bancaria. La información necesaria para su desarrollo es proporcionada por CECA (Confederación Española de Cajas de Ahorros). 1

9 Introducción 1.1 Estado del comercio electrónico También conocido como e- commerce (electronic commerce, en inglés), consiste en la compra y venta de productos o servicios a través de medios electrónicos, como pueden ser Internet, u otras redes informáticas. La mayor parte del comercio consiste en la compra- venta de productos físicos, o servicios, entre personas y empresas. Sin embargo, se está incentivando cada vez más la adquisición de artículos virtuales (software, aplicaciones) o servicios de acceso a contenido privilegiado de un sitio web, un programa, etc. Según un estudio de la CMT (Comisión del Mercado de las Telecomunicaciones), el volumen total de facturación del comercio electrónico alcanzó en el tercer trimestre de 2011 los 2421,8 millones de euros. En España, el volumen de negocio de las compras online en tiendas nacionales supuso una facturación de 1053 millones de euros, cifra que apunta la importancia del comercio electrónico en nuestra sociedad. 1.2 Objetivos Crear una plataforma de comercio electrónico segura y automatizada, que exija la mínima intervención por parte del administrador de la misma. Visualización del catálogo online de los productos de forma clara y directa de cara al usuario, aportando también detalles técnicos de cada uno. Alta usabilidad a la hora de realizar pedidos y manejabilidad para gestionar los productos escogidos. Comunicación directa comprador- cliente para cualquier consulta, sugerencia o duda. El flujo de trabajo seguido durante el proyecto ha sido el siguiente: En primera instancia, se especifican los objetivos y se realiza el análisis de requisitos tras la entrevista con el cliente. En una segunda fase, empezamos a pensar como estructurar la información, desarrollando el diagrama conceptual y el esquema de la base de datos. Se realiza un prototipo de la aplicación web y se empieza a maquetar hasta dejarlo finalizado a falta de algunos detalles. Se concierta otra reunión con el cliente para mostrarle el prototipo y discutir posibles cambios. Entonces, empezamos a trabajar en la funcionalidad del sitio, desarrollando el código que conformará la tienda online. Una vez finalizado, se realizan distintos tipos de tests y pruebas para comprobar el correcto funcionamiento del sistema. Se tiene otra reunión con el cliente para dar los últimos retoques y enseñarle e instruirle en el funcionamiento del sistema. 2

10 Herramientas y métodos 2 Herramientas y métodos El proyecto tiene dos enfoques bien diferenciados en cuanto al desarrollo, por un lado está el diseño de la estructura y la presentación del sitio, y por otro lado la programación web. Procedemos a comentar las herramientas y métodos que se utilizan en cada uno de ellos. 2.1 Estructura y estilos HTML (Hypertext Markup Language lenguaje de marcado de hipertexto) es el lenguaje predominante en la elaboración de páginas web. Se utiliza para definir la estructura del sitio así como para introducir información e imágenes en la propia página. En este proyecto se trabaja principalmente con XHTML4, que es una de las ramas derivadas de la versión inicial del lenguaje, a la cuál se le han ido añadiendo nuevas funcionalidades. Específicamente, lo usamos para maquetar el sitio, es decir, construir la estructura de la web a nivel de diseño. CSS (Cascading Style Sheet hojas de estilo en cascada) es el lenguaje para definir la presentación de un documento estructurado previamente en HTML. La principal ventaja que ofrece es la separación de la estructura del documento de su estilo, facilitando la modificación del mismo al tener todo el código reunido en un archivo. 2.2 Programación web Nos referimos a la programación web como el desarrollo de las funciones que actúan de forma invisible para el usuario y realizan la gestión completa del sitio. Los lenguajes utilizados en este apartado son PHP y Javascript / AJAX. PHP (Hypertext Pre- processor, inicialmente Personal Home Page) es un lenguaje de desarrollo interpretado que actúa en el lado del servidor. Fue diseñado originalmente para la creación de sitios webs dinámicos pero ahora puede ser utilizado para otras muchas funciones. Javascript, por el contrario, trabaja en el lado del cliente y se centra en las mejoras de la interfaz de usuario y creación de funciones para páginas web dinámicas. 3

11 Herramientas y métodos Un gráfico que ilustra cómo son las aplicaciones web modernas: Figura 1. Esquema comparativo HTML, CSS y Javascript Una técnica que utilizamos con frecuencia durante todo el desarrollo es: Ajax. Consiste en una combinación de cuatro tecnologías: XHTML / CSS, DOM implementado como Javascript, el objeto XMLHttpRequest y XML. La ventaja principal es que permite comunicaciones asíncronas con el servidor en segundo plano, invisibles al usuario. Esto favorece el dinamismo de los sitios web ya que podemos realizar cambios sin necesidad de refrescar la página. En nuestro caso, necesitamos recargas de contenido al efectuar ciertas acciones en la web como, acceder a la ficha técnica de un artículo, añadir un producto al carrito, comprobar datos de un formulario, etc. A continuación, podemos observar un gráfico con el flujo de conexión de AJAX: Figura 2. Flujo de conexión AJAX 4

12 Herramientas y métodos La aplicación de desarrollo principal ha sido Adobe Dreamweaver CS5, un software de edición HTML y diseño web. Se elige precisamente este software porque es muy potente y está bastante extendido en el ámbito de la programación web. Además de su editor de código con autocompletado, dispone de una interfaz gráfica para obtener en todo momento una vista previa el sitio web. Se utiliza Dreamweaver tanto para la maquetación a nivel de diseño como para la programación de funciones. Otro software utilizado con asiduidad a lo largo de toda la construcción del aspecto visual es, Adobe Photoshop CS5. Con este editor gráfico se realizan todas las acciones de retoque, recortado y optimización de imágenes para su visualización web. El sistema de gestión de la base de datos está implementado con MySQL, el estándar de software libre en este campo. El acceso a la información se realiza mediante consultas PHP que nos permiten, obtener, insertar, actualizar o eliminar entradas de la base de datos. A la hora de desarrollar código, no se utiliza como soporte un marco de trabajo (framework) estándar pero sí que nos basamos en una plantilla con ciertos patrones ya fijados previamente en otros proyectos desplegados en la empresa Pasarela de pago Esquema de funcionamiento general de una pasarela de pago es el siguiente: Figura 3. Funcionamiento general de una pasarela de pago 5

13 Herramientas y métodos Respecto a la construcción de la tienda online, existen muchas empresas que ofrecen paquetes software con sistemas de comercio electrónico ya desarrollados y preparados para implementar en cualquier sitio web (Ej. Prestashop, VirtueMart ). Sin embargo, en este proyecto, la creación del sistema de comercio online, la tienda en sí, se decide desarrollar con PHP y Javascript partiendo desde cero y aprovechando las ventajas que nos ofrecen las cookies de los navegadores. Esto nos permite poder gestionar directamente los datos personales y la información confidencial de nuestros clientes y tener control directo sobre las transacciones electrónicas que se produzcan, pudiendo detectar rápidamente y cualquier incidencia que ocurra en el sistema. 6

14 Presentación del problema y análisis de requisitos 3 Presentación del problema y análisis de requisitos El problema específico que se plantea en el proyecto es el desarrollo de un sitio web completo que integre una plataforma online de comercio electrónico. Por tanto, hay dos aspectos principales que deben ser cubiertos: catálogo en línea y sistema de compra. El catálogo de los productos será un listado con la oferta proporcionada por el cliente. Debe mostrarse de forma clara y visualmente agradable para el usuario, además de detallar información técnica específica de cada producto. La complejidad del sistema radica en la construcción de la tienda online, que comprende: gestión de productos, registro e identificación de usuarios y transferencias electrónicas seguras mediante pasarela de pago. La gestión de los productos abarca varias fases: El usuario dispone de un catálogo en línea con los productos que pueden ser cargados en su carrito. Una vez se inicie el tramite del pedido, se deberán confirmar los datos de envío. En este punto se debe comprobar si el usuario está identificado, y si no, redirigirle a la interfaz de acceso y registro. A continuación se mostrará un resumen del pedido con los gastos totales y se realizará la conexión con la entidad bancaria para completar el pago. Cualquier usuario que visite la tienda online podrá consultar el catálogo libremente y añadir productos a su carrito, pero para realizar un pedido es necesario estar registrado e identificado en el sistema. Además, los usuarios registrados tendrán a su disposición un panel de control donde podrán cambiar sus datos personales y contraseña. En esta sección también tendrán acceso a su historial de pedidos en detalle. El último paso requerido para completar el pedido es la conexión con la pasarela de pago. El usuario introducirá su método de pago y datos bancarios. Una vez enviado el pago, la entidad bancaria se encargará de comprobar los datos recibidos referentes a la tienda online y al cliente para garantizar la seguridad de la transferencia electrónica. Si no hubo ningún error, se le mostrará una pantalla al cliente confirmando el pago. Si por el contrario se produjo alguna anomalía, deberá repetirse la operación. Existirá un formulario de contacto donde el usuario podrá enviar cualquier duda, sugerencia o comentario al administrador del sitio. 7

15 Presentación del problema y análisis de requisitos 3.1 Análisis de requisitos A continuación, se detallan los requisitos funcionales y no funcionales del sistema Requisitos funcionales Los requisitos funcionales definen el comportamiento interno del software. ID RF01 RF02 RF03 RF04 RF05 RF06 RF07 RF08 RF09 RF10 RF11 RF12 RF13 RF14 RF15 RF16 RF17 RF18 Descripción del Requisito El usuario podrá registrarse en el sistema El usuario podrá identificarse en el sistema con su nombre de usuario y contraseña El usuario identificado podrá modificar sus datos personales introducidos en el sistema El usuario, una vez identificado en el sistema, podrá cerrar la sesión El usuario podrá consultar el catálogo disponible El usuario podrá consultar la fecha técnica de un producto concreto El usuario podrá contactar con la empresa por medio de un formulario de contacto El usuario deberá identificarse en el sistema para tramitar un pedido El usuario, una vez identificado, podrá acceder a su historial de pedidos El usuario deberá realizar un pedido mínimo de tres unidades por producto El sistema ofrecerá una plataforma de pagos segura El sistema comprobará las credenciales de los usuarios que se quieran identificar El sistema deberá mostrar un resumen de los productos añadidos antes de realizar la compra El usuario podrá añadir productos a la cesta de la compra aunque no esté identificado en el sistema El usuario identificado podrá cambiar su contraseña El usuario podrá consultar en todo momento su cesta de la compra El usuario podrá gestionar su carrito: añadir productos, eliminar individualmente o vaciar El usuario podrá modificar el número de unidades de un producto Tabla 1. Requisitos funcionales 8

16 Presentación del problema y análisis de requisitos Requisitos no funcionales Los requisitos no funcionales especifican criterios que pueden usarse para juzgar la operación de un sistema. Algunos de los más típicos son: rendimiento, disponibilidad, seguridad, usabilidad, etc. ID Descripción del Requisito Importancia RNF01 RNF02 RNF03 RNF04 El pago se deberá realizar de forma segura mediante una pasarela de pago El sistema deberá contactar con el banco para corroborar los datos del pago El sitio web debe ser compatible con el mayor número de versiones posible de navegadores El sitio deberá disponer de una alta usabilidad a la hora de realizar pedidos Tabla 2. Requisitos no funcionales ALTA ALTA MEDIA MEDIA 9

17 Presentación del problema y análisis de requisitos 3.2 Diagrama de Casos de Uso El diagrama de casos de uso general del sistema comprende todas las acciones o actividades que se pueden llevar a cabo dentro del mismo por parte de los distintos actores. En nuestro diagrama, diferenciamos dos tipos de actores: el usuario y el usuario identificado (logueado). Obviamente, el usuario registrado y logueado puede realizar ciertas acciones en el sistema que al usuario normal (invitado) le están restringidas. Figura 4. Diagrama general de casos de uso del sistema 10

18 Presentación del problema y análisis de requisitos 3.3 Plantillas A continuación se detallan algunas de las actividades que se realizan en el sistema que merecen un apartado especial, por su complejidad e importancia. ID Nombre Descripción Actores Primarios y Secundarios Precondiciones Flujo Principal Plantilla P01 Finalizar compra (Pago Seguro) El sistema conecta con el TPV virtual CECA (Confederación Española de Cajas de Ahorros) para realizar el pago mediante protocolo seguro Usuario, sistema y CECA Cesta con productos, usuario logueado y datos de envió introducidos 1. El usuario, con sus datos introducidos, pulsa el botón de PAGAR. 2. Se envía un formulario al servidor del TPV virtual con datos de identificación (proporcionados por CECA). Se cifra el contenido con protocolo SHA Paralelamente, se inserta el pedido en la base de datos. 3. Al usuario se le presenta una página donde introduce los datos de la tarjeta y pulsa ENVIAR. 4. El TPV procesa y comprueba los datos. 5. Una vez realizada la verificación, conecta con la URL de comunicación online ( proporcionada por nosotros ), para verificar el pago. 6. El TPV acepta la operación y nos redirige a nuestra url personalizada de pago correcto. Flujo alternativo 1: datos introducidos erróneamente 3. El usuario introduce los datos de la tarjeta y pulsa ENVIAR. 4. El TPV procesa y comprueba los datos. 5. Datos introducidos erróneamente, volver al paso 3. Flujos Alternativos Flujo alternativo 2: error en la comunicación con TPV 2. Se envía un formulario al servidor del TPV virtual con datos de identificación (proporcionados por CECA). Se cifra el contenido con protocolo SHA1. 3. Se produce algún tipo de error en la comunicación con el TPV (servidor caído por ejemplo). 4. Volver al paso 2. Flujo alternativo 3: error de respuesta 5. Una vez realizada la verificación, conecta con la URL de comunicación online ( proporcionada por nosotros ), para verificar el pago. 6. No llega a conectar con la URL de comunicación online o no reconoce el código proporcionado. 7. Se lanza la página de error: pago no confirmado. Tabla 3. Plantilla caso "Finalizar Compra" 11

19 Presentación del problema y análisis de requisitos ID Nombre Descripción Actores Primarios y Secundarios Precondiciones Flujo Principal P02 Plantilla Tramitar pedido El usuario se dispone a realizar el pago de los artículos de su cesta Usuario y sistema Cesta con productos 1. El usuario pulsa el botón HACER PEDIDO en la cesta de la compra. 2. Se presenta la página de confirmación de datos de envío, con los datos del usuario Se verifica que los datos necesarios para el envío estén rellenados. 3. El usuario confirma sus datos y se nos presenta la página con el resumen del pedido. 3.1 El sistema calcula los gastos de envío según la residencia del usuario. 4. Pulsa el botón PAGAR - > plantilla Finalizar compra. Flujo alternativo 1: usuario no logueado 2. Se presenta la página de login, ya que el usuario no está logueado. 3. El usuario rellena sus datos de acceso y continua. 4. Se presenta la página de confirmación de datos de envío. Flujos Alternativos Flujo alternativo 2: modificación de datos de envío 2. Se presenta la página con los datos de envío del usuario. El usuario modifica alguno de los campos y confirma Se verifica que los datos necesarios para el envío estén rellenados 3. El usuario confirma sus datos y se nos presenta la página con el resumen del pedido. Tabla 4. Plantilla caso "Tramitar Pedido" 12

20 Presentación del problema y análisis de requisitos 3.4 Diagramas de secuencia Cabe mencionar el diagrama de secuencia referente al apartado de pago, donde se realiza la conexión con el sistema bancario y se comprueban las credenciales introducidas por el usuario. Figura 5. Diagrama de secuencia del caso "Tramitar Pedido" En caso de que el banco reporte un error a la hora de completar el pago, se volverán a solicitar los datos bancarios al usuario. 13

21 Diseño de la arquitectura del sistema 4 Diseño de la arquitectura del sistema El sistema se basa en una arquitectura típica de tres capas. El diseño por niveles o capas tiene como objetivo principal separar las distintas lógicas presentes en la aplicación. En el siguiente esquema se detallan las distintas capas y su interconexión: Figura 6. Esquema de diseño de una arquitectura de 3 capas Capa de Presentación: básicamente comprende la interfaz donde el usuario interactúa con el sistema, y viceversa. Se comunica directamente con la capa de negocio. Capa de Aplicación/Negocio: en ella se procesan las peticiones que el usuario realiza al sistema. Actúa de intermediario entre los niveles de presentación y acceso a los datos. Capa de Datos: donde se almacena la información. Desde la capa de aplicación se pueden realizar acciones de añadido, borrado, consulta y modificación contra la base de datos. 14

22 Diseño de la arquitectura del sistema En nuestro caso, estas tres capas se pueden identificar claramente con distintas partes del sistema. El sitio web en sí, lo que el usuario ve cuando accede a la página, pertenece a la capa de presentación. En ella mostramos la información a disposición del usuario que podrá interactuar con el sistema ejecutando acciones que serán recogidas por el nivel de aplicación. En la capa de negocio, el sistema se encarga de procesar las solicitudes realizadas por el usuario, mediante PHP y/o Javascript, y ofrecer respuesta a las mismas. Por último, en el nivel de datos se realizan las consultas necesarias a la base de datos. Para ello intervendrán los lenguajes PHP y MySQL. Un gráfico que refleja la situación de una arquitectura de tres capas aplicada a la web: Figura 7. Contenido de cada nivel en una arquitectura de 3 capas Interfaces externas Hay ciertas funciones del sistema que no podemos controlar de forma directa ya que requieren la intervención de otros organismos o empresas. Normalmente, las empresas de base tecnológica que quieren que los desarrolladores programen usando su tecnología, realizan lo que se conoce como API (Application Program Interface). Consiste en una biblioteca de funciones y/o procedimientos que los programadores pueden utilizar para desarrollar una aplicación que se comunique con el software de la empresa en cuestión. En el entorno de nuestro proyecto, las transferencias económicas de los pedidos tienen que ser tratadas por la entidad bancaria designada por el cliente. Este procedimiento se realiza a través de la pasarela de pago, que comprende una serie de comunicaciones sistema- banco invisibles al usuario que aportan seguridad y garantizan una transferencia fiable. Para implementarlo, necesitamos la documentación proporcionada por la entidad, en este caso CECA (Confederación Española de Cajas de Ahorros), que engloba a varios bancos incluidos el de nuestro cliente. Se trata de un documento técnico donde se especifica cómo realizar la conexión de nuestro sistema con el banco. En base a ello, construimos la interfaz de conexión y realizamos diferentes pruebas en un entorno de desarrollo que simula todo el proceso. Posteriormente, avanzamos a la implantación final. 15

23 Diseño de la arquitectura del sistema Diagrama de componentes El siguiente diagrama representa la interconexión de las distintas capas de la arquitectura mediante los diferentes módulos desarrollados. Figura 8. Diagrama de componentes del sistema 16