Comment créer une application CRUD avec Stencil ? A Comprehensive Tutorial

aperçu dans ce guide, vous apprendrez à construire une application crud de base (créer, lire, mettre à jour et supprimer) en utilisant stenciljs ce tutoriel vous guide à travers la création d'une application web qui exécute des opérations essentielles pour gérer les données efficacement nous commencerons par lancer un projet back4app appelé basic crud app stenciljs , qui servira de backend robuste ensuite, vous concevrez 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 cette étape garantit que votre base de données est adaptée pour prendre en charge toutes les opérations crud de manière fiable ensuite, vous utiliserez l'admin app de back4app, une interface intuitive de glisser déposer, pour gérer vos collections sans effort cet outil sans code simplifie la gestion des actions crud enfin, vous connecterez votre frontend stenciljs à back4app via des api rest/graphql bien que le sdk parse soit disponible, nous nous concentrerons sur les intégrations api qui conviennent parfaitement à stenciljs, garantissant que votre backend reste sécurisé grâce à des contrôles d'accès avancés à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production qui prend en charge les fonctions crud essentielles ainsi que l'authentification des utilisateurs et une gestion robuste des données aperçus essentiels maîtrisez le processus de création d'applications crud avec un système backend fiable comprenez comment concevoir un backend évolutif et le connecter à un frontend stenciljs apprenez à utiliser un outil d'administration sans code (l'application back4app admin) pour des opérations de données efficaces découvrez des stratégies de déploiement, y compris la conteneurisation docker, pour lancer rapidement votre application web prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un projet actif besoin d'aide ? consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app une configuration de développement stenciljs utilisez la documentation officielle de stenciljs https //stenciljs com/docs/introduction pour configurer votre environnement assurez vous que node js (v14 ou version ultérieure) est installé des connaissances de base en javascript, composants web et api rest rafraîchissez vos connaissances sur les concepts de stenciljs https //stenciljs com/docs si nécessaire étape 1 – initiez votre projet lancement d'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 stenciljs et suivez les instructions à l'écran pour compléter la configuration créer un nouveau projet une fois configuré, votre projet sera visible sur le tableau de bord, fournissant une base solide pour votre configuration backend étape 2 – élaboration de votre schéma de base de données définir le modèle de données pour cette application crud, vous devrez configurer plusieurs collections ci dessous se trouvent des collections d'exemple avec leurs champs et types de données pour vous aider à structurer votre base de données pour des opérations crud efficaces 1\ collection articles cette collection contient des détails pour chaque article champ type de données détails 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 description de 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 utilisateurs cette collection gère les profils utilisateurs et l'authentification champ type de données détails 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 unique hash de mot de passe chaîne mot de passe chiffré pour l'authentification 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 ces collections manuellement dans le tableau de bord back4app en créant une nouvelle classe pour chacune et en ajoutant des colonnes avec des types de données appropriés créer une nouvelle classe suivez les instructions pour sélectionner un type de données, spécifier un nom de champ, définir des valeurs par défaut et indiquer 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 est un outil innovant disponible dans votre tableau de bord qui automatise la génération de votre schéma de base de données en fonction d'une simple invite cette fonctionnalité accélère la configuration du projet et garantit que votre schéma est aligné avec les besoins de votre application comment tirer parti de l'agent ai accéder à l'agent ai ouvrez votre tableau de bord back4app et trouvez l'agent ai dans le menu ou sous les paramètres du projet saisir vos exigences de schéma fournissez une invite détaillée décrivant les collections et les champs dont vous avez besoin examiner et confirmer une fois que l'agent ai a traité votre invite, examinez les suggestions de schéma générées et 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 méthode garantit que votre schéma est à la fois cohérent et optimisé étape 3 – activation de l'application admin et des fonctions crud introduction à l'application admin l'application admin de back4app offre une interface sans code qui facilite la gestion des données backend son système intuitif de glisser déposer vous permet d'effectuer toutes les opérations crud créer, lire, mettre à jour et supprimer, avec aisance activation de l'application admin ouvrez le menu “plus” sur 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 processus configure également des rôles par défaut comme b4aadminuser et des collections système activer l'application admin une fois activée, connectez vous à l'application admin pour commencer à gérer vos données tableau de bord de l'application admin gestion des actions crud via l'application admin dans cette interface, vous pouvez ajouter des enregistrements cliquez sur 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 inspecter ou modifier ses champs supprimer des enregistrements utilisez la fonction de suppression pour éliminer les enregistrements obsolètes cet outil simplifié améliore l'expérience utilisateur en simplifiant les tâches de gestion des données étape 4 – lier stenciljs avec back4app avec votre backend configuré et géré via l'application admin, l'étape suivante consiste à connecter votre frontend stenciljs à back4app option a utiliser les api rest ou graphql pour stenciljs, nous nous concentrerons sur les intégrations api pour garder les choses simples exemple récupérer des données via rest // example rest api 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('items retrieved ', data results); } catch (error) { console error('error retrieving items ', error); } }; fetchitems(); intégrez ces appels api dans vos composants stenciljs selon vos besoins option b utilisation du sdk parse (si désiré) si vous préférez utiliser le sdk parse, vous pouvez toujours l'intégrer dans votre projet stenciljs car c'est une bibliothèque javascript cependant, notre exemple ici se concentre sur les appels api étape 5 – renforcer votre backend mise en œuvre des listes de contrôle d'accès (acl) assurez la sécurité des données en définissant des acl sur vos objets par exemple, pour créer un élément privé async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // define acl restrict read/write access to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error creating item ', error); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, définissez des clp pour chaque collection afin de garantir que seuls les utilisateurs autorisés peuvent accéder aux données sensibles étape 6 – gestion de l'authentification des utilisateurs établissement des comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre projet stenciljs, implémentez l'enregistrement et la connexion des utilisateurs comme suit // example component for user signup import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app auth', styleurl 'app auth css', shadow true, }) export class appauth { @state() username string = ''; @state() password string = ''; @state() email string = ''; async handlesignup(event event) { event 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 registered successfully!'); } catch (error) { alert('registration error ' + error message); } } render() { return ( \<form onsubmit={(e) => this handlesignup(e)}> \<input type="text" placeholder="username" value={this username} oninput={(e any) => this username = e target value} /> \<input type="password" placeholder="password" value={this password} oninput={(e any) => this password = e target value} /> \<input type="email" placeholder="email" value={this email} oninput={(e any) => this email = e target value} /> \<button type="submit">register\</button> \</form> ); } } une structure similaire peut être appliquée pour la connexion et la gestion des sessions vous pouvez également activer des fonctionnalités telles que les connexions sociales, la vérification des e mails et les réinitialisations de mot de passe directement depuis le tableau de bord back4app étape 7 – lancement de votre frontend stenciljs avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application stenciljs en déployant le code directement depuis un dépôt github 7 1 construction de votre bundle de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de construction npm run build cela produit un www dossier contenant des ressources statiques optimisées confirmez la construction assurez vous que le www dossier comprend un index html ainsi que les fichiers css, js et images nécessaires 7 2 organisation et téléchargement de votre code source votre dépôt devrait englober tous les fichiers source de votre application stenciljs une structure d'exemple pourrait être basic crud app stenciljs frontend/ ├── node modules/ ├── www/ │ └── index html ├── src/ │ ├── components/ │ │ ├── app auth tsx │ │ └── app items tsx │ ├── global/ │ └── parseconfig ts ├── stencil config ts ├── package json └── readme md fichier source exemple src/parseconfig ts // src/parseconfig ts 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; fichier source exemple src/components/app items tsx import { component, h, state } from '@stencil/core'; import parse from ' /parseconfig'; @component({ tag 'app items', styleurl 'app items css', shadow true, }) export class appitems { @state() items any\[] = \[]; @state() newtitle string = ''; @state() newdescription string = ''; @state() editingid string | null = null; @state() editingtitle string = ''; @state() editingdescription string = ''; async componentwillload() { await 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('error fetching 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); } } async deleteitem(id string) { try { const item = await parse object createwithoutdata("items", id); await item destroy(); this loaditems(); } catch (error) { console error('error deleting item ', error); } } startedit(item any) { this editingid = item id; this editingtitle = item get("title"); this editingdescription = item get("description"); } async updateitem() { try { const items = parse object extend("items"); const item = new items(); item id = this editingid!; item set("title", this editingtitle); item set("description", this editingdescription); await item save(); this editingid = null; this editingtitle = ''; this editingdescription = ''; this loaditems(); } catch (error) { console error('error updating item ', error); } } render() { return ( \<div style={{ padding '2rem' }}> \<h1>items\</h1> \<div> \<h2>add new item\</h2> \<input type="text" placeholder="title" value={this newtitle} oninput={(e any) => this newtitle = e target value} /> \<input type="text" placeholder="description" value={this newdescription} oninput={(e any) => this newdescription = e target value} /> \<button onclick={() => this additem()}>add item\</button> \</div> \<ul> {this items map(item => \<li key={item id}> {this editingid === item id ? ( \<div> \<input type="text" value={this editingtitle} oninput={(e any) => this editingtitle = e target value} /> \<input type="text" value={this editingdescription} oninput={(e any) => this editingdescription = e target value} /> \<button onclick={() => this updateitem()}>save\</button> \<button onclick={() => this editingid = null}>cancel\</button> \</div> ) ( \<div> \<strong>{item get("title")}\</strong> {item get("description")} \<button onclick={() => this startedit(item)}>edit\</button> \<button onclick={() => this deleteitem(item id)}>delete\</button> \</div> )} \</li> )} \</ul> \</div> ); } } engager votre code sur github initialiser un dépôt git dans votre répertoire de projet (si ce n'est pas déjà fait) git init mettez vos fichiers en attente git add validez vos modifications git commit m "validation initiale du code frontend stenciljs" créez un nouveau dépôt github nommez le quelque chose comme basic crud app stenciljs frontend poussez votre code sur github git remote add origin https //github com/votre nom utilisateur/basic crud app stenciljs frontend git git push u origin main 7 3 connexion de votre dépôt via le déploiement web accéder au déploiement web connectez vous à votre tableau de bord back4app, sélectionnez votre projet ( basic crud app stenciljs ), et cliquez sur la section déploiement web intégrer github connectez votre compte github en suivant les instructions fournies cela permettra à back4app d'accéder à votre dépôt sélectionner le dépôt et la branche choisissez votre dépôt (par exemple, basic crud app stenciljs frontend ) et choisissez la branche appropriée (par exemple, main ) 7 4 configuration de votre déploiement entrez des détails supplémentaires sur le déploiement commande de construction si votre dépôt n'inclut pas de www pré construit, spécifiez une commande de construction (par exemple, npm run build ) back4app exécutera cela lors du déploiement répertoire de sortie définissez le répertoire de sortie sur www afin que back4app sache où localiser vos fichiers statiques variables d'environnement ajoutez toutes les variables d'environnement requises (par exemple, les clés api) dans les paramètres de déploiement 7 5 conteneuriser votre projet stenciljs avec docker si vous privilégiez docker pour le déploiement, incluez un dockerfile dans votre dépôt similaire à \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files copy package json / \# install dependencies run npm install \# copy source code copy \# build the app run npm run build \# use nginx to serve the app from nginx\ stable alpine copy from=build /app/www /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] incluez ce fichier dans votre dépôt et choisissez le déploiement docker dans back4app 7 6 déployer votre application initier le déploiement cliquez sur le déployer bouton après avoir configuré vos paramètres regarder le processus de construction back4app récupérera votre code depuis github, exécutera la commande de construction (si définie) et déploiera votre application conteneurisée accéder à votre application une fois déployée, back4app fournira une url où votre application stenciljs est en ligne 7 7 valider votre déploiement visitez l'url ouvrez l'url fournie dans votre navigateur web tester la fonctionnalité assurez vous que l'application se charge correctement, que les routes fonctionnent correctement et que tous les actifs (css, js, images) sont servis sans problèmes déboguer si nécessaire utilisez les outils de développement du navigateur pour inspecter les erreurs vérifiez les journaux de back4app et vérifiez les configurations de github et de construction si des problèmes surviennent étape 8 – résumé et directions futures bien joué ! vous avez réussi à construire une application crud complète en utilisant stenciljs et back4app vous avez mis en place un projet intitulé basic crud app stenciljs , conçu des collections pour les articles et les utilisateurs, et géré les données avec l'admin app de plus, vous avez connecté votre frontend stenciljs à votre backend et mis en œuvre des mesures de sécurité robustes prochaines étapes améliorez le frontend envisagez d'élargir votre application stenciljs avec des fonctionnalités avancées telles que des vues détaillées des articles, des capacités de recherche et des notifications en temps réel ajoutez plus de fonctionnalités intégrez une logique backend complexe (par exemple, des fonctions cloud), des intégrations d'api tierces, ou mettez en œuvre des permissions basées sur les rôles approfondissez vos connaissances explorez la documentation de back4app https //www back4app com/docs et d'autres tutoriels pour des informations supplémentaires sur l'optimisation des performances et les intégrations personnalisées en suivant ce tutoriel, vous avez acquis les compétences nécessaires pour créer un robuste