Comment créer une application CRUD de base avec Riot.js : Un guide étape par étape

aperçu dans ce guide, vous apprendrez à créer une application crud (créer, lire, mettre à jour et supprimer) en utilisant riot js nous allons passer en revue la configuration d'un projet back4app—nommé basic crud app riotjs —pour servir de backend, puis l'intégrer avec un frontend riot js ce tutoriel couvre tout, de la conception de votre schéma de base de données et de la gestion des données avec l'application d'administration back4app à l'intégration de votre frontend en utilisant soit le sdk (si applicable) soit des appels api rest/graphql à la fin, vous aurez une application web entièrement opérationnelle et prête pour la production, avec authentification des utilisateurs et gestion sécurisée des données principaux avantages maîtriser les opérations crud en utilisant un système backend évolutif obtenez des informations sur l'intégration d'un frontend riot js avec back4app utilisez l'application d'administration intuitive de back4app pour une gestion des données sans effort apprenez des stratégies de déploiement, y compris la conteneurisation docker conditions préalables avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app pour des conseils une configuration de développement pour riot js vous pouvez utiliser le cli de riot ou inclure riot via une balise script assurez vous que node js (v14 ou version ultérieure) est installé des connaissances de base en javascript, riot js et rest apis si nécessaire, consultez la documentation de riot js https //riot js org/ pour des informations supplémentaires étape 1 – initialisation du projet création d'un projet back4app connectez vous à votre compte back4app cliquez sur “nouvelle application” sur votre tableau de bord nommez votre projet basic crud app riotjs et suivez les instructions de configuration créer un nouveau projet votre projet apparaîtra maintenant sur votre tableau de bord back4app, servant de colonne vertébrale pour les données de votre application étape 2 – conception de votre schéma de base de données création de votre modèle de données pour notre application crud, vous définirez plusieurs collections ci dessous, des collections et des champs d'exemple pour vous aider à structurer votre base de données pour des opérations crud efficaces 1\ collection d'articles cette collection contient des détails sur chaque article champ type description id identifiant d'objet identifiant unique généré automatiquement titre chaîne titre de l'article description chaîne brève description de l'article créé à date horodatage lorsque l'élément a été ajouté mis à jour le date horodatage lorsque l'élément a été modifié 2\ collection des utilisateurs cette collection contient des détails sur les utilisateurs et des informations d'authentification champ type description id identifiant d'objet identifiant unique généré 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 crypté créé à date horodatage de création du compte mis à jour le date dernière mise à jour du compte vous pouvez configurer ces collections manuellement sur le tableau de bord back4app en créant de nouvelles classes et en définissant des colonnes créer une nouvelle classe vous pouvez ajouter des champs en sélectionnant un type de données, en attribuant un nom, en définissant des valeurs par défaut et en marquant si le champ est obligatoire créer une colonne exploiter l'agent ai de back4app pour la création de schémas l'agent ai de back4app, accessible depuis votre tableau de bord, peut générer automatiquement votre schéma en traitant un prompt détaillé décrivant vos collections et champs requis utiliser l'agent ai ouvrir l'agent ai trouvez le dans les paramètres de votre projet ou dans le menu saisir votre modèle de données collez un prompt décrivant vos collections et leurs champs réviser et confirmer validez le schéma généré et appliquez le à votre projet exemple de prompt 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) cet outil accélère le processus et garantit une configuration de schéma cohérente étape 3 – activation de l'application admin & actions crud aperçu de l'application admin l'application admin de back4app offre une interface sans code, par glisser déposer pour une gestion facile du backend, vous permettant d'exécuter rapidement des opérations crud activation de l'application admin ouvrez le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez votre compte admin en créant l'utilisateur admin initial, ce qui établit également les rôles par défaut activer l'application admin une fois activé, connectez vous à l'application admin pour gérer vos données de backend tableau de bord de l'application admin effectuer des opérations crud via l'application admin dans cette interface, vous pouvez ajouter des enregistrements utilisez le bouton “ajouter un enregistrement” dans une collection (par exemple, articles) pour créer de nouvelles entrées modifier des enregistrements cliquez sur n'importe quel enregistrement pour voir et modifier ses détails supprimer des enregistrements supprimez tout enregistrement qui n'est plus nécessaire cet outil rationalise votre flux de travail en offrant une interface simple pour gérer les données étape 4 – connecter riot js avec back4app maintenant que votre backend est configuré, il est temps de connecter votre frontend riot js à back4app option a utiliser le sdk parse installer le sdk parse npm install parse initialiser parse dans votre projet riot js créer un fichier (par exemple, src/parseconfig js ) // src/parseconfig js import parse from 'parse'; // insert your actual back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; utiliser parse dans un tag riot créer un tag riot (par exemple, items riot ) pour récupérer et afficher des éléments items { item get("title") } — { item get("description") } option b utilisation des api rest ou graphql si le sdk parse n'est pas adapté, exécutez des opérations crud via des appels api par exemple, pour récupérer des éléments en utilisant rest // rest api example to get items async function fetchitems() { 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 api dans vos balises riot js selon vos besoins étape 5 – protéger votre backend configuration des listes de contrôle d'accès (acl) sécurisez vos données en définissant des acl sur 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); // define 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); } } ajustement des autorisations au niveau de la classe (clp) dans votre tableau de bord back4app, configurez les clp pour chaque collection afin de garantir que seuls les utilisateurs authentifiés ou autorisés accèdent aux données sensibles étape 6 – authentification des utilisateurs configuration des comptes utilisateurs les applications riot js peuvent gérer l'inscription et la connexion des utilisateurs en utilisant la classe parse user intégrée de back4app voici un exemple de balise riot pour l'inscription des utilisateurs sign up une stratégie similaire peut être appliquée pour la connexion et la gestion des sessions des fonctionnalités supplémentaires comme la connexion sociale, la vérification par email ou la récupération de mot de passe peuvent être configurées dans votre tableau de bord back4app étape 7 – déployer votre frontend riot js la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application riot js en liant votre dépôt github suivez ces étapes pour déployer votre build de production 7 1 construire vos fichiers de production ouvrez votre répertoire de projet dans un terminal exécutez votre commande de build npm run build cela crée un build dossier avec des fichiers statiques optimisés (html, js, css, images) confirmez le build vérifiez que le build dossier comprend un index html et les répertoires d'actifs requis 7 2 organisez et poussez votre code sur github votre dépôt doit contenir la source complète du frontend riot js une structure typique pourrait être basic crud app riotjs frontend/ \| node modules/ \| public/ \| └── index html \| src/ \| ├── app riot \| ├── parseconfig js \| └── tags/ \| ├── items riot \| └── auth riot \| package json \| readme md exemple src/parseconfig js // src/parseconfig js import parse from 'parse'; // insert your actual back4app keys here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemple src/app riot riot js crud app engagez et poussez votre code initialisez un dépôt git (si ce n'est pas déjà fait) git init ajoutez vos fichiers git add engagez vos modifications git commit m "engagement initial pour le frontend riot js" créez un dépôt github (par exemple, basic crud app riotjs frontend ) et poussez votre code git remote add origin https //github com/your username/basic crud app riotjs frontend git git push u origin main 7 3 intégrez votre dépôt github avec le déploiement web back4app déploiement web connectez vous à votre tableau de bord back4app, sélectionnez votre projet ( basic crud app riotjs ), et cliquez sur déploiement web connectez vous à github suivez les instructions pour lier votre compte et votre dépôt github choisissez votre dépôt et votre branche sélectionnez votre dépôt (par exemple, basic crud app riotjs frontend ) et la branche appropriée (comme main ) 7 4 configuration de déploiement commande de construction si votre dépôt n'a pas de dossier de construction , spécifiez la commande de construction (par exemple, npm run build ) back4app l'exécutera répertoire de sortie définissez ceci sur build pour indiquer où se trouvent vos fichiers statiques variables d'environnement incluez toutes les variables nécessaires (comme les clés api) dans votre configuration 7 5 dockeriser votre application riot js (optionnel) si vous préférez un déploiement conteneurisé, ajoutez un dockerfile à votre projet \# use an official node image to build the app from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire app and build it 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;"] sélectionnez l'option docker dans vos paramètres de déploiement web si vous choisissez cette voie 7 6 lancez votre application déployer cliquez sur le déployer bouton après avoir configuré vos paramètres surveiller le processus back4app récupérera votre code, exécutera la commande de construction et déploiera votre application dans un conteneur obtenez votre url une fois déployé, back4app fournit une url où votre application riot js est hébergée 7 7 validez votre déploiement visitez l'url ouvrez l'url fournie dans votre navigateur testez l'application confirmez que toutes les routes et ressources (css, javascript, images) fonctionnent correctement déboguer utilisez les outils de développement du navigateur et les journaux de back4app si des problèmes surviennent étape 8 – conclusion et orientations futures félicitations ! vous avez construit une application crud entièrement fonctionnelle en utilisant riot js et back4app vous avez mis en place un projet appelé basic crud app riotjs , conçu un schéma de base de données robuste pour les éléments et les utilisateurs, et géré vos données avec l'application admin vous avez intégré votre frontend riot js et mis en œuvre des mesures de sécurité telles que les acl prochaines étapes améliorez le frontend ajoutez des fonctionnalités telles que des vues détaillées, des capacités de recherche et des mises à jour en temps réel élargissez la fonctionnalité explorez des opérations backend avancées telles que les fonctions cloud ou intégrez des api tierces approfondissez vos connaissances visitez la documentation de back4app https //www back4app com/docs et d'autres ressources pour optimiser et étendre votre application avec ces étapes, vous avez maintenant l'expertise pour construire des applications crud évolutives en utilisant riot js et back4app bon codage !