Como construir um backend para Flutter?

introdução neste tutorial, você aprenderá como construir um backend para flutter usando o back4app, um backend como serviço (baas) de código aberto e confiável vamos percorrer a integração de recursos essenciais do back4app—como gerenciamento de banco de dados, funções em nuvem, apis restful, apis graphql e autenticação de usuários—no seu projeto flutter você também descobrirá como lidar com atualizações em tempo real usando consultas ao vivo ao usar os poderosos servidores de backend do back4app, você pode pular grande parte da configuração manual e se concentrar em criar um aplicativo flutter dinâmico este guia mostrará aos desenvolvedores flutter como configurar uma estrutura de backend segura, escalável e robusta que se comunica facilmente com seu lado do cliente também destacaremos as vantagens de deixar o back4app lidar com o trabalho pesado—como hospedagem, autenticação de usuários e lógica de servidor—para que você possa se beneficiar de recursos como escalonamento automático, segurança avançada e manutenção simplificada se você tem um projeto flutter e deseja economizar inúmeras horas na configuração do backend, este é o lugar certo para começar ao final deste tutorial, você entenderá o tipo de backend que pode criar com o back4app e estará pronto para expandir seus serviços de backend para uma aplicação pronta para produção ou integrar funcionalidades mais complexas, como apis externas e autenticação de usuários avançada vamos começar! 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 desenvolvimento flutter certifique se de ter o flutter sdk https //docs flutter dev/get started/install instalado e configurado além disso, confirme que você tem um ide (como android studio ou vs code) configurado para flutter ambiente da linguagem de programação dart normalmente, isso é instalado junto com o flutter certifique se de que você pode importar pacotes dart sem erro familiaridade com os fundamentos do flutter documentação oficial do flutter https //docs flutter dev se você é novo no flutter, revise a documentação oficial ou um tutorial para iniciantes antes de começar certifique se de ter todos esses pré requisitos em ordem ter seu projeto back4app configurado e seu ambiente local flutter configurado ajudará você a acompanhar mais facilmente passo 1 – criando um novo projeto no back4app e conectando criar um novo projeto o primeiro passo para construir seu backend flutter 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, “flutter backend tutorial”) uma vez que o projeto é criado, você o verá listado no seu painel do back4app este projeto será a base para todas as configurações de backend que discutiremos instale e inicialize o sdk parse em seu app flutter o back4app depende da plataforma parse para gerenciar seus dados, atualizações em tempo real, autenticação de usuários e mais para conectar seu projeto flutter ao back4app, siga estes passos adicione o sdk flutter parse ao seu app dependencies parse server sdk flutter ^4 0 0 importe o pacote parse em seu main dart (ou onde quer que você inicialize seu app) import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } no seu painel do back4app, vá para a seção segurança e chaves para encontrar seu id da aplicação , chave do cliente , e url do parse server substitua os espaços reservados acima pelas suas próprias credenciais com esta inicialização, cada solicitação do seu aplicativo flutter é roteada de forma segura para sua instância do back4app lembre se de que a chave mestre nunca deve ser usada no lado do cliente do seu aplicativo flutter se você precisar da chave mestre, mantenha a no servidor ou em um ambiente seguro passo 2 – configurando o banco de dados criando um modelo de dados uma vez que seu aplicativo flutter esteja conectado ao back4app, você pode começar a projetar seu esquema de banco de dados você pode fazer isso manualmente a partir do painel do back4app navegue até a seção “banco de dados” no seu painel crie uma nova classe (por exemplo, “todo”), e adicione colunas relevantes (por exemplo, título, estácompleto) o back4app também fornece um agente de ia para ajudar na criação automática de esquemas abra o agente de ia no seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “crie um novo aplicativo todo com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você isso simplifica a configuração da arquitetura de dados se você quiser que os campos sejam criados automaticamente, pode simplesmente começar a salvar objetos do seu aplicativo—parse suporta a criação de esquemas em tempo real criando um modelo de dados usando o agente de ia se você optar por usar o agente de ia do back4app, basta fornecer uma descrição curta, e ele irá construir ou sugerir um esquema para você esta é uma excelente maneira de acelerar a fase inicial de modelagem de dados do seu projeto flutter lendo e escrevendo dados usando o sdk flutter parse abaixo está um exemplo simples demonstrando como criar e recuperar objetos usando o sdk flutter parse import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } com isso, você pode interagir diretamente com seu banco de dados back4app a partir do seu aplicativo flutter basta chamar createtodoitem('feed the cat', false) ou fetchtodos() para escrever e ler dados lendo e escrevendo dados usando a api rest se você precisar integrar com outros serviços ou preferir uma abordagem mais tradicional, ainda pode usar a 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 lendo e escrevendo dados usando a api graphql o back4app também oferece um endpoint graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } isso lhe dá flexibilidade para construir a abordagem que funcionar melhor para o seu aplicativo flutter trabalhando com consultas ao vivo back4app fornece consultas ao vivo para que você possa receber atualizações em tempo real dos seus dados ative as consultas ao vivo no painel do back4app (configurações do servidor) e depois use o cliente parse livequery flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } com esta assinatura, você pode ouvir as mudanças de dados à medida que acontecem isso é fantástico para construir aplicativos colaborativos onde múltiplos usuários veem atualizações de dados ao vivo uma vez que o hot reload é acionado, sua assinatura permanecerá a menos que o aplicativo seja reiniciado passo 3 – aplicando segurança com acls e clps o que são acls e clps? back4app usa acls (listas de controle de acesso) e clps (permissões de nível de classe) para restringir quem pode ler ou escrever dados tanto em nível de objeto quanto de classe esta camada garante que seus dados estejam protegidos contra acesso não autorizado configurando permissões de nível de classe no seu painel do back4app, vá para database e selecione uma classe (por exemplo, “todo”) navegue até class level permissions defina padrões (por exemplo, apenas usuários autenticados podem criar novos objetos) configurando acls no código você também pode aplicar acls no nível do objeto a partir do código flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } ao combinar clps e acls, você pode garantir que apenas as pessoas ou funções certas possam acessar ou modificar dados específicos passo 4 – escrevendo funções de cloud code por que cloud code? o cloud code permite que você execute lógica do lado do servidor sem configurar manualmente nenhum servidor backend isso é perfeito para validar dados, integrar com serviços externos ou impor certas regras em seu backend como um serviço (baas) função de exemplo aqui está um exemplo de função cloud que calcula o comprimento de um texto // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); você pode implantar este código via back4app cli ou no painel do seu aplicativo em cloud code implantação usando o back4app cli b4a configure accountkey b4a deploy usando o painel no painel do seu aplicativo, vá para cloud code > functions cole o código javascript clique em implantar chamando o cloud code do flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } essa abordagem segura garante que a lógica sensível permaneça no servidor, enquanto seu aplicativo flutter simplesmente faz solicitações passo 5 – configurando a autenticação ativar autenticação de usuário back4app usa a parse user classe para gerenciar o cadastro e login de usuários por padrão, o parse cuida da criptografia de senhas, tokens de sessão e armazenamento seguro import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } login social back4app suporta integrações com google, apple, facebook e mais cada provedor tem uma abordagem específica e pode exigir bibliotecas adicionais (por exemplo, para login com facebook ou google) você pode então chamar await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); ajuste os parâmetros de acordo com a documentação do provedor passo 6 – gerenciando armazenamento de arquivos configurando o armazenamento de arquivos você pode armazenar imagens, documentos ou outros arquivos de mídia usando parsefile o back4app protege esses arquivos e fornece uma url para recuperação import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } considerações de segurança você pode definir quem tem acesso aos arquivos (público, usuários autenticados ou restrito) combinando a segurança em nível de arquivo com acls isso garante que os dados do seu arquivo permaneçam seguros passo 7 – verificação de email e redefinição de senha por que eles importam a verificação de email confirma que um usuário possui o endereço de email fornecido, enquanto os fluxos de redefinição de senha melhoram a experiência do usuário e a segurança configuração do painel vá para as configurações de email do seu aplicativo no painel do back4app ative verificação de email e redefinição de senha configure modelos de email ou seu domínio personalizado, se necessário essas configurações permitem que seu aplicativo flutter gerencie automaticamente verificações de propriedade do usuário e recuperação de senha implementação em flutter final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } passo 8 – agendando tarefas com cloud jobs cloud jobs você pode querer agendar tarefas recorrentes (como limpar dados antigos ou enviar emails periódicos) cloud jobs permitem que você faça exatamente isso // 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); implante este código, depois vá para configurações do app > configurações do servidor > tarefas em segundo plano no seu painel do back4app para agendá lo passo 9 – integrando webhooks o que são webhooks? webhooks permitem que seu aplicativo back4app envie requisições http para um serviço externo quando certos eventos ocorrem (como salvar um novo objeto) isso é ideal para integrar com ferramentas de terceiros vá para mais > webhooks no seu painel do back4app e adicione webhook defina seu endpoint e gatilhos (por exemplo, “novo registro em todo”) você também pode configurar webhooks manualmente no cloud code fazendo requisições http nos gatilhos beforesave ou aftersave passo 10 – explorando o painel de administração do back4app onde encontrá lo o back4app admin app é uma interface amigável que permite que membros da equipe não técnicos gerenciem dados (operações crud, tarefas de dados, etc ) sem precisar abrir o painel do parse vá para app dashboard > mais > admin app clique em habilitar admin app você criará um usuário administrador, escolherá um subdomínio e fará login com as credenciais recém criadas o admin app ajuda com revisões e modificações rápidas de dados conclusão neste tutorial, você aprendeu como construir um backend para flutter usando o back4app e o parse flutter sdk você criou classes, armazenou dados, configurou consultas em tempo real, aplicou segurança com acls e clps, escreveu funções em nuvem, agendou tarefas, integrou webhooks e explorou o painel de administração do back4app essa abordagem acelera o desenvolvimento, permitindo que você se concentre no lado do cliente flutter em vez de configurações complexas de servidor a string final que você tem agora é um backend funcional e seguro que aproveita apis restful, autenticação de usuários e fácil manipulação de dados você pode integrar recursos mais avançados a qualquer momento—como funções em nuvem adicionais, chamadas de apis externas ou funções personalizadas próximos passos prepare se para produção implemente cache avançado, análises ou controles de acesso baseados em funções amplie seu aplicativo integre serviços de terceiros ou crie mais funções em nuvem para lógica de negócios especializada consulte a documentação do back4app explore segurança avançada, ajuste de desempenho, análise de logs e mais saiba mais confira tutoriais para aplicativos de chat ao vivo, serviços baseados em localização ou estruturas de dados mais complexas combine os com seu projeto flutter para casos de uso do mundo real ao continuar refinando essa configuração, você transformará seu aplicativo flutter em uma solução poderosa e escalável construída sobre um robusto serviço de backend boa codificação!