Comment créer une application CRUD avec Preact ?

aperçu dans ce guide, vous développerez une application crud (créer, lire, mettre à jour et supprimer) en utilisant preact nous vous guiderons à travers la création d'un système qui gère les opérations de données de base, depuis l'initialisation d'un projet back4app nommé basic crud app preact jusqu'à la gestion des données sans effort ce projet fournit un backend robuste et un frontend élégant et minimal construit avec preact nous commencerons par configurer un nouveau projet sur back4app, puis créerons un schéma de base de données efficace—soit manuellement, soit avec l'aide de l'assistant ai de back4app ce design prendra en charge toutes les fonctionnalités crud essentielles ensuite, nous introduisons l'application admin de back4app, une interface de glisser déposer qui simplifie la gestion des données vous pouvez rapidement ajouter, modifier ou supprimer des enregistrements en utilisant cet outil enfin, vous connecterez votre frontend preact à back4app en utilisant rest/graphql, garantissant que votre backend est sécurisé avec des règles d'accès avancées à la fin de ce tutoriel, vous aurez une application web prête pour la production avec authentification des utilisateurs et gestion robuste des données—le tout construit avec preact et alimenté par back4app principales informations maîtrisez la construction d'applications crud qui gèrent efficacement les données en utilisant un backend fiable apprenez à concevoir un modèle de données évolutif et à l'intégrer avec un frontend preact pour une expérience utilisateur optimale découvrez comment l'application admin de back4app simplifie les opérations de création, de lecture, de mise à jour et de suppression comprenez les stratégies de déploiement, y compris la conteneurisation avec docker, pour lancer rapidement votre application conditions préalables avant de commencer, veuillez vous assurer que vous avez un compte back4app et un projet initialisé pour des conseils, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement preact utilisez des outils comme preact cli https //github com/preactjs/preact cli ou équivalent, en vous assurant que node js (v14 ou version ultérieure) est installé des connaissances de base en javascript, preact et rest apis référez vous à la documentation preact https //preactjs com/guide/v10/ si nécessaire étape 1 – configuration de votre projet initialisation d'un projet back4app connectez vous à votre compte back4app sélectionnez l'option “nouvelle application” sur votre tableau de bord nommez votre projet basic crud app preact et suivez les instructions de configuration créer un nouveau projet après la création, votre projet sera visible sur votre tableau de bord back4app, posant les bases de la configuration du backend étape 2 – élaboration de votre schéma de base de données structuration de votre modèle de données pour notre application crud, vous aurez besoin de plusieurs collections ci dessous, des exemples qui décrivent les collections et les champs essentiels pour soutenir les opérations crud 1 collection d'articles cette collection conserve des détails sur chaque article champ type de données but id identifiant d'objet clé primaire générée automatiquement titre chaîne le nom de l'élément description chaîne une brève description de l'article créé à date l'horodatage de création mis à jour le date dernière mise à jour 2 collection des utilisateurs cela contient les informations d'identification et les détails du profil de l'utilisateur champ type de données but id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne nom d'utilisateur unique email chaîne adresse e mail unique hash de mot de passe chaîne mot de passe haché pour l'authentification créé à date horodatage de création du compte mis à jour le date dernière mise à jour du compte vous pouvez créer ces collections manuellement via le tableau de bord back4app en ajoutant une nouvelle classe pour chaque collection et en définissant les champs appropriés créer une nouvelle classe vous pouvez ajouter des colonnes en sélectionnant un type de données, en nommant la colonne et en définissant des valeurs par défaut et des indicateurs requis créer une colonne utiliser l'assistant ai de back4app pour la création de schémas l'assistant ia disponible dans back4app peut générer automatiquement votre schéma en fonction d'une invite décrivant vos collections et champs cette fonctionnalité accélère la configuration et garantit la cohérence étapes pour utiliser l'assistant ia ouvrez l'assistant ia depuis votre tableau de bord back4app entrez une description détaillée de votre modèle de données examinez les collections et définitions de champs générées automatiquement, puis appliquez les à votre projet 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 approche permet de gagner du temps et garantit un schéma bien structuré étape 3 – activation de l'application admin et gestion des opérations crud présentation de l'application admin l'application admin de back4app fournit une interface sans code pour gérer vos données backend sans effort sa fonctionnalité de glisser déposer vous permet d'effectuer des opérations crud sans tracas activation de l'application admin allez dans le menu “plus” de votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez votre premier utilisateur admin, qui configurera également des rôles comme b4aadminuser et des collections système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos données tableau de bord de l'application admin effectuer des actions crud avec l'application admin dans l'interface, vous pouvez ajouter des enregistrements utilisez l'option “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour créer de nouvelles entrées voir et modifier des enregistrements sélectionnez un enregistrement pour voir ses détails ou modifier ses champs supprimer des enregistrements supprimez les entrées qui ne sont plus nécessaires cet outil intuitif améliore l'expérience utilisateur en rationalisant la gestion des données étape 4 – connecter votre frontend preact à back4app avec le backend en place, il est temps d'intégrer votre frontend preact option a utiliser le sdk parse installer le sdk parse npm install parse configurez parse dans votre projet preact créez un fichier (par exemple, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; intégrez parse dans un composant preact par exemple, construisez un composant pour récupérer et afficher des éléments // src/components/itemslist js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; const itemslist = () => { const \[items, setitems] = usestate(\[]); useeffect(() => { const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; fetchitems(); }, \[]); return ( \<div> \<h2>items\</h2> \<ul> {items map(item => ( \<li key={item id}> {item get("title")} — {item get("description")} \</li> ))} \</ul> \</div> ); }; export default itemslist; option b tirer parti de rest ou graphql si le sdk parse n'est pas viable, utilisez rest ou graphql pour les opérations crud par exemple, pour récupérer des éléments via rest // sample rest call to retrieve items const fetchitems = 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); intégrez ces appels d'api dans vos composants preact selon vos besoins étape 5 – amélioration de la sécurité du backend utilisation des listes de contrôle d'accès (acl) sécurisez vos données en attribuant des acl à vos objets par exemple, pour créer un élément privé async function createprivateitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl only the owner has read/write access const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('private item created ', saveditem); } catch (error) { console error('error saving item ', error); } } permissions au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de restreindre l'accès aux utilisateurs authentifiés ou autorisés uniquement étape 6 – mise en œuvre de l'authentification des utilisateurs configuration des comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre application preact, gérez l'inscription et la connexion des utilisateurs comme suit // src/components/auth js import { h } from 'preact'; import { usestate } from 'preact/hooks'; import parse from ' /parseconfig'; export const signup = () => { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const handlesignup = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={e => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={e => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={e => setemail(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; une méthode similaire peut être utilisée pour la connexion et la gestion des sessions des fonctionnalités supplémentaires comme l'authentification sociale et la récupération de mot de passe peuvent être configurées via le tableau de bord back4app étape 7 – lancement de votre frontend preact avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application preact en liant un dépôt github dans cette partie, vous préparerez votre build de production, engagerez votre code, intégrerez avec le déploiement web et déploierez votre site 7 1 créez vos fichiers de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction npm run build cela génère un build dossier avec des ressources statiques optimisées (html, js, css, images) 3\ confirmez que le build dossier contient un index html fichier et les ressources nécessaires 7 2 organisez et validez votre code source votre dépôt doit contenir le code source complet du frontend preact une structure de répertoire d'exemple basic crud app preact frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md fichiers d'exemple src/parseconfig js // src/parseconfig js import parse from 'parse'; // enter your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js // src/app js import { h } from 'preact'; import { useeffect, usestate } from 'preact/hooks'; import parse from ' /parseconfig'; function app() { const \[items, setitems] = usestate(\[]); const \[newitemtitle, setnewitemtitle] = usestate(""); const \[newitemdescription, setnewitemdescription] = usestate(""); const \[editingitemid, seteditingitemid] = usestate(null); const \[editingtitle, seteditingtitle] = usestate(""); const \[editingdescription, seteditingdescription] = usestate(""); const fetchitems = async () => { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error("error fetching items ", error); } }; useeffect(() => { fetchitems(); }, \[]); const handleadditem = async () => { const items = parse object extend("items"); const item = new items(); item set("title", newitemtitle); item set("description", newitemdescription); try { await item save(); setnewitemtitle(""); setnewitemdescription(""); fetchitems(); } catch (error) { console error("error saving item ", error); } }; const handledeleteitem = async (id) => { try { const item = await parse object createwithoutdata("items", id); await item destroy(); fetchitems(); } catch (error) { console error("error deleting item ", error); } }; const starteditingitem = (item) => { seteditingitemid(item id); seteditingtitle(item get("title")); seteditingdescription(item get("description")); }; const handleupdateitem = async () => { try { const items = parse object extend("items"); const item = new items(); item id = editingitemid; item set("title", editingtitle); item set("description", editingdescription); await item save(); seteditingitemid(null); seteditingtitle(""); seteditingdescription(""); fetchitems(); } catch (error) { console error("error updating item ", error); } }; return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div style={{ marginbottom '1rem' }}> \<h2>add item\</h2> \<input type="text" placeholder="title" value={newitemtitle} onchange={(e) => setnewitemtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" placeholder="description" value={newitemdescription} onchange={(e) => setnewitemdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleadditem}>add item\</button> \</div> \<h2>item list\</h2> \<ul> {items map((item) => ( \<li key={item id} style={{ marginbottom '1rem' }}> {editingitemid === item id ? ( \<div> \<input type="text" value={editingtitle} onchange={(e) => seteditingtitle(e target value)} style={{ marginright '0 5rem' }} /> \<input type="text" value={editingdescription} onchange={(e) => seteditingdescription(e target value)} style={{ marginright '0 5rem' }} /> \<button onclick={handleupdateitem}>save\</button> \<button onclick={() => seteditingitemid(null)} style={{ marginleft '0 5rem' }}> cancel \</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => starteditingitem(item)} style={{ marginleft '1rem' }}> edit \</button> \<button onclick={() => handledeleteitem(item id)} style={{ marginleft '0 5rem' }}> delete \</button> \</div> )} \</li> ))} \</ul> \</div> ); } export default app; engager votre code sur github initialiser un dépôt git (si ce n'est pas déjà fait) git init préparez vos fichiers sources git add engagez vos modifications git commit m "initial commit of preact frontend source code" créez un nouveau dépôt github, par exemple, basic crud app preact frontend poussez votre code git remote add origin https //github com/your username/basic crud app preact frontend git git push u origin main 7 3 connecter votre dépôt avec le déploiement web allez à la section déploiement web dans votre tableau de bord back4app, ouvrez votre projet ( basic crud app preact ), et sélectionnez déploiement web liez votre compte github comme demandé, afin que back4app puisse accéder à votre dépôt sélectionnez le dépôt (par exemple, basic crud app preact frontend ) et choisissez la branche appropriée (par exemple, main ) 7 4 configuration du déploiement spécifiez des paramètres supplémentaires commande de construction si un dossier build pré construit est absent, définissez la commande de construction (par exemple, npm run build ) back4app exécutera cette commande lors du déploiement répertoire de sortie définissez le dossier de sortie comme build afin que back4app identifie les fichiers statiques variables d'environnement ajoutez toutes les clés api ou paramètres nécessaires requis par votre application 7 5 conteneuriser votre application preact avec docker si vous préférez docker, incluez un dockerfile dans votre dépôt similaire à # use an official node image for building from node 16 alpine as build \# set working directory workdir /app \# copy package files copy package json / \# install dependencies run npm install \# copy the source code copy \# build the app run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] sélectionnez l'option de déploiement docker dans vos paramètres de déploiement web back4app 7 6 déployer votre application cliquez sur le déployer bouton une fois la configuration terminée surveillez le processus de construction pendant que back4app récupère votre code, construit et déploie votre application une fois terminé, back4app fournira une url où votre application est hébergée 7 7 vérifier votre déploiement visitez l'url fournie pour voir votre site en direct testez toutes les fonctionnalités pour vous assurer que chaque fonctionnalité, y compris les routes et les ressources, se charge correctement si des problèmes surviennent, consultez les journaux de la console du navigateur et les journaux de déploiement dans back4app étape 8 – conclusion et orientations futures excellent travail ! vous avez réussi à développer une application crud complète en utilisant preact et back4app vous avez configuré un projet nommé basic crud app preact , défini des collections de base de données robustes et utilisé l'application admin pour une gestion efficace des données vous avez ensuite connecté votre frontend preact à votre backend et mis en œuvre des contrôles d'accès stricts quelles sont les prochaines étapes ? améliorez votre application preact avec des fonctionnalités supplémentaires telles que des vues détaillées, des capacités de recherche et des mises à jour en temps réel incorporez une logique backend plus avancée comme des fonctions cloud ou des intégrations d'api tierces consultez la documentation de back4app https //www back4app com/docs et d'autres ressources pour des informations plus approfondies sur l'optimisation et les configurations personnalisées en suivant ce tutoriel, vous avez acquis les compétences nécessaires pour construire un backend crud évolutif et sécurisé pour vos applications preact en utilisant back4app amusez vous à coder et à explorer de nouvelles fonctionnalités !