Wie man ein Backend für Elm erstellt?

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 sicherheitsmerkmale, 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 https //www back4app com/docs/get started/new parse app 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 https //guide elm lang org/install/ stellen sie sicher, dass sie elm (0 19 oder höher) auf ihrem computer installiert haben vertrautheit mit elm offizielle elm dokumentation https //guide elm lang org/ wenn sie neu in elm sind, lesen sie die offiziellen dokumente oder ein anfänger tutorial, 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 https //package elm lang org/packages/elm/http/latest/ 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, sehen sie 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“ ihrer app, 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" sie verwenden diese werte immer, wenn sie http anfragen von elm an back4app senden durch das abschließen dieses schrittes haben sie festgelegt, wie sie ihre elm frontend sicher mit dem back4app backend verbinden schritt 2 – einrichten der datenbank 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 https //package elm lang org/packages/elm/http/latest/ 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 } sie können dann createtodo oder fetchtodos in ihrer elm update funktion aufrufen, die http antworten verarbeiten und daten in das modell ihrer anwendung integrieren rest direkt verwenden (beispiel in curl) wenn sie es bevorzugen, tests durchzuführen oder schnelle aufrufe außerhalb von elm zu machen, können sie curl verwenden 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 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) back4app unterstützt auch verschiedene datentypen string , zahl , boolean , objekt , datum , datei , zeiger , array , relation , geopoint , und polygon sie können den geeigneten typ für jedes feld auswählen oder parse automatisch diese spalten erstellen lassen, wenn sie ein objekt aus ihrer elm app über den rest oder graphql ansatz zum ersten mal speichern 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 die konsistenz in ihrer anwendung sicherstellen 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 { "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 es derzeit keinen offiziellen elm live query client gibt 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 um beispielsweise eine private aufgabe zu erstellen, könnten sie folgendes festlegen { "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 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 // 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) curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash konfigurieren sie ihren kontoschlüssel b4a configure accountkey stellen sie ihren cloud code bereit 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 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 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) 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) 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 } soziale login integration 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 soziale login dokumentation https //www back4app com/docs/platform/sign in with apple 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 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 { "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 // 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 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 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 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 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 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 melden sie sich an mit den admin anmeldeinformationen, die sie erstellt haben, um auf ihr neues admin app dashboard zuzugreifen sobald aktiviert, macht die back4app admin app es einfach, datensätze aus ihrer datenbank anzuzeigen, zu bearbeiten oder zu entfernen – ohne direkte nutzung des parse dashboards oder backend codes 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 funktionen implementiert, 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 abruf, 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