How to Build a Backend for Ionic?

introdução neste tutorial, você aprenderá como construir um backend completo para um aplicativo ionic usando o back4app vamos abordar gerenciamento de banco de dados, funções de código em nuvem, apis rest e graphql, autenticação de usuários, manipulação de arquivos e mais nosso objetivo é mostrar a você como construir um backend para ionic que seja seguro, escalável e fácil de manter usaremos o ambiente intuitivo do back4app para simplificar a configuração do lado do servidor, poupando você de configurar manualmente servidores ou bancos de dados você aprenderá ferramentas essenciais, como agendar tarefas com cloud jobs, aplicar regras de segurança avançadas e integrar webhooks com outros serviços ao final, você estará pronto para expandir este backend fundamental em um sistema pronto para produção para seu aplicativo ionic 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, crie uma gratuitamente e siga o guia acima para configurar seu projeto ambiente básico de desenvolvimento ionic certifique se de que você tenha o ionic cli https //ionicframework com/docs/intro/cli instalado e que pode criar e executar um aplicativo ionic node js (versão 14 ou superior) instalado baixar node js https //nodejs org/en/download/ para gerenciar dependências e construir seu projeto familiaridade com conceitos de javascript/typescript e ionic documentação oficial do ionic https //ionicframework com/docs uma boa compreensão das estruturas, componentes e ganchos de ciclo de vida do ionic será útil passo 1 – criando um novo projeto no back4app e conectando faça login na sua conta back4app crie um novo aplicativo usando o botão “novo app” no seu painel do back4app nomeie seu aplicativo (por exemplo, “ionic backend tutorial”) este projeto back4app é a base para o seu backend ao contrário do uso de um sdk parse do lado do cliente, este tutorial demonstrará como fazer chamadas através de rest e graphql a partir do seu aplicativo ionic recuperando suas credenciais no painel do back4app, vá para configurações do app ou segurança e chaves anote seu id do aplicativo , chave da api rest , e endpoint graphql você precisará deles para enviar solicitações do seu aplicativo ionic passo 2 – configurando o banco de dados ter um banco de dados bem estruturado é a espinha dorsal de todo aplicativo o painel do back4app facilita o design de modelos de dados e o gerenciamento de relacionamentos 1\ criando um modelo de dados vá para a banco de dados seção no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas (por exemplo, título como uma string, estácompleto como um booleano) 2\ criando um modelo de dados usando o agente de ia abra o agente de ia do seu painel do back4app descreva seu esquema desejado, como “crie uma classe todo com campos para título (string) e iscompleted (boolean) ” o agente de ia gerará o esquema automaticamente 3\ lendo e escrevendo dados usando a api rest do seu código ionic, você pode executar requisições http por exemplo, para criar um todo 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 para buscar todos os todos curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo você pode integrar essas chamadas usando fetch , axios , ou qualquer biblioteca de cliente http dentro dos arquivos de serviço ou componente do seu aplicativo ionic 4\ lendo e escrevendo dados usando a api graphql da mesma forma, você pode enviar mutações e consultas graphql do seu aplicativo ionic por exemplo, para criar um novo todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } exemplo chamadas rest ou graphql podem ser colocadas em um arquivo de provedor/serviço na sua estrutura ionic, e então chamadas a partir das suas páginas 5\ trabalhando com consultas ao vivo (opcional) consultas ao vivo fornecem atualizações em tempo real para os dados do seu aplicativo, embora exijam o sdk do parse ou uma abordagem de assinatura especializada se você precisar de dados em tempo real, pode habilitar consultas ao vivo nas configurações do seu servidor back4app normalmente, você usaria uma conexão websocket para monitorar mudanças em suas classes no entanto, para chamadas baseadas em http padrão, você pode consultar periodicamente os endpoints rest ou graphql passo 3 – aplicando segurança com acls e clps visão geral breve acls (listas de controle de acesso) permitem que você defina permissões de leitura/escrita em objetos individuais clps (permissões de nível de classe) permitem que você gerencie o acesso mais amplo no nível da classe esses recursos são cruciais para proteger dados privados e garantir que apenas usuários autorizados possam modificar informações configurando permissões de nível de classe no seu painel do back4app, vá para banco de dados > permissões de nível de classe configure os padrões da sua classe (por exemplo, apenas usuários autenticados podem criar novos todos) configurando acls ao criar ou atualizar registros, você pode passar acl campos através do 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 '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo para mais informações, veja as diretrizes de segurança do app https //www back4app com/docs/security/parse security passo 4 – escrevendo funções de cloud code por que cloud code cloud code permite que você execute javascript do lado do servidor para tarefas como validação de dados, gatilhos ou integrações você pode criar endpoints personalizados para centralizar a lógica, o que é especialmente útil se você quiser manter o código fora do cliente exemplo de função e gatilhos no seu main js no lado do servidor (back4app), você poderia escrever // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); implante isso através do back4app cli https //www back4app com/docs/local development/parse cli ou na seção cloud code do painel chamando cloud code do ionic você pode enviar uma solicitação post 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 '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); implante isso através do back4app cli https //www back4app com/docs/local development/parse cli ou na seção cloud code do painel você receberá uma resposta json contendo quaisquer dados retornados ou uma mensagem de erro módulos npm você pode instalar pacotes como axios no seu ambiente de cloud code para integrar serviços de terceiros inclua os em main js const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); implante e chame o da mesma forma que você chamaria qualquer função de cloud code passo 5 – configurando a autenticação habilitando a autenticação do usuário o registro e login do usuário podem ser feitos com chamadas rest para a user classe por exemplo, para registrar 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 '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users login curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login em caso de sucesso, você receberá um sessiontoken armazene o com segurança e inclua o nos cabeçalhos de futuras requisições para operações autenticadas logins sociais você pode configurar logins sociais (como google ou facebook) configurando o fluxo oauth através do back4app ou usando provedores externos consulte a documentação de login social https //www back4app com/docs/platform/sign in with apple para etapas detalhadas passo 6 – gerenciamento de armazenamento de arquivos configurando o armazenamento de arquivos back4app oferece armazenamento de arquivos seguro você pode anexar arquivos a objetos ou armazená los de forma independente por exemplo curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png a resposta incluirá uma url de arquivo que você pode armazenar em uma classe 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 '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo considerações de segurança você pode habilitar regras de segurança de arquivos nas configurações do servidor do back4app para exigir autenticação ou limitar o upload de arquivos a funções específicas passo 7 – verificação de email e redefinição de senha por que a verificação é importante a verificação de email garante a legitimidade dos emails dos usuários a redefinição de senha fornece uma maneira segura de recuperar credenciais perdidas isso ajuda a manter a confiança e o gerenciamento adequado dos usuários em seu aplicativo ionic configuração do painel do back4app vá para configurações do app > configurações de email habilite verificação de email personalize os modelos de email de verificação e redefinição de senha passo 8 – agendando tarefas com cloud jobs o que os cloud jobs fazem os cloud jobs permitem que você agende tarefas recorrentes, como limpeza de dados ou envio de e mails de resumo você os escreve em seu main js parse cloud job('cleanupoldtodos', async (request) => { 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); após a implantação vá para configurações do app > configurações do servidor > tarefas em segundo plano agende cleanupoldtodos para ser executado diariamente passo 9 – integrando webhooks webhooks permitem que você envie dados para serviços externos quando certos eventos ocorrem em seu projeto back4app se seu aplicativo ionic precisa acionar uma ação no stripe ou slack após criar um novo registro, você pode usar webhooks para automatizar isso vá para mais > webhooks no seu painel do back4app adicione um novo webhook e defina seu endpoint (por exemplo, https //your service com/webhook endpoint ) escolha o evento (por exemplo, “após salvar” na classe todo ) você também pode iniciar solicitações de saída a partir de gatilhos de cloud code em main js usando bibliotecas http padrão passo 10 – explorando o painel de administração do back4app o back4app admin app é uma interface mais simples para partes interessadas não técnicas ele fornece uma maneira fácil de realizar operações crud em suas classes sem entrar no painel principal do parse habilitando o admin app no painel, vá para mais > admin app clique em habilitar admin app e crie um usuário administrador escolha um subdomínio para acessar sua interface de administração este painel ajuda você a gerenciar dados sem escrever consultas, tornando o ideal para clientes ou membros da equipe que preferem uma interface gráfica conclusão ao completar este guia sobre como construir um backend para ionic , você criou um backend seguro no back4app com modelos de dados robustos e relacionamentos integrado com apis rest e graphql para ler e escrever dados do seu aplicativo ionic implementou segurança com acls e clps implantou cloud code para lógica e gatilhos personalizados configurou autenticação de usuário e armazenamento de arquivos configurou cloud jobs para agendar tarefas aproveitou webhooks para integrações externas explorou o painel de administração para simplificar a administração de dados com esta base, seu aplicativo ionic pode evoluir para uma plataforma pronta para produção adicione mais lógica, conecte apis de terceiros ou ajuste as regras de segurança para corresponder ao seu caso de uso próximos passos aprimore sua construção de produção implementando cache, acesso baseado em funções e monitoramento de desempenho integre recursos avançados como consultas em tempo real ou autenticação multifatorial consulte a documentação oficial do back4app para uma exploração aprofundada de análises, logs e ajuste de desempenho explore outros tutoriais que demonstrem aplicativos de chat, integrações iot ou recursos baseados em localização combinados com os robustos serviços de backend do back4app