Como Construir um Backend com Windsurf?

o windsurf ide permite que você integre ferramentas externas que possuem um servidor mcp ativo através do protocolo mcp isso permite que você execute tarefas e leia dados dessas fontes sem sair do seu ide usando prompts neste tutorial, você aprenderá como construir o backend e a interface do usuário (ui) para um agendador de compromissos usando o servidor mcp do back4app através do windsurf ide e implantá lo em contêineres do back4app principais conclusões você pode visualizar o rastreador de despesas pessoais ao vivo construído neste tutorial usando este link aprenda como construir um backend no back4app usando windsurf e o servidor mcp do back4app explore como os relacionamentos são modelados entre classes no back4app explore como a autenticação e a autorização baseada em funções são implementadas pelo back4app usando suas classes integradas implante seu aplicativo em poucos cliques usando contêineres do back4app pré requisitos para seguir este tutorial, você precisa ter o seguinte uma conta back4app você pode se inscrever gratuitamente se você não tiver uma windsurf ide instalado em seu sistema familiaridade básica com conceitos de desenvolvimento backend visão geral do projeto agendador de compromissos neste tutorial, você construirá um agendador de compromissos que suporta dois papéis fornecedores que registram os serviços que oferecem e clientes que reservam esses serviços os fornecedores definem cada serviço com um nome, duração e preço os clientes então navegam pelos serviços disponíveis, escolhem uma data e hora, e confirmam uma reserva uma vez reservado, o compromisso aparece nos painéis tanto do fornecedor quanto do cliente, com um status que você pode atualizar ou cancelar conforme necessário este projeto terá 4 classes usuário , papel , agendamento , e serviço as classes usuário e papel fazem parte das classes integradas do back4app e serão usadas para autenticação e controles de acesso a classe serviço definirá os detalhes de cada oferta, seu nome, duração e preço, para que os provedores possam listar o que oferecem e os clientes possam navegar pelas ofertas a classe agendamento vinculará um cliente e um provedor a um serviço escolhido nos campos de starttime e endtime específicos, rastreará seu status (“pendente”, “confirmado”, “cancelado”) e usará acls em nível de objeto para que apenas o cliente que fez a reserva e seu provedor possam ler ou modificar cada agendamento aqui está um diagrama de relacionamento de entidades para ajudá lo a visualizar o esquema agora que você tem uma ideia geral do que estará construindo, na próxima seção, você configurará o servidor mcp do back4app com o windsurf e começará a escrever prompts que criarão o aplicativo descrito nesta seção conectando back4app e windsurf assista ao vídeo abaixo para um tutorial sobre como conectar o windsurf ao back4app para conectar o servidor back4app mcp ao windsurf, primeiro, você precisa de uma chave de conta back4app para recuperá la, faça login na sua conta back4app e no seu painel de usuário, clique no menu suspenso na barra de navegação e selecione chaves de conta na página chaves de conta , dê um nome à sua chave de conta, copie a chave gerada e armazene a com segurança em seguida, abra o windsurf e clique no ícone do martelo no assistente cascade isso abrirá um menu suspenso com um botão de configuração, clique nele o botão de configuração leva você à página gerenciar plugins clique no botão “ver configuração bruta” e cole o objeto de configuração abaixo no arquivo { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } substitua \<account key> pela sua chave de conta, salve o arquivo e atualize o windsurf se você estiver seguindo este tutorial em uma máquina windows, altere o valor da chave de comando para npx cmd criando o backend com windsurf para criar o backend do agendador de compromissos com windsurf, primeiro, você deve fornecer ao assistente cascade um prompt que lhe diga para criar um novo aplicativo com o nome que você especificou, junto com as tabelas de banco de dados necessárias você pode conseguir isso para o agendador de compromissos usando o prompt abaixo 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 este prompt acima diz ao windsurf para criar um backend de “agendador de compromissos” criando dois novos modelos de dados serviço e compromisso, com os relacionamentos e campos apropriados ele também implementa um hook beforesave do lado do servidor em compromisso que impede qualquer reserva sobreposta para o mesmo provedor o windsurf registra todas as solicitações que faz enquanto tenta realizar a tarefa, e assim que termina a execução, fornecerá um resumo da tarefa agora que as classes do aplicativo e do banco de dados foram criadas, a próxima etapa é implementar a autenticação para o seu backend implementando autenticação e autorização no backend para este aplicativo, você precisa garantir que os usuários possam fazer login de forma segura e apenas realizar as ações que deveriam ser capazes de fazer por exemplo, apenas usuários que se inscrevem como provedores devem ser capazes de listar um serviço, e apenas um provedor que lista um serviço deve ser capaz de atualizar o serviço você pode alcançar isso para o agendador de compromissos usando o prompt abaixo 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 este prompt acima instrui o windsurf a habilitar a inscrição e login por email/senha, definir e atribuir funções de “provedor” e “cliente”, impor permissões de nível de classe para que apenas provedores gerenciem serviços enquanto usuários autenticados lidam com compromissos, e aplicar acls de objeto além de um hook beforesave em compromisso para conceder acesso apenas ao cliente de reserva e ao provedor e verificar suas funções agora que você configurou a autenticação e a autorização baseada em funções, pode implementar os endpoints crud necessários para o aplicativo funcionar implementando funcionalidade crud para serviços e compromissos seu aplicativo precisa permitir que usuários autenticados criem serviços (provedores) e agendem compromissos em serviços já criados (clientes) os usuários também precisam ser capazes de editar, excluir e visualizar serviços e compromissos você pode alcançar isso para o agendador de compromissos usando o prompt abaixo 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 este prompt instrui o windsurf a gerar endpoints de cloud code para as classes serviço e compromisso, implementando operações de criar, ler, atualizar e excluir enquanto impõe autenticação e verificações baseadas em papéis para que apenas provedores possam gerenciar serviços e apenas o cliente que reserva ou o provedor designado possam gerenciar seus compromissos gerando seu frontend você pode aproveitar o contexto que o windsurf tem de criar seu backend no back4app para pedir que ele crie um frontend que corresponda ao esquema e requisitos do seu aplicativo você pode alcançar isso para o agendador de compromissos usando o prompt abaixo 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 usando o prompt acima ou similar, o windsurf gerará um frontend que corresponda ao esquema do seu backend e o conectará ao seu backend os arquivos do projeto são armazenados em /\<user>/cascadeprojects/\<app name> cd no aplicativo e execute o usando as instruções fornecidas no readme, e faça quaisquer ajustes que desejar agora, seu projeto está completo na próxima seção, você o implantará em contêineres do back4app implantando seu app em contêineres back4app os contêineres back4app permitem que você implante seus aplicativos facilmente usando um dockerfile e um repositório do github para implantar seu aplicativo em contêineres back4app, você precisa primeiro incluir um dockerfile em seu repositório você pode pedir ao claude para gerar um usando o prompt abaixo generate a docker file for the ui of my appointment scheduler ou você pode usar o dockerfile fornecido abaixo 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"] após adicionar o dockerfile e enviá lo para o github, navegue até o painel de aplicativos do back4app, clique no painel dropdown e selecione a opção plataforma de implantação web na página de implantação, clique no botão “implantar um aplicativo web” e dê ao back4app acesso ao repositório que você deseja implantar selecione o aplicativo que deseja implantar, preencha os detalhes da implantação e clique no botão implantar clicar no botão inicia o processo de implantação e, após a conclusão, você receberá uma url ao vivo para o aplicativo você pode visualizar o rastreador de despesas pessoais ao vivo construído neste tutorial usando este link conclusão neste artigo, você construiu um agendador de compromissos usando o servidor back4app mcp e o windsurf, e depois o implantou com os contêineres back4app isso demonstra a suíte completa de ferramentas do back4app que permite que você passe da ideação ao lançamento com um overhead mínimo como próximo passo, você pode estender o projeto com recursos como sincronização de calendário, lembretes automáticos por e mail ou análises sobre tendências de reservas todas essas melhorias se encaixam naturalmente no mesmo fluxo de trabalho do back4app desenhar e definir novas classes ou funções em nuvem com o windsurf protegê las com hooks beforesave e implementar atualizações através dos contêineres back4app essa abordagem permite que você adicione novos recursos ao seu aplicativo sem interromper os usuários