MyApol es una plataforma web (E-commerce / Catálogo) diseñada para ofrecer una experiencia visual premium, rápida y dinámica. Implementa una arquitectura Cliente-Servidor (API REST) estructurada con un diseño moderno y un completo panel administrativo.
- Catálogo Dinámico e Interactivo: Búsqueda en tiempo real y filtrado de productos por categorías.
- Detalle de Producto: Vista expandida de cada dispositivo consumiendo la API por ID de manera reactiva.
- Sistema de Opiniones: Los usuarios registrados pueden iniciar sesión y dejar comentarios públicos en tiempo real.
- Panel Administrativo (CRUD): Acceso privado para gestionar (Crear, Leer, Actualizar y Eliminar) completamente el inventario de la tienda.
- Seguridad Básica: Autenticación de administrador y clientes basada en roles. Inyección de datos protegida con peticiones paramétricas.
- Pasarela de Pagos (Checkout Pro): Integración con Mercado Pago para procesar transacciones seguras de manera dinámica desde el carrito de compras.
- Frontend: HTML5, CSS3, JavaScript (Vanilla), Bootstrap 5, Bootstrap Icons.
- Backend: Python 3, Flask (RESTful API).
- Base de Datos: SQLite (
database.db). - Pasarela de Pagos: SDK de Mercado Pago (Python & JavaScript).
/
├── frontend/
│ ├── index.html (Página principal / Catálogo público)
│ ├── detalle.html (Vista individual de producto y comentarios)
│ ├── admin.html (Panel Privado CRUD para gestionar tienda)
│ ├── login.html (Página de acceso al Panel Administrativo)
│ ├── login_cliente.html (Página de acceso Público / Clientes)
│ ├── styles.css (Diseño global premium oscuro y animaciones)
│ └── scripts.js (Lógica principal de UI y consumo de la API)
│
└── backend/
├── app.py (Servidor Flask Principal / API)
├── init_db.py (Script creador y poblador automático de Base de Datos)
├── inyectar_imagenes.py (Script optimizador de Imágenes HD Hotlinking)
└── database.db (Base de datos local generada automáticamente)
Para ejecutar este proyecto exitosamente, sigue los siguientes pasos:
Asegúrate de tener instalado Python en tu computadora.
Abre una terminal (símbolo del sistema o PowerShell) en la carpeta principal del proyecto e instala la librería Flask con este comando:
pip install flaskPara generar la base de datos database.db y llenarla con la información inicial de roles, categorías y 18 productos Apple, ejecuta este comando:
python backend/init_db.py(Opcionalmente, si deseas obtener imágenes fotorealistas en alta calidad de manera automática directo desde internet en tu base de datos, ejecuta también: python backend/inyectar_imagenes.py)
Inicia la API (el motor de datos del catálogo) con el siguiente comando quedándote en la raíz del proyecto:
python backend/app.pySi te aparece un mensaje en la consola como
* Running on http://127.0.0.1:5000, ¡felicidades, el servidor está vivo y escuchando peticiones! Deja esa pestaña de la terminal abierta ejecutándose en segundo plano.
No necesitas servidores web super extraños para la vista. Simplemente ve a la carpeta frontend en tu explorador de archivos convencional y haz doble clic sobre el archivo index.html para abrirlo en tu navegador favorito (Chrome, Safari, Edge).
Para que el carrito de compras procese los pagos, necesitamos instalar la librería oficial de Mercado Pago en tu servidor:
pip install mercadopagoDebes vincular tu cuenta de desarrollador para que las transacciones lleguen a tu panel:
- Ingresa a Mercado Pago Developers.
- Crea una aplicación llamada MyApol.
- En la sección Credenciales de Prueba, obtén tu
Access Tokeny tuPublic Key. - Abre el archivo
backend/app.pyy reemplaza los tokens en las líneas correspondientes (asegúrate de que estén entre comillas). - Abre el archivo
frontend/index.htmly pega tuPublic Keyen la inicialización del SDK de Mercado Pago.
Una vez configurado:
- Abre tu catálogo (
index.html). - Agrega productos al carrito.
- Haz clic en PROCEDER AL PAGO.
- Se abrirá la ventana oficial de Mercado Pago donde podrás usar Tarjetas de Prueba para simular una compra exitosa sin dinero real.
Este proyecto ha sido optimizado para funcionar en la nube, separando el Frontend del Backend para garantizar mayor velocidad y escalabilidad.
El cerebro de la aplicación (la API) se encuentra alojado en PythonAnywhere:
- Sube la carpeta
/backenda tu cuenta de PythonAnywhere. - Crea un Virtualenv e instala las librerías necesarias (
flask,mercadopago). - En la pestaña Web, configura el archivo
WSGIapuntando a tuapp.py. - Ejecuta un terminal tipo consola en el servidor y corre
python backend/init_db.pypara generar tu base de datos en la nube. - Tu API estará viva en una URL similar a:
https://tu-usuario.pythonanywhere.com/api.
La interfaz visual se encuentra alojada en GitHub Pages:
- Crea un repositorio en GitHub y sube la carpeta
/frontend. - Ve a Settings > Pages y selecciona la rama donde subiste los archivos para activar el sitio.
- Esto te proporcionará una URL pública para acceder a tu catálogo desde cualquier parte del mundo.
Para que tu página web se comunique correctamente con tu servidor en la nube, asegúrate de que el archivo frontend/config.js tenga la URL correcta de tu backend en PythonAnywhere:
const CONFIG = {
API_BASE_URL: 'https://degnisdev.pythonanywhere.com/api'
};Nota: Gracias a la configuración de CORS en el
app.py, GitHub Pages podrá realizar peticiones a PythonAnywhere de manera segura.
-
Usuario: admin@myapol.com
-
Contraseña: 12345
-
Cliente: cliente@myapol.cpm
-
Contraseña: 12345