Como Construir um Backend com VS Code?
25 min
o vs code 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 uma plataforma de blog usando o servidor mcp do back4app através do vs code e implantá lo em contêineres do back4app principais conclusões aprenda como construir um backend no back4app usando o vs code e um servidor mcp 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 você pode visualizar o blog ao vivo construído neste tutorial usando este link pré requisitos para seguir este tutorial, você precisa ter o seguinte uma conta no back4app você pode se inscrever gratuitamente se você não tiver uma vs code instalado em seu sistema familiaridade básica com conceitos de desenvolvimento de backend visão geral do projeto um blog neste tutorial, você construirá um blog simples que permite criar, editar, visualizar e excluir postagens ele também suporta comentários e mantém o controle do número de pessoas que visualizaram suas postagens além da user tabela fornecida por padrão no back4app para autenticação, seu blog terá mais três tabelas posts, comments e views quando um usuário do seu blog cria uma conta, o back4app cria um novo registro na user tabela e emite um token de sessão seguro que você pode reutilizar em solicitações subsequentes apenas usuários autenticados podem publicar postagens quando uma postagem de blog é publicada, tanto usuários autenticados quanto não autenticados podem ler as postagens; no entanto, apenas usuários autenticados podem comentar cada vez que uma postagem de blog é recuperada do banco de dados do back4app, a contagem de visualizações é incrementada; para evitar possíveis abusos dessa funcionalidade para inflar visualizações, você implementará algumas proteções em torno disso agora que você tem uma ideia geral do que vai construir, na próxima seção, você conectará o vscode ao servidor mcp do back4app conectando o vscode ao servidor mcp do back4app navegue até o site do back4app e clique no novo app botão no canto superior esquerdo da página na tela “construir um backend”, nomeie seu app e clique no criar botão na página de visão geral do seu app, clique no configuração mcp botão na janela “selecione seu ide”, clique em vs code e siga as instruções exibidas na tela para conectar automaticamente o vscode ao servidor mcp do back4app se você seguiu a opção de instalação automática, deve reiniciar o vs code em sua máquina antes de continuar alternativamente, você pode conectar o servidor mcp do back4app manualmente (o que lhe dá mais controle sobre a configuração) mudando a janela para a seção manual após seguir os passos descritos na janela para conectar o servidor mcp do back4app ao vscode, você pode confirmar a conexão clicando na barra de pesquisa na janela do vscode e procurando “>mcp listar servidores”, execute o comando e você deve ver uma lista de servidores mcp disponíveis e seu estado atual (executando/parado) agora que você conectou o servidor back4app mcp ao vscode, na próxima seção, você escreverá os prompts que construirão toda a sua aplicação construindo o backend do seu blog para criar seu backend usando vscode e github copilot, primeiro, você precisa ativar o modo agente no github copilot para ativar o modo agente, abra o chat do github copilot pressionando “ control + command + i” no macos, para windows, pressione “ctrl + i” na página de chat, clique no menu suspenso com o rótulo “ask” e selecione o modo “agent” em seguida, forneça ao github copilot o prompt abaixo ou semelhante para criar as classes necessárias para seu aplicativo o prompt acima cria um novo backend back4app chamado “blogger” e o preenche com uma classe post, uma classe comment e uma classe view, junto com suas propriedades necessárias quando você executar este prompt com o copilot, ele registrará os passos que segue na sua janela de chat e pedirá sua permissão em cada um dos passos que mutuam seus dados para os melhores resultados, execute esses prompts com um modelo premium como 03 mini ou claude sonnet 4 depois que o copilot cria as classes necessárias, você agora tem uma maneira estruturada de armazenar os dados do seu blog na próxima seção, você implementará a autenticação para seu aplicativo implementando a autenticação os requisitos de autenticação para seu aplicativo são simples, você precisa que os usuários se inscrevam e façam login para criar postagens no blog e comentar nas postagens do blog no entanto, eles podem ler postagens no blog em seu aplicativo sem estar autenticados você pode implementar os requisitos de autenticação para seu aplicativo usando o prompt abaixo o prompt acima adiciona autenticação de usuário ao seu aplicativo a lógica de autenticação permite que seus usuários criem uma conta usando um email, um nome de usuário e uma senha após se inscrever, o usuário é automaticamente logado, e quando um usuário faz logout, sua sessão atual é invalidada depois que o copilot implementa sua lógica de autenticação, seus usuários terão uma maneira segura de se inscrever e fazer login na próxima seção, você implementará a lógica necessária para criar postagens e comentários criando postagens e comentários para implementar o recurso de criação de postagens e comentários, você precisa criar duas funções cloud e os ganchos de suporte que permitem que usuários autenticados publiquem postagens e adicionem comentários em um fluxo simplificado comece criando os ganchos de suporte alimentando o copilot com o prompt abaixo ou similar o prompt acima implementa verificações/ações realizadas antes que um post ou comentário seja criado para posts, um slug único é gerado usando seu título, então o status muda para publicado, e a data atual é definida como a data de publicação para comentários, o post ao qual está vinculado simplesmente atualiza sua contagem de comentários agora, crie as funções em nuvem associadas aos hooks beforesave acima usando o prompt abaixo ou similar o prompt acima expõe duas funções de código em nuvem que permitem que seus usuários criem posts e comentários ele também protege seu aplicativo de abusos, limitando a 5 criações de posts e 15 comentários por minuto a lógica principal associada à criação dos posts e comentários já foi implementada nos hooks beforesave criados no prompt anterior; este apenas expõe uma api para o frontend consumir depois que o copilot implementar a lógica acima, seus usuários terão uma maneira de criar e comentar em posts na próxima seção, você implementará a lógica necessária para atualizar esses comentários e posts, e também a lógica necessária para contar visualizações em cada post do blog atualizando posts, comentários e visualizações para implementar a funcionalidade que permite aos usuários editar seus posts, revisar seus próprios comentários e registrar visualizações de página, você precisa de duas funções em nuvem updatepost, updatecomment e um aftertrigger você pode implementar a função em nuvem updatepost usando o prompt abaixo ou similar o prompt acima cria uma função que atualiza um post ele garante que a atualização só possa ser feita pelo usuário que criou o post e regenera o slug se o título for alterado você pode implementar a função em nuvem updatecomment usando o prompt abaixo ou similar o prompt acima cria uma função que atualiza o comentário de um post a atualização só pode ser feita pelo criador do comentário você pode implementar a função em nuvem recordview usando o prompt abaixo ou similar o prompt acima cria um gatilho afterfind na classe post sempre que o backend retorna um único post (buscado por seu objectid), o gatilho automaticamente cria um novo registro de view que aponta para aquele post (e o usuário atual, se estiver logado) e incrementa o viewcount do post se a consulta retornar múltiplos posts, o gatilho não faz nada com isso, a maior parte da funcionalidade do seu blog está completa em seguida, você implementará a funcionalidade que permite que seus usuários excluam seus posts excluindo posts para excluir um post, um usuário deve ser aquele que o criou uma vez que um post é excluído, todo o seu conteúdo associado (visualizações, comentários) é excluído junto com ele você pode implementar a funcionalidade para excluir posts usando o prompt abaixo ou similar o prompt acima implementa a lógica necessária para excluir posts com essas adições, seu backend agora cobre todo o ciclo de vida do conteúdo, permitindo que os autores publiquem, revisem e excluam, permitindo que os leitores discutam e mantendo estatísticas de visualização precisas para cada post na próxima seção, você gerará uma interface de usuário para sua aplicação gerando seu frontend você pode aproveitar o contexto que o copilot tem ao criar seu backend no back4app para pedir que ele crie um frontend que corresponda ao esquema e aos requisitos do seu aplicativo você pode conseguir isso para o agendador de compromissos usando o prompt abaixo usando o prompt acima ou similar, o copilot gerará um frontend que corresponda ao esquema do seu backend e o conectará ao seu backend execute o aplicativo usando as instruções fornecidas pelo copilot e faça os ajustes que desejar agora que seu projeto está completo, na próxima seção, você o implantará em contêineres do back4app implantando seu app em contêineres do back4app os contêineres do back4app permitem que você implante seus aplicativos facilmente usando um dockerfile e um repositório do github para implantar seu aplicativo em contêineres do back4app, você precisa primeiro incluir um dockerfile em seu repositório você pode pedir ao claude para gerar um usando o prompt abaixo ou você pode usar o dockerfile fornecido abaixo 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 plataforma de implantação web opção na página de implantação, clique no botão “implantar um aplicativo web” e dê acesso ao back4app ao repositório que você deseja implantar selecione o aplicativo que deseja implantar, preencha os detalhes da implantação e clique no implantar botão 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 blog ao vivo construído neste tutorial usando este link conclusão neste artigo, você construiu uma plataforma de blog completa usando o servidor back4app mcp e o github copilot, e depois a 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 mínima sobrecarga como próximo passo, você pode estender o projeto com recursos como integração de mídia social, notificações automáticas por e mail para novos comentários, funcionalidade de busca avançada ou análises sobre o engajamento de postagens e o comportamento dos leitores todas essas melhorias se encaixam naturalmente no mesmo fluxo de trabalho do back4app projetar e definir novas classes ou funções em nuvem com o github copilot, 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 blog sem interromper os usuários