¿Cómo construir un backend con VS Code?

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 https //www back4app com/mcp 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 https //blogger 6rhmkal0 b4a run/ requisitos previos para seguir este tutorial, necesitas tener lo siguiente una cuenta de back4app puedes https //www back4app com/signup 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 crea un backend llamado “blogger” comienza agregando una clase post con los siguientes campos título y cuerpo como cadenas requeridas, un slug único, un archivo heroimage opcional almacenado en el bucket de back4app, un puntero de autor a la clase user incorporada, contadores para commentcount y viewcount (todos comenzando en 0), una cadena de estado limitada a borrador o publicado, y una fecha publishedat establecida automáticamente cuando un borrador se convierte en publicado a continuación, crea una clase comment que almacene la cadena de contenido, el puntero de autor y el puntero de post agrega una clase view que registre cada vista de página con punteros de usuario opcionales y punteros de post requeridos 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 agrega autenticación de usuario a blogger extendiendo la clase de usuario incorporada cada cuenta debe proporcionar un `nombre de usuario`, una `contraseña` que tenga al menos ocho caracteres de longitud, y una dirección de `correo electrónico` antes de cada guardado, el código en la nube convierte el correo electrónico a minúsculas, luego verifica que ninguna otra cuenta ya lo esté utilizando; si la dirección está ocupada, se rechaza el guardado el mismo desencadenador también hace cumplir la regla de longitud de la contraseña expón cuatro funciones en la nube al frontend \ signup acepta un nombre de usuario, correo electrónico y contraseña crea el 	usuario, devuelve el nuevo registro e incluye el token de sesión para que el llamador esté instantáneamente autenticado \ login toma ya sea un nombre de usuario o correo electrónico más una contraseña y, al 	successo, devuelve el objeto de usuario y el token \ logout invalida el token de sesión actual 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 extiende la aplicación blogger agregando un gancho post beforesave que convierte el título de cada nueva publicación en un slug amigable con la url (minúsculas, espacios reemplazados por guiones y símbolos eliminados) luego verifica la clase post para asegurarse de que el slug sea único cuando se está creando la publicación, el gancho también establece `status` a `"published"` y registra la fecha actual en `publishedat` adjunta un gancho comment aftersave que, inmediatamente después de que se almacene un comentario, incrementa el `commentcount` de la publicación padre para que el total se mantenga preciso sin consultas adicionales 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 expón dos funciones en la nube para el frontend la primera, createpost, acepta `title`, `body`, y una `heroimage` opcional, requiere que el llamador esté conectado, asigna al llamador como `author`, adjunta la imagen si se proporciona, guarda la publicación y devuelve el objeto guardado la segunda, addcomment , requiere autenticación, toma `postid` y `content`, confirma que la publicación existe, crea un comentario vinculado tanto a la publicación como al llamador, lo guarda y devuelve el nuevo comentario para desincentivar el abuso, limita a cada usuario autenticado a cinco llamadas a createpost y quince llamadas a addcomment por minuto 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 implementa una función en la nube, updatepost, que requiera que el llamador esté conectado y verifique que el autor de la publicación coincida con request user acepta el objectid de la publicación junto con cualquier nuevo título, cuerpo o heroimage de reemplazo ignora o rechaza cualquier intento de suministrar un campo de estado; una vez que una publicación está publicada, su estado no puede cambiar a través de esta ruta después de cargar la publicación y confirmar la propiedad, aplica las actualizaciones permitidas y guarda si el título cambia, confía en el hook existente post beforesave para reconstruir un slug único devuelve la publicación actualizada al llamador 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 implementa una función en la nube, updatecomment, que requiera autenticación, acepte el objectid del comentario y el contenido revisado, luego obtén el comentario y confirma que el llamador es su autor aplica el nuevo contenido y guarda; el gancho comment aftersave deja automáticamente sin cambios el commentcount porque el comentario ya existe devuelve el comentario editado 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 agrega un desencadenador afterfind en la clase post para que cada vez que el backend devuelva una sola publicación por `objectid`, registre automáticamente una vista de página si la consulta es un feed o búsqueda que devuelve múltiples publicaciones, el desencadenador sale sin hacer nada dentro del desencadenador, recupera la publicación de `request results\[0]`, crea un nuevo objeto view , establece su puntero `post` a esa publicación y, cuando esté disponible, establece un puntero `viewer` a `request user`, guarda la vista, llama a `post increment("viewcount")`, guarda la publicación y devuelve `request results` para completar la consulta original 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 crea una función en la nube deletepost para que los autores puedan eliminar su propio trabajo el llamador debe haber iniciado sesión y debe pasar el objectid de la publicación comienza obteniendo la publicación y confirmando que su autor es igual a request user; si no, rechaza la solicitud después de verificar la propiedad, elimina el registro de la publicación, luego elimina todos los comentarios y vistas relacionados cuyo puntero de publicación coincida con la publicación eliminada finalmente, devuelve un breve mensaje de éxito junto con el número de registros eliminados 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 genera un frontend mínimo que coincida con el esquema e implemente toda la funcionalidad de la aplicación blog en mi cuenta de back4app y conecta el frontend al backend utilizando el sdk de javascript parse 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 genera un archivo docker para la interfaz de usuario de mi aplicación de blog o podrías usar el dockerfile proporcionado a continuación \# comenzar desde la imagen oficial ligera de nginx alpine from nginx\ alpine \# eliminar contenido predeterminado run rm rf /usr/share/nginx/html/ \# copiar tu sitio estático (html, css, assets) en el contenedor copy /usr/share/nginx/html/ \# exponer el puerto 80 expose 80 \# iniciar nginx en primer plano 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 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 https //blogger 6rhmkal0 b4a run/ 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