How to Create a Basic CRUD Application with Blazor?

aperçu ce guide vous accompagnera dans la création d'une application crud complète (créer, lire, mettre à jour, supprimer) en utilisant blazor dans ce tutoriel, vous configurerez un projet back4app, concevrez votre schéma de base de données et intégrerez votre frontend blazor avec back4app via des api rest ce processus vous aidera à établir un backend robuste tout en garantissant que votre application web peut gérer efficacement les données dans un premier temps, vous configurerez un projet back4app intitulé basic crud app blazor , qui servira de colonne vertébrale à votre système de gestion des données ensuite, vous élaborerez un design de base de données évolutif en établissant des collections et des champs détaillés, soit manuellement, soit avec l'aide de l'agent ia de back4app après cela, vous exploiterez la puissance de l'application admin de back4app—une interface conviviale, par glisser déposer—pour gérer vos collections sans effort enfin, vous connecterez votre frontend blazor à back4app en utilisant des api rest et sécuriserez votre backend avec un contrôle d'accès approprié à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production qui prend en charge les opérations crud essentielles ainsi que l'authentification des utilisateurs et des mises à jour de données sécurisées points clés à retenir construire des applications crud qui gèrent les opérations de données de manière transparente en utilisant un backend fiable acquérir des connaissances sur la création d'un backend évolutif et son intégration avec un frontend blazor utiliser les capacités de glisser déposer de l'application back4app admin pour simplifier la gestion des données apprendre des techniques de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application prérequis avant de commencer, assurez vous d'avoir un compte back4app et un nouveau projet configuré visitez commencer avec back4app https //www back4app com/docs/get started/new parse app si vous avez besoin d'aide un environnement de développement blazor utilisez visual studio ou visual studio code avec le dernier sdk net (version 6 ou supérieure) des connaissances de base en c#, blazor et apis restful consultez la documentation blazor https //docs microsoft com/en us/aspnet/core/blazor si nécessaire étape 1 – configuration initiale du projet établir un nouveau projet back4app connectez vous à votre compte back4app sélectionnez le bouton “nouvelle application” depuis votre tableau de bord entrez le titre du projet basic crud app blazor et suivez les instructions à l'écran pour compléter le processus de création créer un nouveau projet après la configuration, votre nouveau projet s'affichera sur votre tableau de bord, fournissant une base solide pour configurer votre backend étape 2 – conception de votre schéma de base de données création de votre modèle de données pour cette application crud de base, vous devrez créer plusieurs collections ci dessous, des exemples de collections avec les champs requis et les types de données pour configurer votre base de données de manière efficace 1\ collection d'articles champ type de données but id identifiant d'objet identifiant unique généré automatiquement titre chaîne le nom ou le titre de l'élément description chaîne un court résumé de l'article créé à date l'horodatage lorsque l'élément a été créé mis à jour le date l'horodatage de la dernière modification de l'élément 2\ collection des utilisateurs champ type de données but id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour une connexion sécurisée créé à date horodatage de la création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez créer ces collections manuellement dans le tableau de bord back4app en établissant une nouvelle classe pour chaque collection et en ajoutant les colonnes nécessaires créer une nouvelle classe vous pouvez définir des colonnes en choisissant un type de données, en nommant le champ, en définissant des valeurs par défaut et en déterminant si le champ est obligatoire créer une colonne utiliser l'agent ai de back4app pour la création de schémas l'agent ai de back4app simplifie la création de schémas directement depuis votre tableau de bord en saisissant une invite détaillant vos collections et champs, l'agent ai génère automatiquement le schéma de base de données nécessaire comment utiliser l'agent ai accéder à l'agent ai connectez vous à votre tableau de bord back4app et localisez l'agent ai dans les paramètres ou le menu principal définir votre modèle de données collez une invite descriptive qui énumère les collections et leurs champs examiner et confirmer vérifiez le schéma suggéré et appliquez le à votre projet exemple d'invite create the following 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) utiliser cet agent ai permet non seulement de gagner du temps, mais aussi d'assurer une configuration de schéma cohérente et efficace étape 3 – activation de l'application admin et gestion des opérations crud introduction à l'application admin l'application admin de back4app fournit une interface sans code, par glisser déposer, pour gérer vos données backend cet outil intuitif vous permet d'effectuer des opérations crud avec facilité activation de l'application admin accédez au “plus” menu de votre tableau de bord back4app cliquez sur “application admin” puis sélectionnez “activer l'application admin ” configurez vos identifiants administratifs en créant un utilisateur admin initial, ce qui établira également des rôles par défaut et des collections système activer l'application admin après l'activation, connectez vous à l'application admin pour gérer vos collections et vos données tableau de bord de l'application admin effectuer des opérations crud avec l'application admin dans l'application admin, vous pouvez créer des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour ajouter de nouvelles entrées lire/mettre à jour des enregistrements cliquez sur un enregistrement pour inspecter ses détails ou modifier ses champs supprimer des enregistrements supprimez les entrées qui ne sont plus nécessaires cette interface simple, par glisser déposer, améliore considérablement l'expérience de gestion des données étape 4 – connecter blazor avec back4app maintenant que votre backend est configuré, il est temps d'intégrer votre frontend blazor avec back4app utilisation des api rest dans blazor puisque le sdk parse n'est pas applicable à blazor, vous utiliserez les api rest pour effectuer des opérations crud dans votre application blazor, utilisez le httpclient pour interagir avec les points de terminaison rest de back4app exemple récupération d'éléments via rest créez un service dans votre projet blazor pour récupérer des éléments par exemple // services/itemservice cs using system net http; using system net http headers; using system text json; using system threading tasks; using system collections generic; public class item { public string id { get; set; } public string title { get; set; } public string description { get; set; } } public class itemservice { private readonly httpclient httpclient; private const string baseurl = "https //parseapi back4app com/classes/items"; public itemservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task\<list\<item>> getitemsasync() { var response = await httpclient getasync(baseurl); response ensuresuccessstatuscode(); var json = await response content readasstringasync(); var itemsdata = jsonserializer deserialize\<itemsresponse>(json); return itemsdata results; } } public class itemsresponse { public list\<item> results { get; set; } } intégrez de tels appels api dans vos composants blazor pour gérer les opérations crud étape 5 – sécuriser votre backend mise en œuvre des listes de contrôle d'accès (acl) protégez vos données en définissant des acl sur vos objets par exemple, pour créer un élément privé public async task createprivateitemasync(item newitem, string ownerid) { // prepare your item data with proper access controls // in your rest call, include acl information as required by your backend // this is a conceptual example; refer to back4app documentation for acl details } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de garantir que seuls les utilisateurs autorisés peuvent accéder ou modifier des données sensibles étape 6 – gestion de l'authentification des utilisateurs configuration des comptes utilisateurs dans blazor back4app utilise la classe user de parse pour gérer l'authentification dans votre application blazor, gérez l'inscription et la connexion des utilisateurs via des appels rest par exemple // services/authservice cs using system net http; using system net http json; using system threading tasks; public class authservice { private readonly httpclient httpclient; private const string signupurl = "https //parseapi back4app com/users"; public authservice(httpclient httpclient) { httpclient = httpclient; httpclient defaultrequestheaders add("x parse application id", "your application id"); httpclient defaultrequestheaders add("x parse rest api key", "your rest api key"); } public async task signupasync(string username, string password, string email) { var user = new { username, password, email }; var response = await httpclient postasjsonasync(signupurl, user); response ensuresuccessstatuscode(); // handle success, such as storing tokens or redirecting the user } } des méthodes similaires peuvent être mises en œuvre pour la connexion et la gestion des sessions des fonctionnalités supplémentaires comme les connexions sociales, la vérification par e mail et la récupération de mot de passe peuvent être configurées via le tableau de bord back4app étape 7 – déployer votre frontend blazor la fonctionnalité de déploiement web de back4app vous permet d'héberger facilement votre application blazor en déployant votre code depuis un dépôt github 7 1 création de votre build de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de publication dotnet publish c release cette commande génère un dossier publié avec des fichiers statiques optimisés pour votre application blazor vérifiez la construction confirmez que le dossier de sortie contient les fichiers nécessaires (par exemple, index html , javascript, css, etc ) 7 2 organisation et téléchargement de votre code votre dépôt git doit encapsuler l'ensemble du code source de votre application blazor une structure de dossier exemple pourrait être basic crud app blazor frontend/ \| wwwroot/ \| | index html \| pages/ \| | index razor \| | items razor \| | login razor \| services/ \| | itemservice cs \| | authservice cs \| program cs \| basic crud app blazor csproj \| readme md fichier d'exemple program cs using microsoft aspnetcore components web; using microsoft aspnetcore components webassembly hosting; using basic crud app blazor; using basic crud app blazor services; var builder = webassemblyhostbuilder createdefault(args); builder rootcomponents add\<app>("#app"); builder rootcomponents add\<headoutlet>("head after"); builder services addscoped(sp => new httpclient { baseaddress = new uri(builder hostenvironment baseaddress) }); builder services addscoped\<itemservice>(); builder services addscoped\<authservice>(); await builder build() runasync(); engager et pousser sur github initialisez git dans votre dossier de projet (si ce n'est pas déjà fait) git init ajoutez vos fichiers git add engagez vos modifications git commit m "engagement initial du code source frontend blazor" créez un dépôt github nommez le basic crud app blazor frontend poussez votre dépôt git remote add origin https //github com/your username/basic crud app blazor frontend git git push u origin main 7 3 intégration de votre dépôt avec le déploiement web accédez à l'option de déploiement web dans votre tableau de bord back4app, ouvrez votre projet ( basic crud app blazor ) et naviguez vers la section déploiement web connectez votre compte github suivez les instructions pour lier votre compte github, permettant à back4app d'accéder à votre dépôt sélectionnez le dépôt et la branche choisissez le dépôt (par exemple, basic crud app blazor frontend ) et la branche (par exemple, main ) qui contient votre code blazor 7 4 configuration de déploiement fournir des détails supplémentaires tels que commande de construction si le dossier publié n'est pas pré généré, spécifiez une commande comme dotnet publish c release répertoire de sortie définissez le chemin de sortie (par exemple, bin/release/net6 0/wwwroot ) variables d'environnement ajoutez tous les paramètres d'environnement requis (tels que les clés api) dans la configuration 7 5 conteneuriser votre application blazor avec docker si vous préférez docker pour le déploiement, incluez un dockerfile dans votre dépôt voici un exemple \# use the official net sdk image for building the app from mcr microsoft com/dotnet/sdk 6 0 as build workdir /src copy \["basic crud app blazor csproj", " /"] run dotnet restore "basic crud app blazor csproj" copy run dotnet publish "basic crud app blazor csproj" c release o /app/publish \# use the official asp net core runtime image to run the app from mcr microsoft com/dotnet/aspnet 6 0 as runtime workdir /app copy from=build /app/publish expose 80 entrypoint \["dotnet", "basic crud app blazor dll"] ensuite, dans vos paramètres de déploiement web, sélectionnez l'option docker pour déployer votre application conteneurisée 7 6 lancement de votre application initier le déploiement cliquez sur le déployer bouton dans le tableau de bord back4app surveiller la construction back4app récupérera votre code depuis github, exécutera la commande de construction si nécessaire, et déploiera votre application dans un conteneur obtenez votre url une fois le processus de déploiement terminé, back4app fournira une url pour votre application blazor hébergée 7 7 confirmation du déploiement ouvrez l'url fournie visitez l'url dans un navigateur pour voir votre application déployée testez l'application vérifiez que toutes les pages se chargent correctement et que les opérations crud fonctionnent comme prévu déboguez si nécessaire utilisez les outils de développement du navigateur et examinez les journaux de déploiement sur back4app pour diagnostiquer tout problème étape 8 – résumé et exploration supplémentaire félicitations ! vous avez réussi à créer une application crud de base en utilisant blazor et back4app vous avez configuré un projet intitulé basic crud app blazor , conçu des collections pour les articles et les utilisateurs, et utilisé l'application admin de back4app pour une gestion des données sans faille de plus, vous avez intégré votre frontend blazor avec back4app en utilisant des api rest et appliqué des mesures de sécurité robustes étapes futures développez votre frontend améliorez votre application blazor avec des vues plus détaillées, une fonctionnalité de recherche ou des notifications en direct ajoutez des fonctionnalités avancées envisagez d'incorporer des fonctions cloud, des intégrations tierces ou des permissions basées sur les rôles consultez des ressources supplémentaires revoyez la documentation de back4app https //www back4app com/docs et d'autres tutoriels avancés pour optimiser et étendre davantage votre application en suivant ce guide, vous avez maintenant les bases pour construire un backend crud évolutif et sécurisé pour votre application blazor en utilisant back4app bon codage !