Como Construir um Backend para JavaScript?

introdução neste tutorial, você aprenderá como construir um backend completo para uma aplicação em javascript vanilla usando o back4app vamos passar pela 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 front end escrito em javascript puro 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 incorporar facilmente 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 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 javascript vanilla você pode configurar isso simplesmente criando um index html arquivo e referenciando scripts externos certifique se de ter um navegador da web moderno ou um ambiente que possa executar javascript node js (versão 14 ou superior) (opcional) você precisará do node js se planeja instalar o sdk javascript do parse localmente ou gerenciar a implantação de código via linha de comando instalando o node js https //nodejs org/en/download/ familiaridade com os fundamentos do javascript documentação da mdn sobre javascript https //developer mozilla org/en us/docs/web/javascript reveja os conceitos básicos de javascript se você é novo na linguagem certifique se de ter todos esses pré requisitos em ordem antes de começar ter seu projeto back4app configurado e um ambiente básico de javascript pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend em vanilla javascript no back4app é criar um novo projeto se você ainda não criou um, siga estes passos faça login na sua conta do back4app clique no botão “novo app” no seu painel do back4app dê um nome ao seu app (por exemplo, “vanillajs 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 conectar o sdk do parse 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 vanilla javascript ao back4app pode ser feito incluindo o sdk do parse no seu html ou instalando o com npm se você estiver executando um processo de build recupere suas chaves do 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 ) opção 1 adicionar o parse via uma tag de script adicione este script ao seu index html (substitua version por uma versão válida do repositório do sdk js do parse https //github com/parse community/parse sdk js/releases ) opção 2 usar npm (se você tiver um processo de build) npm install parse então, no seu arquivo javascript principal (por exemplo, main js ) import parse from 'parse/dist/parse min js'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; ao completar esta etapa, você estabeleceu uma conexão segura entre seu front end vanilla javascript 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 ao seu código javascript, você pode agora começar a salvar e recuperar dados a maneira mais simples de criar um registro é usar a parse object classe // example create a todo item async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); 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); } } // example query all todo items async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query 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 parse sdk, 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 código javascript 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 controle do app ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo app 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ê tiver dados relacionais – digamos, um categoria objeto que aponta para múltiplos todo itens – você pode usar pointers ou relations no parse por exemplo, adicionando um ponteiro a um categoria // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todo = new parse object('todo'); // construct a pointer to the category const categorypointer = new parse object('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); } } quando você consulta, também pode incluir dados de ponteiro const query = new parse query('todo'); query include('category'); const todoswithcategory = await query find(); esta include('category') chamada busca detalhes da categoria junto com cada todo, tornando seus dados relacionais acessíveis de forma contínua consultas em tempo real para atualizações em tempo real, o back4app fornece consultas em tempo real em seu aplicativo vanilla javascript, você pode se inscrever para mudanças em uma classe específica ative as consultas em tempo real no seu painel do back4app sob as configurações do servidor certifique se de que “consultas em tempo real” esteja ativado inicialize uma assinatura de consulta em tempo real em seu código src/parseconfig js // src/parseconfig js import parse from 'parse/dist/parse min js'; // 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 js'; async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query 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 uma nova todo é criada, atualizada ou deletada 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 de 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) uma acl é aplicada a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/escrita por exemplo async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); 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 uma acl que impede que qualquer pessoa, exceto o usuário especificado, o leia ou modifique permissões em 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 base de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões em nível de classe aba configure seus padrões, como “requer autenticação” para leitura ou gravação, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto os 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 em seu projeto back4app, que é executado dentro do ambiente 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, escalonamento ou provisionamento sempre que você atualizar e implantar seu arquivo main js, o parse server em execução é atualizado com seu código mais recente estrutura do arquivo main js um típico main js pode conter requerer declarações para quaisquer módulos necessários (pacotes npm, módulos internos do node ou outros arquivos de código em nuvem) definições de funções em nuvem usando parse cloud define() gatilhos como parse cloud beforesave() , parse cloud aftersave() , etc módulos npm que você instalou (se necessário) por exemplo, você pode instalar um pacote como axios para fazer requisições http você pode então requerer (ou importar) no topo do seu arquivo // 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 código em nuvem 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ócios 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 a 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 aplicação de segurança adicione uma camada extra de segurança validando e sanitizando parâmetros de entrada em suas funções do cloud code por exemplo, você pode garantir que os dados recebidos correspondam a formatos específicos, rejeitar entradas inválidas ou maliciosas e aplicar regras de acesso com base em funções ou permissões de usuário antes de realizar operações sensíveis implante sua função abaixo está uma função simples de 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 https //www back4app com/docs/local development/parse 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 https //www back4app com/docs/local development/parse cli#f cxi b4a configure accountkey 3 implemente seu código em nuvem b4a deploy implementando através do painel no painel do seu aplicativo, vá para cloud code > functions copie/cole a função no main js editor clique em deploy chamando sua função do vanilla javascript usando o sdk parse (assumindo que você configurou o parse como acima) 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á lo 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 vanilla javascript ou qualquer outro cliente que suporte rest ou graphql passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app o 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 do usuário em uma configuração de javascript vanilla, você pode criar um novo usuário com 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); } } faça login em um usuário existente 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 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 gerencia automaticamente 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 por exemplo, você pode configurar um login do facebook configurando seu id do app do facebook e usando parse facebookutils login() as instruções detalhadas variam, então consulte a documentação de login social https //www back4app com/docs/platform/sign in with apple 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 parse inclui a classe parse file para gerenciar uploads de arquivos, que o back4app armazena de forma segura async function uploadimage(file) { // file might be obtained from an \<input type="file" /> or any other source 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); } } 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 para anexar o arquivo a um objeto no banco de dados, você pode fazer 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(); você pode exibir este imageurl na sua página web definindo o como o src de uma \<img> tag segurança de arquivos o parse server fornece configurações flexíveis para gerenciar a segurança do upload de arquivos o exemplo a seguir mostra como você pode definir permissões para controlar quem pode enviar arquivos para o servidor enableforpublic quando definido como verdadeiro, permite que qualquer pessoa, independentemente do status de autenticação, envie arquivos enableforanonymoususer controla se usuários anônimos (não registrados) podem enviar arquivos quando habilitado, usuários temporários ou convidados podem enviar arquivos enableforauthenticateduser especifica se apenas usuários autenticados podem enviar arquivos isso é ideal para garantir que apenas usuários confiáveis tenham acesso a essa funcionalidade passo 7 – agendando tarefas com cloud jobs cloud jobs trabalhos em nuvem no back4app permitem que você agende e execute tarefas rotineiras em seu backend – como limpar dados antigos ou enviar um resumo diário por e mail um trabalho em nuvem 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 código em nuvem 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 ser executado 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 ) 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 personalizados ou payloads, 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 em modelos , 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ê criado um backend seguro para um aplicativo vanilla javascript no back4app configurado um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrado consultas em tempo real (consultas ao vivo) para atualizações imediatas de dados aplicadas medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementado cloud code funções para executar lógica de negócios personalizada no lado do servidor configurado autenticação de usuário com suporte para verificação de e mail e redefinições de senha gerenciado uploads de arquivos e recuperação, com controles de segurança de arquivos opcionais agendado cloud jobs para tarefas automatizadas em segundo plano usado webhooks para integrar com serviços externos explorado o painel de administração do back4app para gerenciamento de dados com um front end sólido em vanilla javascript e um robusto backend no back4app, você está agora bem equipado para desenvolver aplicações ricas em recursos, escaláveis e seguras 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 javascript 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 apis de terceiros para criar aplicativos complexos do mundo real