Comment construire un backend pour Elm ?

introduction dans ce tutoriel, vous apprendrez à construire un backend complet pour une application elm en utilisant back4app nous allons passer en revue l'intégration des fonctionnalités essentielles de back4app – telles que la gestion de base de données, les fonctions cloud code, les api rest et graphql, l'authentification des utilisateurs et les requêtes en temps réel (live queries) – pour créer un backend sécurisé, évolutif et robuste qui communique sans effort avec votre frontend elm vous verrez également comment la configuration rapide et l'environnement intuitif de back4app peuvent réduire considérablement le temps et les efforts par rapport à la configuration manuelle des serveurs et des bases de données en cours de route, vous acquerrez une expérience pratique avec des fonctionnalités clés, y compris des fonctionnalités de sécurité avancées, la planification de tâches avec cloud jobs et la configuration de webhooks pour des intégrations externes à la fin de ce tutoriel, vous serez bien préparé à améliorer cette configuration de base en une application prête pour la production ou à intégrer facilement une logique personnalisée et des api tierces selon vos besoins prérequis pour compléter ce tutoriel, vous aurez besoin de un compte back4app et un nouveau projet back4app commencer avec back4app https //www back4app com/docs/get started/new parse app si vous n'avez pas de compte, vous pouvez en créer un gratuitement suivez le guide ci dessus pour préparer votre projet environnement de développement elm de base vous pouvez le configurer en installant elm https //guide elm lang org/install/ assurez vous d'avoir elm (0 19 ou supérieur) installé sur votre machine familiarité avec elm documentation officielle d'elm https //guide elm lang org/ si vous êtes nouveau dans elm, consultez la documentation officielle ou un tutoriel pour débutants avant de commencer bibliothèque de requêtes http ou approche graphql pour elm nous utiliserons des appels rest et graphql depuis elm, car il n'existe pas de sdk elm parse officiel assurez vous d'avoir la elm/http https //package elm lang org/packages/elm/http/latest/ et, si nécessaire, une bibliothèque graphql configurée assurez vous d'avoir tous ces prérequis en place avant de commencer avoir votre projet back4app configuré et votre environnement elm local prêt vous aidera à suivre plus facilement étape 1 – configuration du projet back4app créer un nouveau projet la première étape pour construire votre backend elm sur back4app consiste à créer un nouveau projet si vous n'en avez pas encore créé un, suivez ces étapes connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord back4app donnez un nom à votre application (par exemple, “elm backend tutorial”) une fois le projet créé, vous le verrez listé dans votre tableau de bord back4app ce projet sera la base de toutes les configurations backend discutées dans ce tutoriel connectez vous à back4app depuis elm back4app s'appuie sur la plateforme parse pour gérer vos données, fournir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore comme il n'existe pas de sdk elm parse officiel, nous utiliserons des appels rest ou graphql depuis notre application elm pour communiquer avec le backend back4app récupérez vos clés parse dans votre tableau de bord back4app, accédez à la section “paramètres de l'application” ou “sécurité & clés” de votre application pour trouver votre id d'application , clé api rest , et point de terminaison graphql vous trouverez également l' url du serveur parse (souvent https //parseapi back4app com ) depuis elm, vous pouvez stocker ces informations d'identification dans un fichier de configuration ou un module par exemple 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" vous utiliserez ces valeurs chaque fois que vous ferez des requêtes http à back4app depuis elm en complétant cette étape, vous avez établi comment connecter en toute sécurité votre interface frontale elm avec le backend back4app étape 2 – configuration de la base de données sauvegarde et requête de données avec votre projet back4app configuré, vous pouvez maintenant commencer à enregistrer et récupérer des données via rest ou graphql depuis elm pour un exemple simple, nous allons démontrer comment créer et récupérer un todo utiliser rest depuis elm nous allons utiliser elm/http https //package elm lang org/packages/elm/http/latest/ pour effectuer des requêtes rest voici un exemple simplifié pour créer un élément 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 } vous pouvez ensuite appeler createtodo ou fetchtodos dans votre fonction de mise à jour elm, gérer les http réponses, et intégrer les données dans le modèle de votre application utiliser rest directement (exemple en curl) si vous préférez tester ou souhaitez effectuer des appels rapides en dehors d'elm, vous pouvez utiliser 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 utiliser graphql back4app fournit également une interface graphql voici un exemple de mutation graphql pour créer un todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } dans elm, vous pouvez utiliser une bibliothèque graphql ou créer manuellement vos requêtes http pour envoyer ces mutations et requêtes, très similaire à la façon dont nous avons utilisé elm/http ci dessus conception de schéma et types de données par défaut, parse permet la création de schéma à la volée , mais vous pouvez également définir vos classes et types de données dans le tableau de bord back4app pour plus de contrôle accédez à la section “base de données” dans votre tableau de bord back4app créez une nouvelle classe (par exemple, “todo”) et ajoutez des colonnes pertinentes, telles que titre (string) et iscompleted (boolean) back4app prend également en charge divers types de données string , number , boolean , object , date , file , pointer , array , relation , geopoint , et polygon vous pouvez choisir le type approprié pour chaque champ ou laisser parse créer automatiquement ces colonnes lorsque vous enregistrez pour la première fois un objet depuis votre application elm en utilisant l'approche rest ou graphql back4app propose un agent ia qui peut vous aider à concevoir votre modèle de données ouvrez l'agent ia depuis votre tableau de bord d'application ou dans le menu décrivez votre modèle de données dans un langage simple (par exemple, “veuillez créer une nouvelle application todo sur back4app avec un schéma de classe complet ”) laissez l'agent ia créer le schéma pour vous utiliser l'agent ia peut vous faire gagner du temps lors de la configuration de votre architecture de données et garantir la cohérence de votre application données relationnelles si vous avez des données relationnelles – par exemple, un objet catégorie qui pointe vers plusieurs éléments todo – vous pouvez utiliser des pointeurs ou des relations dans parse depuis elm, vous pouvez gérer ces relations en incluant les champs de pointeur ou de relation dans vos appels rest ou graphql par exemple, pour ajouter un pointeur via rest { "title" "task with category", "category" { " type" "pointer", "classname" "category", "objectid" "your category object id" } } lorsque vous interrogez, vous pouvez également inclure des données de pointeur en utilisant le paramètre ?include=category dans rest ou en utilisant include dans les requêtes graphql requêtes en direct pour des mises à jour en temps réel, back4app fournit des requêtes en direct bien qu'il n'existe pas de package elm natif pour les requêtes en direct parse, vous pouvez toujours l'activer dans votre tableau de bord back4app activer les requêtes en direct sous les paramètres du serveur de votre application utiliser le point de terminaison websocket pour les requêtes en direct dans un client spécialisé si vous souhaitez intégrer les requêtes en direct avec elm, vous pourriez tirer parti de elm websocket (ou d'une autre approche personnalisée) pour vous abonner aux changements cependant, cela nécessite une configuration plus avancée car aucun client officiel de requête en direct elm n'existe pour le moment étape 3 – application de la sécurité avec les acl et les clp mécanisme de sécurité back4app back4app prend la sécurité au sérieux en fournissant listes de contrôle d'accès (acl) et permissions au niveau de la classe (clp) ces fonctionnalités vous permettent de restreindre qui peut lire ou écrire des données sur une base par objet ou par classe, garantissant que seuls les utilisateurs autorisés peuvent modifier vos données listes de contrôle d'accès (acl) une acl est appliquée à des objets individuels pour déterminer quels utilisateurs, rôles ou le public peuvent effectuer des opérations de lecture/écriture vous pouvez configurer les acl à partir d'elm en incluant la acl propriété dans votre json lors de la création ou de la mise à jour d'objets via rest ou graphql par exemple, pour créer une todo privée, vous pourriez définir { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } cela empêche quiconque d'autre que cet utilisateur de lire ou de modifier l'objet permissions au niveau de la classe (clp) les clps régissent les autorisations par défaut d'une classe entière, telles que si la classe est lisible ou modifiable publiquement, ou si seules certains rôles peuvent y accéder allez sur votre tableau de bord back4app , sélectionnez votre application et ouvrez la base de données section sélectionnez une classe (par exemple, “todo”) ouvrez l'onglet des autorisations au niveau de la classe configurez vos valeurs par défaut, telles que “nécessite une authentification” pour lire ou écrire, ou “aucun accès” pour le public ces autorisations définissent la base, tandis que les acl affinent les autorisations pour des objets individuels un modèle de sécurité robuste combine généralement à la fois les clps (restrictions larges) et les acl (restrictions fines par objet) pour plus d'informations, allez à directives de sécurité des applications étape 4 – écriture et déploiement de fonctions cloud le code cloud est une fonctionnalité de l'environnement parse server qui vous permet d'exécuter du code javascript personnalisé côté serveur – sans avoir besoin de gérer des serveurs ou des infrastructures en écrivant du code cloud, vous pouvez étendre votre backend back4app avec une logique métier supplémentaire, des validations, des déclencheurs et des intégrations qui s'exécutent de manière sécurisée et efficace sur le parse server comment ça fonctionne lorsque vous écrivez du code cloud, vous placez généralement vos fonctions javascript, déclencheurs et tous les modules npm requis dans un main js (ou app js ) fichier ce fichier est ensuite déployé dans votre projet back4app, qui est exécuté dans l'environnement parse server tout le code cloud pour votre application back4app s'exécute à l'intérieur du parse server géré par back4app, donc vous n'avez pas à vous soucier de la maintenance des serveurs, de la mise à l'échelle ou de l'approvisionnement chaque fois que vous mettez à jour et déployez votre main js fichier, le serveur parse en cours d'exécution est mis à jour avec votre dernier code // 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; }); vous pouvez appeler ces fonctions cloud code depuis elm en effectuant une requête rest à https //parseapi back4app com/functions/fetchexternaldata cas d'utilisation typiques logique métier agrégation de données, traitement des paiements, etc validations de données s'assurer que certains champs répondent à des critères avant de sauvegarder déclencheurs exécution de code avant ou après des actions de sauvegarde/mise à jour/suppression intégrations connexion avec des api ou services externes application de la sécurité vérification des rôles ou des autorisations des utilisateurs avant d'effectuer des opérations critiques déployez votre fonction déploiement via le back4app cli installez le cli (exemple linux/macos) curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash configurez votre clé de compte b4a configure accountkey déployez votre code cloud b4a deploy déploiement via le tableau de bord dans le tableau de bord de votre application, allez à cloud code > fonctions copiez/collez la fonction dans l’éditeur main js cliquez sur déployer appeler votre fonction depuis elm, vous pouvez appeler une fonction cloud en effectuant une requête 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 vous pouvez également appeler les cloud functions via graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } étape 5 – configuration de l'authentification des utilisateurs authentification des utilisateurs dans back4app back4app s'appuie sur la classe parse user comme base pour l'authentification par défaut, parse gère le hachage des mots de passe, les jetons de session et le stockage sécurisé vous pouvez créer et connecter des utilisateurs via rest ou graphql depuis votre application elm configuration de l'authentification des utilisateurs inscription d'un nouvel utilisateur (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 } connexion (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 } intégration de la connexion sociale back4app et parse peuvent s'intégrer avec des fournisseurs oauth populaires tels que google , facebook , ou apple en général, vous configurerez ces fournisseurs dans le tableau de bord back4app, puis effectuerez les demandes nécessaires depuis elm consultez les docs de connexion sociale https //www back4app com/docs/platform/sign in with apple pour des étapes de configuration détaillées vérification par e mail et réinitialisation du mot de passe accédez aux paramètres de l'e mail dans votre tableau de bord back4app activez la vérification par e mail pour garantir que les nouveaux utilisateurs vérifient la propriété de leurs adresses e mail configurez l'adresse de l'expéditeur , les modèles d'e mail et votre domaine personnalisé si désiré étape 6 – gestion du stockage de fichiers téléchargement et récupération de fichiers parse inclut la parse file classe pour gérer les téléchargements de fichiers, que back4app stocke en toute sécurité puisque nous utilisons rest depuis elm, nous pouvons effectuer un téléchargement de fichier multipart ou attacher un fichier encodé en base64 téléchargement de fichiers 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 } une fois téléchargé, vous recevrez une url de fichier dans la réponse vous pouvez stocker cette url dans un champ de classe parse ou l'afficher dans votre application elm selon vos besoins sécurité des fichiers parse server fournit des configurations pour gérer la sécurité du téléchargement de fichiers par exemple { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } étape 7 – planification des tâches avec les travaux cloud travaux cloud les travaux cloud dans back4app vous permettent de planifier et d'exécuter des tâches de routine sur votre backend, comme nettoyer les anciennes données ou envoyer des e mails périodiques par exemple, un travail pour supprimer les tâches à faire de plus de 30 jours pourrait ressembler à // 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); } }); déployez votre code cloud avec le nouveau travail (via cli ou tableau de bord) allez sur le tableau de bord back4app > paramètres de l'application > paramètres du serveur > travaux en arrière plan planifiez le travail pour qu'il s'exécute quotidiennement ou selon vos besoins étape 8 – intégration des webhooks les webhooks permettent à votre application back4app d'envoyer des requêtes http à un service externe chaque fois que certains événements se produisent c'est puissant pour s'intégrer à des systèmes tiers comme des passerelles de paiement (par exemple, stripe), des outils de marketing par e mail ou des plateformes d'analyse accédez à la configuration des webhooks dans votre tableau de bord back4app > plus > webhooks puis cliquez sur ajouter un webhook configurez un point de terminaison (par exemple, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configurez des déclencheurs pour spécifier quels événements dans vos classes back4app ou fonctions cloud code déclencheront le webhook par exemple, si vous souhaitez notifier un canal slack chaque fois qu'un nouveau todo est créé créez une application slack qui accepte les webhooks entrants copiez l'url du webhook slack dans votre tableau de bord back4app, définissez le point de terminaison sur cette url slack pour l'événement “nouvel enregistrement dans la classe todo ” ajoutez des en têtes http ou des charges utiles personnalisées si nécessaire étape 9 – exploration du panneau d'administration back4app le back4app admin app est une interface de gestion basée sur le web conçue pour les utilisateurs non techniques afin d'effectuer des opérations crud et de gérer des tâches de données courantes sans écrire de code elle fournit une interface centrée sur le modèle , interface conviviale qui rationalise l'administration de la base de données, la gestion des données personnalisées et les opérations de niveau entreprise activation de l'admin app activez le en allant dans app dashboard > more > admin app et en cliquant sur le bouton “activer l'admin app” créer un premier utilisateur administrateur (nom d'utilisateur/mot de passe), ce qui génère automatiquement un nouveau rôle (b4aadminuser) et des classes (b4asetting, b4amenuitem et b4acustomfield) dans le schéma de votre application choisissez un sous domaine pour accéder à l'interface administrateur et complétez la configuration connectez vous avec les identifiants administratifs que vous avez créés pour accéder à votre nouveau tableau de bord admin app une fois activée, l'application admin back4app facilite la visualisation, l'édition ou la suppression des enregistrements de votre base de données – sans nécessiter l'utilisation directe du tableau de bord parse ou du code backend avec des contrôles d'accès configurables, vous pouvez partager en toute sécurité cette interface avec des membres de l'équipe ou des clients qui ont besoin d'un moyen clair et simple de gérer les données conclusion en suivant ce tutoriel complet, vous avez créé un backend sécurisé pour une application elm sur back4app configuré une base de données avec des schémas de classe, des types de données et des relations intégré des requêtes en temps réel (requêtes en direct) pour des mises à jour de données immédiates appliqué des mesures de sécurité en utilisant des acl et des clp pour protéger et gérer l'accès aux données implémenté des fonctions cloud code pour exécuter une logique métier personnalisée côté serveur mis en place une authentification utilisateur avec prise en charge de la vérification par e mail et des réinitialisations de mot de passe géré les téléchargements de fichiers et la récupération, avec des contrôles de sécurité des fichiers en option planifié des tâches cloud pour des tâches d'arrière plan automatisées utilisé des webhooks pour s'intégrer à des services externes exploré le panneau d'administration back4app pour la gestion des données avec un frontend elm solide et un backend back4app robuste, vous êtes maintenant bien équipé pour développer des applications riches en fonctionnalités, évolutives et sécurisées continuez à explorer des fonctionnalités plus avancées, intégrez votre logique métier et exploitez la puissance de back4app pour vous faire gagner d'innombrables heures dans l'administration des serveurs et des bases de données bon codage! prochaines étapes construire une application elm prête pour la production en étendant ce backend pour gérer des modèles de données plus complexes, des stratégies de mise en cache et des optimisations de performance intégrer des fonctionnalités avancées telles que des flux d'authentification spécialisés, un contrôle d'accès basé sur les rôles ou des api externes (comme des passerelles de paiement) consultez la documentation officielle de back4app pour des plongées plus profondes dans la sécurité avancée, l'optimisation des performances et l'analyse des journaux explorez d'autres tutoriels sur les applications de chat en temps réel, les tableaux de bord iot ou les services basés sur la localisation vous pouvez combiner les techniques apprises ici avec des api tierces pour créer des applications complexes et réelles