Comment créer une application CRUD avec SwiftUI ?

aperçu dans ce guide, vous apprendrez à développer une application crud (créer, lire, mettre à jour et supprimer) entièrement fonctionnelle en utilisant swiftui swiftui est un cadre pour construire des interfaces utilisateur pour ios, ipados, watchos, tvos, visionos et macos nous utiliserons back4app comme service backend pour gérer nos données ce tutoriel vous guide à travers la configuration de votre projet back4app, la conception de votre schéma de base de données, l'intégration avec swiftui en utilisant des appels api, et la sécurisation de votre backend ce que vous apprendrez comment construire une application crud qui gère les opérations de données sans effort techniques pour concevoir un backend robuste et évolutif méthodes pour connecter une interface swiftui avec back4app en utilisant des api rest comment gérer les données de manière sécurisée avec des contrôles d'accès avancés prérequis compte back4app assurez vous de vous être inscrit et d'avoir configuré un nouveau projet sur back4app référez vous à back4app quickstart https //www back4app com/docs/get started/new parse app pour assistance environnement swiftui confirmez que vous avez installé xcode et créé un projet swiftui de base familiarité une connaissance de base de swift, swiftui et des api restful sera utile avant de commencer étape 1 – établir votre projet back4app initier un nouveau projet sur back4app accédez à votre tableau de bord back4app en vous connectant à votre compte sélectionnez “nouvelle application” pour commencer un nouveau projet nommez votre projet par exemple, basic crud app swiftui , et suivez les instructions à l'écran pour compléter la configuration créer un nouveau projet une fois votre projet créé, il apparaîtra dans votre tableau de bord, prêt à être configuré pour les opérations backend étape 2 – élaboration de votre schéma de base de données définir votre modèle de données pour cette application crud, vous devez définir plusieurs collections (classes) voici des exemples qui décrivent les collections clés ainsi que leurs champs et types 1\ collection articles cette collection stocke des détails sur chaque entrée champ type but id identifiant d'objet clé primaire générée automatiquement titre chaîne nom ou titre de l'élément description chaîne brève explication sur l'article créé à date horodatage marquant la création mis à jour le date horodatage de la dernière mise à jour 2\ collection utilisateurs cette collection contient les identifiants et les détails de profil des utilisateurs champ type but id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour la connexion email chaîne adresse e mail unique de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour l'authentification créé à date horodatage de création du compte mis à jour le date horodatage de la dernière modification du compte vous pouvez configurer ces classes manuellement via le tableau de bord back4app en créant de nouvelles classes et en ajoutant des colonnes pour chaque champ créer une nouvelle classe utilisez les outils du tableau de bord pour définir le nom du champ, le type, la valeur par défaut et le statut requis créer une colonne exploiter l'agent ai de back4app l'agent ai de back4app simplifie le processus de génération de schéma il peut automatiquement produire votre schéma de base de données en fonction d'une invite textuelle comment utiliser l'agent ai localisez l'agent ai connectez vous et accédez à la section de l'agent ai dans les paramètres de votre projet soumettez la description de votre schéma entrez une invite détaillée qui décrit les collections et les champs souhaités examinez et appliquez après la génération, vérifiez le schéma et appliquez les modifications exemple d'invite 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) cette fonctionnalité permet de gagner du temps et garantit la cohérence de votre configuration de base de données étape 3 – gestion des données avec l'interface d'administration aperçu de l'interface d'administration l'application d'administration back4app est un outil sans code qui simplifie la gestion des données son interface intuitive de glisser déposer vous permet d'effectuer des opérations crud sans effort activation de l'interface administrateur allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” puis choisissez “activer l'application admin ” configurer les identifiants créez votre utilisateur administrateur initial, ce qui configure automatiquement les rôles système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos collections tableau de bord de l'application admin opérations crud dans l'interface administrateur créer utilisez l'option “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour ajouter de nouvelles données lire/mettre à jour cliquez sur un enregistrement pour voir les détails et modifier les champs supprimer supprimez des enregistrements en utilisant la fonction de suppression lorsqu'ils ne sont plus nécessaires cette interface améliore l'utilisabilité et simplifie les opérations de données quotidiennes étape 4 – intégration de swiftui avec back4app avec votre backend en place, il est temps de connecter votre application swiftui à back4app utilisation des appels d'api rest dans swiftui au lieu de s'appuyer sur le sdk, nous utiliserons des appels d'api rest pour interagir avec back4app depuis notre application swiftui exemple récupération d'éléments créez une nouvelle vue swiftui (par exemple, itemslistview\ swift ) et ajoutez le code suivant 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() } } cette vue récupère des données de back4app via rest et les affiche dans une liste opérations api supplémentaires création de nouveaux éléments utilisez urlsession avec une requête post pour ajouter de nouvelles entrées mise à jour des éléments implémentez des requêtes put pour modifier des données existantes suppression des éléments utilisez des requêtes delete pour supprimer des données intégrez ces opérations réseau dans vos vues swiftui selon vos besoins étape 5 – sécuriser votre backend mise en œuvre des contrôles d'accès protégez vos données en définissant des listes de contrôle d'accès (acl) pour vos objets par exemple, pour créer un enregistrement d'élément sécurisé 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() } configuration des autorisations au niveau de la classe dans votre tableau de bord back4app, ajustez les autorisations au niveau de la classe (clp) pour chaque collection afin de définir qui peut lire ou écrire des données par défaut étape 6 – mise en œuvre de l'authentification des utilisateurs établissement des comptes utilisateurs back4app utilise une classe utilisateur pour gérer l'authentification dans votre application swiftui, gérez l'inscription et la connexion via des appels d'api rest exemple inscription d'un utilisateur 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() } cette approche peut être étendue pour la connexion des utilisateurs et la gestion des sessions étape 7 – conclusion et améliorations futures bravo ! vous avez réussi à créer une application crud de base en utilisant swiftui et back4app vous avez créé un projet intitulé basic crud app swiftui , conçu votre schéma de base de données pour les articles et les utilisateurs, et connecté votre interface swiftui au backend via des appels d'api rest de plus, vous avez appris à sécuriser vos données avec des acl et à mettre en œuvre l'authentification des utilisateurs et ensuite ? développez votre interface utilisateur améliorez votre interface swiftui avec des vues détaillées, des animations et des éléments interactifs fonctionnalités avancées incorporez une logique backend supplémentaire telle que des fonctions cloud ou des mises à jour de données en temps réel explorez davantage visitez la documentation de back4app https //www back4app com/docs pour des informations supplémentaires sur l'optimisation de votre application et l'intégration de fonctionnalités plus avancées en suivant ce guide, vous avez maintenant les compétences essentielles pour créer un backend crud robuste et évolutif pour vos applications swiftui en utilisant back4app amusez vous à construire et à innover !