Wie man eine Veranstaltungsbuchungs-App mit Flutter und Back4App erstellt

einführung in der heutigen schnelllebigen welt ist es zunehmend wichtig geworden, veranstaltungen und buchungen über mobile anwendungen zu verwalten eine event buchungs app ermöglicht es den nutzern, bevorstehende veranstaltungen zu durchsuchen, tickets zu buchen, sitzplätze auszuwählen und ihre buchungen nahtlos zu verwalten in diesem tutorial lernen sie, wie sie eine vollständige event buchungs app mit flutter für das frontend und back4app als backend service erstellen am ende dieses tutorials haben sie eine funktionale app erstellt, die eine liste von veranstaltungen mit details anzeigt es den nutzern ermöglicht, veranstaltungspläne und informationen zu veranstaltungsorten einzusehen die buchung von tickets mit sitzplatzwahl ermöglicht zahlungen sicher verarbeitet (integration mit einem zahlungs gateway) benutzerprofile verwaltet, einschließlich buchungshistorie und präferenzen lass uns anfangen! voraussetzungen um dieses tutorial abzuschließen, benötigen sie flutter sdk auf ihrem lokalen rechner installiert folgen sie dem offiziellen flutter installationsanleitung https //flutter dev/docs/get started/install grundkenntnisse in dart und flutter wenn sie neu bei flutter sind, sollten sie flutters einführungstutorial https //flutter dev/docs/get started/codelab durchgehen ein back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ an back4app flutter sdk in ihr projekt integriert sie können lernen, wie sie es einrichten, indem sie die back4app flutter anleitung https //www back4app com/docs/flutter/parse sdk/flutter setup befolgen ein code editor wie visual studio code oder android studio node js und npm installiert, um back4app cloudfunktionen auszuführen installieren sie sie von der offiziellen node js website https //nodejs org/ schritt 1 – einrichten des back4app backends in diesem schritt richten sie ihr back4app projekt ein, erstellen die erforderlichen klassen (tabellen) und konfigurieren das backend, um veranstaltungsdaten, ticketinformationen und benutzerprofile zu speichern 1 1 erstellen sie eine neue back4app anwendung melden sie sich bei ihrem back4app konto an klicken sie auf "neue app erstellen" geben sie einen app namen (z b "eventbookingapp") ein und wählen sie ihr app icon aus klicken sie auf "erstellen" 1 2 konfigurieren sie die anwendungs schlüssel navigieren sie zu ihrem app dashboard klicken sie auf "app einstellungen" > "sicherheit & schlüssel" notieren sie sich die anwendungs id und den client schlüssel sie benötigen diese, um das parse sdk in ihrer flutter app zu initialisieren 1 3 definiere die datenmodelle du musst die folgenden klassen in back4app erstellen ereignis speichert ereignisdetails veranstaltungsort speichert informationen über den veranstaltungsort ticket verwalten der ticketverfügbarkeit und buchungen benutzer verwalten von benutzerprofilen (standardklasse) erstelle die ereignisklasse klicken sie in der linken seitenleiste auf "datenbank" um den datenbrowser zu öffnen klicken sie auf "klasse erstellen" wählen sie "benutzerdefiniert" , geben sie "ereignis" als klassennamen ein und klicken sie auf "klasse erstellen" fügen sie die folgenden spalten zur ereignis klasse hinzu name (string) beschreibung (string) datum (datum) bild (datei) ort (verweis auf veranstaltungsort) preis (zahl) erstellen sie die veranstaltungsort klasse wiederholen sie die schritte, um eine neue klasse mit dem namen "veranstaltungsort" zu erstellen fügen sie die folgenden spalten hinzu name (string) adresse (string) kapazität (zahl) sitzplan (datei) erstellen sie die ticketklasse erstellen sie eine neue klasse mit dem namen "ticket" fügen sie die folgenden spalten hinzu ereignis (zeiger auf ereignis) benutzer (zeiger auf benutzer) sitznummer (string) preis (zahl) istgebucht (boolean) 1 4 benutzer authentifizierung aktivieren klicken sie in der linken seitenleiste auf "servereinstellungen" > "allgemeine einstellungen" stellen sie unter "authentifizierung" , sicher, dass "klassenebene berechtigungen aktivieren" aktiviert ist konfigurieren sie die benutzer klassenberechtigungen, um benutzern die anmeldung und das einloggen zu ermöglichen 1 5 cloud funktionen einrichten (optional für die zahlungsabwicklung) für die zahlungsintegration müssen sie möglicherweise cloud funktionen schreiben dieser schritt hängt von dem zahlungsanbieter ab, den sie wählen (z b stripe, paypal) konsultieren sie die dokumentation von back4app zu cloud code funktionen https //www back4app com/docs/platform/parse cloudcode schritt 2 – initialisierung des flutter projekts in diesem schritt richten sie das flutter projekt ein und integrieren das back4app parse sdk 2 1 erstellen sie ein neues flutter projekt öffnen sie ihr terminal und führen sie aus flutter create event booking app navigieren sie zum projektverzeichnis cd event booking app 2 2 abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten hinzu dependencies flutter sdk flutter cupertino icons ^1 0 2 parse server sdk flutter ^4 0 1 provider ^6 0 0 \# add any additional packages you need, e g , http, image picker, etc führen sie flutter pub get aus, um die pakete zu installieren 2 3 parse sdk initialisieren in lib/main dart , importieren sie die erforderlichen pakete und initialisieren sie parse import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app application id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { // build your app's ui here } ersetzen sie 'your back4app application id' und 'your back4app client key' durch ihre tatsächlichen schlüssel von back4app schritt 3 – implementierung der benutzerauthentifizierung benutzer müssen sich registrieren und anmelden, um veranstaltungen zu buchen und ihre profile zu verwalten 3 1 erstellen von authentifizierungsbildschirmen erstellen sie zwei neue dart dateien in lib/ login screen dart signup screen dart login screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class loginscreen extends statefulwidget { @override loginscreenstate createstate() => loginscreenstate(); } class loginscreenstate extends state\<loginscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void douserlogin() async { final username = usernamecontroller text trim(); final password = passwordcontroller text trim(); final user = parseuser(username, password, null); var response = await user login(); if (response success) { // navigate to home screen navigator pushreplacementnamed(context, '/home'); } else { // show error message showerror(response error! message); } } void showerror(string message) { // implement a method to show error messages } @override widget build(buildcontext context) { // build your login ui here } } signup screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class signupscreen extends statefulwidget { @override signupscreenstate createstate() => signupscreenstate(); } class signupscreenstate extends state\<signupscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); void douserregistration() async { final username = usernamecontroller text trim(); final password = passwordcontroller text trim(); final user = parseuser(username, password, null); var response = await user signup(); if (response success) { // navigate to home screen navigator pushreplacementnamed(context, '/home'); } else { // show error message showerror(response error! message); } } void showerror(string message) { // implement a method to show error messages } @override widget build(buildcontext context) { // build your sign up ui here } } 3 2 aktualisiere main dart mit routen class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'event booking app', initialroute '/login', routes { '/login' (context) => loginscreen(), '/signup' (context) => signupscreen(), '/home' (context) => homescreen(), // add other routes as needed }, ); } } 3 2 aktualisiere main dart mit routen 3 3 implementieren sie den startbildschirm erstellen sie eine home screen dart datei, in die authentifizierte benutzer umgeleitet werden import 'package\ flutter/material dart'; class homescreen extends statelesswidget { @override widget build(buildcontext context) { // build your home screen ui here } } schritt 4 – veranstaltungen anzeigen holen sie veranstaltungen von back4app und zeigen sie sie in einer liste an 4 1 ereignismodell erstellen erstellen sie eine dart klasse event dart in lib/models/ import 'package\ parse server sdk flutter/parse server sdk dart'; class event extends parseobject implements parsecloneable { event() super( keytablename); event clone() this(); static const string keytablename = 'event'; static const string keyname = 'name'; static const string keydescription = 'description'; static const string keydate = 'date'; static const string keyimage = 'image'; static const string keyvenue = 'venue'; static const string keyprice = 'price'; @override clone(map\<string, dynamic> map) => event clone() fromjson(map); string? get name => get\<string>(keyname); string? get description => get\<string>(keydescription); datetime? get date => get\<datetime>(keydate); parsefilebase? get image => get\<parsefilebase>(keyimage); parseobject? get venue => get\<parseobject>(keyvenue); double? get price => get\<double>(keyprice); } 4 2 veranstaltungen auf dem startbildschirm abrufen in home screen dart , veranstaltungen abrufen und anzeigen import 'package\ flutter/material dart'; import 'models/event dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class homescreen extends statefulwidget { @override homescreenstate createstate() => homescreenstate(); } class homescreenstate extends state\<homescreen> { future\<list\<event>> getevents() async { querybuilder\<event> queryevents = querybuilder\<event>(event()) orderbydescending('date'); final parseresponse apiresponse = await queryevents query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<event>; } else { return \[]; } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('events'), ), body futurebuilder\<list\<event>>( future getevents(), builder (context, snapshot) { if (snapshot hasdata) { list\<event> events = snapshot data!; return listview\ builder( itemcount events length, itembuilder (context, index) { event event = events\[index]; return listtile( title text(event name ?? 'no title'), subtitle text(event date? tolocal() tostring() ?? ''), ontap () { // navigate to event details navigator push( context, materialpageroute( builder (context) => eventdetailsscreen(event event), ), ); }, ); }, ); } else if (snapshot haserror) { return center(child text('error loading events')); } else { return center(child circularprogressindicator()); } }, ), ); } } 4 3 ereignisdetails bildschirm erstellen erstellen event details screen dart import 'package\ flutter/material dart'; import 'models/event dart'; class eventdetailsscreen extends statelesswidget { final event event; eventdetailsscreen({required this event}); void bookticket(buildcontext context) { // implement ticket booking logic navigator push( context, materialpageroute( builder (context) => seatselectionscreen(event event), ), ); } @override widget build(buildcontext context) { // build ui to display event details return scaffold( appbar appbar( title text(event name ?? 'event details'), ), body column( children \[ // display event image, description, date, venue, etc text(event description ?? ''), elevatedbutton( onpressed () => bookticket(context), child text('book ticket'), ), ], ), ); } } schritt 5 – implementierung der sitzplatzwahl ermöglichen sie den benutzern, sitzplätze vor der buchung auszuwählen 5 1 erstellen sie den bildschirm zur sitzplatzwahl erstellen sie seat selection screen dart import 'package\ flutter/material dart'; import 'models/event dart'; class seatselectionscreen extends statelesswidget { final event event; seatselectionscreen({required this event}); // mock data for seats final list\<string> seats = list generate(100, (index) => 'seat ${index + 1}'); @override widget build(buildcontext context) { // build ui for seat selection return scaffold( appbar appbar( title text('select seats'), ), body gridview\ builder( griddelegate slivergriddelegatewithfixedcrossaxiscount( crossaxiscount 5, ), itemcount seats length, itembuilder (context, index) { string seat = seats\[index]; return gesturedetector( ontap () { // handle seat selection // navigate to payment screen navigator push( context, materialpageroute( builder (context) => paymentscreen(event event, seat seat), ), ); }, child card( child center(child text(seat)), ), ); }, ), ); } } schritt 6 – zahlungsabwicklung integrieren sie ein zahlungs gateway, um ticketzahlungen sicher zu verarbeiten 6 1 wählen sie ein zahlungs gateway für dieses tutorial nehmen wir die verwendung von stripe https //stripe com/docs/payments an 6 2 richten sie ein stripe konto ein und erhalten sie api schlüssel registrieren sie sich für ein stripe konto https //dashboard stripe com/register erhalten sie ihren veröffentlichten schlüssel und geheimen schlüssel 6 3 fügen sie die stripe abhängigkeit hinzu fügen sie das stripe payment paket zu ihrer pubspec yaml dependencies stripe payment ^1 0 9 führen sie flutter pub get aus 6 4 zahlungsbildschirm implementieren erstellen sie payment screen dart import 'package\ flutter/material dart'; import 'package\ stripe payment/stripe payment dart'; import 'models/event dart'; class paymentscreen extends statefulwidget { final event event; final string seat; paymentscreen({required this event, required this seat}); @override paymentscreenstate createstate() => paymentscreenstate(); } class paymentscreenstate extends state\<paymentscreen> { void initstate() { super initstate(); stripepayment setoptions( stripeoptions( publishablekey 'your stripe publishable key', // optionally set other options ), ); } void startpayment() async { // implement payment logic // create payment method paymentmethod paymentmethod = await stripepayment paymentrequestwithcardform( cardformpaymentrequest(), ); // process the payment using a cloud function or your server // for simplicity, we'll assume payment is successful saveticket(); } void saveticket() async { // save ticket information to back4app final ticket = parseobject('ticket') set('event', widget event) set('user', await parseuser currentuser()) set('seatnumber', widget seat) set('price', widget event price) set('isbooked', true); await ticket save(); // navigate to confirmation screen or display success message } @override widget build(buildcontext context) { // build payment ui return scaffold( appbar appbar( title text('payment'), ), body center( child elevatedbutton( onpressed startpayment, child text('pay \\$${widget event price}'), ), ), ); } } hinweis die zahlungsabwicklung erfordert eine sichere handhabung sensibler daten in einer produktionsanwendung sollten sie zahlungen sicher über ihren eigenen server oder cloud funktionen verarbeiten schritt 7 – verwaltung von benutzerprofilen erlauben sie benutzern, ihre buchungen und präferenzen anzuzeigen und zu verwalten 7 1 profilbildschirm erstellen erstellen sie profile screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; class profilescreen extends statelesswidget { future\<list\<parseobject>> getusertickets() async { final user = await parseuser currentuser(); querybuilder\<parseobject> querytickets = querybuilder\<parseobject>(parseobject('ticket')) whereequalto('user', user) includeobject(\['event']); final parseresponse apiresponse = await querytickets query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<parseobject>; } else { return \[]; } } @override widget build(buildcontext context) { // build profile ui return scaffold( appbar appbar( title text('my profile'), ), body futurebuilder\<list\<parseobject>>( future getusertickets(), builder (context, snapshot) { if (snapshot hasdata) { list\<parseobject> tickets = snapshot data!; return listview\ builder( itemcount tickets length, itembuilder (context, index) { parseobject ticket = tickets\[index]; parseobject event = ticket get('event'); return listtile( title text(event get\<string>('name') ?? 'no event name'), subtitle text('seat ${ticket get\<string>('seatnumber')}'), ); }, ); } else if (snapshot haserror) { return center(child text('error loading tickets')); } else { return center(child circularprogressindicator()); } }, ), ); } } 7 2 navigation zum profilbildschirm hinzufügen fügen sie in ihrem home screen dart oder im hauptnavigationsmenü einen link zum profilbildschirm hinzu iconbutton( icon icon(icons person), onpressed () { navigator push( context, materialpageroute(builder (context) => profilescreen()), ); }, ), schritt 8 – testen der app führen sie ihre app mit folgendem befehl aus flutter run testen sie die folgenden funktionen registrieren und einloggen die liste der veranstaltungen anzeigen veranstaltungsdetails anzeigen sitze auswählen und zur zahlung fortfahren eine zahlung verarbeiten (testmodus, wenn möglich) buchungen im profil anzeigen fazit herzlichen glückwunsch! sie haben eine vollständige event buchungs app mit flutter und back4app erstellt diese app ermöglicht es benutzern, veranstaltungen zu durchsuchen, tickets mit sitzplatzwahl zu buchen, zahlungen zu verarbeiten und ihre profile und buchungen zu verwalten von hier aus können sie ihre app verbessern, indem sie push benachrichtigungen für veranstaltungs erinnerungen hinzufügen such und filterfunktionen für veranstaltungen implementieren die ui/ux mit besserem design und animationen verbessern die zahlungsabwicklung mit serverseitiger validierung sichern für weitere informationen zu flutter und back4app funktionen besuchen sie flutter dokumentation https //flutter dev/docs back4app dokumentation https //www back4app com/docs parse server cloud code anleitung https //docs parseplatform org/cloudcode/guide/ durch die integration von flutter mit back4app nutzen sie eine leistungsstarke kombination, um skalierbare, funktionsreiche mobile anwendungen effizient zu erstellen