Como construir um backend para Elm?

introdução neste tutorial, você aprenderá como construir um backend completo para uma aplicação elm usando o back4app vamos percorrer a 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 frontend elm 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 esta configuração básica em uma aplicação pronta para produção ou facilmente incorporar 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 desenvolvimento elm você pode configurar isso instalando elm https //guide elm lang org/install/ certifique se de ter o elm (0 19 ou superior) instalado em sua máquina familiaridade com elm documentação oficial do elm https //guide elm lang org/ se você é novo no elm, revise a documentação oficial ou um tutorial para iniciantes antes de começar biblioteca de requisições http ou abordagem graphql para elm usaremos chamadas rest e graphql do elm, já que não há um sdk oficial do parse para elm certifique se de ter o elm/http https //package elm lang org/packages/elm/http/latest/ e, se necessário, uma biblioteca graphql configurada certifique se de ter todos esses pré requisitos em ordem antes de começar ter seu projeto back4app configurado e seu ambiente local elm pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend elm 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, “elm 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 com o back4app a partir do elm o back4app depende da plataforma parse para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais como não existe um sdk oficial do elm para parse, usaremos rest ou graphql chamadas a partir da nossa aplicação elm para comunicar com o backend do back4app recupere suas chaves 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 , chave da api rest , e endpoint graphql você também encontrará a url do servidor parse (geralmente https //parseapi back4app com ) do elm, você pode armazenar essas credenciais em um arquivo de configuração ou módulo por exemplo src/config elm module config exposing (applicationid, restapikey, serverurl, graphqlendpoint) applicationid string applicationid = "your application id" restapikey string restapikey = "your rest api key" serverurl string serverurl = "https //parseapi back4app com" graphqlendpoint string graphqlendpoint = "https //parseapi back4app com/graphql" você usará esses valores sempre que fizer requisições http para o back4app a partir do elm ao completar esta etapa, você estabeleceu como conectar de forma segura seu front end elm com o backend do back4app etapa 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app configurado, você pode agora começar a salvar e recuperar dados via rest ou graphql do elm para um exemplo simples, vamos demonstrar como criar e buscar um todo item usando rest do elm usaremos elm/http https //package elm lang org/packages/elm/http/latest/ para fazer requisições rest aqui está um exemplo simplificado para criar um item todo src/todoapi elm module todoapi exposing (createtodo, fetchtodos) import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode \ a simplified representation of a todo type alias todo = { objectid string , title string , iscompleted bool } \ encoder for creating a todo createtodoencoder string > bool > encode value createtodoencoder title iscompleted = encode object \[ ( "title", encode string title ) , ( "iscompleted", encode bool iscompleted ) ] \ decoder for todo tododecoder decode decoder todo tododecoder = decode map3 todo (decode field "objectid" decode string) (decode field "title" decode string) (decode field "iscompleted" decode bool) createtodo string > bool > http request todo createtodo title iscompleted = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/classes/todo" , body = http jsonbody (createtodoencoder title iscompleted) , expect = http expectjson tododecoder , timeout = nothing , tracker = nothing } fetchtodos http request (list todo) fetchtodos = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/classes/todo" , body = http emptybody , expect = http expectjson (decode field "results" (decode list tododecoder)) , timeout = nothing , tracker = nothing } você pode então chamar createtodo ou fetchtodos na sua função de atualização do elm, lidar com as http respostas e integrar os dados no modelo da sua aplicação usando rest diretamente (exemplo em curl) se você preferir testar ou quiser fazer chamadas rápidas fora do elm, pode usar 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 usando graphql back4app também fornece uma interface graphql abaixo está uma amostra de mutação graphql para criar um todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } no elm, você pode usar uma biblioteca graphql ou criar manualmente suas requisições http para enviar essas mutações e consultas, muito semelhante a como usamos elm/http acima 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) o 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 ou deixar o parse criar automaticamente essas colunas quando você salvar um objeto pela primeira vez a partir do seu aplicativo elm usando a abordagem rest ou graphql o 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 aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo 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 sua aplicação dados relacionais se você tiver dados relacionais – digamos, um objeto categoria que aponta para vários itens todo – você pode usar pointers ou relations no parse a partir do elm, você pode gerenciar esses relacionamentos incluindo os campos de ponteiro ou relação em suas chamadas rest ou graphql por exemplo, para adicionar um ponteiro via rest { "title" "task with category", "category" { " type" "pointer", "classname" "category", "objectid" "your category object id" } } quando você consulta, também pode incluir dados de ponteiro usando o parâmetro ?include=category no rest ou usando include em consultas graphql consultas ao vivo para atualizações em tempo real, o back4app fornece consultas ao vivo embora não exista um pacote nativo elm para consultas ao vivo do parse, você ainda pode habilitá lo no seu painel do back4app habilite consultas ao vivo nas configurações do servidor do seu aplicativo use o endpoint websocket para consultas ao vivo em um cliente especializado se você gostaria de integrar consultas ao vivo com elm, poderia aproveitar elm websocket (ou outra abordagem personalizada) para se inscrever em mudanças no entanto, isso requer uma configuração mais avançada, já que não existe um cliente oficial de consultas ao vivo para elm no momento passo 3 – aplicando segurança com acls e clps mecanismo de segurança do back4app 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 você pode configurar acls a partir do elm incluindo a acl propriedade em seu json ao criar ou atualizar objetos via rest ou graphql por exemplo, para criar uma todo privada, você poderia definir { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } isso impede que qualquer pessoa além desse usuário leia ou modifique o objeto permissões de 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 banco de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões de 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 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 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 main js arquivo, o parse server em execução é atualizado com seu código mais recente // main js // import an npm module (e g , axios) 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; }); você pode chamar essas funções de cloud code do elm fazendo uma solicitação rest para https //parseapi back4app com/functions/fetchexternaldata casos de uso típicos lógica de negócios agregando dados, processando pagamentos, etc validações de dados garantindo que certos campos atendam aos critérios antes de salvar gatilhos executando código antes ou depois de ações de salvar/atualizar/excluir integrações conectando com apis ou serviços externos aplicação de segurança verificando funções ou permissões de usuário antes de realizar operações críticas implante sua função implantando via o back4app cli instale o cli (exemplo linux/macos) curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash configure sua chave de conta b4a configure accountkey implante seu código na nuvem b4a deploy implantando 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 implantar chamando sua função do elm, você pode chamar uma função na nuvem fazendo uma requisição post import config exposing (applicationid, restapikey, serverurl) import http import json decode as decode import json encode as encode cloudfunction string > encode value > http request decode value cloudfunction functionname body = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/functions/" ++ functionname , body = http jsonbody body , expect = http expectjson decode value , timeout = nothing , tracker = nothing } calculatetextlength string > http request decode value calculatetextlength text = let requestbody = encode object \[ ( "text", encode string text ) ] in cloudfunction "calculatetextlength" requestbody você também pode chamar as cloud functions via graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } 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 você pode criar e fazer login de usuários via rest ou graphql a partir do seu aplicativo elm configurando a autenticação do usuário cadastro de um novo usuário (rest) signupuser string > string > string > http request decode value signupuser username password email = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "application/json" ] , url = serverurl ++ "/users" , body = http jsonbody (encode object \[ ( "username", encode string username ) , ( "password", encode string password ) , ( "email", encode string email ) ] ) , expect = http expectjson decode value , timeout = nothing , tracker = nothing } login (rest) loginuser string > string > http request decode value loginuser username password = http request { method = "get" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey ] , url = serverurl ++ "/login?username=" ++ username ++ "\&password=" ++ password , body = http emptybody , expect = http expectjson decode value , timeout = nothing , tracker = nothing } integração de login social back4app e parse podem se integrar com provedores populares de oauth, como google , facebook , ou apple normalmente, você configurará esses provedores no painel do back4app e, em seguida, fará as solicitações necessárias a partir do elm consulte a documentação de login social https //www back4app com/docs/platform/sign in with apple para etapas detalhadas de configuração verificação de email e redefinição de senha navegue até as configurações de email no seu painel do back4app ative 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 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 como estamos usando rest a partir do elm, podemos fazer um upload de arquivo multipart ou anexar um arquivo codificado em base64 upload de arquivo via rest uploadfile string > string > http request decode value uploadfile filename base64content = http request { method = "post" , headers = \[ http header "x parse application id" applicationid , http header "x parse rest api key" restapikey , http header "content type" "text/plain" ] , url = serverurl ++ "/files/" ++ filename , body = http stringbody "text/plain" base64content , expect = http expectjson decode value , timeout = nothing , tracker = nothing } uma vez carregado, você receberá uma url de arquivo na resposta você pode armazenar essa url em um campo de classe parse ou exibi la em seu aplicativo elm conforme necessário segurança de arquivo o parse server fornece configurações para gerenciar a segurança do upload de arquivos por exemplo { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } passo 7 – agendando tarefas com cloud jobs cloud jobs cloud jobs no back4app permitem que você agende e execute tarefas rotineiras em seu backend, como limpar dados antigos ou enviar e mails periódicos por exemplo, um trabalho para remover tarefas (todos) mais antigas que 30 dias pode ser assim // 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); } }); implante seu cloud code com o novo trabalho (via cli ou painel) vá para o painel do back4app > configurações do app > configurações do servidor > tarefas em segundo plano agende o trabalho para ser executado diariamente ou conforme desejado passo 8 – integrando webhooks webhooks permitem que seu aplicativo back4app envie requisiçõ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 então clique em adicionar webhook configure um endpoint (por exemplo, https //your external service com/webhook endpoint 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 ” adicione cabeçalhos http ou payloads personalizados, se necessário 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 centrada em modelos , amigável ao usuário interface que simplifica a administração de banco de dados, gerenciamento de dados personalizados e operações em nível empresarial habilitando o admin app habilite indo para app dashboard > mais > admin app e clicando no botão “habilitar admin app” crie um primeiro usuário admin (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 admin que você criou para acessar o novo painel do admin app uma vez ativado, o back4app admin app 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ê criou um backend seguro para um aplicativo elm no back4app configurou um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrou consultas em tempo real (consultas ao vivo) para atualizações imediatas de dados aplicou medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementou funções de cloud code para executar lógica de negócios personalizada no lado do servidor configurou autenticação de usuário com suporte para verificação de e mail e redefinições de senha gerenciou uploads de arquivos e recuperação, com controles de segurança de arquivos opcionais agendou cloud jobs para tarefas automatizadas em segundo plano usou webhooks para integrar com serviços externos explorou o painel de administração do back4app para gerenciamento de dados com um frontend elm sólido e um robusto backend back4app, você agora está 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 elm 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 aplicações 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 aplicações complexas do mundo real