¿Cómo construir un backend con Windsurf?

el ide de windsurf te permite integrar herramientas externas que tienen un servidor mcp activo a través del protocolo mcp esto te permite ejecutar tareas y leer datos de esas fuentes sin salir de tu ide utilizando prompts en este tutorial, aprenderás cómo construir el backend y la interfaz de usuario (ui) para un programador de citas utilizando el servidor mcp de back4app a través del ide de windsurf y desplegarlo en contenedores de back4app conclusiones clave puedes ver el rastreador de gastos personales en vivo construido en este tutorial utilizando este enlace aprende cómo construir un backend en back4app utilizando windsurf y el servidor mcp de back4app explora cómo se modelan las relaciones entre clases en back4app explora cómo se implementan la autenticación y la autorización basada en roles por back4app utilizando sus clases integradas despliega tu aplicación en unos pocos clics utilizando contenedores de back4app requisitos previos para seguir este tutorial, necesitas tener lo siguiente una cuenta de back4app puedes registrarte gratis si no tienes una windsurf ide instalado en tu sistema familiaridad básica con conceptos de desarrollo backend descripción del proyecto programador de citas en este tutorial, construirás un programador de citas que soporta dos roles proveedores que registran los servicios que ofrecen y clientes que reservan esos servicios los proveedores definen cada servicio con un nombre, duración y precio los clientes luego navegan por los servicios disponibles, eligen una fecha y hora, y confirman una reserva una vez reservada, la cita aparece en los paneles de control tanto del proveedor como del cliente, con un estado que puedes actualizar o cancelar según sea necesario este proyecto tendrá 4 clases usuario , rol , cita , y servicio las clases usuario y rol son parte de las clases integradas de back4app y se utilizarán para la autenticación y los controles de acceso la clase servicio definirá los detalles de cada oferta, su nombre, duración y precio, para que los proveedores puedan listar lo que ofrecen y los clientes puedan explorar las ofertas la clase cita vinculará a un cliente y a un proveedor a un servicio elegido en campos específicos de starttime y endtime, rastreará su estado (“pendiente”, “confirmado”, “cancelado”), y utilizará acls a nivel de objeto para que solo el cliente que reserva y su proveedor puedan leer o modificar cada cita aquí hay un diagrama de relación de entidades para ayudarte a visualizar el esquema ahora que tienes una idea general de lo que construirás, en la siguiente sección, configurarás el servidor mcp de back4app con windsurf y comenzarás a escribir indicaciones que crearán la aplicación descrita en esta sección conectando back4app y windsurf mira el video a continuación para un tutorial sobre cómo conectar windsurf a back4app para conectar el servidor mcp de back4app a windsurf, primero necesitas una clave de cuenta de back4app para recuperarla, inicia sesión en tu cuenta de back4app y en tu panel de usuario, haz clic en el menú desplegable en la barra de navegación y selecciona account keys en la account keys página, dale un nombre a tu clave de cuenta, copia la clave generada y guárdala de forma segura a continuación, abre windsurf y haz clic en el ícono de martillo en el asistente de cascade esto abre un menú desplegable con un botón de configuración, haz clic en él el botón de configuración te lleva a la página de administrar complementos haga clic en el botón “ver configuración en bruto” y pegue el objeto de configuración a continuación en el archivo { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } reemplace \<account key> con su clave de cuenta, guarde el archivo y actualice windsurf si está siguiendo este tutorial en una máquina con windows, cambie el valor de la clave del comando a npx cmd creando el backend con windsurf para crear el backend del programador de citas con windsurf, primero debe alimentar al asistente cascade con un aviso que le indique que cree una nueva aplicación con el nombre que especificó, junto con las tablas de base de datos requeridas puede lograr esto para el programador de citas utilizando el aviso a continuación create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict este aviso le indica a windsurf que esqueleto un backend de “programador de citas” creando dos nuevos modelos de datos servicio y cita, con las relaciones y campos apropiados también implementa un gancho beforesave del lado del servidor en cita que previene cualquier reserva superpuesta para el mismo proveedor windsurf registra todas las solicitudes que realiza mientras intenta llevar a cabo la tarea, y tan pronto como termina la ejecución, proporcionará un resumen de la tarea ahora que se han creado las clases de la aplicación y de la base de datos, a continuación, puedes implementar la autenticación para tu backend implementación de autenticación y autorización en el backend para esta aplicación, necesitas asegurarte de que los usuarios puedan iniciar sesión de forma segura y solo hacer las cosas que deberían poder hacer por ejemplo, solo los usuarios que se registren como proveedores deberían poder listar un servicio, y solo un proveedor que lista un servicio debería poder actualizar el servicio puedes lograr esto para el programador de citas utilizando el siguiente aviso update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation este aviso anterior instruye a windsurf para habilitar el registro e inicio de sesión con correo electrónico/contraseña, definir y asignar roles de “proveedor” y “cliente”, hacer cumplir permisos a nivel de clase para que solo los proveedores gestionen servicios mientras que los usuarios autenticados manejen citas, y aplicar acls de objeto más un gancho beforesave en cita para otorgar acceso solo al cliente de la reserva y al proveedor y verificar sus roles ahora que tienes configurada la autenticación y la autorización basada en roles, puedes implementar los endpoints crud requeridos para que la aplicación funcione implementando la funcionalidad crud para servicios y citas tu aplicación necesita permitir a los usuarios autenticados crear servicios (proveedores) y reservar citas en servicios ya creados (clientes) los usuarios también deben poder editar, eliminar y ver servicios y citas puedes lograr esto para el programador de citas utilizando el siguiente aviso add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response este aviso instruye a windsurf para generar puntos finales de cloud code para las clases servicio y cita, implementando operaciones de crear, leer, actualizar y eliminar mientras se hace cumplir la autenticación y las verificaciones basadas en roles para que solo los proveedores puedan gestionar servicios y solo el cliente que reserva o el proveedor asignado puedan gestionar sus citas generando tu frontend puedes aprovechar el contexto que windsurf tiene de crear tu backend en back4app para pedirle que cree un frontend que coincida con el esquema y los requisitos de tu aplicación puedes lograr esto para el programador de citas utilizando el siguiente aviso generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react usando el aviso anterior o similar, windsurf generará un frontend que coincida con el esquema de tu backend y lo conectará a tu backend los archivos del proyecto se almacenan en /\<user>/cascadeprojects/\<app name> cd en la aplicación y ejecútala utilizando las instrucciones proporcionadas en el readme, y haz los ajustes que desees ahora, tu proyecto está completo en la siguiente sección, lo desplegarás en contenedores de back4app desplegando tu aplicación en contenedores de back4app los contenedores de back4app te permiten desplegar tus aplicaciones fácilmente utilizando un dockerfile y un repositorio de github para desplegar tu aplicación en contenedores de back4app, primero necesitas incluir un dockerfile en tu repositorio puedes pedirle a claude que genere uno utilizando el siguiente aviso generate a docker file for the ui of my appointment scheduler o también podrías usar el dockerfile proporcionado a continuación from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] después de agregar el dockerfile y subirlo a github, navega a tu panel de aplicaciones de back4app, haz clic en el panel desplegable y selecciona la opción plataforma de despliegue web en la página de despliegue, haz clic en el botón “desplegar una aplicación web” y dale a back4app acceso al repositorio que deseas desplegar selecciona la aplicación que deseas desplegar, completa los detalles del despliegue y haz clic en el botón desplegar hacer clic en el botón inicia el proceso de implementación, y una vez que se complete, obtendrás una url en vivo para la aplicación puedes ver el rastreador de gastos personales en vivo construido en este tutorial usando este enlace conclusión en este artículo, construiste un programador de citas utilizando el servidor mcp de back4app y windsurf, luego lo implementaste con back4app containers esto muestra la suite completa de herramientas de back4app que te permite pasar de la ideación al lanzamiento con un mínimo de sobrecarga como siguiente paso, puedes extender el proyecto con características como sincronización de calendarios, recordatorios automáticos por correo electrónico o análisis de tendencias de reservas todas estas mejoras encajan naturalmente en el mismo flujo de trabajo de back4app diseñar y definir nuevas clases o funciones en la nube con windsurf asegurarlas con hooks beforesave y desplegar actualizaciones a través de back4app containers este enfoque te permite agregar nuevas características a tu aplicación sin interrumpir a los usuarios