Как построить бекенд, используя курсор?

современные веб и мобильные проекты часто застревают на самом первом препятствии превращении идеи в готовую к производству серверную часть ручное проектирование модели данных, написание шаблонной логики crud, развертывание инфраструктуры, а затем поддержание синхронизации с фронтендом может занять дни или недели ценного времени инженеров этот учебник демонстрирует, как платформа серверной части back4app, протокол model context platform (mcp) и ai ассистированный ide от cursor вместе устраняют это трение пройдя через создание простого приложения для управления событиями, вы увидите, как эти инструменты позволяют вам создать, развернуть и интегрировать полностью функциональную серверную часть и соответствующий фронтенд основные выводы узнайте, как создать готовую к производству серверную часть на back4app за считанные минуты, используя ai агента cursor и протокол mcp получите представление о том, как обеспечить чистый контроль доступа на основе ролей с помощью повторно используемого помощника validateuserrole, который аккуратно разделяет рабочие процессы организаторов и участников узнайте, как создать и подключить адаптивный фронтенд на next js, который автоматически использует ваши rest api back4app изучите контейнеризацию и развертывание в один клик с помощью контейнеров back4app, чтобы развернуть ваше полностековое приложение event manager из github в рекордные сроки обзор проекта в этом учебнике вы создадите простое приложение для управления событиями , которое позволяет пользователям создавать события, регистрироваться на интересующие их события, просматривать предстоящие или зарегистрированные события и отменять свои регистрации при необходимости вы создадите бэкенд этого приложения, используя инструмент mcp от back4app инструмент mcp позволяет большие языковые модели (llms) https //en wikipedia org/wiki/large language model такие как claude 4 sonnet и ai агенты/инструменты, такие как cursor, для бесшовного взаимодействия с вашим бэкендом back4app с помощью mcp ваш ai код помощник может создавать приложения, управлять базами данных (операции crud, запросы), развертывать облачный код, обрабатывать аутентификацию пользователей и многое другое в ваших проектах back4app для этого учебника вы будете использовать cursor , редактор кода на основе ии, который интегрирует большие языковые модели, чтобы помочь вам писать, рефакторить и понимать код в вашей среде разработки с помощью cursor и mcp вы можете инициировать действия бэкенда, используя естественный язык, что делает процесс разработки быстрее и интуитивнее настройка проекта теперь, когда у вас есть лучшее понимание того, что вы собираетесь достичь в этом учебнике, приступайте к настройке требований вашего проекта для создания бэкенда с помощью cursor и mcp предварительные требования чтобы завершить этот учебник, вам понадобятся следующие вещи учетная запись back4app вы можете зарегистрироваться бесплатно https //www back4app com/signup если у вас ее нет cursor https //www cursor com/ установленный на вашем компьютере для разработки базовое знакомство с концепциями разработки на стороне сервера node js версии 22 или выше шаг 1 создайте проект back4app первый шаг — войти в свою учетную запись back4app и создать новый проект с именем “eventmanager ” шаг 2 создайте ключ учетной записи вам нужно сгенерировать ключ учетной записи back4app, чтобы настроить mcp внутри cursor и предоставить серверу mcp доступ к вашей учетной записи back4app перейдите в настройки ключей вашей учетной записи когда вы там окажетесь, дайте вашему ключу учетной записи имя и сгенерируйте его, нажав на кнопку + теперь вы должны увидеть сгенерированный ключ учетной записи вместе с его датой истечения шаг 3 настройте mcp внутри cursor посмотрите это видео, чтобы узнать, как подключить cursor и back4app откройте приложение cursor и перейдите в настройки > настройки cursor > mcp, где вы найдете страницу для настройки серверов mcp в cursor ai нажмите на кнопку “ добавить новый глобальный сервер mcp ” для создания файла mcp json вы будете писать ваши настройки для mcp внутри этого файла чтобы настроить сервер back4app mcp в cursor, вставьте следующие конфигурации в mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } теперь замените \<account key> на сохраненный ключ учетной записи back4app, который вы сгенерировали на шаге 3 если вы следуете этому руководству на машине с windows, измените значение ключа command на npx cmd с этими конфигурациями вы готовы начать создание своего бэкенда back4app с помощью back4app mcp и cursor создание бэкенда с помощью cursor и back4app ваш менеджер событий будет иметь следующие функции; пользователь может создать новое событие пользователь может зарегистрироваться на событие показать список событий, на которые зарегистрирован пользователь показать список предстоящих событий пользователя пользователь может отменить регистрацию на событие чтобы удовлетворить этим требованиям, вот пример схемы базы данных откройте курсор чат переключив панель ии, и продолжите выбирать режим агента для внесения изменений в ваше приложение кроме того, выберите предпочитаемую llm, такую как новая модель claude 4 sonnet внутри окна чата напишите запрос для генерации разработанной схемы пример запроса для достижения этого design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships вам нужно будет одобрить запрос на использование инструментов mcp после одобрения запрос будет выполнен вы должны получить ответ, что база данных была успешно создана вы можете подтвердить успех, проверив вашу панель управления для вновь созданных классов теперь, когда вы создали свой бэкенд и добавили таблицы базы данных вашего приложения, вы реализуете логику приложения реализация функций пользователя с помощью mcp в описании вашего приложения это приложение должно позволять отдельным типам пользователей выполнять различные задачи, такие как создание событий и регистрация на них здесь вы определите функции, созданные для обработки этих функций реализация контроля доступа основная утилита функции для приложения будет называться validateuserrole эта функция отвечает за проверку, какие функции доступны для каких ролей пользователей вы можете создать эту функцию с помощью следующего запроса \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error продолжайте и подтвердите, что utils js был создан с validateuserrole создание функции пользователя чтобы реализовать функцию создать пользователя необходимо передать имя пользователя , пароль , электронную почту, и роль любой может вызвать эту функцию реализуйте логику создания пользователя, используя приведенный ниже запрос \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames вы должны получить ответ, указывающий на то, что функция была успешно создана теперь вы можете создавать новых пользователей для вашего менеджера событий создание функции события роль организатора может создать новое событие для этого функция создаст новый объект события и проверит, что функцию вызывает пользователь с ролью организатора вы будете использовать ранее созданную утилитарную функцию для достижения этой проверки реализуйте эту логику, используя приведенный ниже запрос create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed функция будет создана внутри файла main js вы можете выполнить простой тест внутри cursor, используя фиктивные данные и вызывая открытый rest api back4app зарегистрироваться на функцию события чтобы пользователь мог зарегистрироваться на событие, он должен иметь роль участника все пользователи с этой ролью имеют доступ к 3 функциям первая — зарегистрироваться на созданные события эта функция создает новый объект регистрации и устанавливает логическое значение регистрации в true для пользователя введите следующий запрос или аналогичный, чтобы достичь этой логики generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message далее вам нужна функция для запроса всех событий, на которые зарегистрирован пользователь мы назовем эту функцию listupcomingevents создайте эту функцию с помощью запроса, подобного этому create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found подтвердите, что функция успешно создана в main js и при необходимости измените код вручную или с помощью подсказок курсора обратите внимание, что в этом запросе параметры функции не были указаны для ai агента cursor это демонстрирует, как агент использует mcp для вывода параметров, необходимых функции, путем изучения схемы базы данных тем не менее, всегда полезно предоставлять как можно больше контекста в ваших запросах функция отмены регистрации последней функцией, чтобы удовлетворить требования приложения, является функция отмены регистрации для реализации этого функция будет извлекать eventid и userid выбранной регистрации события и обновлять его булевое значение добавьте вышеуказанную логику в ваше серверное приложение, используя аналогичную подсказку create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure вы можете просмотреть весь код, созданный cursor и mcp, и при необходимости изменить его на вашем app dashboard → cloud code , как показано на изображении ниже с этими функциями вы теперь удовлетворили все требования для бэкенда вашего event manager приложения создайте фронтенд для вашего бэкенда с mcp, используя cursor теперь, когда ваш бэкенд успешно построен и развернут, вы создадите пользовательский интерфейс фронтенда для вашего приложения этот интерфейс будет использовать ваш бэкенд back4app через rest api конечные точки back4app для этого mcp получит метаданные схемы вашего бэкенда, а cursor использует эти метаданные для создания пользовательского интерфейса вашего приложения с помощью следующей спецификации запроса build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive этот запрос направлен на создание фронтенда next js в один шаг вы всегда можете запросить дальнейшие изменения, если вас не устраивает генерация cursor убедитесь, что parse был правильно инициализирован с application id и javascript key на случай, если cursor не сможет это обработать эти переменные позволяют вам делать запросы к бэкенд приложению изображение выше показывает приложение next js, сгенерированное одной командой с использованием cursor и mcp от back4app разверните ваше приложение наконец, вы развернете свое полнофункциональное приложение, используя функцию веб хостинга back4apps чтобы развернуть ваше приложение next js, создайте dockerfile в корневом каталоге вашего проекта и вставьте следующий код \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] этот dockerfile выполняет следующее начинает с официального времени выполнения node js 14 устанавливает рабочий каталог на /app копирует package json и package lock json в образ docker и устанавливает зависимости копирует оставшийся код приложения в образ docker собирает приложение next js открывает порт 3000 для приложения определяет команду для запуска приложения вам также понадобится файл dockerignore создайте его в корневом каталоге вашего проекта и добавьте эти команды \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore теперь выполните следующую команду в вашем терминале, чтобы собрать и протестировать образ docker docker build t event manager frontend docker run p 3000 3000 event manager frontend вы найдете свой собранный образ docker на http //localhost 3000 если вы убедились, что ваше приложение работает как задумано, пора отправить ваш код в репозиторий github и развернуть его через back4app откройте ваше приложение event manager на панели управления back4app и перейдите к веб развертыванию как только вы там окажетесь, предоставьте back4app разрешение на просмотр вашего репозитория аккаунта и выберите репозиторий, в который вы отправили фронтенд приложение, которое хотите развернуть назначьте имя вашему проекту (например, event manager) и нажмите на кнопку “развернуть” , показанную на изображении выше, чтобы развернуть ваше приложение если все прошло успешно, вы увидите сообщение о готовности развертывания вы можете получить доступ к вашему развернутому приложению в интернете, перейдя по ссылке, предоставленной back4app на экране развертывания ниже поздравляем, вы успешно развернули ваше приложение на back4app вы можете посетить проект event manager, созданный в этом учебнике здесь https //eventmanager3 3jqdnkfk b4a run/ заключение в этой статье вы разработали и развернули бэкенд приложение для управления событиями, которое позволяет пользователям управлять событиями как организаторам, так и участникам вы также создали фронтенд для вашего приложения с помощью next js, используя cursor для ускорения разработки сочетание улучшенной ai среды разработки cursor с mcp back4app создает мощный рабочий процесс разработки, который значительно сокращает время разработки и упрощает создание вашего бэкенда на back4app счастливого кодирования!