How to Build a Backend for Ionic?

einführung in diesem tutorial lernen sie, wie sie ein vollständiges backend für eine ionic app mit back4app erstellen wir werden die datenbankverwaltung, cloud code funktionen, rest und graphql apis, benutzerauthentifizierung, dateiverwaltung und mehr behandeln unser ziel ist es, ihnen zu zeigen, wie man ein backend für ionic erstellt, das sicher, skalierbar und einfach zu warten ist wir werden die intuitive umgebung von back4app nutzen, um die serverseitige einrichtung zu vereinfachen, sodass sie sich nicht um die manuelle konfiguration von servern oder datenbanken kümmern müssen sie werden wichtige werkzeuge lernen, wie das planen von aufgaben mit cloud jobs, das anwenden fortgeschrittener sicherheitsregeln und die integration von webhooks mit anderen diensten am ende werden sie bereit sein, dieses grundlegende backend in ein produktionsbereites system für ihre ionic app zu erweitern voraussetzungen 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, erstellen sie eines kostenlos und folgen sie dem obigen leitfaden, um ihr projekt einzurichten grundlegende ionic entwicklungsumgebung stellen sie sicher, dass sie die ionic cli https //ionicframework com/docs/intro/cli installiert haben und eine ionic app erstellen und ausführen können node js (version 14 oder höher) installiert node js herunterladen https //nodejs org/en/download/ um abhängigkeiten zu verwalten und ihr projekt zu erstellen vertrautheit mit javascript/typescript und ionic konzepten offizielle ionic dokumentation https //ionicframework com/docs ein gutes verständnis der ionic strukturen, komponenten und lebenszyklus hooks wird hilfreich sein schritt 1 – erstellen eines neuen projekts auf back4app und verbinden melden sie sich bei ihrem back4app konto an erstellen sie eine neue app mit der schaltfläche „neue app“ in ihrem back4app dashboard benennen sie ihre app (z b „ionic backend tutorial“) dieses back4app projekt ist die basis für ihr backend im gegensatz zur verwendung eines clientseitigen parse sdk wird dieses tutorial zeigen, wie man über rest und graphql von ihrer ionic app aus aufruft abrufen ihrer anmeldeinformationen gehe im back4app dashboard zu app einstellungen oder sicherheit & schlüssel notiere dir deine anwendungs id , rest api schlüssel , und graphql endpunkt du wirst diese benötigen, um anfragen von deiner ionic app zu senden schritt 2 – datenbank einrichten eine gut strukturierte datenbank ist das rückgrat jeder app das dashboard von back4app erleichtert das entwerfen von datenmodellen und das verwalten von beziehungen 1\ erstellen eines datenmodells gehe zum datenbank bereich in deinem back4app dashboard erstelle eine neue klasse (zum beispiel „todo“) und füge spalten hinzu (z b titel als string, iscompleted als boolean) 2\ erstellen eines datenmodells mit dem ki agenten öffnen sie den ai agent von ihrem back4app dashboard beschreiben sie ihr gewünschtes schema, wie zum beispiel „erstellen sie eine todo klasse mit feldern für titel (string) und iscompleted (boolean) “ der ai agent wird das schema automatisch generieren 3\ daten lesen und schreiben mit der rest api von ihrem ionic code aus können sie http anfragen ausführen zum beispiel, um zu erstellen eine 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 um alle todos abzurufen curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo sie können diese aufrufe mit fetch , axios , oder einer beliebigen http client bibliothek innerhalb der service oder komponenten dateien ihrer ionic app integrieren 4\ daten lesen und schreiben mit der graphql api ähnlich können sie graphql mutationen und abfragen von ihrer ionic app aus senden zum beispiel, um einen neuen todo zu erstellen mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } beispiel rest oder graphql aufrufe können in einer provider /service datei in ihrer ionic struktur platziert und dann von ihren seiten aufgerufen werden 5\ arbeiten mit live abfragen (optional) live abfragen bieten echtzeit updates für die daten ihrer app, erfordern jedoch das parse sdk oder einen spezialisierten abonnementansatz wenn sie echtzeitdaten benötigen, können sie live abfragen in den einstellungen ihres back4app servers aktivieren normalerweise würden sie eine websocket verbindung verwenden, um änderungen in ihren klassen zu überwachen für standardmäßige http basierte aufrufe können sie jedoch regelmäßig die rest oder graphql endpunkte abfragen schritt 3 – sicherheit mit acls und clps anwenden kurze übersicht acls (zugriffskontrolllisten) ermöglichen es ihnen, lese /schreibberechtigungen für einzelne objekte festzulegen clps (klassenebene berechtigungen) ermöglichen es ihnen, breitere zugriffe auf klassenebene zu verwalten diese funktionen sind entscheidend, um private daten zu schützen und sicherzustellen, dass nur autorisierte benutzer informationen ändern können einrichten von klassenebene berechtigungen gehen sie in ihrem back4app dashboard zu datenbank > klassenebene berechtigungen konfigurieren sie ihre klassendefaults (z b nur authentifizierte benutzer können neue todos erstellen) konfigurieren von acls beim erstellen oder aktualisieren von datensätzen können sie acl felder über rest übergeben curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo für weitere informationen siehe die app sicherheitsrichtlinien https //www back4app com/docs/security/parse security schritt 4 – schreiben von cloud code funktionen warum cloud code cloud code ermöglicht es ihnen, serverseitiges javascript für aufgaben wie datenvalidierung, trigger oder integrationen auszuführen sie können benutzerdefinierte endpunkte erstellen, um logik zu zentralisieren, was besonders nützlich ist, wenn sie code vom client fernhalten möchten beispiel für funktionen und trigger in ihrer main js auf der serverseite (back4app) könnten sie schreiben // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); bereitstellen sie dies über die back4app cli https //www back4app com/docs/local development/parse cli oder im cloud code bereich des dashboards cloud code von ionic aufrufen sie können eine post anfrage senden curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo sie erhalten eine json antwort, die alle zurückgegebenen daten oder eine fehlermeldung enthält npm module sie können pakete wie axios in ihrer cloud code umgebung installieren, um drittanbieterdienste zu integrieren fügen sie sie in main js const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); bereitstellen und aufrufen, wie sie es mit jeder cloud code funktion tun würden schritt 5 – authentifizierung konfigurieren benutzerauthentifizierung aktivieren die benutzeranmeldung und registrierung kann mit rest aufrufen zur user klasse erfolgen zum beispiel, um sich anzumelden curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users anmeldung curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login im erfolgsfall erhalten sie ein sessiontoken bewahren sie es sicher auf und fügen sie es in die header zukünftiger anfragen für authentifizierte operationen ein soziale logins sie können soziale logins (wie google oder facebook) konfigurieren, indem sie den oauth flow über back4app einrichten oder externe anbieter verwenden siehe die dokumentation zu sozialen logins https //www back4app com/docs/platform/sign in with apple für detaillierte schritte schritt 6 – umgang mit dateispeicher einrichten des dateispeichers back4app bietet sicheren dateispeicher sie können dateien an objekte anhängen oder sie unabhängig speichern zum beispiel curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png die antwort enthält eine datei url, die sie in einer klasse speichern können curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo sicherheitsüberlegungen sie können dateisicherheitsregeln in den servereinstellungen von back4app aktivieren, um eine authentifizierung zu verlangen oder datei uploads auf bestimmte rollen zu beschränken schritt 7 – e mail verifizierung und passwortzurücksetzung warum verifizierung wichtig ist die e mail verifizierung stellt die legitimität der benutzer e mails sicher die passwortzurücksetzung bietet eine sichere möglichkeit, verlorene anmeldeinformationen wiederherzustellen dies hilft, vertrauen und eine ordnungsgemäße benutzerverwaltung in ihrer ionic app aufrechtzuerhalten back4app dashboard konfiguration gehen sie zu app einstellungen > e mail einstellungen aktivieren sie die e mail verifizierung passen sie die vorlagen für die verifizierungs und passwortzurücksetzungs e mails an schritt 8 – aufgaben mit cloud jobs planen was cloud jobs tun cloud jobs ermöglichen es ihnen, wiederkehrende aufgaben wie datenbereinigung oder das versenden von zusammenfassungs e mails zu planen sie schreiben sie in ihre main js parse cloud job('cleanupoldtodos', async (request) => { 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); nach der bereitstellung gehe zu app einstellungen > servereinstellungen > hintergrundjobs plane cleanupoldtodos täglich auszuführen schritt 9 – integration von webhooks webhooks ermöglichen es ihnen, daten an externe dienste zu senden, wenn bestimmte ereignisse in ihrem back4app projekt auftreten wenn ihre ionic app eine aktion in stripe oder slack auslösen muss, nachdem ein neuer datensatz erstellt wurde, können sie webhooks verwenden, um dies zu automatisieren gehen sie zu mehr > webhooks in ihrem back4app dashboard fügen sie einen neuen webhook hinzu und setzen sie seinen endpunkt (z b https //your service com/webhook endpoint ) wählen sie das ereignis (z b „nach dem speichern“ in der todo klasse) sie können auch ausgehende anfragen von cloud code triggern in main js mit standard http bibliotheken initiieren schritt 10 – erkundung des back4app admin panels die back4app admin app ist eine einfachere schnittstelle für nicht technische stakeholder sie bietet eine einfache möglichkeit, crud operationen an ihren klassen durchzuführen, ohne in das haupt parse dashboard zu gehen aktivierung der admin app gehen sie im dashboard zu mehr > admin app klicken sie auf admin app aktivieren und erstellen sie einen admin benutzer wählen sie eine subdomain für den zugriff auf ihre admin schnittstelle dieses panel hilft ihnen, daten zu verwalten, ohne abfragen schreiben zu müssen, was es ideal für kunden oder teammitglieder macht, die eine grafische schnittstelle bevorzugen fazit indem sie diesen leitfaden über wie man ein backend für ionic erstellt , haben sie ein sicheres backend erstellt auf back4app mit robusten datenmodellen und beziehungen integriert mit rest und graphql apis um daten von ihrer ionic app zu lesen und zu schreiben sicherheit implementiert mit acls und clps cloud code bereitgestellt für benutzerdefinierte logik und trigger benutzerauthentifizierung konfiguriert und dateispeicherung cloud jobs eingerichtet um aufgaben zu planen webhooks genutzt für externe integrationen das admin panel erkundet um die datenverwaltung zu vereinfachen mit diesem fundament kann ihre ionic app zu einer produktionsbereiten plattform weiterentwickelt werden fügen sie mehr logik hinzu, verbinden sie drittanbieter apis oder optimieren sie sicherheitsregeln, um ihrem anwendungsfall gerecht zu werden nächste schritte verbessern sie ihren produktionsbuild durch implementierung von caching, rollenbasiertem zugriff und leistungsüberwachung integrieren sie erweiterte funktionen wie echtzeit live abfragen oder multi faktor authentifizierung konsultieren sie die offiziellen dokumente von back4app für eine eingehende erkundung von analysen, protokollen und leistungsoptimierung erforschen sie andere tutorials die chat anwendungen, iot integrationen oder standortbasierte funktionen demonstrieren, kombiniert mit den robusten backend diensten von back4app