LogoCésar Alberca
Caso de Estudio

Lightspace — Aplicaciones de Shopify con Mejores Prácticas

Resumen

Problema: LightspaceSe abre en una nueva pestaña necesitaba desarrollar aplicaciones y funciones de ShopifySe abre en una nueva pestaña con procesos sólidos de prueba y despliegue, asegurando el cumplimiento de las mejores prácticas en todo su flujo de desarrollo.

Solución: Implementé procesos de QA, desarrollé aplicaciones y funciones de Shopify y creé plantillas reutilizables con pipelines CI/CD para pruebas y despliegue automatizados.

Resultado: Entregué soluciones escalables y mantenibles que mejoraron la eficiencia de desarrollo y la calidad del código, incluyendo una plantilla de aplicación de Shopify lista para producciónSe abre en una nueva pestaña y pruebas automatizadas para temas.

La historia detrás de Lightspace

LightspaceSe abre en una nueva pestaña fue mi primer cliente como freelance, marcando el inicio de un emocionante viaje profesional. Conocí a RamezSe abre en una nueva pestaña, el fundador, en Burgas ColivingSe abre en una nueva pestaña, lo que llevó a una fructífera colaboración que abarcó múltiples proyectos e iniciativas, por lo cual estoy muy agradecido de la oportunidad de haber trabajado con Ramez y su equipo.

El reto

Lightspace necesitaba mejorar sus capacidades de desarrollo en Shopify con:

  1. QA: Garantizar pruebas sólidas en sus aplicaciones
  2. Soluciones Personalizadas de Shopify: Desarrollar aplicaciones y funciones especializadas
  3. Desarrollo Estandarizado: Crear plantillas reutilizables con mejores prácticas
  4. Pruebas Automatizadas: Implementar CI/CD para temas y aplicaciones

El viaje técnico

Trabajo de QA

Implementé procesos integrales de QA que:

  • Establecieron protocolos de prueba para aplicaciones de Shopify
  • Crearon casos de prueba para flujos críticos de usuario
  • Identificaron y resolvieron problemas antes del despliegue
  • Mejoraron la calidad y fiabilidad general del código

Desarrollo de aplicaciones Shopify

Desarrollé aplicaciones personalizadas de Shopify que ampliaban las capacidades de la plataforma.

Desarrollo guiado por pruebas en funciones de Shopify

Implementé funciones de Shopify utilizando Desarrollo Guiado por PruebasSe abre en una nueva pestaña (TDD), una metodología donde las pruebas se escriben antes del código. Este enfoque garantizó funcionalidades robustas y bien probadas desde el inicio.

¿Qué es TDD?

TDD sigue un ciclo simple:

  1. Escribir una prueba fallida que defina el comportamiento esperado
  2. Implementar el mínimo código necesario para que la prueba pase
  3. Refactorizar el código asegurando que las pruebas sigan pasando
// First, we wrote the test for a country-based order quantity limiter
import { describe, expect, it } from 'vitest'
import { run } from './order-quantity-limiter'
import { CountryCode } from '../generated/api'

describe('order quantity limiter', () => {
  it('limits orders to 5 items for Region A', () => {
    const result = run({
      cart: {
        deliveryGroups: [{ deliveryAddress: { countryCode: 'REGION_A' } }],
        lines: [{ quantity: 6 }],
      },
    })

    expect(result.errors[0].localizedMessage).toContain('cannot order more than 5 items')
  })

  it('allows orders within limits', () => {
    const result = run({
      cart: {
        deliveryGroups: [{ deliveryAddress: { countryCode: 'REGION_A' } }],
        lines: [{ quantity: 5 }],
      },
    })

    expect(result.errors).toHaveLength(0)
  })
})

// Then we implemented the function to pass the tests
export function run(input) {
  const regionLimits = { REGION_A: { limit: 5, name: 'Region A' } }
  const totalQuantity = input.cart.lines.reduce((sum, line) => sum + line.quantity, 0)
  const region = input.cart.deliveryGroups[0]?.deliveryAddress?.countryCode

  if (region && regionLimits[region] && totalQuantity > regionLimits[region].limit) {
    return {
      errors: [
        {
          localizedMessage: `You cannot order more than ${regionLimits[region].limit} items when shipping to ${regionLimits[region].name}.`,
          target: '$.cart',
        },
      ],
    }
  }

  return { errors: [] }
}

TDD nos ayudó a:

  • Definir claramente los requisitos antes de implementar
  • Manejar correctamente casos límite
  • Crear una suite de pruebas completa que evitara regresiones
  • Producir código más limpio y modular

Funciones de Shopify con GraphQL

Creé varias funciones de Shopify usando GraphQLSe abre en una nueva pestaña que permitieron:

  • Aplicaciones de descuentos personalizados
  • Recomendaciones de productos personalizadas
  • Lógica de validación y procesamiento de pedidos
  • Experiencias de pago mejoradas

Estas funciones se construyeron con un fuerte enfoque en pruebas y mantenibilidad.

Creación de plantillas

Una de las contribuciones más importantes fue la creación de una plantilla de aplicación Shopify lista para producciónSe abre en una nueva pestaña que incluía:

Esta plantilla redujo significativamente el tiempo necesario para iniciar nuevos proyectos, asegurando calidad y consistencia.

Documentación y código listo para IA

Innovamos haciendo que las bases de código fueran “listas para IA” mediante:

  1. Documentación exhaustiva: Explicando no solo el qué, sino el porqué de las decisiones
  2. Cursor Rules: Archivos .cursorrulesSe abre en una nueva pestaña con guías específicas del proyecto
  3. Patrones consistentes: Estructuras predecibles para facilitar la comprensión por humanos y IA

Esto mejoró la productividad al permitir a las IA dar sugerencias más relevantes.

El archivo de cursor rules contenía pautas de desarrollo simplificadas que ayudaban a las herramientas de IA a comprender nuestras convenciones de proyecto, estándares de codificación y decisiones arquitectónicas. Este enfoque mejoró significativamente la productividad de los desarrolladores al permitir que los asistentes de IA ofrecieran sugerencias más relevantes según el contexto.

Aquí tienes un extracto simplificado de nuestras pautas de desarrollo:

Development Guidelines for Remix + Shopify (Simplified)

Code Style:
- Write concise TypeScript code with accurate examples
- Follow Remix framework conventions
- Use descriptive variable names with auxiliary verbs
- Ensure separation between UI, state, and business logic

TypeScript Usage:
- Prefer interfaces over types (except for utility types)
- Avoid enums; use object maps or union types
- Use strict mode for better type safety

Performance:
- Minimize useState and useEffect
- Use Remix's loader functions for data fetching
- Implement code splitting and lazy loading

Testing:
- Write unit tests with Vitest
- Implement integration tests with Playwright
- Test both success and failure scenarios

Ver las guías completas aquíSe abre en una nueva pestaña

Implementación de CI/CD

También creé una plantilla para temas internos de Shopify que incluía:

Compartiendo conocimiento y comunidad

Además del desarrollo, aporté a la presencia online de Lightspace:

Resultados e impacto

La colaboración con Lightspace dio como resultado:

  1. Mayor eficiencia de desarrollo: Las plantillas y los pipelines CI/CD redujeron el tiempo de configuración y garantizaron la consistencia.
  2. Mayor calidad de código: Las pruebas estandarizadas y los procesos de aseguramiento de calidad mejoraron la fiabilidad.
  3. Capacidades ampliadas: Las aplicaciones y funciones personalizadas de Shopify expandieron lo que era posible en la plataforma.
  4. Transferencia de conocimiento: Los miembros del equipo adquirieron experiencia a través de la documentación y pair programming

¿Quieres mejorar tus flujos de desarrollo con mejores prácticas y automatización?

Hablemos sobre cómo puedo ayudar a tu equipo.

Reserva una llamada conmigo →

Conclusión

Trabajar con LightspaceSe abre en una nueva pestaña fue una experiencia enriquecedora que demostró cómo la mejores prácticas, la automatización y la arquitectura bien pensada pueden transformar el desarrollo. Los procesos y plantillas creados siguen aportando valor como base para nuevos proyectos.

César Alberca