Momento y objetivo.

Desarrollé esta aplicación web durante mi estancia en la empresa valenciana d4bsolutions, a principios del año 2016.

La aplicación proporciona una estructura base a partir de la cual implementar un Ecommerce, adaptable posteriormente en su aspecto y sus múltiples detalles a las necesidades de cada usuario. Está enfocada principalmente a pequeños comercios con un stock de productos mediano y autónomos que quieran ofrecer sus servicios a través de la web.

¿Qué tecnologías utiliza?

El back-end está desarrollado en PHP, sobre una Base de Datos MySQL.

• 

• 

El front-end cuenta con HTML y CSS, que se sirve de tecnología Bootstrap para ofrecer un diseño responsive, facilitando así la usabilidad desde cualquier tipo de dispositivo y navegador. Utiliza también Javascript sobre jQuery, y se han implementado muchas acciones con AJAX para mejorar la navegación y acelerar todo lo posible los tiempos de respuesta.

Cada usuario tiene una clave encriptada distintiva para identificarse en la Base de Datos, ofreciendo total seguridad y evitando que se puedan mezclar entre ellos.

Partes de la aplicación

Cabecera y pié de página

Son las partes comunes de la aplicación, presentes de forma permanente en todo el sitio web.

La cabecera muestra:

• Nombre de la empresa, o el logotipo en caso de tenerlo.
• Selector de idioma en caso de contar con más de uno.
• Menú de navegación principal. Contiene enlaces a:
  • Las páginas del sitio.
  • Alta de cliente.
  • Login de cliente.
  • Panel de control, sólo visible en caso de estar logeado como usuario administrador.
  • Usuario o cliente logeado. Contiene un desplegable con enlaces a:
    • Pedidos, propios en caso de ser cliente, realizados a la tienda en caso de ser usuario.
    • Perfil, en caso de ser cliente.
    • Cerrar sesión, tanto de cliente como de usuario.
  • Resumen del carrito.

• 

• 

El pié de página contiene:

• Nombre de la empresa con enlace a inicio.
• Menú de navegación secundario. Contiene enlaces a:
  • Contacto.
  • Mapa de la web.
  • Aviso legal.
• Copyright.
• Enlaces a Redes Sociales.
• Enlace a login de usuario administrador, o a cierre de sesión si está logeado.

Página de Inicio

Esta página ofrece una descripción de la empresa o la persona que ofrece el servicio, y una selección de cuatro productos o servicios destacados a elección del usuario. De no seleccionarse, o seleccionar menos de cuatro, se mostrarán productos al azar.

Página de Contacto

Contiene un formulario de contacto, a través del cual el visitante puede contactar, enviando sus datos y un mensaje. Este envío llegará en un correo electrónico al e-mail de la empresa.

También muestra los datos de contacto que se hayan provisto y un mapa de Google con la localización.

Página de Productos

Nos ofrece un listado con los productos o servicios que ofrecemos. Permite escoger el número de productos a mostrar por página, ordenación por distintos criterios, y un buscador que incluye todas las características creadas y sus distintos valores posibles.

Cada item de producto nos muestra un resumen del mismo, que incluye una imagen, nombre, precio, unidades en stock y una descripción breve. Un botón nos permite incluirlo en nuestro pedido, y a través de un enlace podemos acceder a su página de producto.

Página de Producto

Nos muestra con detalle un producto concreto. Incluye una galería con sus imágenes , nombre y descripción breve, precio, unidades en stock, el valor de cada una de las características que le hayamos asignado y una descripción completa. Un botón nos permite incluirlo en nuestro pedido.

Carrito

Esta página nos muestra un listado de items con los productos incluidos en nuestro pedido. Estos nos permiten realizar una gestión del mismo, añadiendo o quitando cantidades de producto, o eliminándolo. También vemos sus precios, IVA, subtotal y precio total del pedido.

A través de un botón podemos iniciar el proceso de compra.

Compra

En esta primera versión se ofrece únicamente la posibilidad de pago a través de PayPal, para lo que se desarrollo la integración con esta aplicación.

Cliente

Para realizar un pedido el visitante debe darse de alta como cliente. Se ofrece la posibilidad de crear un usuario y contraseña o darse de alta a través de Facebook. Posteriormente se deben rellenar los datos para dirección de envío y facturación.

En la zona de cliente el usuario puede ver y modificar estos datos, así como los pedidos realizados y su estado.

Usuario

El usuario de la tienda puede acceder a un completo panel de control para gestionarla. En el podrá ver, crear, borrar y modificar:

• Datos de su empresa.
• Pedidos realizados a su tienda.
• Clientes.
• Productos.
• Categorías de productos.
• Atributos de productos.

Superadministrador

Como gestores de la aplicación, nuestro panel de control abarca todas las tiendas que se gestionan a través de ella, teniendo por tanto acceso a todos los elementos de cada una de ella, y capacidad de gestionarlos.

También tenemos la gestión de los usuarios, de forma que podemos ver los existentes y a qué tienda pertenecen, así como crear, modificar o eliminar usuarios, para tiendas existentes o nuevas.

• 

• 

Extras

Gestión con Excel

Para mejorar la gestión de los distintos elementos de la tienda, tenemos la posibilidad de gestionarlos a través de hojas Excel, que posteriormente podemos subir a la aplicación y cargarlos en la Base de Datos. También podemos descargar hojas Excel con la información de los distintos elementos de nuestra tienda.

Elementos que podemos gestionar de esta forma: productos, categorías, atributos, clientes y pedidos.

Multi-idioma

Se ofrece la posibilidad de mostrar la tienda en los idiomas que se desee, cambiando de uno a otro a través de un selector con distintas banderas de país en la parte superior derecha de la pantalla.

Este desarrollo incluye dos partes:

1. La aplicación se implementó con sus distintos menús y botones en castellano y en inglés, y con la posibilidad de añadir, bajo pedido, cuantos idiomas le fueran de utilidad al usuario.
2. En la gestión de los elementos de la tienda se ofrecen los distintos campos repetidos tantas veces como idiomas contenga la aplicación, para poder introducir las correspondientes traducciones de los datos. De no rellenar un campo de un idioma concreto, se mostrará en el idioma por defecto.