Créer une application CRUD avec Qwik : Un tutoriel complet

aperçu dans ce guide, vous apprendrez à créer une application crud (créer, lire, mettre à jour, supprimer) entièrement fonctionnelle en utilisant qwik nous démontrerons les opérations essentielles pour gérer les données tout en connectant votre application à back4app au départ, vous configurerez un projet back4app intitulé basic crud app qwik pour servir de backend pour la gestion des données ensuite, vous configurerez une base de données évolutive en définissant des collections et des champs—soit manuellement, soit avec l'aide de l'agent ia de back4app cela garantit que votre modèle de données est optimisé pour gérer efficacement les tâches crud vous utiliserez ensuite l'application admin de back4app, une interface conviviale de glisser déposer, pour gérer vos collections sans effort cet outil simplifie les opérations de données en offrant un moyen intuitif de créer, mettre à jour et supprimer des enregistrements enfin, vous intégrerez votre frontend qwik avec back4app en utilisant des api rest ou graphql, tout en mettant en œuvre des contrôles de sécurité robustes à la fin de ce tutoriel, votre application prête pour la production ne gérera pas seulement les opérations crud, mais prendra également en charge l'authentification des utilisateurs et l'accès sécurisé aux données aperçus essentiels maîtrisez l'art de développer des applications crud qui gèrent efficacement les données à l'aide d'un backend fiable découvrez des méthodes pour concevoir un backend adaptable et le fusionner avec un frontend qwik pour une interactivité utilisateur améliorée explorez les avantages d'une interface d'administration par glisser déposer (back4app admin app) pour rationaliser les fonctions crud apprenez les stratégies de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application web prérequis avant de commencer, veuillez vous assurer que vous avez un compte back4app avec un nouveau projet configuré visitez commencer avec back4app https //www back4app com/docs/get started/new parse app pour assistance un environnement de développement qwik configurez votre projet en utilisant la documentation qwik https //qwik builder io/docs/getting started/ assurez vous d'avoir node js (version 14 ou ultérieure) installé une compréhension de base de javascript, qwik et des api rest consultez les docs qwik https //qwik builder io/docs/ si vous avez besoin d'un rappel étape 1 – initialisation du projet établir un nouveau projet back4app connectez vous à votre compte back4app cliquez sur “nouvelle application” dans votre tableau de bord entrez le nom du projet basic crud app qwik et suivez les instructions pour créer votre projet créer un nouveau projet votre nouveau projet apparaîtra alors sur votre tableau de bord, formant la base de données pour votre application é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, vous définirez plusieurs collections voici des exemples décrivant les champs et types nécessaires pour vous aider à créer un schéma de base de données efficace pour gérer les opérations crud 1\ collection d'articles cette collection contient des détails pour chaque article champ type de données description id identifiant d'objet clé primaire générée automatiquement titre chaîne nom de l'article description chaîne brèves informations sur l'article créé à date horodatage lorsque l'élément a été créé mis à jour le date horodatage de la dernière mise à jour 2\ collection des utilisateurs cette collection stocke les détails de l'utilisateur et les informations d'authentification champ type de données description id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail unique de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour la connexion créé à date horodatage de création du compte mis à jour le date dernière mise à jour de l'horodatage pour le compte utilisateur vous pouvez ajouter manuellement ces collections via le tableau de bord back4app en créant de nouvelles classes et en configurant chaque colonne selon vos besoins créer une nouvelle classe ajoutez facilement des champs en sélectionnant le type, en fournissant un nom et en configurant les valeurs par défaut et les contraintes créer une colonne exploiter l'agent ai de back4app pour la création de schémas l'agent ai de back4app peut générer automatiquement votre schéma en fonction d'une invite descriptive cette fonctionnalité accélère la configuration du projet et garantit la cohérence comment utiliser l'agent ai accédez à l'agent ai localisez le dans votre tableau de bord back4app ou dans les paramètres de votre projet détaillez votre modèle de données fournissez une invite qui décrit les collections et les champs dont vous avez besoin examinez et mettez en œuvre évaluez les suggestions de schéma générées et appliquez les à 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) cette approche permet de gagner du temps et garantit un schéma bien structuré adapté à votre application é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 pour gérer les données backend sa fonctionnalité intuitive de glisser déposer vous permet d'effectuer facilement des opérations crud comment activer l'application admin accédez au menu “plus” depuis votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant un utilisateur administrateur, ce qui établira automatiquement des rôles et des collections système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos données sans effort tableau de bord de l'application admin effectuer des actions crud via l'application admin ajouter des enregistrements utilisez le bouton “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir/modifier des enregistrements cliquez sur n'importe quel enregistrement pour inspecter ses détails ou effectuer des mises à jour supprimer des enregistrements utilisez la fonction de suppression pour éliminer les entrées obsolètes cet outil rationalise les opérations de données, garantissant une expérience utilisateur fluide étape 4 – connecter qwik avec back4app maintenant que votre backend est configuré, il est temps d'intégrer votre frontend qwik avec back4app option utiliser les api rest ou graphql nous allons utiliser des appels d'api rest pour interagir avec back4app exemple récupérer des articles via rest dans qwik créez un composant qwik (par exemple, src/components/itemslist tsx ) qui récupère et affiche des éléments // src/components/itemslist tsx import { component$, usetask$ } from '@builder io/qwik'; export const itemslist = component$(() => { const items = \[]; usetask$(async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); items push( data results); } catch (error) { console error('error retrieving items ', error); } }); return ( \<div> \<h2>items\</h2> \<ul> {items map((item any) => ( \<li key={item objectid}> {item title} — {item description} \</li> ))} \</ul> \</div> ); }); export default itemslist; ce composant utilise l'api fetch pour appeler le point de terminaison rest de back4app, récupérant la liste des éléments pour d'autres opérations crud (créer, mettre à jour, supprimer), intégrez des appels rest similaires dans vos composants qwik étape 5 – sécuriser votre backend mise en œuvre des listes de contrôle d'accès (acl) améliorez la sécurité de vos données en définissant des acl sur vos objets par exemple, pour restreindre l'accès à un élément spécifique async function createprivateitem(itemdata { title string; description string }, ownerid string) { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, ' ' { read false, write false } } }) }); const result = await response json(); console log('created private item ', result); } catch (error) { console error('error creating private item ', error); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord de back4app, ajustez les clp pour chaque collection afin d'appliquer des politiques d'accès par défaut, garantissant que seuls les utilisateurs autorisés peuvent interagir avec des données sensibles étape 6 – authentification des utilisateurs établissement des comptes utilisateurs back4app utilise la classe utilisateur de parse pour gérer l'authentification dans votre application qwik, implémentez l'inscription et la connexion des utilisateurs comme indiqué ci dessous exemple composant d'inscription dans qwik // src/components/auth tsx import { component$, usestore } from '@builder io/qwik'; export const signup = component$(() => { const store = usestore({ username '', password '', email '' }); const handlesignup = async (e event) => { e preventdefault(); try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'content type' 'application/json', 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, body json stringify({ username store username, password store password, email store email }) }); const data = await response json(); alert('user successfully registered!'); } catch (error any) { alert('registration error ' + error message); } }; return ( \<form onsubmit$={handlesignup}> \<input type="text" placeholder="username" value={store username} oninput$={(e) => (store username = (e target as htmlinputelement) value)} /> \<input type="password" placeholder="password" value={store password} oninput$={(e) => (store password = (e target as htmlinputelement) value)} /> \<input type="email" placeholder="email" value={store email} oninput$={(e) => (store email = (e target as htmlinputelement) value)} /> \<button type="submit">register\</button> \</form> ); }); une approche similaire peut être appliquée à la connexion et à la gestion des sessions des options supplémentaires telles que l'authentification sociale, la vérification par email et la récupération de mot de passe peuvent être configurées via back4app étape 7 – déployer votre frontend qwik via le déploiement web le service de déploiement web de back4app permet un hébergement sans faille de votre frontend qwik en liant votre dépôt github suivez ces étapes pour déployer votre site 7 1 créez votre build de production ouvrez votre dossier de projet dans le terminal exécutez la commande de construction npm run build cela génère un dossier de construction contenant des actifs statiques optimisés confirmez la construction assurez vous que le dossier de construction contient un fichier index html ainsi que les répertoires d'actifs associés 7 2 organisez et engagez votre code sur github votre dépôt doit inclure la source complète de votre frontend qwik une structure typique pourrait être basic crud app qwik frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── root tsx \| ├── entry tsx \| └── components/ \| ├── itemslist tsx \| └── auth tsx \| package json \| readme md exemple src/root tsx // src/root tsx import { component$ } from '@builder io/qwik'; import itemslist from ' /components/itemslist'; export default component$(() => { return ( \<div style={{ padding '2rem' }}> \<h1>crud application\</h1> \<itemslist /> \</div> ); }); engagement de votre code initialisez git (si ce n'est pas déjà fait) git init mettez vos fichiers en scène git add engagez vos modifications git commit m "engagement initial du code frontend qwik" créez un dépôt github par exemple, nommez le basic crud app qwik frontend poussez votre code vers github git remote add origin https //github com/your username/basic crud app qwik frontend git git push u origin main 7 3 connexion de votre dépôt à la déploiement web accédez au déploiement web connectez vous à votre tableau de bord back4app, sélectionnez votre projet (basic crud app qwik), et naviguez vers la section déploiement web liez à github suivez les instructions à l'écran pour connecter votre compte github sélectionnez le dépôt et la branche choisissez votre dépôt (par exemple, basic crud app qwik frontend ) et la branche pertinente (par exemple, main ) 7 4 configuration de déploiement spécifiez des paramètres supplémentaires commande de construction si un dossier de construction pré construit n'est pas inclus, définissez la commande (par exemple, npm run build ) répertoire de sortie définissez le répertoire de sortie comme build variables d'environnement insérez toutes les variables nécessaires comme les clés api 7 5 conteneuriser votre application qwik avec docker (optionnel) si vous optez pour docker, incluez un dockerfile similaire à \# use node for building the app from node 16 alpine as build workdir /app copy package json / run npm install copy run npm run build \# serve the built app with nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] ensuite, sélectionnez l'option docker dans vos paramètres de déploiement web 7 6 déployer votre application cliquez sur le bouton déployer une fois la configuration terminée, appuyez sur déployer regardez la construction back4app va récupérer votre code, le construire et déployer le conteneur recevez votre url après le déploiement, une url sera fournie où votre application est hébergée 7 7 vérifier votre déploiement visitez l'url ouvrez le lien fourni dans votre navigateur testez la fonctionnalité vérifiez que toutes les routes et les ressources se chargent correctement déboguez si nécessaire utilisez les outils de développement du navigateur et les journaux de back4app pour résoudre les problèmes étape 8 – conclusion et améliorations futures bien joué ! vous avez réussi à construire une application crud complète en utilisant qwik et back4app vous avez établi le projet basic crud app qwik , élaboré un schéma de base de données détaillé pour les articles et les utilisateurs, et géré les données avec l'application admin de plus, vous avez connecté votre frontend qwik au backend et appliqué des mesures de sécurité robustes prochaines étapes développez votre frontend améliorez votre application qwik avec des fonctionnalités telles que des vues détaillées des articles, des fonctionnalités de recherche ou des mises à jour en temps réel ajoutez plus de fonctionnalités envisagez d'intégrer une logique backend avancée, des api tierces ou un contrôle d'accès basé sur les rôles explorez des ressources supplémentaires référez vous à la documentation de back4app https //www back4app com/docs et à d'autres tutoriels qwik pour des connaissances approfondies sur les améliorations de performance et les intégrations personnalisées en suivant ce tutoriel, vous possédez maintenant le savoir faire pour créer