Quickstarters
Comment construire un backend pour Elm ?

47min
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.
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. Assurez-vous d'avoir Elm (0.19 ou supérieur) installé sur votre machine.
Familiarité avec Elm
 Documentation officielle d'Elm.
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 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 est de 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 identifiants 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"
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 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
        }
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 si vous souhaitez effectuer des appels rapides en dehors d'Elm, vous pouvez utiliser cURL :
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
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 :
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
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).
Créer une nouvelle classe
﻿
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.
Créer une colonne
﻿
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 – disons, 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 :
JSON
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
{
  "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 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 :
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "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.
Modifier l'ACL
﻿
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 la lecture ou l'écriture, 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 serveur Parse.
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 serveur Parse 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.
JS
// 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;
});
// 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) :
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Configurez votre clé de compte:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
Déployez votre code cloud:
Bash
b4a deploy
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.
﻿
Appel de votre fonction
Depuis Elm, vous pouvez appeler une fonction cloud en effectuant une requête POST :
Text
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
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 :
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
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)
Text
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
        }
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)
Text
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
        }
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 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
Text
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
        }
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 :
JSON
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
{
  "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 à :
JS
// 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);
  }
});
// 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.
Planification d'un travail dans le cloud
﻿
É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).
Configurez des déclencheurs pour spécifier quels événements dans vos classes Back4app ou fonctions Cloud Code déclencheront le webhook.
Ajout d'un 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.
WebHook AvantSauvegarde
﻿
É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, 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 en allant dans App Dashboard > Plus > Admin App et en cliquant sur le bouton “Activer l'Admin App”.
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 d'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 (Live Queries) 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.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour VueJS ?
Comment construire un backend pour NodeJS ?