Как построить бэкенд с Windsurf?

ide windsurf позволяет интегрировать внешние инструменты, которые имеют активный сервер mcp, через протокол mcp это позволяет вам выполнять задачи и считывать данные из этих источников, не покидая ваш ide, используя подсказки в этом учебном пособии вы узнаете, как создать бэкенд и пользовательский интерфейс (ui) для планировщика встреч, используя сервер mcp back4app через ide windsurf, и развернуть его на контейнерах back4app основные выводы вы можете просмотреть живой личный трекер расходов, созданный в этом учебном пособии, используя эту ссылку узнайте, как создать бэкенд на back4app, используя windsurf и сервер mcp back4app изучите, как моделируются отношения между классами на back4app изучите, как аутентификация и авторизация на основе ролей реализованы back4app с использованием их встроенных классов разверните ваше приложение в несколько кликов, используя контейнеры back4app предварительные требования чтобы следовать этому руководству, вам нужно иметь следующее аккаунт back4app вы можете зарегистрироваться бесплатно если у вас его нет установленный windsurf ide на вашем компьютере базовое знакомство с концепциями разработки серверной части обзор проекта планировщик встреч в этом руководстве вы создадите планировщик встреч, который поддерживает две роли поставщики , которые регистрируют предлагаемые ими услуги, и клиенты , которые бронируют эти услуги поставщики определяют каждую услугу с помощью названия, продолжительности и цены клиенты затем просматривают доступные услуги, выбирают дату и время и подтверждают бронирование после бронирования встреча появляется как в панели управления поставщика, так и в панели управления клиента, с состоянием, которое вы можете обновить или отменить по мере необходимости этот проект будет иметь 4 класса пользователь , роль , запись , и услуга классы пользователь и роль являются частью встроенных классов back4app и будут использоваться для аутентификации и контроля доступа класс услуга будет определять детали каждого предложения, его название, продолжительность и цену, чтобы поставщики могли перечислить свои предложения, а клиенты могли просматривать предложения класс запись свяжет клиента и поставщика с выбранной услугой в определенных полях starttime и endtime, отслеживая его статус (“ожидание”, “подтверждено”, “отменено”), и будет использовать acl на уровне объектов, чтобы только клиент, забронировавший услугу, и его поставщик могли читать или изменять каждую запись вот диаграмма взаимосвязей сущностей, чтобы помочь вам визуализировать схему теперь, когда у вас есть общее представление о том, что вы будете строить, в следующем разделе вы настроите сервер back4app mcp с windsurf и начнете писать подсказки, которые создадут приложение, описанное в этом разделе подключение back4app и windsurf смотрите видео ниже для получения учебного пособия о том, как подключить windsurf к back4app чтобы подключить сервер back4app mcp к windsurf, сначала вам нужен ключ учетной записи back4app чтобы получить его, войдите в свою учетную запись back4app и на панели управления пользователя нажмите выпадающее меню на панели навигации и выберите ключи учетной записи на странице ключи учетной записи дайте вашему ключу учетной записи имя, скопируйте сгенерированный ключ и храните его в безопасном месте далее откройте windsurf и нажмите на значок молотка в помощнике cascade это откроет выпадающее меню с кнопкой настройки, нажмите на нее кнопка настройки перенесет вас на страницу управления плагинами нажмите кнопку “посмотреть сырой конфиг” и вставьте объект конфигурации ниже в файл { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } замените \<account key> на ваш ключ учетной записи, сохраните файл и обновите windsurf если вы следуете этому руководству на машине с windows, измените значение ключа команды на npx cmd создание бэкенда с windsurf чтобы создать бэкенд планировщика встреч с windsurf, сначала вам нужно дать помощнику cascade подсказку, которая скажет ему создать новое приложение с указанным вами именем, а также необходимые таблицы базы данных вы можете достичь этого для планировщика встреч, используя подсказку ниже 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 эта подсказка говорит windsurf создать бэкенд “планировщик встреч”, создавая две новые модели данных service и appointment, с соответствующими отношениями и полями она также реализует серверный хук beforesave на appointment, который предотвращает любые пересекающиеся бронирования для одного и того же провайдера windsurf регистрирует все запросы, которые он делает, пытаясь выполнить задачу, и как только он завершает выполнение, он предоставляет сводку задачи теперь, когда классы приложения и базы данных созданы, вы можете реализовать аутентификацию для вашего бэкенда реализация аутентификации и авторизации на бэкенде для этого приложения вам нужно убедиться, что пользователи могут безопасно входить в систему и выполнять только те действия, которые они должны выполнять например, только пользователи, которые зарегистрировались как поставщики, должны иметь возможность перечислять услуги, и только поставщик, который перечисляет услугу, должен иметь возможность обновлять эту услугу вы можете достичь этого для планировщика встреч, используя следующий запрос 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 этот запрос выше инструктирует windsurf включить регистрацию и вход с помощью электронной почты/пароля, определить и назначить роли "поставщик" и "клиент", обеспечить разрешения на уровне класса, чтобы только поставщики управляли услугами, в то время как аутентифицированные пользователи обрабатывают встречи, и применить объектные acl, а также хук beforesave на встрече, чтобы предоставить доступ только клиенту, бронирующему встречу, и поставщику, и проверить их роли теперь, когда у вас настроены аутентификация и авторизация на основе ролей, вы можете реализовать конечные точки crud, необходимые для работы приложения реализация функциональности crud для услуг и записей на прием ваше приложение должно позволять аутентифицированным пользователям создавать услуги (поставщики) и записываться на уже созданные услуги (клиенты) пользователи также должны иметь возможность редактировать, удалять и просматривать услуги и записи вы можете достичь этого для планировщика встреч, используя следующий запрос 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 этот запрос инструктирует windsurf сгенерировать конечные точки cloud code для классов service и appointment, реализуя операции создания, чтения, обновления и удаления, при этом обеспечивая аутентификацию и проверки на основе ролей, чтобы только поставщики могли управлять услугами, а только клиент, записывающийся на прием, или назначенный поставщик могли управлять своими записями генерация вашего фронтенда вы можете воспользоваться контекстом, который windsurf имеет от создания вашего бэкенда на back4app, чтобы попросить его создать фронтенд, который соответствует схеме и требованиям вашего приложения вы можете достичь этого для планировщика встреч, используя следующий запрос 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 используя приведенный выше запрос или аналогичный, windsurf сгенерирует фронтенд, который соответствует схеме вашего бэкенда и подключит его к вашему бэкенду файлы проекта хранятся в /\<user>/cascadeprojects/\<app name> cd в приложение и запустите его, используя инструкции, предоставленные в readme, и внесите любые изменения, которые хотите теперь ваш проект завершен в следующем разделе вы развернете его на контейнерах back4app развертывание вашего приложения на контейнерах back4app контейнеры back4app позволяют вам легко развертывать ваши приложения, используя dockerfile и репозиторий github чтобы развернуть ваше приложение на контейнерах back4app, вам сначала нужно включить dockerfile в ваш репозиторий вы можете попросить claude сгенерировать его, используя следующий запрос generate a docker file for the ui of my appointment scheduler или вы можете использовать предоставленный ниже dockerfile 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"] после добавления dockerfile и его отправки на github, перейдите на панель управления приложениями back4app, нажмите на панель управления и выберите платформу веб развертывания на странице развертывания нажмите кнопку “развернуть веб приложение” и предоставьте back4app доступ к репозиторию, который вы хотите развернуть выберите приложение, которое вы хотите развернуть, заполните детали развертывания и нажмите кнопку развернуть нажатие на кнопку запускает процесс развертывания, и после его завершения вы получите живую ссылку на приложение вы можете просмотреть живой личный трекер расходов, созданный в этом учебном пособии, используя эту ссылку заключение в этой статье вы создали планировщик встреч, используя сервер back4app mcp и windsurf, а затем развернули его с помощью контейнеров back4app это демонстрирует полный набор инструментов back4app, который позволяет вам перейти от идеи к запуску с минимальными затратами в качестве следующего шага вы можете расширить проект такими функциями, как синхронизация календаря, автоматические напоминания по электронной почте или аналитика тенденций бронирования все эти улучшения естественно вписываются в тот же рабочий процесс back4app разработать и определить новые классы или облачные функции с помощью windsurf обеспечить их безопасность с помощью хуков beforesave и развернуть обновления через контейнеры back4app этот подход позволяет вам добавлять новые функции в ваше приложение, не нарушая работу пользователей