Como Construir um Backend para BackboneJS?

introdução neste tutorial, você aprenderá como construir um backend completo para uma aplicação backbonejs usando o back4app vamos percorrer a integração de recursos essenciais do back4app – como gerenciamento de banco de dados, funções de código em nuvem, apis rest e graphql, autenticação de usuários e consultas em tempo real (consultas ao vivo) – para criar um backend seguro, escalável e robusto que se comunica perfeitamente com seu frontend backbonejs você também verá como a configuração rápida e o ambiente intuitivo do back4app podem reduzir drasticamente o tempo e o esforço em comparação com a configuração manual de servidores e bancos de dados ao longo do caminho, você ganhará experiência prática com funcionalidades chave, incluindo recursos avançados de segurança, agendamento de tarefas com cloud jobs e configuração de webhooks para integrações externas ao final deste tutorial, você estará bem preparado para aprimorar essa configuração básica em uma aplicação pronta para produção ou facilmente incorporar lógica personalizada e apis de terceiros conforme necessário pré requisitos para completar este tutorial, você precisará uma conta back4app e um novo projeto back4app introdução ao back4app https //www back4app com/docs/get started/new parse app se você não tiver uma conta, pode criar uma gratuitamente siga o guia acima para preparar seu projeto ambiente básico de desenvolvimento backbonejs você pode configurar isso incluindo backbonejs https //backbonejs org/ em seu projeto certifique se de ter o node js instalado em sua máquina se planeja servir ou empacotar seu aplicativo backbone localmente node js (versão 14 ou superior) instalado você precisará do node js para instalar pacotes npm e executar servidores de desenvolvimento locais instalando o node js https //nodejs org/en/download/ familiaridade com javascript e conceitos básicos de backbonejs documentação oficial do backbonejs https //backbonejs org/ se você é novo no backbone, revise a documentação oficial ou um tutorial para iniciantes antes de começar certifique se de ter todos esses pré requisitos em ordem antes de começar ter seu projeto back4app configurado e seu ambiente local backbonejs pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend backbonejs no back4app é criar um novo projeto se você ainda não criou um, siga estes passos faça login na sua conta back4app clique no botão “novo app” no seu painel do back4app dê um nome ao seu app (por exemplo, “backbonejs backend tutorial”) uma vez que o projeto é criado, você verá ele listado no seu painel do back4app este projeto será a base para todas as configurações de backend discutidas neste tutorial conecte o parse sdk o back4app depende da plataforma parse para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais conectar sua aplicação backbonejs ao back4app envolve instalar o pacote npm do parse (ou incluir o script do parse sdk) e inicializá lo com as credenciais do seu painel do back4app recupere suas chaves parse no seu painel do back4app, navegue até a seção “configurações do app” ou “segurança & chaves” para encontrar seu id da aplicação e chave javascript você também encontrará a url do servidor parse , (geralmente no formato https //parseapi back4app com ) instale o parse sdk no seu projeto npm install parse se você estiver usando yarn, pode instalá lo com yarn add parse inicialize o parse em sua aplicação backbonejs normalmente, você criaria um arquivo (por exemplo, parseconfig js ) no diretório da sua aplicação src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; este arquivo garante que sempre que você importar ou referenciar o parse em outro lugar em seu aplicativo backbonejs, ele esteja pré configurado para se conectar à sua instância específica do back4app ao completar esta etapa, você estabeleceu uma conexão segura entre seu front end backbonejs e o back end do back4app todas as solicitações e transações de dados são roteadas de forma segura através deste sdk, reduzindo a complexidade de chamadas rest ou graphql manuais (embora você ainda possa usá las quando necessário) etapa 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app configurado e o sdk parse integrado em seu aplicativo backbonejs, você pode agora começar a salvar e recuperar dados abaixo está um exemplo simples de uso de objetos parse a partir de uma estrutura amigável ao backbone definindo um modelo import parse from ' /parseconfig'; // define a parse powered backbone model const todomodel = parse object extend('todo'); export default todomodel; criando e salvando dados import todomodel from ' /todomodel'; async function createtodoitem(title, iscompleted) { const todo = new todomodel(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todoquery = new parse query(todomodel); try { const results = await todoquery find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } alternativamente, você pode usar os endpoints da api rest do back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo o back4app também fornece uma interface graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } essas opções diversas permitem que você integre operações de dados da maneira que melhor se adapta ao seu processo de desenvolvimento – seja através do sdk do parse, rest ou graphql design de esquema e tipos de dados por padrão, o parse permite criação de esquema em tempo real , mas você também pode definir suas classes e tipos de dados no painel do back4app para mais controle navegue até a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas relevantes, como título (string) e iscompleted (boolean) back4app também suporta vários tipos de dados string , número , booleano , objeto , data , arquivo , ponteiro , array , relação , geopoint , e polígono você pode escolher o tipo apropriado para cada campo se preferir, você também pode deixar o parse criar automaticamente essas colunas quando você salvar um objeto pela primeira vez a partir do seu aplicativo backbonejs back4app oferece um agente de ia que pode ajudá lo a projetar seu modelo de dados abra o agente de ia no seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo todo no back4app com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você usar o agente de ia pode economizar seu tempo ao configurar sua arquitetura de dados e garantir consistência em seu aplicativo dados relacionais se você tem dados relacionais – digamos, um categoria objeto que aponta para múltiplos todo itens – você pode usar pointers ou relations no parse por exemplo // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todomodel = parse object extend('todo'); const todo = new todomodel(); // construct a pointer to the category const category = parse object extend('category'); const categorypointer = new category(); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } async function fetchtodoswithcategory() { const todomodel = parse object extend('todo'); const query = new parse query(todomodel); // include pointer data query include('category'); try { return await query find(); } catch (err) { console error('error fetching todos with category ', err); } } quando você chama include('category') , você busca os detalhes da categoria junto com cada todo, tornando seus dados relacionais acessíveis de forma contínua consultas ao vivo para atualizações em tempo real, o back4app fornece consultas ao vivo em um aplicativo backbonejs, você pode se inscrever para mudanças em uma classe específica ative consultas ao vivo no seu painel do back4app em configurações do servidor certifique se de que “consultas ao vivo” esteja ativado inicialize uma assinatura de consulta ao vivo no seu código src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /parseconfig'; async function subscribetotodos(callback) { const todoquery = new parse query('todo'); const subscription = await todoquery subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } ao se inscrever, você recebe notificações em tempo real sempre que um novo todo é criado, atualizado ou deletado este recurso é particularmente valioso para aplicativos colaborativos ou dinâmicos onde múltiplos usuários precisam ver os dados mais recentes sem atualizar a página passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app o back4app leva a segurança a sério, fornecendo listas de controle de acesso (acls) e permissões em nível de classe (clps) esses recursos permitem que você restrinja quem pode ler ou escrever dados com base em cada objeto ou classe, garantindo que apenas usuários autorizados possam modificar seus dados listas de controle de acesso (acls) um acl é aplicado a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/gravação por exemplo async function createprivatetodo(title, owneruser) { const todomodel = parse object extend('todo'); const todo = new todomodel(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } quando você salva o objeto, ele tem um acl que impede qualquer pessoa, exceto o usuário especificado, de lê lo ou modificá lo permissões de nível de classe (clps) clps governam as permissões padrão de toda a classe, como se a classe é legível ou gravável publicamente, ou se apenas certos papéis podem acessá la vá para o seu painel do back4app , selecione seu aplicativo e abra a banco de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões de nível de classe aba configure seus padrões, como “requer autenticação” para leitura ou escrita, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto as acls ajustam as permissões para objetos individuais um modelo de segurança robusto geralmente combina tanto clps (restrições amplas) quanto acls (restrições detalhadas por objeto) para mais informações, vá para diretrizes de segurança do aplicativo passo 4 – escrevendo e implantando funções em nuvem o cloud code é um recurso do ambiente parse server que permite executar código javascript personalizado no lado do servidor – sem precisar gerenciar seus servidores ou infraestrutura ao escrever cloud code, você pode estender seu backend do back4app com lógica de negócios adicional, validações, gatilhos e integrações que são executadas de forma segura e eficiente no parse server como funciona quando você escreve cloud code, normalmente coloca suas funções javascript, gatilhos e quaisquer módulos npm necessários em um main js (ou app js ) arquivo este arquivo é então implantado no seu projeto back4app, que é executado dentro do ambiente do parse server como essas funções e gatilhos são executados no servidor, você pode confiar que eles lidam com lógica confidencial, processam dados sensíveis ou fazem chamadas de api apenas no backend – processos que você pode não querer expor diretamente ao cliente todo o cloud code para seu aplicativo back4app é executado dentro do parse server que é gerenciado pelo back4app, então você não precisa se preocupar com manutenção de servidor, escalabilidade ou provisionamento sempre que você atualizar e implantar seu main js arquivo, o parse server em execução é atualizado com seu código mais recente // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); com a capacidade de instalar e usar módulos npm, o cloud code se torna incrivelmente flexível, permitindo que você integre com apis externas, realize transformações de dados ou execute lógica complexa do lado do servidor casos de uso típicos lógica de negócio por exemplo, você pode calcular a pontuação de um usuário em um jogo agregando várias propriedades de objeto e, em seguida, armazenar esses dados automaticamente validações de dados garantir que certos campos estejam presentes ou que um usuário tenha as permissões corretas antes de salvar ou excluir um registro gatilhos realizar ações quando os dados mudam (por exemplo, enviar uma notificação quando um usuário atualiza seu perfil) integrações conectar se com apis ou serviços de terceiros por exemplo, você poderia integrar com gateways de pagamento, notificações do slack ou plataformas de marketing por e mail diretamente do cloud code imposição de segurança adicionar uma camada extra de segurança validando e sanitizando parâmetros de entrada em suas funções do cloud code implante sua função abaixo está uma função simples do cloud code que calcula o comprimento de uma string de texto enviada do cliente main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); implantando via o back4app cli 1 instale o cli para linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows baixe o b4a exe arquivo da página de lançamentos https //github com/back4app/parse cli/releases 2 configure sua chave de conta b4a configure accountkey 3 implemente seu código em nuvem b4a deploy implantando através do painel no painel do seu aplicativo, vá para cloud code > functions copie/cole a função no editor main js clique em deploy chamando sua função do backbonejs usando o sdk parse import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } você também pode chamá la via rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength ou via graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } essa flexibilidade permite que você integre sua lógica personalizada em seu frontend backbonejs ou em qualquer outro cliente que suporte rest ou graphql passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app back4app utiliza a classe parse user como base para autenticação por padrão, o parse lida com a hash de senhas, tokens de sessão e armazenamento seguro isso significa que você não precisa configurar fluxos de segurança complexos manualmente configurando a autenticação de usuário em uma aplicação backbonejs, você pode criar um novo usuário com import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } via rest, um login pode parecer curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login gerenciamento de sessão após um login bem sucedido, o parse cria um token de sessão que é armazenado no objeto do usuário no seu aplicativo, você pode acessar o usuário atualmente logado const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } o parse lida automaticamente com sessões baseadas em token em segundo plano, mas você também pode gerenciá las ou revogá las manualmente isso é útil quando você precisa sair await parse user logout(); integração de login social back4app e parse podem se integrar com provedores populares de oauth, como google ou facebook , instalando pacotes adicionais ou usando adaptadores existentes as instruções detalhadas variam, então consulte a documentação de login social https //www back4app com/docs/platform/sign in with apple // example facebook login (conceptual example) const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verificação de email e redefinição de senha para habilitar a verificação de email e a redefinição de senha navegue até as configurações de email no seu painel do back4app habilite a verificação de email para garantir que novos usuários verifiquem a propriedade de seus endereços de email configure o endereço de remetente , modelos de email e seu domínio personalizado, se desejado esses recursos melhoram a segurança da conta e a experiência do usuário, validando a propriedade do email pelos usuários e fornecendo um método seguro de recuperação de senha passo 6 – gerenciamento de armazenamento de arquivos carregando e recuperando arquivos o parse inclui a parse file classe para manipulação de uploads de arquivos, que o back4app armazena de forma segura import parse from ' /parseconfig'; async function uploadimage(file) { // file is typically from an \<input type="file" /> in a webpage const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } recuperar a url do arquivo é simples const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your backbone view or html element segurança de arquivos o parse server fornece configurações flexíveis para gerenciar a segurança do upload de arquivos por exemplo { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic quando definido como verdadeiro, permite que qualquer pessoa, independentemente do status de autenticação, faça upload de arquivos enableforanonymoususer controla se usuários anônimos (visitantes) podem fazer upload de arquivos enableforauthenticateduser especifica se apenas usuários autenticados podem fazer upload de arquivos passo 7 – agendando tarefas com cloud jobs cloud jobs cloud jobs no back4app permitem que você agende e execute tarefas rotineiras em seu backend – como limpar dados antigos ou enviar um e mail de resumo diário um cloud job típico pode parecer assim // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); implante seu cloud code com o novo trabalho (via cli ou o painel) vá para o painel do back4app > configurações do app > configurações do servidor > trabalhos em segundo plano agende o trabalho para rodar diariamente ou em qualquer intervalo que atenda suas necessidades trabalhos em nuvem permitem que você automatize a manutenção em segundo plano ou outros processos periódicos – sem exigir intervenção manual passo 8 – integrando webhooks webhooks permitem que seu aplicativo back4app envie solicitações http para um serviço externo sempre que certos eventos ocorrerem isso é poderoso para integrar com sistemas de terceiros, como gateways de pagamento (por exemplo, stripe), ferramentas de marketing por e mail ou plataformas de análise navegue até a configuração de webhooks no seu painel do back4app > mais > webhooks e clique em adicionar webhook configure um endpoint (por exemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configure gatilhos para especificar quais eventos nas suas classes do back4app ou funções de cloud code dispararão o webhook por exemplo, se você quiser notificar um canal do slack sempre que um novo todo for criado crie um aplicativo slack que aceite webhooks de entrada copie a url do webhook do slack no seu painel do back4app, defina o endpoint para essa url do slack para o evento “novo registro na classe todo ” você também pode adicionar cabeçalhos http ou payloads personalizados, se necessário você também pode definir webhooks no cloud code fazendo solicitações http personalizadas em gatilhos como beforesave, aftersave passo 9 – explorando o painel de administração do back4app o back4app admin app é uma interface de gerenciamento baseada na web projetada para usuários não técnicos realizarem operações crud e lidarem com tarefas rotineiras de dados sem escrever nenhum código ele fornece uma interface centrada no modelo , amigável ao usuário que simplifica a administração de banco de dados, gerenciamento de dados personalizados e operações em nível empresarial habilitando o app de administração habilite indo para app dashboard > mais > admin app e clicando no botão “habilitar app de administração” crie um primeiro usuário administrador (nome de usuário/senha), que gera automaticamente um novo papel (b4aadminuser) e classes (b4asetting, b4amenuitem e b4acustomfield) no esquema do seu app escolha um subdomínio para acessar a interface de administração e complete a configuração faça login usando as credenciais de administrador que você criou para acessar o painel do seu novo aplicativo admin uma vez ativado, o aplicativo admin do back4app facilita a visualização, edição ou remoção de registros do seu banco de dados – sem exigir o uso direto do parse dashboard ou código de backend com controles de acesso configuráveis, você pode compartilhar essa interface com segurança com membros da equipe ou clientes que precisam de uma maneira clara e intuitiva de gerenciar dados conclusão ao seguir este tutorial abrangente, você criou um backend seguro para um aplicativo backbonejs no back4app configurou um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrou consultas em tempo real (consultas ao vivo) para atualizações imediatas de dados aplicou medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementou funções de cloud code para executar lógica de negócios personalizada no lado do servidor configurou autenticação de usuário com suporte para verificação de e mail e redefinições de senha gerenciou uploads de arquivos e recuperação, com controles de segurança de arquivos opcionais agendou cloud jobs para tarefas automatizadas em segundo plano usou webhooks para integrar com serviços externos explorou o painel de administração do back4app para gerenciamento de dados com um frontend backbonejs sólido e um backend robusto do back4app, você está agora bem equipado para desenvolver aplicativos ricos em recursos, escaláveis e seguros continue explorando funcionalidades mais avançadas, integre sua lógica de negócios e aproveite o poder do back4app para economizar inúmeras horas na administração de servidores e bancos de dados boa codificação! próximos passos construa um aplicativo backbonejs pronto para produção estendendo este backend para lidar com modelos de dados mais complexos, estratégias de cache e otimizações de desempenho integre recursos avançados como fluxos de autenticação especializados, controle de acesso baseado em funções ou apis externas (como gateways de pagamento) confira a documentação oficial do back4app para mergulhos mais profundos em segurança avançada, ajuste de desempenho e análise de logs explore outros tutoriais sobre aplicativos de chat em tempo real, painéis de iot ou serviços baseados em localização você pode combinar as técnicas aprendidas aqui com