Como Construir um Backend Usando Cursor?

projetos modernos na web e mobile frequentemente estagnam no primeiro obstáculo transformar uma ideia em um backend pronto para produção arquitetar manualmente um modelo de dados, escrever lógica crud padrão, implantar infraestrutura e, em seguida, manter o frontend em sincronia pode consumir dias ou semanas de tempo valioso de engenharia este tutorial demonstra como a plataforma de backend da back4app, o protocolo model context platform (mcp), e o ide assistido por ia da cursor juntos eliminam essa fricção ao percorrer a criação de um simples aplicativo de gerenciamento de eventos, você verá como essas ferramentas permitem que você crie, implante e integre um backend totalmente funcional e um frontend correspondente principais conclusões descubra como criar um backend pronto para produção na back4app em minutos usando o agente de ia da cursor e o protocolo mcp obtenha insights sobre como impor um controle de acesso baseado em funções limpo com um helper reutilizável validateuserrole que separa de forma clara os fluxos de trabalho de organizador e participante aprenda como gerar e conectar um frontend responsivo em next js que consome automaticamente suas apis rest da back4app explore a containerização e a implantação com um clique usando contêineres da back4app para implantar seu aplicativo completo de gerenciador de eventos do github em tempo recorde visão geral do projeto neste tutorial, você construirá um simples aplicativo de gerenciamento de eventos que permite aos usuários criar eventos, se registrar para aqueles que lhes interessam, visualizar eventos futuros ou registrados e cancelar suas inscrições quando necessário você construirá o backend deste aplicativo usando a ferramenta mcp da back4app a ferramenta mcp permite modelos de linguagem de grande escala (llms) https //en wikipedia org/wiki/large language model como claude 4 soneto e agentes/ferramentas de ia como cursor para interagir perfeitamente com seu backend da back4app com o mcp, seu assistente de código de ia pode criar aplicativos, gerenciar bancos de dados (operações crud, consultas), implantar código em nuvem, lidar com autenticação de usuários e muito mais em seus projetos da back4app para este tutorial, você usará cursor , um editor de código alimentado por ia que integra modelos de linguagem de grande escala para ajudá lo a escrever, refatorar e entender código dentro do seu ambiente de desenvolvimento com o cursor e o mcp, você pode solicitar ações de backend usando linguagem natural, tornando o processo de desenvolvimento mais rápido e intuitivo configuração do projeto agora que você tem uma melhor compreensão do que irá alcançar neste tutorial, vá em frente e configure os requisitos do seu projeto para construir um backend com o cursor e o mcp pré requisitos para completar este tutorial, você precisará do seguinte uma conta back4app você pode se inscrever gratuitamente https //www back4app com/signup se você não tiver uma cursor https //www cursor com/ instalado em sua máquina de desenvolvimento familiaridade básica com conceitos de desenvolvimento backend node js v22 ou superior passo 1 crie um projeto back4app o primeiro passo é fazer login na sua conta back4app e criar um novo projeto chamado “eventmanager ” passo 2 crie uma chave de conta você precisa gerar uma chave de conta back4app para configurar o mcp dentro do cursor e conceder acesso ao servidor mcp à sua conta back4app vá para as configurações das chaves da sua conta quando estiver lá, dê um nome à sua chave de conta e gere uma clicando no + botão agora você deve ver sua chave de conta gerada junto com sua data de expiração passo 3 configure o mcp dentro do cursor assista a este vídeo para aprender como conectar o cursor e o back4app abra o aplicativo cursor e navegue até configurações > configurações do cursor > mcp, onde você encontrará uma página para configurar servidores mcp no cursor ai clique no botão “ adicionar novo servidor mcp global ” para criar um mcp json arquivo você escreverá suas configurações para o mcp dentro deste arquivo para configurar o servidor mcp do back4app no cursor, cole as seguintes configurações dentro de mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } agora substitua \<account key> pela chave de conta do back4app que você salvou e gerou no passo 3 se você estiver seguindo este tutorial em uma máquina windows, mude o valor da chave command para npx cmd com essas configurações em vigor, você está pronto para começar a construir seu backend do back4app com o back4app mcp e o cursor construa o backend com cursor e back4app seu gerenciador de eventos terá os seguintes recursos; o usuário pode criar um novo evento o usuário pode se inscrever em um evento mostrar uma lista de eventos para os quais um usuário está inscrito mostrar uma lista dos próximos eventos de um usuário o usuário pode cancelar a inscrição em eventos para satisfazer essas características, aqui está um exemplo de esquema de banco de dados abra o cursor chat alternando o painel de ia, e prossiga para selecionar o modo agente para fazer alterações no seu aplicativo além disso, selecione um llm preferido, como o novo modelo claude 4 sonnet dentro da caixa de chat, escreva um prompt para gerar o esquema projetado um exemplo de prompt para alcançar isso é 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 você precisará aprovar a solicitação para usar as ferramentas do mcp uma vez aprovada, a solicitação será executada você deve receber uma resposta de que o banco de dados foi criado com sucesso você pode confirmar o sucesso verificando o seu app dashboard para as classes recém criadas agora que você criou seu backend e adicionou as tabelas do banco de dados da sua aplicação, você implementará a lógica da aplicação implementando recursos de usuário com mcp na descrição da sua aplicação, este app deve permitir que tipos diferentes de usuários realizem tarefas diferentes, como criar eventos e se registrar para eles aqui você definirá as funções construídas para lidar com esses recursos implementando controles de acesso a principal função utilitária para o app será chamada de validateuserrole esta função é responsável por validar quais recursos estão disponíveis para quais papéis de usuário você pode criar esta função com o seguinte prompt \ 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 vá em frente e confirme que utils js foi criado com validateuserrole criar recurso de usuário para implementar o criar usuário recurso, o nome de usuário , senha , email, e papel devem ser passados qualquer um pode chamar a função implemente a lógica de criação de usuário usando o prompt abaixo \ 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 você deve receber uma resposta indicando que a função foi criada com sucesso agora você pode criar novos usuários para o gerenciador de eventos criar recurso de evento um organizador pode criar um novo evento para fazer isso, a função criará um novo objeto de evento e validará se um usuário com a função organizador está chamando a função você usará a função utilitária criada anteriormente para alcançar essa validação implemente essa lógica usando o prompt abaixo 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 a função será criada dentro do arquivo main js você pode solicitar um teste simples dentro do cursor usando dados fictícios e chamando a api rest exposta do back4app registrar para o recurso do evento para que um usuário se registre para um evento, ele deve ter o participante papel todos os usuários com esse papel têm acesso a 3 recursos o primeiro é se registrar para eventos criados essa função cria um novo objeto de registro e define o valor booleano de registro como verdadeiro para o usuário alimente o seguinte prompt ou um semelhante para alcançar essa lógica 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 em seguida, você precisa de uma função para consultar todos os eventos para os quais o usuário está registrado chamaremos essa função de listupcomingevents crie essa função com um prompt como este 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 confirme que a função foi criada com sucesso dentro de main js e modifique o código manualmente ou usando prompts de cursor, se necessário observe que, neste prompt, os parâmetros da função não foram especificados para o agente de ia do cursor isso demonstra como o agente usa o mcp para inferir os parâmetros que uma função requer, examinando o esquema do banco de dados no entanto, é sempre uma boa prática fornecer o máximo de contexto necessário em seus prompts recurso de cancelamento de registro o último recurso para satisfazer os requisitos do aplicativo é o recurso de cancelamento de registro para implementar isso, a função irá buscar o eventid e userid do registro do evento selecionado e atualizar seu valor booleano adicione a lógica acima ao seu aplicativo backend usando um prompt semelhante a este 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 você pode revisar todo o código criado pelo cursor e mcp e modificá lo se necessário no seu painel do app → código em nuvem , conforme mostrado na imagem abaixo com esses recursos, você agora atendeu a todos os requisitos para o backend do seu gerenciador de eventos aplicativo construa um frontend para seu backend com mcp usando cursor agora que seu backend foi construído e implantado com sucesso você irá criar uma interface de usuário frontend para seu aplicativo esta interface consumirá seu backend back4app usando os endpoints da api rest do back4app para fazer isso, o mcp buscará os metadados do esquema do seu backend, e o cursor usará esses metadados para construir a interface do seu aplicativo com a seguinte especificação de prompt 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 este prompt tem como objetivo estruturar um frontend em next js em um único passo você pode sempre solicitar mais alterações se não estiver satisfeito com a geração do cursor certifique se de que o parse foi corretamente inicializado com id da aplicação e chave javascript caso o cursor não consiga lidar com isso essas variáveis permitem que você faça solicitações ao aplicativo backend a imagem acima mostra o aplicativo next js gerado com um único comando usando o cursor e o mcp da back4app implante seu aplicativo finalmente, você implantará seu aplicativo full stack usando o recurso de hospedagem na web da back4apps para implantar sua aplicação next js, crie um dockerfile no diretório raiz do seu projeto e cole o seguinte código dentro \# 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"] este dockerfile faz o seguinte começa a partir do runtime oficial do node js 14 define o diretório de trabalho como /app copia package json e package lock json para a imagem docker e instala as dependências copia o restante do código da aplicação para a imagem docker constrói a aplicação next js expõe a porta 3000 para a aplicação define o comando para iniciar a aplicação você também precisará de um dockerignore arquivo crie um no diretório raiz do seu projeto e adicione estes comandos \# 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 agora, execute o seguinte comando no seu terminal para construir e testar a imagem docker docker build t event manager frontend docker run p 3000 3000 event manager frontend você encontrará sua imagem docker construída em http //localhost 3000 se você verificou que sua aplicação funciona como pretendido, é hora de enviar seu código para um repositório do github e implantá lo através do back4app abra seu aplicativo event manager no painel do back4app e navegue até implantação na web uma vez lá, prossiga para conceder autorização ao back4app para visualizar seu repositório de conta e selecione o repositório onde você enviou o aplicativo frontend que deseja implantar atribua um nome ao seu projeto (ex event manager) e clique no botão “implantar” mostrado na imagem acima para implantar sua aplicação se for bem sucedido, você verá uma mensagem de sucesso de implantação você pode acessar sua aplicação implantada na web navegando até o link fornecido pelo back4app na tela de implantação abaixo parabéns, você implantou com sucesso sua aplicação no back4app você pode visitar o projeto event manager construído neste tutorial aqui https //eventmanager3 3jqdnkfk b4a run/ conclusão neste artigo, você projetou e implantou um aplicativo de gerenciamento de eventos que permite aos usuários gerenciar eventos como organizadores ou participantes você também construiu o frontend para sua aplicação com next js, usando o cursor para acelerar o desenvolvimento combinar o ambiente de desenvolvimento aprimorado por ia do cursor com o mcp do back4app cria um fluxo de trabalho de desenvolvimento poderoso que reduz drasticamente o tempo de desenvolvimento e facilita a construção do seu backend no back4app feliz codificação!