Wie man eine CRUD-Anwendung mit SwiftUI baut?

übersicht in diesem leitfaden lernen sie, wie sie eine voll funktionsfähige crud anwendung (erstellen, lesen, aktualisieren und löschen) mit swiftui entwickeln swiftui ist ein framework zum erstellen von benutzeroberflächen für ios, ipados, watchos, tvos, visionos und macos wir verwenden back4app als backend service, um unsere daten zu verwalten dieses tutorial führt sie durch die konfiguration ihres back4app projekts, das entwerfen ihres datenbankschemas, die integration mit swiftui über api aufrufe und die sicherung ihres backends was sie lernen werden wie man eine crud app erstellt, die datenoperationen nahtlos verarbeitet techniken zum entwerfen eines robusten und skalierbaren backends methoden zur verbindung einer swiftui oberfläche mit back4app über rest apis wie man daten sicher mit fortschrittlichen zugriffskontrollen verwaltet voraussetzungen back4app konto stellen sie sicher, dass sie sich angemeldet und ein neues projekt auf back4app eingerichtet haben siehe back4app schnellstart https //www back4app com/docs/get started/new parse app zur unterstützung swiftui umgebung bestätigen sie, dass sie xcode installiert und ein grundlegendes swiftui projekt erstellt haben vertrautheit grundkenntnisse in swift, swiftui und restful apis sind hilfreich bevor sie beginnen schritt 1 – einrichtung ihres back4app projekts ein neues projekt auf back4app initiieren greifen sie auf ihr back4app dashboard zu indem sie sich in ihr konto einloggen wählen sie „neue app“ um ein neues projekt zu beginnen benennen sie ihr projekt zum beispiel, basic crud app swiftui , und folgen sie den anweisungen auf dem bildschirm, um die einrichtung abzuschließen neues projekt erstellen sobald ihr projekt erstellt ist, wird es in ihrem dashboard angezeigt, bereit zur konfiguration für backend operationen schritt 2 – gestaltung ihres datenbankschemas definieren ihres datenmodells für diese crud anwendung müssen sie mehrere sammlungen (klassen) definieren im folgenden finden sie beispiele, die wichtige sammlungen zusammen mit ihren feldern und typen umreißen 1\ sammlung artikel diese sammlung speichert details zu jedem eintrag feld typ zweck id objekt id automatisch generierter primärschlüssel titel zeichenfolge name oder titel des elements beschreibung zeichenfolge kurze erklärung zum artikel erstellt am datum zeitstempel zur kennzeichnung der erstellung aktualisiert am datum zeitstempel des letzten updates 2\ sammlung benutzer diese sammlung enthält benutzeranmeldeinformationen und profildetails feld typ zweck id objekt id automatisch generierte eindeutige kennung benutzername zeichenfolge einzigartiger benutzername für die anmeldung e mail zeichenfolge die eindeutige e mail adresse des benutzers passwort hash zeichenfolge verschlüsseltes passwort zur authentifizierung erstellt am datum zeitstempel der kontoerstellung aktualisiert am datum zeitstempel der letzten kontomodifikation sie können diese klassen manuell über das back4app dashboard konfigurieren, indem sie neue klassen erstellen und spalten für jedes feld hinzufügen neue klasse erstellen nutzen sie die dashboard tools, um den feldnamen, den typ, den standardwert und den erforderlichen status zu definieren spalte erstellen nutzung des back4app ai agenten der back4app ai agent optimiert den prozess der schema generierung er kann automatisch ihr datenbankschema basierend auf einem textuellen prompt erstellen so nutzen sie den ai agent finden sie den ai agent melden sie sich an und navigieren sie zum abschnitt ai agent in ihren projekteinstellungen reichen sie ihre schema beschreibung ein geben sie einen detaillierten prompt ein, der die gewünschten sammlungen und felder umreißt überprüfen und implementieren nach der generierung überprüfen sie das schema und wenden sie die änderungen an beispiel prompt create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) diese funktion spart zeit und sorgt für konsistenz in ihrer datenbankeinrichtung schritt 3 – datenverwaltung mit der admin oberfläche übersicht über die admin oberfläche die back4app admin app ist ein no code tool, das die datenverwaltung vereinfacht ihre intuitive drag and drop oberfläche ermöglicht es ihnen, crud operationen mühelos durchzuführen aktivierung der admin oberfläche gehe zum menü „mehr“ in deinem back4app dashboard wähle „admin app“ und wähle dann „admin app aktivieren “ einrichtungsanmeldeinformationen erstelle deinen ersten admin benutzer, der die systemrollen automatisch konfiguriert admin app aktivieren nach der aktivierung melde dich in der admin app an, um deine sammlungen zu verwalten admin app dashboard crud operationen in der admin oberfläche erstellen verwende die option „datensatz hinzufügen“ in jeder sammlung (z b artikel), um neue daten hinzuzufügen lesen/aktualisieren klicke auf einen datensatz, um details anzuzeigen und felder zu ändern löschen entferne datensätze mit der löschfunktion, wenn sie nicht mehr benötigt werden diese schnittstelle verbessert die benutzerfreundlichkeit und vereinfacht alltägliche datenoperationen schritt 4 – integration von swiftui mit back4app mit deinem backend ist es an der zeit, deine swiftui anwendung mit back4app zu verbinden verwendung von rest api aufrufen in swiftui anstatt auf das sdk zu vertrauen, verwenden wir rest api aufrufe, um von unserer swiftui app mit back4app zu interagieren beispiel abrufen von elementen erstellen sie eine neue swiftui ansicht (z b itemslistview\ swift ) und fügen sie den folgenden code hinzu import swiftui import combine struct item identifiable, codable { let id string let title string let description string } class itemsviewmodel observableobject { @published var items \[item] = \[] private var cancellables = set\<anycancellable>() func fetchitems() { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") urlsession shared datataskpublisher(for request) map { $0 data } decode(type itemsresponse self, decoder jsondecoder()) receive(on dispatchqueue main) sink(receivecompletion { completion in if case let failure(error) = completion { print("error fetching items \\(error)") } }, receivevalue { response in self items = response results }) store(in \&cancellables) } } struct itemsresponse codable { let results \[item] } struct itemslistview view { @stateobject private var viewmodel = itemsviewmodel() var body some view { navigationview { list(viewmodel items) { item in vstack(alignment leading) { text(item title) font( headline) text(item description) font( subheadline) } } navigationtitle("items") onappear { viewmodel fetchitems() } } } } struct itemslistview previews previewprovider { static var previews some view { itemslistview() } } diese ansicht ruft daten von back4app über rest ab und zeigt sie in einer liste an weitere api operationen neue elemente erstellen verwenden sie urlsession mit einer post anfrage, um neue einträge hinzuzufügen elemente aktualisieren implementieren sie put anfragen zur modifizierung vorhandener daten elemente löschen nutzen sie delete anfragen, um daten zu entfernen integrieren sie diese netzwerkoperationen nach bedarf in ihre swiftui ansichten schritt 5 – sicherung ihres backends implementierung von zugriffskontrollen schützen sie ihre daten, indem sie zugriffskontrolllisten (acls) für ihre objekte festlegen zum beispiel, um einen sicheren artikel zu erstellen func createsecureitem(title string, description string, ownerid string) { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let itemdata \[string any] = \[ "title" title, "description" description, "acl" \[ ownerid \["read" true, "write" true], " " \["read" false, "write" false] ] ] request httpbody = try? jsonserialization data(withjsonobject itemdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("error creating item \\(error)") } } resume() } konfiguration von klassenberechtigungen passen sie in ihrem back4app dashboard die klassenberechtigungen (clps) für jede sammlung an, um durchzusetzen, wer standardmäßig daten lesen oder schreiben kann schritt 6 – implementierung der benutzerauthentifizierung einrichtung von benutzerkonten back4app nutzt eine benutzerklasse zur handhabung der authentifizierung verwenden sie in ihrer swiftui app rest api aufrufe zur verwaltung von registrierung und anmeldung beispiel benutzerregistrierung func signupuser(username string, password string, email string) { guard let url = url(string "https //parseapi back4app com/users") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let userdata \[string any] = \[ "username" username, "password" password, "email" email ] request httpbody = try? jsonserialization data(withjsonobject userdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("sign up error \\(error)") } else { print("user registered successfully") } } resume() } dieser ansatz kann für die benutzeranmeldung und sitzungsverwaltung erweitert werden schritt 7 – fazit und zukünftige verbesserungen großartige arbeit! sie haben erfolgreich eine grundlegende crud anwendung mit swiftui und back4app erstellt sie haben ein projekt mit dem titel basic crud app swiftui , ihr datenbankschema für artikel und benutzer entworfen und ihr swiftui frontend über rest api aufrufe mit dem backend verbunden zusätzlich haben sie gelernt, wie sie ihre daten mit acls sichern und die benutzerauthentifizierung implementieren was kommt als nächstes? erweitern sie ihre benutzeroberfläche verbessern sie ihre swiftui oberfläche mit detailansichten, animationen und interaktiven elementen erweiterte funktionen integrieren sie zusätzliche backend logik wie cloud funktionen oder echtzeit datenaktualisierungen mehr erkunden besuchen sie die back4app dokumentation https //www back4app com/docs für weitere einblicke in die optimierung ihrer app und die integration fortschrittlicherer funktionen indem sie diesem leitfaden folgen, haben sie nun die grundlegenden fähigkeiten, um ein robustes und skalierbares crud backend für ihre swiftui anwendungen mit back4app zu erstellen viel spaß beim bauen und innovieren!