Wie man ein Backend für Flutter erstellt?

einführung in diesem tutorial lernen sie wie man ein backend für flutter mit back4app, einem open source und zuverlässigen backend as a service (baas), erstellt wir werden die integration wesentlicher back4app funktionen durchgehen—wie datenbankverwaltung, cloud funktionen, restful apis, graphql apis und benutzerauthentifizierung—in ihr flutter projekt sie werden auch entdecken, wie man echtzeit updates mit live queries verarbeitet durch die nutzung der leistungsstarken backend server von back4app können sie viel von der manuellen konfiguration überspringen und sich auf die erstellung einer dynamischen flutter app konzentrieren dieser leitfaden zeigt flutter entwicklern, wie man eine sichere, skalierbare und robuste backend struktur einrichtet, die mühelos mit ihrer client seite kommuniziert wir werden auch die vorteile hervorheben, die back4app beim handling der schweren aufgaben bietet—wie hosting, benutzerauthentifizierung und serverlogik—damit sie von funktionen wie automatischer skalierung, erweiterter sicherheit und vereinfachter wartung profitieren können wenn sie ein flutter projekt haben und unzählige stunden bei der backend einrichtung sparen möchten, sind sie hier genau richtig am ende dieses tutorials werden sie verstehen, welche art von backend sie mit back4app erstellen können, und bereit sein, ihre backend dienste für eine produktionsbereite anwendung zu erweitern oder komplexere funktionen wie externe apis und erweiterte benutzerauthentifizierung zu integrieren lass uns anfangen! 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 flutter entwicklungsumgebung stellen sie sicher, dass sie das flutter sdk https //docs flutter dev/get started/install installiert und eingerichtet haben bestätigen sie auch, dass sie eine ide (wie android studio oder vs code) für flutter konfiguriert haben dart (programmiersprache) umgebung normalerweise wird dies zusammen mit flutter installiert stellen sie sicher, dass sie dart pakete ohne fehler importieren können vertrautheit mit den grundlagen von flutter offizielle flutter dokumentation https //docs flutter dev wenn sie neu bei flutter sind, lesen sie die offiziellen dokumente oder ein tutorial für anfänger, bevor sie beginnen stellen sie sicher, dass sie alle diese voraussetzungen erfüllt haben ihr back4app projekt eingerichtet und ihre lokale flutter umgebung konfiguriert zu haben, wird ihnen helfen, leichter mitzukommen schritt 1 – erstellen eines neuen projekts auf back4app und verbindung herstellen neues projekt erstellen der erste schritt beim erstellen ihres flutter backends auf back4app besteht darin, ein neues projekt zu erstellen wenn sie noch keines erstellt haben, befolgen sie diese schritte 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 „flutter 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 wir besprechen werden installieren und initialisieren des parse sdk in ihrer flutter app back4app basiert auf der parse plattform, um ihre daten, echtzeit updates, benutzerauthentifizierung und mehr zu verwalten um ihr flutter projekt mit back4app zu verbinden, befolgen sie diese schritte fügen sie das parse flutter sdk zu ihrer app hinzu dependencies parse server sdk flutter ^4 0 0 importieren sie das parse paket in ihre main dart (oder wo auch immer sie ihre app initialisieren) import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } gehen sie in ihrem back4app dashboard zum sicherheits und schlüssel bereich, um ihre anwendungs id , client schlüssel , und parse server url ersetzen sie die platzhalter oben durch ihre eigenen anmeldeinformationen mit dieser initialisierung wird jede anfrage von ihrer flutter app sicher an ihre back4app instanz weitergeleitet denken sie daran, dass der master schlüssel niemals auf der client seite ihrer flutter app verwendet werden sollte wenn sie den master schlüssel benötigen, bewahren sie ihn auf dem server oder in einer sicheren umgebung auf schritt 2 – datenbank einrichten erstellen eines datenmodells sobald ihre flutter app mit back4app verbunden ist, können sie mit dem entwerfen ihres datenbankschemas beginnen sie können dies manuell über das back4app dashboard tun navigieren sie zum abschnitt “datenbank” in ihrem dashboard erstellen sie eine neue klasse (z b “todo”) und fügen sie relevante spalten hinzu (z b titel, istabgeschlossen) back4app bietet auch einen ki agenten an, um bei der automatischen schemaerstellung zu helfen öffnen sie den ki agenten in ihrem app dashboard oder im menü beschreiben sie ihr datenmodell in einfacher sprache (z b „erstellen sie eine neue todo app mit einem vollständigen klassenschema “) lassen sie den ki agenten das schema erstellen für sie dies vereinfacht die einrichtung der datenarchitektur wenn sie möchten, dass felder automatisch erstellt werden, können sie einfach beginnen, objekte aus ihrer app zu speichern – parse unterstützt die schemaerstellung in echtzeit erstellen eines datenmodells mit dem ki agenten wenn sie sich entscheiden, den back4app ki agenten zu verwenden, geben sie einfach eine kurze beschreibung an, und er wird ein schema für sie erstellen oder vorschlagen dies ist eine hervorragende möglichkeit, die anfängliche datenmodellierungsphase ihres flutter projekts zu beschleunigen daten lesen und schreiben mit dem flutter parse sdk im folgenden finden sie ein einfaches beispiel, das zeigt, wie man objekte mit dem parse flutter sdk erstellt und abruft import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } damit können sie direkt mit ihrer back4app datenbank von ihrer flutter app aus interagieren rufen sie einfach createtodoitem('feed the cat', false) oder fetchtodos() auf, um daten zu schreiben und zu lesen daten lesen und schreiben mit der rest api wenn sie mit anderen diensten integrieren müssen oder einen traditionelleren ansatz bevorzugen, können sie weiterhin die back4app rest api 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 daten lesen und schreiben mit der graphql api back4app bietet auch einen graphql endpunkt an mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } dies gibt ihnen die flexibilität, den besten ansatz für ihre flutter app zu entwickeln arbeiten mit live abfragen back4app bietet live abfragen an, damit sie echtzeit updates ihrer daten erhalten können aktivieren sie live abfragen im back4app dashboard (servereinstellungen) und verwenden sie dann den parse livequery flutter client import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } mit diesem abonnement können sie datenänderungen in echtzeit verfolgen dies ist fantastisch für den aufbau von kollaborativen apps, in denen mehrere benutzer live datenaktualisierungen sehen sobald das hot reload ausgelöst wird, bleibt ihr abonnement bestehen, es sei denn, die app wird neu gestartet schritt 3 – anwendung von sicherheit mit acls und clps was sind acls und clps? back4app verwendet acls (zugriffskontrolllisten) und clps (klassenebene berechtigungen) um einzuschränken, wer daten auf objekt und klassenebene lesen oder schreiben kann diese schicht stellt sicher, dass ihre daten vor unbefugtem zugriff geschützt sind einrichten von klassenebene berechtigungen gehe in deinem back4app dashboard zu datenbank und wähle eine klasse (z b „todo“) navigiere zu klassenebene berechtigungen setze standardwerte (z b nur authentifizierte benutzer können neue objekte erstellen) konfigurieren von acls im code du kannst auch acls auf objektebene aus dem flutter code anwenden import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } durch die kombination von clps und acls kannst du sicherstellen, dass nur die richtigen personen oder rollen auf bestimmte daten zugreifen oder diese ändern können schritt 4 – schreiben von cloud code funktionen warum cloud code? cloud code ermöglicht es ihnen, serverseitige logik auszuführen, ohne manuell backend server einzurichten dies ist perfekt, um daten zu validieren, sich mit externen diensten zu integrieren oder bestimmte regeln in ihrem backend als dienst (baas) durchzusetzen beispiel funktion hier ist ein beispiel für eine cloud funktion, die die länge eines textes berechnet // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); sie können diesen code über die back4app cli oder im dashboard ihrer app unter cloud code bereitstellung verwendung der back4app cli b4a configure accountkey b4a deploy verwendung des dashboards gehen sie im dashboard ihrer app zu cloud code > funktionen fügen sie den javascript code ein klicken sie auf bereitstellen aufruf von cloud code aus flutter import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } dieser sichere ansatz stellt sicher, dass sensible logik auf dem server bleibt, während ihre flutter app einfach anfragen stellt schritt 5 – konfiguration der authentifizierung benutzerauthentifizierung aktivieren back4app verwendet die parse user klasse, um die benutzerregistrierung und anmeldung zu verwalten standardmäßig kümmert sich parse um die passwort hashing, sitzungstoken und sichere speicherung import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } soziale anmeldung back4app unterstützt integrationen mit google, apple, facebook und mehr jeder anbieter hat einen spezifischen ansatz und benötigt möglicherweise zusätzliche bibliotheken (z b für facebook oder google anmeldung) sie können dann aufrufen await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); passen sie die parameter gemäß der dokumentation des anbieters an schritt 6 – umgang mit dateispeicherung einrichten der dateispeicherung sie können bilder, dokumente oder andere mediendateien mit parsefile back4app sichert diese dateien und stellt eine url zur verfügung, um sie abzurufen import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } sicherheitsüberlegungen sie können definieren, wer zugriff auf dateien hat (öffentlich, authentifizierte benutzer oder eingeschränkt), indem sie die dateisicherheit mit acls kombinieren dies stellt sicher, dass ihre dateidaten sicher bleiben schritt 7 – e mail verifizierung und passwortzurücksetzung warum sie wichtig sind die e mail verifizierung bestätigt, dass ein benutzer die angegebene e mail adresse besitzt, während die passwortzurücksetzungsabläufe die benutzererfahrung und sicherheit verbessern dashboard konfiguration gehe zu den e mail einstellungen deiner app im back4app dashboard aktiviere e mail verifizierung und passwortzurücksetzung konfiguriere e mail vorlagen oder deine benutzerdefinierte domain, falls erforderlich diese einstellungen ermöglichen es deiner flutter app, automatisch benutzerbesitzprüfungen und passwortwiederherstellungen durchzuführen implementierung in flutter final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } schritt 8 – aufgaben mit cloud jobs planen cloud jobs du möchtest möglicherweise wiederkehrende aufgaben planen (wie das bereinigen alter daten oder das senden regelmäßiger e mails) cloud jobs ermöglichen dir genau das // 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); stellen sie diesen code bereit, gehen sie dann zu app einstellungen > servereinstellungen > hintergrundjobs in ihrem back4app dashboard, um ihn zu planen schritt 9 – integration von webhooks was sind webhooks? webhooks ermöglichen es ihrer back4app app, http anfragen an einen externen dienst zu senden, wenn bestimmte ereignisse eintreten (z b das speichern eines neuen objekts) dies ist ideal für die integration mit drittanbieter tools gehen sie zu mehr > webhooks in ihrem back4app dashboard und webhook hinzufügen legen sie ihren endpunkt und die trigger fest (z b „neuer datensatz in todo“) sie können webhooks auch manuell im cloud code konfigurieren, indem sie http anfragen in beforesave oder aftersave triggern durchführen schritt 10 – erkundung des back4app admin panels wo man es findet die back4app admin app ist eine benutzerfreundliche oberfläche, die es nicht technischen teammitgliedern ermöglicht, daten (crud operationen, datenaufgaben usw ) zu verwalten, ohne das parse dashboard öffnen zu müssen gehe zu app dashboard > mehr > admin app klicke auf admin app aktivieren du wirst einen admin benutzer erstellen, eine subdomain wählen und dich mit den neu erstellten anmeldeinformationen anmelden die admin app hilft bei schnellen datenüberprüfungen und änderungen fazit in diesem tutorial haben sie gelernt wie man ein backend für flutter mit back4app und dem parse flutter sdk erstellt sie haben klassen erstellt, daten gespeichert, echtzeitanfragen konfiguriert, sicherheit mit acls und clps angewendet, cloud funktionen geschrieben, aufgaben geplant, webhooks integriert und das back4app admin panel erkundet dieser ansatz beschleunigt die entwicklung, indem er ihnen ermöglicht, sich auf die flutter client seite zu konzentrieren, anstatt auf eine komplexe serverkonfiguration der endgültige string, den sie jetzt haben, ist ein funktionierendes und sicheres backend, das auf restful apis, benutzerauthentifizierung und einfacher datenmanipulation basiert sie können jederzeit fortgeschrittenere funktionen integrieren – wie zusätzliche cloud funktionen, externe api aufrufe oder benutzerdefinierte rollen nächste schritte gehen sie in die produktion implementieren sie fortgeschrittenes caching, analytik oder rollenbasierte zugriffskontrollen erweitern sie ihre app integrieren sie drittanbieterdienste oder erstellen sie weitere cloud funktionen für spezialisierte geschäftslogik konsultieren sie die back4app dokumentation erkunden sie fortgeschrittene sicherheit, leistungsoptimierung, protokollanalyse und mehr erfahren sie mehr schauen sie sich tutorials für live chat apps, standortbasierte dienste oder komplexere datenstrukturen an kombinieren sie sie mit ihrem flutter projekt für reale anwendungsfälle durch die kontinuierliche verfeinerung dieses setups werden sie ihre flutter app in eine leistungsstarke, skalierbare lösung verwandeln, die auf einem robusten backend dienst basiert viel spaß beim programmieren!