Créer une application CRUD de base avec Cycle.js : Un guide complet

aperçu ce guide vous accompagnera dans la construction d'une application crud (créer, lire, mettre à jour et supprimer) complète en utilisant cycle js dans ce tutoriel, vous configurerez un projet back4app intitulé basic crud app cyclejs qui servira de backend robuste pour votre application vous apprendrez à concevoir un modèle de données évolutif, à gérer vos données via l'application d'administration intuitive de back4app, et à intégrer votre frontend cycle js avec back4app en utilisant des appels rest/graphql à la fin, vous disposerez d'une application web prête pour la production capable d'exécuter des opérations crud ainsi que d'authentifier les utilisateurs et de gérer les données de manière sécurisée principales informations construire un système crud fonctionnel avec un backend fiable acquérir une expérience pratique dans l'architecture d'un modèle de données évolutif utiliser un outil d'administration par glisser déposer pour une gestion des données sans faille intégrer un frontend cycle js avec back4app via rest/graphql apprendre 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 projet actif si vous avez besoin d'aide, consultez démarrer avec back4app https //www back4app com/docs/get started/new parse app une configuration de développement cycle js utilisez des outils comme create cycle app https //github com/cyclejs community/create cycle app et assurez vous que node js (version 14 ou ultérieure) est installé une familiarité avec javascript, cycle js et les api rest pour un rappel, consultez la documentation de cycle js https //cycle js org/ étape 1 – initialisation du projet création d'un nouveau projet back4app connectez vous à votre compte back4app appuyez sur le bouton “nouvelle application” sur votre tableau de bord attribuez le nom du projet basic crud app cyclejs et suivez les instructions de configuration créer un nouveau projet après la création, votre projet sera visible sur le tableau de bord, prêt pour la configuration et la gestion du backend étape 2 – définir le schéma de votre base de données structurer votre modèle de données pour cette application crud, vous allez créer plusieurs collections pour gérer vos données ci dessous, des exemples de collections avec des champs essentiels et des types de données 1\ collection d'articles cette collection stockera les détails de chaque article champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne le titre de l'article description chaîne un bref résumé de l'élément créé à date l'horodatage de l'ajout de l'élément mis à jour le date l'horodatage de la dernière mise à jour 2\ collection des utilisateurs cette collection gère les détails des utilisateurs et l'authentification champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne l'identifiant unique de l'utilisateur email chaîne l'adresse e mail de l'utilisateur hash de mot de passe chaîne mot de passe crypté pour une authentification sécurisée créé à date horodatage de création du compte mis à jour le date horodatage de la mise à jour la plus récente vous pouvez définir ces collections manuellement via le tableau de bord back4app en créant de nouvelles classes et en configurant les champs correspondants créer une nouvelle classe pour ajouter des champs, choisissez le type de données, fournissez un nom de champ, définissez éventuellement une valeur par défaut et marquez le champ comme requis si nécessaire créer une colonne automatisation de la création de schémas avec l'agent ai de back4app l'agent ai de back4app simplifie la création de schémas en générant automatiquement votre modèle de données basé sur une invite fournie cela garantit un design de base de données cohérent et efficace étapes pour utiliser l'agent ai accédez à l'agent ai connectez vous à votre tableau de bord back4app et sélectionnez l'agent ai dans le menu ou les paramètres du projet détaillez vos exigences en matière de données saisissez une invite complète qui énumère les collections nécessaires et leurs champs examinez et appliquez examinez le schéma généré automatiquement et appliquez le à 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 fonctionnalité permet non seulement de gagner du temps, mais garantit également un schéma bien structuré et optimisé étape 3 – activation de l'application admin et gestion des opérations crud exploration de l'application admin l'application admin de back4app fournit une interface sans code, par glisser déposer pour une gestion des données backend sans effort elle rationalise les opérations crud pour vos collections activation de l'application admin ouvrez le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant votre premier utilisateur administrateur cette action initialisera également les rôles système (par exemple, b4aadminuser ) activer l'application admin après activation, connectez vous à l'application admin pour commencer à 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 ajouter des enregistrements cliquez sur le bouton “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour insérer de nouvelles entrées voir/modifier des enregistrements sélectionnez un enregistrement existant pour inspecter les détails ou modifier les champs supprimer des enregistrements utilisez l'option de suppression pour éliminer les entrées indésirables cette interface conviviale améliore considérablement la gestion et l'administration de vos données étape 4 – intégration de cycle js avec back4app maintenant que votre backend fonctionne via back4app, il est temps d'intégrer votre frontend cycle js option utilisation des api rest/graphql nous nous concentrerons sur les appels d'api rest pour interagir avec votre backend voici un exemple de composant cycle js qui récupère et affiche des éléments de votre base de données back4app en utilisant le driver http de cycle exemple récupération et affichage d'éléments avec cycle js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, ul, li, input, button, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; function main(sources) { // intent capture add item interactions const addclick$ = sources dom select(' add') events('click'); // model make an http request to fetch items const request$ = xs of({ url 'https //parseapi back4app com/classes/items', category 'items', method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); // intent handle http responses const items$ = sources http select('items') flatten() map(res => res body results); // view render the items list const vdom$ = items$ startwith(\[]) map(items => div(\[ h1('items'), button(' add', 'add item'), ul( items map(item => li(`${item title} — ${item description}`) ) ) ]) ); return { dom vdom$, http request$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); ce code d'exemple démontre comment utiliser cycle js pour effectuer une requête http get afin de récupérer des éléments et de les rendre dynamiquement étape 5 – sécuriser votre backend application des listes de contrôle d'accès (acls) sécurisez vos objets en définissant des acl par exemple, lors de la création d'un élément privé async function createprivateitem(data, owneruser) { const newitem = { title data title, description data description }; // define acl restrict access to the owner only newitem acl = { \[owneruser id] { read true, write true }, ' ' { read false, write false } }; try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify(newitem) }); const result = await response json(); console log('created item ', result); } catch (error) { console error('error creating item ', error); } } configuration des autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin de garantir que seuls les utilisateurs authentifiés peuvent accéder aux informations sensibles étape 6 – mise en œuvre de l'authentification des utilisateurs configuration de l'enregistrement et de la connexion des comptes back4app utilise une classe utilisateur pour l'authentification utilisez des appels api rest pour gérer les inscriptions et les connexions des utilisateurs dans votre application cycle js voici un exemple de gestion de l'inscription des utilisateurs async function signupuser(userdata) { try { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username userdata username, password userdata password, email userdata email }) }); const result = await response json(); alert('registration successful!'); return result; } catch (error) { alert('registration error ' + error message); } } vous pouvez reproduire des modèles similaires pour la connexion des utilisateurs et la gestion des sessions étape 7 – déployer votre frontend cycle js avec le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application cycle js sans effort via l'intégration avec votre dépôt github 7 1 préparer votre build de production ouvrez votre répertoire de projet dans un terminal exécutez la commande de build npm run build cela crée un build répertoire avec des fichiers statiques optimisés confirmer le build assurez vous que le build dossier contient un index html et des répertoires d'actifs associés 7 2 organiser et télécharger votre code source votre dépôt git doit inclure l'ensemble de l'application cycle js source un exemple de structure de fichiers basic crud app cyclejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── src/ │ ├── main js │ ├── httpdrivers js │ └── components/ │ ├── itemslist js │ └── auth js ├── package json └── readme md fichier d'exemple src/main js import xs from 'xstream'; import {run} from '@cycle/run'; import {div, h1, makedomdriver} from '@cycle/dom'; import {makehttpdriver} from '@cycle/http'; import itemslist from ' /components/itemslist'; function main(sources) { const itemsvtree$ = itemslist(sources); const vdom$ = itemsvtree$ map(tree => div(\[ h1('cycle js crud application'), tree ]) ); return { dom vdom$ }; } const drivers = { dom makedomdriver('#app'), http makehttpdriver() }; run(main, drivers); s'engager sur github initialiser un dépôt git (si ce n'est pas déjà fait) git init mettre en scène vos fichiers git add engagez votre travail git commit m "engagement initial pour le frontend cycle js" créer un dépôt github (par exemple, basic crud app cyclejs frontend ) pousser votre dépôt git remote add origin https //github com/votre nom utilisateur/basic crud app cyclejs frontend git git push u origin main 7 3 lier votre dépôt avec le déploiement web accéder au déploiement web connectez vous à back4app, accédez à votre projet ( basic crud app cyclejs ) et sélectionnez la fonctionnalité de déploiement web connectez vous à github suivez les instructions pour lier votre compte github afin que back4app puisse accéder à votre dépôt sélectionnez le dépôt et la branche choisissez votre dépôt (par exemple, basic crud app cyclejs frontend ) et la branche (généralement main ) 7 4 paramètres de déploiement commande de construction si votre dépôt n'a pas de dossier de construction , spécifiez une commande de construction (par exemple, npm run build ) répertoire de sortie définissez ceci sur build afin que back4app sache où trouver les fichiers statiques variables d'environnement incluez toutes les clés api ou détails de configuration nécessaires 7 5 dockeriser votre application cycle js si vous optez pour le déploiement docker, ajoutez un dockerfile à votre dépôt \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run npm install \# copy the remaining files copy \# build the cycle js application run npm run build \# use nginx to serve the built files 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 votre configuration de déploiement web si vous choisissez de containeriser votre application 7 6 lancement de votre application déployez votre application cliquez sur le déployer bouton après avoir configuré vos paramètres surveillez le déploiement back4app récupérera votre code depuis github, construira l'application (si configuré) et la déploiera accédez à votre application une fois le déploiement terminé, back4app fournira une url pour votre application cycle js en direct 7 7 tester votre déploiement visitez l'url déployée ouvrez l'url fournie dans votre navigateur confirmez la fonctionnalité assurez vous que toutes les routes et les ressources se chargent correctement déboguez si nécessaire utilisez les outils de développement du navigateur et consultez les journaux de déploiement de back4app pour résoudre tout problème étape 8 – conclusion et améliorations futures félicitations ! vous avez réussi à créer une application crud en utilisant cycle js et back4app vous avez mis en place un projet intitulé basic crud app cyclejs , défini votre schéma de base de données pour les éléments et les utilisateurs, et géré vos données via l'application admin intuitive de plus, vous avez intégré votre frontend cycle js avec votre backend en utilisant rest/graphql et sécurisé vos données avec des contrôles d'accès appropriés prochaines étapes développez votre frontend ajoutez des vues plus avancées, des filtres ou des mises à jour en temps réel intégrez des fonctionnalités backend supplémentaires envisagez d'ajouter des fonctions cloud, des api tierces ou un contrôle d'accès basé sur les rôles apprentissage supplémentaire explorez la documentation de back4app https //www back4app com/docs pour des informations supplémentaires sur l'optimisation des performances et les intégrations personnalisées avec ce guide, vous possédez désormais les compétences nécessaires pour construire un backend crud évolutif pour votre application cycle js en utilisant back4app bon codage !