Building a Basic CRUD Application with Lit?

aperçu dans ce guide, vous allez créer une application crud (créer, lire, mettre à jour, supprimer) entièrement fonctionnelle en utilisant lit nous allons démontrer comment gérer les données de manière dynamique en construisant une application qui effectue ces opérations essentielles au départ, vous allez configurer un projet back4app appelé basic crud app lit qui servira de backend robuste après avoir établi votre projet, vous concevrez un schéma de base de données flexible en définissant des collections et des champs, soit manuellement, soit avec l'aide de l'agent ia de back4app cette étape est cruciale pour garantir que votre système gère de manière fiable les opérations crud ensuite, vous utiliserez l'application admin de back4app—une interface conviviale par glisser déposer—pour gérer vos collections de manière efficace enfin, vous intégrerez votre frontend lit avec back4app en utilisant rest/graphql, en veillant à ce que votre backend reste sécurisé avec des contrôles d'accès appropriés à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production qui non seulement effectue des fonctions crud de base, mais inclut également l'authentification des utilisateurs et la gestion sécurisée des données points clés maîtrisez le développement d'applications crud qui gèrent efficacement les données avec un backend fiable apprenez à concevoir une base de données évolutive et à l'intégrer sans effort avec un frontend basé sur lit utilisez un outil d'administration par glisser déposer (l'application back4app admin) pour simplifier les opérations crud comprenez les stratégies de déploiement, y compris la conteneurisation avec docker, pour lancer votre application web efficacement prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet pour assistance, voir commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement lit configurez votre projet en utilisant votre kit de démarrage préféré et assurez vous que node js (v14 ou version ultérieure) est installé connaissances de base en javascript, lit et rest apis consultez la documentation lit https //lit dev/docs/ si nécessaire étape 1 – initialiser votre projet établir un nouveau projet back4app connectez vous à votre compte back4app sélectionnez l'option “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app lit et suivez les instructions pour le créer créer un nouveau projet une fois votre projet créé, il apparaîtra sur le tableau de bord, vous fournissant la base pour la configuration du backend et la gestion du projet étape 2 – élaboration de votre schéma de base de données construction de votre modèle de données pour cette application crud, vous définirez plusieurs collections ci dessous se trouvent des collections d'exemple avec des champs et des types de données suggérés, qui vous aideront à mettre en place un schéma efficace capable de gérer les opérations crud 1\ collection d'articles champ type de données détails 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 modification de l'élément 2\ collection des utilisateurs champ type de données détails 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 haché pour une authentification 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 ajouter ces collections manuellement via le tableau de bord back4app en créant de nouvelles classes et en définissant les colonnes appropriées créer une nouvelle classe pour chaque champ, choisissez simplement un type de données, attribuez un nom, définissez une valeur par défaut si nécessaire et spécifiez s'il est obligatoire créer une colonne utiliser l'agent ai de back4app pour la création de schémas l'agent ai de back4app, disponible depuis votre tableau de bord, peut générer automatiquement votre schéma basé sur une invite descriptive cette fonctionnalité simplifie la gestion de projet en garantissant la cohérence de votre configuration backend comment utiliser l'agent ai lancez l'agent ai accédez à l'agent ai depuis votre tableau de bord back4app ou dans les paramètres du projet détaillez votre modèle de données collez une invite complète décrivant les collections et les champs dont vous avez besoin examinez et appliquez inspectez les suggestions générées et confirmez les pour mettre à jour votre projet exemple d'invite create the following collections in my back4app application 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) utiliser cette fonctionnalité d'ia permet de gagner un temps précieux tout en garantissant que votre base de données est structurée de manière optimale étape 3 – activation de l'application admin et des fonctionnalités crud introduction à l'application admin l'application admin de back4app offre une interface sans code pour une gestion des données backend sans effort sa fonctionnalité intuitive de glisser déposer vous permet d'exécuter des opérations crud—créer, lire, mettre à jour et supprimer des enregistrements—avec facilité comment activer l'application admin accédez à la section “plus” sur votre tableau de bord back4app sélectionnez “application admin” et cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant un utilisateur admin initial, qui configurera les rôles (comme b4aadminuser ) et les collections 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 effectuer des opérations crud via l'application admin dans l'application admin, vous pouvez créer des entrées cliquez sur le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour générer de nouvelles entrées lire/modifier des enregistrements cliquez sur un enregistrement pour inspecter ses détails ou modifier ses champs supprimer des enregistrements utilisez la fonction de suppression pour éliminer les entrées qui ne sont plus nécessaires cette interface simple améliore considérablement l'expérience utilisateur en rationalisant la gestion des données étape 4 – connecter lit avec back4app maintenant que votre backend est configuré et géré, il est temps d'intégrer votre frontend lit avec back4app option a utiliser le sdk parse (le cas échéant) installer le sdk parse npm install parse configurer parse dans votre application lit créer un fichier de configuration (par exemple, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insérez vos identifiants back4app ici parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; implémenter parse dans un composant lit créer un composant lit qui récupère et affiche des éléments // src/components/itemslist js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class itemslist extends litelement { static properties = { items { type array } }; constructor() { super(); this items = \[]; } connectedcallback() { super connectedcallback(); this fetchitems(); } async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("erreur lors de la récupération des éléments ", error); } } render() { return html` \<h2>éléments\</h2> \<ul> ${this items map( (item) => html` \<li>${item get("title")} — ${item get("description")}\</li> ` )} \</ul> `; } } customelements define('items list', itemslist); export default itemslist; option b utiliser rest ou graphql si le sdk parse n'est pas adapté à votre projet, effectuez des opérations crud en utilisant rest ou graphql par exemple, pour récupérer des éléments via rest // example rest request to get 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('items retrieved ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); intégrez ces appels d'api dans vos composants lit selon vos besoins étape 5 – protéger votre backend mise en œuvre des listes de contrôle d'accès (acl) sécurisez vos objets en définissant des acl 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); // set acl so only the owner has 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); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin d'appliquer les règles d'accès par défaut cela garantit que seuls les utilisateurs authentifiés ou autorisés peuvent accéder à des informations sensibles étape 6 – mise en œuvre de l'authentification des utilisateurs création de comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre application lit, implémentez l'enregistrement et la connexion des utilisateurs comme démontré ci dessous // src/components/auth js import { litelement, html, css } from 'lit'; import parse from ' /parseconfig'; class signupform extends litelement { static properties = { username { type string }, password { type string }, email { type string } }; constructor() { super(); this username = ''; this password = ''; this email = ''; } async handlesignup(e) { e preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('user registration successful!'); } catch (error) { alert('registration error ' + error message); } } render() { return html` \<form @submit="${this handlesignup}"> \<input type="text" placeholder="username" value="${this username}" @input="${e => this username = e target value}" /> \<input type="password" placeholder="password" value="${this password}" @input="${e => this password = e target value}" /> \<input type="email" placeholder="email" value="${this email}" @input="${e => this email = e target value}" /> \<button type="submit">register\</button> \</form> `; } } customelements define('sign up form', signupform); export default signupform; vous pouvez également implémenter la connexion et la gestion des sessions de manière similaire des fonctionnalités supplémentaires telles que l'authentification sociale, la vérification par e mail et la réinitialisation des mots de passe peuvent être configurées via le tableau de bord back4app étape 7 – déployer votre frontend lit via le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application lit en déployant le code depuis un dépôt github suivez ces étapes pour préparer votre build de production, pousser votre code sur github et déployer votre site 7 1 création de votre build de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de build npm run build cela créera un dossier build contenant des ressources statiques optimisées vérifiez le build confirmez que le dossier build contient un fichier index html ainsi que les sous répertoires nécessaires 7 2 organisation et téléchargement de votre code votre dépôt github doit contenir l'intégralité du code source de votre frontend lit une structure de projet typique pourrait ressembler à basic crud app lit frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── app js │ ├── parseconfig js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md exemple de fichier de configuration src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemple de fichier d'application principale src/app js import { litelement, html } from 'lit'; import parse from ' /parseconfig'; class approot extends litelement { static properties = { items { type array }, newtitle { type string }, newdescription { type string } }; constructor() { super(); this items = \[]; this newtitle = ''; this newdescription = ''; } connectedcallback() { super connectedcallback(); this loaditems(); } async loaditems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; } catch (error) { console error("failed to load items ", error); } } async additem() { const items = parse object extend("items"); const item = new items(); item set("title", this newtitle); item set("description", this newdescription); try { await item save(); this newtitle = ''; this newdescription = ''; this loaditems(); } catch (error) { console error("error adding item ", error); } } render() { return html` \<div style="padding 2rem;"> \<h1>items\</h1> \<div> \<input type="text" placeholder="title" value="${this newtitle}" @input="${e => this newtitle = e target value}" /> \<input type="text" placeholder="description" value="${this newdescription}" @input="${e => this newdescription = e target value}" /> \<button @click="${this additem}">add item\</button> \</div> \<ul> ${this items map(item => html` \<li> \<strong>${item get("title")}\</strong> ${item get("description")} \</li> `)} \</ul> \</div> `; } } customelements define('app root', approot); export default approot; pousser du code vers github initialisez git dans votre répertoire de projet git init ajoutez tous vos fichiers git add engagez vos modifications git commit m "engagement initial du frontend lit" créez un nouveau dépôt sur github (par exemple, basic crud app lit frontend ) poussez votre code git remote add origin https //github com/votre nom utilisateur/basic crud app lit frontend git git push u origin main 7 3 connexion de votre dépôt github avec le déploiement web back4app accéder au déploiement web connectez vous à votre tableau de bord back4app, choisissez votre projet (basic crud app lit), et sélectionnez l' option déploiement web lier votre compte github suivez les instructions pour connecter votre compte github, permettant à back4app d'accéder à votre dépôt choisissez votre dépôt et votre branche sélectionnez le dépôt (par exemple, basic crud app lit frontend ) et la branche (par exemple, main ) contenant votre code lit 7 4 configuration des paramètres de déploiement spécifiez vos paramètres de construction commande de construction si un dossier de construction pré construit est manquant, utilisez une commande comme npm run build back4app exécutera cette commande lors du déploiement répertoire de sortie définissez ceci sur build afin que back4app puisse localiser vos fichiers statiques variables d'environnement incluez toutes les clés api nécessaires ou d'autres valeurs spécifiques à l'environnement 7 5 conteneuriser votre application lit avec docker si vous préférez docker, incluez un dockerfile dans votre dépôt \# use a lightweight node image for building the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining source code and build the app copy 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;"] dans vos paramètres de déploiement back4app, choisissez l'option de déploiement docker pour conteneuriser votre application 7 6 lancement de votre application initier le déploiement cliquez sur le déployer bouton après avoir finalisé vos paramètres surveiller le processus back4app récupérera votre code github, exécutera la commande de construction et déploiera votre conteneur obtenez votre url en direct une fois le déploiement terminé, une url sera fournie où votre application lit est hébergée 7 7 validation de votre déploiement visitez l'url ouvrez le lien fourni dans votre navigateur tester la fonctionnalité assurez vous que l'application se charge correctement, que la navigation fonctionne et que tous les actifs sont correctement servis déboguer si nécessaire utilisez les outils de développement du navigateur pour inspecter les problèmes si des problèmes surviennent, consultez les journaux de déploiement dans back4app étape 8 – réflexions finales et améliorations futures excellent travail ! vous avez réussi à développer une application crud de base en utilisant lit et back4app vous avez configuré un projet appelé basic crud app lit , défini un schéma de base de données détaillé pour les éléments et les utilisateurs, et géré vos données avec l'application admin de plus, vous avez intégré votre frontend lit avec le backend et mis en œuvre des mesures de sécurité robustes prochaines étapes améliorez votre frontend ajoutez des fonctionnalités comme des pages d'éléments détaillées, une fonctionnalité de recherche et des mises à jour en temps réel élargissez les capacités du backend intégrez des fonctionnalités avancées telles que des fonctions cloud, des services api externes ou des contrôles d'accès basés sur les rôles explorez plus de ressources visitez la documentation de back4app https //www back4app com/docs et d'autres tutoriels pour des informations plus approfondies sur les performances et la personnalisation en suivant ce guide, vous possédez désormais les compétences nécessaires pour créer un backend crud évolutif et sécurisé pour votre application lit en utilisant back4app amusez vous à coder et continuez à innover !