Schnellstarter
Wie man ein Backend für Elm erstellt?

45min
Einführung
In diesem Tutorial lernen Sie, wie Sie ein vollständiges Backend für eine Elm-Anwendung mit Back4App erstellen.
Wir werden die Integration wesentlicher Back4app-Funktionen durchgehen – wie z.B. Datenbankverwaltung, Cloud Code-Funktionen, REST- und GraphQL-APIs, Benutzerauthentifizierung und Echtzeitanfragen (Live Queries) – um ein sicheres, skalierbares und robustes Backend zu erstellen, das nahtlos mit Ihrem Elm-Frontend kommuniziert.
Sie werden auch sehen, wie die schnelle Einrichtung und die intuitive Umgebung von Back4app die Zeit und den Aufwand im Vergleich zur manuellen Konfiguration von Servern und Datenbanken drastisch reduzieren können.
Unterwegs werden Sie praktische Erfahrungen mit wichtigen Funktionen sammeln, einschließlich fortschrittlicher Sicherheitsfunktionen, der Planung von Aufgaben mit Cloud-Jobs und der Einrichtung von Webhooks für externe Integrationen.
Am Ende dieses Tutorials sind Sie gut vorbereitet, um dieses grundlegende Setup in eine produktionsbereite Anwendung zu erweitern oder bei Bedarf benutzerdefinierte Logik und Drittanbieter-APIs einfach zu integrieren.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4App-Konto und ein neues Back4app-Projekt
 Erste Schritte mit Back4app.
Wenn Sie kein Konto haben, können Sie eines kostenlos erstellen. Befolgen Sie die obige Anleitung, um Ihr Projekt vorzubereiten.
Grundlegende Elm-Entwicklungsumgebung
 Sie können dies einrichten, indem Sie Elm installieren. Stellen Sie sicher, dass Sie Elm (0.19 oder höher) auf Ihrem Computer installiert haben.
Vertrautheit mit Elm
 Offizielle Elm-Dokumentation.
Wenn Sie neu in Elm sind, lesen Sie die offiziellen Dokumente oder ein Tutorial für Anfänger, bevor Sie beginnen.
HTTP-Anforderungsbibliothek oder GraphQL-Ansatz für Elm
 Wir werden REST- und GraphQL-Aufrufe aus Elm verwenden, da es kein offizielles Parse Elm SDK gibt. Stellen Sie sicher, dass Sie die elm/http und, falls erforderlich, eine GraphQL-Bibliothek eingerichtet haben.
Stellen Sie sicher, dass Sie alle diese Voraussetzungen erfüllt haben, bevor Sie beginnen. Ihr Back4app-Projekt eingerichtet und Ihre lokale Elm-Umgebung bereit zu haben, wird Ihnen helfen, leichter folgen zu können.
Schritt 1 – Einrichten des Back4app-Projekts
Erstellen Sie ein neues Projekt
Der erste Schritt beim Erstellen Ihres Elm-Backends auf Back4app besteht darin, ein neues Projekt zu erstellen. Wenn Sie noch keines erstellt haben, folgen Sie diesen Schritten:
Melden Sie sich bei Ihrem Back4app-Konto an.
Klicken Sie auf die Schaltfläche „Neue App“ in Ihrem Back4app-Dashboard.
Geben Sie Ihrer App einen Namen (z. B. „Elm-Backend-Tutorial“).
﻿
Sobald das Projekt erstellt ist, wird es in Ihrem Back4app-Dashboard aufgeführt. Dieses Projekt wird die Grundlage für alle Backend-Konfigurationen sein, die in diesem Tutorial besprochen werden.
Verbinden Sie sich mit Back4app von Elm
Back4app basiert auf der Parse-Plattform, um Ihre Daten zu verwalten, Echtzeitfunktionen bereitzustellen, die Benutzerauthentifizierung zu handhaben und mehr. Da es kein offizielles Elm Parse SDK gibt, verwenden wir REST oder GraphQL-Aufrufe aus unserer Elm-Anwendung, um mit dem Back4app-Backend zu kommunizieren.
Rufen Sie Ihre Parse-Schlüssel ab:
Navigieren Sie in Ihrem Back4app-Dashboard zu den „App-Einstellungen“ oder dem Abschnitt „Sicherheit & Schlüssel“, um Ihre Anwendungs-ID, REST-API-Schlüssel, und GraphQL-Endpunkt. Sie finden auch die Parse-Server-URL (häufig https://parseapi.back4app.com).
﻿
Von Elm aus können Sie diese Anmeldeinformationen in einer Konfigurationsdatei oder einem Modul speichern. Zum Beispiel:
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"
﻿
Sie verwenden diese Werte, wann immer Sie HTTP-Anfragen an Back4app von Elm aus stellen. Durch das Abschließen dieses Schrittes haben Sie festgelegt, wie Sie Ihre Elm-Frontend sicher mit dem Back4app-Backend verbinden.
Schritt 2 – Datenbank einrichten
Daten speichern und abfragen
Mit Ihrem Back4app-Projekt eingerichtet, können Sie jetzt Daten über REST oder GraphQL aus Elm speichern und abrufen. Für ein einfaches Beispiel zeigen wir, wie man ein Todo-Element erstellt und abruft.
Verwendung von REST aus Elm
Wir verwenden elm/http um REST-Anfragen zu stellen. Hier ist ein vereinfachtes Beispiel, um ein Todo-Element zu erstellen:
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
        }
﻿
Sie können dann createTodo oder fetchTodos in Ihrer Elm-Update-Funktion aufrufen, die Http-Antworten verarbeiten und die Daten in das Modell Ihrer Anwendung integrieren.
REST direkt verwenden (Beispiel in cURL)
Wenn Sie lieber testen oder schnelle Aufrufe außerhalb von Elm durchführen möchten, können Sie cURL verwenden:
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
﻿
GraphQL verwenden
Back4app bietet auch eine GraphQL-Schnittstelle. Unten finden Sie ein Beispiel für eine GraphQL-Mutation zur Erstellung eines Todos:
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
    }
  }
}
﻿
In Elm können Sie eine GraphQL-Bibliothek verwenden oder Ihre HTTP-Anfragen manuell erstellen, um diese Mutationen und Abfragen zu senden, sehr ähnlich wie wir elm/http oben verwendet haben.
Schema-Design und Datentypen
Standardmäßig erlaubt Parse Schemaerstellung zur Laufzeit, aber Sie können auch Ihre Klassen und Datentypen im Back4app-Dashboard definieren, um mehr Kontrolle zu haben.
Navigieren Sie zum Abschnitt „Datenbank“ in Ihrem Back4app-Dashboard.
Erstellen Sie eine neue Klasse (z. B. „Todo“) und fügen Sie relevante Spalten hinzu, wie Titel (String) und isCompleted (Boolean).
Neue Klasse erstellen
﻿
Back4app unterstützt auch verschiedene Datentypen: String, Zahl, Boolean, Objekt, Datum, Datei, Zeiger, Array, Beziehung, GeoPoint, und Polygon. Sie können den entsprechenden Typ für jedes Feld auswählen oder Parse automatisch diese Spalten erstellen lassen, wenn Sie ein Objekt aus Ihrer Elm-App über die REST- oder GraphQL-Methode zum ersten Mal speichern.
Spalte erstellen
﻿
Back4app bietet einen KI-Agenten, der Ihnen helfen kann, Ihr Datenmodell zu entwerfen:
Öffnen Sie den KI-Agenten in Ihrem App-Dashboard oder im Menü.
Beschreiben Sie Ihr Datenmodell in einfacher Sprache (z.B. „Bitte erstellen Sie eine neue ToDo-App bei back4app mit einem vollständigen Klassenschema.“).
Lassen Sie den KI-Agenten das Schema für Sie erstellen.
﻿
Die Verwendung des KI-Agenten kann Ihnen Zeit sparen, wenn Sie Ihre Datenarchitektur einrichten, und sorgt für Konsistenz in Ihrer Anwendung.
Relationale Daten
Wenn Sie relationale Daten haben – sagen wir, ein Kategorie-Objekt, das auf mehrere Todo-Elemente verweist – können Sie Zeiger oder Beziehungen in Parse verwenden. Von Elm aus können Sie diese Beziehungen verwalten, indem Sie die Zeiger- oder Beziehungsfelder in Ihren REST- oder GraphQL-Aufrufen einfügen.
Zum Beispiel, um einen Zeiger über REST hinzuzufügen:
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"
  }
}
﻿
Wenn Sie abfragen, können Sie auch Zeiger-Daten einbeziehen, indem Sie den Parameter ?include=category in REST oder include in GraphQL-Abfragen verwenden.
Echtzeit-Abfragen
Für Echtzeit-Updates bietet Back4app Echtzeit-Abfragen. Während es kein natives Elm-Paket für Parse Live Queries gibt, können Sie es dennoch in Ihrem Back4app-Dashboard aktivieren:
Aktivieren Sie Echtzeit-Abfragen unter den Servereinstellungen Ihrer App.
Verwenden Sie den WebSocket-Endpunkt für Echtzeit-Abfragen in einem spezialisierten Client.
Wenn Sie Echtzeit-Abfragen mit Elm integrieren möchten, könnten Sie elm-websocket (oder einen anderen benutzerdefinierten Ansatz) nutzen, um sich für Änderungen anzumelden. Dies erfordert jedoch eine fortgeschrittenere Konfiguration, da derzeit kein offizieller Elm Live Query-Client existiert.
Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs
Back4app Sicherheitsmechanismus
Back4app nimmt Sicherheit ernst, indem es Access Control Lists (ACLs) und Class-Level Permissions (CLPs). Diese Funktionen ermöglichen es Ihnen, einzuschränken, wer Daten auf Objekt- oder Klassenbasis lesen oder schreiben kann, sodass nur autorisierte Benutzer Ihre Daten ändern können.
﻿
Access Control Lists (ACLs)
Ein ACL wird auf einzelne Objekte angewendet, um zu bestimmen, welche Benutzer, Rollen oder die Öffentlichkeit Lese-/Schreiboperationen durchführen können. Sie können ACLs von Elm aus konfigurieren, indem Sie die _ACL-Eigenschaft in Ihrem JSON beim Erstellen oder Aktualisieren von Objekten über REST oder GraphQL einfügen.
Zum Beispiel, um eine private Todo zu erstellen, könnten Sie Folgendes festlegen:
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
﻿
Dies verhindert, dass jemand außer diesem Benutzer das Objekt lesen oder ändern kann.
ACL bearbeiten
﻿
Class-Level Permissions (CLPs)
CLPs steuern die Standardberechtigungen einer gesamten Klasse, wie z.B. ob die Klasse öffentlich lesbar oder schreibbar ist oder ob nur bestimmte Rollen darauf zugreifen können.
Gehe zu deinem Back4app Dashboard, wähle deine App aus und öffne den Datenbank-Bereich.
Wähle eine Klasse aus (z.B. „Todo“).
Öffne die Klasse-Level-Berechtigungen-Registerkarte.
Konfiguriere deine Standardwerte, wie „Benötigt Authentifizierung“ für Lesen oder Schreiben oder „Kein Zugriff“ für die Öffentlichkeit.
﻿
Diese Berechtigungen setzen die Basis, während ACLs die Berechtigungen für einzelne Objekte verfeinern. Ein robustes Sicherheitsmodell kombiniert typischerweise sowohl CLPs (breite Einschränkungen) als auch ACLs (fein abgestimmte Einschränkungen pro Objekt). Für weitere Informationen gehe zu App-Sicherheitsrichtlinien.﻿
Schritt 4 – Schreiben und Bereitstellen von Cloud-Funktionen
Cloud Code ist eine Funktion der Parse Server-Umgebung, die es dir ermöglicht, benutzerdefinierten JavaScript-Code auf der Serverseite auszuführen – ohne dass du Server oder Infrastruktur verwalten musst. Durch das Schreiben von Cloud Code kannst du dein Back4app-Backend mit zusätzlicher Geschäftslogik, Validierungen, Triggern und Integrationen erweitern, die sicher und effizient auf dem Parse Server ausgeführt werden.
Wie es funktioniert
Wenn du Cloud Code schreibst, platzierst du typischerweise deine JavaScript-Funktionen, Trigger und alle erforderlichen NPM-Module in einer main.js (oder app.js)-Datei. Diese Datei wird dann in dein Back4app-Projekt bereitgestellt, das innerhalb der Parse Server-Umgebung ausgeführt wird.
Alle Cloud Codes für deine Back4app-App laufen innerhalb des Parse Servers, der von Back4app verwaltet wird, sodass du dir keine Gedanken über Serverwartung, Skalierung oder Bereitstellung machen musst. Jedes Mal, wenn du deine main.js-Datei aktualisierst und bereitstellst, wird der laufende Parse Server mit deinem neuesten Code aktualisiert.
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;
});
﻿
Sie können diese Cloud-Code-Funktionen von Elm aus aufrufen, indem Sie eine REST-Anfrage an folgende Adresse senden:
https://parseapi.back4app.com/functions/fetchExternalData
Typische Anwendungsfälle
Geschäftslogik: Daten aggregieren, Zahlungen verarbeiten usw.
Datenvalidierungen: Sicherstellen, dass bestimmte Felder Kriterien erfüllen, bevor sie gespeichert werden.
Trigger: Code vor oder nach Speicher-/Aktualisierungs-/Löschvorgängen ausführen.
Integrationen: Verbindung mit externen APIs oder Diensten.
Sicherheitsdurchsetzung: Überprüfen von Rollen oder Benutzerberechtigungen, bevor kritische Operationen ausgeführt werden.
Ihre Funktion bereitstellen
Bereitstellung über die Back4app CLI:
Installieren Sie die CLI (Beispiel für 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
﻿
Konfigurieren Sie Ihren Kontoschlüssel:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
Stellen Sie Ihren Cloud-Code bereit:
Bash
b4a deploy
b4a deploy
﻿
Bereitstellung über das Dashboard:
Gehen Sie im Dashboard Ihrer App zu Cloud Code > Funktionen.
Kopieren/Einfügen Sie die Funktion in den main.js Editor.
Klicken Sie auf Bereitstellen.
﻿
Rufen Sie Ihre Funktion auf
Von Elm aus können Sie eine Cloud-Funktion durch einen POST-Request aufrufen:
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
﻿
Sie können Cloud-Funktionen auch über GraphQL aufrufen:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Schritt 5 – Benutzer-Authentifizierung konfigurieren
Benutzer-Authentifizierung in Back4app
Back4app nutzt die Parse User-Klasse als Grundlage für die Authentifizierung. Standardmäßig kümmert sich Parse um die Passwort-Hashing, Sitzungstoken und sichere Speicherung. Sie können Benutzer über REST oder GraphQL aus Ihrer Elm-App erstellen und anmelden.
Einrichten der Benutzer-Authentifizierung
Neuen Benutzer registrieren (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
        }
﻿
Anmelden (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
        }
﻿
Integration von sozialem Login
Back4app und Parse können mit beliebten OAuth-Anbietern wie Google, Facebook, oder Apple. Typischerweise konfigurieren Sie diese Anbieter im Back4app-Dashboard und führen dann die erforderlichen Anfragen aus Elm durch. Verweisen Sie auf die Dokumentation zum sozialen Login für detaillierte Einrichtungsschritte.
E-Mail-Verifizierung und Passwortzurücksetzung
Navigieren Sie zu den E-Mail-Einstellungen in Ihrem Back4app-Dashboard.
Aktivieren Sie die E-Mail-Verifizierung um sicherzustellen, dass neue Benutzer den Besitz ihrer E-Mail-Adressen verifizieren.
Konfigurieren Sie die Absenderadresse, E-Mail-Vorlagen und Ihre benutzerdefinierte Domain, falls gewünscht.
Schritt 6 – Umgang mit Dateispeicherung
Hochladen und Abrufen von Dateien
Parse enthält die Parse.File-Klasse zum Verarbeiten von Datei-Uploads, die Back4app sicher speichert. Da wir REST von Elm verwenden, können wir einen Multi-Part-Datei-Upload durchführen oder eine base64-kodierte Datei anhängen.
Datei-Upload über 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
        }
﻿
Sobald die Datei hochgeladen ist, erhalten Sie eine Datei-URL in der Antwort. Sie können diese URL in einem Parse-Klassenfeld speichern oder sie nach Bedarf in Ihrer Elm-Anwendung anzeigen.
Dateisicherheit
Parse Server bietet Konfigurationen zur Verwaltung der Sicherheit beim Datei-Upload. Zum Beispiel:
JSON
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
﻿
Schritt 7 – Aufgaben mit Cloud-Jobs planen
Cloud-Jobs
Cloud-Jobs in Back4app ermöglichen es Ihnen, routinemäßige Aufgaben in Ihrem Backend zu planen und auszuführen, wie das Bereinigen alter Daten oder das Versenden regelmäßiger E-Mails. Zum Beispiel könnte ein Job zum Entfernen von Todos, die älter als 30 Tage sind, so aussehen:
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);
  }
});
﻿
Stellen Sie Ihren Cloud-Code bereit mit dem neuen Job (über CLI oder Dashboard).
Gehen Sie zum Back4app-Dashboard > App-Einstellungen > Servereinstellungen > Hintergrundjobs.
Planen Sie den Job, um täglich oder nach Bedarf ausgeführt zu werden.
Planung eines Cloud-Jobs
﻿
Schritt 8 – Integration von Webhooks
Webhooks ermöglichen es Ihrer Back4app-App, HTTP-Anfragen an einen externen Dienst zu senden, wann immer bestimmte Ereignisse auftreten. Dies ist leistungsstark für die Integration mit Drittanbietersystemen wie Zahlungs-Gateways (z.B. Stripe), E-Mail-Marketing-Tools oder Analyseplattformen.
Navigieren Sie zur Webhook-Konfiguration in Ihrem Back4app-Dashboard > Mehr > WebHooks und klicken Sie dann auf Webhook hinzufügen.
Richten Sie einen Endpunkt ein (z.B. https://your-external-service.com/webhook-endpoint).
Konfigurieren Sie Trigger um festzulegen, welche Ereignisse in Ihren Back4app-Klassen oder Cloud-Code-Funktionen den Webhook auslösen.
Hinzufügen eines Webhooks
﻿
Wenn Sie beispielsweise einen Slack-Kanal benachrichtigen möchten, wann immer ein neues Todo erstellt wird:
Erstellen Sie eine Slack-App, die eingehende Webhooks akzeptiert.
Kopieren Sie die Slack-Webhook-URL.
Setzen Sie in Ihrem Back4app-Dashboard den Endpunkt auf diese Slack-URL für das Ereignis „Neuer Datensatz in der Todo-Klasse.“
Fügen Sie bei Bedarf benutzerdefinierte HTTP-Header oder Payloads hinzu.
BeforeSave WebHook
﻿
Schritt 9 – Erkundung des Back4app-Admin-Panels
Die Back4app Admin App ist eine webbasierte Verwaltungsoberfläche, die für nicht-technische Benutzer entwickelt wurde, um CRUD-Operationen durchzuführen und routinemäßige Datenaufgaben ohne Programmierung zu erledigen. Sie bietet eine modellzentrierte, benutzerfreundliche Oberfläche, die die Datenbankverwaltung, das benutzerdefinierte Datenmanagement und betriebliche Abläufe auf Unternehmensebene optimiert.
Aktivierung der Admin App
Aktivieren Sie es, indem Sie zu App-Dashboard > Mehr > Admin App gehen und auf die Schaltfläche „Admin App aktivieren“ klicken.
Admin App aktivieren
﻿
Erstellen Sie einen ersten Admin-Benutzer (Benutzername/Passwort), der automatisch eine neue Rolle (B4aAdminUser) und Klassen (B4aSetting, B4aMenuItem und B4aCustomField) im Schema Ihrer App generiert.
﻿
Wählen Sie eine Subdomain für den Zugriff auf die Admin-Oberfläche und schließen Sie die Einrichtung ab.
﻿
Einloggen mit den Admin-Anmeldeinformationen, die Sie erstellt haben, um auf Ihr neues Admin App-Dashboard zuzugreifen.
﻿
Sobald die Back4app Admin App aktiviert ist, können Sie ganz einfach Datensätze aus Ihrer Datenbank anzeigen, bearbeiten oder entfernen – ohne direkten Zugriff auf das Parse Dashboard oder Backend-Code. Mit konfigurierbaren Zugriffskontrollen können Sie diese Schnittstelle sicher mit Teammitgliedern oder Kunden teilen, die eine klare, klickbare Möglichkeit zur Verwaltung von Daten benötigen.
Fazit
Indem Sie dieses umfassende Tutorial befolgt haben, haben Sie:
Ein sicheres Backend für eine Elm-App auf Back4app erstellt.
Eine Datenbank konfiguriert mit Klassenschemas, Datentypen und Beziehungen.
Echtzeitabfragen integriert (Live Queries) für sofortige Datenaktualisierungen.
Sicherheitsmaßnahmen angewendet unter Verwendung von ACLs und CLPs, um den Datenzugriff zu schützen und zu verwalten.
Cloud-Code implementiert Funktionen, um benutzerdefinierte Geschäftslogik auf der Serverseite auszuführen.
Benutzerauthentifizierung eingerichtet mit Unterstützung für E-Mail-Bestätigung und Passwortzurücksetzungen.
Datei-Uploads verwaltet und Abrufe, mit optionalen Datei-Sicherheitskontrollen.
Cloud-Jobs geplant für automatisierte Hintergrundaufgaben.
Webhooks verwendet um mit externen Diensten zu integrieren.
Das Back4app Admin Panel erkundet für die Datenverwaltung.
Mit einem soliden Elm-Frontend und einem robusten Back4app-Backend sind Sie nun gut gerüstet, um funktionsreiche, skalierbare und sichere Anwendungen zu entwickeln. Erkunden Sie weiterhin fortgeschrittene Funktionen, integrieren Sie Ihre Geschäftslogik und nutzen Sie die Leistungsfähigkeit von Back4app, um Ihnen unzählige Stunden in der Server- und Datenbankadministration zu sparen. Viel Spaß beim Programmieren!
Nächste Schritte
Erstellen Sie eine produktionsbereite Elm-App indem Sie dieses Backend erweitern, um komplexere Datenmodelle, Caching-Strategien und Leistungsoptimierungen zu handhaben.
Integrieren Sie fortgeschrittene Funktionen wie spezialisierte Authentifizierungsabläufe, rollenbasierte Zugriffskontrolle oder externe APIs (wie Zahlungs-Gateways).
Überprüfen Sie die offizielle Dokumentation von Back4app für tiefere Einblicke in fortgeschrittene Sicherheit, Leistungsoptimierung und Protokollanalyse.
Erforschen Sie andere Tutorials zu Echtzeit-Chat-Anwendungen, IoT-Dashboards oder standortbasierten Diensten. Sie können die hier erlernten Techniken mit Drittanbieter-APIs kombinieren, um komplexe, reale Anwendungen zu erstellen.
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für VueJS erstellt?
ALS NÄCHSTES
Wie man ein Backend für NodeJS erstellt?