Como Construir um Backend para NativeScript?

introdução neste tutorial, você aprenderá como construir um backend para nativescript usando o back4app, uma plataforma de código aberto que simplifica o desenvolvimento de backend para aplicativos móveis vamos percorrer a integração de recursos essenciais do back4app—como gerenciamento de banco de dados, funções de código em nuvem, endpoints de api rest e graphql, autenticação de usuários e consultas em tempo real (consultas ao vivo)—para criar um backend seguro e escalável para seus aplicativos nativescript você também descobrirá como o back4app reduz drasticamente o tempo de configuração em comparação com configurações manuais de servidor e banco de dados exploraremos mecanismos de segurança avançados, agendamento de tarefas com jobs em nuvem e uso de webhooks para conectar se a serviços de terceiros ao final deste guia, você terá um backend flexível que aproveita o nativescript core, que alimenta as soluções móveis multiplataforma do nativescript com esta base, você estará pronto para integrar sua própria lógica personalizada ou apis externas conforme necessário este será um grande passo para desenvolver aplicativos nativescript prontos para produção pré requisitos 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 desenvolvimento nativescript você pode configurar isso usando o nativescript cli ou outro fluxo de trabalho preferido guia de introdução ao nativescript https //docs nativescript org/environment setup node js (versão 14 ou superior) instalado você precisará do node js para instalar pacotes npm e executar o nativescript cli instalando o node js https //nodejs org/en/download/ familiaridade com javascript e nativescript core documentação oficial do nativescript https //docs nativescript org/ se você é novo no nativescript, 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 do nativescript pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend nativescript no back4app é criar um novo projeto se você ainda não fez isso, 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, “nativescript backend tutorial”) após criar o projeto, você verá ele listado no seu painel do back4app este projeto servirá como a base para todas as configurações de backend abordadas neste tutorial conectar o sdk parse o back4app usa a plataforma parse para gerenciar seus dados, funcionalidade em tempo real, autenticação de usuários e mais para conectar seu app nativescript ao back4app, instale o parse pacote npm e inicialize o com as credenciais que você obtém do seu painel do back4app recupere suas chaves parse no seu painel do back4app, vá para a seção “configurações do app” ou “segurança & chaves” do seu app procure pelo seu id da aplicação , chave javascript , e url do servidor parse (no formato https //parseapi back4app com ) instale o sdk do parse npm install parse em seguida, inicialize o parse em um arquivo de configuração ou no seu arquivo de entrada principal (por exemplo, app js ) por exemplo, você pode criar um arquivo chamado parseconfig js em um projeto baseado em nativescript 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; sempre que você precisar acessar o parse em seu aplicativo nativescript, basta importar este arquivo ao completar esta etapa, você estabeleceu uma conexão segura entre seu frontend nativescript e o backend do back4app, simplificando as operações de dados passo 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app pronto e o sdk do parse integrado, você pode salvar e consultar dados do seu aplicativo nativescript abaixo está um exemplo usando a parse object classe para salvar e buscar uma lista de itens // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } você também pode usar a api rest do back4app se preferir chamadas http diretas 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 supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task ou use graphql mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } essa flexibilidade torna conveniente construir recursos de backend para seus aplicativos nativescript através do parse sdk, rest ou endpoints da api graphql design de esquema e tipos de dados por padrão, o parse pode criar esquemas automaticamente, ou você pode definir suas classes e tipos de dados no painel do back4app vá para a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “tarefa”) e adicione colunas como título (string) e iscompleted (boolean) o back4app suporta tipos de dados como string , number , boolean , object , date , file , pointer , array , relation , geopoint , e polygon você pode deixar o parse criar essas colunas quando você salvar um objeto pela primeira vez ou defini las para ter mais controle usar o agente de ia do back4app também pode ajudá lo a gerar esquemas automaticamente abra o agente de ia no seu painel de aplicativos descreva seu modelo de dados desejado (por exemplo, “por favor, crie uma nova classe task para aplicativos móveis com os campos iscompleted e duedate ”) deixe o agente criar o esquema automaticamente dados relacionais se você quiser dados relacionais—como um objeto categoria que aponta para vários itens task —use pointers ou relations no parse // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); essa abordagem ajuda você a buscar dados completos para uma task e sua categoria relacionada em uma única consulta consultas ao vivo para atualizações em tempo real, ative consultas ao vivo nas configurações do servidor no painel do back4app desenvolvedores de nativescript podem se inscrever para mudanças em uma classe específica atualize sua configuração do parse para incluir uma url do servidor de consultas ao vivo 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'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; e então inscreva se em eventos em tempo real import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } essa assinatura atualiza automaticamente sua interface sempre que uma task é adicionada, modificada ou removida—perfeito para aplicativos nativescript colaborativos em tempo real passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app o back4app incorpora listas de controle de acesso (acls) e permissões de nível de classe (clps) para proteger seus dados esses modelos de segurança permitem que você controle o acesso de leitura/gravação tanto no nível da classe quanto no nível do objeto listas de controle de acesso (acls) uma acl define permissões para cada objeto por exemplo, para dar ao proprietário apenas acesso de leitura e gravação async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } isso garante que apenas o usuário especificado possa modificar ou ler o objeto permissões de nível de classe (clps) clps definem as permissões padrão para uma classe inteira abra o banco de dados no back4app e selecione a classe relevante acesse as permissões de nível de classe ajuste as permissões para o público, usuários autenticados ou funções específicas conforme necessário combinar acls e clps oferece um modelo de segurança robusto para aplicativos nativescript para mais informações, veja diretrizes de segurança do aplicativo https //www back4app com/docs/security/parse security passo 4 – escrevendo e implantando funções em nuvem o código em nuvem permite que você execute código javascript personalizado no lado do servidor, para que você não precise manter a infraestrutura você mesmo isso é ideal para adicionar lógica avançada ou integrações apenas no servidor em seu backend nativescript como funciona você normalmente coloca seu código em nuvem (funções javascript, gatilhos e quaisquer módulos npm necessários) em um main js arquivo em seguida, você o implanta no back4app, e ele é executado no ambiente do parse server sem configuração adicional do servidor estrutura do 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('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); você pode instalar e usar pacotes npm como axios para requisições http essa abordagem permite uma ampla gama de integrações, desde gateways de pagamento até apis externas, tudo por trás da segurança do seu aplicativo back4app casos de uso típicos lógica de negócios cálculos automáticos, transformações de dados ou atualizações de status validações de dados garantir que os campos obrigatórios estejam presentes antes de salvar gatilhos executar código quando os dados são criados, atualizados ou excluídos integrações conectar com serviços externos para pagamentos, análises ou mensagens aplicação de segurança validar dados de entrada ou funções de usuário antes de prosseguir implante sua função aqui está uma função simples que calcula o comprimento do texto 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 https //www back4app com/docs/local development/parse cli instale o cli curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows, baixe o b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe arquivo da página de lançamentos https //github com/back4app/parse cli/releases configure sua chave de conta b4a configure accountkey implante seu código em nuvem b4a deploy implantando através do painel vá para cloud code > functions no seu painel cole seu código de função em main js clique em deploy chamando sua função do seu aplicativo nativescript 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 usando rest ou graphql 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 mutation { calculatetextlength(input { text "hello graphql" }) { result } } isso lhe dá uma maneira flexível de integrar lógica do lado do servidor em seus aplicativos móveis baseados em nativescript passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app o back4app usa a classe parse user para gerenciar a autenticação, que inclui hash de senha, tokens de sessão e mais isso elimina grande parte da complexidade associada à gestão de contas de usuário configurando a autenticação de usuário no seu aplicativo nativescript, você pode criar um novo usuário 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); } } um exemplo de rest pode ser assim 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 o login, o parse atribui um token de sessão ao usuário para verificar o usuário atualmente logado const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } sair é simples await parse user logout(); integração de login social o parse também se integra com provedores oauth como google ou facebook a configuração varia de acordo com o provedor, então veja entrar com apple e outros https //www back4app com/docs/platform/sign in with apple para detalhes por exemplo, com o facebook 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 ative esses recursos no seu painel do back4app navegue até configurações de email no seu aplicativo back4app ative a verificação de email e a redefinição de senha configure seus modelos de email e o endereço “de” passo 6 – gerenciando armazenamento de arquivos carregando e recuperando arquivos back4app suporta gerenciamento de arquivos através da parse file no nativescript, você pode carregar imagens ou documentos de forma semelhante import parse from ' /parseconfig'; async function uploadimage(file) { 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(); } você pode recuperar a url do arquivo do objeto salvo const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components segurança de arquivos o parse server permite que você configure a segurança do upload de arquivos { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } isso garante que você pode limitar ou permitir uploads de arquivos com base em suas preferências de segurança passo 7 – agendando tarefas com cloud jobs trabalhos em nuvem trabalhos em nuvem ajudam você a automatizar tarefas rotineiras, como remover registros antigos ou enviar notificações por exemplo // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); 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 oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); implante este trabalho via cli ou no painel no painel do back4app > configurações do servidor > trabalhos em segundo plano , agende o para rodar diariamente ou em um intervalo de sua escolha passo 8 – integrando webhooks webhooks permitem que você envie requisições http para serviços externos quando certos eventos acontecem em seu aplicativo—como novos registros ou inscrições de usuários isso pode ser usado para integrar com slack, gateways de pagamento ou plataformas de análise vá para a configuração de webhooks no seu painel do back4app e selecione adicionar webhook adicione sua url de endpoint (ex https //your service com/webhook ) configure gatilhos para classes ou eventos específicos você também pode definir webhooks no cloud code ou chamar apis externas diretamente em gatilhos como beforesave ou aftersave passo 9 – explorando o painel de administração do back4app o back4app admin app é uma interface centrada em modelos e amigável para o usuário para gerenciamento de dados ele ajuda equipes ou usuários não técnicos a realizar operações crud, criar painéis personalizados e gerenciar tarefas em nível empresarial sem escrever código habilitando o app de administração no seu painel do app , clique em mais > app de administração habilitar app de administração crie um primeiro usuário administrador (nome de usuário/senha) esta configuração adiciona o b4aadminuser papel e classes associadas ( b4asetting , b4amenuitem , etc ) ao seu esquema escolha um subdomínio, depois faça login com suas novas credenciais de administrador este portal permite uma manipulação rápida de dados sem sair de uma interface gráfica—uma ótima solução para colaborar com membros da equipe que podem não estar familiarizados com programação conclusão seguindo este guia, você aprendeu como construir um backend para nativescript usando back4app e criou um backend seguro para seus aplicativos nativescript configurou um banco de dados com classes, esquemas e relacionamentos implementou consultas em tempo real para atualizações ao vivo protegeu seus dados com acls e clps estendeu a funcionalidade com cloud code configurou autenticação para registro de usuários, login e tokens de sessão gerenciou uploads de arquivos e recuperação via parse file agendou cloud jobs para tarefas automatizadas e periódicas criou webhooks para integrações de terceiros usou o painel de administração do back4app para gerenciamento de dados sem código esses passos formam uma base robusta para construir aplicativos móveis de código aberto e multiplataforma com o nativescript core continue explorando recursos avançados, incorpore mais endpoints de api ou integre sua própria lógica personalizada para adaptar o backend às necessidades exatas do seu aplicativo próximos passos escale seus aplicativos nativescript otimizando desempenho, cache e regras de segurança explore gerenciamento avançado de usuários como permissões baseadas em funções confira a documentação oficial do back4app para guias detalhados sobre segurança, logs e desempenho experimente integrações do mundo real como ferramentas de pagamentos ou análises feliz codificação e aproveite o fluxo de trabalho de desenvolvimento simplificado que o back4app oferece!