¿Cómo construir un backend con VS Code?
25 min
vs code 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 a construir el backend y la interfaz de usuario (ui) para una plataforma de blog utilizando el servidor mcp de back4app a través de vs code y desplegarlo en contenedores de back4app puntos clave aprende a construir un backend en back4app utilizando vs code y un servidor mcp 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 parte de back4app utilizando sus clases integradas despliega tu aplicación en unos pocos clics utilizando contenedores de back4app puedes ver el blog en vivo construido en este tutorial utilizando este enlace requisitos previos para seguir este tutorial, necesitas tener lo siguiente una cuenta de back4app puedes registrarte gratis si no tienes una vs code instalado en tu sistema familiaridad básica con los conceptos de desarrollo backend descripción del proyecto un blog en este tutorial, construirás un blog simple que te permitirá crear, editar, ver y eliminar publicaciones del blog también admite comentarios y lleva un registro del número de personas que han visto tus publicaciones del blog además de la user tabla proporcionada por defecto en back4app para la autenticación, tu blog tendrá tres tablas más publicaciones, comentarios y vistas cuando un usuario en tu blog crea una cuenta, back4app crea un nuevo registro en la user tabla y emite un token de sesión seguro que puedes reutilizar en solicitudes posteriores solo los usuarios autenticados pueden publicar publicaciones cuando se publica una publicación del blog, tanto los usuarios autenticados como los no autenticados pueden leer las publicaciones; sin embargo, solo los usuarios autenticados pueden comentar cada vez que se recupera una publicación del blog de la base de datos de back4app, el conteo de vistas se incrementa; para prevenir posibles abusos de esta función para inflar vistas, implementarás algunas medidas de seguridad alrededor de esto ahora que tienes una idea general de lo que estarás construyendo, en la siguiente sección, conectarás vscode al servidor mcp de back4app conectando vscode al servidor mcp de back4app navega al sitio web de back4app y haz clic en el nueva aplicación botón en la parte superior izquierda de la página en la pantalla “construir un backend”, nombra tu aplicación y haz clic en el crear botón en la página de resumen de tu aplicación, haz clic en el configuración de mcp botón en el modal “selecciona tu ide”, haz clic en vs code y sigue las instrucciones que se muestran en la pantalla para conectar automáticamente vscode al servidor mcp de back4app si seguiste la opción de instalación automática, debes reiniciar vs code en tu máquina antes de continuar alternativamente, puedes conectar el servidor mcp de back4app manualmente (lo que te da más control sobre la configuración) cambiando el modal a la sección manual después de seguir los pasos descritos en el modal para conectar el servidor mcp de back4app a vscode, puedes confirmar la conexión haciendo clic en la barra de búsqueda en tu ventana de vscode y buscando “>mcp listar servidores”, ejecuta el comando y deberías ver una lista de servidores mcp disponibles y su estado actual (ejecutándose/detenido) ahora que has conectado el servidor back4app mcp a vscode, en la siguiente sección, escribirás los prompts que construirán toda tu aplicación construyendo el backend de tu blog para crear tu backend usando vscode y github copilot, primero necesitas activar el modo agente en github copilot para activar el modo agente, abre el chat de github copilot presionando “ control + command + i” en macos, para windows, presiona “ctrl + i” en la página de chat, haz clic en el menú desplegable con la etiqueta “preguntar” y selecciona el modo “agente” a continuación, alimenta a github copilot con el prompt a continuación o similar para crear las clases requeridas para tu aplicación el prompt anterior crea un nuevo backend de back4app llamado “blogger” y lo pobla con una clase post, una clase comment y una clase view junto con sus propiedades requeridas cuando ejecutes este prompt con copilot, registrará los pasos que sigue en tu ventana de chat y te pedirá permiso en cada uno de los pasos que mutan tus datos para obtener los mejores resultados, ejecuta estos prompts con un modelo premium como 03 mini o claude sonnet 4 después de que copilot crea las clases requeridas, ahora tienes una forma estructurada de almacenar los datos de tu blog en la siguiente sección, implementarás la autenticación para tu aplicación implementando la autenticación los requisitos de autenticación para tu aplicación son simples, necesitas que los usuarios se registren e inicien sesión para poder crear publicaciones en el blog y comentar en las publicaciones del blog sin embargo, pueden leer las publicaciones del blog en tu aplicación sin estar autenticados puedes implementar los requisitos de autenticación para tu aplicación utilizando el siguiente aviso el aviso anterior agrega autenticación de usuario a tu aplicación la lógica de autenticación permite a tus usuarios crear una cuenta utilizando un correo electrónico, un nombre de usuario y una contraseña después de registrarse, el usuario inicia sesión automáticamente, y cuando un usuario cierra sesión, su sesión actual se invalida después de que copilot implemente tu lógica de autenticación, tus usuarios tendrán una forma segura de registrarse e iniciar sesión en la siguiente sección, implementarás la lógica necesaria para crear publicaciones y comentarios creando publicaciones y comentarios para implementar la función de crear publicaciones y comentarios, debes crear dos funciones en la nube y los ganchos de soporte que permitan a los usuarios autenticados publicar publicaciones y agregar comentarios en un flujo simplificado comienza creando los ganchos de soporte alimentando a copilot con el aviso a continuación o similar el aviso anterior implementa verificaciones/acciones realizadas antes de que se cree una publicación o un comentario para las publicaciones, se genera un slug único utilizando su título, luego el estado cambia a publicado, y la fecha actual se establece como la fecha de publicación para los comentarios, la publicación a la que está vinculada simplemente actualiza su conteo de comentarios ahora, crea las funciones en la nube asociadas con los hooks beforesave anteriores utilizando el aviso a continuación o similar el aviso anterior expone dos funciones de código en la nube que permiten a tus usuarios crear publicaciones y comentarios también protege tu aplicación de abusos al limitar a 5 creaciones de publicaciones y 15 comentarios por minuto la lógica principal asociada con la creación de publicaciones y comentarios ya ha sido implementada en los hooks beforesave creados en el aviso anterior; este solo expone una api para que el frontend la consuma después de que copilot implemente la lógica anterior, tus usuarios tendrán una forma de crear y comentar en publicaciones en la siguiente sección, implementarás la lógica requerida para actualizar esos comentarios y publicaciones, y también la lógica necesaria para contar las vistas en cada publicación del blog actualizando publicaciones, comentarios y vistas para implementar la funcionalidad que permite a los usuarios editar sus publicaciones, revisar sus propios comentarios y registrar vistas de página, necesitas dos funciones en la nube updatepost, updatecomment, y un aftertrigger puedes implementar la función en la nube updatepost utilizando el aviso a continuación o similar el aviso anterior crea una función que actualiza una publicación asegura que la actualización solo pueda ser realizada por el usuario que creó la publicación y regenera el slug si se cambia el título puedes implementar la función en la nube updatecomment utilizando el aviso a continuación o similar el aviso anterior crea una función que actualiza el comentario de una publicación la actualización solo puede ser realizada por el creador del comentario puedes implementar la función en la nube recordview utilizando el aviso a continuación o similar el aviso anterior crea un desencadenador afterfind en la clase post cada vez que el backend devuelve una sola publicación (obtenida por su objectid), el desencadenador crea automáticamente un nuevo registro de view que apunta a esa publicación (y al usuario actual, si ha iniciado sesión) e incrementa el viewcount de la publicación si la consulta devuelve múltiples publicaciones, el desencadenador no hace nada con esto, la mayor parte de la funcionalidad de tu blog está completa a continuación, implementarás la funcionalidad que permite a tus usuarios eliminar sus publicaciones eliminando publicaciones para eliminar una publicación, un usuario debe ser quien la creó una vez que se elimina una publicación, todo su contenido asociado (vistas, comentarios) se elimina junto con ella puedes implementar la funcionalidad para eliminar publicaciones utilizando el aviso a continuación o similar el aviso anterior implementa la lógica requerida para eliminar publicaciones con estas adiciones, tu backend ahora cubre todo el ciclo de vida del contenido, permitiendo a los autores publicar, revisar y eliminar, permitiendo a los lectores discutir, y manteniendo estadísticas de vistas precisas para cada publicación en la siguiente sección, generarás una interfaz de usuario para tu aplicación generando tu frontend puedes aprovechar el contexto que copilot tiene al 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 usando el aviso anterior o uno similar, copilot generará un frontend que coincida con el esquema de tu backend y lo conectará a tu backend ejecuta la aplicación utilizando las instrucciones proporcionadas por copilot y haz los ajustes que desees ahora que tu proyecto está completo, en la siguiente sección, lo desplegarás 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 aviso o podrías usar el dockerfile proporcionado a continuación 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 implementación, haga clic en el botón “implementar una aplicación web” y dé acceso a back4app al repositorio que desea implementar seleccione la aplicación que desea implementar, complete los detalles de la implementación y haga clic en el implementar botón hacer clic en el botón inicia el proceso de implementación, y una vez que se complete, obtendrá una url en vivo para la aplicación puede ver el blog en vivo construido en este tutorial usando este enlace conclusión en este artículo, construyó una plataforma de blogs completa utilizando el servidor back4app mcp y github copilot, y luego la implementó con back4app containers esto muestra la suite completa de herramientas de back4app que le permite pasar de la ideación al lanzamiento con un mínimo de sobrecarga como siguiente paso, puede extender el proyecto con características como integración de redes sociales, notificaciones automáticas por correo electrónico para nuevos comentarios, funcionalidad de búsqueda avanzada o análisis sobre la participación en publicaciones y el comportamiento de los lectores 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 github copilot, asegurarlas con hooks beforesave y desplegar actualizaciones a través de back4app containers este enfoque le permite agregar nuevas características a su blog sin interrumpir a los usuarios