Quickstarters
Feature Overview
Como Construir um Backend para jQuery?
39 min
introdução neste tutorial, você aprenderá como construir um backend para jquery usando o back4app vamos integrar os recursos essenciais do back4app—gerenciamento de banco de dados, cloud code, apis rest e graphql, autenticação de usuários e consultas em tempo real—para criar um backend seguro e escalável este backend se comunicará com seu frontend baseado em jquery através de chamadas ajax e outros métodos comuns do jquery o ambiente intuitivo do back4app reduz o tempo necessário para configurar servidores ou bancos de dados seguindo alguns passos simples, você ganhará experiência prática com acls, permissões em nível de classe, modelagem de dados, uploads de arquivos e muito mais ao final deste tutorial, você terá uma base sólida para um aplicativo totalmente funcional baseado em jquery conectado a um backend do back4app você estará pronto para adicionar lógica personalizada, integrar apis externas e proteger seus dados com controle detalhado pré requisitos para completar este tutorial, você precisará uma conta back4app e um novo projeto back4app começando com 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 jquery você pode baixar o jquery do site oficial https //jquery com/download/ node js (versão 14 ou superior) instalado (opcional) embora o node js não seja estritamente necessário para o jquery em um navegador, você pode precisar dele para executar servidores de teste locais ou instalar pacotes npm se desejar fazer testes locais instalando o node js https //nodejs org/en/download/ familiaridade com javascript e conceitos básicos de jquery documentação oficial do jquery https //api jquery com/ certifique se de ter todos esses pré requisitos em ordem antes de começar, para que você possa acompanhar suavemente ao construir sua interface front end baseada em jquery e conectá la ao back4app passo 1 – configurando o projeto back4app criar um novo projeto para começar seu projeto de backend jquery, crie um novo projeto back4app 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, “jquery backend tutorial”) quando o projeto for criado, você o verá no seu painel do back4app esta será a base das suas configurações de backend para jquery conectar o sdk do parse back4app usa a plataforma parse para dados e recursos em tempo real se você quiser usar o sdk parse diretamente com jquery, pode carregá lo como um script em seu html recupere suas chaves parse no painel do back4app, abra as “configurações do app” ou “segurança & chaves” do seu app para encontrar id da aplicação chave javascript url do servidor parse (geralmente https //parseapi back4app com ) inclua o sdk parse em seu arquivo html em um jquery ambiente, você pode carregar o jquery primeiro, depois o parse, e interagir com os objetos parse em seus scripts essa conexão garante que todas as chamadas de dados para seu backend do back4app passem pela plataforma parse passo 2 – configurando o banco de dados salvando e consultando dados após integrar o sdk do parse, você pode salvar e buscar dados do banco de dados back4app aqui está um exemplo simples de como criar e recuperar objetos “todo” usando jquery e parse você também pode chamar apis rest usando curl 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 ou use graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } design de esquema e tipos de dados no painel do back4app vá para “banco de dados ” crie uma nova classe (por exemplo, “todo”) e adicione colunas como título (string) e iscompleted (boolean) você também pode deixar o parse criar colunas automaticamente na primeira vez que salvar um objeto usando o agente de ia o back4app tem um agente de ia para modelagem de dados abra o agente de ia no painel ou menu do seu aplicativo descreva seu modelo de dados (por exemplo, “crie um aplicativo todo com um esquema de classe ”) deixe o agente de ia gerar o esquema dados relacionais se você tiver uma categoria classe vinculada a muitos todo itens, você pode usar ponteiros ou relações consultas ao vivo para atualizações em tempo real em seu aplicativo jquery ative consultas ao vivo no seu painel do back4app em configurações do servidor inicialize uma assinatura de consulta ao vivo esta assinatura notifica você em tempo real sempre que um objeto “todo” é criado, atualizado ou excluído passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app acls (listas de controle de acesso) e clps (permissões em nível de classe) permitem que você controle quem pode ler e escrever dados em níveis de objeto ou classe listas de controle de acesso (acls) uma acl é definida em objetos individuais para limitar o acesso permissões de nível de classe (clps) clps controlam as permissões padrão para toda uma classe no seu painel do back4app , abra a seção de banco de dados selecione sua classe (por exemplo, “todo”) vá para a aba de permissões de nível de classe para configurar o acesso público, autenticado ou baseado em função combine acls para segurança em nível de objeto com clps para restrições mais amplas para mais informações, veja diretrizes de segurança do app https //www back4app com/docs/security/parse security passo 4 – escrevendo e implantando funções em nuvem código em nuvem executa javascript personalizado no lado do servidor, permitindo que você adicione lógica de negócios, validações de dados ou chamadas de api externas como funciona você coloca seu código em main js (ou um arquivo similar), implanta no back4app e deixa o parse server cuidar da execução você também pode usar módulos npm para lógica mais complexa // main js const axios = require('axios'); 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; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); implante sua função via o https //www back4app com/docs/local development/parse cli b4a deploy através do painel no painel do seu app, vá para cloud code > functions copie/cole a função em main js clique em deploy chamando sua função a partir do jquery, você pode chamar uma função em nuvem assim passo 5 – configurando a autenticação do usuário autenticação do usuário no back4app o back4app utiliza a parse user classe para autenticação o hash de senha, tokens de sessão e armazenamento seguro são gerenciados automaticamente configurando a autenticação do usuário gerenciamento de sessão você pode recuperar o usuário atual const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } sair parse user logout(); integração de login social back4app suporta google, facebook, apple e outros provedores oauth para mais informações, veja a documentação de login social https //www back4app com/docs/platform/sign in with apple passo 6 – gerenciando armazenamento de arquivos fazendo upload e recuperando arquivos use parse file para gerenciar uploads você pode armazenar o arquivo em uma classe atribuindo o a um campo const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); recuperando a url do arquivo const imagefile = photo get('imagefile'); const imageurl = imagefile url(); segurança de arquivos você pode gerenciar quem pode fazer upload de arquivos modificando as configurações de upload de arquivos no parse server { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } passo 7 – agendando tarefas com cloud jobs cloud jobs você pode executar tarefas rotineiras, como excluir dados antigos // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); 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); } }); no painel, vá para configurações do app > configurações do servidor > tarefas em segundo plano para agendá lo passo 8 – integrando webhooks webhooks permitem que seu aplicativo envie solicitações http para um serviço externo sempre que certos eventos ocorrerem vá para mais > webhooks no seu painel do back4app adicione um novo webhook com seu endpoint externo configure gatilhos para eventos como “novo registro na classe todo ” você pode integrar o slack ou um gateway de pagamento como o stripe enviando dados de eventos através de webhooks passo 9 – explorando o painel de administração do back4app o aplicativo de administração do back4app oferece uma interface baseada na web, não técnica, para operações crud habilitando o aplicativo de administração vá para app dashboard > mais > admin app e clique em “ativar admin app” crie um primeiro usuário admin , que automaticamente cria um novo papel (b4aadminuser) e classes no seu esquema escolha um subdomínio para acessar o aplicativo admin faça login usando suas novas credenciais de admin uma vez ativado, este aplicativo de administração permite que você gerencie dados ou conceda acesso a membros da equipe sem codificação conclusão neste guia, você aprendeu como construir um backend para jquery com back4app você criou um novo projeto back4app como sua base de backend configurou um banco de dados, incluindo design de esquema e relações de dados usou acls e clps para segurança detalhada implantou cloud code para lógica personalizada do lado do servidor configurou autenticação de usuário, armazenamento de arquivos e atualizações em tempo real agendou trabalhos em segundo plano e integrou webhooks para serviços externos explorou o painel de administração do back4app para gerenciamento de dados mais simples agora você está preparado para expandir esta configuração básica de jquery + back4app em uma solução de produção completa continue integrando recursos avançados como login social ou regras de segurança mais detalhadas aproveite para construir suas aplicações escaláveis e orientadas a dados! próximos passos vá para produção adicione permissões avançadas baseadas em funções, estratégias de cache e ajuste de desempenho integre apis de terceiros para pagamentos, mensagens ou análises explore a documentação do back4app aprofunde se em segurança avançada, logs ou análises crie aplicativos do mundo real use a simplicidade do jquery combinada com os poderosos serviços de backend do back4app