¿Cómo construir un backend utilizando Claude?
18 min
el desarrollo tradicional de backend a menudo requiere una extensa codificación, gestión de infraestructura y recursos de desarrollo significativos sin embargo, aprovechar plataformas modernas de backend como servicio puede simplificar drásticamente este proceso back4app simplifica este proceso al proporcionar un conjunto integral de herramientas diseñadas para acelerar tu flujo de trabajo una de estas herramientas es el protocolo de contexto de modelo (mcp) de back4app , que te permite construir un backend completo a partir de un llm como claude utilizando solo lenguaje natural en este tutorial, aprenderás a construir el backend y la interfaz de usuario (ui) para un rastreador de gastos personal utilizando el servidor mcp de back4app a través de claude y desplegarlo en contenedores de back4app conclusiones clave puedes ver el rastreador de gastos personal en vivo construido en este tutorial utilizando este enlace descubre cómo crear un backend en back4app en minutos utilizando los prompts de claude y el servidor mcp ve los hooks de cloud code en acción mientras aseguran escrituras solo para el propietario y mantienen los resúmenes mensuales precisos sin infraestructura adicional aprende a crear un frontend responsivo que se conecte a tus apis de parse a través del sdk de javascript, todo generado por claude explora el despliegue con un clic utilizando los contenedores de back4app, llevando tu repositorio de github a producción con cero sobrecarga operativa requisitos previos para seguir este tutorial, necesitas tener lo siguiente una cuenta de back4app puedes registrarte gratis si no tienes una claude de escritorio instalado en tu sistema familiaridad básica con conceptos de desarrollo backend descripción del proyecto rastreador de gastos personal construirás un backend para el seguimiento de gastos que claude puede consultar y actualizar en tiempo real tu rastreador de gastos puede registrar tus gastos organizados por categorías y proporciona resúmenes mensuales y anuales de tus hábitos de gasto el proyecto tiene 4 modelos de datos usuarios esta tabla almacena las credenciales de la cuenta y el límite de gasto mensual general para cada persona los campos incluyen correo electrónico, contraseña, presupuesto mensual y marcas de tiempo gasto esta tabla almacena cada compra aquí fecha, monto, categoría y una descripción categoría esta tabla almacena etiquetas definidas por el usuario para agrupar gastos los campos incluyen id, user id, nombre y marcas de tiempo resúmenes mensuales esta tabla almacena totales pre agregados para chequeos rápidos de panel y presupuesto los campos incluyen user id , mes , total gastado , y marcas de tiempo cada vez que registras un gasto, un beforesave disparador de cloud code encuentra (o crea) el resumenmensual de ese mes y aumenta sus totales y deduce la cantidad de tu presupuesto mensual aquí hay un diagrama de relación de entidades para ayudarte a visualizar el esquema ahora que tienes una idea general de lo que estarás construyendo, en la siguiente sección configurarás el servidor mcp de back4app con claude desktop y comenzarás a escribir indicaciones que crearán la aplicación descrita en esta sección conectando back4app y claude desktop para conectar el servidor mcp de back4app a claude desktop, 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 claves de cuenta 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, necesitas modificar el archivo de configuración de claude desktop para incluir el servidor mcp de back4app por defecto, el archivo de configuración de claude desktop no existe en tu sistema puedes crear el archivo de configuración navegando a la configuración de claude desktop en tu sistema, seleccionando la developer opción, y haciendo clic en el edit config botón, o puedes seguir esta guía esto creará un archivo de configuración en (si no tienes uno ya) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …y mostrará el archivo en tu sistema de archivos abre el archivo de configuración con cualquier editor de texto de tu elección y agrega la configuración a continuación { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } reemplaza \<account key> con tu clave de cuenta, guarda el archivo y reinicia claude desktop si estás siguiendo este tutorial en una máquina con windows, cambia el valor de la clave de comando a npx cmd con estas configuraciones en su lugar, estás listo para comenzar a construir tu backend de back4app con el servidor mcp de back4app y claude desktop creando el backend con claude desktop para crear el backend del proyecto descrito anteriormente, debes crear una nueva aplicación en back4app y en la aplicación, crear las tablas de base de datos apropiadas puedes lograr esto utilizando claude desktop y un prompt tu prompt debe instruir a claude para crear una nueva aplicación llamada “rastreador de gastos personales”, definir cuatro clases de mongodb ( user, category, expense y monthlysummary) con los campos requeridos, relaciones de puntero, valores predeterminados y controles de acceso, e incrustar ganchos de cloud code que actualicen los resúmenes mensuales cada vez que cambie un gasto, bloqueen escrituras no autorizadas y prevengan nombres de categoría duplicados para un usuario un ejemplo de prompt que logra esto se proporciona a continuación create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified cuando envíes el prompt, recibirás una serie de ventanas emergentes de claude solicitando permiso para realizar tareas específicas, como crear la aplicación las ventanas emergentes brindan una oportunidad para revisar y autorizar cada acción potencialmente irreversible, como crear una nueva aplicación o agregar clases, asegurando que nada se implemente, facture o exponga sin tu consentimiento explícito actúan como una salvaguarda contra cambios accidentales, asegurando que mantengas el control de tus recursos de back4app a continuación, implementa la autenticación de usuarios en tu aplicación dándole a claude una serie de indicaciones que le instruyan para agregar funciones en la nube de registro e inicio de sesión basadas en tokens, eliminar el acceso público a la clase user, mantener la lectura pública pero escritura solo para el propietario en categoría, gasto y resumenmensual, y crear guardias beforesave que rechacen cualquier escritura cuando la solicitud no esté autenticada a continuación se muestra una lista de ejemplos de indicaciones para cada funcionalidad registrarse update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token esta indicación crea el código en la nube para el registro iniciar sesión update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success esta indicación crea un inicio de sesión correspondiente para el código en la nube permisos a nivel de clase update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary esta indicación asegura que solo los propietarios de la categoría, gasto y resumen mensual puedan modificarlo ejecutar estas indicaciones concluye toda tu lógica de backend en la siguiente sección, generarás un frontend para tu backend generando el frontend dado que claude creó tu backend de back4app, recuerda cómo es el esquema y las respuestas aprovechando ese contexto, puedes pedirle que cree una interfaz de usuario que coincida con el esquema de la aplicación creada a continuación se proporciona un ejemplo de solicitud generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk deberías obtener una interfaz de usuario completa copia el código proporcionado en un ide como vs code y sube el código a github en la siguiente sección, desplegarás tu frontend en los contenedores de back4app desplegando tu aplicación en los 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 los contenedores de back4app, primero necesitas incluir un dockerfile en tu repositorio puedes pedirle a claude que genere uno utilizando el siguiente prompt generate a docker file for the ui of my personal expense tracker o podrías usar el dockerfile proporcionado a continuación \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] después de agregar el dockerfile y subirlo a github, navega a tu panel de aplicaciones de back4app, haz clic en el dashboard desplegable y selecciona la opción web deployment platform en la página de despliegue, haz clic en el botón “deploy a web app” 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 deploy 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 una aplicación que rastrea tus gastos utilizando el servidor mcp de back4app y claude, luego la implementaste usando contenedores de back4app esto muestra la suite completa de herramientas de back4app que te permite construir aplicaciones desde la ideación hasta el lanzamiento con un mínimo de sobrecarga como siguiente paso, puedes extender el proyecto con características como plantillas de gastos recurrentes, importaciones de csv o notificaciones push para sobrepasos de presupuesto todas estas mejoras encajan naturalmente en el mismo flujo de trabajo de back4app define nuevas clases o funciones en la nube con claude, asegúralas con hooks beforesave y despliega actualizaciones a través de contenedores de back4app este enfoque te permite mejorar tu aplicación sin interrumpir a los usuarios o cambiar de proveedores de hosting