Hace unas semanas en el tutorial sobre cómo montar una instancia local de una página en WordPress, hable de las ventajas que tenía el armar un escenario de pruebas (SandBox) lejos de los ojos de tus visitantes, con el cual tú puedas experimentar y hacer toda clase de pruebas sin afectar tu proyecto que está corriendo en vivo. Hoy continuando con esta temática, quiero presentar una guía para montar un ambiente de pruebas local que corra desde tu computadora de una tienda virtual, usando un servidor XAMPP y el afamado software para tiendas virtuales PrestaShop.

Un poco de introducción

Antes de meternos en la guía, me gustaría aclarar algunos términos que voy a usar y el propósito mismo de cada componente. Si tu ya eres conocedor de lo que son XAMPP y PrestaShop, puedes saltar esta sección, e ir directamente a la guía de instalación.

¿por que un ambiente de pruebas local?

Existen múltiples razones por las cuales tú podrías llegar a querer tener un servidor local que corra en tu computadora y puedas montar una tienda virtual en PrestaShop lejos de los ojos de los usuarios finales en Internet. Por ejemplo a mí se me ocurren algunas:

• Actualmente no tienes un Hosting ni un dominio contratados, pero te gustaría aprender a usar PrestaShop sin tener que pagar por ello. Entonces esta guía es para ti, pues al final tendrás tu tienda virtual local de PrestaShop con la cual podrás experimentar y jugar todo lo que quieras y así hacerte un experto en esta herramienta tan poderosa.
• Ya tienes una tienda web publicada en PrestaShop y estas inseguro de algún cambio que quieres realizar, como por ejemplo un cambio de plantilla de estilos (theme) o una actualización importante de PrestaShop, o la instalación de algún nuevo modulo que no te suena mucho si te va a desconfigurar algo que ya funcione bien. Cualquiera de las razones anteriores es una razón lo suficientemente valida como para armarte de una instancia local de tu tienda y experimentar con ella, sin hacer sufrir a tus clientes en el proceso. Es posible que el modulo que querías instalar desconfigurara algo y tuvieras que hacer muchos esfuerzos para dejarlo todo como estaba antes, así que mejor dañar una tienda de pruebas (sandBox) que tu tienda oficial.
• Quieres realizar un prototipo de una tienda nueva para alguno de tus clientes, y éste te ha pedido total confidencialidad, por lo que no quieres que tus prototipos sean accesibles desde Internet. Que mejor que mostrarle tu trabajo a tu cliente desde un PC local sin exponer tus pruebas al público.
• Podrías querer instalar PrestaShop de manera local en tu empresa o red local para hacer una Tienda personal de uso privado, para una aplicación particular, como una Intranet o sitio para que los empleados de una empresa ordenen cosas a algún departamento

¿Qué es XAMPP?

XAMPP es un  software libre para computadora, que tiene la capacidad de convertir tu maquina en un servidor web, capaz de alojar y correr diferentes tipos de arquitecturas y tecnologías web como lo son Apache, Tomcat, MySQL, Filezilla y Mercury. Con este pequeño pero potente software pretendemos crear en nuestro PC un servidor web que corra localmente, es decir no es accesible desde internet, y por medio de él podremos instalar diferentes tipos de software web, para hacer pruebas, configuraciones y toda clase de locuras que se nos ocurran para poder aprender de manera segura. En esta guía vamos a utilizar XAMPP para correr una instancia de una tienda virtual en PrestaShop; sin embargo puedes usarlo también para correr todo tipo de páginas. (Vea por ejemplo en esta guía como usar XAMPP para correr una instancia de un blog en WordPress)

¿Qué es PrestaShop?

Es una de las aplicaciones para administrar tiendas virtuales más utilizados de internet. Podemos decir que lo que es WordPress al mundo de los blogs, viene a ser PrestaShop al mundo de las tiendas virtuales, siendo una solución especialmente diseñada para trabajar comercio electrónico. Aunque PrestaShop no es la única solución en el mercado, y tampoco la más potente, si es una de las más usadas (por no decir la más) debido su facilidad para ser instalada, configurada y administrada.

Aunque se trata de un software libre y su instalación es totalmente gratuita, Prestashop cuenda con la posibilidad de ser ampliado y repotenciado con módulos adicionales que son descargables desde la consola de administración, los cuales agregan nuevas funcionalidades a la tienda, y en muchas ocasiones no serán gratuitos.

Armar el ambiente de pruebas de Prestashop

Ahora si entremos en materia. Debo aclarar antes de continuar, que aunque esta guía está pensada para armar un ambiente de pruebas que corra localmente en tu computadora de escritorio o portátil, también puede ser aplicada (con mínimas modificaciones) al montaje de una ambiente de pruebas (o ambiente real) de una instancia de PrestaShop en tu proveedor de Hosting. Si este fuera tu caso no sería necesaria la instalación de un servidor XAMPP sino solo la instalación de PrestaShop.

Paso 1 Descargar XAMPP

Descarga en este enlace el instalador del servidor XAMPP sobre el cual vamos a instalar PrestaShop posteriormente.

Paso 2 Instalar XAMPP

Luego de descargar XAMPP es momento de instalarlo, para ello selecciona en el instalador la ruta donde quieres colocar el servidor (te sugiero usar la ruta que viene por defecto C: \XAMPP para evitar problemas de permisos con otras carpetas de tu PC). El instalador es bastante sencillo, así que puedes dejar sin modificar las opciones que se te presenten y continuar.

Paso 3 Iniciar XAMPP

Luego de terminar la instalación, inicia XAMPP con el icono que queda en tu menú de inicio, y en el panel de control de XAMPP que ves cuando lo prender, arranca los servicios de Apache y MySQL con los botones de Start. Con esta acción arrancas el servidor. Por lo tanto siempre que inicies tu PC y quieras comenzar una simulación de tu página, lo primero que deberás hacer es encender de esta manera el servidor XAMPP.

Durante el primer inicio de los servicios de Apache y MySQL, Windows te va a presentar una advertencia de seguridad del Firewall. Debes permitirle el acceso a estos 2 servicios y continuar, de lo contrario tu servidor no arrancará correctamente.

Para probar que hemos logrado iniciar nuestro servidor de XAMPP de manera exitosa, podemos abrir una pestaña nueva en cualquier navegador de Internet, y digitar la dirección http://localhost/ con la cual se te va a cargar la pantalla de bienvenida del servidor XAMPP. Si ves esta pantalla, entonces tu servidor está corriendo correctamente.

Paso 4 crear una Base de datos para PrestaShop

Un componente esencial antes de instalar PrestaShop usando XAMPP o cualquier otro servidor, es la base de datos sobre la cual tu instancia de la tienda local va a almacenar toda la información de aplicación.

Para crear la base de datos, en la página que acabamos de abrir, escogemos el idioma que más nos guste (yo seleccione español) y pasamos a panel principal de XAMPP, en el menú de la izquierda escogemos phpMyAdmin y en la pantalla nueva vamos a la pestaña “bases de datos” y escribimos el nombre de nuestra nueva base de datos (sugiero un nombre que tenga que ver con el nombre de tu tienda).

Nota: Si estás haciendo esta instalación en tu hosting directamente y no en tu PC local usando XAMPP, entonces deberás acceder a la herramienta de administración de tu hosting, generalmente conocida como cPanel y allí buscar el icono de phpMyAdmin y seguir los mismos pasos.

Con esto hemos terminado la primera parte de la instalación ¿fácil verdad? Ahora vamos a continuar con la siguiente parte que consiste en crear una instancia nueva de PrestaShop para tu base de datos.

Opcional

La base de datos por defecto puede ser accedida con el usuario “root” que no trae contraseña. Si quieres agregar un mayor nivel de seguridad a tu tienda (y es mejor que lo hagas cuando estés instalando tu tienda fuera de un ambiente de pruebas). Lo que debes hacer es crear un nuevo usuario a la base de datos con su contraseña y todos los permisos de lectura y escritura. Este sería el usuario que utilizaríamos en el paso 6 durante la instalación de PrestaShop.

Para crear el nuevo usuario, en la pantalla de phpMyAdmin de la base de datos que acabamos de crear, vamos a la pestaña “privilegios” y escogemos crear un nuevo usuario. Le damos nombre y contraseña. En la casilla de servidor colocamos localhot para una instalación local. De lo contrario deberemos colocar el nombre del servidor, o el carácter de porcentaje “%” para indicar que aplica cualquier nombre de servidor. En la sección de privilegios, será necesario usar la casilla de “marcar todos” para darle todos los privilegios a este usuario.

Paso 5 Descargar PrestaShop

Al igual que XAMPP, PrestaShop es un software libre que puede ser descargado desde su página oficial. Así que asegúrate de bajar la versión más reciente. Este archivo de instalación vendrá en forma de una carpeta comprimida en zip. Así que una vez tengas el archivo zip, ve a tu disco local y accede a la ruta en la que instalaste XAMPP y busca la subcarpeta “htdocs”. Si tú no cambiaste la ruta de instalación, esta sería la ruta en la que debes descomprimir el zip:C:\xampp\htdocs luego de descomprimir, te sugiero cambies el nombre de la carpeta de PrestaShop por el nombre de tu tienda.

Paso 6 Instalar PrestaShop

Luego de descomprimir y renombrar la carpeta de PrestaShop con el nombre de tu tienda, puedes abrir una nueva pestaña en tu navegador favorito escribiendo la dirección http://localhost/[TUCARPETA]/ donde [TUCARPETA] es el nombre de la carpeta que usaste en el paso 5.

A. Elegir Idioma

Si todo esta correcto vas a ver una pantalla de bienvenida para instalar PrestaShop con el formulario de instalación el cual es bastante fácil de entender. Para comenzar se debe seleccionar el idioma de la instalación. Este idioma será también el de tu tienda, sin embargo si luego lo quieres cambiar, también es posible mediante el Back-Office de PrestaShop.

B. Configurar Tienda

Al darle siguiente vas a ver una pantalla donde se te solicita aceptar términos y condiciones y realizar una prueba de compatibilidad de tu servidor con PrestaShop. Si la prueba es satisfactoria vamos a llegar a la pantalla de configuración de la tienda donde se debe ingresar el nombre de la tienda y tipo de productos que van a ser comercializados. Igualmente se crear el usuario administrador de la tienda que es el que vamos a utilizar para acceder al panel de administración de la misma o back-office.

C. Configurar base de datos

En esta pantalla se ingresan los datos configuración de la Base de Datos creada en el paso 4. Si hemos creado un usuario especifico para nuestra base de datos en el paso 4, deberemos reemplazar los valores de nombre del usuario y contraseña. De lo contrario podemos usar el usuario root sin contraseña. Antes de continuar debemos hacer una prueba de conexión con la base de datos para verificar que sea accesible.

D. Instalar tienda

Este paso es de la aplicación, nosotros no debemos hacer nada, solo esperar a que la barra de instalación termines de llenarse. Te sugiero te levantes de tu PC y te prepares un café o algo, pues este paso puede tardar varios minutos dependiendo de lo rápida que sea tu computadora.

E. Eliminar la carpeta de instalación

Cuando la instalación termina, ya tenemos lista nuestra instancia de PrestaShop. Sin embargo se nos advierte que debemos de borrar por motivos de seguridad la carpeta “install” de nuestro servidor. Si no hacemos este paso, PrestaShop no nos va a permitir acceder al back-office para administrar la tienda.

Así que antes de continuar vamos a la ruta de instalación de PrestaShop en nuestra maquina y borramos la carpeta “Install”. Hecho esto ya podemos usar nuestra tienda a nuestro antojo.

Paso 7 acceder a la tienda como cliente (front end)

Ya podemos ver nuestra tienda que se crea con unos productos de prueba con motivos de aprendizaje en la ruta http://localhost/[TUCARPETA]/ de esta manera vas a explorar la tienda de la manera como lo harían tus clientes. Prueba realizar un paseo por las categorías de pruebas y ensaya realizar una compra.

Paso 8 acceder a la tienda como administrador (back Office)

Por motivos de seguridad, PrestaShop genera un número aleatorio de 4 dígitos que debe ser usado en la dirección de acceso al back-office localhost/[TUCARPETA]/admin[XXXX]. Para verificar este número podemos ir a la carpeta de instalación de PrestaShop y ver los 4 números que se le agregaron a la carpeta Admin. En este ejemplo son Admin3895. Ten en cuenta que si no borraste la carpeta de instalación no se te permitirá acceder.

Si ya fue borrada la carpeta de instalación, se debe acceder con el usuario administrador creador en el paso 6.B

de esta manera puedes tener acceso al panel administrativo de tu tienda y comenzar a configurarla y personalizarla a tu gusto.

Espero que esta guia sea de mucha utilidad. por favor comenta si ves algo que no esta bien o que se pueda mejorar en esta guía. entre todos podemos hacer mejores tutoriales.