Introducción

Este proyecto tiene como objetivo desarrollar un sitio web Ecommerce para Chile Mangas, una tienda especializada en la venta de mangas y productos de animé y videojuegos. El objetivo es ofrecer una plataforma online funcional con bajos costos operativos que permita realizar ventas dentro del territorio nacional.

Descripción del Proyecto

Chile Mangas, ubicada en Quilpué, solicita un ecommerce para vender sus productos a nivel nacional. Actualmente, el único punto de venta es su tienda física, atendida por sus dueños. El proyecto busca ofrecer una solución tecnológica económica que maximice las ventas sin consumir altos recursos operativos mensuales.

Objetivos Generales y Específicos

  • Objetivo General: Implementar un sitio ecommerce para Chile Mangas que permita la venta de productos online con bajo costo de operación.
  • Objetivos Específicos:
    • Integrar Shopify como CMS para facilitar la gestión del ecommerce.
    • Definir un servidor adecuado con costos bajos.
    • Establecer endpoints para la gestión eficiente de transacciones.

2. Selección de Servidor

2.1. Comparativa de Servidores Disponibles

Existen diversas opciones de servidores que pueden ser consideradas para este proyecto. A continuación, se presenta una comparativa de las principales opciones disponibles en el mercado:

  • Heroku: Fácil de usar pero con limitaciones en su plan gratuito.
  • Amazon Web Services (AWS): Escalable pero con costos relativamente altos para pequeños proyectos.
  • Google Cloud: Ofrece créditos iniciales, pero puede ser complejo para configuraciones básicas.
  • DigitalOcean: Balance adecuado entre precio y rendimiento para proyectos pequeños.

2.2. Servidor Seleccionado y Justificación

Se ha decidido utilizar DigitalOcean como servidor para este proyecto por las siguientes razones:

  • Ofrece un plan básico con un costo mensual accesible, alineado al bajo presupuesto del cliente.
  • La configuración y despliegue es sencilla, ideal para tiendas que no requieren un gran equipo técnico.
  • Soporta CMS como Shopify a través de integraciones rápidas y fáciles.

2.3. Configuración del Servidor para Shopify

Para integrar Shopify en DigitalOcean, se seguirá el siguiente proceso de configuración:

  1. Crear una cuenta en DigitalOcean y desplegar un droplet básico con Ubuntu.
  2. Configurar el droplet con un dominio personalizado para la tienda (por ejemplo, chilemangas.cl).
  3. Habilitar HTTPS mediante la instalación de Let's Encrypt.
  4. Conectar Shopify con la API del servidor para gestionar inventarios y pedidos.
  5. Realizar pruebas de carga para asegurar un rendimiento adecuado durante picos de transacciones.

3. Diseño de Base de Datos

3.1. Diagrama de Base de Datos (DBML)

A continuación, se presenta el diagrama de la base de datos en formato DBML, que describe las entidades principales y sus relaciones:


  Table productos {
    id int [pk, increment]
    nombre varchar
    descripcion text
    precio decimal
    stock int
  }
  
  Table usuarios {
    id int [pk, increment]
    nombre varchar
    email varchar [unique]
    password varchar
  }
  
  Table pedidos {
    id int [pk, increment]
    usuario_id int [ref: > usuarios.id]
    fecha date
    total decimal
  }

Este diagrama permite visualizar cómo están estructurados los datos y cómo se relacionan entre sí, facilitando la gestión de los productos, usuarios y pedidos en el sistema.

3.2. Relación entre Entidades

Las entidades principales de la base de datos son:

  • Productos: Contienen información detallada de cada artículo disponible en la tienda.
  • Usuarios: Representan a los clientes que realizan compras en la plataforma.
  • Pedidos: Registran las compras realizadas, vinculando a cada pedido con un usuario y los productos adquiridos.

La relación entre las entidades es la siguiente:

  • Un usuario puede tener múltiples pedidos.
  • Un pedido puede incluir varios productos (implementado mediante una tabla intermedia no mostrada en este diagrama).

3.3. Consideraciones para el Almacenamiento de Datos

Para asegurar una gestión eficiente del almacenamiento de datos, se tendrán en cuenta las siguientes consideraciones:

  • Optimización del espacio: Uso de tipos de datos adecuados (por ejemplo, int para identificadores y decimal para precios).
  • Backups periódicos: Realización de copias de seguridad automáticas para evitar la pérdida de información.
  • Escalabilidad: Planificación de la base de datos para soportar un crecimiento futuro en el número de usuarios y productos.
  • Seguridad: Encriptación de contraseñas y uso de conexiones seguras para proteger los datos sensibles de los usuarios.

4. Diseño de Endpoint Rest

4.1. Definición de Endpoints

En este proyecto, se definen los siguientes endpoints para la API REST:

  • GET /productos - Obtiene una lista de todos los productos disponibles.
  • GET /productos/{id} - Obtiene los detalles de un producto específico por su ID.
  • POST /pedidos - Crea un nuevo pedido.
  • GET /pedidos/{id} - Obtiene los detalles de un pedido por su ID.
  • POST /usuarios - Registra un nuevo usuario.

4.2. Ejemplos de Peticiones y Respuestas

A continuación, se presentan ejemplos de peticiones y respuestas típicas:


  // Ejemplo de petición GET /productos/1
  {
    "id": 1,
    "nombre": "Naruto Vol. 1",
    "descripcion": "Manga del primer volumen de Naruto",
    "precio": 9900,
    "stock": 20
  }
  
  // Ejemplo de petición POST /pedidos
  {
    "usuario_id": 5,
    "productos": [
      { "id": 1, "cantidad": 2 },
      { "id": 3, "cantidad": 1 }
    ]
  }
  
  // Respuesta POST /pedidos
  {
    "id": 101,
    "usuario_id": 5,
    "total": 19800,
    "fecha": "2024-10-18"
  }

4.3. Seguridad en los Endpoints

Para garantizar la seguridad en los endpoints, se aplicarán las siguientes medidas:

  • Autenticación y Autorización: Se utilizará OAuth2 para validar a los usuarios antes de permitirles acceder a recursos sensibles.
  • Rate Limiting: Se limitará el número de peticiones por usuario para evitar abusos.
  • Cifrado HTTPS: Todo el tráfico hacia y desde el servidor se cifrará usando HTTPS.
  • Validación de Datos: Se validarán los datos de entrada para prevenir ataques de inyección.
  • Manejo de Errores: Se devolverán respuestas claras y controladas para cada error posible.

5. Selección Tecnológica Backend

5.1. Comparativa entre CMS y Desarrollo Custom

En el desarrollo de ecommerce, es fundamental elegir entre utilizar un CMS (Content Management System) o realizar un desarrollo custom. A continuación, se presenta una comparativa:

Características CMS Desarrollo Custom
Velocidad de Implementación Alta Baja
Costos Iniciales Bajo a moderado Alto
Flexibilidad Limitada Alta
Mantenimiento Simplificado Complicado
Escalabilidad Moderada Alta

5.2. Razones para Elegir Shopify como CMS

Shopify es la opción elegida como CMS para este proyecto por las siguientes razones:

  • Facilidad de Uso: Su interfaz intuitiva permite gestionar productos y pedidos sin conocimientos técnicos avanzados.
  • Bajo Costo Operacional: Planes asequibles que se ajustan al presupuesto de la tienda.
  • Soporte Integrado: Shopify ofrece soporte técnico 24/7 y una comunidad activa de usuarios.
  • Herramientas de Marketing: Incluye herramientas como SEO, análisis de datos y promociones.
  • Hosting incluido: El sitio se aloja directamente en la plataforma de Shopify, ahorrando costos de servidor adicionales.

5.3. Integraciones Adicionales con Shopify

Para potenciar el ecommerce, se consideran las siguientes integraciones con Shopify:

  • Pasarelas de Pago: Integración con Webpay Plus para pagos en Chile.
  • Envíos: Conexión con empresas de logística locales como Chilexpress y Starken.
  • Automatización de Marketing: Uso de herramientas como Klaviyo para automatizar campañas de correo.
  • Gestión de Redes Sociales: Sincronización de inventario con Facebook e Instagram Shops.
  • Análisis y Reportes: Integración con Google Analytics para seguimiento de visitas y conversiones.

6. Selección Tecnológica Frontend

6.1. Opciones para Personalización Visual

La personalización visual es fundamental para diferenciar la tienda y transmitir su identidad de marca. Las opciones principales para personalización en Shopify incluyen:

  • Plantillas Predefinidas: Shopify ofrece una variedad de temas gratuitos y de pago que pueden ser adaptados a la estética deseada.
  • Editor de Temas: Permite modificar colores, fuentes y disposición de elementos de forma intuitiva.
  • HTML y CSS Personalizado: Para usuarios con conocimientos avanzados, es posible acceder al código y realizar ajustes específicos.
  • Apps de Personalización: Existen aplicaciones en el marketplace de Shopify que añaden funcionalidades y opciones visuales adicionales.

6.2. Frameworks y Librerías Compatibles

Al seleccionar tecnologías frontend para personalización, es importante considerar la compatibilidad con Shopify. Las opciones recomendadas son:

  • Bootstrap: Facilita el diseño responsivo con una estructura predefinida de grids y componentes.
  • Tailwind CSS: Una librería moderna y eficiente para estilos personalizados, ampliamente usada en proyectos ecommerce.
  • Liquid: El motor de plantillas propio de Shopify para mostrar contenido dinámico en las páginas.
  • jQuery: Compatibilidad para agregar interactividad básica sin la necesidad de frameworks más complejos.
  • React (opcional): Aunque Shopify no lo requiere, algunas aplicaciones y personalizaciones avanzadas pueden beneficiarse del uso de React.

6.3. Diseño Responsivo y Experiencia de Usuario

Un diseño responsivo asegura que la tienda funcione de manera óptima en dispositivos móviles, tabletas y computadores. Las consideraciones principales son:

  • Grilla Fluida: Utilizar frameworks como Bootstrap o Tailwind CSS para asegurar que los elementos se adapten al tamaño de la pantalla.
  • Optimización de Imágenes: Asegurarse de que las imágenes sean ligeras y de alta calidad para evitar tiempos de carga largos.
  • Navegación Intuitiva: Diseñar menús y elementos de navegación accesibles en dispositivos táctiles.
  • Velocidad de Carga: Minimizar el uso de scripts y recursos externos para mejorar la experiencia del usuario.
  • Accesibilidad: Implementar prácticas que faciliten la navegación a personas con discapacidades, como etiquetas ARIA y contraste adecuado.

7. Estimación de Costos de Servidor y Operación

7.1. Costos en Modo Bajo, Normal y Crítico

La siguiente estimación presenta los costos asociados al funcionamiento del ecommerce bajo diferentes escenarios:

  • Modo Bajo: Hosting básico de Shopify con funcionalidades mínimas. Costo aproximado: $29 USD/mes.
  • Modo Normal: Plan estándar con acceso a analíticas y mejoras de rendimiento. Costo aproximado: $79 USD/mes.
  • Modo Crítico: Plan avanzado con soporte 24/7 y funcionalidades avanzadas. Costo aproximado: $299 USD/mes.

7.2. Análisis de Sostenibilidad Económica Mensual

Para garantizar la viabilidad económica del proyecto, se realiza el siguiente análisis:

  • Ingreso Promedio: Se proyectan ventas diarias de 10 transacciones, con un ticket promedio de $20.000 CLP.
  • Margen Bruto: Se estima un margen bruto del 30% sobre las ventas.
  • Costos Operacionales: Incluyen el hosting de Shopify y servicios adicionales como dominio y correo corporativo.
  • Punto de Equilibrio: El ecommerce alcanzará el equilibrio con al menos 15 ventas diarias en promedio.

7.3. Alternativas de Ahorro

Se presentan algunas estrategias para reducir los costos operativos:

  • Uso de Planes Básicos: Considerar comenzar con el plan básico de Shopify y escalar según el crecimiento.
  • Aplicaciones Gratuitas: Utilizar apps gratuitas del marketplace para funcionalidades adicionales.
  • Pago Anual: Optar por pagos anuales para obtener descuentos significativos.
  • Optimización de Recursos: Minimizar costos con integración de herramientas de gestión gratuitas como Google Workspace.

8. Selección de Profesionales Necesarios

8.1. Roles y Perfiles Necesarios

Para la implementación y mantenimiento del ecommerce, se requieren los siguientes roles:

  • Desarrollador Backend: Encargado de la configuración y personalización del CMS (Shopify).
  • Desarrollador Frontend: Responsable de la personalización visual y la experiencia de usuario.
  • Administrador de Servidor: Gestiona el servidor y la infraestructura en la nube, en caso de ser necesario.
  • Diseñador UX/UI: Mejora la experiencia del usuario mediante interfaces intuitivas y funcionales.
  • Soporte Técnico: Provee asistencia en caso de problemas con el sistema o en la operación diaria.

8.2. Estimación de Horas y Costos de Trabajo

A continuación, se detalla la estimación de horas de trabajo y costos para cada rol involucrado:

Rol Horas Estimadas Costo por Hora (CLP) Costo Total (CLP)
Desarrollador Backend 40 20.000 800.000
Desarrollador Frontend 35 18.000 630.000
Administrador de Servidor 10 25.000 250.000
Diseñador UX/UI 20 22.000 440.000
Soporte Técnico 15 15.000 225.000

Total Estimado: 2.345.000 CLP

8.3. Planificación de Colaboración y Soporte

La planificación del trabajo en equipo y el soporte técnico incluye las siguientes actividades:

  • Reuniones Semanales: Seguimiento de progreso y coordinación entre desarrolladores y diseñadores.
  • Soporte Técnico Continuo: Disponibilidad de asistencia remota para resolver problemas rápidamente.
  • Uso de Herramientas de Gestión: Plataformas como Trello o Jira para la gestión de tareas y plazos.
  • Entrega Iterativa: El proyecto se entregará en fases para validar cada componente antes del lanzamiento.

9. Estimación de Plazos para Implementar

9.1. Cronograma del Proyecto

El cronograma del proyecto establece las fechas y etapas clave necesarias para completar el ecommerce de forma eficiente.

Fase Fecha de Inicio Fecha de Término Duración
1. Planificación 01/11/2024 05/11/2024 5 días
2. Desarrollo Backend 06/11/2024 20/11/2024 15 días
3. Desarrollo Frontend 21/11/2024 05/12/2024 15 días
4. Pruebas e Integración 06/12/2024 15/12/2024 10 días
5. Lanzamiento y Monitoreo Inicial 16/12/2024 20/12/2024 5 días

9.2. Tiempos Estimados para Cada Fase

La siguiente es una estimación detallada de los tiempos necesarios para cada fase del proyecto:

  • Planificación: 5 días
  • Desarrollo Backend: 15 días
  • Desarrollo Frontend: 15 días
  • Pruebas e Integración: 10 días
  • Lanzamiento y Monitoreo Inicial: 5 días

9.3. Mitigación de Riesgos y Plan de Contingencia

Se identifican los posibles riesgos en cada fase y las medidas de mitigación propuestas:

  • Retrasos en el desarrollo: Uso de metodologías ágiles para ajustarse rápidamente a los cambios.
  • Fallas técnicas durante el lanzamiento: Realizar pruebas exhaustivas antes del lanzamiento oficial.
  • Problemas de integración: Incluir un periodo adicional para corregir errores imprevistos.
  • Riesgo financiero: Planificar costos con márgenes para evitar sobrecarga presupuestaria.

Además, se propone un plan de contingencia para gestionar cualquier inconveniente que pudiera surgir durante la implementación del proyecto.

10. ADR (Architectural Decision Records)

10.1. Selección de CMS

Se decidió utilizar Shopify como CMS para el ecommerce por las siguientes razones:

  • Facilidad de uso: Plataforma intuitiva que no requiere conocimientos técnicos avanzados.
  • Escalabilidad: Puede manejar el crecimiento gradual del negocio.
  • Integraciones: Ofrece múltiples opciones de integración con herramientas de marketing y pago.

Esta decisión reduce los tiempos de desarrollo y los costos asociados, permitiendo centrarse en la gestión del negocio.

10.2. Selección del Servidor

La selección del servidor se basó en los siguientes criterios:

  • Presupuesto: Se seleccionó un servidor que se ajusta a las restricciones económicas del proyecto.
  • Capacidad: Manejo eficiente de hasta 100 transacciones diarias en picos de demanda.
  • Compatibilidad: Asegura compatibilidad total con Shopify.

Se optó por un servidor compartido, lo que permite un equilibrio entre costo y rendimiento.

10.3. Integración con Shopify

La integración con Shopify se ha seleccionado considerando:

  • Facilidad de implementación: Shopify ofrece API robustas para personalización rápida.
  • Gestión de inventario: Sincronización automática del inventario entre la tienda física y online.
  • Métodos de pago: Aceptación de múltiples métodos de pago, garantizando flexibilidad al cliente.

Esta integración permite optimizar la gestión del ecommerce, ahorrando tiempo y costos operativos.

11. Diagrama de Arquitectura C4 (PlantUML)

11.1. Contexto del Sistema

El contexto del sistema describe cómo el ecommerce de Chile Mangas se conecta con usuarios, sistemas externos, y servicios. A continuación, se presenta un diagrama de contexto en PlantUML:

  @startuml
  actor Cliente
  package "Chile Mangas Ecommerce" {
    [Frontend]
    [Backend]
  }
  Cliente --> [Frontend] : Interacción Web
  [Frontend] --> [Backend] : Petición API
  [Backend] --> [Shopify] : Gestión de Productos e Inventario
  @enduml

Este diagrama refleja cómo los usuarios interactúan con la plataforma, destacando la conexión con Shopify como CMS.

11.2. Contenedores y Componentes

El siguiente diagrama describe los contenedores principales del sistema y sus componentes internos:

  @startuml
  package "Frontend" {
    [Página Principal]
    [Carrito de Compras]
    [Formulario de Pago]
  }
  package "Backend" {
    [API de Shopify]
    [Base de Datos]
  }
  [Página Principal] --> [Carrito de Compras] : Navegación
  [Carrito de Compras] --> [Formulario de Pago] : Checkout
  [Formulario de Pago] --> [API de Shopify] : Validación y Pago
  @enduml

Este diagrama muestra los módulos clave del frontend y backend, así como su interacción para completar una compra.

11.3. Despliegue de Infraestructura

El diagrama de despliegue refleja la infraestructura necesaria para el funcionamiento del ecommerce:

  @startuml
  node "Servidor Web" {
    [Frontend]
  }
  node "Servidor Backend" {
    [Backend]
  }
  cloud "Shopify" {
    [API de Shopify]
  }
  [Frontend] --> [Backend] : Llamada API
  [Backend] --> [API de Shopify] : Sincronización
  @enduml

Este esquema detalla los servidores necesarios y la conexión con Shopify para la gestión del ecommerce.

12. Persona Positiva y Persona Negativa

Descripción detallada de los perfiles de usuario que interactuarán con el sistema:

  • Persona Positiva: Un cliente recurrente que valora la experiencia fluida de compra y promociones exclusivas.
  • Persona Negativa: Usuario que busca productos sin intención real de compra y genera carritos abandonados.

13. User Journey / Storyboard

Visualización del recorrido del usuario durante una compra exitosa en el ecommerce:

  1. El cliente visita la página principal.
  2. Navega por las categorías de productos y selecciona mangas específicos.
  3. Añade los productos al carrito y procede al pago.
  4. Completa la compra y recibe confirmación por correo.

14. Análisis de Qué es y Qué no es el Sistema

  • Qué es el sistema: Una plataforma online para la venta de productos de anime y videojuegos.
  • Qué no es el sistema: No es una red social ni una plataforma de suscripción de contenido.

15. Estimación Aproximada de Costos

Desglose de costos estimados para los modos de operación:

  • Modo Bajo: $50 USD/mes
  • Modo Normal: $100 USD/mes
  • Modo Crítico: $200 USD/mes

16. Publicación del Proyecto en Github Pages

El proyecto estará disponible públicamente en Github Pages para su consulta. Se utilizará un repositorio que contenga el código fuente y el HTML generado.

17. Conclusión

Se concluye que el ecommerce de Chile Mangas permitirá expandir el negocio a nivel nacional, manteniendo los costos operacionales bajos gracias a la integración con Shopify y la infraestructura seleccionada. El proyecto ofrece una experiencia de usuario sencilla y eficiente, adecuada para los dueños de la tienda y los clientes finales.

1. Footnote