Tutoriales
Intermedio
Aprenderás
- Requisitos de aplicaciones complejas
- Arquitectura multi-inquilino
- Suscripción y facturación
- Funciones de colaboración en equipo
- Panel de analíticas
- Despliegue en Cloudflare
Construye una Aplicación Web SaaS
Crea un SaaS multi-inquilino listo para producción en 30 minutos
¿Listo para construir algo más complejo? En este tutorial, crearás una aplicación SaaS completa: una herramienta de gestión de proyectos con equipos, suscripciones y analíticas. Mira cómo Conductor planifica y Virtuoso construye toda tu aplicación en contenedores Docker reales.
Qué Construiremos
Un SaaS de gestión de proyectos listo para producción con: espacios de trabajo en equipo, permisos basados en roles, suscripciones de Stripe, colaboración en tiempo real, panel de analíticas y aislamiento de datos multi-inquilino, todo desplegado en el edge global.
Requisitos Previos
- Haber completado el tutorial de Primeros Pasos
- Se recomienda una cuenta Nxcode Pro ($20/mo) para aplicaciones complejas
- Comprensión básica de conceptos SaaS (opcional)
Describiendo una Aplicación Compleja
Para aplicaciones SaaS, dar requisitos detallados a Conductor conduce a mejores resultados. Así es como describimos nuestro proyecto de gestión de proyectos:
Construye una aplicación SaaS de gestión de proyectos:
Funciones Principales:
- Espacios de trabajo en equipo con sistema de invitación
- Proyectos con tareas, subtareas y plazos
- Tablero Kanban y vistas de lista
- Actualizaciones en tiempo real cuando los miembros del equipo realizan cambios
- Archivos adjuntos y comentarios
- Feed de actividad y notificaciones
Gestión de Usuarios y Equipos:
- Registro de usuarios con verificación de correo electrónico
- Creación de equipos e invitaciones a miembros
- Acceso basado en roles: Propietario, Administrador, Miembro, Visor
- Espacios de trabajo personales y de equipo
Sistema de Suscripción:
- Nivel gratuito: 1 proyecto, 3 miembros de equipo
- Nivel Pro ($10/mo): Proyectos ilimitados, 10 miembros
- Nivel Business ($25/mo): Todo ilimitado + soporte prioritario
- Integración con Stripe para facturación
Analíticas:
- Seguimiento del progreso del proyecto
- Métricas de productividad del equipo
- Seguimiento de tiempo por tarea
- Exportación de informes a PDF/CSV
Diseño: Interfaz limpia y moderna con soporte para modo oscuroCómo Conductor Maneja Requisitos Complejos
Para una aplicación SaaS, Conductor creará un plan integral con múltiples fases:
Fase 1: Cimientos
- 1Configurar Next.js con TypeScript
- 2Configurar el esquema de la base de datos para multi-tenancy
- 3Implementar autenticación con JWT
- 4Crear aislamiento de datos de espacio de trabajo/equipo
Fase 2: Funciones Principales
- 1Construir CRUD de proyectos con permisos
- 2Crear sistema de gestión de tareas
- 3Implementar interfaz de tablero Kanban
- 4Añadir actualizaciones en tiempo real con WebSocket
Fase 3: Colaboración
- 1Gestión de invitaciones y miembros del equipo
- 2Comentarios y feed de actividad
- 3Carga de archivos y adjuntos
- 4Sistema de notificaciones
Fase 4: Monetización
- 1Configuración de integración con Stripe
- 2Gestión de suscripciones
- 3Aplicación de límites de uso
- 4Portal de facturación
Fase 5: Analíticas y Pulido
- 1Panel de analíticas
- 2Generación de informes
- 3Implementación de modo oscuro
- 4Configuración de despliegue en Cloudflare
Conductor
Estoy planificando tu aplicación SaaS de gestión de proyectos. Unas preguntas: 1. Para las actualizaciones en tiempo real, ¿deberían todos los miembros del equipo ver los cambios al instante o solo refrescar bajo demanda? 2. ¿Límite de almacenamiento de archivos por nivel? 3. ¿Debería el nivel gratuito tener acceso a analíticas básicas? 4. ¿Alguna necesidad específica de manejo de webhooks de Stripe?
User
Tiempo real para todos. Nivel gratuito: 100MB, Pro: 5GB, Business: ilimitado. Analíticas básicas para todos. Los webhooks estándar de Stripe están bien.
Conductor
¡Entendido! He creado 24 tareas en 5 fases con criterios de aceptación claros. Cada tarea se ejecutará en Docker con compilaciones y pruebas reales. Este es un proyecto grande, por lo que la ejecución tomará unos 15-20 minutos. ¡Empezando ahora!
Entendiendo la Arquitectura Multi-Inquilino
Virtuoso implementará un aislamiento multi-inquilino adecuado. Esto es lo que se construye:
Aislamiento de Espacios de Trabajo
Cada equipo obtiene un espacio de trabajo único. Todas las consultas están limitadas para evitar la filtración de datos entre inquilinos.
Acceso Basado en Roles
Permisos verificados tanto a nivel de API como de UI. Los Propietarios pueden hacer todo, los Visores son de solo lectura.
Aplicación de Suscripciones
El middleware verifica el nivel de suscripción antes de permitir acciones. Los usuarios del nivel gratuito reciben avisos amigables para actualizar.
Portabilidad de Datos
Los usuarios pueden exportar sus datos en cualquier momento. Esto genera confianza y es obligatorio en muchas regiones.
Observando Compilaciones Complejas en Docker
Para una aplicación SaaS, Virtuoso ejecuta muchos más pasos de compilación:
Esquema creado y migrado en un contenedor aislado
Webhooks probados con Stripe CLI en Docker
Funcionalidad en tiempo real probada con clientes simulados
Todas las combinaciones de roles/acciones probadas automáticamente
Pruebas de rendimiento básicas para asegurar que la aplicación escale
A diferencia de los generadores de código simples, Nxcode realmente ejecuta el modo de prueba de Stripe, crea equipos simulados y verifica que las actualizaciones en tiempo real funcionen. Si algo falla, Virtuoso lo corrige automáticamente.
Suscripción y Facturación
Virtuoso construye una integración completa con Stripe:
- Flujo de pago con selección de precio
- Portal del cliente para gestión de autoservicio
- Manejo de webhooks para cambios de suscripción
- Medición de uso para facturación por exceso
- Generación de facturas e historial
- Prorrateo para actualizaciones a mitad de ciclo
Conductor pregunta sobre los requisitos de Stripe por adelantado porque el código de facturación es crítico. Cada ruta de pago se prueba en Docker antes de que la tarea se apruebe.
Panel de Analíticas
Tu SaaS incluye un panel de analíticas integrado:
Progreso del Proyecto
Tareas completadas vs. totales, gráficos de burndown
Actividad del Equipo
Quién está contribuyendo, mapas de calor de actividad
Seguimiento de Tiempo
Tiempo dedicado por tarea, totales del proyecto
Métricas de Suscripción
MRR, tasa de cancelación, tasa de actualización (para administradores)
Desplegando tu SaaS
Despliegue con un solo clic en el edge global de Cloudflare:
- Haz clic en "Desplegar" cuando todas las tareas se aprueben
- La aplicación se compila para producción (minificada, optimizada)
- Se despliega en más de 300 ubicaciones edge de Cloudflare
- Obtén tu URL pública con HTTPS automático
Funciones Listas para Producción
- CDN global para tiempos de carga rápidos en todas partes
- Certificado SSL automático
- Protección DDoS incluida
- Conecta un dominio personalizado en cualquier momento
- Variables de entorno para claves API
Monetiza con la Economía del Creador
Convierte tu SaaS en ingresos recurrentes:
Publicar
Aparece en el marketplace de Nxcode con tu propio precio
Establecer Niveles
Configura periodos de prueba gratuitos y niveles de suscripción de pago
Gana el 70%
Quédate con el 70% de todos los ingresos por suscripción
Ejemplo: 200 usuarios en el nivel Pro de $10/mo = $1,400/mo de ingresos pasivos (después de la participación del 70%)
Tu SaaS viene con Stripe integrado: los usuarios pagan a través de tu cuenta de Stripe, tú te quedas con el 100% menos las comisiones de Stripe. O usa la Economía del Creador para facturación gestionada.
Lo que has Construido
- Arquitectura SaaS multi-inquilino
- Espacios de trabajo en equipo con acceso basado en roles
- Facturación de suscripciones con Stripe
- Funciones de colaboración en tiempo real
- Panel de analíticas con informes
- Despliegue de producción en el edge global
Tu SaaS no fue ensamblado a partir de plantillas: cada componente fue construido, probado y verificado en contenedores Docker reales. Esa es calidad de nivel empresarial sin el cronograma empresarial.
Próximos Pasos
¿Listo para Construir tu SaaS?
Comienza a construir tu aplicación SaaS lista para producción ahora.